/* ===========================================================
   SLEEPY PANDA PRODUCTIONS — brand system
   Palette: black / white / grey + lavender & gold accents
   Type: Bricolage Grotesque (display) + Inter (body)
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --ink:#0c0a11;
  --ink-2:#100d16;
  --panel:#161220;
  --panel-2:#1d1728;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);
  --line-gold:rgba(230,189,106,.24);

  /* lavender (primary accent — from the logo) */
  --lav:#b9a7f5;
  --lav-bright:#9b7dff;
  --lav-deep:#6f4fd6;
  --lav-glow:rgba(155,125,255,.16);

  /* gold (secondary accent) */
  --gold:#e6bd6a;
  --gold-soft:#c9a24b;
  --gold-glow:rgba(230,189,106,.14);

  /* ink/paper text */
  --paper:#f1eef7;
  --dim:#a8a2bb;
  --dimmer:#746e89;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- type ---------- */
.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:.98}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.02}
.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  color:var(--gold-soft);
}
.lav{color:var(--lav)}
.gold{color:var(--gold)}
.muted{color:var(--dim)}

/* gradient ink for hero words */
.grad{
  background:linear-gradient(106deg,#fff 0%, var(--lav) 52%, var(--gold) 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{position:relative}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 26px;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,10,17,.85);backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid var(--line-2);padding:11px 26px;
}
.nav .brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque';font-weight:700;font-size:16px;letter-spacing:-.01em}
.nav .brand img{height:34px;width:auto}
.nav .brand b{font-weight:700}
.nav .brand .pp{color:var(--lav)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;color:var(--dim);font-weight:500;transition:color .25s}
.nav-links a:hover{color:var(--paper)}
.nav-burger{display:none;background:none;border:0;color:var(--paper);cursor:pointer}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Inter';font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  transition:transform .2s var(--ease), filter .25s, background .25s, border-color .25s, color .25s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#241a08}
.btn-gold:hover{filter:brightness(1.07)}
.btn-lav{background:linear-gradient(135deg,var(--lav-bright),var(--lav-deep));color:#fff}
.btn-lav:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--paper);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--lav);color:#fff}
.btn-lg{padding:16px 28px;font-size:16px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-2);padding:64px 0 48px;margin-top:40px}
.foot-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot .brand-block{max-width:340px}
.foot .brand-block img{height:64px;margin-bottom:16px}
.foot p{color:var(--dim);font-size:15px}
.foot-col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px;font-family:'Inter';font-weight:600}
.foot-col a{display:block;color:var(--dim);font-size:15px;margin-bottom:11px;transition:color .2s}
.foot-col a:hover{color:var(--lav)}
.foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--dimmer);font-size:13px}

/* ---------- reveal (reduced-motion safe) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- bits ---------- */
.tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:6px 13px;border-radius:999px;border:1px solid var(--line-gold);color:var(--gold);background:var(--gold-glow)}
.tag.lav{border-color:rgba(155,125,255,.3);color:var(--lav);background:var(--lav-glow)}
.zzz{color:var(--lav);font-weight:700;font-family:'Bricolage Grotesque'}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  body{font-size:16px}
}