/* ==========================================================================
   Oracle Reactor (ORD) - Tokenomics One Page
   ========================================================================== */

:root{
  --bg:#070d1b;
  --bg-2:#0a1224;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(122,170,255,.16);
  --line-2:rgba(122,170,255,.30);

  --brand:#2f8bff;
  --brand-2:#38d0ff;
  --brand-3:#7db4ff;

  /* sampled from the logo icon: pale cyan -> sky blue -> royal blue */
  --grad:linear-gradient(135deg,#bfe7f9 0%,#79bdf6 45%,#4b78fb 100%);
  --grad-hover:linear-gradient(135deg,#d3f0fd 0%,#8ccbf8 45%,#5f89ff 100%);
  --grad-shadow:rgba(75,120,251,.38);
  --grad-soft:linear-gradient(135deg,rgba(191,231,249,.16) 0%,rgba(75,120,251,.14) 100%);

  --text:#e9eefb;
  --muted:#93a4c4;
  --heading-font:'Space Grotesk',system-ui,sans-serif;
  --body-font:'Inter',system-ui,sans-serif;

  --radius:18px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}

*{ -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  font-size:15.5px;
  line-height:1.75;
  overflow-x:hidden;
  overflow-x:clip;   /* keeps overflow-y computed as visible so Bootstrap ScrollSpy works */
}

/* page level ambience */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(760px 520px at 12% -6%, rgba(47,139,255,.22), transparent 62%),
    radial-gradient(700px 520px at 92% 4%, rgba(56,208,255,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(47,139,255,.12), transparent 65%);
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(122,170,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,170,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{ font-family:var(--heading-font); font-weight:700; letter-spacing:-.02em; }
p{ color:var(--muted); margin-bottom:0; }
a{ text-decoration:none; transition:.25s; }
img{ max-width:100%; }
section{ position:relative; padding:64px 0; }

.text-grad{
  background:linear-gradient(120deg,#7db4ff 0%,#38d0ff 45%,#ffffff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.text-brand{ color:var(--brand-2); }
.text-muted-2{ color:var(--muted)!important; }

/* every other section sits on a slightly lighter band so the split is readable */
.sec-alt{
  background:
    radial-gradient(1000px 420px at 50% 0%,rgba(47,139,255,.075),transparent 72%),
    rgba(255,255,255,.028);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- shared bits ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--grad-soft);
  color:var(--brand-3);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.chip i{ font-size:13px; }

.sec-head{ max-width:680px; margin:0 auto 42px; text-align:center; }
.sec-head h2{ font-size:clamp(1.9rem,4vw,2.8rem); margin:16px 0 14px; }
.sec-head p{ font-size:15.5px; }

.card-x{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  height:100%;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s;
}
.card-x::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 220px at 50% -30%,rgba(47,139,255,.20),transparent 70%);
  opacity:0; transition:opacity .35s;
}
.card-x:hover{ transform:translateY(-8px); border-color:var(--line-2); background:var(--surface-2); }
.card-x:hover::before{ opacity:1; }
.card-x > *{ position:relative; z-index:1; }

.ic{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:20px;
  background:var(--grad-soft);
  border:1px solid var(--line-2);
  color:var(--brand-2); font-size:24px;
  box-shadow:inset 0 0 24px rgba(56,208,255,.14);
}

.btn{ font-weight:600; border-radius:999px; transition:.3s; }
.btn-brand{
  background:var(--grad); color:#04101f; border:0;
  padding:10px 28px; box-shadow:none;
}
.btn-brand:hover,
.btn-brand:focus-visible{
  background:var(--grad-hover); color:#04101f;
  transform:translateY(-2px); box-shadow:none;
}
.btn-ghost{
  border:1px solid var(--line-2); color:var(--text);
  padding:10px 28px; background:rgba(255,255,255,.02); box-shadow:none;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  color:#04101f; border-color:transparent; background:var(--grad);
  box-shadow:none;
}

/* ---------- page loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(700px 500px at 50% 40%,rgba(47,139,255,.16),transparent 70%),
    var(--bg);
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; }
.loader-box{ position:relative; display:grid; place-items:center; }
.loader-box img{ width:62px; animation:ldPulse 1.8s ease-in-out infinite; }
.loader-box .ring{
  position:absolute; width:116px; height:116px; border-radius:50%;
  border:2px solid rgba(122,170,255,.13);
  border-top-color:var(--brand-2); border-right-color:var(--brand);
  animation:ldSpin 1s linear infinite;
}
.loader-txt{
  margin-top:28px; font-family:var(--heading-font); font-weight:600;
  font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted);
  padding-left:.42em;
}
.loader-bar{
  width:170px; height:3px; border-radius:99px; margin-top:18px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:38%; border-radius:99px;
  background:var(--grad); box-shadow:0 0 14px var(--grad-shadow);
  animation:ldSlide 1.3s ease-in-out infinite;
}
@keyframes ldSpin{ to{ transform:rotate(360deg) } }
@keyframes ldPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.88); opacity:.72 } }
@keyframes ldSlide{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(300%) } }

/* ---------- navbar ---------- */
.navbar{
  padding:16px 0; transition:padding .35s;
  background:transparent;
}
/* above .offcanvas-backdrop (1040) so the nested menu panel is never dimmed */
.navbar.fixed-top{ z-index:1046; }

/* the blur lives on a pseudo element - backdrop-filter on .navbar itself would make it
   a containing block for fixed descendants and break the offcanvas menu */
.navbar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(7,13,27,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  opacity:0; transition:opacity .35s;
}
.navbar.scrolled{ padding:10px 0; }
.navbar.scrolled::before{ opacity:1; }
.navbar-brand img{ height:42px; }
.navbar .nav-link{
  color:var(--muted); font-size:14px; font-weight:500;
  padding:8px 14px!important; position:relative;
}
.navbar .nav-link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--grad); border-radius:2px; transform:scaleX(0); transition:transform .3s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#fff; }
.navbar .nav-link.active::after{ transform:scaleX(1); }
/* nine menu items have to fit the 960px container between lg and xl */
@media (min-width:992px) and (max-width:1199.98px){
  .navbar-brand img{ height:36px; }
  .navbar .nav-link{ padding:8px 9px!important; font-size:13.5px; }
  .navbar .nav-link::after{ left:9px; right:9px; }
  .navbar .btn-brand{ padding:10px 18px; font-size:14px; }
}

/* hamburger: fixed square so it stays centred against the logo */
.navbar-toggler{
  flex:0 0 auto; width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:12px;
  background:rgba(47,139,255,.10); color:var(--brand-2);
  font-size:22px; line-height:1; transition:.3s;
}
.navbar-toggler:hover{ background:var(--grad); color:#04101f; border-color:transparent; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler i{ display:block; line-height:1; }

/* ---------- mobile slide-in menu (offcanvas, opens from the right) ---------- */
.offcanvas{
  width:300px; max-width:86vw;
  color:var(--text);
  background:rgba(8,14,30,.98);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
}
.offcanvas-header{
  padding:18px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.oc-logo{ height:36px; }
.oc-close{
  flex:0 0 auto; width:38px; height:38px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:11px;
  background:rgba(255,255,255,.04); color:var(--brand-2);
  font-size:15px; transition:.3s;
}
.oc-close:hover{ background:var(--grad); color:#04101f; border-color:transparent; }
.offcanvas-backdrop.show{ opacity:.65; }

@media (max-width:991.98px){
  /* pinned to the viewport and full height, whatever the navbar is doing */
  #navMenu.offcanvas{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    height:100%; display:flex; flex-direction:column;
    background:#0a1224;
  }
  #navMenu .offcanvas-body{ flex:1 1 auto; overflow-y:auto; padding:20px; }
  #navMenu .navbar-nav{ width:100%; margin:0 0 20px!important; }
  #navMenu .nav-link{
    padding:12px 14px!important; border-radius:12px;
    border:1px solid transparent; font-size:15px;
  }
  #navMenu .nav-link:hover{ background:rgba(255,255,255,.04); }
  #navMenu .nav-link.active{
    color:#fff; background:var(--grad-soft); border-color:var(--line-2);
  }
  #navMenu .nav-link::after{ display:none; }
  #navMenu .btn-brand{ width:100%; }
}
@media (max-width:575.98px){
  .navbar-brand img{ height:34px; }
}

/* ---------- background video sections ---------- */
.sec-video{ position:relative; overflow:hidden; isolation:isolate; }
.sec-video > .container{ position:relative; z-index:2; }
.bg-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.bg-video video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto;
  object-fit:cover;
}
.bg-video::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 50% 45%,rgba(7, 13, 27, 0.201),rgba(7, 13, 27, 0.207) 75%),
    linear-gradient(180deg,var(--bg) 0%,rgba(7, 13, 27, 0.145) 26%,rgba(7, 13, 27, 0.2) 74%,var(--bg) 100%);
}
#shield .bg-video::after{
  background:
    radial-gradient(900px 420px at 50% 45%,rgba(7, 13, 27, 0.201),rgba(7, 13, 27, 0.207) 75%),
    linear-gradient(180deg,var(--bg) 0%,rgba(7, 13, 27, 0.145) 26%,rgba(7, 13, 27, 0.2) 74%,var(--bg) 100%);
}

