/* ============================================================================
   BHAZAR — The Founding 144  ·  Production Stylesheet
   PASS 1 of 2  —  Design system, animation engine, sections 1-4 + nav + modals.

   ORGANIZATION
   ┌ 1. Design tokens (CSS custom properties)
   ├ 2. Reset + base
   ├ 3. Full-bleed background system (grain + vignette + grid)
   ├ 4. Layout primitives (.page .container .section)
   ├ 5. Component kit (buttons, pills, badges, cards, section-header)
   ├ 6. Animation engine (.js reveals, stagger, parallax, count-up)
   ├ 7. Navigation
   ├ 8. Section 1 — HERO (ported from approved reference)
   ├ 9. Section 2 — FOUNDING BENEFITS  (#founding)
   ├ 10. Section 3 — FUTURE-USER BENEFITS (#future)
   ├ 11. Section 4 — TRUST / BELONGING / OWNERSHIP (#trust)
   ├ 12. Modal system (claim form + wax envelope)
   └ 13. Responsive

   CLASS CONVENTIONS PASS 2 SHOULD REUSE
   - Reveal:     [data-reveal] [data-reveal="up|scale|left|right"]  (auto .in-view)
   - Stagger:    parent [data-stagger] + children style="--i:0|1|2..."
   - Parallax:   [data-parallax="0.15"]  (depth factor, set via inline style or attr)
   - Section:    <section class="section" id="..."> .container > .section-header
   - Header:     .section-header > .overline + h2.section-title + p.section-intro
   - Buttons:    .btn .btn--gold  /  .btn--ghost  /  .btn--wax
   - Cards:      .card  (hairline + umber depth + hover lift)
   - Pills:      .pill  /  .badge (.badge--gold)
   - Counters:   <span data-count="144">144</span>
   ========================================================================== */

/* ===== 1. DESIGN TOKENS ================================================== */
:root{
  /* core palette */
  --bg:#020408;
  --surface:#0A0F18;
  --text:#F0F4F8;
  --muted:#94A3B8;
  --gold:#D4AF37;

  /* guild accents */
  --tech:#00F0FF;
  --craft:#F59E0B;
  --merchant:#10B981;
  --amethyst:#8B5CF6;
  --frith:#6366F1;
  --victualler:#E8B04B;
  --wax:#9B2226;

  /* gradients & metallics */
  --gold-grad:linear-gradient(180deg,#F4DD86,#D4AF37 52%,#A57F28);
  --gold-text:linear-gradient(180deg,#FBF4E2,#D9C79A);

  /* hairlines (silver/gold, with warm umber bias) */
  --hair:rgba(214,200,170,0.14);
  --hair-strong:rgba(222,210,182,0.28);

  /* warm umber/brown undertone for backgrounds & shadows (~30%) */
  --umber:rgba(58,44,30,0.32);
  --umber-shadow:rgba(20,14,7,0.55);

  /* spacing & layout */
  --pad:clamp(20px,5vw,80px);
  --maxw:1560px;
  --nav-h:74px;
  --section-y:clamp(72px,11vh,140px);

  /* fluid type scale */
  --fs-overline:clamp(10.5px,1vw,12px);
  --fs-h1:clamp(34px,5.6vw,64px);
  --fs-h2:clamp(28px,3.6vw,46px);
  --fs-h3:clamp(18px,1.7vw,22px);
  --fs-body:clamp(15px,1.4vw,17px);
  --fs-small:clamp(12.5px,1.1vw,13.5px);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --reveal-dur:.85s;

  --radius:14px;
  --radius-sm:10px;

  /* light gold — used by the Immersive toggle text/state and small accents
     (was referenced as var(--gold-lt) in several places but never defined). */
  --gold-lt:#F4DD86;
}

/* ===== 2. RESET + BASE ================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;}
html{font-size:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
html,body{background:var(--bg);overflow-x:clip;max-width:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  width:100%;
  min-height:100vh;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  line-height:1.5;
}
img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(212,175,55,0.28);color:#FFF7E2;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

h1,h2,h3{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-0.015em;text-wrap:balance;}

/* ===== 3. FULL-BLEED BACKGROUND SYSTEM ================================= */
.bg-layer{position:fixed;inset:0;pointer-events:none;}
.bg-base{
  background:
    radial-gradient(70vw 60vh at 76% 30%, rgba(20,28,44,0.85), transparent 60%),
    radial-gradient(55vw 45vh at 10% 6%, var(--umber), transparent 55%),
    linear-gradient(180deg, #05080E 0%, #070B12 42%, #05070C 100%);
  z-index:-6;
}
.bg-grid{
  background-image:
    linear-gradient(rgba(150,170,200,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,170,200,0.045) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(80vw 80vh at 70% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(80vw 80vh at 70% 40%, #000 0%, transparent 78%);
  z-index:-5;
}
/* ---- SACRED-GEOMETRY GATE (Direction A "Sovereign Gate") ----
   A single fixed, pointer-events:none SVG layer behind all content. Concentric
   gold/silver hairline rings + Metatron/flower-of-life/pentagram geometry at
   very low opacity, slowly rotating + breathing. CHEAP: GPU transform:rotate
   only (no JS per-frame, no blur, no box-shadow animation). */
/* RAISED above the vignette so the geometry is clearly visible animating
   behind the whole (transparent-section) page. Sections have no background,
   so this single fixed layer shows through everywhere; cards/modals/footer
   keep their own opaque panels on top. Opacity tuned perceptible-but-tasteful
   so text stays readable over the void. */
/* ---- SOFT FOGGY NEBULA GLOWS (Task C) ----
   Three large feathered radial-gradient blobs that drift slowly. NO hard
   circular edge: every gradient fades fully to transparent well before its
   box edge, and the box is far larger than the visible glow so no rim shows.
   Animated with transform(translate+scale)+opacity ONLY (GPU, cheap) — no
   filter:blur anywhere. ScrollTrigger adds a gentle parallax via --fy. */
.bg-fog{z-index:-5;overflow:hidden;}
.bg-fog .fog{
  position:absolute;border-radius:50%;
  /* huge, feathered, edgeless — gradient is gone long before the box edge */
  will-change:transform,opacity;
  transform:translate3d(0, var(--fy,0px), 0);
}
.fog--gold{
  width:80vw;height:80vw;left:42%;top:8%;
  background:radial-gradient(circle at 50% 50%,
    rgba(212,175,55,0.20) 0%,
    rgba(212,175,55,0.11) 22%,
    rgba(180,140,60,0.05) 42%,
    rgba(212,175,55,0) 66%);
  animation:fogDriftA 26s ease-in-out infinite;
}
.fog--tech{
  width:66vw;height:66vw;left:-8%;top:30%;
  background:radial-gradient(circle at 50% 50%,
    rgba(0,140,170,0.16) 0%,
    rgba(0,140,170,0.08) 26%,
    rgba(0,120,150,0.03) 46%,
    rgba(0,140,170,0) 68%);
  animation:fogDriftB 32s ease-in-out infinite;
}
.fog--amethyst{
  width:72vw;height:72vw;right:-10%;bottom:4%;
  background:radial-gradient(circle at 50% 50%,
    rgba(139,92,246,0.15) 0%,
    rgba(139,92,246,0.08) 26%,
    rgba(110,80,200,0.03) 48%,
    rgba(139,92,246,0) 68%);
  animation:fogDriftC 38s ease-in-out infinite;
}
/* drift = translate + scale + opacity only (no position/size animation) */
@keyframes fogDriftA{
  0%,100%{transform:translate3d(0,var(--fy,0px),0) scale(1);opacity:.85;}
  50%{transform:translate3d(4%,calc(var(--fy,0px) + 3%),0) scale(1.12);opacity:1;}
}
@keyframes fogDriftB{
  0%,100%{transform:translate3d(0,var(--fy,0px),0) scale(1.05);opacity:.7;}
  50%{transform:translate3d(-3%,calc(var(--fy,0px) - 2%),0) scale(0.95);opacity:.95;}
}
@keyframes fogDriftC{
  0%,100%{transform:translate3d(0,var(--fy,0px),0) scale(1);opacity:.75;}
  50%{transform:translate3d(-4%,calc(var(--fy,0px) + 2%),0) scale(1.1);opacity:.95;}
}
@media (prefers-reduced-motion:reduce){
  .bg-fog .fog{animation:none!important;}
}

/* ---- SACRED-GEOMETRY GATE (Sovereign Gate, richer heroA build) ---- */
.bg-sacred{
  z-index:-3;
  display:flex;align-items:center;justify-content:center;
  /* SUBTLE, EVEN whisper behind the WHOLE page. The WebGL gate is now the hero
     star, so this CSS layer must not compete: drop it to a faint, even texture
     (no dominant bottom/upper-right patch). A gentle centered mask keeps the
     edges from hard-cutting; the slow rotation/breathe stays. */
  opacity:.2;
  transform:translate3d(0, var(--py,0), 0);
  -webkit-mask-image:radial-gradient(150vmax 150vmax at 50% 42%, #000 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
          mask-image:radial-gradient(150vmax 150vmax at 50% 42%, #000 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
}
.bg-sacred svg{
  width:min(150vh,150vw);height:min(150vh,150vw);
  max-width:none;
  transform-origin:50% 50%;
  will-change:transform;
}
.bg-sacred .sg-rotor-cw{animation:sgSpin 64s linear infinite;transform-box:view-box;transform-origin:50% 50%;}
.bg-sacred .sg-rotor-ccw{animation:sgSpinR 82s linear infinite;transform-box:view-box;transform-origin:50% 50%;}
.bg-sacred .sg-breathe{animation:sgBreathe 16s ease-in-out infinite;transform-box:view-box;transform-origin:50% 50%;}
@keyframes sgSpin{to{transform:rotate(360deg)}}
@keyframes sgSpinR{to{transform:rotate(-360deg)}}
@keyframes sgBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){
  .bg-sacred .sg-rotor-cw,.bg-sacred .sg-rotor-ccw,.bg-sacred .sg-breathe{animation:none!important;}
}
@media (max-width:760px){.bg-sacred{opacity:.14;}}

/* vignette now BELOW the sacred layer (was above it, blacking it out) and
   softened so the geometry's outer rings still read at the edges. */
.bg-vignette{box-shadow:inset 0 0 320px 60px rgba(0,0,0,0.62);z-index:-4;}
.bg-grain{
  z-index:-2;opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 4. LAYOUT PRIMITIVES ============================================ */
.page{position:relative;z-index:1;width:100%;}
.container{
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding-left:var(--pad);padding-right:var(--pad);
}
.section{padding-block:var(--section-y);position:relative;}
/* ===== faint per-section SACRED-GEOMETRY backdrop =====================
   "very dim, barely seen sacred geometry for each section as I scroll." One
   reusable motif behind every section's content (z-index -1, pointer-events
   none). Where supported it fades+settles in as the section scrolls into view
   (scroll-driven, no JS); otherwise a constant whisper. Transform/opacity only;
   softened to near-nothing under reduced-motion. */
.section::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  /* CENTERED fixed-size box (NOT inset:0) so rotate/scale can never widen the
     page — a full-width rotated box was overflowing horizontally. */
  left:50%; top:50%;
  width:min(84vh,760px); height:min(84vh,760px);
  transform:translate(-50%,-50%);
  background:url("../assets/sacred-section.svg") center/contain no-repeat;
  opacity:.13; will-change:opacity,transform;
}
@supports (animation-timeline: view()){
  .section::before{
    opacity:0; transform:translate(-50%,-50%) scale(.82) rotate(-6deg);
    animation:sgSectionIn linear both;
    animation-timeline:view(); animation-range:entry 0% cover 45%;
  }
  .section:nth-of-type(even)::before{ animation-name:sgSectionInAlt; }
  @keyframes sgSectionIn{ to{ opacity:.14; transform:translate(-50%,-50%) scale(1) rotate(0deg); } }
  @keyframes sgSectionInAlt{ to{ opacity:.14; transform:translate(-50%,-50%) scale(1) rotate(6deg); } }
}
@media (prefers-reduced-motion:reduce){
  .section::before{ animation:none!important; opacity:.11; transform:translate(-50%,-50%); }
}
@media (max-width:760px){ .section::before{ width:min(58vh,420px); height:min(58vh,420px); opacity:.04; } }
.seam{height:1px;background:linear-gradient(90deg,transparent,var(--hair-strong),transparent);}

/* ---- FLAT 2D scroll model (3D pins/scrub removed for performance) ----
   No perspective / preserve-3d: entrances are cheap GPU transform(translateY)
   + opacity reveals only. The guilds constellation is STATIC — six evenly
   spaced nodes around one center seal, no 3D rotation/scrub. */
.const-rotor{position:absolute;inset:0;}

/* ---- content-visibility REMOVED.
   content-visibility:auto + contain-intrinsic-size made every offscreen
   section render BLACK until scrolled into view (the "starts black, reveals
   as you scroll" bug) and caused the footer divider to mis-paint through the
   link columns. All sections now render normally and are visible by default. */

/* ===== 5. COMPONENT KIT ================================================= */

/* -- section header (overline + title + intro) -- */
.section-header{max-width:760px;margin-bottom:clamp(40px,6vh,72px);}
.section-header.center{margin-inline:auto;text-align:center;}
.overline{
  font-family:'JetBrains Mono',monospace;font-size:var(--fs-overline);letter-spacing:0.28em;
  color:var(--gold);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2.4vh,24px);
}
.overline::before{content:"";width:34px;height:1px;flex:0 0 auto;background:linear-gradient(90deg,var(--gold),transparent);}
.section-header.center .overline{justify-content:center;}
.section-title{font-size:var(--fs-h2);line-height:1.08;margin-bottom:clamp(14px,2vh,20px);}
.section-title .em{
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700;
}
.section-intro{font-size:var(--fs-body);line-height:1.62;color:var(--muted);font-weight:300;max-width:620px;}
.section-header.center .section-intro{margin-inline:auto;}

/* -- buttons -- */
.btn{
  font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:0.01em;
  border-radius:var(--radius-sm);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s, color .2s;
  border:1px solid transparent;white-space:nowrap;line-height:1;
}
.btn svg{width:16px;height:16px;flex:0 0 auto;}
.btn--gold{
  color:#1A1303;background:var(--gold-grad);
  border-color:rgba(255,243,205,0.55);
  padding:16px 30px;font-size:clamp(14.5px,1.4vw,15.5px);
  box-shadow:0 10px 34px rgba(212,175,55,0.30),inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(212,175,55,0.42),inset 0 1px 0 rgba(255,255,255,0.7);}
.btn--gold:active{transform:translateY(0);}
.btn--ghost{
  color:var(--text);background:transparent;border-color:var(--hair-strong);
  padding:16px 26px;font-weight:600;font-size:clamp(14px,1.4vw,15px);
}
.btn--ghost:hover{border-color:rgba(240,244,248,0.45);background:rgba(255,255,255,0.03);transform:translateY(-2px);}
.btn--wax{
  color:#FFE9E0;
  background:linear-gradient(180deg,#B33640,#9B2226 55%,#741319);
  border-color:rgba(255,180,170,0.4);
  padding:14px 24px;font-size:14px;
  box-shadow:0 8px 26px rgba(155,34,38,0.34),inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--wax:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(155,34,38,0.46);}
.btn--sm{padding:11px 20px;font-size:13.5px;}
.btn--block{width:100%;}

/* -- nav seat chip -- */
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.03em;
  color:var(--text);border:1px solid var(--hair-strong);
  border-radius:999px;padding:8px 15px;background:rgba(212,175,55,0.05);white-space:nowrap;
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);}
.chip b{color:var(--gold);font-weight:500;}

/* -- pills (guild strip) -- */
.pill{
  display:flex;align-items:center;gap:10px;border:1px solid var(--hair);border-radius:999px;
  padding:12px 20px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.01em;
  color:var(--text);background:rgba(255,255,255,0.018);justify-content:center;min-width:0;
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.pill:hover{border-color:var(--hair-strong);background:rgba(255,255,255,0.04);transform:translateY(-2px);}
.pill .pd{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.pill .st{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:0.05em;}

/* -- badges -- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--muted);letter-spacing:0.01em;
  border:1px solid var(--hair);border-radius:8px;padding:9px 13px;background:rgba(255,255,255,0.015);white-space:nowrap;
}
.badge .tick{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--muted);}
.badge--gold{border-color:rgba(212,175,55,0.4);background:rgba(212,175,55,0.06);color:#EBDCB0;}
.badge--gold .tick{background:var(--gold);box-shadow:0 0 8px var(--gold);}

/* -- cards (hairline + umber depth, hover lift) -- */
.card{
  position:relative;border:1px solid var(--hair);border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--surface), #070B12);
  padding:clamp(24px,2.4vw,34px);
  box-shadow:0 14px 40px -24px var(--umber-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
  /* equal-height grids: stretch + push trailing elements (tags/pass) to a
     consistent baseline so card rows read as an aligned set */
  display:flex;flex-direction:column;height:100%;
}
/* trailing meta elements pin to the bottom of the card for baseline alignment */
#founding .card__pass{margin-top:auto;}
/* top accent hairline glow (uses --accent if set) */
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,rgba(214,175,55,0.5)),transparent);
  opacity:.55;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--hair-strong);
  box-shadow:0 28px 60px -28px var(--umber-shadow), 0 0 0 1px rgba(255,255,255,0.02),
             inset 0 1px 0 rgba(255,255,255,0.06);
}
.card__icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair-strong);margin-bottom:20px;
  background:radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--accent,var(--gold)) 22%, transparent), transparent 70%);
  color:var(--accent,var(--gold));
}
.card__icon svg{width:22px;height:22px;}
.card__kicker{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent,var(--gold));margin-bottom:12px;display:block;
}
.card h3,.card__title{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--fs-h3);line-height:1.2;margin-bottom:10px;}
.card p,.card__body{font-size:var(--fs-small);line-height:1.6;color:var(--muted);font-weight:300;}
.card__metric{
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:6px;
}
.card ul{list-style:none;margin-top:14px;display:grid;gap:9px;}
.card ul li{
  font-size:var(--fs-small);color:var(--muted);font-weight:300;line-height:1.45;
  position:relative;padding-left:20px;
}
.card ul li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--accent,var(--gold));box-shadow:0 0 8px color-mix(in srgb,var(--accent,var(--gold)) 60%, transparent);
}

