/* ============================================================================
   OrdaForma v2 — APP STYLES
   Built on tokens.css. Class names mirror the existing JS (site.js / shell.js /
   index.html) so all interactions keep working — this file changes the LOOK,
   not the behavior. Sections:
     0 Reset   1 Base/Type   2 Buttons   3 Forms   4 Shell (sidebar)
     5 Hero    6 Node-map    7 Sections/Chapters   8 Cards/Grid
     9 Newsletter   10 Search drawer   11 Popup   12 Toast   13 Footer
     14 Reveal/Burst   15 Responsive
   ============================================================================ */

/* ---- 0) RESET ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink-2);
  font:var(--t-body); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* Single fixed background layer — no `background-attachment:fixed` seam/cut-line while scrolling */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--grad-hero); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

/* ---- 1) BASE TYPE ------------------------------------------------------- */
h1{ font:var(--t-h1); color:var(--ink); letter-spacing:var(--tracking-tight); }
h2{ font:var(--t-h2); color:var(--ink); letter-spacing:var(--tracking-snug); }
h3{ font:var(--t-h3); color:var(--ink); letter-spacing:var(--tracking-snug); }
h4{ font:var(--t-h3); font-size:1rem; color:var(--ink); }
p{ color:var(--ink-2); }
strong{ color:var(--ink); font-weight:650; }

.eyebrow,.kicker{ display:inline-block; font:var(--t-eyebrow);
  text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--blue-600); margin-bottom:var(--sp-3); }
.eyebrow{ padding:6px 12px; border-radius:var(--r-pill);
  background:var(--blue-50); border:1px solid var(--blue-100); }
.lead{ font:var(--t-lead); color:var(--muted); max-width:60ch; }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }
.blue{ background:var(--grad-blue); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--blue-600); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-9); }

/* ---- 2) BUTTONS --------------------------------------------------------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2); padding:13px 26px; border:0; border-radius:var(--r-pill);
  font-weight:600; font-size:.98rem; letter-spacing:var(--tracking-snug);
  color:#fff; background:var(--grad-blue); box-shadow:var(--glow-blue), var(--sh-1);
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-3) var(--ease), filter var(--dur-2) var(--ease); }
.btn::before{ /* glossy top sheen */ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%); }
.btn::after{ /* shine sweep on hover */ content:""; position:absolute; top:0; bottom:0; left:-60%;
  width:45%; z-index:1; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:0; transition:opacity var(--dur-1) linear; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--glow-blue-strong), var(--sh-2); filter:saturate(1.06) brightness(1.03); }
.btn:hover::after{ opacity:1; animation:btnShine .7s var(--ease); }
.btn:active{ transform:translateY(0) scale(.985); }
@keyframes btnShine{ from{ left:-60%; } to{ left:130%; } }