/* glass card used on top of a video background */
.glass{
  position:relative; height:100%;
  padding:28px 24px; border-radius:var(--radius);
  border:1px solid var(--line-2);
  background:rgba(9,16,32,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s;
}
.glass:hover{ transform:translateY(-8px); border-color:var(--brand-2); background:rgba(13,24,48,.72); }
.glass h5{ font-size:1.08rem; margin-bottom:8px; }
.glass p{ font-size:14.5px; margin-bottom:0; }

/* ---------- hero ---------- */
.hero{ padding:150px 0 64px; }
.hero h1{ font-size:clamp(2.4rem,5.4vw,3.5rem); margin:0 0 20px; }
.hero .lead{ font-size:15px; }

.hero-visual{ position:relative; z-index:1; }
.hero-img{
  display:block; width:100%; max-width:550px; margin:0 auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(47,139,255,.28));
  animation:float 8s ease-in-out infinite;
}
.orb{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:-1;
  animation:float 9s ease-in-out infinite;
}
.orb-1{ width:200px; height:200px; background:rgba(47,139,255,.42); top:-20px; right:10px; }
.orb-2{ width:170px; height:170px; background:rgba(56,208,255,.28); bottom:-20px; left:10px; animation-delay:-4s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-26px)} }

.stat-strip{
  margin-top:60px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.stat-strip [class*="col-"]{ padding:26px 20px; border-right:1px solid var(--line); }
.stat-strip [class*="col-"]:last-child{ border-right:0; }
.stat-strip h3{ font-size:2.35rem; line-height:1.15; margin-bottom:4px; }
/* label only - must not catch the .count span that lives inside the h3 */
.stat-strip [class*="col-"] > span{
  display:block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.stat-strip .count{ font-size:inherit; letter-spacing:inherit; text-transform:none; color:inherit; }
@media (max-width:991.98px){
  .stat-strip [class*="col-"]:nth-child(2n){ border-right:0; }
  .stat-strip [class*="col-"]:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* ---------- tokenomics ---------- */
.token-coin{ position:relative; z-index:1; text-align:center; }
.token-coin img{
  max-width:380px; width:100%;
  filter:drop-shadow(0 26px 55px rgba(0,0,0,.5)) drop-shadow(0 0 50px rgba(47,139,255,.35));
  animation:float 8s ease-in-out infinite;
}
.token-coin::after{
  content:""; position:absolute; z-index:-1; inset:10% 12% auto 12%; height:72%;
  background:radial-gradient(circle,rgba(47,139,255,.42),transparent 70%); filter:blur(50px);
}

.meta-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin-bottom:12px; font-size:14px;
}
.meta-row span{ color:var(--muted); }
.meta-row b{ font-weight:600; color:var(--text); word-break:break-all; text-align:right; }
.row .meta-row{ margin-bottom:0; height:100%; }


/* ---------- about ---------- */
.about-visual{ position:relative; z-index:1; text-align:center; }
.about-visual img{
  max-width:540px; width:100%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation:float 9s ease-in-out infinite;
}
.about-visual::after{
  content:""; position:absolute; z-index:-1; inset:8% 8% auto 8%; height:78%;
  background:radial-gradient(circle,rgba(47,139,255,.40),transparent 70%); filter:blur(55px);
}

.vm{ margin-top:28px; display:grid; gap:16px; }
.vm-item{
  position:relative; overflow:hidden;
  padding:20px 22px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .35s, background .35s;
}
.vm-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad);
}
.vm-item:hover{ border-color:var(--line-2); background:var(--surface-2); }
.vm-tag{
  display:block; margin-bottom:8px;
  font-family:var(--heading-font); font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-2);
}
.vm-item p{ font-size:14.5px; }

