/* =========================================================================
   GREEN OAK CAPITAL — design tokens
   ========================================================================= */
:root{
  --bg:        #0A0C0E;   /* page canvas                */
  --bg-2:      #121417;   /* header / floating panels   */
  --bg-3:      #16191D;   /* cards                      */
  --bg-4:      #1B1F24;   /* raised card interiors      */
  --bg-5:      #21262C;   /* bands, hover               */
  --bg-6:      #262C33;   /* topmost chips              */
  --green:     var(--page-green, #56E56B);
  --accent:    var(--page-accent, #9CFF79);
  --forest:    #173C24;
  --text:      #F5F7F3;
  --muted:     #969F98;
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.05);
  --glow:      rgba(var(--page-green-rgb),.20);

  --font:      'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono:      'IBM Plex Mono', ui-monospace, monospace;

  --shell:     min(1440px, 90vw);
  --gut:       clamp(1.25rem, 5vw, 5rem);

  --e-out:     cubic-bezier(.16,1,.3,1);
  --e-io:      cubic-bezier(.65,0,.35,1);

  --z-bg: 0; --z-back: 1; --z-main: 2; --z-front: 3; --z-nav: 40;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:clamp(1.0625rem,.9rem + .35vw,1.25rem);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:.92; }
p{ margin:0; text-wrap:pretty; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--green); color:#0A0C0E; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.shell{ width:var(--shell); margin-inline:auto; }

/* =========================================================================
   FIXED BACKGROUND LAYER
   ========================================================================= */
.bg-layer{
  position:fixed; inset:0; z-index:var(--z-bg);
  background:var(--bg);
  pointer-events:none;
}
.bg-glow{
  position:absolute; border-radius:50%;
  filter:blur(120px); opacity:.34;
  will-change:transform;
}
.bg-glow--a{
  width:60vw; height:60vw; top:-18vw; right:-14vw;
  background:radial-gradient(circle,rgba(var(--page-green-rgb),.12),transparent 68%);
}
.bg-glow--b{
  width:52vw; height:52vw; bottom:-16vw; left:-12vw;
  background:radial-gradient(circle,rgba(38,44,51,.55),transparent 70%);
}
.bg-grain{
  position:absolute; inset:0; opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* =========================================================================
   SCENE STAGES — travelling objects that cross section boundaries
   ========================================================================= */
.stage{
  position:fixed; inset:0; pointer-events:none;
  overflow:hidden;
}
.stage--back{ z-index:var(--z-back); }
.stage--front{ z-index:var(--z-front); }

.obj{
  position:absolute;
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
}

.obj--eth-opp{
  width:clamp(320px,40vw,700px);
  top:22vh; right:2vw;
  opacity:0;
}

/* -------------------------------------------------------------------------
   THE SPINE — the line the coin travels, and the coin itself.
   The stage is fixed, so these two are the only things on the page that are
   never handed off between sections: one continuous scene, start to finish.
   ------------------------------------------------------------------------- */
/* geometry source only — never painted, but must keep layout so the
   SVGGeometryElement API still resolves points */
.spine-template{
  position:absolute; width:100px; height:100px;
  visibility:hidden; pointer-events:none;
}

/* the coin: sized once, positioned every frame from the spine.
   Resting state is VISIBLE — reduced motion leaves a composed scene,
   not an empty stage. */
.obj--coin{
  width:clamp(200px,26vw,460px);
  top:0; left:0;
  opacity:.92;
  transform:translate(92vw,44vh) scale(1.15);  /* resting state: hero position */
  /* origin 0 0 is load-bearing: the sprite is centred on the wrapper's origin,
     so rotating/scaling about the box centre would swing it off the path */
  transform-origin:0 0;
  transition:opacity .6s var(--e-out);
  will-change:transform;
}
.obj--coin img{
  display:block; width:100%;
  transform:translate(-50%,-50%);              /* centre the sprite on its point */
  filter:drop-shadow(0 40px 90px rgba(var(--page-green-rgb),.18));
  transition:filter .6s var(--e-out);
}
/* behind the type: softened and dimmed, so headings always win */
.obj--coin.is-behind{ opacity:.62; }
.obj--coin.is-behind img{
  filter:blur(3px) drop-shadow(0 40px 90px rgba(var(--page-green-rgb),.12));
}

/* -------------------------------------------------------------------------
   FILL OBJECTS — one per measured empty stretch of the scroll, so no run of
   the page is left with a bare background.
   ------------------------------------------------------------------------- */
.obj--fill{ opacity:0; will-change:transform; }
.fill--sphere { width:clamp(220px,26vw,440px); top:16vh; left:-8vw; }
.fill--candles{ width:clamp(240px,30vw,520px); top:22vh; right:4vw; }

/* enormous faint outlined word behind ethereum */
.ghost-word{
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,-50%);
  font-size:clamp(6rem,17vw,17rem);
  font-weight:800; letter-spacing:-.05em; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,247,243,.30);
  opacity:0;
  white-space:nowrap;
}
.ghost--custody{
  top:64%; left:28%;
  font-size:clamp(4rem,12vw,12rem);
  -webkit-text-stroke-color:rgba(var(--page-green-rgb),.24);
}
/* =========================================================================
   NAVIGATION
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.15rem var(--gut);
  background:transparent;
  border-bottom:1px solid var(--border);
  transition:background .45s var(--e-out), border-color .45s var(--e-out),
             backdrop-filter .45s var(--e-out), padding .45s var(--e-out);
}
.nav.is-stuck{
  background:rgba(18,20,23,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--border);
  padding-block:.85rem;
}

.wordmark{
  display:grid; line-height:1.02;
  font-size:.8125rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.wordmark span:last-child{ color:var(--muted); }

.nav-links{ display:flex; gap:1rem; }
.nav-links a{
  position:relative;
  font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--e-out);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:100%; height:1px; background:var(--green);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-actions{ display:flex; align-items:center; gap:1.5rem; }
/* Compact header CTA — the global .btn sizing is meant for hero/section CTAs,
   the header one should sit quietly beside the nav links. */