/* ===== 6. ANIMATION ENGINE (ADDITIVE-ONLY) =============================
   CRITICAL CORRECTNESS RULE: content is ALWAYS VISIBLE BY DEFAULT. There is
   NO hide-by-default state. The page never "starts black and reveals as you
   scroll." The entrance is purely additive: JS arms a FROM-offset by adding
   `.reveal-anim` ONLY when it knows the IntersectionObserver will fire, then
   adds `.in-view` to animate back to the visible base. If JS never runs, or
   the observer never fires, or reduced-motion is on, every [data-reveal]
   stays fully visible. */

/* base — ALWAYS visible (no-js, reduced-motion, or before/without arming) */
[data-reveal]{opacity:1;transform:none;}

/* armed by JS (additiveReveals) ONLY when IO is available + motion allowed:
   set the start offset + transition. Removing this class (or never adding it)
   leaves the element fully visible. */
.reveal-anim{
  opacity:0;
  /* bolder rise so each block clearly travels INTO place (transform/opacity
     only → 60fps). Staggered children cascade via --i. Springy settle. */
  transform:translateY(48px) scale(.985);
  /* opacity comes up FAST so a section is NEVER black as you reach it; the
     bold 3D transform takes longer so the motion still reads. */
  transition:opacity .32s var(--ease-out),
             transform .85s cubic-bezier(.18,.84,.3,1.04);
  transition-delay:calc(var(--i,0) * 85ms);
  will-change:opacity,transform;
}
.reveal-anim[data-reveal="scale"]{transform:translateY(22px) scale(.94);}
.reveal-anim[data-reveal="left"]{transform:translateX(-46px);}
.reveal-anim[data-reveal="right"]{transform:translateX(46px);}

/* ===== PRO 3D CARD REVEAL ============================================
   Cards / doors / pillars RISE + swing in from alternating sides in real 3D
   (perspective on the grid), then SETTLE perfectly flat — so motion is bold
   and visible on entry but the resting state is clean and never overlaps.
   .in-view forces transform:none!important, guaranteeing the flat end state. */
.grid-4,.grid-3,.doors,.guild-map{perspective:1500px;}
.grid-4 > .reveal-anim,.grid-3 > .reveal-anim,.guild-map > .reveal-anim{
  transform-origin:50% 100%;
  transition:opacity .32s var(--ease-out),
             transform .95s cubic-bezier(.16,.86,.3,1.03);
}
/* The 3D card flip is DESKTOP-ONLY — on phones the rotateY/rotateX read as
   skewed/broken cards on a narrow column, so mobile gets a clean translateY. */
@media (min-width:769px){
  .grid-4 > .reveal-anim:nth-child(odd),
  .grid-3 > .reveal-anim:nth-child(odd),
  .guild-map > .reveal-anim:nth-child(odd){
    transform:translateY(66px) translateZ(-60px) rotateX(22deg) rotateY(-28deg);
  }
  .grid-4 > .reveal-anim:nth-child(even),
  .grid-3 > .reveal-anim:nth-child(even),
  .guild-map > .reveal-anim:nth-child(even){
    transform:translateY(66px) translateZ(-60px) rotateX(22deg) rotateY(28deg);
  }
}
/* in-view → back to the visible base. !important guarantees the element ALWAYS
   reaches full opacity:1 / transform:none once revealed — no stagger delay,
   stale will-change, or interrupted transition can leave it stuck dim OR tilted. */
.reveal-anim.in-view{opacity:1!important;transform:none!important;will-change:auto;}

/* reduced motion: never animate; everything static + visible */
@media (prefers-reduced-motion:reduce){
  [data-reveal],.reveal-anim{opacity:1!important;transform:none!important;transition:none!important;}
  .spin,.pulse,.float{animation:none!important;}
}

/* ===== 7. NAVIGATION =================================================== */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
/* PERF: solid/semi-opaque background instead of backdrop-filter blur.
   backdrop-filter forces a full re-composite of everything behind the nav
   on every scrolled frame → primary scroll-jank source. A near-opaque
   rgba background gives the same "frosted" read with zero per-frame cost. */
.nav-wrap.scrolled{
  background:rgba(4,7,13,0.92);
  border-bottom-color:var(--hair);
}
.nav-wrap.scrolled::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,175,55,0.32),transparent);
}
/* SCOPED to the primary navbar only. A bare `nav{height:var(--nav-h)}` used to
   match EVERY <nav> on the page — including the footer's `<nav class="footer-cols">`
   and the legal `<nav class="legal-crosslinks">` — clamping them to the navbar
   height (64px on mobile) so their columns overflowed and the copyright row rode
   up into them. Scoping to `.nav-wrap nav` confines it to the real header. */
.nav-wrap nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;height:var(--nav-h);
}
/* ---- BIG Classic ↔ 3D site switch (navbar segmented control, item 1) ---- */
/* compact VERTICAL toggle pinned to the LEFT edge, vertically centred — matches
   the gate's .mode-toggle so the Classic↔Gate control lives in the same place on
   both sites. Hidden on mobile/tablet (≤1023) below — no 3D on phones. */
