/* ======== CSS VARIABLES & PALETTE ======== */
:root{
  --font-body:'Manrope';
  --font-heading:'Albert Sans';
  --bg:#EDE6D6;--bg-deep:#E4DCC9;--bg-deeper:#D9D0BB;
  --ink:#0F1F2D;
  --ink-90:rgba(15,31,45,.92);--ink-70:rgba(15,31,45,.7);--ink-50:rgba(15,31,45,.5);--ink-30:rgba(15,31,45,.3);--ink-12:rgba(15,31,45,.12);--ink-08:rgba(15,31,45,.08);
  --brick:#7C3AED;--brick-deep:#6326CC;
  --sage:#5A6B5A;--sage-light:rgba(90,107,90,.18);
  --bg-92:rgba(237,230,214,.92);--bg-96:rgba(237,230,214,.96);--bg-grid:rgba(15,31,45,.04);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);
  --shell:min(1280px, 100% - 48px);
}

html[data-palette="acqua-light"]{
  --bg:#F2F0F7;--bg-deep:#E8E5F2;--bg-deeper:#DDD9EC;
  --ink:#1A1428;
  --ink-90:rgba(26,20,40,.92);--ink-70:rgba(26,20,40,.7);--ink-50:rgba(26,20,40,.5);--ink-30:rgba(26,20,40,.3);--ink-12:rgba(26,20,40,.12);--ink-08:rgba(26,20,40,.08);
  --brick:#7C3AED;--brick-deep:#6326CC;
  --sage:#197A72;--sage-light:rgba(25,122,114,.15);
  --bg-92:rgba(242,240,247,.92);--bg-96:rgba(242,240,247,.96);--bg-grid:rgba(26,20,40,.04);
}
html[data-palette="acqua-dark"]{
  --bg:#1E2438;--bg-deep:#252C42;--bg-deeper:#2C354E;
  --ink:#EAEBf7;
  --ink-90:rgba(234,235,247,.93);--ink-70:rgba(234,235,247,.72);--ink-50:rgba(234,235,247,.5);--ink-30:rgba(234,235,247,.3);--ink-12:rgba(234,235,247,.12);--ink-08:rgba(234,235,247,.08);
  --brick:#B572F8;--brick-deep:#9852E0;
  --sage:#2AB0A0;--sage-light:rgba(42,176,160,.18);
  --bg-92:rgba(30,36,56,.94);--bg-96:rgba(30,36,56,.96);--bg-grid:rgba(234,235,247,.04);
}

/* ======== RESET ======== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body),ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .4s var(--ease-out),color .4s var(--ease-out)}
body{min-height:100vh;line-height:1.5;font-feature-settings:"kern","ss01"}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading),ui-sans-serif,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--bg)}

/* ======== PAPER GRID ======== */
.paper-grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,var(--bg-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--bg-grid) 1px,transparent 1px);background-size:96px 96px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);opacity:.7}

/* ======== WORDMARK ======== */
.wm{display:inline-block;line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:-.012em;font-family:'DM Sans',sans-serif;font-weight:500}
.wm .stl{display:inline-block}
.wm .lab{font-family:'Shadows Into Light',cursive;text-transform:uppercase;font-size:.55em;vertical-align:.45em;letter-spacing:.08em;margin-left:.4em;display:inline-block;color:var(--brick);font-weight:700}

/* ======== HEADER ======== */
header.site{position:fixed;top:0;left:0;right:0;z-index:52;padding:18px 0;padding-top:max(18px,env(safe-area-inset-top));background:linear-gradient(to bottom,var(--bg) 0%,var(--bg-92) 70%,transparent 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s var(--ease-out),border-color .3s var(--ease-out);border-bottom:1px solid transparent}
header.site.scrolled{background:var(--bg-96);border-bottom-color:var(--ink-12)}
.header-inner{width:var(--shell);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.header-inner .wm{font-size:46px}
.header-end{display:flex;align-items:center;gap:12px}
nav.primary{display:flex;gap:32px;align-items:center;font-weight:400;font-size:15px;color:var(--ink-70);font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:0}
nav.primary a{position:relative;padding:4px 0;transition:color .25s var(--ease-out)}
nav.primary a.active{color:var(--ink)}
nav.primary a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brick);transform:scaleX(1)}
nav.primary a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brick);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
nav.primary a:hover{color:var(--brick)}
nav.primary a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:880px){nav.primary{display:none}}

/* ======== THEME TOGGLE ======== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--ink-30);color:var(--ink-70);transition:border-color .25s var(--ease-out),color .25s var(--ease-out),background .25s var(--ease-out);flex-shrink:0;cursor:pointer}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}
.theme-toggle svg{display:block}

/* ======== COMMON COMPONENTS ======== */
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--sage);display:inline-flex;align-items:center;gap:10px}