.nav-actions .btn{ padding:.6rem 1.05rem; font-size:.65rem; letter-spacing:.12em; }
.nav-login{
  font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); transition:color .3s var(--e-out);
}
.nav-login:hover{ color:var(--text); }
/* Authenticated nav user: avatar + first name (links to the dashboard) */
.nav-user{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav-avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border); display:block; }
.nav-avatar--initials{ display:flex; align-items:center; justify-content:center; background:var(--bg-4); color:var(--text); font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; }
.nav-user-name{ font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s cubic-bezier(.16,1,.3,1); }
.nav-user:hover .nav-user-name{ color:var(--text); }
/* Primary CTA lives in the mobile menu, not the mobile header.
   !important so no future/specificity conflict can ever resurface it on desktop. */
.nav-links .nav-menu-cta{ display:none !important; }

.nav-burger{ display:none; width:34px; height:34px; position:relative; }
.nav-burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--text);
  transition:transform .4s var(--e-out), opacity .3s;
}
.nav-burger span:first-child{ top:13px; }
.nav-burger span:last-child{ top:20px; }
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  --btn-fg:var(--text);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.6rem;
  font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--btn-fg);
  border:1px solid var(--border);
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  transition:color .35s var(--e-out), border-color .35s var(--e-out);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--green);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--e-out);
}
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ color:#0A0C0E; border-color:var(--green); }

.btn--primary{ background:var(--green); color:#0A0C0E; border-color:var(--green); }
.btn--primary::before{ background:var(--accent); }
.btn--primary:hover{ color:#0A0C0E; border-color:var(--accent); }

.btn--ghost{ color:var(--text); }

.btn--lg{ padding:1.05rem 2rem; font-size:.78125rem; }

.btn-arrow{
  position:relative; z-index:2;
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  transition:transform .4s var(--e-out);
}
.btn:hover .btn-arrow{ transform:rotate(-45deg) translateX(2px); }

/* =========================================================================
   SHARED TYPE
   ========================================================================= */
.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--green);
  margin-bottom:2rem;
}
.eyebrow-rule{ width:38px; height:1px; background:currentColor; opacity:.6; }

.display{
  font-size:clamp(2.75rem,6.6vw,6.25rem);
  text-transform:uppercase;
}
.display--xl{ font-size:clamp(3.2rem,9vw,8.75rem); }
.display--center{ text-align:center; }

.hero-title{
  font-size:clamp(3.2rem,9vw,8.75rem);
  text-transform:uppercase;
}

