/* TradeChain space style, shared by the homepage and the other static pages:
   deep-space tokens, glass buttons, nav, footer and the fixed planet canvas.
   Only applies to body[data-space]; page layouts live in home-3d.css / space-pages. */
html:has(body[data-space]){background:#04060f; scroll-behavior:auto;}
body[data-space]{
  --bg:#04060f; --bg-2:#060a18; --ink:#f3f6ff; --space-text:#f3f6ff; --muted:#9aa6c4; --muted-2:#6b7796;
  --line:rgba(150,175,230,.12); --line-strong:rgba(150,175,230,.22);
  --accent:#2ee6a6; --accent-2:#1fc493; --accent-soft:#7dffe0; --accent-ink:#062018;
  --accent-rgb:46,230,166;
  --glass:rgba(12,18,38,.55); --glass-2:rgba(16,24,48,.65);
  --radius:18px; --radius-lg:26px; --maxw:1180px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.75);
  --font:'Outfit',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --text:var(--space-text); --surface:var(--glass); --chip:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.1);
  font-family:var(--font);color:var(--space-text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body[data-space] [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.7,.2,1),transform .7s cubic-bezier(.22,.7,.2,1);transition-delay:var(--rd,0ms);will-change:opacity,transform}
body[data-space] [data-reveal].in{opacity:1;transform:none}
.planet-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
body[data-space] .btn{display:inline-flex;align-items:center;gap:9px;height:auto;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
body[data-space] .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-space] .btn-primary{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.55),inset 0 1px 0 rgba(255,255,255,.4)}
body[data-space] .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(var(--accent-rgb),.7)}
body[data-space] .btn-outline{color:var(--space-text);background:rgba(255,255,255,.04);border-color:var(--line-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-space] .btn-outline:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
body[data-space] .btn-ghost{color:var(--space-text);background:rgba(255,255,255,.05);border-color:var(--line-strong);padding:9px 18px}
body[data-space] .btn-ghost:hover{background:rgba(255,255,255,.1)}
body[data-space] .nav{position:fixed;left:0;right:0;top:0;z-index:100;padding:0;background:transparent;transition:background .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
body[data-space] .nav.scrolled{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:none}
body[data-space] .nav .wrap{max-width:var(--maxw);padding:22px 24px;display:flex;justify-content:space-between;align-items:center}
body[data-space] .nav-left{gap:30px}
body[data-space] .nav .pill{background:transparent;height:auto;padding:0;border-radius:0;font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
body[data-space] .nav .pill:hover,body[data-space] .nav .pill.active{color:var(--space-text);background:transparent}
body[data-space] .nav .pill.logo{color:var(--space-text);font-size:19px;font-weight:800;letter-spacing:.04em;gap:10px;margin-right:4px}
body[data-space] .nav .pill.logo b{font-weight:800}
body[data-space] .nav .pill.logo i{font-family:var(--font);font-style:normal;font-size:19px;font-weight:800;color:var(--muted)}
body[data-space] .nav .pill.logo svg{width:28px;height:28px}
body[data-space] .nav-right{gap:14px}
body[data-space] .nav .pill.mint{color:var(--space-text);background:rgba(255,255,255,.05);border:1px solid var(--line-strong);padding:9px 18px;border-radius:999px;font-weight:600}
body[data-space] .nav .pill.mint:hover{background:rgba(255,255,255,.1)}
body[data-space] .nav .nav-burger{color:var(--space-text);background:rgba(255,255,255,.05);border:1px solid var(--line-strong);padding:9px 16px;border-radius:999px}
body[data-space] .lang-select{background:rgba(255,255,255,.04);color:var(--space-text);border:1px solid var(--line);border-radius:999px;height:38px}
body[data-space] .lang-select select option{color:#0a1d18}
body[data-space] .mobile-menu{background:rgba(8,12,26,.94);border-color:var(--line-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--space-text)}
body[data-space] .mobile-menu a:hover,body[data-space] .mobile-menu a.active{background:rgba(255,255,255,.06)}
body[data-space] footer.site{color:var(--space-text);margin-top:clamp(64px,9vw,110px);padding:40px clamp(20px,3vw,36px) 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(6,10,24,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-space] footer.site .wrap{max-width:none;padding:0}
body[data-space] .foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
body[data-space] .foot-brand{font-weight:800;letter-spacing:.04em}
body[data-space] .foot-brand i{font-family:var(--font);font-style:normal;color:var(--muted)}
body[data-space] .foot-top p{color:var(--muted)}
body[data-space] .foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted-2)}
body[data-space] .foot-col a{color:var(--muted)}
body[data-space] .foot-col a:hover{color:var(--space-text)}
body[data-space] .foot-bottom{color:var(--muted-2);border-color:var(--line)}

/* ---------- responsive nav + reduced motion (all space pages) ---------- */
@media (max-width:720px){
  body[data-space] .nav-left .pill:not(.logo){display:none}
  body[data-space] .nav .wrap{padding:18px 20px}
}
@media (prefers-reduced-motion:reduce){
  body[data-space] [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ======================================================================
   Tech, About, Apps, News and Academy in the space style.
   They keep their own layout (site.css); colours, surfaces and buttons change.
   ====================================================================== */
body[data-space]:not([data-page="home"]){
  /* site.css uses --ink as a dark surface on these pages; keep it dark there. */
  --ink:#070c1c; --ink-2:#0b1226; --ink-3:#111a33;
  --ink-card:rgba(16,24,48,.65);
  --mint-btn:#2ee6a6; --mint-soft:#7dffe0; --mint-deep:#2ee6a6; --on-mint:#062018;
  --paper:#f3f6ff; --paper-dim:#9aa6c4; --bear:#f07178;
  line-height:1.55;
}
body[data-space]:not([data-page="home"]) main,
body[data-space]:not([data-page="home"]) footer.site{position:relative;z-index:1}
body[data-space]:not([data-page="home"]) main{padding-top:84px}
body[data-space]:not([data-page="home"]) footer.site{max-width:var(--maxw);margin:clamp(48px,7vw,90px) auto 24px;padding:40px clamp(20px,3vw,36px) 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(6,10,24,.72)}
/* The planet replaces the old particle canvases (also keeps these pages light). */
body[data-space] canvas.particles{display:none}
/* Sections: transparent over the planet, headings readable */
body[data-space]:not([data-page="home"]) :is(.section,.page-hero){background:transparent;border-color:var(--line)}
body[data-space]:not([data-page="home"]) .dark{background:rgba(6,10,24,.45);color:var(--space-text);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body[data-space]:not([data-page="home"]) :is(h1,h2,h3,.sub,.lead,.label){text-shadow:0 2px 40px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
body[data-space]:not([data-page="home"]) :is(h1,h2) i,
body[data-space]:not([data-page="home"]) :is(h1,h2) em{background:linear-gradient(180deg,var(--accent-soft),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
body[data-space]:not([data-page="home"]) .label{color:var(--accent)}
body[data-space]:not([data-page="home"]) .muted{color:var(--muted)}
/* Glass surfaces */
body[data-space]:not([data-page="home"]) :is(.card,.band,.plan,.news-item,.tech-row,.stack,.principles,.founder,.cards,.vlist > div){backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body[data-space]:not([data-page="home"]) .card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius)}
body[data-space]:not([data-page="home"]) .card:hover{background:var(--glass-2);border-color:var(--line-strong)}
body[data-space]:not([data-page="home"]) .card.feature{background:radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb),.14), transparent 50%), var(--glass-2);border-color:rgba(var(--accent-rgb),.28)}
body[data-space]:not([data-page="home"]) .card-ico{background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.18);color:var(--accent)}
body[data-space]:not([data-page="home"]) .card-tag,
body[data-space]:not([data-page="home"]) .card-go{background:rgba(255,255,255,.06);color:var(--muted)}
body[data-space]:not([data-page="home"]) .card.feature .card-go{background:var(--accent);color:var(--accent-ink)}
body[data-space]:not([data-page="home"]) .band{background:var(--glass);border-color:var(--line)}
body[data-space]:not([data-page="home"]) .band-visual{background:rgba(4,6,15,.55)}
body[data-space]:not([data-page="home"]) .news-item{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
body[data-space]:not([data-page="home"]) .news-item:hover{background:var(--glass-2)}
/* Site buttons → the homepage's pill buttons */
body[data-space]:not([data-page="home"]) .btn-mint{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px -8px rgba(var(--accent-rgb),.55),inset 0 1px 0 rgba(255,255,255,.4)}
body[data-space]:not([data-page="home"]) :is(.btn-chip,.btn-dark,.btn-outline-light){color:var(--space-text);background:rgba(255,255,255,.04);border:1px solid var(--line-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-space]:not([data-page="home"]) :is(.btn-chip,.btn-dark,.btn-outline-light):hover{background:rgba(255,255,255,.09)}

/* ---------- Academy (own tokens and components) ---------- */
body.academy[data-space]{
  --a-bg:transparent; --a-surface:var(--glass); --a-chip:rgba(255,255,255,.05);
  --a-text:#f3f6ff; --a-muted:#9aa6c4;
  --a-accent:#2ee6a6; --a-accent-soft:#7dffe0; --a-on-accent:#062018;
  --a-line:rgba(150,175,230,.12); --a-line-strong:rgba(150,175,230,.22);
  --bull:#2ee6a6; --bear:#f07178;
}
body.academy[data-space] main > section{background:transparent}
body.academy[data-space] .alt{background:rgba(6,10,24,.38);border-color:var(--a-line)}
body.academy[data-space] #tradechain.alt{background:rgba(6,10,24,.55)}
body.academy[data-space] .route.main,
body.academy[data-space] .offer-card{background:radial-gradient(120% 120% at 0% 0%, rgba(46,230,166,.16), transparent 55%), var(--glass-2)}
body.academy[data-space] :is(.route,.offer-card,.week,.faq-item,.tc-card,.phase,.rule,.tc-stat,form){backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.academy[data-space] .acad-bar{background:rgba(6,10,24,.72);border-color:var(--a-line)}
body.academy[data-space] :is(input,select,textarea){background:rgba(8,12,26,.82);color:var(--a-text);border-color:var(--a-line-strong)}
body.academy[data-space] select option{color:#0a1d18}

/* Hero copy over the planet: the same top scrim as the homepage hero */
body[data-space]:not([data-page="home"]) .page-hero, body.academy[data-space] .hero{background:radial-gradient(120% 90% at 30% 0%, rgba(4,6,15,.88) 0%, rgba(4,6,15,.5) 50%, transparent 78%)}
body[data-space]:not([data-page="home"]) :is(.page-hero p, .page-hero .sub, .hero p){text-shadow:0 1px 22px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7)}
body[data-space]:not([data-page="home"]) .page-hero p.sub,
body.academy[data-space] .hero p{color:#d5dcf0;text-shadow:0 0 14px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9),0 0 30px rgba(4,6,15,.9)}