.site-switch{
  position:fixed; left:clamp(.5rem,1vw,.9rem); top:50%; transform:translateY(-50%);
  z-index:50;
  display:flex;flex-direction:column;align-items:stretch;flex:0 0 auto;
  border:1px solid rgba(212,175,55,0.45);border-radius:13px;overflow:hidden;
  background:rgba(5,8,14,0.74);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;
  box-shadow:0 10px 28px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.08);
}
.site-switch__seg{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;text-transform:uppercase;text-decoration:none;cursor:pointer;
  color:var(--muted);transition:color .2s, background .25s, box-shadow .25s;white-space:nowrap;
}
.site-switch__seg.is-on{
  color:#0c0a04;font-weight:600;
  background:linear-gradient(180deg,#F4DD86,#D4AF37 70%,#BB962E);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
}
/* the 3D segment is the call-to-action: gold-tinted, glows on hover */
.site-switch__seg--go{color:var(--gold);position:relative;}
.site-switch__seg--go::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%,#F4DD86,#D4AF37);
  box-shadow:0 0 9px rgba(212,175,55,0.9);animation:switchPulse 2.4s ease-in-out infinite;
}
@keyframes switchPulse{0%,100%{opacity:.55;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}
.site-switch__seg--go:hover{color:#0c0a04;background:linear-gradient(180deg,#F4DD86,#D4AF37 70%,#BB962E);}
.site-switch__seg--go:hover::before{animation:none;}
@media (prefers-reduced-motion:reduce){.site-switch__seg--go::before{animation:none;}}
/* desktop-only; the mobile slide-in menu carries the 3D link instead */
@media (max-width:1023px){ .site-switch{display:none;} }
.site-switch__mobile{margin-top:10px;}

/* ============================================================
   3D ON/OFF TOGGLE — one sleek switch, FIXED bottom-left, visible
   but out of the way (NOT in the header or footer). Same control on
   BOTH sites: classic shows 3D OFF (→ /gate/), the gate shows 3D ON
   (→ /index.html). Hidden on mobile/tablet (no 3D on phones).
   ============================================================ */
.d3-toggle{
  position:fixed; left:clamp(.85rem,2vw,1.5rem); bottom:clamp(.85rem,2vw,1.5rem);
  z-index:60; display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .72rem; border-radius:999px; text-decoration:none;
  background:rgba(5,8,14,.82); border:1px solid rgba(212,175,55,.32);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  font-family:'JetBrains Mono',monospace;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.d3-toggle:hover{
  border-color:rgba(212,175,55,.7);
  box-shadow:0 12px 32px -6px rgba(212,175,55,.28); transform:translateY(-1px);
}
.d3-toggle__txt{ font-size:.74rem; font-weight:700; letter-spacing:.18em; color:var(--gold-lt); }
.d3-toggle__track{
  position:relative; width:42px; height:22px; border-radius:999px; flex:0 0 auto;
  background:rgba(255,255,255,.08); border:1px solid rgba(212,175,55,.35);
  transition:background .3s, border-color .3s;
}
.d3-toggle__knob{
  position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:15px; height:15px; border-radius:50%; background:#8b94a6;
  transition:left .3s cubic-bezier(.34,1.4,.5,1), background .3s, box-shadow .3s;
}
.d3-toggle__state{ font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--muted); min-width:2.1em; }
/* ON (the gate): knob slides right, gold track + glow */
.d3-toggle[data-3d="on"] .d3-toggle__track{
  background:linear-gradient(180deg, rgba(244,221,134,.55), rgba(212,175,55,.3));
  border-color:var(--gold);
}
.d3-toggle[data-3d="on"] .d3-toggle__knob{
  left:24px; background:linear-gradient(180deg,#F4DD86,#D4AF37);
  box-shadow:0 0 10px rgba(212,175,55,.85);
}
.d3-toggle[data-3d="on"] .d3-toggle__state{ color:var(--gold-lt); }
/* soft attention pulse on the OFF state so visitors discover the 3D mode */
.d3-toggle[data-3d="off"] .d3-toggle__knob{ animation:d3pulse 2.6s ease-in-out infinite; }
@keyframes d3pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0);} 50%{box-shadow:0 0 0 4px rgba(212,175,55,.16);} }
@media (prefers-reduced-motion:reduce){ .d3-toggle__knob{animation:none!important;} }
/* In-nav placement: when the toggle lives in the nav bar it renders INLINE
   (not floating bottom-left). The gate's standalone toggle is not inside
   .nav-wrap, so it keeps its fixed bottom-left position. */
.nav-wrap .d3-toggle{ position:static; left:auto; bottom:auto; z-index:auto; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* mobile/tablet: no 3D → hide the toggle entirely */
@media (max-width:1023px){ .d3-toggle{ display:none; } }

.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto;cursor:pointer;background:none;border:0;color:inherit;}
.brand img{height:40px;width:auto;object-fit:contain;
  filter:drop-shadow(0 2px 12px rgba(0,240,255,0.22)) drop-shadow(0 0 20px rgba(212,175,55,0.12));}
.brand > span{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.brand .word{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:20px;letter-spacing:0.14em;line-height:1;text-align:left;}
.brand .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.26em;color:var(--muted);text-transform:uppercase;margin-top:4px;}
.navlinks{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);}
.navlinks a{color:var(--muted);font-size:13.5px;letter-spacing:0.02em;transition:color .2s;white-space:nowrap;position:relative;padding:6px 0;}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
  transition:right .3s var(--ease);
}
.navlinks a:hover{color:var(--text);}
.navlinks a.active{color:var(--text);}
.navlinks a.active::after{right:0;}
.navright{display:flex;align-items:center;gap:18px;}

/* hamburger */
.hamburger{
  display:none;width:42px;height:42px;border:1px solid var(--hair-strong);border-radius:10px;
  background:rgba(255,255,255,0.02);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile slide-in menu */
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:90;
  background:linear-gradient(180deg,#070B12,#05080E);
  border-left:1px solid var(--hair);
  transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;gap:6px;padding:calc(var(--nav-h) + 24px) 28px 28px;
  box-shadow:-30px 0 80px rgba(0,0,0,0.6);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  color:var(--text);font-family:'Sora',sans-serif;font-size:20px;font-weight:500;padding:14px 0;
  border-bottom:1px solid var(--hair);transition:color .2s,padding-left .2s;
}
.mobile-menu a:hover{color:var(--gold);padding-left:6px;}
.mobile-menu .chip{margin-top:18px;align-self:flex-start;}
.mobile-menu .btn{margin-top:14px;}
.lang-toggle--menu{margin-top:20px;align-self:flex-start;}
.menu-backdrop{
  position:fixed;inset:0;z-index:85;background:rgba(2,4,8,0.74);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.menu-backdrop.open{opacity:1;visibility:visible;}

/* ===== 8. HERO — SINGLE CENTERED COMPOSITION =========================
   CORE CONCEPT: NO left/right split. The offer data is a SINGLE CENTERED column
   (the clean first impression at scroll 0). The orbit (.stage) sits centered
   directly beneath it. On scroll the data settles + the orbit assembles in the
   SAME centered space (everswap-style transform of one element into another).
   Both children are centered and share the column's center axis. */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(28px,4vh,48px);
  padding:calc(var(--nav-h) + clamp(28px,5vh,64px)) 0 clamp(28px,4vh,46px);
}
.hero-copy{
  min-width:0;width:100%;max-width:860px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
.hero .overline{margin-bottom:clamp(20px,3vh,30px);}
.hero h1{
  font-size:var(--fs-h1);line-height:1.04;
  color:var(--text);margin-bottom:clamp(18px,2.6vh,26px);
  max-width:18ch;
}
.hero h1 .em{
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700;
}
/* When the gate is live, gate-scene.js morphs the H1 with an inline transform —
   that breaks background-clip:text and the word "Bhazar" rendered transparent
   (gray). Force a solid gold fill so it always reads golden like the headline. */
body.gate-active .scene--hero h1 .em{
  background:none !important;
  -webkit-text-fill-color:#ECC85F !important;
  color:#ECC85F !important;
}
.lede{font-size:clamp(15px,1.5vw,17px);line-height:1.62;color:var(--muted);max-width:600px;margin:0 auto clamp(26px,3.4vh,38px);font-weight:300;}
.lede b{color:#CBD5E1;font-weight:500;}
.ctas{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:clamp(28px,3.6vh,40px);flex-wrap:wrap;}
/* CLEAN CENTERED BUTTON ROW (alignment fix) — used by the founding/trust closing
   CTA band and the progress "Read progress log" row. Buttons are centered as a
   balanced group, equalize their min-height so a gold + ghost pair line up on a
   shared baseline, share one gap, and wrap to a centered column on small screens
   instead of stretching. No inline justify/margin overrides needed. */
.cta-row{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:14px;margin:0;
}
/* equal-height, baseline-aligned buttons sharing one consistent gap */
.cta-row .btn{min-height:54px;}
/* CENTERED CTA BAND: the closing trust/progress blocks center their text AND
   their button row together as one unit (text was left while buttons were
   centered — now both are centered). The intro is width-capped + auto-centered. */
.cta-band{display:flex;flex-direction:column;align-items:center;text-align:center;}
.cta-band .section-intro{max-width:640px;margin-inline:auto;}
.cta-band .cta-row{width:100%;}
@media (max-width:440px){
  .cta-row{flex-direction:column;align-items:center;}
  .cta-row .btn{width:min(320px,100%);}
}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:680px;margin:0 auto;}

/* orbit stage — centered beneath the offer data; aspect-ratio:1/1 keeps every
   guild circle ROUND and the sacred geometry undistorted at any width. */
.stage{
  position:relative;width:100%;max-width:760px;margin:0 auto;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
}
/* PERF: pre-baked SOFT FOGGY glow — NO filter:blur. Feathered multi-stop
   radial gradient with no visible rim (fully transparent by ~62%), gently
   drifting in scale/opacity so it reads as warm haze, not a flat gold disk.
   Lives inside the .stage; transform+opacity only → GPU, cheap. */
.stage .glow{
  position:absolute;width:104%;height:104%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,
    rgba(212,175,55,0.20) 0%,
    rgba(212,175,55,0.11) 20%,
    rgba(60,80,130,0.06) 40%,
    rgba(40,60,100,0.02) 54%,
    transparent 64%);
  z-index:1;will-change:transform,opacity;
  animation:hazeDrift 14s ease-in-out infinite;
}
@keyframes hazeDrift{
  0%,100%{transform:translate3d(-1%,0,0) scale(1);opacity:.85;}
  50%{transform:translate3d(2%,1%,0) scale(1.1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){.stage .glow{animation:none!important;}}
.orbit-tilt{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;transition:transform .25s var(--ease);}
.orbit-svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;}
.seal-logo{
  position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  /* clearance: inner progress arc sits at r=120 on a 760 viewBox (~31.5%
     diameter). Logo kept at 19% so it stays cleanly inside that ring with
     breathing room — no overlap with arc, nodes or labels. */
  width:24%;max-width:210px;height:auto;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(212,175,55,0.42)) drop-shadow(0 0 12px rgba(0,240,255,0.18));
}
.data-callout{
  position:absolute;z-index:4;font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1vw,11px);letter-spacing:0.04em;color:var(--muted);line-height:1.45;
}
.data-callout b{color:var(--text);font-weight:500;}
.data-callout .tag{color:var(--gold);}
.co-arc{top:6%;left:0;text-align:left;}
.co-wait{bottom:7%;right:0;text-align:right;}

/* hero orbit hotspots — transparent circular hit-areas over each SVG guild
   node; they open the shared guild product overlay (Bug 4). Sized ~14% of the
   760 viewBox node, centered on the node coordinate, above the SVG (z-index 2)
   but below the logo (3) and callouts (4) so CTAs/labels stay clickable. */
.orbit-hotspots{position:absolute;inset:0;z-index:3;pointer-events:none;}
.orbit-node{position:absolute;width:14.5%;aspect-ratio:1/1;transform:translate(-50%,-50%);}
/* per-guild accent so the shared overlay picks up the right color (openGuildOverlay
   reads --accent from the closest [data-guild-node]) */
.orbit-node[data-guild-node="Tech"]{--accent:var(--tech);}
.orbit-node[data-guild-node="Craft"]{--accent:var(--craft);}
.orbit-node[data-guild-node="Merchant"]{--accent:var(--merchant);}
.orbit-node[data-guild-node="Omnism"]{--accent:var(--amethyst);}
.orbit-node[data-guild-node="Frith"]{--accent:var(--frith);}
.orbit-node[data-guild-node="Victualler"]{--accent:var(--victualler);}
.guild-hotspot{
  width:100%;height:100%;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid transparent;padding:0;
  pointer-events:auto;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.guild-hotspot:hover,
.orbit-node:focus-within .guild-hotspot{
  background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  border-color:rgba(255,255,255,0.28);
}
/* bigger hover target so hovering the visible guild circle reliably opens the overlay */
.orbit-node{width:16.5%;z-index:6;}
.guild-hotspot{z-index:6;}
/* dark dropdowns — kill the OS-white native option list */
select{color-scheme:dark;}
select option,select optgroup{background:#0A0F18;color:#F0F4F8;}
/* perf: promote continuously-animated background layers to their own GPU layer */
.bg-sacred,.bg-fog,.fog{will-change:transform;transform:translateZ(0);}

.pulse{animation:pulse 3.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.spin{transform-box:fill-box;transform-origin:380px 380px;animation:spin 90s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:float 7s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* absolutely-centered logos float WITHOUT losing their centering transform */
.seal-logo.float{animation:floatCentered 7s ease-in-out infinite;}
@keyframes floatCentered{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 10px))}
}

/* six-guild pill strip (carried from reference) */
.glimpse{padding:clamp(28px,4vh,40px) 0 clamp(48px,7vh,70px);}
.glimpse-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.glimpse-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.28em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:12px;}
.glimpse-label::before{content:"";width:26px;height:1px;background:var(--hair-strong);}
.heritage{font-family:'Sora',sans-serif;font-style:italic;font-size:14px;color:var(--muted);letter-spacing:0.02em;}
.pills{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}

