/* ==========================================================================
   BATON BRAIN ($BBRAIN) — style.css
   Palette + fonts pulled from the source photo: deep space black, icy
   cyan/teal particle glow. Orbitron (display) + Chakra Petch (body) +
   IBM Plex Mono (data / CA / labels).
   ========================================================================== */

:root{
  --black:#030609;
  --navy:#071016;
  --panel:#0a151b;
  --teal-deep:#0c2633;
  --teal:#164a5c;
  --cyan:#56c4db;
  --cyan-bright:#96e8f5;
  --white-glow:#dffafd;
  --text:#d9eef2;
  --text-dim:#8fb2ba;
  --border:rgba(150,232,245,0.16);

  --font-display:'Orbitron', sans-serif;
  --font-body:'Chakra Petch', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --ease:cubic-bezier(.22,.9,.32,1);
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
::selection{background:var(--cyan);color:var(--black);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:10px;border:2px solid var(--black);}

h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:.02em;}

/* ---------------- utility ---------------- */
.section-inner{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.32em;
  color:var(--cyan-bright);
  text-transform:uppercase;
  margin:0 0 14px;
  opacity:.9;
}
.eyebrow.center{text-align:center;}
.section-title{font-size:clamp(28px,4.4vw,46px);color:var(--white-glow);text-shadow:0 0 28px rgba(86,196,219,.35);}
.section-title.center{text-align:center;margin-bottom:52px;}
.center{text-align:center;}

/* reveal-on-scroll base state */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:13.5px;
  padding:15px 26px;border-radius:10px;
  border:1px solid var(--border);
  white-space:nowrap;position:relative;transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-icon{width:18px;height:18px;fill:currentColor;flex:none;}
.btn-primary{
  background:linear-gradient(135deg, var(--cyan) 0%, #2f96b3 100%);
  color:#02181f;
  box-shadow:0 0 0 rgba(86,196,219,0), 0 10px 30px -8px rgba(86,196,219,.55);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(86,196,219,.75);}
.btn-ghost{
  background:rgba(150,232,245,.05);
  color:var(--cyan-bright);
}
.btn-ghost:hover{background:rgba(150,232,245,.12);transform:translateY(-3px);border-color:var(--cyan);}
.btn-large{padding:18px 30px;font-size:14.5px;}
.btn-small{padding:10px 18px;font-size:11.5px;}

.ca-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;font-family:var(--font-mono);text-transform:none;letter-spacing:0;}
.ca-caption{font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;}
.ca-value{font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cyan-bright);}
.copy-flag{font-size:10px;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:4px 8px;margin-left:4px;}
.btn-ghost.copied .copy-flag{color:var(--cyan-bright);border-color:var(--cyan);}

.pill-link{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  padding:9px 16px;border:1px solid var(--border);border-radius:999px;
  color:var(--text-dim);transition:all .25s var(--ease);
}
.pill-link:hover{color:var(--cyan-bright);border-color:var(--cyan);background:rgba(86,196,219,.08);}

/* ---------------- preloader ---------------- */
#preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.35;filter:saturate(1.1) brightness(.8);
  transform:scale(1.08);
  animation:preloaderDrift 6s ease-in-out infinite alternate;
}
@keyframes preloaderDrift{from{transform:scale(1.08) translate(0,0);}to{transform:scale(1.14) translate(-1%,-1%);}}
.preloader-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(3,6,9,.35) 0%, rgba(3,6,9,.96) 78%);}
.preloader-content{position:relative;z-index:2;text-align:center;padding:24px;}
.preloader-mark{width:100px;height:100px;object-fit:contain;margin:0 auto 18px;filter:drop-shadow(0 0 22px rgba(86,196,219,.65));animation:pulseGlow 2.2s ease-in-out infinite;}
@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(86,196,219,.5));}50%{filter:drop-shadow(0 0 30px rgba(86,196,219,.9));}}
.preloader-word{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,5vw,40px);letter-spacing:.14em;color:var(--white-glow);text-shadow:0 0 24px rgba(86,196,219,.6);}
.preloader-word span{color:var(--cyan);}
.preloader-status{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;color:var(--text-dim);margin:14px 0 18px;text-transform:uppercase;}
.dots{display:inline-block;animation:dotBlink 1.2s steps(4) infinite;}
@keyframes dotBlink{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}
.preloader-bar{width:min(320px,70vw);height:2px;background:rgba(150,232,245,.15);margin:0 auto;border-radius:2px;overflow:hidden;}
.preloader-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--cyan-bright));box-shadow:0 0 12px var(--cyan);}
.preloader-pct{font-family:var(--font-mono);font-size:12px;color:var(--cyan-bright);margin-top:10px;letter-spacing:.1em;}