.btn--ghost{ color:var(--blue-700); background:var(--glass-bg-strong);
  border:1px solid var(--glass-border); box-shadow:var(--glass-sheen), var(--sh-1);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.btn--ghost::before{ background:var(--grad-sheen); }
.btn--ghost:hover{ filter:none; box-shadow:var(--sh-2); color:var(--blue-800,#16418f); }
.btn--dark{ background:linear-gradient(135deg,#1a2740,var(--blue-900)); box-shadow:var(--sh-2); }
.btn--dark:hover{ box-shadow:var(--sh-3); }
.btn--block{ width:100%; }
.btn--lg{ padding:16px 34px; font-size:1.05rem; }

/* feature-matched micro-motion (JS adds these classes + a .btn-runner icon) */
.btn-runner{ position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none; opacity:0; z-index:2; }
.btn-runner svg{ width:20px; height:20px; }
.btn--cart:hover .btn-label,.btn--send:hover .btn-label{ opacity:.15; }
.btn--cart:hover .btn-runner{ opacity:1; animation:runRace .62s var(--ease); }
@keyframes runRace{ 0%{ transform:translateX(-150%) rotate(-4deg); opacity:0; }
  18%{ opacity:1; } 82%{ opacity:1; } 100%{ transform:translateX(150%) rotate(4deg); opacity:0; } }
.btn--send:hover .btn-runner{ opacity:1; animation:runFly .62s var(--ease); }
@keyframes runFly{ 0%{ transform:translate(-140%,60%) rotate(-8deg); opacity:0; }
  20%{ opacity:1; } 100%{ transform:translate(150%,-70%) rotate(10deg); opacity:0; } }
.btn--go{ padding-right:34px; }
.btn--go::after{ content:"→"; position:absolute; right:16px; top:50%; z-index:2;
  transform:translateY(-50%); font-weight:700; transition:transform var(--dur-2) var(--spring); opacity:.95; }
.btn--go:hover::after{ transform:translate(4px,-50%); }

/* ---- 3) FORMS ----------------------------------------------------------- */
input,textarea,select{ width:100%; font:var(--t-body); color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:12px 14px; transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
input::placeholder,textarea::placeholder{ color:var(--faint); }
input:focus,textarea:focus,select:focus{ outline:0; border-color:var(--blue-400);
  box-shadow:0 0 0 4px var(--blue-50); }
label{ display:block; font-weight:600; font-size:.9rem; color:var(--ink-2); margin-bottom:6px; }
.field{ margin-bottom:var(--sp-4); }

/* ---- 4) SHELL: glossy navy sidebar ------------------------------------- */
.hub-shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.hub-sidebar{ position:sticky; top:0; align-self:start; height:100vh; z-index:var(--z-sidebar);
  display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5) var(--sp-4);
  color:#eaf1ff; overflow:auto;
  background:
     radial-gradient(120% 60% at 20% 0%, rgba(90,140,240,.35), transparent 60%),
     linear-gradient(180deg, #163a86 0%, #12306b 46%, #0e2450 100%);
  border-right:1px solid rgba(255,255,255,.1);
  box-shadow:24px 0 60px -40px rgba(12,30,80,.7), inset -1px 0 0 rgba(255,255,255,.06); }
.hub-sidebar::before{ /* glossy top-edge highlight */ content:""; position:absolute; inset:0;
  pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%); }
.hub-brand{ display:flex; justify-content:center; padding:var(--sp-3) var(--sp-2) var(--sp-4); }
.hub-brand img{ width:132px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.hub-nav{ display:flex; flex-direction:column; gap:3px; }
.hub-nav .grp{ font:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:rgba(190,214,255,.62); padding:var(--sp-4) var(--sp-3) 6px; }
.hub-nav a, .hub-nav .search-open{ display:flex; align-items:center; gap:var(--sp-3); padding:11px 13px; width:100%; text-align:left;
  border-radius:var(--r-sm); color:rgba(232,241,255,.86); font-weight:550; font-size:.97rem; position:relative; cursor:pointer;
  transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.hub-nav a .ic, .hub-nav .search-open .ic{ display:grid; place-items:center; width:22px; height:22px; opacity:.9; }
.hub-nav a .ic svg, .hub-nav .search-open .ic svg{ width:20px; height:20px; }
.hub-nav a:hover, .hub-nav .search-open:hover{ background:rgba(255,255,255,.1); transform:translateX(3px); color:#fff; }
.hub-nav a.active{ background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.hub-nav a.active::before{ content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:3px; background:linear-gradient(180deg,#8fd0ff,#3f86ff);
  box-shadow:0 0 12px rgba(120,180,255,.8); }
.hub-cart{ margin-top:auto; display:flex; align-items:center; gap:var(--sp-3); padding:12px 14px;
  border-radius:var(--r-md); font-weight:600; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--glass-sheen); transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.hub-cart:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }
.hub-cart .ic svg{ width:20px; height:20px; }
.cart-count{ margin-left:auto; min-width:22px; height:22px; padding:0 6px; display:none;
  align-items:center; justify-content:center; border-radius:var(--r-pill); font-size:.76rem; font-weight:700;
  color:#fff; background:var(--grad-blue); box-shadow:var(--glow-blue); }
.hub-foot{ font-size:.72rem; line-height:1.5; color:rgba(200,218,255,.5); text-align:center; padding-top:var(--sp-2); }

.hub-main{ min-width:0; }

/* mobile burger */
.hub-burger{ position:fixed; top:14px; left:14px; z-index:calc(var(--z-sidebar) + 1);
  width:46px; height:46px; border-radius:var(--r-sm); display:none; place-items:center;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  box-shadow:var(--glass-sheen), var(--sh-2);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); }
.hub-burger::before,.hub-burger::after,.hub-burger span{ content:""; }
.hub-burger{ background-image:
  linear-gradient(var(--blue-700),var(--blue-700)),
  linear-gradient(var(--blue-700),var(--blue-700)),
  linear-gradient(var(--blue-700),var(--blue-700)); background-repeat:no-repeat;
  background-size:20px 2px; background-position:center 17px, center 23px, center 29px; }

/* ---- 5) HERO (spatial) -------------------------------------------------- */
.spatial{ position:relative; overflow:hidden; padding:clamp(64px,12vh,140px) var(--gutter) clamp(60px,10vh,120px);
  min-height:min(88vh,760px); display:grid; align-items:center; }
.spatial-inner{ position:relative; z-index:3; max-width:640px; }
.spatial h1{ font:var(--t-display); letter-spacing:var(--tracking-tight); margin:var(--sp-2) 0 var(--sp-4); }
.spatial-inner>p{ font:var(--t-lead); color:var(--muted); max-width:52ch; margin-bottom:var(--sp-5); }
.spatial-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.orb{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.6; z-index:1; will-change:transform;
  transition:transform .3s var(--ease-out); }
.orb.b1{ width:340px; height:340px; right:-40px; top:-40px;
  background:radial-gradient(circle at 30% 30%, var(--blue-300), var(--blue-600)); opacity:.4; }
.orb.b2{ width:260px; height:260px; right:22%; bottom:-60px;
  background:radial-gradient(circle at 40% 40%, #bcd4ff, var(--blue-400)); opacity:.34; }
.orb.b3{ width:200px; height:200px; left:-40px; bottom:10%;
  background:radial-gradient(circle at 50% 40%, #fff5e0, var(--ivory-2)); opacity:.5; }
.glass-card-float{ position:absolute; z-index:2; padding:14px 18px; border-radius:var(--r-md);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  box-shadow:var(--glass-sheen), var(--sh-3); will-change:transform;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.glass-card-float .k{ font:var(--t-caption); color:var(--muted); }
.glass-card-float .v{ font-weight:700; color:var(--ink); font-size:1.02rem; }
.gcf1{ right:8%; top:20%; } .gcf2{ right:20%; bottom:16%; }
.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:8px; font:var(--t-caption); color:var(--muted); }
.scroll-hint .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue-500);
  box-shadow:var(--glow-blue); animation:scrollDot 1.8s var(--ease-in-out) infinite; }
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(6px); opacity:.4; } }

/* ---- 6) NODE-MAP (constellation) --------------------------------------- */
.hub-map{ position:relative; width:min(100%,1000px); margin:var(--sp-6) auto 0;
  aspect-ratio:1000/560; max-height:70vh; }
.hub-map .links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
.hub-map .links line{ stroke:var(--line-strong); stroke-width:1.5; vector-effect:non-scaling-stroke;
  opacity:0; transition:opacity var(--dur-4) var(--ease); }
.hub-map .links line.link-mystery{ stroke:var(--ivory-line); stroke-dasharray:5 7; }
.hub-map.expanded .links line{ opacity:.55; }
.hub-map.expanded .links line.link-mystery{ opacity:.8; animation:dashDrift 6s linear infinite; }
@keyframes dashDrift{ to{ stroke-dashoffset:-48; } }

.hub-map .node{ position:absolute; left:50%; top:50%; z-index:2; width:132px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  transform:translate(-50%,-50%) scale(.04); opacity:0; }
.hub-map .node.center{ transform:translate(-50%,-50%) scale(1); opacity:1; z-index:4; }
.hub-map:not(.expanded) .node:not(.center){ pointer-events:none; }

.orb-btn{ position:relative; width:94px; height:94px; border-radius:50%; display:grid; place-items:center;
  color:var(--blue-600);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  box-shadow:var(--glass-sheen), var(--sh-3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease); }
.orb-btn::after{ /* glossy specular cap */ content:""; position:absolute; left:14%; top:8%; width:52%; height:38%;
  border-radius:50%; background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.9), transparent 70%);
  pointer-events:none; }
.orb-btn svg{ width:38px; height:38px; transition:transform var(--dur-3) var(--spring); }
.node .lbl{ font-weight:650; font-size:1rem; color:var(--ink); letter-spacing:var(--tracking-snug); }
.node .sub{ font-size:.8rem; color:var(--muted); margin-top:-4px; }

/* core orb */
.node.center .orb-btn{ width:126px; height:126px; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, #ffffff, #eef3fb);
  box-shadow:var(--glass-sheen), var(--sh-4), var(--glow-blue); }
.node.center .orb-btn img{ width:66%; }
.node.center .hint{ font:var(--t-caption); color:var(--blue-600); font-weight:600; }
/* breathing invitation ring on the core (paused once expanded) */
.node.center .orb-btn::before{ content:""; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--blue-300); opacity:.6; animation:corePulse 2.6s var(--ease-in-out) infinite; }
.hub-map.expanded .node.center .orb-btn::before{ animation:none; opacity:0; }
@keyframes corePulse{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } }

/* node hover (only meaningful once expanded) — no transform (JS owns transform) */
.hub-map.expanded .node:hover .orb-btn{ box-shadow:var(--glass-sheen), var(--sh-4), var(--glow-blue-strong);
  border-color:var(--blue-200); }
.hub-map.expanded .node:hover .orb-btn svg{ transform:scale(1.14); }
.hub-map.expanded .node:hover .lbl{ color:var(--blue-700); }
.node.center:hover .orb-btn img{ transform:scale(1.05); transition:transform var(--dur-3) var(--spring); }

/* mystery node */
.node.mystery .orb-btn{ color:var(--ivory-ink); background:var(--grad-ivory); border-color:var(--ivory-border,#efe3c6); }
.node.mystery .q{ font-weight:800; font-size:2rem; color:#3a3320;
  text-shadow:1px 0 rgba(255,90,90,.5), -1px 0 rgba(90,120,255,.5); }
.node.mystery .crt{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); opacity:.5; }

/* shockwave rings on burst (JS appends .shock/.s2/.s3) */
.shock{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%; border:2px solid var(--blue-300); opacity:0; z-index:1; pointer-events:none; }
.hub-map.bursting .shock{ animation:shockwave 1.1s var(--ease-out) forwards; }
.hub-map.bursting .shock.s2{ animation-delay:.1s; border-color:var(--blue-200); }
.hub-map.bursting .shock.s3{ animation-delay:.2s; border-color:var(--ivory-line); }
@keyframes shockwave{ 0%{ transform:scale(.3); opacity:.7; } 100%{ transform:scale(4.4); opacity:0; } }

/* sparks (JS appends; transition drives the flight) */
.spark{ position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 40% 40%, #fff, var(--blue-400));
  box-shadow:0 0 8px rgba(90,150,255,.8); pointer-events:none;
  transition:transform var(--dur-5) var(--ease-out), opacity var(--dur-5) ease; }

/* ---- 7) SECTIONS / CHAPTERS -------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.chapter{ padding-block:var(--sp-9); }
.chapter .num{ font:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--blue-600); margin-bottom:var(--sp-3); }
.chapter h2{ margin-bottom:var(--sp-4); }
.chapter .lead{ margin-bottom:var(--sp-3); }
.chapter-figure img{ border-radius:var(--r-xl); box-shadow:var(--sh-3); }
.chapter-figure{ display:flex; flex-direction:column; align-items:flex-start; }
.band-dark{ position:relative; color:#eaf1ff; border-radius:var(--r-2xl); margin-inline:var(--gutter);
  background:radial-gradient(120% 120% at 15% 0%, #1b418f, var(--blue-900));
  box-shadow:var(--sh-4); overflow:hidden; }
.band-dark::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 30%); }
.band-dark h2{ color:#fff; }
.band-dark .lead{ color:#c3d8ff; }
.band-dark .num{ color:#8fb6ff; }

/* ---- 8) CARDS / GRID ---------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-5); }
.card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.card .thumb{ display:block; aspect-ratio:4/3; background:var(--bg-2); overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-4) var(--ease-out); }
.card:hover .thumb img{ transform:scale(1.04); }
.card .body{ display:flex; flex-direction:column; gap:8px; padding:var(--sp-4); }
.card .title{ font-weight:650; color:var(--ink); font-size:1.02rem; }
.card .price{ color:var(--blue-700); font-weight:700; }
.card .btn{ margin-top:6px; }
.soon-tile{ position:relative; display:grid; place-items:center; }
.soon-tile img{ width:44%; height:auto; object-fit:contain; opacity:.5; filter:grayscale(.3); }
.soon-badge{ position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:var(--r-pill);
  font:var(--t-caption); font-weight:700; color:var(--ivory-ink);
  background:var(--grad-ivory); border:1px solid var(--ivory-line); box-shadow:var(--sh-1); }

/* ---- 9) NEWSLETTER ------------------------------------------------------ */
.newsletter{ padding-block:var(--sp-9); }
.newsletter .container{ max-width:var(--maxw-narrow); text-align:center;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  border-radius:var(--r-2xl); padding:clamp(32px,6vw,64px);
  box-shadow:var(--glass-sheen), var(--sh-3);
  -webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); }
.newsletter h2{ margin-bottom:var(--sp-3); }
.newsletter form{ display:flex; gap:var(--sp-3); max-width:480px; margin:var(--sp-5) auto 0; }
.newsletter input{ flex:1; }
@media (max-width:520px){ .newsletter form{ flex-direction:column; } }

/* ---- 10) SEARCH DRAWER -------------------------------------------------- */
.drawer-backdrop{ position:fixed; inset:0; z-index:var(--z-drawer); background:rgba(16,19,26,.4);
  opacity:0; visibility:hidden; transition:opacity var(--dur-3) var(--ease), visibility var(--dur-3); }
.drawer-backdrop.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100vh; width:min(420px,92vw); z-index:calc(var(--z-drawer)+1);
  padding:var(--sp-6) var(--sp-5); overflow:auto; transform:translateX(102%);
  background:var(--glass-bg-strong); border-left:1px solid var(--glass-border);
  box-shadow:var(--sh-4); transition:transform var(--dur-4) var(--ease-out);
  -webkit-backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur-lg)) saturate(var(--glass-sat)); }
.drawer.open{ transform:translateX(0); }
.drawer h3{ margin-bottom:var(--sp-4); }
.drawer .close{ position:absolute; top:16px; right:18px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:1.4rem; line-height:1; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); }
.drawer .close:hover{ color:var(--ink); }
.search-input{ margin-bottom:var(--sp-4); }
.search-result{ display:flex; gap:var(--sp-3); align-items:center; padding:10px; border-radius:var(--r-sm);
  transition:background var(--dur-2) var(--ease); }
.search-result:hover{ background:var(--bg-2); }
.search-result img{ width:52px; height:52px; border-radius:var(--r-xs); object-fit:cover; }

/* ---- 11) NEWSLETTER POPUP ----------------------------------------------- */
.nl-backdrop{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center;
  padding:var(--gutter); background:rgba(16,19,26,.46); opacity:0; visibility:hidden;
  transition:opacity var(--dur-3) var(--ease), visibility var(--dur-3); }
.nl-backdrop.open{ opacity:1; visibility:visible; }
.nl-modal{ position:relative; width:min(440px,100%); padding:clamp(28px,5vw,44px); text-align:center;
  border-radius:var(--r-2xl); background:var(--surface); border:1px solid var(--glass-border);
  box-shadow:var(--sh-4); transform:translateY(18px) scale(.96); opacity:0;
  transition:transform var(--dur-4) var(--spring), opacity var(--dur-3) var(--ease); }
.nl-backdrop.open .nl-modal{ transform:none; opacity:1; }
.nl-badge{ display:inline-block; padding:5px 12px; border-radius:var(--r-pill); font:var(--t-caption);
  font-weight:700; color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100); margin-bottom:var(--sp-3); }