.line{ display:block; overflow:hidden; padding-bottom:.06em; }
.line-in{ display:block; }
/* HERO ONLY: nowrap keeps the headline at exactly three lines — a wrapped line
   would make it four and break the clip reveal, which masks per .line, not per
   text row. Applying it to every .line-in clipped longer section headings
   against their own mask, so it stays scoped here. */
.hero-title .line-in{ white-space:nowrap; }
.accent{ color:var(--green); }

.lede{
  max-width:44ch;
  color:var(--muted);
  font-size:clamp(1.0625rem,.9rem + .35vw,1.25rem);
  line-height:1.62;
}
.lede--center{ margin-inline:auto; text-align:center; }
.lede--right{ margin-left:auto; }

/* =========================================================================
   01 · HERO
   ========================================================================= */
main{ position:relative; z-index:var(--z-main); }
section{ position:relative; }

.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:11rem var(--gut) 6rem;
  background-image:
    linear-gradient(90deg,rgba(10,12,14,.98) 0%,rgba(10,12,14,.90) 42%,rgba(10,12,14,.52) 100%),
    url("assets/generated/hero-investment-office.webp");
  background-position:center;
  background-size:cover;
}
.hero-copy{ position:relative; z-index:2; max-width:min(58rem,72vw); }
.hero-lede{ margin-top:2.5rem; max-width:38ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:3rem; }
.hero-cta--center{ justify-content:center; }

.hero-depth{ position:absolute; inset:0; pointer-events:none; }

.orbit{
  position:absolute; border:1px solid var(--border-2); border-radius:50%;
  will-change:transform;
}
.orbit--1{ width:52vw; height:52vw; top:6vh;  right:-8vw; }
.orbit--2{ width:34vw; height:34vw; top:26vh; right:6vw; border-color:rgba(var(--page-green-rgb),.12); }

.particles{ position:absolute; inset:0; }
.particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--green); opacity:.5;
  box-shadow:0 0 8px var(--glow);
  will-change:transform;
}

.hero-eth{
  width:clamp(170px,17vw,300px);
  top:60vh; right:26vw;
  opacity:.8;
}
.hero-shards{
  width:clamp(160px,17vw,300px);
  bottom:-6vh; right:14vw;
  opacity:.7;
}

/* short viewports (laptops at 1440x900): keep the CTAs above the fold */
@media (min-width:681px) and (max-height:940px){
  .hero{ padding-top:8.5rem; padding-bottom:4rem; }
  .hero-title{ font-size:clamp(3rem,6.4vw,6.2rem); }
  .hero-lede{ margin-top:1.75rem; }
  .hero-cta{ margin-top:2rem; }
}

