/* embedded fonts */
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/oxanium-700.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/oxanium-800.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/space-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/space-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/space-grotesk-700.woff2) format('woff2')}
/* ============================ NETRAX theme ============================ */
:root{
  --ink:#07070b; --ink2:#0b0b12; --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#f0eff7; --mut:#a6a6b8; --mut2:#71718a;
  --lime:#c8ff00; --lime-d:#a8d800; --violet:#7c5cff; --blue:#3b82f6;
  --grad-v:linear-gradient(135deg,#7c5cff,#3b82f6);
  --r:22px; --rs:14px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wordmark:'Oxanium','Space Grotesk',sans-serif;
  --mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--txt);font-family:var(--ff);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;
}
body::before{content:"";position:fixed;inset:0;z-index:-3;
  background:radial-gradient(1200px 700px at 78% -5%,rgba(124,92,255,.13),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(200,255,0,.06),transparent 55%),
             var(--ink);}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:#06060a}

/* aurora + noise */
.aurora{position:fixed;inset:0;z-index:-2;filter:blur(70px);opacity:.55;pointer-events:none}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite}
.blob:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-10vw;background:radial-gradient(circle,#5a3fd6,transparent 65%)}
.blob:nth-child(2){width:38vw;height:38vw;right:-6vw;top:8vh;background:radial-gradient(circle,#1f6feb,transparent 65%);animation-delay:-6s}
.blob:nth-child(3){width:34vw;height:34vw;left:18vw;bottom:-14vw;background:radial-gradient(circle,#8fd400,transparent 68%);animation-delay:-11s;opacity:.5}
.blob:nth-child(4){width:30vw;height:30vw;right:14vw;bottom:-8vw;background:radial-gradient(circle,#c026d3,transparent 66%);animation-delay:-3s;opacity:.6}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,-3vh) scale(1.08)}66%{transform:translate(-3vw,4vh) scale(.95)}}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.spotlight{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background .12s}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{position:relative;padding:clamp(52px,7vw,72px) 0;z-index:1}
.h2{font-family:var(--display);font-size:clamp(30px,4.8vw,52px);font-weight:700;letter-spacing:-.02em;margin:0 0 14px;line-height:1.04}
.lead{color:var(--mut);font-size:clamp(15px,1.8vw,18px);max-width:620px;margin:0 0 8px}
.lead--center{margin-left:auto;margin-right:auto;text-align:center}
.center{text-align:center}

/* tag / kicker */

/* glass window */
.glass{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}
.glass-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);font-family:var(--mono);font-size:11.5px;color:var(--mut2)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.glass-bar span{margin-left:8px}
.glass-body{padding:clamp(24px,4vw,48px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;
  padding:13px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;will-change:transform}
.btn-primary{background:var(--lime);color:#06060a;box-shadow:0 10px 30px -8px rgba(200,255,0,.5)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(200,255,0,.65)}
.btn-glass{background:var(--panel);color:var(--txt);border-color:var(--line-2)}
.btn-glass:hover{background:var(--panel-2);transform:translateY(-3px);border-color:var(--lime-d)}
.btn-sm{padding:10px 16px;font-size:13px}
.btn:active{transform:translateY(-1px) scale(.98)}

/* ============================ MENUBAR ============================ */
.menubar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:4px;padding:7px 8px;border-radius:999px;
  background:rgba(20,20,30,.42);border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 14px 44px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .4s,opacity .4s}
.menubar .mb-logo{font-weight:900;letter-spacing:.04em;font-size:15px;padding:6px 12px;color:var(--txt)}
.menubar .mb-logo b{color:var(--lime)}
.menubar .mb-clock{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--mut);
  padding:8px 13px 8px 12px;border-left:1px solid var(--line);margin-left:4px;letter-spacing:.03em}
.menubar .mb-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:pulse 2s infinite}
@media(max-width:600px){.menubar .mb-clock{display:none}}
.menubar a.mb-link{font-size:13.5px;color:var(--mut);padding:8px 14px;border-radius:999px;transition:.2s;font-weight:600}
.menubar a.mb-link:hover{color:var(--txt);background:var(--panel)}
.mb-join{background:var(--lime);color:#06060a !important;font-weight:700}
.mb-join:hover{background:#d8ff3a !important}
.mb-hide{transform:translateX(-50%) translateY(-130%);opacity:0}
.mb-burger{display:none}
@media(max-width:780px){
  .menubar .mb-link:not(.mb-join){display:none}
}

/* ============================ HERO ============================ */
/* Centred in normal flow rather than pinned to the edges: the dock and the
   basket button are both fixed to the bottom of the viewport, so anything
   anchored there collides with them. The padding keeps clear of both. */
#hero{position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:104px 22px 126px}
.hero-globe{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(124,92,255,.10),transparent 62%)}
/* Drags fall through the copy to the canvas underneath. Only the buttons take
   pointer events back, so the globe can be spun from anywhere on screen, the
   wordmark included, without any hit-testing in script. */
/* Narrower than the viewport so the fixed basket button never lands on the
   last stat. */
.hero-copy{position:relative;z-index:2;width:min(92vw,720px);
  text-align:center;pointer-events:none}
.hero-copy .btn{pointer-events:auto}
/* Dots pass behind the text, so the text carries its own shadow. A dark panel
   here showed up as a box over the globe and dimmed the members underneath. */
.hero-copy{text-shadow:0 2px 16px rgba(7,7,11,.92),0 1px 4px rgba(7,7,11,.8)}
/* Buttons carry their own ground, so the shadow only muddies their label. */
.hero-copy .btn{text-shadow:none}
/* The wordmark paints a gradient through clipped text. A shadow or filter on
   top of that muddies the glyphs instead of lifting them, and it is bright
   enough against the globe on its own. */
.hero-h1,.hero-ch{text-shadow:none;filter:none}
/* Standing rather than printed: tipped back a little, lit from above, and
   sitting on its own shadow. The outline is gone; depth comes from the
   gradient across the face and the stack of shadows under it. */
.hero-logo{width:124px;margin:0 auto 20px;perspective:620px}
.hero-logo svg{width:100%;display:block;transform:rotateX(12deg);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))
         drop-shadow(0 -1px 0 rgba(150,125,255,.4))
         drop-shadow(0 8px 12px rgba(0,0,0,.55))
         drop-shadow(0 20px 42px rgba(124,92,255,.5));
  animation:logoRise 1.1s cubic-bezier(.2,.9,.25,1) both .15s}
.hero-logo path{fill:url(#ntxLogoFace);stroke:none}
@keyframes logoRise{
  from{opacity:0;transform:rotateX(34deg) translateY(18px) scale(.88)}
  to{opacity:1;transform:rotateX(12deg) translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hero-logo svg{animation:none;transform:rotateX(12deg)}
}
.hero-h1{font-family:var(--display);font-size:clamp(52px,11.5vw,128px);font-weight:700;letter-spacing:-.03em;
  margin:0;text-align:center;line-height:.86}
.hero-ch{display:inline-block;background:linear-gradient(180deg,#fff,#b9b9d6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(40px) rotateX(40deg);animation:chIn .7s cubic-bezier(.2,.8,.2,1) forwards}
.hero-ch:nth-child(3){background:linear-gradient(180deg,#fff,#b9b9d6);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes chIn{to{opacity:1;transform:none}}
.hero-sub{text-align:center;font-family:var(--mono);font-size:clamp(12px,2vw,15px);
  color:var(--lime-d);letter-spacing:.12em;margin:18px 0 0;min-height:1.4em}
.hero-caret{animation:blink 1s step-end infinite}
.hero-caret--idle{opacity:.5}
@keyframes blink{50%{opacity:0}}
.hero-desc{text-align:center;color:var(--mut);max-width:540px;margin:16px auto 0;font-size:16px}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.fade-item{opacity:0;animation:fadeUp .8s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:14px;
  padding-top:18px;border-top:1px solid var(--line)}
.stat{padding:4px 0 4px 26px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none;padding-left:0}
.stat .num{font-family:var(--display);font-size:clamp(34px,5vw,54px);font-weight:700;color:var(--lime);letter-spacing:-.02em;line-height:1}
.stat .lbl{font-size:12px;color:var(--mut2);letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
@media(max-width:560px){.statgrid{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .stat{padding-left:20px}.stat:nth-child(odd){border-left:none;padding-left:0}}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mut2);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.scroll-line{width:1px;height:42px;background:linear-gradient(var(--lime),transparent);animation:scrolly 1.8s ease-in-out infinite}
@keyframes scrolly{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================ TICKER ============================ */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);overflow:hidden;padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-inner{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker:hover .ticker-inner{animation-play-state:paused}
.ticker-seq{display:flex;flex-shrink:0}
.ticker-item{font-family:var(--mono);font-size:15px;color:var(--mut);white-space:nowrap;padding:0 4px;text-transform:uppercase;letter-spacing:.06em}
.ticker-dot{color:var(--lime);margin:0 22px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============================ CIRCLES ============================ */
.circles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.circle-card{position:relative;padding:30px 26px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:.4s;cursor:default}
.circle-card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0),rgba(200,255,0,.08),transparent 60%);opacity:0;transition:.4s}
.circle-card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--panel-2)}
.circle-card:hover::after{opacity:1}
.circle-num{font-family:var(--mono);font-size:13px;color:var(--lime);letter-spacing:.2em}
.circle-card h3{font-size:21px;margin:14px 0 10px;font-weight:800}
.circle-card p{color:var(--mut);font-size:14.5px;margin:0}
@media(max-width:780px){.circles-grid{grid-template-columns:1fr}}

/* ============================ COMMUNITY ============================ */
.sec-hdr{text-align:center;margin-bottom:40px}
.people-wrap{position:relative}
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;transition:.5s}
@media(max-width:880px){.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.people-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s;
  transform-style:preserve-3d;will-change:transform}
.pcard:hover{border-color:var(--lime-d)}
.pcard-media{position:relative;aspect-ratio:1;overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:saturate(1.02)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:54px;font-weight:800;color:#fff}
.pcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,7,11,.92));}
.pcard-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-120%);transition:.6s;pointer-events:none}
.pcard:hover .pcard-shine{transform:translateX(120%)}
.pcard-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(7,7,11,.6);border:1px solid var(--line);backdrop-filter:blur(6px)}
.pcard-badge.founder{color:var(--lime);border-color:rgba(200,255,0,.4)}
.pcard-badge.member{color:var(--mut)}
.pcard-badge.coreteam{color:#bca9ff;border-color:rgba(124,92,255,.4)}
.pcard-info{position:absolute;left:0;right:0;bottom:0;padding:13px;z-index:2}
.pcard-name{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.pcard-role{color:var(--mut);font-size:11.5px;margin-top:2px;line-height:1.35}
@media(max-width:480px){.pcard-name{font-size:13px}.pcard-role{font-size:10px}.pcard-info{padding:10px}}
.pcard-li{position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:rgba(7,7,11,.55);border:1px solid var(--line);
  color:#fff;backdrop-filter:blur(6px);transition:.25s}
.pcard-li:hover{background:#0a66c2;border-color:#0a66c2;transform:translateY(-2px)}
.pcard-li svg{width:15px;height:15px;fill:currentColor}
.pcard.hidden-row{display:none}
.people-grid.expanded .pcard.hidden-row{display:block;animation:fadeUp .55s ease both}
.sec-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:34px}
.livedot{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mut)}
.livedot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(200,255,0,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(200,255,0,0)}100%{box-shadow:0 0 0 0 rgba(200,255,0,0)}}
/* members divider + compact cards */
.members-divider{display:flex;align-items:center;gap:16px;margin:40px 0 22px;color:var(--mut2)}
.members-divider::before,.members-divider::after{content:"";height:1px;background:var(--line);flex:1}
.members-divider span{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-d)}
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.mcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 12px;
  border-radius:var(--rs);background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,background .28s}
.mcard:hover{transform:translateY(-4px);border-color:var(--lime-d);background:var(--panel-2)}
.mcard-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;font-family:var(--display);overflow:hidden;flex-shrink:0;border:1px solid var(--line-2)}
.mcard-av img{width:100%;height:100%;object-fit:cover}
.mcard-name{font-weight:600;font-size:13.5px;line-height:1.22}
.mcard-role{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.mcard.hidden-row{display:none}
.members-grid.expanded .mcard.hidden-row{display:flex;animation:fadeUp .5s ease both}
.members-wrap{display:none}
.members-wrap.show{display:block;animation:fadeUp .5s ease both}
#globeCanvas{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
.cg-hint{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin:30px 0 0;padding:0 16px}
.cg-zoom{position:absolute;left:16px;bottom:104px;z-index:3;display:flex;flex-direction:column;gap:8px}
.cg-zoom button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(22,22,32,.5);color:#fff;font-size:18px;line-height:1;cursor:pointer;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);transition:.2s}
.cg-zoom button:hover{background:rgba(40,40,55,.7);border-color:var(--lime)}
.cg-tip{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:.12s;background:rgba(14,14,22,.92);border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px;color:#fff;font-family:var(--ff);white-space:nowrap}
.cg-tip.show{opacity:1}
.cg-card{position:absolute;z-index:5;width:248px;pointer-events:none;opacity:0;transform:scale(.85) translateY(12px);filter:blur(7px);transition:opacity .32s ease,transform .45s cubic-bezier(.2,.9,.25,1),filter .32s ease;background:rgba(18,18,28,.8);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:0 30px 70px -24px rgba(0,0,0,.85)}
.cg-card.show{opacity:1;transform:none;filter:none;pointer-events:auto}
.cg-hero{height:150px;position:relative;overflow:hidden;background:var(--ink2)}
.cg-hero img{width:100%;height:100%;object-fit:cover}
.cg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,18,28,.96))}
.cg-ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:44px;font-weight:700;color:#fff;background:var(--grad-v)}
.cg-x{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;font-size:12px}
.cg-badge{position:absolute;top:10px;left:10px;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid}
.cg-badge.founder{color:#06060a;background:var(--lime);border-color:var(--lime)}
.cg-badge.core{color:#c7baff;background:rgba(124,92,255,.22);border-color:rgba(124,92,255,.5)}
.cg-cbody{padding:0 16px 16px;margin-top:-26px;position:relative;z-index:2}
.cg-name{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.cg-role{color:var(--mut);font-size:12.5px;margin-top:3px;line-height:1.35}
.cg-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.cg-li{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;width:100%;background:var(--lime);color:#06060a;font-weight:700;font-size:13px;padding:9px;border-radius:999px;text-decoration:none;transition:.2s}
.cg-li svg{width:15px;height:15px;fill:#06060a}
.cg-li:hover{transform:translateY(-2px)}
@media(max-width:600px){
  .cg-card{width:212px}.cg-hero{height:120px}
  .hero-copy{width:94vw}
  /* A sphere of 250 dots crowds a phone into noise, and there is no room to
     drag it anyway. The hero keeps the glow the globe was sitting in. */
  .hero-globe{display:none}
  .cg-hint{display:none}
  #hero{background:radial-gradient(circle at 50% 38%,rgba(124,92,255,.16),transparent 64%)}
  .hero-desc{font-size:14.5px;margin-top:12px}
  #hero{padding:88px 16px 128px}
  .hero-logo{width:88px;margin-bottom:14px}
  .hero-sub{margin-top:12px}
  .hero-btns{margin-top:22px;gap:10px}
  .hero-btns .btn{padding:12px 18px;font-size:14px}
  .cg-hint{margin-top:20px;font-size:9.5px;letter-spacing:.1em}
  .statgrid{margin-top:10px;padding-top:14px}
  .stat .num{font-size:clamp(26px,8vw,36px)}
  .stat .lbl{font-size:10px;letter-spacing:.1em}
  .cg-zoom{bottom:150px;left:12px}
  .cg-zoom button{width:32px;height:32px;font-size:16px}
}

.people-grid .pcard.hidden-row{display:none}
.people-grid.expanded .pcard.hidden-row{display:block;animation:fadeUp .5s ease both}
.members-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.mcard{padding:15px 10px;gap:9px}
.mcard-name{font-size:12.5px}

/* person modal */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,4,8,.72);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:440px;border-radius:24px;overflow:hidden;
  background:#0d0d15;border:1px solid var(--line-2);box-shadow:0 40px 100px -20px #000;
  transform:translateY(30px) scale(.96);transition:.4s cubic-bezier(.2,.9,.2,1);max-height:92vh;overflow-y:auto}
.modal-overlay.open .modal{transform:none}
.modal-x{position:absolute;top:14px;right:14px;z-index:5;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(0,0,0,.4);color:#fff;cursor:pointer;font-size:15px;transition:.2s}
.modal-x:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.pm-next{position:absolute;top:14px;left:14px;z-index:6;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;font-size:16px;transition:.2s}
.pm-next:hover{background:var(--lime);color:#000;border-color:var(--lime);transform:translateX(2px)}
.pm-hero{position:relative;height:200px;overflow:hidden}
.pm-hero img{width:100%;height:100%;object-fit:cover}
.pm-hero .pcard-initials{font-size:72px}
.pm-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#0d0d15)}
.pm-body{padding:0 26px 26px;margin-top:-30px;position:relative;z-index:2}
.pm-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);margin-bottom:8px}
.pm-name{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.02em}
.pm-role{color:var(--mut);font-size:14px;margin-top:3px}
.pm-bio{color:#cfcfe0;font-size:14.5px;line-height:1.6;margin:16px 0}
.pm-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.chip{font-family:var(--mono);font-size:11px;color:var(--mut);padding:5px 11px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line)}
.pm-li{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#0a66c2;color:#fff;padding:13px;border-radius:12px;font-weight:700;transition:.25s}
.pm-li:hover{background:#0958a8;transform:translateY(-2px)}
.pm-li svg{width:18px;height:18px;fill:currentColor}

/* ============================ LEARN HUB / STORE ============================ */
.store-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.store-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.store-grid{grid-template-columns:1fr}}
.prod{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);transition:.4s}
.prod:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}
.prod-top{display:flex;gap:18px;padding:22px 22px 0}
.prod-cover{flex-shrink:0;width:118px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8);transition:.4s}
.prod:hover .prod-cover{transform:rotate(-2deg) translateY(-3px)}
.prod-cover img{width:100%}
.prod-meta{flex:1;min-width:0}
.prod-pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime-d);border:1px solid var(--line);padding:4px 9px;border-radius:999px;margin-bottom:10px}
.prod-title{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.18}
.prod-author{display:flex;align-items:center;gap:9px;margin-top:12px}
.prod-av{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.prod-author span{font-size:13px;color:var(--mut)}
.prod-desc{color:var(--mut);font-size:13.5px;line-height:1.55;padding:16px 22px 0;flex:1}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 22px;margin-top:8px;flex-wrap:wrap}
.prod-price{display:flex;align-items:baseline;gap:8px}
.prod-was{color:var(--mut2);text-decoration:line-through;font-size:14px}
.prod-free{color:var(--lime);font-weight:800;font-size:17px;letter-spacing:.02em}
.prod-dl{font-size:11.5px;color:var(--mut2);margin-top:5px;font-family:var(--mono);display:flex;align-items:center;gap:6px}
.prod-dl b{color:var(--mut)}
.dl-spark{color:var(--lime)}
.add-btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:#06060a;font-weight:700;
  padding:11px 17px;border-radius:999px;border:none;cursor:pointer;font-size:13.5px;transition:.25s}