.nl-modal h3{ margin-bottom:var(--sp-2); }
.nl-modal form{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); }
.nl-tiny{ font-size:.76rem; color:var(--faint); margin-top:var(--sp-2); }
.nl-close{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:1.3rem; color:var(--muted); background:var(--bg-2); border:0; }
.nl-success{ display:none; }
.nl-modal.nl-open-success .nl-form{ display:none; }
.nl-modal.nl-open-success .nl-success{ display:block; }
.nl-success .code{ font:700 1.6rem/1 var(--font-mono); letter-spacing:.12em; color:var(--blue-700);
  padding:14px; margin-top:var(--sp-3); border-radius:var(--r-md); background:var(--blue-50); border:1px dashed var(--blue-200); }

/* ---- 12) TOAST ---------------------------------------------------------- */
.toast{ position:fixed; left:50%; bottom:26px; z-index:var(--z-toast); transform:translate(-50%,20px);
  padding:12px 20px; border-radius:var(--r-pill); font-weight:600; color:#fff;
  background:linear-gradient(135deg,#1a2740,var(--blue-900)); box-shadow:var(--sh-3);
  opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--spring); }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---- 13) FOOTER --------------------------------------------------------- */
.site-footer{ margin-top:var(--sp-9); padding-block:var(--sp-7) var(--sp-5);
  border-top:1px solid var(--line); background:var(--surface-2); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-6); }