/* ---------------- fx layers ---------------- */
#fx-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;}
.grain-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.05;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* ---------------- header ---------------- */
#siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:18px 0;transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
#siteHeader.scrolled{
  padding:10px 0;background:rgba(3,6,9,.78);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--border);
}
.header-inner{max-width:var(--container);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(86,196,219,.6));}
.brand-word{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;font-size:15px;color:var(--white-glow);}
.brand-word em{font-style:normal;color:var(--cyan);}

.main-nav{display:flex;gap:30px;}
.nav-link{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);position:relative;padding:4px 0;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--cyan);transition:width .3s var(--ease);}
.nav-link:hover{color:var(--cyan-bright);}
.nav-link:hover::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:12px;}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);}
.icon-btn svg{width:17px;height:17px;fill:var(--text-dim);transition:fill .25s var(--ease);}
.icon-btn:hover{border-color:var(--cyan);background:rgba(86,196,219,.1);}
.icon-btn:hover svg{fill:var(--cyan-bright);}

.nav-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;z-index:600;}
.nav-toggle span{width:18px;height:2px;background:var(--cyan-bright);display:block;transition:transform .3s var(--ease), opacity .3s var(--ease);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:0;z-index:450;background:rgba(3,6,9,.97);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-nav-link{font-family:var(--font-display);font-size:22px;letter-spacing:.06em;color:var(--white-glow);text-transform:uppercase;}
.mobile-menu-socials{display:flex;gap:14px;margin-top:8px;}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:120px 24px 80px;}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);
  will-change:transform;
}
.hero-vignette{position:absolute;inset:0;background:
  linear-gradient(100deg, rgba(3,6,9,.88) 0%, rgba(3,6,9,.62) 38%, rgba(3,6,9,.18) 62%, transparent 78%),
  radial-gradient(ellipse at center, transparent 30%, rgba(3,6,9,.55) 100%),
  linear-gradient(180deg, rgba(3,6,9,.15) 0%, rgba(3,6,9,.35) 60%, var(--black) 100%);}
.hero-content{position:relative;z-index:2;text-align:center;max-width:820px;}
.hero-title{margin:6px 0 18px;}
.tilt-3d{display:inline-block;font-size:clamp(46px,10vw,110px);font-weight:900;line-height:1;letter-spacing:.02em;color:var(--white-glow);text-shadow:0 0 40px rgba(86,196,219,.55), 0 0 90px rgba(86,196,219,.25);transform-style:preserve-3d;will-change:transform;}
.accent{color:var(--cyan);}
.hero-sub{font-size:clamp(15px,2vw,19px);color:var(--text-dim);max-width:520px;margin:0 auto 34px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:26px;}
.hero-social{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--text-dim);animation:scrollBounce 2.2s ease-in-out infinite;z-index:2;}
.scroll-cue svg{width:16px;height:16px;fill:var(--cyan);}
@keyframes scrollBounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------------- marquee ---------------- */
.marquee{position:relative;z-index:2;background:linear-gradient(90deg, var(--teal-deep), var(--navy));border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:14px 0;}
.marquee-track{display:flex;width:max-content;animation:marqueeScroll 32s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--cyan-bright);white-space:nowrap;text-transform:uppercase;opacity:.85;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------- generic sections ---------------- */
.section{position:relative;padding:120px 0;background-size:cover;background-position:center;background-attachment:scroll;overflow:hidden;}
.section::before{content:"";position:absolute;inset:0;background:rgba(3,6,9,.72);z-index:0;}
.section .section-inner{z-index:2;}

/* ---------------- lore ---------------- */
.lore-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:center;}
.lore-figure{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--border);background:var(--panel);will-change:transform;}
.lore-figure img{width:100%;display:block;}
.lore-figure-glow{position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(86,196,219,.25);pointer-events:none;}
.lore-copy p{color:var(--text);font-size:16.5px;max-width:520px;}
.lore-copy blockquote{
  margin:26px 0 0;padding:16px 20px;border-left:2px solid var(--cyan);
  font-family:var(--font-mono);font-style:normal;color:var(--cyan-bright);font-size:14px;letter-spacing:.04em;
  background:rgba(86,196,219,.06);border-radius:0 10px 10px 0;
}