.add-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(200,255,0,.55)}
.add-btn.in-cart{background:var(--panel-2);color:var(--lime);border:1px solid var(--lime-d)}
.add-btn svg{width:15px;height:15px}
.store-note{text-align:center;color:var(--mut2);font-size:13px;margin-top:30px}
.store-note b{color:var(--mut)}
/* guide card (full-width inside Learn Hub grid) */
.gcard{grid-column:1/-1;display:flex;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;transition:.4s}
.gcard:hover{border-color:var(--line-2);box-shadow:0 26px 56px -28px rgba(0,0,0,.8)}
.gcard-cover{flex-shrink:0;width:118px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8);transition:.4s}
.gcard:hover .gcard-cover{transform:rotate(-2deg) translateY(-3px)}
.gcard-cover img{width:100%}
.gcard-body{flex:1;min-width:0}
.gcard-desc{color:var(--mut);font-size:13.5px;line-height:1.55;margin:12px 0 0}
.gcard-side{flex-shrink:0;width:206px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.gcard-side .prod-dl{margin-top:0}
.gcard-side .add-btn{margin-top:5px}
@media(max-width:720px){.gcard{flex-direction:column;align-items:stretch;text-align:left}
  .gcard-side{width:100%}.gcard-cover{width:104px}}

/* fly-to-cart dot */
.fly{position:fixed;z-index:200;width:18px;height:18px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 20px var(--lime);pointer-events:none;transition:transform .8s cubic-bezier(.5,-.4,.4,1.2),opacity .8s}

/* basket button (in dock area) */
.basket-fab{position:fixed;right:20px;bottom:84px;z-index:55;width:56px;height:56px;border-radius:18px;
  background:rgba(22,22,32,.46);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);cursor:pointer;
  display:none;align-items:center;justify-content:center;color:var(--txt);transition:.3s;
  box-shadow:0 16px 44px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16)}