.site-footer h4{ margin-bottom:var(--sp-3); }
.site-footer a{ color:var(--muted); transition:color var(--dur-2) var(--ease); }
.site-footer a:hover{ color:var(--blue-600); }
.site-footer li{ margin-bottom:8px; }
.footer-bottom{ display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--line);
  font-size:.85rem; color:var(--faint); }

/* ---- 14) REVEAL / ARRIVAL BURST ---------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.page-intro{ animation:pageIn .6s var(--ease-out) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.page-burst{ position:fixed; left:50%; top:46%; z-index:var(--z-burst); pointer-events:none; }
.page-burst .ring{ position:absolute; left:0; top:0; width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%; border:2px solid var(--blue-300); opacity:0; }
@keyframes pageRing{ 0%{ transform:scale(.3); opacity:.7; } 100%{ transform:scale(6); opacity:0; } }

/* ---- 15) RESPONSIVE ----------------------------------------------------- */
@media (max-width:960px){
  .hub-shell{ grid-template-columns:1fr; }
  .hub-sidebar{ position:fixed; top:0; left:0; width:min(300px,84vw); transform:translateX(-102%);
    transition:transform var(--dur-4) var(--ease-out); }
  .hub-sidebar.open{ transform:translateX(0); }
  .hub-burger{ display:grid; }
  .hub-main{ padding-top:64px; }
  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .hub-map{ aspect-ratio:1/1.15; max-height:none; }
  .orb-btn{ width:76px; height:76px; } .orb-btn svg{ width:30px; height:30px; }
  .node.center .orb-btn{ width:104px; height:104px; }
  .hub-map .node{ width:104px; }   /* raise specificity so it beats the base .hub-map .node rule */
  .footer-grid{ grid-template-columns:1fr; }
  .glass-card-float{ display:none; }
}