/* ---------- protocol / architecture ---------- */
.stack-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:18px;
}
.stack-label{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.stack-flow{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-3);
}
.stack-flow i{ font-size:14px; animation:flowHint 2.2s ease-in-out infinite; }
@keyframes flowHint{
  0%,100%{ transform:translateX(-2px); opacity:.55 }
  50%{ transform:translateX(2px); opacity:1 }
}

/* ---------- the five layers, four to a row ---------- */
.stack{
  position:relative;
  display:grid; gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* the settlement path, threaded through the icon nodes of the first row */
.stack-beam{
  position:absolute; left:0; right:0; top:49px; height:2px; overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--line-2) 5%,rgba(56,208,255,.45) 50%,var(--line-2) 95%,transparent);
}
.stack-beam::after{
  content:""; position:absolute; top:-1px; width:16%; height:4px; border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--brand-2),transparent);
  box-shadow:0 0 16px rgba(56,208,255,.75);
  animation:beamRun 3.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes beamRun{ from{ left:-18% } to{ left:102% } }

.layer{
  position:relative; display:flex; flex-direction:column;
  padding:26px 22px 22px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
.stack .layer:hover{
  transform:translateY(-8px);
  border-color:var(--line-2);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
}

/* the layer number, kept out of the copy's way */
.l-idx{
  position:absolute; top:18px; right:20px;
  font-family:var(--heading-font); font-weight:700; font-size:11px; letter-spacing:.16em;
  color:var(--brand-3); opacity:.7;
  transition:color .35s, opacity .35s;
}
.stack .layer:hover .l-idx{ color:#fff; opacity:1; }

/* the icon box is the node the beam runs into, so it needs a solid backdrop */
.lnum{
  width:46px; height:46px; border-radius:14px; margin-bottom:16px;
  display:grid; place-items:center; font-size:20px;
  background:var(--grad-soft),#0a1326;
  border:1px solid var(--line-2); color:var(--brand-2);
  box-shadow:inset 0 0 20px rgba(56,208,255,.12);
}
.l-body{ flex:1 1 auto; }
.layer h6{ font-size:1rem; margin-bottom:6px; }
.layer p{ font-size:13.8px; margin:0; }

/* what the layer hands to the next one */
.l-carry{
  align-self:flex-start; margin-top:16px;
  display:inline-flex; align-items:center; gap:3px;
  padding:6px 12px; border-radius:999px;
  border:1px dashed rgba(122,170,255,.32); background:rgba(47,139,255,.07);
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-3); white-space:nowrap;
  transition:background .35s, color .35s, border-color .35s;
}
.l-carry i{ font-size:14px; }
.stack .layer:hover .l-carry{
  border-style:solid; border-color:var(--line-2);
  background:rgba(47,139,255,.16); color:#fff;
}

/* five layers in a four column grid: the last one settles across the row */
.stack .layer:last-child{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; gap:18px;
  background:linear-gradient(100deg,rgba(47,139,255,.11),rgba(255,255,255,.02) 62%);
}
.stack .layer:last-child .l-idx{ position:static; order:-1; opacity:.85; }
.stack .layer:last-child .lnum{ flex:0 0 auto; margin-bottom:0; }
.stack .layer:last-child .l-carry{ align-self:center; margin:0 0 0 auto; }

@media (max-width:991.98px){
  .stack{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .stack-beam{ display:none; }
}
@media (max-width:575.98px){
  .stack{ grid-template-columns:minmax(0,1fr); }
  .stack-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .stack .layer:last-child{ flex-direction:column; align-items:stretch; gap:0; }
  .stack .layer:last-child .lnum{ margin-bottom:16px; }
  .stack .layer:last-child .l-carry{ align-self:flex-start; margin:16px 0 0; }
}

/* ---------- the five principles, a numbered rail in two columns ---------- */
.obj{
  list-style:none; margin:0 auto; padding:0;
  max-width:1060px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px;
  border-top:1px solid var(--line);
}
.obj li{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px;
  padding:15px 8px 15px 0;
  border-bottom:1px solid var(--line);
  transition:background .35s ease;
}
/* the fifth row has no partner, so it runs the full width */
.obj li:last-child{ grid-column:1 / -1; }
.obj li:hover{ background:linear-gradient(90deg,rgba(47,139,255,.10),transparent 72%); }
.o-n{
  align-self:start; width:34px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line-2);
  color:var(--brand-2);
  font-family:var(--heading-font); font-weight:700; font-size:11.5px; letter-spacing:.06em;
  transition:background .35s, color .35s, border-color .35s;
}
.obj li:hover .o-n{ background:var(--grad); color:#04101f; border-color:transparent; }
.o-txt{ font-size:14.5px; color:var(--muted); }
.o-txt b{
  display:block; margin-bottom:2px;
  font-family:var(--heading-font); font-weight:600; font-size:14.5px; color:#fff;
}
@media (max-width:767.98px){
  .obj{ grid-template-columns:minmax(0,1fr); column-gap:0; }
}

/* sub-heading that splits a section */
.split-head{ text-align:center; max-width:640px; margin:56px auto 30px; }
.split-head h3{ font-size:clamp(1.35rem,2.6vw,1.75rem); margin-bottom:8px; }
.split-head p{ font-size:14.5px; }

/* ---------- the three separate stages, as one handoff ---------- */
.flow{
  display:grid; align-items:stretch; gap:8px;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr);
}
.flow-link{
  position:relative; display:grid; place-items:center;
  color:var(--brand-2); font-size:16px;
}
.flow-link::before{
  content:""; position:absolute; left:2px; right:2px; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 11px);
}
.flow-link i{
  position:relative; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; font-size:11px;
  background:#0a1326; border:1px solid var(--line-2);
  animation:linkNudge 2s ease-in-out infinite;
}
@keyframes linkNudge{
  0%,100%{ transform:translateX(-3px); opacity:.45 }
  50%{ transform:translateX(3px); opacity:1 }
}