.basket-fab.has{display:flex}
.basket-fab:hover{transform:translateY(-3px);border-color:var(--lime-d)}
.basket-fab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7}
.basket-count{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;border-radius:11px;
  background:var(--lime);color:#06060a;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 6px;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.basket-count.show{transform:scale(1)}
.basket-count.bump{animation:bump .4s}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}

/* basket drawer */
.drawer-overlay{position:fixed;inset:0;z-index:110;background:rgba(4,4,8,.7);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:.3s}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:111;
  background:#0b0b12;border-left:1px solid var(--line-2);box-shadow:-30px 0 80px -20px #000;
  transform:translateX(100%);transition:.42s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}
.drawer-hd h3{font-family:var(--display);margin:0;font-size:19px;font-weight:700}
.drawer-hd .modal-x{position:static}
.drawer-body{flex:1;overflow-y:auto;padding:16px 22px}
.cart-item{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:54px;border-radius:7px;border:1px solid var(--line);flex-shrink:0;align-self:flex-start}
.cart-item .ci-t{font-weight:700;font-size:14px;line-height:1.25}
.cart-item .ci-a{color:var(--mut2);font-size:12px;margin-top:3px}
.cart-item .ci-p{color:var(--lime);font-weight:700;font-size:13px;margin-top:6px}
.ci-rm{margin-left:auto;background:none;border:none;color:var(--mut2);cursor:pointer;font-size:18px;align-self:flex-start;transition:.2s}
.ci-rm:hover{color:#ff5f57}
.cart-empty{text-align:center;color:var(--mut2);padding:60px 20px;font-size:14px}
.cart-empty .ce-emoji{font-size:38px;display:block;margin-bottom:12px;opacity:.6}
.drawer-ft{padding:20px 22px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.drawer-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-total .dt-l{color:var(--mut)}
.drawer-total .dt-r{font-size:22px;font-weight:800}
.drawer-total .dt-r small{font-size:13px;color:var(--mut2);text-decoration:line-through;margin-right:8px;font-weight:600}
.checkout-btn{width:100%;justify-content:center}
.drawer-secure{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--mut2);font-size:11.5px;margin-top:12px}
.drawer-secure svg{width:13px;height:13px;fill:currentColor}

/* checkout / success states inside drawer */
.checkout-form{display:flex;flex-direction:column;gap:13px;margin-top:6px}
.cf-req{color:var(--lime-d)}
.cf-field input.cf-err{border-color:#ff5470!important}
.cf-field label{display:block;font-size:12px;color:var(--mut);margin-bottom:6px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.cf-field input{width:100%;background:var(--ink2);border:1px solid var(--line);border-radius:11px;color:var(--txt);
  padding:12px 14px;font-size:14px;font-family:var(--ff);transition:.2s}
.cf-field input:focus{outline:none;border-color:var(--lime-d);box-shadow:0 0 0 3px rgba(200,255,0,.12)}
.cf-opt{font-size:11.5px;color:var(--mut2)}
.success-wrap{text-align:center;padding:30px 10px}
.success-check{width:74px;height:74px;border-radius:50%;background:rgba(200,255,0,.12);border:1px solid var(--lime-d);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:popIn .5s cubic-bezier(.3,1.5,.5,1)}
.success-check svg{width:36px;height:36px;stroke:var(--lime);stroke-width:3;fill:none}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.success-wrap h3{font-family:var(--display);font-weight:700;margin:0 0 8px;font-size:23px}
.success-wrap p{color:var(--mut);font-size:14px;margin:0 auto 22px;max-width:300px}
.dl-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.dl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:left}
.dl-row img{width:36px;border-radius:5px}
.dl-row .dlr-t{font-size:13px;font-weight:700;flex:1;line-height:1.2}
.dl-row .dlr-b{background:var(--lime);color:#000;border:none;padding:8px 13px;border-radius:9px;font-weight:700;font-size:12.5px;cursor:pointer;transition:.2s}
.dl-row .dlr-b:hover{transform:scale(1.05)}

/* confetti */
.confetti{position:fixed;width:9px;height:14px;z-index:300;pointer-events:none;top:-20px;border-radius:2px}

/* ---- Learn Hub article browser ---- */
.lh-tabs{display:flex;flex-wrap:wrap;gap:8px}
.lh-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--mut);background:var(--panel);border:1px solid var(--line);padding:8px 13px;border-radius:999px;cursor:pointer;transition:.22s}
.lh-tab:hover{color:var(--txt);border-color:var(--line-2)}
.lh-tab--on{color:#06060a;background:var(--lime);border-color:var(--lime)}
.lh-count{font-size:10.5px;background:var(--panel-2);color:var(--mut2);padding:1px 6px;border-radius:999px}
.lh-tab--on .lh-count{background:rgba(0,0,0,.18);color:#06060a}

/* ---- Learn Hub launcher + /learn page ---- */
/* On the front page the tabs are links to /learn, so they need the anchor
   reset the button never did. */
a.lh-tab,a.lh-tab:hover{text-decoration:none}
/* The menubar is fixed and this page has no hero to sit under it. */
.learn-page{padding-top:104px}
.lh-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--mut);margin-bottom:18px;transition:.2s}
.lh-back:hover{color:var(--lime)}
.menubar a.mb-link--on{color:var(--lime)}

/* The page is built around the field: one thing to look at, one thing to do. */
.lh-hero{max-width:720px;margin:0 auto 46px;text-align:center}
.lh-h1{font-family:var(--display);font-size:clamp(34px,6vw,52px);font-weight:800;
  letter-spacing:-.025em;line-height:1.05;margin:0}
.lh-sub{color:var(--mut);font-size:16px;margin:14px 0 32px}
.lh-searchbig{display:flex;align-items:center;gap:13px;max-width:620px;margin:0 auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;
  padding:17px 24px;transition:border-color .25s,box-shadow .25s}
.lh-searchbig:focus-within{border-color:var(--lime);box-shadow:0 0 0 4px rgba(200,255,0,.12)}
.lh-searchbig svg{color:var(--mut2);flex-shrink:0}
.lh-searchbig:focus-within svg{color:var(--lime)}
.lh-searchbig input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-family:inherit;font-size:15.5px}
.lh-searchbig input::placeholder{color:var(--mut2)}
.lh-searchbig input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.lh-hero .lh-tabs{justify-content:center;margin-top:26px}
.lh-hero--launch{margin:30px auto 4px}
@media(max-width:560px){
  .lh-searchbig{padding:14px 18px}
  .lh-hero{margin-bottom:34px}
}
.lh-hot-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-bottom:16px}
.lh-hot-label b{color:var(--txt)}
.lh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.lh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lh-grid{grid-template-columns:1fr}}
.rcard{text-align:left;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;cursor:pointer;transition:.3s;color:var(--txt);font:inherit}
.rcard:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 24px 50px -26px rgba(0,0,0,.8)}
.rcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rcard-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-d)}
.rcard-hot{font-size:10.5px;color:var(--mut)}
.rcard-title{font-family:var(--display);font-size:17px;font-weight:700;line-height:1.22;letter-spacing:-.01em}
.rcard-desc{color:var(--mut);font-size:13px;line-height:1.55;margin:10px 0 14px;flex:1}
.rcard-tags{display:flex;flex-wrap:wrap;gap:6px}
.rcard-foot{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rcard-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.rcard-author{font-size:12px;color:var(--mut)}
.rcard-av--img{padding:0!important;overflow:hidden}
.rcard-av--img img{width:100%;height:100%;object-fit:cover;display:block}
.lh-empty{grid-column:1/-1;text-align:center;color:var(--mut2);padding:40px 20px;font-size:14px}
.lh-foot{display:flex;justify-content:center;margin-top:28px}
.lh-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.lh-submit-txt{margin:0;color:var(--mut);font-size:13.5px}
.lh-submit-txt strong{color:var(--txt)}
.lh-modal{max-width:560px;max-height:86vh;overflow:auto}
.lhm-full{display:none;margin-top:16px;color:#cfcfe0;font-size:14px;line-height:1.65}
.lhm-full.show{display:block}
.lhm-full h4{font-family:var(--display);color:var(--txt);font-size:15px;margin:16px 0 6px}
.lhm-full p{margin:8px 0}
.lhm-full ul{margin:8px 0;padding-left:18px}
.lhm-full li{margin:5px 0}
.sub-modal{max-width:440px}
.sub-body,.sub-ok{padding:28px 26px}
.sub-ok{display:none;text-align:center}
.sub-lead{color:var(--mut);font-size:14px;line-height:1.55;margin:8px 0 18px}
.sub-note{color:var(--mut2);font-size:12px;margin:12px 0 0;text-align:center}
.sub-modal .field{margin-bottom:14px}
.sub-modal .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.sub-modal .field input{width:100%;background:var(--ink2);border:1px solid var(--line);border-radius:11px;color:var(--txt);font-family:var(--ff);font-size:14px;padding:11px 13px;outline:none}
.sub-modal .field input:focus{border-color:var(--lime-d)}
.sub-modal .field input.err{border-color:#ff5470}
.sub-ic{width:58px;height:58px;border-radius:50%;background:rgba(200,255,0,.14);border:1px solid rgba(200,255,0,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--lime);font-size:28px}
.sub-ok .btn{margin-top:6px}
.lhm-body{padding:30px 28px 28px}
.lhm-cat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime-d)}
.lhm-title{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:10px 0 0}
.lhm-author{display:flex;align-items:center;gap:9px;margin:14px 0}
.lhm-author span:last-child{font-size:13px;color:var(--mut)}
.lhm-desc{color:#cfcfe0;font-size:14.5px;line-height:1.65;margin:0 0 16px}
.pm-li--ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.pm-li--ghost:hover{background:var(--panel-2);border-color:var(--lime-d)}
/* ---- Guides divider ---- */
.guides-divider{display:flex;align-items:center;gap:16px;margin:46px 0 26px;color:var(--mut2)}
.guides-divider::before,.guides-divider::after{content:"";height:1px;background:var(--line);flex:1}
.guides-divider span{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime-d)}
.guides-head{text-align:center;margin-bottom:24px}
.guides-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0}
.guides-sub{color:var(--mut);font-size:14.5px;line-height:1.6;max-width:580px;margin:8px auto 0}