/* ===========================================================================
   INTERIOR-PAGE COMPONENTS  (shared by catalog / cart / bulk / contact /
   valet / legal pages — reuse these so every page stays cohesive)
   =========================================================================== */
/* Interior page header */
.page-hero{ padding:clamp(48px,8vw,88px) 0 var(--sp-6); text-align:center; }
.page-hero .eyebrow{ margin-bottom:var(--sp-3); }
.page-hero h1{ margin-bottom:var(--sp-3); }
.page-hero .lead{ margin-inline:auto; }
.page-hero--left{ text-align:left; }
.page-hero--left .lead{ margin-inline:0; }

/* Glass content panel (forms, callouts, coming-soon) */
.panel{ background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  border-radius:var(--r-xl); padding:clamp(24px,4vw,40px);
  box-shadow:var(--glass-sheen), var(--sh-2);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.panel--solid{ background:var(--surface); box-shadow:var(--sh-2); -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Centered form container */
.form-card{ max-width:560px; margin-inline:auto; }
.form-card .btn{ width:100%; margin-top:var(--sp-2); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.8rem; color:var(--faint); margin-top:var(--sp-3); text-align:center; }

/* Long-form prose (Terms / Privacy / legal) */
.prose{ max-width:var(--maxw-narrow); margin-inline:auto; }
.prose h2{ margin:var(--sp-7) 0 var(--sp-3); }
.prose h3{ margin:var(--sp-5) 0 var(--sp-2); }
.prose p{ margin-bottom:var(--sp-4); color:var(--ink-2); }
.prose ul{ list-style:disc; padding-left:1.4em; margin-bottom:var(--sp-4); }
.prose li{ margin-bottom:8px; color:var(--ink-2); }
.prose a{ color:var(--blue-600); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--ink); }

/* Simple trust badges row (product/checkout reassurance) */
.trust-row{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; margin-top:var(--sp-5); }
.trust{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); }
.trust svg{ width:20px; height:20px; color:var(--blue-500); }