.act{
  position:relative; height:100%; overflow:hidden;
  padding:30px 26px; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
.act::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.flow .act:hover{
  transform:translateY(-8px); border-color:var(--line-2);
  box-shadow:0 22px 48px rgba(0,0,0,.4);
}
.act:hover::before{ transform:scaleX(1); }
.act > *{ position:relative; z-index:1; }
.a-wm{
  position:absolute; top:-12px; right:16px; z-index:0;
  font-family:var(--heading-font); font-weight:700; font-size:72px; line-height:1;
  color:rgba(122,170,255,.06); pointer-events:none;
}
.a-ic{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:18px; font-size:20px;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--brand-2);
  box-shadow:inset 0 0 20px rgba(56,208,255,.12);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.act:hover .a-ic{ transform:translateY(-3px) rotate(-8deg) scale(1.06); }
.act .lbl{
  display:block; margin-bottom:10px;
  font-family:var(--heading-font); font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-2);
}
.act h5{ font-size:1.08rem; margin-bottom:10px; }
.act p{ font-size:14.5px; }

/* stacked: the connector turns into a vertical hop between the cards */
@media (max-width:991.98px){
  .flow{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .flow-link{ height:44px; }
  .flow-link::before{
    left:50%; right:auto; top:6px; bottom:6px; width:1px; height:auto;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 11px);
  }
  .flow-link i{ animation-name:linkNudgeV; }
}
@keyframes linkNudgeV{
  0%,100%{ transform:rotate(90deg) translateX(-3px); opacity:.45 }
  50%{ transform:rotate(90deg) translateX(3px); opacity:1 }
}