/* ---------------- how to buy ---------------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:48px;}
.step-card{
  background:linear-gradient(160deg, rgba(10,21,27,.9), rgba(7,16,22,.75));
  border:1px solid var(--border);border-radius:18px;padding:30px 24px;
  will-change:transform;transition:border-color .3s var(--ease), background .3s var(--ease);
}
.step-card:hover{border-color:var(--cyan);background:linear-gradient(160deg, rgba(12,38,51,.95), rgba(7,16,22,.85));}
.step-num{font-family:var(--font-display);font-weight:800;font-size:32px;color:transparent;-webkit-text-stroke:1.4px var(--cyan);display:block;margin-bottom:14px;}
.step-card h3{font-size:17px;color:var(--white-glow);margin-bottom:10px;letter-spacing:.02em;}
.step-card p{font-size:14px;color:var(--text-dim);margin:0;}
.howtobuy-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* ---------------- chart ---------------- */
.chart-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:640px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--panel);margin-bottom:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.chart-frame iframe{position:absolute;inset:0;width:100%;height:100%;}
.chart-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse at center, rgba(12,38,51,.6), rgba(3,6,9,.95));font-family:var(--font-mono);color:var(--text-dim);font-size:13px;letter-spacing:.06em;}
.chart-frame.chart-loaded .chart-fallback{display:none;}
.chart-section .btn-ghost{display:flex;width:max-content;margin:0 auto;}

/* ---------------- roadmap ---------------- */
.timeline{position:relative;max-width:760px;margin:0 auto;padding-left:56px;}
.timeline-line{position:absolute;left:18px;top:6px;bottom:6px;width:4px;height:calc(100% - 12px);}
.timeline-line-bg{stroke:rgba(150,232,245,.15);stroke-width:4;}
.timeline-line-fg{stroke:var(--cyan);stroke-width:4;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px var(--cyan));transition:stroke-dashoffset .1s linear;}
.phase{position:relative;padding:0 0 54px;}
.phase:last-child{padding-bottom:0;}
.phase::before{content:"";position:absolute;left:-56px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--black);border:2px solid var(--cyan);box-shadow:0 0 14px var(--cyan);}
.phase-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--cyan-bright);display:block;margin-bottom:6px;}
.phase h3{font-size:22px;color:var(--white-glow);margin-bottom:10px;}
.phase p{color:var(--text-dim);font-size:14.5px;max-width:520px;margin:0;}

/* ---------------- relay points (footer CTA grid) ---------------- */
.relay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.relay-tile{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:30px 18px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(10,21,27,.85), rgba(7,16,22,.6));
  font-family:var(--font-display);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  will-change:transform;
}
.relay-tile svg{width:26px;height:26px;fill:var(--cyan);}
.relay-tile:hover{transform:translateY(-6px);border-color:var(--cyan);background:linear-gradient(160deg, rgba(12,38,51,.95), rgba(7,16,22,.8));}

/* ---------------- footer ---------------- */
.site-footer{position:relative;padding:50px 0 34px;background:var(--black);border-top:1px solid var(--border);}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 24px;text-align:center;}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;}
.footer-brand img{width:30px;height:30px;object-fit:contain;}
.footer-brand span{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;color:var(--white-glow);font-size:14px;}
.footer-brand em{font-style:normal;color:var(--cyan);}
.footer-brand small{font-family:var(--font-mono);color:var(--text-dim);margin-left:6px;font-weight:400;letter-spacing:.05em;}
.footer-disclaimer{font-size:12px;color:var(--text-dim);max-width:560px;margin:0 auto 14px;line-height:1.6;}
.footer-copy{font-family:var(--font-mono);font-size:11px;color:rgba(143,178,186,.6);letter-spacing:.06em;}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);
  background:var(--panel);border:1px solid var(--cyan);color:var(--cyan-bright);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;
  padding:12px 22px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease), transform .3s var(--ease);z-index:2000;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .main-nav{display:none;}
  .lore-grid{grid-template-columns:1fr;gap:40px;}
  .lore-figure{max-width:340px;margin:0 auto;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .relay-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .hero-bg, .preloader-bg{background-image:url('../images/hero-bg-mobile.jpg') !important;}
  .hero-vignette{background:
    linear-gradient(180deg, rgba(3,6,9,.55) 0%, rgba(3,6,9,.32) 30%, rgba(3,6,9,.7) 62%, var(--black) 100%),
    radial-gradient(ellipse at 50% 46%, transparent 8%, rgba(3,6,9,.5) 68%);}
  .hero-title, .hero-sub, .eyebrow{text-shadow:0 2px 18px rgba(3,6,9,.95), 0 0 40px rgba(3,6,9,.95);}
  .hero-sub{background:rgba(3,6,9,.38);border-radius:12px;padding:8px 14px;backdrop-filter:blur(2px);}
}
@media (max-width:640px){
  .nav-toggle{display:flex;}
  .section{padding:84px 0;}
  .steps-grid{grid-template-columns:1fr;}
  .relay-grid{grid-template-columns:1fr;}
  .hero{padding-top:110px;}
  .hero-ctas{flex-direction:column;width:100%;}
  .hero-ctas .btn{width:100%;}
  .btn-large{padding:16px 22px;}
  .header-actions .btn-small{display:none;}
  .timeline{padding-left:44px;}
  .phase::before{left:-44px;}
  .timeline-line{left:14px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}