/* =========================================================
   Ananda College Entrepreneurs Club
   Palette: #021024  #052659  #5483B3  #7DA0CA  #C1E8FF
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --navy-950:#021024;
  --navy-900:#04122b;
  --navy-800:#052659;
  --steel:#5483B3;
  --soft:#7DA0CA;
  --ice:#C1E8FF;

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --maxw:1200px;
  --radius:20px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1); /* slight overshoot — only for releases that carry momentum */
  --dur:.7s;
  --nav-h:92px;
  --journey-scroll:280vh;   /* Journey pin runway — raise for a slower scrub, lower for faster */
}

/* DARK (default) */
[data-theme="dark"]{
  --bg:#020c1c;
  --bg-2:#03112b;
  --text:#e9f3ff;
  --text-muted:#8fb0d6;
  --text-dim:#5f7fa6;
  --accent:var(--ice);
  --accent-2:var(--steel);
  --glow:rgba(193,232,255,.55);
  --line:rgba(140,180,230,.14);
  --line-strong:rgba(160,200,245,.28);
  --glass:rgba(84,131,179,.09);
  --glass-2:rgba(20,44,82,.42);
  --card:rgba(9,26,54,.55);
  --card-hover:rgba(14,38,76,.7);
  --chip:rgba(6,20,44,.62);
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --edge:rgba(255,255,255,.06);   /* light catching the top edge of a raised surface */
  --btn-fg:#031224;
  color-scheme:dark;
}

/* LIGHT */
[data-theme="light"]{
  --bg:#eef6ff;
  --bg-2:#e2eeff;
  --text:#04162f;
  --text-muted:#3f6088;
  --text-dim:#6e8bb0;
  --accent:#0a3d78;
  --accent-2:var(--steel);
  --glow:rgba(84,131,179,.5);
  --line:rgba(84,131,179,.22);
  --line-strong:rgba(30,70,120,.32);
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.5);
  --card:rgba(255,255,255,.72);
  --card-hover:rgba(255,255,255,.92);
  --chip:rgba(255,255,255,.8);
  --shadow:0 24px 55px -24px rgba(28,70,130,.42);
  --edge:rgba(255,255,255,.75);
  --btn-fg:#f4fbff;
  color-scheme:light;
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.02em}
.mono{font-family:var(--font-mono);letter-spacing:.02em}
::selection{background:var(--steel);color:#fff}

.skip-link{
  position:fixed;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--btn-fg);
  padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s;
}
.skip-link:focus{top:12px}

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

/* ---------- Shared bits ---------- */
.grad{
  background:linear-gradient(105deg,var(--soft),var(--ice) 55%,var(--steel));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] .grad{
  background:linear-gradient(105deg,var(--steel),#0a3d78 55%,var(--navy-800));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.btn{
  --pad:15px 26px;
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:var(--pad);border-radius:100px;font-weight:600;font-size:.95rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s;
  position:relative;
}
.btn--sm{--pad:10px 18px;font-size:.86rem}
.btn--block{width:100%;--pad:16px 24px}
.btn--primary{
  background:linear-gradient(180deg,var(--ice),var(--soft));
  color:var(--btn-fg);
  box-shadow:0 10px 30px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="light"] .btn--primary{
  background:linear-gradient(180deg,var(--navy-800),#0a3d78);
  color:#f4fbff;
  box-shadow:0 12px 26px -10px rgba(10,61,120,.55);
}
.btn--primary:hover{box-shadow:0 16px 40px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ghost{
  background:var(--glass);border:1px solid var(--line-strong);color:var(--text);
}
.btn--ghost:hover{background:var(--glass-2);border-color:var(--accent)}
/* Press feedback is instant (~.1s) — the slow .3s curve is for hover/release only. */
.btn:active{transform:scale(.97);transition-duration:.1s}

/* Magnetic elements move via CSS vars so :active scale composes with the pull,
   and JS can switch between 1:1 tracking and a springy release. :active stays
   last: at equal specificity the press must beat the state classes, or a press
   during the spring-back inherits its slow .55s curve. */
.magnetic{transform:translate(var(--mx,0px),var(--my,0px))}
.magnetic.is-tracking{transition:transform .06s linear, box-shadow .3s var(--ease), background .3s, border-color .3s}
.magnetic.is-release{transition:transform .55s var(--ease-spring), box-shadow .3s var(--ease), background .3s, border-color .3s}
.magnetic:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97);transition-duration:.1s}

.glass{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
}

.tag{
  display:inline-block;font-size:.68rem;padding:5px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--glass);color:var(--text-muted);
  letter-spacing:.06em;
}