/* ---------- ecosystem pillars ---------- */
.pillar h5{ font-size:1.06rem; margin-bottom:14px; }
.pillar-list{
  list-style:none; padding:0; margin:0 0 16px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0;
}
.pillar-list li{
  display:flex; align-items:flex-start; gap:4px;
  font-size:14.5px; font-weight:500; color:var(--text); padding:5px 0;
}
.pillar-list i{ color:var(--brand-2); font-size:20px; flex:0 0 auto; margin-top:-1px; }
.pillar p{ font-size:14px; }

/* ---------- roadmap: alternating timeline ---------- */
.timeline{ position:relative; max-width:1040px; margin:0 auto; }
/* the spine */
.timeline::before{
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px;
  transform:translateX(-50%); border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--line-2) 6%,var(--brand) 50%,var(--line-2) 94%,transparent);
  opacity:.5;
}

.tl-item{ position:relative; width:50%; padding-right:52px; margin-bottom:34px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-item:nth-child(even){ margin-left:50%; padding-right:0; padding-left:52px; }

.tl-dot{
  position:absolute; top:26px; z-index:2;
  width:58px; height:34px; border-radius:99px;
  display:grid; place-items:center;
  background:var(--grad); color:#04101f;
  font-family:var(--heading-font); font-weight:700; font-size:14px; letter-spacing:.06em;
  box-shadow:0 0 0 6px var(--bg), 0 10px 26px var(--grad-shadow);
}
.tl-item:nth-child(odd) .tl-dot{ right:-29px; }
.tl-item:nth-child(even) .tl-dot{ left:-29px; }

.tl-card{
  position:relative; overflow:hidden;
  padding:26px 24px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s;
}
/* short arm reaching from the card to the spine */
.tl-card::after{
  content:""; position:absolute; top:41px; width:30px; height:1px; background:var(--line-2);
}
.tl-item:nth-child(odd) .tl-card::after{ right:-30px; }
.tl-item:nth-child(even) .tl-card::after{ left:-30px; }

.tl-card:hover{ transform:translateY(-6px); border-color:var(--line-2); background:var(--surface-2); }
.tl-card .wm{
  position:absolute; top:-14px; right:14px; z-index:0;
  font-family:var(--heading-font); font-weight:700; font-size:76px; line-height:1;
  color:rgba(122,170,255,.055); pointer-events:none;
}
.tl-card > *{ position:relative; z-index:1; }
.tl-card h5{ display:flex; align-items:center; gap:10px; font-size:1.1rem; margin-bottom:16px; }
.tl-card h5 i{ color:var(--brand-2); font-size:1.05rem; }
.tl-card p{ font-size:14px; }

@media (max-width:767.98px){
  .timeline::before{ left:17px; }
  .tl-item,
  .tl-item:nth-child(even){ width:100%; margin-left:0; padding:0 0 0 52px; margin-bottom:26px; }
  .tl-item:last-child{ margin-bottom:0; }
  .tl-item:nth-child(odd) .tl-dot,
  .tl-item:nth-child(even) .tl-dot{ left:-12px; top:22px; width:52px; height:30px; font-size:13px; }
  .tl-card::after{ display:none; }
  .tl-card{ padding:22px 20px; }
}

.rm-list{ list-style:none; padding:0; margin:0 0 16px; }
.rm-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; font-weight:500; color:var(--text);
  padding:9px 0; border-bottom:1px dashed rgba(122,170,255,.14);
}
.rm-list li:last-child{ border-bottom:0; }
.rm-list span{
  flex:0 0 auto; font-family:var(--heading-font); font-size:12px; font-weight:700;
  color:var(--brand-2); opacity:.8; padding-top:1px;
}