/* ===== 8b. HERO — STATIC =============================================
   The cinematic PINNED scroll-scrubbed 3D hero was REMOVED for performance
   and correctness (no pin, no scrub, no scroll-jacking, no progress UI). The
   hero renders immediately and fully visible at the top of the page under
   native 1:1 scroll. .scene--hero is now a plain relative wrapper. */
.scene--hero{position:relative;}

/* ===== 9. SECTION 2 — FOUNDING BENEFITS =============================== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.5vw,24px);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.8vw,28px);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,1.8vw,28px);}

#founding .card__pass{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;color:var(--gold);
  border:1px solid rgba(212,175,55,0.35);border-radius:999px;padding:5px 12px;display:inline-block;margin-top:14px;
}

/* ===== 10. SECTION 3 — FUTURE-USER BENEFITS ========================== */
.future-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px;}
.future-card .tags span{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.06em;color:var(--muted);
  border:1px solid var(--hair);border-radius:6px;padding:5px 9px;
}

/* ===== 11. SECTION 4 — TRUST / BELONGING / OWNERSHIP ================= */
#trust .pillar{padding:clamp(28px,2.6vw,40px);}
#trust .pillar h3{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
#trust .pillar .num{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent,var(--gold));
  border:1px solid var(--hair-strong);border-radius:8px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}

/* ===== 12. MODAL SYSTEM =============================================== */
.modal-backdrop{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,5vh,64px) 16px;overflow-y:auto;
  /* PERF: solid dim instead of backdrop-filter (no live blur anywhere). */
  background:rgba(2,4,8,0.86);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  perspective:1600px;          /* 3D stage for the modal rise */
}
.modal-backdrop.open{opacity:1;visibility:visible;}
/* particle burst layer (painted by playModalParticles on open) — behind modal */
.modal-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.modal{
  position:relative;width:100%;max-width:720px;margin:auto;z-index:1;
  max-height:92vh;overflow-y:auto;
  border:1px solid var(--hair-strong);border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(180deg, #0B111B, #070B12);
  box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(255,255,255,0.03),
             inset 0 1px 0 rgba(255,255,255,0.05);
  padding:clamp(26px,3vw,40px);
  /* 3D RISE: tilts back + drops + recedes, then swings up to face you. */
  transform-origin:50% 0%;
  transform:rotateX(15deg) translateY(48px) scale(.92);
  opacity:0;
  transition:transform .55s cubic-bezier(.2,.9,.28,1.06), opacity .42s ease-out;
}
.modal-backdrop.open .modal{
  transform:none; opacity:1;
  /* gold glow IGNITES on open, then settles to a faint resting halo */
  animation:modalGlow 1.5s ease-out both;
}
@keyframes modalGlow{
  0%{box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 rgba(212,175,55,0);}
  32%{box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(212,175,55,0.55), 0 0 64px rgba(212,175,55,0.40);}
  100%{box-shadow:0 40px 120px -40px #000, 0 0 0 1px rgba(255,255,255,0.05), 0 0 26px rgba(212,175,55,0.14);}
}
@media (prefers-reduced-motion:reduce){
  .modal{transform:none!important;opacity:1!important;animation:none!important;}
  .modal-fx{display:none!important;}
}
.modal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--hair);background:rgba(255,255,255,0.03);color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s;
}
.modal__close:hover{color:var(--text);border-color:var(--hair-strong);background:rgba(255,255,255,0.06);}
.modal__eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.modal__eyebrow.wax{color:#E89A92;}
.modal h2,.modal__title{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,28px);line-height:1.12;margin-bottom:8px;}
.modal__sub{font-size:14px;color:var(--muted);font-weight:300;line-height:1.5;margin-bottom:16px;}
/* claim form → 2-column on desktop so it fits the screen without scrolling */
@media (min-width:600px){
  .modal form{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:start;}
  .modal form > *{grid-column:1 / -1;}
  .modal form > .form-row{grid-column:span 1;}
  .modal form > .form-row.two,
  .modal form > .form-row.full,
  .modal form > .consent-row,
  .modal form > .modal__actions,
  .modal form > .form-actions,
  .modal form > .modal__note{grid-column:1 / -1;}
}

/* wax seal accent */
.wax-seal{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #C0444C, #9B2226 55%, #6E1116);
  border:2px solid rgba(255,170,160,0.3);
  box-shadow:0 8px 24px rgba(155,34,38,0.5), inset 0 2px 6px rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;color:#FFE2DB;font-size:18px;
}