/* ---------- Sections & reveals ---------- */
.section{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(70px,9vw,130px) 22px}
.section__head{max-width:680px;margin-bottom:52px}
.section__title{font-size:clamp(2rem,4.6vw,3.3rem);margin:18px 0 14px;letter-spacing:-.026em}
.section__sub{color:var(--text-muted);font-size:1.06rem;max-width:600px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:grid;place-items:center;transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader__mark{display:flex;flex-direction:column;align-items:center;gap:20px}
.preloader__logo{width:78px;filter:drop-shadow(0 0 24px var(--glow));animation:pulse 1.6s var(--ease) infinite}
.preloader__bar{width:180px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--ice));animation:load .8s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes pulse{50%{transform:scale(1.06);filter:drop-shadow(0 0 34px var(--glow))}}
@media (prefers-reduced-motion:reduce){
  .preloader__logo{animation:none}
  .preloader__bar span{animation:none;width:100%}
}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s var(--ease)}
.nav--hidden{transform:translateY(calc(-100% - 24px))}
.nav__inner{
  max-width:1280px;margin:14px auto 0;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;border-radius:100px;
  background:var(--glass);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--edge);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.nav.scrolled .nav__inner{background:var(--glass-2);box-shadow:var(--shadow), inset 0 1px 0 var(--edge);border-color:var(--line-strong)}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px var(--glow))}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{font-family:var(--font-display);font-size:.95rem;font-weight:600}
.brand__text em{font-style:normal;font-size:.66rem;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:.04em}
.nav__links{display:flex;gap:6px}
.nav__links a{
  padding:8px 15px;border-radius:100px;font-size:.9rem;color:var(--text-muted);
  transition:color .25s, background .25s;position:relative;
}
.nav__links a:hover{color:var(--text);background:var(--glass)}
.nav__links a:active{color:var(--text);background:var(--glass-2);transition-duration:.05s}
.nav__links a.is-active{color:var(--text);background:var(--glass-2)}
.nav__actions{display:flex;align-items:center;gap:10px}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--glass);display:grid;place-items:center;color:var(--text);
  transition:border-color .25s, transform .4s var(--ease), background .25s;
}
.theme-toggle:hover{border-color:var(--accent);transform:rotate(18deg)}
.theme-toggle:active{transform:rotate(18deg) scale(.9);transition-duration:.1s}
.theme-toggle__moon{display:none}
[data-theme="light"] .theme-toggle__sun{display:none}
[data-theme="light"] .theme-toggle__moon{display:block}
.nav__burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease), opacity .3s}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   BACKGROUND ATMOSPHERE
   One continuous layer behind hero + all sections below it, so the
   lighting/grid reads as a single surface instead of per-section
   effects. Lives as the first child of <main> (a plain div) and is
   absolutely positioned to fill <main> across the whole page.
   ========================================================= */
main{position:relative;isolation:isolate}
/* One fixed backdrop shared by the whole page. Because it never scrolls, every
   section — including the pinned Journey — sits on the same continuous surface
   with no seams, and nothing slides behind the pinned view. It's also cheap:
   no scroll-repaint, no animation, just two soft gradients + a static grid. */