/* ---------- risk note ---------- */
.risk-note{
  display:flex; align-items:flex-start; gap:14px; text-align:left;
  max-width:660px; margin-left:auto; margin-right:auto;
  padding:18px 20px; border-radius:14px;
  border:1px solid rgba(255,176,102,.28);
  background:rgba(255,176,102,.07);
}
.risk-note i{ color:#ffb066; font-size:18px; margin-top:2px; flex:0 0 auto; }
.risk-note p{ font-size:13.5px; margin:0; line-height:1.65; }


/* ---------- lifecycle steps ---------- */
.steps{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.step{
  position:relative; display:flex; flex-direction:column;
  padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.016));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
/* one step past a bare :hover, so .reveal.in cannot cancel the lift */
.steps .step:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
.s-n{
  position:absolute; top:16px; right:18px;
  font-family:var(--heading-font); font-weight:700; font-size:11px; letter-spacing:.16em;
  color:var(--brand-3); opacity:.7;
  transition:color .35s, opacity .35s;
}
.steps .step:hover .s-n{ color:#fff; opacity:1; }
.s-ic{
  width:44px; height:44px; border-radius:13px; margin-bottom:14px;
  display:grid; place-items:center; font-size:19px;
  background:var(--grad-soft),#0a1326;
  border:1px solid var(--line-2); color:var(--brand-2);
  box-shadow:inset 0 0 20px rgba(56,208,255,.12);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.steps .step:hover .s-ic{ transform:translateY(-3px) rotate(-8deg) scale(1.06); }
.step h5{ font-size:1rem; margin-bottom:6px; padding-right:26px; }
.step p{ font-size:13.6px; margin:0; }

/* nine steps in a four column grid: the last one closes across the row */
.steps .step:last-child{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; gap:18px;
  background:linear-gradient(100deg,rgba(47,139,255,.11),rgba(255,255,255,.02) 62%);
}
.steps .step:last-child .s-n{ position:static; order:-1; opacity:.85; }
.steps .step:last-child .s-ic{ flex:0 0 auto; margin-bottom:0; }
.steps .step:last-child h5{ flex:0 0 auto; margin-bottom:0; padding-right:0; }
.steps .step:last-child p{ flex:1 1 auto; }

.steps-cta{ margin-top:34px; text-align:center; }

@media (max-width:991.98px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px){
  .steps{ grid-template-columns:minmax(0,1fr); }
  .steps .step:last-child{ flex-direction:column; align-items:stretch; gap:0; }
  .steps .step:last-child .s-n{ position:absolute; order:0; }
  .steps .step:last-child .s-ic{ margin-bottom:14px; }
  .steps .step:last-child h5{ margin-bottom:6px; padding-right:26px; }
}

/* these left columns are shorter than the content beside them, so they track the scroll on desktop */
@media (min-width:992px){
  .about-aside{ position:sticky; top:112px; align-self:flex-start; }
}

/* ---------- faq ---------- */
.faq-item{
  position:relative;
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface); margin-bottom:14px; overflow:hidden;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.faq-item:last-child{ margin-bottom:0; }
.faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); transform:scaleY(0); transform-origin:top; transition:transform .4s;
}
.faq-item.open{
  border-color:var(--line-2);
  background:linear-gradient(150deg,rgba(47,139,255,.13),rgba(255,255,255,.03));
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.faq-item.open::before{ transform:scaleY(1); }
.faq-item:hover{ border-color:var(--line-2); }

.faq-q{
  width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  background:transparent; border:0; color:var(--text);
  padding:22px 24px;
  font-family:var(--heading-font); font-weight:600; font-size:16.5px; line-height:1.45;
}
.faq-q:focus-visible{ outline:2px solid var(--brand-2); outline-offset:-2px; }
.faq-q .n{
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--brand-2); flex:0 0 auto; opacity:.85;
}
.faq-q .t{ flex:1 1 auto; }
.faq-q .pm{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:14px;
  border:1px solid var(--line-2); color:var(--brand-2);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background .35s, color .35s, border-color .35s;
}
.faq-q:not(.collapsed) .pm{
  background:var(--grad); color:#04101f; border-color:transparent; transform:rotate(135deg);
}
.faq-a{ padding:0 26px 24px 64px; color:var(--muted); font-size:15px; }
@media (max-width:575.98px){
  .faq-q{ padding:18px; gap:12px; font-size:15.5px; }
  .faq-a{ padding:0 18px 20px; }
}

/* ---------- cta ---------- */
.cta-box{
  border:1px solid var(--line-2); border-radius:28px; padding:60px 40px; text-align:center;
  background:
    radial-gradient(600px 300px at 50% 0%,rgba(47,139,255,.24),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:var(--shadow);
}
.cta-box h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:48px 0 24px; background:rgba(4,9,20,.6); }
.f-top{ text-align:center; max-width:900px; margin:0 auto; }
footer .f-logo{ height:46px; margin-bottom:22px; }
.socials{ display:flex; gap:12px; margin-top:26px; justify-content:center; }
.socials a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--muted); background:var(--surface);
}
.socials a:hover{ color:#04101f; background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.copyright{
  margin-top:46px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted); text-align:center;
}