.scroll-hint{
  position:absolute; left:var(--gut); bottom:2.5rem;
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:.625rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.scroll-hint span{
  width:1px; height:42px; background:linear-gradient(var(--green),transparent);
  animation:scrollPulse 2.4s var(--e-io) infinite;
}
@keyframes scrollPulse{
  0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.4; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* =========================================================================
   02 · MARKET STRIP
   ========================================================================= */
.ticker-band{
  border-block:1px solid var(--border);
  padding-block:1.4rem .9rem;
  background:rgba(33,38,44,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ticker{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-track{ display:flex; width:max-content; will-change:transform; }

.tick{
  display:flex; align-items:center; gap:.85rem;
  padding-inline:2.6rem;
  border-right:1px solid var(--border-2);
  white-space:nowrap;
}
.tick-icon{ width:22px; height:22px; flex:none; opacity:.9; }
.tick-sym{
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; color:var(--text);
}
.tick-price{ font-family:var(--mono); font-size:.8125rem; color:var(--muted); }
.tick-chg{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  color:var(--green);
  padding:.15rem .45rem;
  border:1px solid rgba(var(--page-green-rgb),.25);
  border-radius:2px;
}
.ticker-note{
  margin-top:.9rem; text-align:center;
  font-family:var(--mono); font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(150,159,152,.55);
}
.ticker-note.is-live{ color:rgba(var(--page-green-rgb),.72); }
.ticker-note.is-error{ color:rgba(245,247,243,.55); }
.tick-chg.is-negative{
  color:rgba(245,247,243,.72);
  border-color:rgba(245,247,243,.18);
}

/* =========================================================================
   03 · OPPORTUNITY (pinned)
   ========================================================================= */
.opportunity{ height:220vh; }
.opportunity-pin{
  height:100vh; display:flex; align-items:center;
  padding-inline:var(--gut);
}
/* 56rem, not 46: at the display--xl size GENERATION measures ~838px and was
   being clipped by its own .line mask (overflow:hidden) at 736px */
.opportunity-copy{ max-width:min(56rem,72vw); position:relative; z-index:2; }
.opportunity-copy .lede{ margin-top:2.5rem; }

/* =========================================================================
   04 · APPROACH
   ========================================================================= */
.approach{ padding:16rem 0 10rem; }
.approach-head{ padding-inline:var(--gut); }
.approach-head .display{ max-width:16ch; }
.approach-head .lede{ margin-top:3rem; max-width:40ch; }

.principles{ margin-top:12rem; }
.principle{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,6vw,7rem);
  padding:clamp(5rem,11vh,9rem) var(--gut);
  border-top:1px solid var(--border);
}
/* .principle-body is the ONLY in-flow grid item (num + obj are absolute),
   so `order` can't move it — place it in column 2 explicitly. */
.principle--alt .principle-body{ grid-column:2; }
.principle--alt .principle-obj{ left:6vw; right:auto; }

.principle-num{
  position:absolute; left:var(--gut); top:50%;
  transform:translateY(-50%);
  font-size:clamp(9rem,24vw,22rem);
  font-weight:800; line-height:.8; letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,247,243,.055);
  pointer-events:none; z-index:0;
  will-change:transform;
}
.principle--alt .principle-num{ left:auto; right:var(--gut); }

.principle-body{ position:relative; z-index:2; }
.principle-body h3{
  font-size:clamp(2rem,4.4vw,4rem);
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
.principle-body p{ color:var(--muted); max-width:34ch; }

.principle-obj{
  position:absolute; right:8vw; top:50%;
  width:clamp(180px,22vw,400px);
  transform:translateY(-50%);
  opacity:.9; z-index:1;
}

/* =========================================================================
   05 · UNIVERSE
   ========================================================================= */
.universe{ padding:10rem 0 12rem; }
.orbit-system{
  position:relative;
  width:min(1100px,92vw);
  margin:6rem auto 0;
  aspect-ratio:1200/900;
}
.orbit-core{
  width:100%; height:100%; object-fit:contain;
  will-change:transform;
}

/* percentages on left/top resolve against the container;
   percentages inside translate() would resolve against the node itself. */
.node{
  position:absolute;
  left:calc(50% + var(--x));
  top:calc(50% + var(--y));
  transform:translate(-50%,-50%) scale(var(--s));
  display:grid; place-items:center;
  width:74px; height:74px;
  border:1px solid var(--border);
  border-radius:50%;
  background:rgba(38,44,51,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; color:var(--muted);
  transition:transform .5s var(--e-out), color .35s, border-color .35s,
             box-shadow .45s, background .35s;
}
.node:hover,.node.is-active{
  color:var(--text);
  border-color:rgba(var(--page-green-rgb),.5);
  background:rgba(23,60,36,.35);
  box-shadow:0 0 0 1px rgba(var(--page-green-rgb),.18), 0 0 44px var(--glow);
  transform:translate(-50%,-50%) scale(calc(var(--s)*1.08));
}

.node-panel{
  position:absolute; left:50%; bottom:-1rem;
  transform:translateX(-50%);
  text-align:center;
  opacity:0; transition:opacity .4s var(--e-out);
  pointer-events:none;
}
.node-panel.is-on{ opacity:1; }
.node-panel-name{
  font-size:1.25rem; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
}
.node-panel-meta,.node-panel-cat,.node-panel-info{
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-top:.4rem;
}
.node-panel-info{ letter-spacing:.08em; text-transform:none; opacity:.7; }

.universe-note{
  margin:5rem auto 0; width:var(--shell); text-align:center;
  font-family:var(--mono); font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(150,159,152,.5);
}

/* =========================================================================
   06 · PERFORMANCE
   ========================================================================= */
.performance{
  padding:8rem 0 6rem;
  background-image:
    linear-gradient(180deg,rgba(10,12,14,.96),rgba(10,12,14,.86)),
    url("assets/generated/market-intelligence-room.webp");
  background-position:center;
  background-size:cover;
}
.chart-wrap{
  position:relative;
  width:min(1600px,94vw);
  margin:6rem auto 5rem;
}
.chart{ width:100%; height:clamp(300px,44vh,520px); overflow:visible; }

.chart-grid line{ stroke:rgba(255,255,255,.06); stroke-width:1; }
.chart-line{ fill:none; stroke-linecap:round; }
.chart-line--main{
  stroke:var(--green); stroke-width:2;
  filter:drop-shadow(0 0 14px var(--glow));
}
.chart-line--muted{ stroke:rgba(150,159,152,.35); stroke-width:1.25; stroke-dasharray:4 6; }
.chart-fill{ fill:url(#none); fill:rgba(var(--page-green-rgb),.05); opacity:0; }

.chart-marks{ position:absolute; inset:0; pointer-events:none; }
.chart-mark{
  position:absolute; width:9px; height:9px; margin:-4.5px;
  border-radius:50%; background:var(--bg);
  border:1.5px solid var(--green);
  box-shadow:0 0 16px var(--glow);
  opacity:0;
}
.chart-arrow{
  right:-2vw; top:4%;
  width:clamp(200px,24vw,420px);
  opacity:0;
}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin:0; padding-top:3.5rem;
  border-top:1px solid var(--border);
}
.stat dt{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.stat dd{
  margin:.9rem 0 0;
  font-size:clamp(2rem,4.6vw,3.75rem);
  font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.chart-note{
  margin-top:2.5rem; max-width:56ch;
  font-family:var(--mono); font-size:.6875rem;
  line-height:1.7; color:rgba(150,159,152,.6);
}

/* =========================================================================
   07 · STRATEGIES (horizontal)
   ========================================================================= */
.strategies{ position:relative; }
.strategies-viewport{
  height:100vh; display:flex; align-items:center;
  overflow:hidden;
}
.strategies-track{
  display:flex; align-items:center;
  width:max-content;
  will-change:transform;
}
.strategy{
  position:relative;
  width:80vw; flex:none;
  padding-inline:var(--gut);
}
.strategy--intro{ width:70vw; }
.strategy--intro .lede{ margin-top:2.5rem; }

.strategy-index{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--green);
  margin-bottom:2rem;
}
.strategy h3{
  font-size:clamp(2.5rem,6.2vw,6rem);
  text-transform:uppercase;
  margin-bottom:2rem;
  position:relative; z-index:2;
}
.strategy > p{ color:var(--muted); max-width:32ch; position:relative; z-index:2; }

.strategy-obj{
  position:absolute; right:2vw; top:50%;
  width:clamp(260px,32vw,620px);
  transform:translateY(-50%);
  opacity:.85; z-index:1;
}

.strategies-progress{
  position:absolute; left:var(--gut); right:var(--gut); bottom:3rem;
  height:1px; background:var(--border);
}
.strategies-progress span{
  display:block; height:100%; width:0%;
  background:var(--green);
  box-shadow:0 0 12px var(--glow);
}

/* =========================================================================
   08 · SECURITY
   ========================================================================= */
.security{ padding:10rem 0 8rem; }
.vault{
  position:relative;
  width:min(720px,86vw); aspect-ratio:1;
  margin:7rem auto 0;
  display:grid; place-items:center;
}
.vault-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--border);
  will-change:transform;
}
.vault-ring--mid{ inset:12%; border-color:rgba(var(--page-green-rgb),.16); }

.vault-shell{
  position:relative; z-index:3;
  width:72%; will-change:transform;
  filter:drop-shadow(0 20px 42px rgba(var(--page-green-rgb),.2));
}

.vault-labels{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.vault-labels li{
  position:absolute; left:50%; top:50%;
  transform:rotate(var(--a)) translateX(min(340px,42vw)) rotate(calc(var(--a)*-1));
  opacity:.42;
}
.vault-labels span{
  display:block; transform:translate(-50%,-50%);
  white-space:nowrap;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  padding:.6rem 1rem;
  border:1px solid rgba(var(--page-green-rgb),.42);
  background:rgba(10,12,14,.94);
}

/* =========================================================================
   09 · JOURNEY
   ========================================================================= */
.journey{ padding:8rem 0 12rem; }
.journey-steps{ position:relative; margin-top:8rem; }

.journey-rail{
  position:absolute; left:calc(var(--gut) + 8px); top:0; bottom:0;
  width:1px; background:var(--border);
}
.journey-rail-fill{
  display:block; width:100%; height:0%;
  background:linear-gradient(var(--accent),var(--green));
  box-shadow:0 0 14px var(--glow);
}

.step{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,.8fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(3.5rem,8vh,6rem) var(--gut) clamp(3.5rem,8vh,6rem)
          calc(var(--gut) + 4.5rem);
  opacity:.32;
  transition:opacity .6s var(--e-out);
}
.step.is-active{ opacity:1; }

.step-dot{
  position:absolute; left:calc(var(--gut) + 4px); top:50%;
  width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%;
  background:var(--bg); border:1px solid var(--muted);
  transition:background .45s var(--e-out), border-color .45s, box-shadow .45s;
}
.step.is-active .step-dot{
  background:var(--green); border-color:var(--green);
  box-shadow:0 0 18px var(--glow);
}

.step-num{
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.2em; color:var(--green);
}
.step-body h3{
  font-size:clamp(1.75rem,3.6vw,3rem);
  text-transform:uppercase; margin-bottom:1rem;
}
.step-body p{ color:var(--muted); max-width:34ch; }

.step-obj{
  position:relative;
  width:clamp(120px,15vw,240px);
  justify-self:end;
  opacity:.85;
}

/* =========================================================================
   10 · GLOBAL
   ========================================================================= */
.global{
  min-height:100vh;
  display:grid; place-items:center;
  padding:6rem var(--gut);
  background-image:
    linear-gradient(180deg,rgba(10,12,14,.95),rgba(10,12,14,.88)),
    url("assets/generated/results-data-center.webp");
  background-position:center;
  background-size:cover;
}
.globe-wrap{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.globe{
  width:min(760px,88vw); height:auto;
  overflow:visible;
  opacity:.85;
}
.globe-edge{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; }
.globe-mesh ellipse{ fill:none; stroke:rgba(255,255,255,.11); stroke-width:1; }
.globe-arcs path{
  fill:none; stroke:url(#arcGrad); stroke-width:1.4;
  stroke-linecap:round;
}
.gnode circle:first-child{ fill:var(--accent); }
.gnode-halo{
  fill:none; stroke:var(--green); stroke-width:1; opacity:.35;
  transform-origin:center;
  animation:halo 3.2s var(--e-io) infinite;
}
.gnode:nth-child(2) .gnode-halo{ animation-delay:.5s; }
.gnode:nth-child(3) .gnode-halo{ animation-delay:1s; }
.gnode:nth-child(4) .gnode-halo{ animation-delay:1.5s; }
.gnode:nth-child(5) .gnode-halo{ animation-delay:2s; }
@keyframes halo{
  0%  { transform:scale(.4); opacity:.7; }
  70% { transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}

.global-copy{ position:relative; z-index:2; text-align:center; }
.region-list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.75rem 2.25rem;
  margin-top:3rem;
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}

/* =========================================================================
   11 · FINAL CTA
   ========================================================================= */
.cta{
  min-height:100vh;
  display:grid; place-items:center;
  padding:10rem var(--gut);
}
.cta-inner{ position:relative; z-index:2; text-align:center; }
.cta-inner .lede{ margin-top:2.5rem; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  position:relative; z-index:var(--z-main);
  padding-top:8rem;
  border-top:1px solid var(--border);
  /* translucent, not solid: the footer sits above the back stage, and an
     opaque panel would swallow the travelling coin at the end of its journey */
  background:rgba(18,20,23,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow:hidden;
}
.footer-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(3rem,7vw,7rem);
  padding-bottom:6rem;
}
.footer-mark{
  display:grid; align-content:start; line-height:1.02;
  font-size:clamp(1.5rem,2.6vw,2.25rem); font-weight:800;
  letter-spacing:-.03em; text-transform:uppercase;
}
.footer-mark span:last-child{ color:var(--muted); }

.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.footer-col h4{
  font-family:var(--mono); font-size:.625rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--green);
  margin-bottom:1.5rem;
}
.footer-col li + li{ margin-top:.85rem; }
.footer-col a{
  font-size:.9375rem; color:var(--muted);
  transition:color .3s var(--e-out);
}
.footer-col a:hover{ color:var(--text); }

.footer-about{
  padding:3rem 0 5rem;
  border-top:1px solid var(--border);
}
.footer-about h4{
  font-family:var(--mono); font-size:.625rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1.25rem;
}
.footer-about p{
  max-width:52ch;
  font-size:.75rem; line-height:1.6;
  color:rgba(150,159,152,.72);
}

.footer-wordmark{
  font-size:clamp(2.2rem,9.2vw,14rem);
  font-weight:800; letter-spacing:-.045em; line-height:.82;
  text-transform:uppercase;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,247,243,.10);
  white-space:nowrap;
  padding-inline:var(--gut);
  user-select:none;
}

.footer-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:3rem 0;
  font-family:var(--mono); font-size:.625rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(150,159,152,.5);
}

/* =========================================================================
   RESPONSIVE — tablet
   ========================================================================= */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-actions .nav-login{ display:none; }
  .nav-actions .nav-cta{ display:none; }
  .nav.is-open .nav-links .nav-menu-cta{ display:inline-flex !important; justify-content:center; margin-top:.5rem; }

  .nav.is-open .nav-links{
    display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:1.5rem;
    padding:2rem var(--gut) 2.5rem;
    background:rgba(18,20,23,.94);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
  }
  .nav.is-open .nav-links a{ font-size:1rem; }

  .hero-copy{ max-width:100%; }
  .obj--btc-hero{ width:64vw; top:auto; bottom:-4vh; right:-18vw; }
  .hero-eth{ display:none; }

  .principle{ grid-template-columns:1fr; gap:3rem; }
  .principle--alt .principle-body{ grid-column:auto; }
  .principle-obj{
    position:relative; right:auto; left:auto; top:auto;
    transform:none; width:min(300px,52vw); justify-self:end;
  }
  .principle--alt .principle-obj{ left:auto; justify-self:start; }

  .strategy,.strategy--intro{ width:88vw; }
  .strategy-obj{ width:44vw; opacity:.5; right:-4vw; }

  .step{ grid-template-columns:auto minmax(0,1fr); }
  .step-obj{ display:none; }

  .footer-top{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:3rem 2rem; }
}

/* =========================================================================
   RESPONSIVE — mobile
   ========================================================================= */
@media (max-width:680px){
  :root{ --shell:88vw; }

  .nav{ padding-top:max(.7rem,env(safe-area-inset-top)); padding-bottom:.7rem; padding-left:max(var(--gut),env(safe-area-inset-left)); padding-right:max(var(--gut),env(safe-area-inset-right)); }
  .nav-burger{ width:44px; height:44px; min-width:44px; min-height:44px; }
  .nav-burger span{ left:9px; right:9px; }
  .nav-burger span:first-child{ top:17px; }
  .nav-burger span:last-child{ top:24px; }
  .nav.is-open .nav-links{ padding:1.15rem max(1rem,env(safe-area-inset-left)) max(1.5rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-right)); gap:.75rem; }
  .nav.is-open .nav-links a{ display:flex; align-items:center; min-height:44px; width:100%; }
  .nav.is-open .nav-links .nav-menu-cta{ width:100%; min-height:48px; margin-top:.25rem; }

  .hero{ min-height:100svh; padding:8rem var(--gut) 5rem; }
  .hero-copy{ max-width:100%; }
  .hero-title{ font-size:clamp(1.9rem,10.2vw,4rem); letter-spacing:-.035em; text-wrap:balance; }
  /* one word per line: the longest is TOMORROW. at ≈ 6.3em, so 10.2vw keeps it
     inside the 90vw text column and nowrap holds the headline at three lines */
  .hero-lede{ margin-top:2rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; margin-top:2.25rem; }
  .btn,.btn--lg{ width:100%; min-height:48px; justify-content:center; }
  .scroll-hint{ display:none; }

  .obj--btc-hero{ width:88vw; right:-26vw; bottom:-6vh; opacity:.55; }
  .hero-shards{ display:none; }
  .orbit--2{ display:none; }

  .opportunity{ height:auto; }
  .opportunity-pin{ height:auto; min-height:80vh; padding-block:8rem; }
  .opportunity-copy{ max-width:100%; }

  .opportunity-copy .lede{ margin-top:2rem; }
  .approach{ padding:8rem 0 5rem; }
  .approach-head .lede{ margin-top:2rem; }
  .principles{ margin-top:5rem; }
  .display{ font-size:clamp(2.65rem,12.5vw,5rem); letter-spacing:-.04em; text-wrap:balance; }
  .display--xl{ font-size:clamp(2.9rem,13.5vw,5.4rem); }
  .principle{ gap:2.5rem; padding-block:4.5rem; }
  .principle-body h3{ font-size:clamp(1.85rem,9vw,3rem); letter-spacing:-.035em; text-wrap:balance; }
  .principle-body p{ max-width:34ch; }
  .principle-num{ font-size:38vw; }

  .universe{ padding:5rem 0 7rem; }
  .orbit-system{ margin-top:4rem; }
  .node{ width:56px; height:56px; font-size:.5625rem; }
  .node-panel{ bottom:-3.5rem; }
  .universe-note{ width:var(--shell); font-size:.58rem; line-height:1.6; }

  .performance{ padding-block:6rem 5rem; }
  .chart-wrap{ width:94vw; margin-block:4rem 3.5rem; }
  .chart{ height:240px; }
  .chart-arrow{ display:none; }
  .stats{ grid-template-columns:1fr; gap:2.5rem; }
  .stat dd{ font-size:2.5rem; }

  /* horizontal scroll -> vertical stack */
  .strategies-viewport{ height:auto; display:block; overflow:visible; }
  .strategies-track{
    flex-direction:column; width:100%;
    transform:none !important;
  }
  .strategy,.strategy--intro{
    width:100%;
    padding-block:6rem;
    border-top:1px solid var(--border);
  }
  .strategy--intro{ border-top:0; }
  .strategy-obj{
    position:relative; right:auto; top:auto; transform:none;
    width:72vw; margin-top:3rem; opacity:.8;
  }
  .strategies-progress{ display:none; }

  .security{ padding:6rem 0 7rem; }
  .vault{ margin-top:4rem; width:min(86vw,24rem); }
  .vault-labels li{ transform:rotate(var(--a)) translateX(31vw) rotate(calc(var(--a)*-1)); }
  .vault-labels span{ max-width:9rem; white-space:normal; text-align:center; font-size:.55rem; letter-spacing:.08em; padding:.4rem .5rem; }

  .journey-steps{ margin-top:5rem; }
  .step{ padding-left:calc(var(--gut) + 2.5rem); }

  .global{ min-height:80svh; padding-block:7rem; }
  .globe{ opacity:.55; }

  .cta{ min-height:80svh; padding-block:7rem; }

  .footer-cols{ grid-template-columns:1fr; }
  .footer{ padding-top:5rem; }
  .footer-top{ padding-bottom:4rem; }
  .footer-col a{ display:flex; align-items:center; min-height:44px; }
  .footer-wordmark{ font-size:clamp(1.8rem,9vw,4.2rem); line-height:.9; white-space:normal; overflow-wrap:anywhere; padding-inline:1rem; }
  .footer-base{ flex-direction:column; padding-bottom:max(2rem,env(safe-area-inset-bottom)); }
}

/* =========================================================================
   ACCESSIBILITY — reduced motion
   Resting state IS the CSS default; timelines animate FROM an offset,
   so disabling them leaves a correct static page.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* the stage keeps ONE coin and ONE ghost word: a composed still, not a pile.
     The fill objects stay hidden — without scroll they would all stack at once. */
  .obj--eth-opp{ opacity:.75; }
  .obj--ghost-eth{ opacity:.5; }
  .chart-fill{ opacity:1; }
  .chart-arrow{ opacity:.8; }
  .vault-labels li{ opacity:1; }
  .step{ opacity:1; }
  .chart-mark{ opacity:1; }
  .opportunity{ height:auto; }
  .opportunity-pin{ height:auto; min-height:90vh; padding-block:10rem; }
  .strategies-viewport{ height:auto; display:block; overflow:visible; }
  .strategies-track{ flex-direction:column; width:100%; transform:none !important; }
  .strategy,.strategy--intro{ width:100%; padding-block:6rem; }
  .strategy-obj{ position:relative; right:auto; top:auto; transform:none;
                 width:min(420px,60vw); margin-top:3rem; }
  .journey-rail-fill{ height:100% !important; }
  .scroll-hint{ display:none; }
}