/* ============================ EVENTS ============================ */
.event-card{display:flex;gap:26px;align-items:stretch;padding:30px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);max-width:760px;margin:44px auto 0;transition:.4s;flex-wrap:wrap}
.event-card:hover{border-color:var(--line-2);transform:translateY(-5px)}
.ev-date{flex-shrink:0;width:120px;text-align:center;border-radius:16px;padding:20px 10px;
  background:var(--grad-v);box-shadow:0 16px 40px -16px rgba(124,92,255,.6)}
.ev-date .d{font-size:34px;font-weight:900;line-height:1}
.ev-date .dl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;opacity:.85}
.ev-main{flex:1;min-width:220px}
.ev-main h3{font-family:var(--display);margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.ev-main p{color:var(--mut);font-size:14.5px;margin:0 0 16px}
.ev-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ev-tag{font-family:var(--mono);font-size:11px;color:var(--mut);padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.ev-tag::before{content:"◆ ";color:var(--lime-d)}

/* ---- live events from ticketrax.com ---- */
.ev-empty{max-width:560px;margin:44px auto 0;padding:44px 30px;text-align:center;
  border-radius:var(--r);background:var(--panel);border:1px dashed var(--line-2)}
.ev-empty-mark{font-size:30px;color:var(--lime);opacity:.65;margin-bottom:12px;line-height:1}
.ev-empty h3{font-family:var(--display);margin:0 0 8px;font-size:20px;font-weight:700}
.ev-empty p{color:var(--mut);font-size:14.5px;margin:0 0 22px}
.ev-card-link{display:block;color:inherit;text-decoration:none}
.ev-card-link:hover{text-decoration:none}
/* Summaries are operator-written and run long; three lines keeps the list scannable. */
.ev-card-link .ev-main p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;white-space:pre-line}
.ev-sold{opacity:.58}
.ev-sold .ev-date{box-shadow:none;filter:grayscale(1)}
.ev-badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--mut)}
.ev-seats{color:var(--lime)}
.ev-cta{display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-family:var(--ff);font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:#06060a;background:var(--lime);border-radius:999px;padding:10px 18px;
  box-shadow:0 0 0 0 rgba(200,255,0,.55);animation:evRsvp 2.6s ease-in-out infinite;
  transition:transform .2s}