/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .orb,.hero-img,.token-coin img{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   RESPONSIVE SCALE-DOWN
   ========================================================================== */

/* A g-5 row uses a 48px gutter, so its -24px side margins are wider than the
   12px container padding and push 12px past the viewport on small screens.
   Pulling the gutter back to 24px makes the row line up with the container. */
@media (max-width:991.98px){
  .row.g-5,
  .row.gx-5{ --bs-gutter-x:1.5rem; }
  .row.g-5{ --bs-gutter-y:2rem; }
}

/* ---- tablet ---- */
@media (max-width:991.98px){
  body{ font-size:15px; }
  section{ padding:56px 0; }

  .sec-head{ margin-bottom:34px; }
  .sec-head h2{ font-size:clamp(1.6rem,4.4vw,2.15rem); }
  .sec-head p{ font-size:14.5px; }

  .card-x,.glass{ padding:24px 20px; }
  .card-x h5,.glass h5,.act h5,.tl-card h5,.pillar h5{ font-size:1.02rem; }
  .card-x p,.glass p,.act p,.tl-card p{ font-size:14px; }

  .ic{ width:48px; height:48px; border-radius:14px; font-size:20px; margin-bottom:16px; }
  .stat-strip{ margin-top:44px; }
  .stat-strip h3{ font-size:1.95rem; }
  .layer{ padding:22px 20px 20px; }
  .split-head{ margin:44px auto 26px; }
  .about-visual img,.token-coin img{ max-width:420px; }
}

/* ---- large phone / small tablet ---- */
@media (max-width:767.98px){
  section{ padding:48px 0; }
  .hero{ padding:105px 0 48px; }
  .hero h1{ font-size:clamp(1.9rem,7vw,2.5rem); }
  .hero .lead{ font-size:15.5px; }
  .hero-img{ max-width:370px; }
  .cta-box{ padding:44px 22px; }
}

/* ---- phone ---- */
@media (max-width:575.98px){
  body{ font-size:14.5px; line-height:1.7; }
  section{ padding:40px 0; }

  .hero{ padding:96px 0 40px; }
  .hero h1{ font-size:1.72rem; line-height:1.2; }
  .hero .lead{ font-size:14.5px; }
  .hero-img{ max-width:250px; }
  .orb-1{ width:150px; height:150px; }
  .orb-2{ width:130px; height:130px; }

  .chip{ font-size:10.5px; padding:6px 13px; letter-spacing:.13em; }
  .sec-head{ margin-bottom:26px; }
  .sec-head h2{ font-size:1.5rem; }
  .sec-head p{ font-size:14px; }

  .btn-brand,.btn-ghost{ padding:10px 22px; font-size:14px; }

  .card-x,.glass,.act,.tl-card,.vm-item,.step{ padding:20px 18px 18px; }
  .ic{ width:44px; height:44px; border-radius:12px; font-size:18px; margin-bottom:14px; }

  .stat-strip{ margin-top:34px; }
  .stat-strip [class*="col-"]{ padding:18px 10px; }
  .stat-strip h3{ font-size:1.55rem; }
  .stat-strip [class*="col-"] > span{ font-size:10.5px; letter-spacing:.1em; }

  .about-visual img,.token-coin img{ max-width:300px; }
  .meta-row{ padding:12px 15px; font-size:13.5px; }
  .obj li{ padding:13px 4px 13px 0; gap:11px; grid-template-columns:32px minmax(0,1fr); }
  .o-n{ width:30px; height:24px; font-size:10.5px; }
  .o-txt,.o-txt b{ font-size:14px; }
  .layer{ padding:20px 18px 18px; }
  .lnum{ width:42px; height:42px; border-radius:12px; font-size:18px; margin-bottom:14px; }
  .layer h6{ font-size:.95rem; }
  .layer p{ font-size:13.5px; }
  .split-head{ margin:36px auto 22px; }
  .split-head h3{ font-size:1.25rem; }

  .rm-list li,.pillar-list li{ font-size:13.5px; }
  .tl-card .wm{ font-size:60px; }


  .cta-box{ padding:34px 18px; }
  .cta-box h2{ font-size:1.45rem; }
  .risk-note{ padding:15px 16px; gap:11px; }
  .risk-note p{ font-size:12.5px; }

  footer{ padding:40px 0 20px; }
  footer .f-logo{ height:38px; }
  .copyright{ margin-top:32px; font-size:12.5px; }
}


/* ==========================================================================
   MOTION LAYER
   Entrance choreography, cursor light, scroll-linked progress.
   Everything here degrades to a static page when JS is off or when the user
   asks for reduced motion (see the opt-out block at the bottom).
   ========================================================================== */

/* ---------- scroll progress ---------- */
#scrollBar{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:1060; pointer-events:none;
}
#scrollBar span{
  display:block; height:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad); box-shadow:0 0 16px var(--grad-shadow);
}

/* ---------- hero: the headline lands word by word ---------- */
.hero h1 .w{ display:inline-block; }
/* a transformed child breaks the parent's background-clip:text, so each word
   inside the gradient span carries the gradient itself while it animates -
   main.js puts the original markup back once the cascade is done */