.bg-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-atmosphere__grid{
  position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.12) 62%,transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.12) 62%,transparent 88%);
}
.bg-atmosphere__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(58vw 60vh at 86% -8%,rgba(84,131,179,.22),transparent 60%),
    radial-gradient(54vw 56vh at 2% 108%,rgba(84,131,179,.13),transparent 60%);
}
[data-theme="light"] .bg-atmosphere__glow{opacity:.5}
@media (prefers-reduced-motion:reduce){.bg-atmosphere__grid{animation:none}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__inner{
  position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;
  padding:clamp(var(--nav-h),13vh,120px) 22px clamp(24px,5vh,60px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:center;width:100%;
}
/* title/lead/spacing are capped against viewport HEIGHT so the hero fits one screen */
/* Display size wants tighter tracking + leading than the -.02em heading default. */
.hero__title{font-size:min(clamp(2.4rem,5.8vw,5rem),8.4vh);font-weight:700;margin:clamp(10px,2.2vh,22px) 0;letter-spacing:-.032em;line-height:1.02}
.hero__lead{color:var(--text-muted);font-size:min(clamp(.98rem,1.3vw,1.12rem),2.5vh);max-width:490px;margin-bottom:clamp(16px,3vh,34px)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(16px,3vh,38px)}
.hero__trust{list-style:none;display:flex;gap:clamp(16px,2.4vw,26px);flex-wrap:wrap}
.hero__trust li{font-size:.85rem;color:var(--text-dim);display:flex;flex-direction:column;gap:2px}
.hero__trust .mono{font-family:var(--font-display);font-size:min(1.5rem,3.4vh);font-weight:700;color:var(--text)}

/* founders composition */
.hero__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(240px,40vh,420px)}
.founders{position:relative;width:100%;max-width:560px}
.founders__img{max-height:66vh;margin-inline:auto}
.founders__img{
  position:relative;z-index:1;width:100%;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
}
[data-theme="light"] .founders__img{filter:drop-shadow(0 26px 44px rgba(30,70,130,.35))}

/* holographic chips */
.chip{
  position:absolute;z-index:2;background:var(--chip);border:1px solid var(--line-strong);
  border-radius:14px;padding:12px 15px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6), inset 0 1px 0 var(--edge);display:flex;flex-direction:column;gap:4px;
}
.chip__label{font-size:.6rem;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase}
.chip__value{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--text)}
.chip__unit{color:var(--accent)}
.chip__spark{width:80px;height:24px;color:var(--accent)}
.chip--a{top:6%;left:-6%}
.chip--b{bottom:20%;left:-9%}
.chip--c{top:14%;right:-4%;flex-direction:row;align-items:center;gap:10px}
.chip__ring{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:conic-gradient(var(--ice) 92%,var(--line) 0);
  -webkit-mask:none;position:relative;
}
.chip__ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--chip)}
.chip__ring .mono{position:relative;z-index:1;font-weight:700;font-size:.85rem;color:var(--text)}
.chip--c .chip__label{max-width:70px;line-height:1.3}

.float{animation:floaty 6s var(--ease) infinite}
.chip--b.float{animation-delay:-2s;animation-duration:7s}
.chip--c.float{animation-delay:-4s;animation-duration:8s}
@keyframes floaty{50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}

.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:.66rem;letter-spacing:.2em}
.hero__scroll-line{width:1px;height:36px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:60%;background:var(--accent);animation:scrollDot 1.8s var(--ease) infinite}
@keyframes scrollDot{to{top:120%}}
@media (prefers-reduced-motion:reduce){.hero__scroll-line::after{animation:none}}

/* =========================================================
   JOURNEY (timeline)
   ========================================================= */
/* Soft edge fade (same 7% ramps as the committee marquee): cards, dots and the
   progress rail fade out as they leave the strip and in as they arrive. Static
   mask — painted once, no per-scroll cost. */
.timeline{
  position:relative;margin-top:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.timeline__rail{position:absolute;top:46px;left:0;right:0;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.timeline__progress{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--steel),var(--ice));box-shadow:0 0 12px var(--glow);transition:width .3s var(--ease)}