/* form */
.form-row{margin-bottom:13px;}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{display:block;font-size:12.5px;font-weight:500;color:#CBD5E1;margin-bottom:8px;letter-spacing:0.01em;}
label .req{color:var(--gold);}
.field{
  width:100%;background:rgba(255,255,255,0.025);border:1px solid var(--hair);border-radius:10px;
  padding:13px 15px;color:var(--text);font-family:'Inter',sans-serif;font-size:14.5px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field::placeholder{color:#5B6678;}
.field:focus{outline:none;border-color:rgba(212,175,55,0.55);background:rgba(212,175,55,0.04);box-shadow:0 0 0 3px rgba(212,175,55,0.12);}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
.field.invalid{border-color:#E0656E;background:rgba(224,101,110,0.06);}
.field-error{display:none;color:#F09098;font-size:12px;margin-top:7px;font-weight:400;}
.field-error.show{display:block;}

/* radio group */
.radio-group{display:flex;gap:12px;}
.radio-card{
  flex:1;border:1px solid var(--hair);border-radius:10px;padding:13px 16px;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);
  transition:border-color .2s,background .2s,color .2s;
}
.radio-card input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer;}
.radio-card:has(input:checked){border-color:rgba(212,175,55,0.6);background:rgba(212,175,55,0.07);color:var(--text);}

/* consent — premium ON/OFF toggle switch (role="switch") */
.consent{display:flex;align-items:flex-start;gap:13px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;}
.consent a:hover{color:#EBDCB0;}
.consent-text{padding-top:1px;}
.consent-switch{
  position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:rgba(255,255,255,0.04);
  padding:0;appearance:none;-webkit-appearance:none;outline:none;
  transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.consent-switch::before{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#94A3B8;box-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:transform .24s var(--ease),background .22s var(--ease);
}
.consent-switch[aria-checked="true"]{
  background:linear-gradient(180deg,#F4DD86,#D4AF37);border-color:rgba(212,175,55,0.7);
  box-shadow:0 0 0 0 rgba(212,175,55,0),0 4px 14px rgba(212,175,55,0.32);
}
.consent-switch[aria-checked="true"]::before{transform:translateX(20px);background:#1A1303;}
.consent-switch:focus-visible{box-shadow:0 0 0 3px rgba(212,175,55,0.3);}
.consent-switch.invalid{border-color:#E0656E;box-shadow:0 0 0 3px rgba(224,101,110,0.18);}

/* conditional reveal */
.conditional{display:none;}
.conditional.show{display:block;animation:fadeIn .3s var(--ease);}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.modal__note{font-size:12px;color:#7A8699;margin-top:16px;line-height:1.5;}
.modal__note b{color:#A9B6C8;font-weight:500;}

/* success card (founding sky coordinate) */
.sky-card{
  border:1px solid rgba(212,175,55,0.4);border-radius:14px;text-align:center;
  padding:clamp(24px,3vw,36px);
  background:radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,0.12), transparent 60%), rgba(255,255,255,0.015);
}
.sky-card .star{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,0.35),transparent 70%);
  display:flex;align-items:center;justify-content:center;
}
.sky-card .star svg{width:34px;height:34px;color:var(--gold);}
.sky-card h3{font-family:'Sora',sans-serif;font-weight:600;font-size:22px;margin-bottom:8px;}
.sky-card .coord{
  font-family:'JetBrains Mono',monospace;font-size:clamp(14px,1.8vw,17px);letter-spacing:0.06em;
  color:var(--gold);background:rgba(212,175,55,0.08);border:1px solid rgba(212,175,55,0.3);
  border-radius:10px;padding:14px 18px;margin:18px 0;word-break:break-word;
}
.sky-card p{font-size:13px;color:var(--muted);line-height:1.6;}

/* schedule (chat) info card */
.info-card{
  border:1px solid var(--hair-strong);border-radius:12px;padding:22px;
  background:rgba(255,255,255,0.02);font-size:14px;color:var(--muted);line-height:1.65;
}
.info-card b{color:var(--text);font-weight:500;}

/* ===== 13. RESPONSIVE ================================================= */
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1023px){
  .hero{gap:clamp(28px,5vh,44px);}
  .stage{max-width:520px;}
  .lede{max-width:640px;}
  .navlinks{display:none;}
  .navright .btn{display:none;}
  /* keep the small gold Claim Seat button visible on tablet (761–1023px)
     where desktop nav links are hidden and only the hamburger shows — ensures
     a primary CTA is always reachable. Hidden at ≤760px via the rule below. */
  .navright .btn--sm{display:inline-flex;}
  /* the base `.lang-toggle{display:inline-flex}` (defined later in the file)
     was overriding a plain `.lang-toggle--nav{display:none}` and leaving the
     EN/RO toggle in the mobile header — it pushed the hamburger off-screen.
     Specific selector + !important guarantees it's gone on mobile (it lives in
     the slide-out menu + footer instead). */
  .nav-wrap .lang-toggle--nav{display:none!important;}
  .hamburger{display:flex;}
  .navright{gap:0;}
  .pills{grid-template-columns:repeat(3,1fr);}
  .grid-3{grid-template-columns:1fr;}
}
@media (max-width:760px){
  :root{--nav-h:64px;}
  .grid-4{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .pills{grid-template-columns:repeat(2,1fr);}
  .navright .chip{display:none;}
  .navright .btn--sm{display:none;}
  .glimpse-top{flex-direction:column;align-items:flex-start;gap:8px;}
  .form-row.two{grid-template-columns:1fr;}
  .radio-group{flex-direction:column;}
}
/* ===== MOBILE GATE (Finding 4) =======================================
   On narrow screens the WebGL gate never inits (gate-scene.js bails at
   <=768px). Belt-and-suspenders: HARD-hide the fixed canvas and ALL of the
   gate chrome (projected guild labels, hotspots, scroll cue/progress) so no
   gate element can ever overlap the hero copy/CTAs/badges. The clean static
   SVG orbit (.stage) behind the copy stays as the hero on mobile. */
@media (max-width:768px){
  .gate-canvas{display:none!important;}
  .gate-hotspots,
  body.gate-active .gate-hotspots,
  .gate-node,.gate-node__label,
  .gate-cue,body.gate-active .gate-cue,
  .gate-progress,body.gate-active .gate-progress{display:none!important;}
  /* keep the static orbit cleanly BEHIND the copy at a calm scale */
  .stage{max-width:440px;}
}
@media (max-width:440px){
  .ctas{flex-direction:column;align-items:stretch;gap:12px;}
  .ctas .btn{width:100%;}
  /* badges wrap 2-3 per row instead of a tall 5-row full-width stack */
  .badges{justify-content:center;}
  .badge{flex:0 1 auto;}
  .pills{grid-template-columns:1fr 1fr;}
  .stage{max-width:380px;}
  .co-arc,.co-wait{font-size:9.5px;}
  .brand .word{font-size:18px;}
  .brand img{height:34px;}
}

/* ============================================================================
   PASS 2  —  Sections 5-9 + footer
   Reuses all PASS 1 tokens, components, reveal/parallax engine.
   ┌ 14. Section 5 — Founding Sky Coordinates (#sky)
   ├ 15. Section 6 — Six guilds constellation (#guilds)
   ├ 16. Section 7 — Service doors (#services)
   ├ 17. Section 8 — Team accountability (#progress)
   ├ 18. Section 9 — Final invitation (#invitation)
   ├ 19. Footer
   └ 20. PASS 2 responsive
   ========================================================================== */

/* ===== 14. SECTION 5 — FOUNDING SKY COORDINATES ======================= */
.sky-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.sky-grid .section-header{max-width:560px;}
.sky-legend{list-style:none;margin:clamp(22px,3vh,30px) 0 0;display:grid;gap:0;
  border-top:1px solid var(--hair);}
.sky-legend li{
  display:grid;grid-template-columns:minmax(120px,150px) 1fr;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.sky-legend .k{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);
}
.sky-legend .v{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.5;}
.sky-privacy{
  display:flex;align-items:flex-start;gap:12px;margin-top:24px;
  border:1px solid var(--hair);border-radius:var(--radius-sm);padding:14px 16px;
  background:rgba(212,175,55,0.04);font-size:13px;color:var(--muted);line-height:1.55;
}
.sky-privacy svg{width:20px;height:20px;flex:0 0 auto;color:var(--gold);margin-top:1px;}
.sky-privacy b{color:#EBDCB0;font-weight:600;}
.sky-cta{margin-top:26px;margin-bottom:0;}

/* example coordinate card — starfield/constellation */
.sky-stage{display:flex;justify-content:center;}
.coord-card{
  position:relative;width:100%;max-width:480px;overflow:hidden;
  border:1px solid rgba(212,175,55,0.4);border-radius:18px;
  padding:clamp(24px,3vw,34px);
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    radial-gradient(100% 70% at 10% 100%, rgba(212,175,55,0.10), transparent 60%),
    linear-gradient(180deg,#0B111B,#05080E);
  box-shadow:0 40px 110px -50px #000, inset 0 1px 0 rgba(255,255,255,0.05);
}
.coord-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 70% 16%, rgba(212,175,55,0.85), transparent),
    radial-gradient(1px 1px at 42% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 88% 72%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 84%, rgba(212,175,55,0.7), transparent),
    radial-gradient(1.1px 1.1px at 60% 40%, rgba(255,255,255,0.5), transparent);
}
.coord-constellation{position:absolute;top:0;left:0;right:0;height:46%;pointer-events:none;opacity:.8;}
.coord-constellation svg{width:100%;height:100%;}
.coord-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(48px,9vw,72px);}
.coord-tag{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
}
.coord-seal{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;color:#1A1303;font-size:16px;
  background:var(--gold-grad);box-shadow:0 6px 18px rgba(212,175,55,0.4),inset 0 1px 0 rgba(255,255,255,0.6);
}
.coord-glyph{
  position:relative;z-index:2;
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.05;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:14px;
}
.coord-line{
  position:relative;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:clamp(11px,1.4vw,13px);letter-spacing:0.04em;
  color:var(--gold);background:rgba(212,175,55,0.08);border:1px solid rgba(212,175,55,0.3);
  border-radius:10px;padding:11px 14px;margin-bottom:22px;word-break:break-word;
}
.coord-fields{position:relative;z-index:2;display:grid;gap:0;border-top:1px solid var(--hair);}
.coord-fields > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);}
.coord-fields dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.coord-fields dd{font-size:13px;color:var(--text);font-weight:500;text-align:right;}
.coord-fields dd.opt{color:var(--muted);font-weight:400;font-style:italic;}

/* ===== 15. SECTION 6 — SIX GUILDS CONSTELLATION ======================= */
/* TASK A: constellation made SMALLER and fully self-contained so it never
   bleeds into the footer. Node centers sit on a r=37% circle; circles are
   sized so the lowest node (Omnism, 87%) clears the container bottom with
   comfortable room, and the section adds bottom padding below it. The SVG
   connector endpoints (below) are recomputed to land on the exact node
   centers (viewBox 900, center 450, radius 333). */
.constellation{
  /* FULL-BLEED landscape band (like the hero gate fills the viewport) — breaks
     out of the .container so there are NO black left/right gaps, and it is a wide
     band (not a tall cropped square). The WebGL gate is framed centered with the
     six labels comfortably inside. */
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  /* taller, near-full-viewport band so the bottom gate has the same commanding
     presence as the hero gate (was 84vh — read as a smaller secondary gate). */
  height:min(92vh,980px);
}
/* TIGHTER TOP SPACING (Finding 2a): pull the constellation up so the previous
   section's coordinate card does NOT bleel into the focal point, and give the
   centerpiece balanced breathing room above + below. */
#guilds{padding-top:clamp(56px,8vh,104px);position:relative;isolation:isolate;z-index:1;overflow-x:clip;}
#guilds .section-header{margin-bottom:clamp(24px,3.5vh,40px);}
/* breathing room so nothing reaches the seam/footer at any viewport */
#guilds .constellation{margin-block:clamp(8px,2vh,24px) clamp(28px,5vh,56px);}
.const-web{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;}

/* SACRED GEOMETRY BEHIND THE #guilds CONSTELLATION (matches the hero's gate
   language). A CSS-drawn concentric-ring + radial sacred halo that lives behind
   the six-circle system. It IGNITES with .is-alive (same scroll-on-enter trigger
   as the nodes) — fading + scaling up in sync — then breathes/rotates slowly.
   Pure radial-gradient + conic spokes, transform/opacity only (no filter:blur).
   z-index:0 so it sits behind .const-web (1) and the nodes. */
.const-sacred{
  position:absolute;left:50%;top:50%;width:118%;height:118%;
  transform:translate(-50%,-50%) scale(.82);transform-origin:50% 50%;
  z-index:0;pointer-events:none;border-radius:50%;
  opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(212,175,55,0.10) 28.5% 29.2%, transparent 29.7% 41%, rgba(148,163,184,0.08) 41.5% 42%, transparent 42.5% 55%, rgba(212,175,55,0.10) 55.5% 56.3%, transparent 56.8% 70%, rgba(212,175,55,0.06) 70.5% 71%, transparent 71.5%),
    conic-gradient(from 0deg, transparent 0 11deg, rgba(212,175,55,0.05) 11.5deg 12deg, transparent 12.5deg 29deg, rgba(212,175,55,0.05) 29.5deg 30deg, transparent 30.5deg);
}
.constellation.is-alive .const-sacred{
  opacity:.9;transform:translate(-50%,-50%) scale(1);
  animation:constSacredSpin 90s linear infinite;
}
/* centering-preserving spin (keeps the translate(-50%,-50%) while rotating) */
@keyframes constSacredSpin{
  to{transform:translate(-50%,-50%) scale(1) rotate(360deg);}
}
@media (prefers-reduced-motion:reduce){
  .const-sacred{animation:none!important;transition:none!important;opacity:.7;transform:translate(-50%,-50%) scale(1);}
}
@media (max-width:1023px){.const-sacred{display:none;}}

/* ---- LIVING CONSTELLATION (Finding 2b) ----
   When #guilds scrolls into view, JS adds .is-alive to the .constellation.
   Cheap, transform/opacity-only choreography:
     • connector web + ring fade/draw in
     • six guild nodes ignite (scale + fade) staggered via --ni
     • the whole rotor gains a GENTLE continuous rotation (slow orbit) that a
       tiny rAF in site.js drives ONLY while on-screen (CSS var --rot); the
       nodes counter-rotate so their labels stay upright.
   Before .is-alive the nodes rest invisible (armed); they ALWAYS end fully
   visible once ignited (opacity:1). If JS never runs, the load-time safety
   sweep adds .is-alive so the constellation is never left blank. */
.const-rotor{transform:rotate(var(--rot,0deg));will-change:transform;}
.constellation .const-web,
.constellation .const-node{
  opacity:0;transition:opacity .6s var(--ease-out), transform .85s cubic-bezier(.34,1.42,.5,1);
}
/* nodes start small + gathered, then POP out into place with a gentle overshoot */
.constellation .const-node{transform:translate(-50%,-50%) scale(.5);}
.constellation{opacity:1 !important;}
.constellation.is-alive .const-web{opacity:1;}
.constellation.is-alive .const-node{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  transition-delay:calc(var(--ni,0) * 90ms + 120ms);
}
/* nodes counter-rotate so labels stay readable as the rotor turns */
.constellation.is-alive .const-node{
  transform:translate(-50%,-50%) scale(1) rotate(calc(-1 * var(--rot,0deg)));
}
/* the central seal also counter-rotates to stay upright */
.constellation.is-alive .const-core{transform:translate(-50%,-50%) rotate(calc(-1 * var(--rot,0deg)));}
/* gentle pulse/breathing of the central seal glow once alive (its own element,
   so it never fights the guild-circle hover transform). */
.constellation.is-alive .const-core-glow{animation:hazeDrift 7s ease-in-out infinite, sealPulse 5.5s ease-in-out infinite;}
@keyframes sealPulse{0%,100%{opacity:.85;}50%{opacity:1;}}

/* ===== ALIVE CONSTELLATION ENERGY ====================================
   Energy FLOWS along the connector spokes toward the nodes, and each guild
   node breathes a coloured aura (staggered per node = a travelling pulse).
   transform/opacity/stroke only → 60fps. */
.constellation.is-alive .const-web line{
  stroke-dasharray:5 12;
  animation:constFlow 2.6s linear infinite;
}
@keyframes constFlow{to{stroke-dashoffset:-34;}}
.constellation.is-alive .const-node::before{
  content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 38%,
    transparent 68%);
  animation:nodeAura 3.4s ease-in-out infinite;
  animation-delay:calc(var(--ni,0) * 0.42s);
}
@keyframes nodeAura{0%,100%{opacity:.22;transform:scale(.9);}50%{opacity:.62;transform:scale(1.1);}}
@media (prefers-reduced-motion:reduce){
  .constellation.is-alive .const-web line{animation:none!important;stroke-dasharray:none!important;}
  .constellation.is-alive .const-node::before{animation:none!important;opacity:.3;}
}
@media (prefers-reduced-motion:reduce){
  /* reduced-motion: everything static + fully visible, no rotation */
  .const-rotor{transform:none!important;}
  .constellation .const-web,.constellation .const-node{opacity:1!important;transform:translate(-50%,-50%)!important;transition:none!important;}
  .constellation .const-core{transform:translate(-50%,-50%)!important;}
}

/* central seal */
.const-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:26%;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  pointer-events:none;
}
/* PERF: pre-baked SOFT FOGGY glow, no filter:blur. Edgeless multi-stop
   gradient (fully transparent by ~64%) that gently breathes — a warm haze
   behind the seal, not a hard gold disk. transform+opacity only. */
.const-core-glow{
  position:absolute;inset:-55%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(212,175,55,0.22) 0%,
    rgba(212,175,55,0.12) 22%,
    rgba(60,80,130,0.05) 42%,
    rgba(40,60,100,0.02) 54%,
    transparent 64%);
  will-change:transform,opacity;
  animation:hazeDrift 16s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.const-core-glow{animation:none!important;}}
.const-logo{
  position:relative;width:86%;max-width:236px;height:auto;pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(212,175,55,0.45)) drop-shadow(0 0 12px rgba(0,240,255,0.18));
}
.const-core-label{
  position:relative;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);
}

/* nodes positioned on a r≈37% circle (six-around-one, evenly spaced).
   These percentages MUST match the SVG connector endpoints below. */
.const-node{
  position:absolute;z-index:4;width:clamp(108px,13.5vw,140px);
  transform:translate(-50%,-50%);text-align:center;
}
.pos-1{top:13%;left:50%;}    /* Tech — top */
.pos-2{top:31.5%;left:82%;}  /* Craft — top-right */
.pos-3{top:68.5%;left:82%;}  /* Merchant — bottom-right */
.pos-4{top:87%;left:50%;}    /* Omnism — bottom */
.pos-5{top:68.5%;left:18%;}  /* Frith — bottom-left */
.pos-6{top:31.5%;left:18%;}  /* Victualler — top-left */