.text-grad .w{
  background:inherit;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
body.ready .hero h1 .w{
  animation:wordIn .85s cubic-bezier(.2,.75,.25,1) both;
  animation-delay:calc(var(--i,0) * 65ms);
}
@keyframes wordIn{
  from{ opacity:0; transform:translateY(26px) rotate(2.5deg); filter:blur(6px) }
  to{ opacity:1; transform:none; filter:blur(0) }
}

/* the rest of the hero follows the headline in */
body.js .hero .lead,
body.js .hero-cta,
body.js .hero-visual{ opacity:0; }
body.ready .hero .lead{ animation:riseIn .9s .45s cubic-bezier(.2,.75,.25,1) both; }
body.ready .hero-cta{ animation:riseIn .9s .62s cubic-bezier(.2,.75,.25,1) both; }
/* opacity only - the transform belongs to the pointer parallax below */
body.ready .hero-visual{ animation:fadeIn 1.2s .3s ease both; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* the hero art drifts a few pixels against the pointer */
.hero-visual{
  transform:translate3d(calc(var(--px,0) * 1px),calc(var(--py,0) * 1px),0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}

/* embers rising behind the hero copy, above the video */
.hero-sparks{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.hero-sparks i{
  position:absolute; bottom:-8px; width:3px; height:3px; border-radius:50%;
  background:var(--brand-2); box-shadow:0 0 12px rgba(56,208,255,.85);
  opacity:0;
  animation-name:sparkUp; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes sparkUp{
  0%{ transform:translate3d(0,0,0) scale(.5); opacity:0 }
  12%{ opacity:.85 }
  85%{ opacity:.4 }
  100%{ transform:translate3d(16px,-86vh,0) scale(1.15); opacity:0 }
}

/* ---------- the gradient text breathes ---------- */
.text-grad{
  background-size:220% 100%;
  animation:gradPan 9s ease-in-out infinite;
}
@keyframes gradPan{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* ---------- cursor light on every card surface ---------- */
.has-glow{ position:relative; }
.has-glow > .glow{
  position:absolute; inset:0; z-index:0; border-radius:inherit;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(56,208,255,.17),transparent 62%);
}
.has-glow:hover > .glow{ opacity:1; }
/* the accent bars have to stay on top of the light */
.faq-item::before,
.act::before,
.vm-item::before{ z-index:2; }

/* ---------- icon micro-motion ---------- */
.ic,.lnum,.s-ic,.a-ic,.socials a i{ transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.card-x:hover .ic,
.glass:hover .ic{ transform:translateY(-3px) rotate(-8deg) scale(1.06); }
.layer:hover .lnum{ transform:rotate(-8deg) scale(1.08); }
.socials a:hover i{ transform:scale(1.15); }

/* ---------- buttons: a light sweeps across on hover ---------- */
.btn-brand{ position:relative; overflow:hidden; isolation:isolate; }
.btn-brand::after{
  content:""; position:absolute; top:0; bottom:0; left:-160%; width:55%;
  transform:skewX(-22deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}
.btn-brand:hover::after{ animation:shine .85s ease; }
@keyframes shine{ to{ left:160% } }
.btn-brand i,.btn-ghost i{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.btn-brand:hover i{ transform:translate(3px,-3px); }

/* ---------- the roadmap spine fills as you scroll ---------- */
.tl-fill{
  position:absolute; left:50%; top:8px; width:2px; height:calc(100% - 16px);
  transform:translateX(-50%) scaleY(var(--p,0)); transform-origin:50% 0;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  box-shadow:0 0 18px rgba(56,208,255,.5);
}
@media (max-width:767.98px){ .tl-fill{ left:17px; } }
.tl-item .tl-dot{
  opacity:0; transform:scale(.5);
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,1.6,.4,1) .1s;
}
.tl-item.in .tl-dot{ opacity:1; transform:none; }

/* ---------- directional reveals ---------- */
.reveal-l{ transform:translateX(-36px); }
.reveal-r{ transform:translateX(36px); }
.reveal-s{ transform:scale(.94); }
.reveal.in{ transform:none; }

/* ---------- mobile menu items slide in one after another ---------- */
#navMenu.show .nav-item,
#navMenu.show .offcanvas-body > .btn{
  animation:navIn .5s cubic-bezier(.2,.75,.25,1) both;
  animation-delay:calc(var(--i,0) * 40ms + 60ms);
}
@keyframes navIn{ from{ opacity:0; transform:translateX(26px) } to{ opacity:1; transform:none } }

/* ---------- back to top, with a read-progress ring ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:1040;
  width:48px; height:48px; padding:0; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--brand-2);
  background:rgba(9,16,32,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.9);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.3,1), visibility .35s, background .3s, color .3s, border-color .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ color:#04101f; background:var(--grad); border-color:transparent; }
.to-top i{ position:relative; z-index:1; font-size:18px; line-height:1; }
.to-top svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.to-top circle{ fill:none; stroke-width:2; }
.to-top .t{ stroke:rgba(122,170,255,.18); }
.to-top .p{ stroke:var(--brand-2); stroke-dasharray:126; stroke-dashoffset:126; stroke-linecap:round; }
@media (max-width:575.98px){
  .to-top{ right:14px; bottom:14px; width:42px; height:42px; }
  .to-top i{ font-size:16px; }
}

/* ---------- opt out ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-sparks,
  .to-top .p,
  .has-glow > .glow{ display:none; }
  .text-grad{ animation:none; }
  .hero-visual{ transform:none; transition:none; }
  body.js .hero .lead,
  body.js .hero-cta,
  body.js .hero-visual{ opacity:1; }
  body.ready .hero h1 .w,
  body.ready .hero .lead,
  body.ready .hero-cta,
  body.ready .hero-visual,
  .btn-brand:hover::after,
  #navMenu.show .nav-item,
  #navMenu.show .offcanvas-body > .btn{ animation:none; }
  .reveal-l,.reveal-r,.reveal-s{ transform:none; }
  .tl-item .tl-dot{ opacity:1; transform:none; transition:none; }
}