.timeline__track{display:flex;gap:20px;overflow-x:auto;padding:0 4px 30px;scroll-snap-type:x proximity;scrollbar-width:none}
.timeline__track::-webkit-scrollbar{display:none}
.tl-node{scroll-snap-align:start;flex:0 0 232px;position:relative;padding-top:66px}
.tl-node__dot{
  position:absolute;top:38px;left:22px;width:18px;height:18px;border-radius:50%;
  background:var(--bg);border:2px solid var(--steel);z-index:2;transition:all .35s var(--ease);
}
.tl-node.active .tl-node__dot,.tl-node:hover .tl-node__dot{background:var(--ice);border-color:var(--ice);box-shadow:0 0 0 6px var(--glass),0 0 18px var(--glow)}
.tl-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px;height:100%;box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.tl-node:hover .tl-card{transform:translateY(-6px);border-color:var(--line-strong);background:var(--card-hover)}
.tl-card__idx{font-family:var(--font-mono);font-size:.72rem;color:var(--accent)}
.tl-card__icon{color:var(--accent);margin:10px 0 12px}
.tl-card h3{font-size:1.12rem;margin-bottom:6px}
.tl-card p{font-size:.88rem;color:var(--text-muted)}
.tl-card__stat{
  /* Space is always reserved (only opacity + divider animate) so hovering a card
     never changes its height — otherwise the pinned, centred column re-flows and
     the section title + progress bar visibly jump. */
  margin-top:14px;padding-top:12px;border-top:1px solid transparent;
  font-size:.78rem;color:var(--text-dim);opacity:0;
  transition:opacity .4s, border-color .4s;
}
.tl-node:hover .tl-card__stat{opacity:1;border-top-color:var(--line)}
.tl-card__stat b{color:var(--accent);font-family:var(--font-display)}
.timeline__hint{text-align:right;font-size:.68rem;color:var(--text-dim);letter-spacing:.16em;margin-top:6px}

/* =========================================================
   ECOSYSTEM
   ========================================================= */
.ecosystem__layout{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
.nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.node{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:20px 12px;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  transition:transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s;
  position:relative;overflow:hidden;
}
.node::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--glow),transparent 70%);opacity:0;transition:opacity .35s}
.node:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.node:hover::before{opacity:.14}
.node:active{transform:translateY(-1px) scale(.98);transition-duration:.1s}
.node.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 30px -16px var(--glow)}
.node.active::before{opacity:.2}
.node__icon{width:34px;height:34px;color:var(--accent);position:relative;z-index:1}
.node__name{font-size:.82rem;font-weight:500;position:relative;z-index:1}
.node-panel{padding:30px;min-height:300px}
.node-panel__index{color:var(--accent);font-size:.74rem}
.node-panel__title{font-size:1.7rem;margin:12px 0 12px}
.node-panel__body{color:var(--text-muted);font-size:1rem;margin-bottom:20px}
.node-panel__meta{display:flex;gap:8px;flex-wrap:wrap}

/* =========================================================
   ANALYTICS
   ========================================================= */
.analytics{overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{
  padding:34px 24px;border-radius:var(--radius);text-align:center;
  background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .4s var(--ease), border-color .4s;
}
.stat:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.stat__num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--text);line-height:1;letter-spacing:-.02em}
.stat__label{display:block;margin-top:8px;color:var(--text-muted);font-size:.9rem}

/* =========================================================
   COMMITTEE
   ========================================================= */
.committee{overflow:visible}
/* Row that flanks the marquee with nudge arrows. The arrows sit OUTSIDE the
   marquee so hovering them never pauses the drift (only hovering cards does). */
.committee__viewport{position:relative}
/* Nudge arrows: absolutely pinned to the marquee's left/right edges (hanging
   into the section gutter via negative offsets, so the marquee keeps full
   width). Full card height, borderless rounded-square, faint until hovered. */
.committee__nav{
  position:absolute;top:0;bottom:0;z-index:2;width:46px;
  border-radius:var(--radius);display:grid;place-items:center;cursor:pointer;
  background:var(--glass);border:0;color:var(--text-muted);
  opacity:0;transition:opacity .3s,color .25s,transform .25s;
}
.committee__nav--prev{left:-56px}
.committee__nav--next{right:-56px}
.committee__viewport:hover .committee__nav{opacity:.5}
.committee__nav:hover{color:var(--accent);opacity:1;transform:scale(1.04)}
.committee__nav:active{transform:scale(.97)}
.committee__nav:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:2px}
/* Marquee: viewport with soft edge fades; the track scrolls right-to-left.
   Clips the wide track itself (overflow-x:clip keeps card hover lift/shadow
   visible vertically) so the section can let the arrows overhang the edges. */