.ev-card-link:hover .ev-cta{transform:translateY(-2px)}
@keyframes evRsvp{
  0%,100%{box-shadow:0 0 0 0 rgba(200,255,0,.5),0 8px 22px -10px rgba(200,255,0,.5)}
  50%{box-shadow:0 0 0 7px rgba(200,255,0,0),0 10px 26px -8px rgba(200,255,0,.8)}}
.ev-sold-link .ev-cta{background:var(--panel);color:var(--mut);animation:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){.ev-cta{animation:none}}
/* The next event breathes rather than blinks: a slow glow on the date chip and
   a live dot on the badge. Anything faster reads as an error state. */
@keyframes evGlow{0%,100%{box-shadow:0 16px 40px -16px rgba(124,92,255,.55)}
  50%{box-shadow:0 16px 46px -14px rgba(124,92,255,.95),0 0 0 4px rgba(124,92,255,.13)}}
@keyframes evDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.ev-card-link:not(.ev-sold-link) .ev-date{animation:evGlow 3s ease-in-out infinite}
.ev-next{color:var(--lime);border-color:rgba(200,255,0,.4);background:rgba(200,255,0,.08)}
.ev-next i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);
  margin-right:7px;vertical-align:middle;animation:evDot 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .ev-card-link .ev-date,.ev-next i{animation:none}
}