/* "Coming soon" hero object (valet / teasers) */
.soon-hero{ display:grid; place-items:center; gap:var(--sp-4); text-align:center;
  padding:clamp(40px,7vw,80px) 0; }
.soon-hero .badge{ display:inline-block; padding:6px 14px; border-radius:var(--r-pill); font:var(--t-caption);
  font-weight:700; color:var(--ivory-ink); background:var(--grad-ivory); border:1px solid var(--ivory-line); }

/* Cart table */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:left; font:var(--t-caption); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  color:var(--muted); padding:0 0 var(--sp-3); border-bottom:1px solid var(--line); }
.cart-table td{ padding:var(--sp-4) 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-line{ display:flex; align-items:center; gap:var(--sp-3); }
.cart-line img{ width:64px; height:64px; border-radius:var(--r-sm); object-fit:cover; background:var(--bg-2); }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; }
.qty button{ width:36px; height:36px; display:grid; place-items:center; font-size:1.1rem; color:var(--ink-2); background:var(--surface); }
.qty button:hover{ background:var(--bg-2); }
.qty span{ min-width:36px; text-align:center; font-weight:600; }
@media (pointer:coarse){ .qty button{ width:44px; height:44px; } .qty input{ height:44px; } }
.cart-summary{ display:flex; flex-direction:column; gap:var(--sp-3); }
.cart-total{ display:flex; justify-content:space-between; font-size:1.2rem; font-weight:700; color:var(--ink); }
.cart-empty{ text-align:center; padding:var(--sp-8) 0; color:var(--muted); }

