/* ==========================================================================
   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:
    linear-gradient(90deg,rgba(7, 13, 27, 0.48) 0%,rgba(7, 13, 27, 0.6) 45%,rgba(7, 13, 27, 0.59) 100%), linear-gradient(180deg,var(--bg) 0%,rgba(7,13,27,.35) 30%,rgba(7, 13, 27, 0.46) 70%,#070d1ba6 100%)
}
#shield .bg-video::after{
  background:
    radial-gradient(900px 420px at 50% 45%,rgba(7,13,27,.55),rgba(7,13,27,.88) 75%),
    linear-gradient(180deg,var(--bg) 0%,rgba(7,13,27,.4) 26%,rgba(7,13,27,.4) 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 ---------- */
.obj-title{ font-size:1.5rem; margin-bottom:14px; }

.obj{ list-style:none; padding:0; margin:28px 0 0; counter-reset:o; }
.obj li{
  position:relative; padding-left:48px; margin-bottom:20px;
  font-size:15px; color:var(--muted);
}
.obj li:last-child{ margin-bottom:0; }
.obj li strong{ color:#fff; font-weight:600; }
.obj li::before{
  counter-increment:o; content:"0" counter(o);
  position:absolute; left:0; top:2px;
  width:32px; height:32px; border-radius:10px;
  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:12px;
}

.stack-label{
  display:block; margin-bottom:16px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.stack{ position:relative; }
.layer{
  position:relative; display:flex; gap:18px; align-items:flex-start;
  padding:22px 24px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s;
}
.layer:last-child{ margin-bottom:0; }
.layer:hover{ transform:translateX(8px); border-color:var(--line-2); background:var(--surface-2); }
.layer:not(:last-child)::after{
  content:""; position:absolute; left:47px; bottom:-17px; width:1px; height:17px;
  background:linear-gradient(180deg,var(--line-2),transparent);
}
.lnum{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; 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);
}
.layer h6{ font-size:1rem; margin-bottom:5px; }
.layer p{ font-size:14px; margin: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 actions */
.act{
  position:relative; height:100%; overflow:hidden;
  padding:28px 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;
}
.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);
}
.act:hover{ transform:translateY(-8px); border-color:var(--line-2); background:var(--surface-2); }
.act:hover::before{ transform:scaleX(1); }
.act .lbl{
  display:block; margin-bottom:12px;
  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; }

@media (max-width:575.98px){
  .layer{ padding:20px; gap:14px; }
  .layer:not(:last-child)::after{ left:41px; }
}

/* ---------- 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; }


/* ---------- steps ---------- */
.step{ position:relative; padding-left:78px; margin-bottom:38px; }
.step:last-child{ margin-bottom:0; }
.step .num{
  position:absolute; left:0; top:0;
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--heading-font); font-weight:700; font-size:19px; color:#04101f;
  background:var(--grad); box-shadow:0 10px 26px var(--grad-shadow);
}
.step::after{
  content:""; position:absolute; left:26px; top:62px; bottom:-32px; width:1px;
  background:linear-gradient(180deg,var(--line-2),transparent);
}
.step:last-child::after{ display:none; }
.step h5{ margin-bottom:8px; font-size:1.12rem; }

/* these left columns are shorter than the content beside them, so they track the scroll on desktop */
@media (min-width:992px){
  .about-aside,
  .steps-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; }
  .obj-title{ font-size:1.3rem; }
  .layer{ padding: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; }
  .step{ padding-left:64px; }
  .step .num{ width:46px; height:46px; font-size:17px; }
  .step::after{ left:22px; top:54px; }
}

/* ---- 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{ padding:20px 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-left:42px; margin-bottom:16px; font-size:14.5px; }
  .obj li::before{ width:28px; height:28px; border-radius:9px; font-size:11px; }
  .layer{ padding:18px 16px; gap:14px; }
  .lnum{ width:40px; height:40px; border-radius:12px; font-size:17px; }
  .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; }

  .step{ padding-left:56px; }
  .step h5{ font-size:1rem; }
  .step .num{ width:40px; height:40px; font-size:15px; border-radius:13px; }
  .step::after{ left:19px; top:48px; }

  .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; }
}