/* ============================ JOIN ============================ */
.soc-link{color:var(--mut);font-size:13.5px;transition:.2s;position:relative}
.soc-link:hover{color:var(--lime)}

/* ============================ FOOTER ============================ */
footer{padding:48px 22px;border-top:1px solid var(--line);text-align:center;position:relative;z-index:1}
.fbrand{font-size:26px;font-weight:900;letter-spacing:.05em}
.fbrand b{color:var(--lime)}
.flinks{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.flinks a{color:var(--mut);font-size:14px;transition:.2s}
.flinks a:hover{color:var(--lime)}
.fsocials{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.fcopy{color:var(--mut2);font-size:12.5px;font-family:var(--mono)}
@media(max-width:780px){footer{padding-bottom:110px}}

/* ========================= NETRAX ASSISTANT ========================= */
/* The robot loop sits in the corner and opens the ways to reach NETRAX.
   Sizing is fixed in both axes so the video can never shift the layout, and
   the three variables below frame the robot inside the circle: raise --bot-zoom
   to fill more of the bubble, nudge --bot-x / --bot-y if it sits off centre. */
.ntx-bot{
  --bot-size:88px; --bot-zoom:1.06; --bot-x:50%; --bot-y:50%;
  /* The site's accent, so the assistant belongs to it. */
  --bot-glow:200,255,0;
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:var(--bot-size);height:var(--bot-size);
  pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .35s,transform .35s,visibility .35s}
.ntx-bot.is-on{opacity:1;visibility:visible;transform:none}

.ntx-bot-btn{
  pointer-events:auto;
  width:var(--bot-size);height:var(--bot-size);display:block;
  padding:0;border-radius:50%;cursor:pointer;overflow:hidden;position:relative;
  border:1px solid rgba(var(--bot-glow),.38);background:rgba(10,12,22,.62);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 0 0 1px rgba(var(--bot-glow),.10),
             0 10px 30px -12px rgba(var(--bot-glow),.34),
             0 18px 44px -18px rgba(0,0,0,.9);
  animation:botFloat 5.4s ease-in-out infinite;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1),box-shadow .3s,border-color .3s}
.ntx-bot-btn:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(var(--bot-glow),.85);
  box-shadow:0 0 0 1px rgba(var(--bot-glow),.22),
             0 16px 40px -12px rgba(var(--bot-glow),.5),
             0 22px 50px -18px rgba(0,0,0,.95)}