.guild-circle{
  width:clamp(98px,12.5vw,124px);height:clamp(98px,12.5vw,124px);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;margin:0 auto;
  border:1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    radial-gradient(circle at 38% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    rgba(8,12,20,0.94);
  color:var(--text);padding:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 18px 40px -22px #000,
             inset 0 0 24px -8px color-mix(in srgb, var(--accent) 40%, transparent);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  /* PERF: NO backdrop-filter — these circles are 3D-rotated + scrubbed on
     scroll; a backdrop blur would re-composite the whole scene per frame.
     The solid rgba fill below reads the same against the dark void. */
}
.guild-circle:hover{
  transform:translateY(-4px) scale(1.03);
  border-color:color-mix(in srgb, var(--accent) 85%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
             0 24px 50px -20px #000,
             0 0 40px -6px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* hover ZOOM: the hovered guild scales up + ignites before its card opens
   (JS adds .guild-zoom on the node + freezes the orbit). */
.const-node.guild-zoom{z-index:9;}
.const-node.guild-zoom .guild-circle{
  transform:scale(1.2)!important;
  border-color:color-mix(in srgb, var(--accent) 95%, transparent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
             0 30px 70px -18px #000,
             0 0 60px -2px color-mix(in srgb, var(--accent) 75%, transparent)!important;
}
.const-node.beachhead .guild-circle::after{
  content:"BEACHHEAD";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:0.16em;color:#1A1303;
  background:var(--gold-grad);border-radius:999px;padding:3px 9px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(212,175,55,0.4);
}
.const-node.beachhead .guild-circle{position:relative;}
.gc-name{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(15px,1.7vw,19px);
  color:color-mix(in srgb, var(--accent) 50%, #FFFFFF);letter-spacing:0.01em;}
.gc-status{font-family:'JetBrains Mono',monospace;font-size:clamp(8px,0.85vw,9.5px);letter-spacing:0.03em;
  color:var(--muted);line-height:1.35;max-width:90%;}

/* ---- GUILD PRODUCT OVERLAY (replaces the old per-node action menu) ----
   A single panel, positioned by JS near the hovered/tapped guild circle.
   Lists the guild's products as data-driven links; "coming soon" muted. */
#guilds .container{position:relative;}
.guild-overlay{
  position:fixed;z-index:110;width:min(340px,86vw);
  border:1px solid var(--hair-strong);border-radius:18px;
  padding:16px 16px 16px;
  background:
    radial-gradient(130% 90% at 50% -12%, color-mix(in srgb,var(--accent,var(--gold)) 20%, transparent), transparent 60%),
    linear-gradient(180deg,#0C131E,#05080F);
  box-shadow:0 34px 80px -34px #000, 0 0 0 1px rgba(255,255,255,0.02),
             0 0 44px -18px color-mix(in srgb,var(--accent,var(--gold)) 60%, transparent),
             inset 0 1px 0 rgba(255,255,255,0.06);
  /* guild-accent edge */
  border-top:2px solid color-mix(in srgb,var(--accent,var(--gold)) 75%, transparent);
  /* ---- POINTER-EVENTS DISCIPLINE (Priority 2) ----
     The overlay only captures the pointer when it is actually OPEN. When
     closed it is display:none (hidden attr) AND pointer-events:none, so it can
     never sit invisibly over the nav / hero CTAs / other section buttons. */
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.guild-overlay.open{
  pointer-events:auto;       /* only the panel itself captures clicks */
  opacity:1;
  transform:none;
}
/* hard guarantee: a closed overlay occupies zero space and ignores input */
.guild-overlay[hidden]{display:none!important;pointer-events:none!important;}
/* ---- PREMIUM OVERLAY REDESIGN (Priority 5) ----
   Titled header (guild name + one-line subtitle), then a refined list:
   each row = accent dot + product name + either an arrow (real link) or a
   small muted mono "coming soon" tag. Thin hairline separators, accent slide
   + glow on hover, staggered entrance. */
/* ---- accent-tinted header: crest + name + mono kicker + status pill ---- */
.guild-overlay .go-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  margin:-2px -2px 0;padding:4px 6px 13px;border-bottom:1px solid var(--hair);
}
.guild-overlay .go-crest{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--accent,var(--gold)) 34%, transparent), transparent 72%),
    rgba(8,12,20,0.9);
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 55%, transparent);
  box-shadow:inset 0 0 14px -6px color-mix(in srgb,var(--accent,var(--gold)) 70%, transparent);
}
.guild-overlay .go-crest-dot{
  width:11px;height:11px;border-radius:50%;background:var(--accent,var(--gold));
  box-shadow:0 0 12px color-mix(in srgb,var(--accent,var(--gold)) 85%, transparent);
}
.guild-overlay .go-head-text{min-width:0;}
.guild-overlay .go-title{
  font-family:'Sora',sans-serif;font-weight:600;font-size:18px;line-height:1.1;margin:0 0 4px;
  color:color-mix(in srgb,var(--accent,var(--gold)) 42%, #FFFFFF);letter-spacing:-0.01em;
}
.guild-overlay .go-sub{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400;line-height:1.4;margin:0;
}
.guild-overlay .go-status{
  flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:0.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent,var(--gold)) 45%, #FFFFFF);
  border:1px solid color-mix(in srgb,var(--accent,var(--gold)) 32%, transparent);
  border-radius:999px;padding:4px 8px;white-space:nowrap;line-height:1;
  background:color-mix(in srgb,var(--accent,var(--gold)) 8%, transparent);
}
/* one-line guild tagline under the header */
.guild-overlay .go-desc-lead{
  margin:11px 6px 4px;font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;
  color:var(--muted);font-weight:300;
}

.guild-overlay .go-list{list-style:none;margin:6px 0 0;padding:0;display:block;}
.guild-overlay .go-item{margin:0;border-bottom:1px solid var(--hair);}
.guild-overlay .go-item:last-child{border-bottom:0;}

/* shared row layout for both link + coming-soon */
.guild-overlay .go-link,
.guild-overlay .go-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 8px;border-radius:10px;
  font-family:'Manrope',sans-serif;position:relative;
}
/* accent dot before the name */
.guild-overlay .go-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;align-self:flex-start;margin-top:6px;
  background:var(--accent,var(--gold));
  box-shadow:0 0 8px color-mix(in srgb,var(--accent,var(--gold)) 70%,transparent);
}
.guild-overlay .go-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.guild-overlay .go-name{font-size:14px;font-weight:600;line-height:1.2;}
.guild-overlay .go-desc{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:300;line-height:1.4;color:var(--muted);}

/* per-item status pill */
.guild-overlay .go-tag{
  flex:0 0 auto;align-self:center;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:0.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:999px;padding:3px 8px;white-space:nowrap;line-height:1;color:var(--muted);
}
.guild-overlay .go-tag--live{
  color:color-mix(in srgb,var(--accent,var(--gold)) 40%, #FFFFFF);
  border-color:color-mix(in srgb,var(--accent,var(--gold)) 45%, transparent);
  background:color-mix(in srgb,var(--accent,var(--gold)) 12%, transparent);
}

/* real link: clickable look (text bright + arrow) */
.guild-overlay .go-link{color:var(--text);transition:background .2s,color .2s,transform .18s var(--ease);}
.guild-overlay .go-link:hover{
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent,var(--gold)) 12%,transparent), transparent 80%);
  transform:translateX(3px);
}
.guild-overlay .go-link:hover .go-name{color:color-mix(in srgb,var(--accent,var(--gold)) 38%,#FFFFFF);}
.guild-overlay .go-arrow{color:var(--accent,var(--gold));font-size:18px;line-height:1;flex:0 0 auto;align-self:center;
  transition:transform .2s var(--ease);}
.guild-overlay .go-link:hover .go-arrow{transform:translateX(2px);}

/* coming-soon row: muted name, gentle accent slide on hover */
.guild-overlay .go-item.is-soon .go-row{transition:background .2s,transform .18s var(--ease);}
.guild-overlay .go-item.is-soon .go-dot{opacity:.45;box-shadow:none;}
.guild-overlay .go-item.is-soon .go-name{color:#9aa6ba;font-weight:500;}
.guild-overlay .go-item.is-soon .go-row:hover{
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent,var(--gold)) 8%,transparent), transparent 80%);
  transform:translateX(2px);
}

/* "Enter the guild" CTA */
.guild-overlay .go-foot{margin-top:13px;padding-top:13px;border-top:1px solid var(--hair);}
.guild-overlay .go-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:'Sora',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.01em;
  padding:11px 14px;border-radius:11px;cursor:pointer;text-align:center;
  color:#05070C;background:var(--accent,var(--gold));border:1px solid transparent;
  box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent,var(--gold)) 80%, transparent);
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.guild-overlay .go-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent,var(--gold)) 90%, transparent);}
.guild-overlay .go-cta-arrow{font-size:17px;line-height:1;}
/* forming/soon guilds: ghost CTA (routes to claim) instead of a solid live link */
.guild-overlay .go-cta--soon{
  color:color-mix(in srgb,var(--accent,var(--gold)) 45%, #FFFFFF);
  background:color-mix(in srgb,var(--accent,var(--gold)) 8%, transparent);
  border-color:color-mix(in srgb,var(--accent,var(--gold)) 40%, transparent);
  box-shadow:none;
}
.guild-overlay .go-cta--soon:hover{
  background:color-mix(in srgb,var(--accent,var(--gold)) 16%, transparent);filter:none;
  box-shadow:0 10px 26px -16px color-mix(in srgb,var(--accent,var(--gold)) 70%, transparent);
}

/* staggered entrance — CSS fallback ONLY when GSAP is not driving (GSAP runs
   its own stagger via fromTo; .gsap-active suppresses this to avoid double-anim) */
.guild-overlay.open .go-item{animation:goItemIn .34s var(--ease-out) both;animation-delay:calc(var(--oi,0) * 45ms + 80ms);}
.guild-overlay.open .go-head{animation:goHeadIn .3s var(--ease-out) both;}
.guild-overlay.open .go-foot{animation:goItemIn .34s var(--ease-out) both;animation-delay:.24s;}
@keyframes goItemIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes goHeadIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gsap-active .guild-overlay.open .go-item,
.gsap-active .guild-overlay.open .go-head,
.gsap-active .guild-overlay.open .go-foot{animation:none;}
@media (prefers-reduced-motion:reduce){
  .guild-overlay.open .go-item,
  .guild-overlay.open .go-head,
  .guild-overlay.open .go-foot{animation:none!important;}
}

/* stacked guild map (mobile / no-constellation) — hidden on desktop */
.guild-map{display:none;}
.guild-card{position:relative;}
.guild-card .gc-beach{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);}
.guild-card h3{color:color-mix(in srgb, var(--accent) 45%, #FFFFFF);margin-bottom:6px;}
.guild-card .gc-st{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;color:var(--muted);margin-bottom:6px;
}
.guild-card-btn{
  display:flex;flex-direction:column;flex:1 1 auto;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;padding:0;
}
.guild-card-btn .gc-cue{margin-top:auto;}
.guild-card .gc-cue{
  display:inline-block;margin-top:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.06em;
  color:color-mix(in srgb,var(--accent) 45%,#FFFFFF);
}

/* ===== 16. SECTION 7 — SERVICE DOORS ================================= */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.6vw,24px);}
.door{perspective:1000px;}
/* SIGNATURE 3D "doors open" reveal — armed ONLY when scroll-fx.js runs (adds
   .fx-doors). Base .door stays fully visible for no-JS / reduced-motion. Each
   door is a half-open 3D panel hinged on its left edge; IntersectionObserver
   adds .is-open and the door swings flat + forward, staggered via --i. */
.doors.fx-doors{perspective:1600px;}
.doors.fx-doors .door{
  opacity:0;
  transform:rotateY(-70deg) translateZ(-130px);
  transform-origin:left center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.doors.fx-doors .door.is-open{
  opacity:1;
  transform:rotateY(0deg) translateZ(0);
  transition:opacity .6s ease-out, transform .95s cubic-bezier(.2,.9,.3,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
@media (prefers-reduced-motion:reduce){
  .doors.fx-doors .door{opacity:1;transform:none;}
}
.door-inner{
  position:relative;border-radius:var(--radius);
  transition:transform .45s var(--ease);transform-style:preserve-3d;
}
.door-frame{
  position:relative;border:1px solid var(--hair);border-radius:var(--radius);
  padding:clamp(24px,2vw,32px) clamp(20px,1.8vw,28px) clamp(22px,2vw,28px);
  min-height:clamp(360px,42vh,440px);display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 30%),
    linear-gradient(180deg, var(--surface), #060A11);
  box-shadow:0 18px 50px -30px var(--umber-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
/* hairline door seam down the leading edge */
.door-frame::before{
  content:"";position:absolute;top:14px;bottom:14px;left:14px;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent),transparent);
  opacity:.5;
}
/* door handle hint */
.door-frame::after{
  content:"";position:absolute;top:50%;left:22px;width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 80%,transparent);opacity:.7;
}
.door:hover .door-frame{
  transform:translateY(-8px) rotateY(-6deg);transform-origin:left center;
  border-color:color-mix(in srgb,var(--accent) 50%,var(--hair-strong));
  box-shadow:-12px 30px 70px -34px #000,
             0 0 50px -16px color-mix(in srgb,var(--accent) 50%,transparent),
             inset 0 1px 0 rgba(255,255,255,0.06);
}
.door-no{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;color:var(--muted);
  margin-bottom:auto;align-self:flex-end;
}
.door-icon{
  width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair-strong);margin:6px 0 18px;
  background:radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
  color:var(--accent);
}
.door-icon svg{width:24px;height:24px;}
.door-frame h3{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--fs-h3);margin-bottom:10px;}
.door-frame p{font-size:var(--fs-small);line-height:1.6;color:var(--muted);font-weight:300;margin-bottom:20px;flex:1 1 auto;}
.door--gold .door-frame{background:
    linear-gradient(180deg, rgba(212,175,55,0.10), transparent 34%),
    linear-gradient(180deg, var(--surface), #060A11);
  border-color:rgba(212,175,55,0.28);}

/* service / log modal panels */
.svc-panel .info-card{margin-top:0;}
.log-list{list-style:none;margin:6px 0 0;display:grid;gap:0;border-top:1px solid var(--hair);}
.log-list li{
  display:grid;grid-template-columns:minmax(70px,90px) 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--hair);
}
.log-date{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;color:var(--gold);}
.log-text{font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.5;}
.log-text b{color:var(--text);font-weight:600;}

/* ===== 17. SECTION 8 — TEAM ACCOUNTABILITY ========================== */
.progress-item .badge{margin-bottom:16px;}
.progress-item h3{margin-bottom:10px;}

/* ===== 18. SECTION 9 — FINAL INVITATION ============================= */
.invitation{text-align:center;}
/* Finding 5: center the whole invitation block on wide screens (1440–2560) so
   the jewel + headline + copy + badges stay balanced, not drifting left with an
   empty right. The inline max-width:840px now sits centered via auto margins. */
.invitation .section-header{margin:0 auto;}
.jewel{
  position:relative;width:clamp(140px,18vw,196px);aspect-ratio:1/1;margin:0 auto clamp(26px,4vh,38px);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  /* the soft haze overflows this box on purpose; isolate so its blend never
     darkens/overlaps neighboring copy, and keep it purely decorative. */
  isolation:isolate;
}
/* LIVING JEWEL AURA — drifting glowing particles (painted by initJewelParticles
   in site.js) replace the old flat aura disk. A soft static glow sits behind as
   a base + reduced-motion fallback. Both overflow the jewel box on purpose and
   feather to transparent so they never read as a hard colored circle. */
.jewel-glow{
  position:absolute;inset:-46%;border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 48%,
      rgba(212,175,55,0.20) 0%,
      rgba(212,175,55,0.10) 26%,
      rgba(0,240,255,0.05) 46%,
      transparent 64%);
  will-change:transform,opacity;
  animation:jewelGlowBreathe 14s ease-in-out infinite;
}
.jewel-particles{
  position:absolute;inset:-46%;width:192%;height:192%;display:block;
  pointer-events:none;z-index:1;
}
/* ---- particle halo on the small FOOTER + HEADER brand logos (same engine as
   the Invitation jewel; replaces the old static glow). The canvas fills its
   stage; the logo image stays above it. ---- */