.committee__marquee{
  position:relative;overflow-x:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.committee__track{
  display:flex;width:max-content;
  animation:committee-scroll 55s linear infinite;
}
/* Pause when the visitor hovers, so they can read + click a card. */
.committee__marquee:hover .committee__track{animation-play-state:paused}
@keyframes committee-scroll{from{transform:none}to{transform:translateX(-50%)}}

.person{
  flex:0 0 230px;width:230px;margin-right:20px;
  padding:26px 22px;border-radius:var(--radius);text-align:center;
  background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.person:hover{transform:translateY(-7px);border-color:var(--line-strong);box-shadow:var(--shadow), inset 0 1px 0 var(--edge)}
.person__avatar{
  width:88px;height:88px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--btn-fg);
  background:linear-gradient(150deg,var(--ice),var(--steel));
  box-shadow:0 0 0 4px var(--glass),0 10px 26px -10px var(--glow);
}
[data-theme="light"] .person__avatar{background:linear-gradient(150deg,var(--steel),var(--navy-800));color:#fff}
.person h3{font-size:1.1rem;margin-bottom:2px}
.person__role{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);letter-spacing:.06em;margin-bottom:14px}
/* Socials reveal on card hover (opacity only — no reflow of the moving row). */
.person__social{display:flex;gap:10px;justify-content:center;opacity:0;transition:opacity .3s}
.person:hover .person__social{opacity:1}
.person__social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-muted);transition:color .25s,border-color .25s,transform .25s}
.person__social a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.person__social a:active{transform:scale(.92);transition-duration:.1s}

/* Fallback: no animation — a plain draggable horizontal strip, clones hidden.
   Applies to reduced-motion and to touch devices (no hover to pause the loop). */
@media (prefers-reduced-motion:reduce),(hover:none){
  .committee__marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none}
  .committee__track{animation:none}
  .person.is-clone{display:none}
  .person__social{opacity:1}
  /* No animation to scrub here — this mode is a native swipe strip. */
  .committee__nav{display:none}
}

/* =========================================================
   EVENTS
   ========================================================= */
.events__list{display:flex;flex-direction:column;gap:16px}
.event{
  display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;
  padding:24px 26px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);
  transition:transform .4s var(--ease), border-color .4s, background .4s;
}
.event:hover{transform:translateX(8px);border-color:var(--line-strong);background:var(--card-hover)}
.event__when{font-family:var(--font-mono);color:var(--accent);font-size:.82rem}
.event__when b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--text)}
.event__body h3{font-size:1.25rem;margin-bottom:4px}
.event__body p{font-size:.9rem;color:var(--text-muted);max-width:560px}
.event__tag{white-space:nowrap}

/* =========================================================
   JOIN
   ========================================================= */
.join{overflow:hidden}
.join__card{position:relative;max-width:520px;margin:0 auto;text-align:center;padding:clamp(28px,4vw,48px)}
.join__perks{list-style:none;margin-top:24px;display:inline-flex;flex-direction:column;gap:12px;text-align:left}
.join__perks li{position:relative;padding-left:22px;color:var(--text-muted);font-size:.95rem}
.join__perks li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#fff}
.join__apply{margin-top:28px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--bg-2)}
.footer__stars{position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,var(--soft),transparent),radial-gradient(1px 1px at 60% 70%,var(--ice),transparent),radial-gradient(1px 1px at 80% 20%,var(--soft),transparent),radial-gradient(1px 1px at 40% 80%,var(--ice),transparent),radial-gradient(1px 1px at 90% 60%,var(--soft),transparent);
  background-size:200px 200px;animation:twinkle 6s ease-in-out infinite alternate;}