.ntx-bot-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ntx-bot.open .ntx-bot-btn{transform:translateY(-6px) scale(1.03);animation:none;
  border-color:rgba(var(--bot-glow),.9)}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* The stage holds the video and keeps its own size, so a slow file cannot
   collapse the button or nudge the page. */
.ntx-bot-stage{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(124,92,255,.28),rgba(8,10,18,.92) 72%)}
.ntx-bot-stage video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--bot-x) var(--bot-y);
  transform:scale(var(--bot-zoom));display:block;pointer-events:none}

/* Shown once, briefly, and never nagged again. */
.ntx-bot-tip{position:absolute;right:calc(var(--bot-size) + 14px);bottom:16px;white-space:nowrap;
  padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--txt);
  border:1px solid rgba(var(--bot-glow),.4);background:rgba(12,14,24,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .35s,transform .35s}
.ntx-bot-tip.show{opacity:1;transform:none}

.ntx-bot-menu{position:absolute;right:0;bottom:calc(100% + 12px);
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px;pointer-events:none}
.ntx-bot-menu li{opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .26s cubic-bezier(.2,1.4,.4,1),transform .26s cubic-bezier(.2,1.4,.4,1)}
.ntx-bot.open .ntx-bot-menu{pointer-events:auto}
.ntx-bot.open .ntx-bot-menu li{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 38ms)}
.ntx-bot-menu a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--txt);
  border:1px solid rgba(var(--bot-glow),.32);background:rgba(12,14,24,.8);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.9);white-space:nowrap;
  transition:color .18s,border-color .18s,transform .18s,box-shadow .18s}
.ntx-bot-menu a:hover,.ntx-bot-menu a:focus-visible{
  color:#fff;border-color:rgba(var(--bot-glow),.9);transform:translateX(-3px);
  box-shadow:0 12px 30px -14px rgba(var(--bot-glow),.8)}
.ntx-bot-menu svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.ntx-bot-sep{height:1px;width:64%;align-self:flex-end;background:rgba(255,255,255,.12);margin:2px 0}

@media(max-width:620px){
  .ntx-bot{--bot-size:70px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .ntx-bot-menu a{font-size:13px;padding:8px 13px}
  .ntx-bot-tip{font-size:12px;bottom:12px}
  .basket-fab{bottom:calc(96px + env(safe-area-inset-bottom));right:14px}
}
@media(prefers-reduced-motion:reduce){
  .ntx-bot,.ntx-bot-btn,.ntx-bot-menu li,.ntx-bot-tip{transition:none;animation:none}
}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}.rv{opacity:1;transform:none}}