.footer-jewel{ inset:0; width:100%; height:100%; z-index:0; }
.brand{position:relative;}
.brand-jewel-stage{
  position:absolute; left:-13px; top:50%; transform:translateY(-50%);
  width:62px; height:62px; pointer-events:none; z-index:0;
}
.brand-jewel{ inset:0; width:100%; height:100%; z-index:0; }
.brand > img{ position:relative; z-index:1; }
.footer-brand-logo .brand-jewel-stage{display:none;} /* footer uses footer-logo-stage */
@keyframes jewelGlowBreathe{
  0%,100%{transform:scale(1);opacity:.85;}
  50%{transform:scale(1.06);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  /* particle canvas never starts under reduced-motion; static glow is the fallback */
  .jewel-glow{animation:none!important;}
  .jewel-particles{display:none;}
}
.jewel-logo{
  position:relative;z-index:2;width:74%;height:auto;
  filter:drop-shadow(0 0 30px rgba(212,175,55,0.32)) drop-shadow(0 0 18px rgba(0,240,255,0.20));
}
.inv-intro{margin-inline:auto;max-width:680px;}
.inv-badges{justify-content:center;margin:clamp(22px,3vh,30px) auto 0;}
.inv-cta{justify-content:center;margin:clamp(28px,4vh,40px) 0 0;}

/* ===== 19. FOOTER ====================================================
   ARTIFACT FIX: previously the footer had BOTH a `border-top` hairline AND a
   `::before` gold seam 1px above it → two stacked lines that read as a
   doubled/offset seam. Now there is ONE clean top seam (the gold ::before,
   pinned exactly at top:0), no border-top. The footer-top column divider is
   a single, full-width bottom border that the layout (no content-visibility)
   keeps pinned to the column floor — it no longer mis-paints up through the
   menu columns. */
.site-footer{
  position:relative;z-index:1;
  background:linear-gradient(180deg, rgba(8,12,20,0) 0%, rgba(6,9,16,0.6) 60%, rgba(4,6,12,0.9) 100%);
  padding-block:clamp(48px,7vh,80px) clamp(28px,4vh,40px);
}
/* single hairline gold seam, flush at the very top edge (no offset, no stack) */
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,175,55,0.32),transparent);
}
.footer-top{
  display:flex;flex-wrap:wrap;
  gap:clamp(32px,5vw,72px);padding-bottom:clamp(36px,5vh,52px);
  align-items:flex-start;
}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 clamp(220px,28%,330px);}
.footer-brand .brand{margin-bottom:18px;}

/* ---- footer logo: simple static soft glow ----
   The drifting particle effect now lives on the Invitation jewel logo. The
   footer logo keeps only a static .footer-aura glow behind it. */
.footer-brand-logo{position:relative;}
.footer-logo-stage{
  position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:96px;height:96px;pointer-events:none;z-index:0;
}
/* soft static glow fallback (always visible; only effect under reduced-motion) */
.footer-aura{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(212,175,55,0.28) 0%,
    rgba(212,175,55,0.12) 38%,
    rgba(212,175,55,0) 70%);
}
/* keep the logo image + text above the static aura */
.footer-brand-logo > img,
.footer-brand-logo > span:not(.footer-logo-stage){position:relative;z-index:1;}
.footer-tag{font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:300;max-width:380px;margin-bottom:24px;}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;}
.soc{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);color:var(--muted);background:rgba(255,255,255,0.015);
  transition:color .25s var(--ease), border-color .25s, background .25s, transform .25s;
}
.soc svg{width:18px;height:18px;}
.soc:hover{color:var(--gold);border-color:rgba(212,175,55,0.45);background:rgba(212,175,55,0.07);
  transform:translateY(-3px);box-shadow:0 8px 20px -10px rgba(212,175,55,0.5);}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,36px);align-items:start;flex:1 1 420px;}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.footer-col h4{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.footer-col a,.footer-link{
  display:block;text-align:left;width:auto;background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;color:var(--muted);padding:7px 0;letter-spacing:0.01em;
  transition:color .2s, padding-left .2s;
}
.footer-col a:hover,.footer-link:hover{color:var(--text);padding-left:5px;}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;
  padding-top:clamp(22px,3vh,30px);
  border-top:1px solid var(--hair);margin-top:clamp(28px,4vh,44px);
}
.footer-meta{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);}
.footer-meta i{font-style:italic;color:#8896AB;}
.footer-hq{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;color:#6E7A8E;}
.lang-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,0.015);}
.lang-btn{
  background:none;border:0;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.08em;
  color:var(--muted);padding:3px 6px;border-radius:6px;transition:color .2s;
}
.lang-btn[aria-pressed="true"]{color:var(--gold);font-weight:600;}
.lang-btn:hover{color:var(--text);}
.lang-sep{color:#475064;}

/* ===== 20. PASS 2 RESPONSIVE ======================================== */
@media (max-width:1023px){
  .sky-grid{grid-template-columns:1fr;}
  .sky-grid .section-header{max-width:none;order:1;}
  .sky-stage{order:2;}
  .doors{grid-template-columns:repeat(2,1fr);}
  /* collapse the constellation to a clean stacked map */
  .constellation{display:none;}
  .guild-map{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,22px);}
  /* footer-top is a FLEX ROW on desktop; on mobile it becomes a FLEX COLUMN with
     `flex:0 0 auto` on every child so each sizes by its own CONTENT height. (The
     old failure: `flex:0 0 clamp(220px,28%,330px)` on .footer-brand is a WIDTH
     basis that, under flex-direction:column, becomes a bogus HEIGHT basis →
     collapsed footer-top and overlapped the copyright. Resetting the basis to
     auto kills that.) Order is brand → columns; .footer-bottom is a SIBLING that
     always follows, so the copyright stays LAST with zero overlap. */
  .footer-top{display:flex;flex-direction:column;}
  .footer-brand{flex:0 0 auto;width:100%;margin-bottom:clamp(32px,5vh,44px);}
  .footer-cols{flex:0 0 auto;width:100%;}
}
@media (max-width:760px){
  .doors{grid-template-columns:1fr;}
  .door-frame{min-height:0;}
  .guild-map{grid-template-columns:1fr;}
  /* the 4 link columns become a single full-width FLEX COLUMN (each sizes to its
     content; cannot collapse). .footer-bottom (copyright + lang) is the LAST
     sibling of .footer-top inside .container → always renders below, no overlap. */
  .footer-cols{display:flex;flex-direction:column;width:100%;gap:0;}
  .footer-col{flex:0 0 auto;width:100%;margin-bottom:28px;}
  .footer-col:last-child{margin-bottom:0;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
  .coord-fields dd{font-size:12.5px;}
  .sky-legend li{grid-template-columns:1fr;gap:3px;}
}
@media (max-width:440px){
  .footer-cols{grid-template-columns:1fr;}
  .coord-fields > div{flex-direction:column;gap:3px;}
  .coord-fields dd{text-align:left;}
}

/* reduced motion: freeze the jewel glow (the particle canvas never starts) */
@media (prefers-reduced-motion:reduce){
  .jewel-glow{animation:none!important;}
}

/* =======================================================================
   WEBGL SACRED-GATE CINEMATIC HERO  (js/gate-scene.js)
   The canvas is always in the DOM but only painted when gate-scene.js inits
   (WebGL ok + motion allowed). body.gate-active toggles all the cinematic
   chrome and HIDES the static SVG orbit (the fallback). If the gate never
   inits, none of .gate-active applies → the static hero stays fully visible.
   ======================================================================= */
.gate-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0;                 /* above bg layers (-6..-2), below .page (1) */
  pointer-events:none;       /* raycaster reads pointer via window listener */
  display:none;              /* shown only once the scene is live */
  opacity:0; transition:opacity .6s var(--ease);
}
body.gate-active .gate-canvas{display:block;}
body.gate-active .gate-canvas.is-ready{opacity:1;}

/* When the gate is live the canvas IS the living 3D backdrop (centered on the
   viewport) — hide the static SVG stage + its hotspots. The hero COPY stays a
   SINGLE CENTERED column, fully visible + readable from scroll progress 0. The
   gate forms IN THE CENTER, behind/around the data; on scroll the data settles
   and the labeled orbit assembles in the same centered space (the morph). */