.section-label{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;margin-bottom:64px;padding:32px 0;position:relative;isolation:isolate}
.section-label::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background-image:linear-gradient(to right,var(--bg-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--bg-grid) 1px,transparent 1px);background-size:48px 48px;background-attachment:fixed;z-index:-1}
.section-label .label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--sage);white-space:nowrap;font-weight:700}
.section-label .label b{color:var(--ink-30);font-weight:400}
/* ======== BUTTONS ======== */
.btn-primary{display:inline-flex;align-items:center;gap:14px;font-weight:500;font-size:18px;background:var(--ink);color:var(--bg);padding:16px 48px;border-radius:999px;transition:transform .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out);position:relative;overflow:hidden;box-shadow:0 1px 0 var(--ink-08);font-family:var(--font-body),ui-sans-serif,system-ui,sans-serif}
.btn-primary .arrow{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;transform:scale(1.7);transition:transform .4s var(--ease-out)}
.btn-primary:hover{background:var(--brick);transform:translateY(-1px);box-shadow:0 8px 24px -8px var(--brick)}
.btn-primary:hover .arrow{transform:translateX(4px) scale(1.7)}
.btn-primary:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.btn-secondary{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:17px;color:var(--ink);padding:14px 4px;position:relative;font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase}
.btn-secondary::after{content:"";position:absolute;left:0;right:24px;bottom:8px;height:1px;background:var(--brick);transform:scaleX(.4);transform-origin:left;transition:transform .4s var(--ease-out)}
.btn-secondary:hover{color:var(--brick)}
.btn-secondary:hover::after{transform:scaleX(1)}
.btn-secondary .arrow{transition:transform .35s var(--ease-out);font-size:1.7em;position:relative;bottom:4px}
.btn-secondary:hover .arrow{transform:translateX(4px)}
.nav-cta{padding:10px 20px;font-size:14px;letter-spacing:normal;text-transform:none}
.nav-cta:hover{color:var(--bg)}

/* ======== FOOTER ======== */
footer.site{background:#0F1F2D;color:rgba(237,230,214,.78);padding:64px 0 32px;padding-bottom:max(32px,env(safe-area-inset-bottom));position:relative;z-index:2}
footer.site .shell-foot{width:var(--shell);margin:0 auto}
footer.site .top{display:flex;align-items:start;justify-content:space-between;gap:48px;padding-bottom:48px}
footer.site .wm{color:#EDE6D6;font-size:48px}
footer.site .wm .lab{color:#B572F8}
footer.site .tagline{margin-top:14px;font-size:18px;color:rgba(237,230,214,.55);max-width:38ch}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;font-size:13px;font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}
footer.site nav a{color:#EDE6D6;transition:color .2s;position:relative}
footer.site nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brick);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
footer.site nav a:hover{color:var(--brick)}
footer.site nav a:hover::after{transform:scaleX(1);transform-origin:left}
footer.site .copy{margin-top:24px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.05em;color:rgba(237,230,214,.4)}
@media (max-width:760px){footer.site .top{flex-direction:column}footer.site nav{display:none}footer.site .wm{font-size:32px}footer.site .tagline{font-size:14px}}


/* ======== REDUCED MOTION ======== */
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}

/* ======== SMOOTH COLOR TRANSITIONS ON PALETTE SWITCH ======== */
header.site,section,footer.site,.btn-primary,.btn-secondary{transition:background-color .45s var(--ease-out),color .45s var(--ease-out),border-color .45s var(--ease-out)}

/* ======== HAMBURGER ======== */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;flex-shrink:0;border-radius:4px;transition:background .2s var(--ease-out)}
.hamburger span{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease-out),opacity .25s var(--ease-out)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:880px){.hamburger{display:flex;order:2}.theme-toggle{order:1}}

/* ======== MOBILE NAV OVERLAY ======== */
@media (max-width:880px){
  nav.primary{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);box-shadow:0 8px 24px var(--ink-12);display:flex;flex-direction:column;align-items:stretch;padding:16px 24px 24px;gap:0;visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s,background-color .45s var(--ease-out)}
  nav.primary.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
  nav.primary a{font-size:17px;font-family:var(--font-heading),ui-sans-serif,system-ui,sans-serif;font-weight:500;color:var(--ink-70);padding:12px 0;border-bottom:1px solid var(--ink-08);letter-spacing:-.01em;transition:color .2s ease}
  nav.primary a:last-child{border-bottom:none}
  nav.primary a:hover,nav.primary a.active{color:var(--ink)}
  nav.primary a.active::after,nav.primary a::after{display:none}
  .nav-cta{display:none}
  body.nav-open{overflow:hidden}
}