/* ============================ SUPPORTED BY ============================ */
#supporters{padding:clamp(56px,9vw,104px) 0;overflow-x:hidden}
.sponsor-row{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;gap:clamp(16px,3vw,28px);
  /* Cap at 3 so a wide viewport never leaves a dangling empty track. */
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:1000px;margin-inline:auto;
  align-items:start;
}
.sponsor-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  /* Visible by default. An opacity:0 start would hide the row outright if the
     animation never ran, and lazy images inside a zero-opacity container may
     never be fetched at all. The animation only adds motion on top. */
  animation:sponsorIn .55s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 110ms);
}
/* Transform only. An opacity:0 start would hide the logos outright whenever
   the animation does not tick (a throttled background tab, for instance)
   so visibility never depends on the animation running. */
@keyframes sponsorIn{from{transform:translateY(14px)}to{transform:none}}

/* ---- supporter ring ---- */
/* Three cards stand on a circle and the circle turns. Each card carries the
   logo on both faces, so a card facing away still reads correctly rather than
   vanishing or showing a mirror image. */
.sponsor-ring-wrap{position:relative;height:250px;margin:40px auto 6px;
  perspective:1200px;perspective-origin:50% 50%}
.sponsor-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* Rotation is driven in script rather than by a keyframe, so a drag can take
   the wheel mid-spin and hand it back on release. Hovering never stops it.
   pan-y keeps vertical scrolling with the page and horizontal drags with the
   ring, which matters most on a phone. */
.sponsor-ring-wrap{touch-action:pan-y;cursor:grab}
.sponsor-ring-wrap.is-held{cursor:grabbing}

.sr-card{position:absolute;top:50%;left:50%;width:200px;height:118px;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;
  margin:-59px 0 0 -100px;transform-style:preserve-3d;
  /* Stand the card up at its angle, then push it out to the rim. The radius
     has to clear the front card once perspective scales it up, or the card in
     front crops the logos beside it. */
  transform:rotateY(var(--a,0deg)) translateZ(290px)}
.sr-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:16px 20px;border-radius:var(--r);background:#f7f7fa;
  border:1px solid rgba(255,255,255,.10);overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 22px 46px -22px rgba(0,0,0,.75)}
.sr-back{transform:rotateY(180deg)}
.sr-face img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* The ring says it all, so the name list stands down while it is showing.
   It is display:none rather than merely invisible, so assistive tech reads
   the ring's links only and no sponsor is announced twice. */
.sponsor-row{display:none}

@media(max-width:620px){
  .sponsor-ring-wrap{height:184px;perspective:850px}
  /* Sized so six cards stay inside a 390px screen rather than widening it. */
  .sr-card{width:132px;height:80px;margin:-40px 0 0 -66px;
    transform:rotateY(var(--a,0deg)) translateZ(155px)}
}

/* No spinning for anyone who asked not to see it: the ring goes away and the
   original logo grid comes back, complete rather than merely still. */
@media(prefers-reduced-motion:reduce){
  .sponsor-ring-wrap{display:none}
  /* The full grid comes back: logo, name and blurb, each a real link. */
  .sponsor-row{display:grid;margin-top:38px}
  .sponsor-row .sponsor-chip{display:flex}
}
.sponsor-chip{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:104px;padding:18px 22px;
  background:#f7f7fa;border:1px solid rgba(255,255,255,.10);border-radius:var(--r);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background .28s;
  will-change:transform;
}
.sponsor-chip img{max-height:56px;width:auto;max-width:100%;object-fit:contain}
.sponsor-chip:hover,.sponsor-chip:focus-visible{
  transform:translateY(-6px);background:#fff;
  box-shadow:0 16px 38px rgba(0,0,0,.42),0 0 0 1px rgba(200,255,0,.35);
}
.sponsor-chip:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.sponsor-name{font-weight:650;font-size:.95rem;color:var(--txt)}
.sponsor-blurb{font-size:.82rem;color:var(--mut2);line-height:1.4}

/* ============================ REVIEW CTA + MODAL ============================ */
.rev-cta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:space-between;padding:22px 24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.rev-cta-main{flex:1 1 260px}
.rev-cta-main h3{margin:0 0 6px;font-family:var(--display);font-size:1.15rem}
.rev-cta-main p{margin:0;color:var(--mut);font-size:.93rem;line-height:1.55}
.rev-cta-btn{flex:0 0 auto;min-height:44px}

.rev-label{display:block;margin-bottom:8px;font-size:.9rem;color:var(--mut)}
.rev-opt{color:var(--mut2);font-weight:400}
.rev-err{margin:2px 0 10px;color:#ff8a8a;font-size:.88rem}

/* Stars.
   Scoped under .sub-modal so these beat `.sub-modal .field label`, which
   would otherwise force 11px uppercase mono onto the glyphs.
   Source order is 5..1 with row-reverse, so 1 renders leftmost and the
   sibling combinator can reach every star to the visual left of a hover
   or a checked input. */
.sub-modal .stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.sub-modal .stars input{position:absolute;opacity:0;width:1px;height:1px}
.sub-modal .stars label{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  cursor:pointer;font-size:2rem;line-height:1;color:var(--mut2);
  font-family:"Apple Color Emoji","Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;
  letter-spacing:normal;text-transform:none;margin:0;
  transition:color .18s,transform .18s;
}
.sub-modal .stars label::before{content:"\2605"}
.sub-modal .stars label.is-lit{color:var(--lime)}
.sub-modal .stars label:hover{transform:scale(1.12)}
.sub-modal .stars input:focus-visible + label{outline:3px solid var(--lime);outline-offset:2px;border-radius:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#reviewModal textarea{
  width:100%;padding:12px 14px;border-radius:var(--rs);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:var(--txt);font:inherit;resize:vertical;min-height:96px;
}
#reviewModal textarea:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
#revOk{display:none}
#reviewModal.sent #revOk{display:block}
#reviewModal.sent #revForm{display:none}

@media (prefers-reduced-motion:reduce){
  .sponsor-item{animation:none;opacity:1;transform:none}
  .sponsor-chip,.stars label{transition:none}
  .sponsor-chip:hover,.sponsor-chip:focus-visible{transform:none}
  .stars label:hover{transform:none}
}