body.gate-active .scene--hero .stage{display:none;}
body.gate-active .scene--hero .orbit-hotspots{display:none;}
body.gate-active .scene--hero .hero{
  min-height:calc(100vh - var(--nav-h));
  justify-content:center;
}
body.gate-active .scene--hero .hero-copy{
  position:relative;
  max-width:min(820px,94%);
  display:flex; flex-direction:column; align-items:center;
  /* READABILITY SCRIM: a soft dark halo behind the centered copy so the H1/body
     keep strong contrast over the bright 3D gate. Feathered so it never reads as
     a hard box; sits behind the text via the ::before below. */
  padding:clamp(22px,3vw,44px) clamp(22px,4vw,56px);
  border-radius:26px;
}
body.gate-active .scene--hero .hero-copy::before{
  content:""; position:absolute; inset:-2% -4%; z-index:-1;
  /* READABILITY SCRIM — a TIGHT, feathered ELLIPSE that hugs only the text
     column. Pure radial gradient, NO backdrop-filter / NO filter:blur (homepage
     60fps contract). It is intentionally light + dies to transparent well inside
     the edge so the moving WebGL gate rings READ THROUGH it (the per-line
     text-shadow below carries most of the legibility). As the data recedes on
     scroll, gate-scene.js fades --scrim → 0 so the orbit becomes unobstructed. */
  opacity:var(--scrim,1);
  transition:opacity .15s linear;
  background:
    radial-gradient(72% 56% at 50% 50%,
      rgba(6,9,16,0.58) 0%,
      rgba(6,9,16,0.40) 44%,
      rgba(6,9,16,0.16) 70%,
      transparent 100%);
  pointer-events:none;
}
body.gate-active .scene--hero .hero-copy > *{position:relative;}
/* legibility lives in the text itself so the scrim can stay light + the rings
   show through behind the copy. */
body.gate-active .scene--hero .hero-copy .overline,
body.gate-active .scene--hero .hero-copy h1,
body.gate-active .scene--hero .hero-copy .lede,
body.gate-active .scene--hero .hero-copy .hero-scale,
body.gate-active .scene--hero .hero-copy .badges{
  text-shadow:0 1px 3px rgba(2,5,11,0.92), 0 3px 22px rgba(2,5,11,0.78);
}
body.gate-active .scene--hero .lede{max-width:600px;}
body.gate-active .scene--hero .ctas{justify-content:center;}
body.gate-active .scene--hero .badges{justify-content:center;}

/* The hero copy is VISIBLE AND READABLE from the top (progress 0). When the gate
   is live, gate-scene.js drives a gentle scroll-LINKED parallax on each
   [data-hero-el] via INLINE transform/opacity (the offer data "settles" as the
   orbit becomes the centerpiece), so we must NOT force transform:none here.
   At p=0 the JS writes the full-visible state. The CSS only provides the resting
   baseline (fully visible) for the instant before the first scroll frame. */
body.gate-active [data-hero-el]{
  opacity:1; transform:none;
}

/* The composition stays CENTERED at every breakpoint — no left/right bias. The
   readability scrim keeps the centered copy legible over the centered gate. */

/* progress indicator — vertical track, right edge, everswap style ------- */
.gate-progress{
  position:fixed; right:clamp(14px,2.2vw,30px); top:50%;
  transform:translateY(-50%);
  z-index:70; display:none; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none; font-family:'JetBrains Mono',monospace;
}
body.gate-active .gate-progress{display:flex;}
.gate-progress__track{
  position:relative; width:2px; height:clamp(120px,22vh,200px);
  background:rgba(214,200,170,0.14); border-radius:2px; overflow:hidden;
}
.gate-progress__bar{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform:scaleY(0); transform-origin:top center;
  background:linear-gradient(180deg,#F4DD86,#D4AF37 60%,#A57F28);
  box-shadow:0 0 10px rgba(212,175,55,0.6);
  will-change:transform;
}
.gate-progress__pct{
  font-size:11px; letter-spacing:0.08em; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* scroll cue at the very top of the pinned hero ------------------------- */
.gate-cue{
  position:fixed; left:50%; bottom:clamp(18px,4vh,40px);
  transform:translateX(-50%); z-index:70; display:none;
  flex-direction:column; align-items:center; gap:8px; pointer-events:none;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--muted);
  transition:opacity .4s var(--ease);
}
body.gate-active .gate-cue{display:flex;}
.gate-cue__line{
  width:1px; height:34px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:gateCueScroll 1.8s ease-in-out infinite;
}
@keyframes gateCueScroll{
  0%{transform:scaleY(0);transform-origin:top;opacity:0;}
  40%{transform:scaleY(1);transform-origin:top;opacity:1;}
  60%{transform:scaleY(1);transform-origin:bottom;opacity:1;}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0;}
}
@media (prefers-reduced-motion:reduce){.gate-cue__line{animation:none;}}

/* WebGL guild hotspots — invisible, positioned per-frame by gate-scene.js -- */
.gate-hotspots{
  position:fixed; inset:0; z-index:60; pointer-events:none; display:none;
}
body.gate-active .gate-hotspots{display:block;}
.gate-node{
  position:absolute; width:clamp(56px,7vw,92px); aspect-ratio:1/1;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .3s var(--ease);
}
.gate-node[data-guild-node="Tech"]{--accent:var(--tech);}
.gate-node[data-guild-node="Craft"]{--accent:var(--craft);}
.gate-node[data-guild-node="Merchant"]{--accent:var(--merchant);}
.gate-node[data-guild-node="Omnism"]{--accent:var(--amethyst);}
.gate-node[data-guild-node="Frith"]{--accent:var(--frith);}
.gate-node[data-guild-node="Victualler"]{--accent:var(--victualler);}
.gate-hotspot{
  width:100%; height:100%; border-radius:50%; cursor:pointer; padding:0;
  background:transparent; border:1px solid transparent; pointer-events:auto;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.gate-hotspot:hover,
.gate-node:focus-within .gate-hotspot{
  background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%);
  border-color:rgba(255,255,255,0.30);
}

/* GUILD NAME LABELS (item 3) — a readable, accent-tinted name pinned under each
   projected 3D guild node. Centered on the node, sits just below the circle. */
.gate-node__label{
  position:absolute; left:50%; top:calc(100% + 4px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  font-family:'Sora',sans-serif; font-weight:600;
  font-size:clamp(11px,1.05vw,14px); letter-spacing:0.02em; white-space:nowrap;
  color:#fff; pointer-events:none; user-select:none;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.9),
    0 0 10px rgba(0,0,0,0.7),
    0 0 16px var(--accent, rgba(212,175,55,0.6));
}
.gate-node__name{ display:block; }
.gate-node__status{
  display:block; margin-top:2px;
  font-family:'JetBrains Mono',monospace; font-weight:400;
  font-size:9px; letter-spacing:0.03em; line-height:1.3;
  color:var(--muted); text-align:center;
  white-space:normal; max-width:120px;
  text-shadow:0 1px 2px rgba(0,0,0,0.85);
}
.gate-node__label::before{
  /* faint accent dot/underline tint so the name reads as belonging to the node */
  content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
  width:60%; height:1px; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--accent,#D4AF37), transparent);
  opacity:.85;
}

/* The pinned ScrollTrigger spacer can leave the nav over the canvas — keep
   nav above everything as before (z-index:80 already > canvas 0). */

/* ============================================================
   BACK-TO-TOP button (js/extras.js) — fixed bottom-RIGHT, fades
   in after scrolling. Elegant gold-ringed disc; never covers the
   left-side 3D switch or the cookie controls.
   ============================================================ */
.to-top{
  position:fixed; right:clamp(1rem,2.4vw,1.7rem); bottom:clamp(1rem,2.4vw,1.7rem);
  z-index:55; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(5,8,14,.82); color:var(--gold-lt);
  border:1px solid rgba(212,175,55,.4);
  box-shadow:0 10px 28px -8px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .25s, box-shadow .25s;
}
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--gold); box-shadow:0 12px 30px -6px rgba(212,175,55,.4); color:#fff; }
.to-top svg{ width:22px; height:22px; fill:currentColor; }

/* ============================================================
   COOKIE SETTINGS FAB — fixed LEFT, just ABOVE the 3D switch.
   (On mobile the 3D switch is hidden; the FAB still sits bottom-left.)
   ============================================================ */
.ck-fab{
  position:fixed; left:clamp(.85rem,2vw,1.5rem);
  bottom:calc(clamp(.85rem,2vw,1.5rem) + 52px);
  z-index:55; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(5,8,14,.8); color:var(--gold-lt);
  border:1px solid rgba(212,175,55,.32);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.65);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .25s, transform .2s, color .25s;
}
.ck-fab:hover{ border-color:var(--gold); color:#fff; transform:translateY(-1px); }
.ck-fab svg{ width:20px; height:20px; }
/* on mobile/tablet there is no 3D switch below it — sit closer to the corner */
@media (max-width:1023px){ .ck-fab{ bottom:clamp(.85rem,3vw,1.4rem); } }

/* ============================================================
   COOKIE CONSENT banner (bottom-centre card, slides up on entry)
   ============================================================ */
.ck-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; justify-content:center; padding:clamp(.8rem,2vw,1.5rem);
  pointer-events:none;
}
.ck-consent.is-on{ pointer-events:auto; }
.ck-card{
  width:min(680px,100%);
  background:linear-gradient(180deg, rgba(12,16,26,.97), rgba(7,10,18,.97));
  border:1px solid rgba(212,175,55,.32); border-radius:18px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(212,175,55,.06);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:clamp(1rem,2.4vw,1.6rem);
  transform:translateY(24px); opacity:0;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.ck-consent.is-on .ck-card{ transform:none; opacity:1; }
.ck-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.ck-ico{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:rgba(212,175,55,.14); color:var(--gold-lt); flex:0 0 auto; }
.ck-ico svg{ width:19px; height:19px; }
.ck-card h3{ margin:0; font-family:'Sora',sans-serif; font-size:1.05rem; color:#fff; font-weight:600; }
.ck-text{ margin:.2rem 0 .7rem; color:var(--muted); font-size:.9rem; line-height:1.5; }
.ck-links{ display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; margin-bottom:.8rem; }
.ck-links a{ color:var(--gold); font-size:.82rem; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.ck-links a:hover{ border-color:var(--gold); }
.ck-opts{ display:flex; flex-direction:column; gap:.1rem; margin:.2rem 0 .9rem;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:.4rem 0; }
.ck-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .1rem; }
.ck-row span{ display:flex; flex-direction:column; }
.ck-row b{ color:#eef2fb; font-size:.9rem; font-weight:600; }
.ck-row small{ color:var(--muted); font-size:.76rem; line-height:1.35; }
.ck-sw{ position:relative; flex:0 0 auto; width:42px; height:23px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(212,175,55,.3); cursor:pointer; padding:0;
  transition:background .25s, border-color .25s; }
.ck-sw::before{ content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:#8b94a6; transition:left .25s cubic-bezier(.34,1.4,.5,1), background .25s; }
.ck-sw.is-on{ background:linear-gradient(180deg, rgba(244,221,134,.55), rgba(212,175,55,.3)); border-color:var(--gold); }
.ck-sw.is-on::before{ left:22px; background:linear-gradient(180deg,#F4DD86,#D4AF37); }
.ck-sw.is-locked{ opacity:.7; cursor:not-allowed; }
.ck-actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.ck-actions .btn{ flex:0 0 auto; }
@media (max-width:560px){
  .ck-actions{ justify-content:stretch; }
  .ck-actions .btn{ flex:1 1 auto; }
}

/* ===== SOLD OUT (Founding 144 cap reached) ============================= */
/* renderSeats() adds .is-soldout to every [data-action="claim"] button when
   the global paid count hits the total. Disable + overlay a "Sold out" label
   (bilingual via the html[lang] attribute set by the i18n engine). */
.btn.is-soldout{
  position:relative; pointer-events:none; cursor:not-allowed;
  color:transparent !important; opacity:.92; filter:grayscale(.35);
}
.btn.is-soldout *{ color:transparent !important; }
.btn.is-soldout::after{
  content:"Sold out";
  position:absolute; inset:0; border-radius:inherit;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,11,18,0.55); color:#E7C66A;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.84em;
}
html[lang="ro"] .btn.is-soldout::after{ content:"Epuizat"; }