/* ===========================================================================
   NODE-MAP: nested hubs + breadcrumb (camera-recenter navigation)
   =========================================================================== */
.hub-crumb{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
  min-height:24px; margin:0 auto var(--sp-4); }
.hub-crumb:empty{ margin:0; min-height:0; }
.hub-crumb button{ font:var(--t-caption); font-weight:600; color:var(--muted); padding:5px 12px;
  border-radius:var(--r-pill); border:1px solid transparent;
  transition:color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.hub-crumb button:hover{ color:var(--blue-700); background:var(--blue-50); }
.hub-crumb button.here{ color:var(--blue-700); background:var(--blue-50); border-color:var(--blue-100); }
.hub-crumb .sep{ color:var(--faint); font-weight:600; }

/* a node that opens into sub-options gets a count badge + a stronger ring */
.node.has-children .orb-btn{ box-shadow:var(--glass-sheen), var(--sh-3),
  0 0 0 4px color-mix(in srgb, var(--blue-200) 45%, transparent); }
.hub-map.expanded .node.has-children:hover .orb-btn{ box-shadow:var(--glass-sheen), var(--sh-4),
  var(--glow-blue-strong), 0 0 0 4px var(--blue-200); }
.node .hub-plus{ position:absolute; top:-3px; right:-3px; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; color:#fff;
  background:var(--grad-blue); box-shadow:var(--glow-blue), 0 0 0 3px var(--surface); }
/* sub-level center shows a "back" affordance */
.node.center .hint{ margin-top:4px; }
.node.center.is-back .orb-btn{ background:radial-gradient(120% 120% at 30% 20%, #ffffff, #eaf1fe); cursor:pointer; }

/* ===========================================================================
   Master sound toggle (floating) — controls UI sounds + the ambient bed
   =========================================================================== */
.sound-toggle{ position:fixed; right:18px; bottom:18px; z-index:var(--z-sticky); width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:var(--blue-700);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:var(--glass-sheen), var(--sh-2);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.sound-toggle:hover{ transform:translateY(-2px); box-shadow:var(--glass-sheen), var(--sh-3), var(--glow-blue); }
.sound-toggle svg{ width:22px; height:22px; }
.sound-toggle.off{ color:var(--muted); }
@media (max-width:960px){ .sound-toggle{ bottom:14px; right:14px; width:40px; height:40px; } }

/* Global back button (injected by site.js on every page except home) */
.page-back-wrap{ padding:var(--sp-5) var(--gutter) 0; }
.page-back{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--r-pill);
  font-weight:600; font-size:.9rem; color:var(--blue-700);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:var(--glass-sheen), var(--sh-1);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.page-back:hover{ transform:translateX(-3px); box-shadow:var(--glass-sheen), var(--sh-2), var(--glow-blue); color:#16418f; }
.page-back span{ font-size:1.15rem; line-height:1; }
@media (max-width:960px){ .page-back-wrap{ padding-top:var(--sp-4); } }

/* ===========================================================================
   Testimonials / social proof (homepage)
   =========================================================================== */
.testimonials{ padding-block:var(--sp-8); }
.tgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:var(--sp-4); margin-top:var(--sp-5); }
.tcard{ display:flex; flex-direction:column; gap:12px; text-align:left; padding:24px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.tcard .stars{ display:flex; gap:2px; color:#f5a623; }
.tcard .stars svg{ width:17px; height:17px; }
.tcard blockquote{ margin:0; color:var(--ink); font-size:1.02rem; line-height:1.5; }
.tcard .who{ font-size:.86rem; color:var(--muted); font-weight:600; }
.tproof{ display:inline-flex; align-items:center; gap:10px; margin-top:var(--sp-5); padding:10px 18px; border-radius:var(--r-pill);
  font-weight:600; color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100); }
.tproof svg{ width:20px; height:20px; }

/* Mobile off-canvas sidebar backdrop (shown with .hub-sidebar.open via shell.js) */
.hub-scrim{ position:fixed; inset:0; z-index:calc(var(--z-sidebar) - 1); background:rgba(16,19,26,.42);
  opacity:0; visibility:hidden; transition:opacity var(--dur-3) var(--ease), visibility var(--dur-3); }
.hub-scrim.show{ opacity:1; visibility:visible; }
@media (min-width:961px){ .hub-scrim{ display:none; } }