@keyframes twinkle{to{opacity:.2}}
@media (prefers-reduced-motion:reduce){.footer__stars{animation:none}}
.footer__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:64px 22px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px}
.footer__logos{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.footer__crest{height:52px;width:auto}
.footer__acec{height:42px;width:auto;filter:drop-shadow(0 0 10px var(--glow))}
.footer__tag{color:var(--text-muted);font-size:.9rem;max-width:320px}
.footer__col h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;font-family:var(--font-mono);font-weight:500}
.footer__col a{display:block;color:var(--text-muted);font-size:.92rem;padding:5px 0;transition:color .25s,transform .25s}
.footer__col a:hover{color:var(--accent);transform:translateX(4px)}
.footer__news{display:flex;gap:8px;margin-bottom:18px}
.footer__news input{flex:1;padding:11px 14px;border-radius:100px;background:var(--glass);border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:.86rem}
.footer__news input:focus{outline:none;border-color:var(--accent)}
.footer__news button{width:44px;height:42px;border-radius:100px;background:var(--accent);color:var(--btn-fg);display:grid;place-items:center;transition:transform .25s}
.footer__news button:hover{transform:translateX(3px)}
.footer__news button:active{transform:scale(.94);transition-duration:.1s}
.footer__social{display:flex;gap:10px}
.footer__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-muted);transition:color .25s,border-color .25s,transform .25s}
.footer__social a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.footer__social a:active{transform:scale(.92);transition-duration:.1s}
.footer__base{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--text-dim)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:20px;padding-top:130px}
  .hero__visual{order:-1;min-height:300px}
  .founders{max-width:440px}
  .ecosystem__layout{grid-template-columns:1fr}
  .node-panel{position:static}
  .stats{grid-template-columns:repeat(3,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:760px){
  .nav__links{
    position:fixed;inset:80px 14px auto 14px;flex-direction:column;gap:4px;padding:16px;
    background:var(--glass-2);border:1px solid var(--line-strong);border-radius:22px;
    box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:all .3s var(--ease);
  }
  .nav__links.open{opacity:1;visibility:visible;transform:none}
  .nav__links a{padding:12px 16px}
  .nav__burger{display:flex}
  .brand__text em{display:none}
  .nav .btn--primary{display:none}
  .hero__title{font-size:clamp(2.4rem,10vw,3.4rem)}
  .hero__trust{gap:18px}
  .nodes{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .event{grid-template-columns:1fr;gap:12px}
  .event__tag{justify-self:start}
  .footer__inner{grid-template-columns:1fr}
  .hero__scroll{display:none}
}
@media (max-width:400px){
  .stats{grid-template-columns:1fr}
  .chip{padding:9px 11px}
  .chip__value{font-size:1.05rem}
}

/* =========================================================
   JOURNEY — pin & drive (desktop + mouse only)
   The section grows a tall scroll "runway" (--journey-scroll).
   While its top is pinned to the viewport, the JS controller
   scrubs the horizontal timeline from the first card to the
   last, then the pin releases and the page scrolls on.
   Touch / small screens / reduced-motion get a normal
   horizontal drag strip instead (no pinning, no class added).
   ========================================================= */
@media (min-width:1025px) and (pointer:fine){
  .journey.is-pinning{
    height:var(--journey-scroll,280vh);
    padding-top:0;padding-bottom:0;   /* runway; the sticky inner owns the vertical spacing */
  }
  .journey.is-pinning .journey__inner{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(84px,10vh,116px) 0 clamp(30px,5vh,60px);   /* clear the fixed nav, stay centred */
    /* No background here on purpose: the section stays transparent so the shared
       fixed atmosphere shows through and Journey blends with its neighbours. */
  }
  /* Size the cards so ~4 full cards fill the width — no half-cut card at the edge. */
  .journey.is-pinning .timeline__track{
    --tl-cols:4;--tl-gap:20px;
    overflow-x:hidden;scroll-snap-type:none;
    gap:var(--tl-gap);padding-left:0;padding-right:0;
  }
  .journey.is-pinning .tl-node{
    flex:0 0 calc((100% - (var(--tl-cols) - 1) * var(--tl-gap)) / var(--tl-cols));
  }
}

/* =========================================================
   ACCESSIBILITY MATERIALS
   Translucent surfaces go frosty/solid when the user asks for
   less transparency, and lines/text firm up under high contrast.
   ========================================================= */
@media (prefers-reduced-transparency:reduce){
  [data-theme="dark"]{--glass:#0a1e3c;--glass-2:#0c2246;--card:#091a36;--card-hover:#0e264c;--chip:#08142c}
  [data-theme="light"]{--glass:#ffffff;--glass-2:#ffffff;--card:#ffffff;--card-hover:#ffffff;--chip:#ffffff}
}
@media (prefers-contrast:more){
  [data-theme="dark"]{--line:rgba(160,200,245,.4);--line-strong:rgba(190,220,255,.62);--text-muted:#b9d2ee;--text-dim:#8fb0d6}
  [data-theme="light"]{--line:rgba(30,70,120,.45);--line-strong:rgba(10,45,90,.65);--text-muted:#2c4a70;--text-dim:#3f6088}
}