/* ================= TOKENS ================= */
html.preload, html.preload *, html.preload *::before, html.preload *::after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

:root{
  --ink:#060A08; --moss:#0C1511; --moss-2:#101B15; --line:rgba(74,245,101,.14);
  --line-soft:rgba(238,244,239,.08);
  --text:#EEF4EF; --text-2:#A9BFAF; --text-3:#83988A;
  --green:#4AF565; --green-deep:#0E8A45; --green-dim:rgba(74,245,101,.55);
  --magenta:#B32DB7;
  --glass:rgba(6,10,8,.72);
  --card:#0C1511; --card-hover:#101F17;
  --shadow:0 24px 64px rgba(0,0,0,.5);
  --grad-hero:radial-gradient(1200px 600px at 70% -10%, rgba(74,245,101,.10), transparent 60%);
  --btn-ink:#04170B;
}
[data-theme="light"]{
  --ink:#F5F8F4; --moss:#FFFFFF; --moss-2:#EDF3EC; --line:rgba(14,110,58,.18);
  --line-soft:rgba(12,20,16,.10);
  --text:#0C1410; --text-2:#37493E; --text-3:#54675B;
  --green:#0E8A45; --green-deep:#0E8A45; --green-dim:rgba(14,138,69,.5);
  --magenta:#9C1FA0;
  --glass:rgba(245,248,244,.8);
  --card:#FFFFFF; --card-hover:#F2F8F1;
  --shadow:0 20px 48px rgba(16,42,26,.10);
  --grad-hero:radial-gradient(1200px 600px at 70% -10%, rgba(14,138,69,.08), transparent 60%);
  --btn-ink:#F5FFF8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif; background:var(--ink); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
::selection{background:var(--green); color:var(--btn-ink)}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{
  font-family:'Archivo',system-ui,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--green);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--green)}
h1,h2,h3{font-family:'Clash Display','Archivo',sans-serif; font-weight:600; letter-spacing:-.01em}
.section{padding:112px 0}
.section-head{max-width:720px; margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4.4vw,48px); line-height:1.08; margin:18px 0 16px}
.section-head p{color:var(--text-2); font-size:17px; line-height:1.65}
.hairline{height:1px; background:var(--line-soft)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:2px}

/* ================= HEADER ================= */
header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  transition:background .35s ease;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:36px}
.brand{display:flex; align-items:center; gap:12px; font-family:'Clash Display',sans-serif; font-weight:600; font-size:20px; letter-spacing:.04em; margin-right:36px; flex-shrink:0}
.brand img{height:48px; width:auto; max-height:54px; object-fit:contain; transition:transform .2s ease}
.brand img:hover{transform:scale(1.03)}
.brand .idot{color:var(--magenta)}
.nav-links{display:flex; gap:32px; align-items:center}
.nav-links a{font-size:14px; font-weight:500; color:var(--text-2); transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:14px}
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Archivo',sans-serif;
  font-size:14px; font-weight:600; padding:12px 22px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; transition:all .2s ease;
}
.btn-solid{background:var(--green); color:var(--btn-ink)}
.btn-solid:hover{transform:translateY(-1px); box-shadow:0 8px 24px var(--green-dim)}
.btn-ghost{border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.theme-toggle{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line-soft);
  background:transparent; color:var(--text-2); cursor:pointer; display:grid; place-items:center;
  transition:all .2s;
}
.theme-toggle:hover{border-color:var(--green); color:var(--green)}
.burger{display:none; background:none; border:none; color:var(--text); font-size:26px; cursor:pointer}

/* ================= HERO ================= */
.hero{position:relative; padding:180px 0 0; background:var(--grad-hero); overflow:hidden}
#gridCanvas{position:absolute; inset:0; width:100%; height:100%; opacity:.9}
.hero-inner{position:relative; z-index:2; max-width:900px}
.hero .eyebrow{margin-bottom:22px}
.hero h1{
  font-size:clamp(44px,7.2vw,92px); line-height:.98; letter-spacing:-.02em; font-weight:600;
}
.hero h1 .accent{color:var(--green)}
.hero h1 .dotword{position:relative}
.hero p.lede{margin:26px 0 38px; font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--text-2); max-width:620px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:88px}
.btn-lg{padding:16px 30px; font-size:15px; border-radius:12px}

/* ticker */
.ticker{
  position:relative; z-index:2; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:var(--glass); backdrop-filter:blur(10px); overflow:hidden;
}
.ticker-track{display:flex; gap:64px; padding:18px 0; width:max-content; animation:tick 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tick-item{display:flex; align-items:baseline; gap:10px; white-space:nowrap}
.tick-item .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; color:var(--text-3); text-transform:uppercase}
.tick-item .v{font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:var(--green)}
.tick-item .live{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ================= CLARITY CARDS ================= */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:34px 30px;
  transition:all .25s ease; position:relative; overflow:hidden;
}
.card:hover{background:var(--card-hover); border-color:var(--line); transform:translateY(-3px)}
.card .glyph{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(135deg, rgba(74,245,101,.16), transparent); border:1px solid var(--line);
  color:var(--green); font-size:20px;
}
.card h3{font-size:21px; margin-bottom:12px}
.card p{color:var(--text-2); font-size:15px; line-height:1.65}

/* ================= PROOF / PHOTOS MOSAIC ================= */
.mosaic{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:dense; gap:16px; margin-top:28px;
}
.mosaic .tile{
  border-radius:18px; overflow:hidden; position:relative; border:1px solid var(--line-soft);
  height:240px; background:var(--card); transition:all .35s ease;
}
.mosaic .tile.featured{
  grid-column:span 2; grid-row:span 2; height:496px;
}
.mosaic .tile.wide{
  grid-column:span 2; height:240px;
}
.mosaic .tile img, .mosaic .tile video{
  width:100%; height:100%; object-fit:cover; transition:transform .6s ease; filter:saturate(.95);
  display:block;
}
.mosaic .tile:hover{
  border-color:var(--green-dim); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.mosaic .tile:hover img, .mosaic .tile:hover video{
  transform:scale(1.04);
}
.tile .tag{
  position:absolute; left:14px; bottom:14px; z-index:3; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(4,12,8,.78); color:#EAF6EC; border:1px solid rgba(74,245,101,.35);
  padding:7px 12px; border-radius:8px; backdrop-filter:blur(8px);
}
.logo-marquee{margin-top:64px; overflow:hidden; position:relative}
.logo-marquee::before,.logo-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.logo-marquee::before{left:0; background:linear-gradient(90deg,var(--moss-2),transparent)}
.logo-marquee::after{right:0; background:linear-gradient(-90deg,var(--moss-2),transparent)}
.logo-track{display:flex; gap:72px; align-items:center; width:max-content; animation:tick 38s linear infinite; padding:8px 0}
.logo-track img{height:34px; width:auto; opacity:.6; filter:grayscale(1) brightness(1.6); transition:all .25s}
[data-theme="light"] .logo-track img{filter:grayscale(1) brightness(.4)}
.logo-track img:hover{opacity:1; filter:none}

/* ================= VERIFICATION ROWS ================= */
.v-rows{border-top:1px solid var(--line-soft)}
.v-row{
  display:grid; grid-template-columns:64px 1.1fr 1.6fr auto; gap:28px; align-items:center;
  padding:34px 8px; border-bottom:1px solid var(--line-soft); transition:background .2s;
}
.v-row:hover{background:var(--card)}
.v-row .idx{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-3)}
.v-row h3{font-size:20px}
.v-row p{color:var(--text-2); font-size:15px; line-height:1.6}
.v-row .stamp{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em;
  color:var(--green); border:1px solid var(--line); padding:7px 12px; border-radius:999px;
  white-space:nowrap;
}

/* ================= AUDIENCE ================= */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.portal{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:30px 26px;
  display:flex; flex-direction:column; min-height:280px; transition:all .25s; position:relative;
}
.portal:hover{border-color:var(--line); transform:translateY(-4px); box-shadow:var(--shadow)}
.portal .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; color:var(--text-3); text-transform:uppercase; margin-bottom:16px}
.portal h3{font-size:20px; margin-bottom:10px}
.portal p{color:var(--text-2); font-size:14px; line-height:1.6; flex:1}
.portal .go{color:var(--green); font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; margin-top:20px}
.portal .go::after{content:"→"; transition:transform .2s}
.portal:hover .go::after{transform:translateX(4px)}

/* ================= NODE TEASER ================= */
.node-band{
  border-radius:24px; border:1px solid var(--line); overflow:hidden; position:relative;
  background:
    radial-gradient(700px 340px at 85% 20%, rgba(74,245,101,.12), transparent 60%),
    var(--card);
  display:grid; grid-template-columns:1.2fr 1fr; align-items:center;
}
.node-band .txt{padding:64px 56px}
.node-band h2{font-size:clamp(28px,3.6vw,40px); line-height:1.1; margin:16px 0 14px}
.node-band p{color:var(--text-2); font-size:16px; line-height:1.65; max-width:480px; margin-bottom:30px}
.hexfield{height:100%; min-height:340px; position:relative}
#hexCanvas{position:absolute; inset:0; width:100%; height:100%}

/* ================= FAQ ================= */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer; list-style:none; padding:26px 4px; font-family:'Clash Display',sans-serif;
  font-size:18px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--green); font-size:22px; transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--text-2); font-size:15px; line-height:1.7; padding:0 4px 26px; max-width:680px}

/* ================= FOOTER ================= */
.cta-final{text-align:center; padding:120px 24px}
.cta-final h2{font-size:clamp(34px,5vw,58px); line-height:1.05; margin-bottom:18px}
.cta-final p{color:var(--text-2); font-size:17px; margin-bottom:36px}
footer{border-top:1px solid var(--line-soft); padding:56px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px}
.foot-grid h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px}
.foot-grid a{display:block; color:var(--text-2); font-size:14px; padding:6px 0; transition:color .2s}
.foot-grid a:hover{color:var(--green)}
.foot-base{display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); color:var(--text-3); font-size:13px; flex-wrap:wrap; gap:12px}

/* ================= REVEAL ================= */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .ticker-track,.logo-track{animation:none}
  *{scroll-behavior:auto}
}

@media (max-width:1100px){
  .mosaic{ grid-template-columns:repeat(3, 1fr); }
  .mosaic .tile.featured{ grid-column:span 2; grid-row:span 2; height:460px; }
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
  .grid-3{grid-template-columns:1fr}
  .mosaic{ grid-template-columns:repeat(2, 1fr); }
  .mosaic .tile.featured{ grid-column:span 2; grid-row:span 1; height:240px; }
  .mosaic .tile.wide{ grid-column:span 2; }
  .v-row{grid-template-columns:1fr; gap:10px; padding:26px 4px}
  .v-row .stamp{justify-self:start}
  .section{padding:80px 0}
  .hero{padding-top:140px}
  .node-band .txt{padding:44px 28px}
}
@media (max-width:480px){
  .mosaic{ grid-template-columns:1fr; }
  .mosaic .tile, .mosaic .tile.featured, .mosaic .tile.wide{ grid-column:span 1; grid-row:span 1; height:220px; }
}
.mobile-menu{
  display:none; position:fixed; inset:68px 0 0 0; z-index:49; background:var(--ink);
  padding:32px 24px; flex-direction:column; gap:4px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:16px 4px; font-size:18px; font-family:'Clash Display',sans-serif; border-bottom:1px solid var(--line-soft)}

/* numbers section (home) */
.num-hero{
  display:grid; grid-template-columns:1.15fr 1fr; gap:0; border:1px solid var(--line);
  border-radius:22px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--green) 9%, var(--card)), var(--card));
}
.num-hero .nh-left{padding:48px 44px}
.num-hero .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--green); text-transform:uppercase}
.num-hero .big{font-family:'JetBrains Mono',monospace; font-size:clamp(56px,7vw,96px); font-weight:600; color:var(--green); line-height:1; margin:22px 0 18px}
.num-hero p{color:var(--text-2); font-size:15px; line-height:1.65; max-width:380px}
.nh-logos{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:28px; align-content:center; border-left:1px solid var(--line-soft)}
.nh-logos .cellA{
  background:var(--moss-2); border:1px solid var(--line-soft); border-radius:12px;
  display:grid; place-items:center; padding:14px 10px; transition:all .2s; min-height:64px;
}
.nh-logos .cellA:hover{transform:translateY(-3px); border-color:var(--line)}
.nh-logos img{height:24px; width:auto; opacity:.7; filter:grayscale(1) brightness(1.7)}
[data-theme="light"] .nh-logos img{filter:grayscale(1) brightness(.4)}
.nh-logos .cellA:hover img{opacity:1; filter:none}
.nh-logos .more{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3)}
.num-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.num-card{background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:30px 28px}
.num-card .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; color:var(--text-3); text-transform:uppercase}
.num-card .big{font-family:'JetBrains Mono',monospace; font-size:clamp(38px,4.4vw,56px); font-weight:600; margin:14px 0 10px}
.num-card p{color:var(--text-2); font-size:14px; line-height:1.6}
@media (max-width:1000px){
  .num-hero{grid-template-columns:1fr}
  .nh-logos{border-left:none; border-top:1px solid var(--line-soft)}
  .num-grid{grid-template-columns:1fr}
}

/* interactive layer stack (tech) */
.stack-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start}
.stack{display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; padding-right:150px}
.layer{
  position:relative; border:1px solid var(--line); border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, color-mix(in srgb, var(--green) 14%, var(--card)), color-mix(in srgb, var(--green) 4%, var(--card)));
  display:grid; place-items:center; height:78px; width:100%;
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:17px;
  color:var(--text); text-shadow:0 1px 8px rgba(0,0,0,.35);
  transition:all .28s ease; outline-offset:3px;
}
[data-theme="light"] .layer{color:#0C1410; text-shadow:none}
.layer .guide{color:var(--text-2)}
.layer:nth-child(1){max-width:40%}
.layer:nth-child(2){max-width:60%}
.layer:nth-child(3){max-width:80%}
.layer:nth-child(4){max-width:100%}
.layer .guide{
  position:absolute; left:calc(100% + 16px); top:50%; transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; color:var(--text-3);
  text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:10px;
}
.layer .guide::before{content:""; width:34px; border-top:1px dashed var(--line-soft)}
.layer:hover, .layer.active{
  transform:translateY(-4px);
  border-color:var(--green);
  box-shadow:0 14px 40px color-mix(in srgb, var(--green) 22%, transparent);
}
.layer.dim{opacity:.38}
.stack-detail{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:34px 32px;
  position:sticky; top:100px; min-height:220px;
}
.stack-detail .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--green); text-transform:uppercase}
.stack-detail h3{font-size:24px; margin:12px 0 10px}
.stack-detail p{color:var(--text-2); font-size:15px; line-height:1.7}
@media (max-width:1000px){
  .stack-wrap{grid-template-columns:1fr}
  .stack{padding-right:0}
  .layer .guide{display:none}
  .stack-detail{position:static}
}

/* ================= BRAND CHROME (header/footer, both themes) ================= */
.brand-logo{height:58px; width:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 0 12px rgba(57,255,106,.35)); transition:filter .3s}
[data-theme="light"] .brand-logo{filter:brightness(.58) saturate(1.35) drop-shadow(0 1px 6px rgba(14,110,58,.25))}
@media (max-width:760px){ .brand-logo{height:44px} }

.nav-pill{display:flex; align-items:center; gap:26px; margin:0 auto}
.nav-pill>a,.nav-pill>.dd>button{
  position:relative; font-family:'Archivo',sans-serif; font-size:13.5px; font-weight:600;
  letter-spacing:.02em; color:var(--text-2); padding:8px 2px; background:none; border:none;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:color .2s;
}
.nav-pill>a::after,.nav-pill>.dd>button::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--green),color-mix(in srgb,var(--green) 30%,transparent));
  transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-pill>a:hover,.nav-pill>.dd>button:hover{color:var(--text)}
.nav-pill>a:hover::after,.nav-pill>.dd>button:hover::after{transform:scaleX(1)}
.nav-pill>a.active,.nav-pill>.dd>button.active{color:var(--text)}
.nav-pill>a.active::after,.nav-pill>.dd>button.active::after{transform:scaleX(1)}
.nav-pill .badge-dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite}
.dd{position:relative}
.dd .caret{width:10px; height:10px; transition:transform .25s; display:inline-block}
.dd .caret svg{display:block; width:10px; height:10px; stroke:currentColor}
.dd.open .caret{transform:rotate(180deg)}
.dd-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; display:none; z-index:60;
}
.dd-menu-inner{
  min-width:250px; background:var(--card); border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:var(--shadow); padding:10px; display:block;
}
.dd.open .dd-menu{display:block}
.dd-menu .dd-head{
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.22em; color:var(--text-3);
  text-transform:uppercase; padding:8px 12px 10px;
}
.dd-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:13.5px; font-weight:500; color:var(--text-2);
  padding:10px 12px; border-radius:10px; transition:all .15s;
}
.dd-menu a::after{content:"→"; opacity:0; transform:translateX(-4px); transition:all .15s; color:var(--green); font-size:12px}
.dd-menu a:hover{color:var(--text); background:var(--card-hover)}
.dd-menu a:hover::after{opacity:1; transform:none}
.dd-menu a.active{color:var(--green)}
.lang-dd .dd-menu{min-width:150px}
.lang-btn{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em;
  border:none; background:transparent; color:var(--text-2);
  padding:8px 6px; cursor:pointer; transition:color .2s;
  display:inline-flex; align-items:center; gap:7px;
}
.lang-btn:hover{color:var(--green)}
.wallet-btn{
  position:relative; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.12em;
  background:transparent; color:var(--green); border:1px solid var(--green); border-radius:8px;
  padding:11px 18px; cursor:pointer; transition:all .25s; white-space:nowrap; overflow:hidden;
}
.wallet-btn::before{
  content:""; position:absolute; inset:0; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.7,.2,1); z-index:-1;
}
.wallet-btn:hover{color:var(--btn-ink)}
.wallet-btn:hover::before{transform:scaleX(1)}
.wallet-btn:disabled{opacity:.6; cursor:wait}
.lang-note{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:var(--card); border:1px solid var(--line); color:var(--text);
  font-family:'JetBrains Mono',monospace; font-size:11px; padding:12px 18px; border-radius:12px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:all .3s; z-index:120;
}
.lang-note.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* footer */
.site-foot{position:relative; border-top:1px solid var(--line-soft); padding:72px 0 44px; overflow:hidden}
.site-foot::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(1100px,100%); height:240px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--green) 16%, transparent) 0%, transparent 70%);
  opacity:.5;
}
.foot-grid2{display:grid; grid-template-columns:2fr 1.1fr 1.1fr; gap:48px; margin-bottom:52px; position:relative; z-index:1}
.foot-brand p{color:var(--text-2); font-size:14px; line-height:1.7; max-width:380px; margin:18px 0 20px}
.socials{display:flex; flex-wrap:wrap; gap:10px}
.socials a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-soft);
  display:grid; place-items:center; color:var(--text-2); transition:all .2s;
}
.socials a:hover{color:var(--green); border-color:var(--green); transform:translateY(-2px)}
.socials svg{width:16px; height:16px; fill:currentColor}
.foot-col h4{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green); margin-bottom:18px;
}
.foot-col a{display:block; color:var(--text-2); font-size:14px; padding:6px 0; transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-col a.doc{font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; color:var(--green)}
.foot-col a.doc:hover{text-decoration:underline}
.foot-bottom{
  position:relative; z-index:1; padding-top:28px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-3);
}
.foot-bottom .fb-links{display:flex; gap:24px}
.foot-bottom a{color:var(--text-3); transition:color .2s}
.foot-bottom a:hover{color:var(--text-2)}
@media (max-width:900px){ .foot-grid2{grid-template-columns:1fr} .nav-pill{display:none} }

/* ================= RTL (Arabic) ================= */
[dir="rtl"] body,body.rtl-active{direction:rtl}
[dir="rtl"] .eyebrow::before{margin-left:10px; margin-right:0}
[dir="rtl"] .nav-pill{flex-direction:row-reverse}
[dir="rtl"] .foot-grid2,[dir="rtl"] .foot-bottom{direction:rtl}
[dir="rtl"] .lr,[dir="rtl"] .tier ul li,[dir="rtl"] .inv ul li,[dir="rtl"] .asset .lr{padding-left:0; padding-right:22px}
[dir="rtl"] .lr::before,[dir="rtl"] .tier ul li::before,[dir="rtl"] .inv ul li::before,[dir="rtl"] .asset .lr::before{left:auto; right:2px}
[dir="rtl"] .bespoke,[dir="rtl"] .earn-note,[dir="rtl"] .rquote,[dir="rtl"] .lead-quote,[dir="rtl"] .rules{
  border-left:none; border-right:2px solid currentColor; padding-left:0; padding-right:24px;
}
[dir="rtl"] .rules{border-right-color:#ffb020}
[dir="rtl"] .proc div+div{border-left:none; border-right:1px solid var(--line-soft); padding-right:26px; padding-left:0}
[dir="rtl"] .cmp-head div:last-child,[dir="rtl"] .cmp-row div:last-child{border-left:none; border-right:1px solid var(--line-soft)}
[dir="rtl"] .layer .guide{left:auto; right:calc(100% + 16px)}
[dir="rtl"] .stp .big{right:auto; left:14px}
[dir="rtl"] .modal .x{right:auto; left:18px}
.sf-tag, .scene-frame .sf-tag { display: none !important; }
[dir="rtl"] .tile .tag,[dir="rtl"] .scene-frame .sf-tag{left:auto; right:14px}
[dir="rtl"] .mono,[dir="rtl"] .price,[dir="rtl"] .metric,[dir="rtl"] .big,[dir="rtl"] .v{direction:ltr; unicode-bidi:embed}

/* ================= INFRA DOSSIER ROWS (home "what is") ================= */
.infra{display:flex; flex-direction:column; border-top:1px solid var(--line-soft)}
.irow{
  position:relative; text-align:left; background:none; border:none; border-bottom:1px solid var(--line-soft);
  cursor:pointer; padding:0; color:var(--text); font-family:'Archivo',sans-serif; overflow:hidden;
}
.irow .ir-head{
  display:grid; grid-template-columns:70px 1fr auto; align-items:baseline; gap:20px;
  padding:30px 8px; transition:padding .4s cubic-bezier(.25,.8,.25,1);
}
.irow .ir-num{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em; color:var(--text-3); transition:color .3s}
.irow h3{
  font-family:'Clash Display',sans-serif; font-size:clamp(22px,3vw,34px); font-weight:600;
  letter-spacing:-.01em; color:var(--text-2); transition:color .3s, transform .4s;
}
.irow .ir-stat{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; color:var(--text-3); transition:color .3s}
.irow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--green);
  transform:scaleY(0); transform-origin:top; transition:transform .4s cubic-bezier(.25,.8,.25,1);
}
.irow:hover h3{color:var(--text)}
.irow.active::before{transform:scaleY(1)}
.irow.active .ir-num,.irow.active .ir-stat{color:var(--green)}
.irow.active h3{color:var(--text); transform:translateX(6px)}
.irow.active .ir-head{padding-left:22px}
.ir-body{
  display:grid; grid-template-columns:1fr 300px; gap:34px; align-items:center;
  max-height:0; opacity:0; overflow:hidden; padding:0 8px 0 92px;
  transition:max-height .55s cubic-bezier(.25,.8,.25,1), opacity .4s .1s, padding .4s;
}
.irow.active .ir-body{max-height:240px; opacity:1; padding:2px 8px 32px 112px}
.ir-body p{color:var(--text-2); font-size:15.5px; line-height:1.72; max-width:560px}
.ir-canvas{width:100%; height:130px; border-radius:14px; border:1px solid var(--line-soft); background:var(--moss-2)}
@media (max-width:900px){
  .irow .ir-head{grid-template-columns:44px 1fr; gap:12px}
  .irow .ir-stat{display:none}
  .ir-body,.irow.active .ir-body{grid-template-columns:1fr; padding-left:52px}
  .irow.active .ir-body{max-height:420px}
}
  .xcard.active .xbody{max-height:280px}
}

/* ================= STORY STEPPER (nodes participation, institutions process) ================= */
.stepper{border:1px solid var(--line-soft); border-radius:20px; background:var(--card); overflow:hidden}
.stepper-bars{display:grid; grid-auto-flow:column; gap:8px; padding:18px 24px 0}
.stepper-bars .sb{
  height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; cursor:pointer; position:relative;
}
.stepper-bars .sb i{display:block; height:100%; width:0%; background:var(--green); border-radius:99px}
.stepper-bars .sb.done i{width:100%}
.stepper-stage{display:grid; grid-template-columns:120px 1fr auto; gap:28px; align-items:center; padding:36px 30px 40px; min-height:190px}
.stepper-stage .snum{
  font-family:'Clash Display',sans-serif; font-size:72px; font-weight:700; line-height:1;
  color:color-mix(in srgb, var(--green) 26%, transparent); user-select:none; text-align:center;
}
.stepper-stage h3{font-size:23px; margin-bottom:10px}
.stepper-stage p{color:var(--text-2); font-size:15.5px; line-height:1.7; max-width:560px}
.stepper-stage .stamp{justify-self:end; align-self:start}
.stepper-nav{display:flex; justify-content:space-between; align-items:center; padding:0 24px 18px}
.stepper-nav .arrows{display:flex; gap:8px}
.stepper-nav button{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-soft); background:none;
  color:var(--text-2); cursor:pointer; font-size:15px; transition:all .2s;
}
.stepper-nav button:hover{border-color:var(--green); color:var(--green)}
.stepper-nav .scount{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; color:var(--text-3)}
[dir="rtl"] .stepper-stage .stamp{justify-self:start}
@media (max-width:760px){
  .stepper-stage{grid-template-columns:1fr; gap:14px; padding:28px 22px 32px}
  .stepper-stage .snum{text-align:left; font-size:52px}
  .stepper-stage .stamp{justify-self:start}
}

/* ================= SOD TOKENOMICS (nodes) ================= */
.sod-wrap{display:grid; grid-template-columns:1fr 1.1fr; gap:20px; align-items:stretch}
.sod-chart{
  position:relative; border:1px solid var(--line-soft); border-radius:20px; background:var(--card);
  display:grid; place-items:center; min-height:400px; padding:26px;
}
#sodDonut{max-width:340px; width:100%; aspect-ratio:1; cursor:pointer}
.sod-center{
  position:absolute; text-align:center; pointer-events:none;
}
.sod-center .t{font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:600; color:var(--green)}
.sod-center .s{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; color:var(--text-3); text-transform:uppercase; margin-top:4px}
.sod-legend{display:flex; flex-direction:column; gap:8px}
.sod-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  border:1px solid var(--line-soft); border-radius:14px; background:var(--card);
  padding:14px 18px; cursor:pointer; transition:all .2s; text-align:left; font-family:'Archivo',sans-serif; color:var(--text);
}
.sod-row .sw{width:11px; height:11px; border-radius:3px; background:var(--sw); flex:none; box-shadow:0 0 8px color-mix(in srgb, var(--sw) 55%, transparent)}
.sod-row .nm{font-weight:600; font-size:14.5px}
.sod-row .qt{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3)}
.sod-row .pc{font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; color:var(--sw)}
.sod-row.active,.sod-row:hover{border-color:color-mix(in srgb, var(--sw) 55%, transparent); background:var(--card-hover)}
.sod-detail{
  grid-column:1 / -1; border:1px solid var(--line-soft); border-radius:16px; background:var(--moss-2);
  padding:20px 24px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
}
.sod-detail p{color:var(--text-2); font-size:14px; line-height:1.6}
.sod-detail .stamp{white-space:nowrap}
@media (max-width:1000px){ .sod-wrap{grid-template-columns:1fr} .sod-detail{grid-template-columns:1fr} }

/* ================= AI ASSISTANT (volt mascot + chat) ================= */
#sdAiLauncher{
  position:fixed; right:28px; bottom:28px; z-index:130;
  width:130px; height:130px; border:none; background:none; cursor:pointer; padding:0;
  filter:drop-shadow(0 14px 36px rgba(0,255,136,.3));
  perspective:1000px;
}
.sd-ai-mascot-3d{
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d;
  animation:mascot3DFloat 4s ease-in-out infinite;
}
@keyframes mascot3DFloat{
  0%,100%{ transform: translateY(0px) rotateY(-10deg) rotateX(6deg) scale(1); filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
  50%{ transform: translateY(-14px) rotateY(12deg) rotateX(-6deg) scale(1.06); filter:drop-shadow(0 22px 40px rgba(0,255,136,.4)); }
}
#sdAiLauncher:hover .sd-ai-mascot-3d{
  transform: translateY(-16px) rotateY(22deg) scale(1.12);
  transition: transform .3s cubic-bezier(.2,1.4,.4,1);
}
#sdAiMascotImg{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.sd-ai-ring{
  position:absolute; inset:6px; border-radius:50%; pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--green) 65%, transparent);
  box-shadow:0 0 15px color-mix(in srgb, var(--green) 40%, transparent);
  animation:aiPulse 2.6s ease-out infinite;
}
@keyframes aiPulse{0%{transform:scale(.9); opacity:.9}70%{transform:scale(1.25); opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .sd-ai-ring{animation:none; opacity:.4} }

#sdAiPanel{
  position:fixed; right:24px; bottom:164px; z-index:129;
  width:min(400px, calc(100vw - 32px)); height:min(580px, calc(100vh - 180px));
  background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .28s, transform .28s cubic-bezier(.2,.7,.2,1);
}
#sdAiPanel.open{opacity:1; transform:none; pointer-events:auto}
body.ai-panel-open #sdAiLauncher, #sdAiPanel.open ~ #sdAiLauncher {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.6) translateY(30px) !important;
}
.sd-ai-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line-soft); background:var(--moss-2);
}
.sd-ai-head img{width:48px; height:48px; object-fit:contain}
.sd-ai-head .t{font-family:'Clash Display',sans-serif; font-weight:600; font-size:14.5px}
.sd-ai-head .s{font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em; color:var(--text-3); display:flex; align-items:center; gap:6px; margin-top:3px}
.sd-ai-head .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite}
.sd-ai-head .x{
  margin-left:auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft);
  background:none; color:var(--text-2); cursor:pointer; font-family:'JetBrains Mono',monospace;
}
.sd-ai-head .x:hover{color:var(--text); border-color:var(--line)}
.sd-ai-msgs{flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:14px}
.sd-ai-msg{max-width:86%; display:flex; flex-direction:column; gap:4px}
.sd-ai-msg.user{align-self:flex-end; align-items:flex-end}
.sd-ai-msg .bub{
  padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.6; color:var(--text);
  background:var(--moss-2); border:1px solid var(--line-soft); white-space:pre-wrap; word-break:break-word;
}
.sd-ai-msg.user .bub{background:color-mix(in srgb, var(--green) 14%, transparent); border-color:color-mix(in srgb, var(--green) 30%, transparent)}
.sd-ai-msg .bub.thinking{color:var(--text-3); font-style:italic}
.sd-ai-msg .tm{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-3)}
.sd-ai-sugs{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px}
.sd-ai-sugs button{
  font-family:'Archivo',sans-serif; font-size:12px; color:var(--text-2);
  background:var(--moss-2); border:1px solid var(--line-soft); border-radius:999px;
  padding:8px 13px; cursor:pointer; transition:all .2s; text-align:left;
}
.sd-ai-sugs button:hover{color:var(--green); border-color:var(--green)}
.sd-ai-input{display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--line-soft)}
.sd-ai-input input{
  flex:1; background:var(--moss-2); border:1px solid var(--line-soft); border-radius:12px;
  padding:12px 14px; color:var(--text); font-family:'Archivo',sans-serif; font-size:13.5px; outline:none;
}
.sd-ai-input input:focus{border-color:var(--green)}
.sd-ai-input button{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.12em;
  background:var(--green); color:var(--btn-ink); border:none; border-radius:12px; padding:0 20px; cursor:pointer;
}
.sd-ai-input button:hover{filter:brightness(1.08)}
[dir="rtl"] #sdAiLauncher{right:auto; left:24px}
[dir="rtl"] #sdAiPanel{right:auto; left:24px}
@media (max-width: 640px) {
  #sdAiLauncher {
    width: 84px; height: 84px; right: 12px; bottom: 12px;
  }
  #sdAiPanel {
    position: fixed; inset: auto 8px 8px 8px; width: calc(100vw - 16px);
    height: min(440px, calc(100dvh - 70px)); max-height: 82dvh;
    border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.75);
    z-index: 129; transition: opacity .25s ease, transform .25s ease, height .2s ease;
  }
  #sdAiPanel:focus-within {
    height: min(340px, calc(100dvh - 10px));
    bottom: 8px;
  }
  .sd-ai-head { padding: 12px 14px; }
  .sd-ai-head img { width: 36px; height: 36px; }
  .sd-ai-msgs { padding: 12px; gap: 10px; flex: 1 1 auto; min-height: 100px; }
  .sd-ai-sugs { padding: 0 12px 8px; gap: 6px; }
  .sd-ai-sugs button { padding: 6px 10px; font-size: 11px; }
  .sd-ai-input {
    padding: 10px 12px; background: var(--card); flex-shrink: 0;
    position: sticky; bottom: 0; z-index: 10;
  }
  .sd-ai-input input { padding: 10px 12px; font-size: 14px; }
}

/* ================= GCC NETWORK BAND (home) ================= */
.gccband{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.gccband img{display:block; width:100%; height:auto}
.gccband canvas{display:none !important}
.gccband .cap{
  position:absolute; left:32px; right:auto; bottom:30px; max-width:min(520px, 85%); text-align:left;
  padding-left:18px; padding-right:0; border-left:2px solid var(--green); border-right:none;
  background:rgba(4,23,11,0.75); backdrop-filter:blur(8px); border-radius:0 12px 12px 0; padding:12px 18px;
}
.gccband .cap p{
  font-family:'Clash Display',sans-serif; font-weight:600; font-size:clamp(16px,2.2vw,24px);
  line-height:1.35; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.65);
}
[dir="rtl"] .gccband .cap{right:auto; left:34px; text-align:left; padding-right:0; padding-left:20px; border-right:none; border-left:2px solid rgba(255,255,255,.85)}
.gcc-intro{max-width:720px; margin:0 0 32px 0; text-align:left}
.gcc-intro p{color:var(--text-2); font-size:16px; line-height:1.75; text-align:left}
.gcc-intro p b{color:var(--text); font-weight:600}

/* ================= MOBILE & RESPONSIVE FIXES ================= */
@media (max-width: 900px) {
  .nav-pill { display: none !important; }
  .burger {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-soft);
    background: var(--moss-2); font-size: 22px; cursor: pointer; color: var(--text);
    transition: all .2s ease; flex-shrink: 0;
  }
  .burger:hover { border-color: var(--green); color: var(--green); }
  .theme-toggle {
    display: flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-soft);
    background: var(--moss-2); color: var(--text); cursor: pointer; flex-shrink: 0;
  }
  .wallet-btn { display: none !important; }

  /* Mobile menu drawer */
  .mobile-menu {
    position: fixed; top: 64px; left: 0; right: 0; background: var(--card);
    border-bottom: 1px solid var(--line); padding: 20px 24px;
    display: flex; flex-direction: column; gap: 8px; z-index: 99;
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  }
  .mobile-menu.open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .mobile-menu a {
    font-size: 15px; font-weight: 600; color: var(--text); padding: 10px 0;
    border-bottom: 1px solid var(--line-soft); text-decoration: none; display: block;
  }
  .mobile-menu a:hover { color: var(--green); }
}

@media (max-width: 768px) {
  header .nav { height: 64px; gap: 12px; padding: 0 16px; }
  .brand { margin-right: 0; gap: 8px; }
  .brand img { height: 32px !important; max-height: 34px !important; }

  /* One region image & caption fix */
  .gccband {
    display: flex; flex-direction: column;
  }
  .gccband .cap {
    position: relative; inset: auto; max-width: 100%; width: 100%;
    margin-top: 0; border-left: none; border-top: 2px solid var(--green);
    border-radius: 0 0 24px 24px; padding: 16px 20px; background: var(--moss-2);
  }
  .gccband .cap p {
    font-size: 14px; line-height: 1.5; text-shadow: none; color: var(--text); margin: 0;
  }
}

@media (max-width: 640px) {
  /* Hero CTA buttons even corners fix */
  .hero-ctas, .nhero-ctas {
    display: flex; flex-direction: column; width: 100%; gap: 12px; align-items: stretch;
  }
  .hero-ctas .btn, .nhero-ctas .btn, .btn-lg {
    width: 100%; justify-content: center; border-radius: 12px !important;
    padding: 14px 20px; font-size: 15px; text-align: center; box-sizing: border-box;
    margin: 0;
  }
}


/* ================= SIGNAL PANELS (portal heroes, replaces audience-3d) ================= */
.scene-frame{background:var(--moss-2) !important}
.sig-canvas{position:absolute; inset:0; width:100%; height:100%}
.sig-foot{
  position:absolute; left:14px; right:14px; bottom:12px; display:flex; justify-content:space-between; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em; color:var(--text-3); z-index:2;
  pointer-events:none;
}
.sig-foot b{color:var(--green); font-weight:600}

/* ================= CHAINFLOW (sequential interactive pipeline) ================= */
.chainflow{display:flex; align-items:stretch}
.cf-stage{
  flex:1; min-width:0; padding:24px 18px 20px; position:relative; cursor:pointer;
  opacity:.42; transition:opacity .45s;
}
.cf-stage::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--green),transparent); transform:scaleX(0);
  transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.cf-stage.active{opacity:1}
.cf-stage.active::before{transform:scaleX(1)}
.cf-stage .cf-num{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.24em; color:var(--text-3)}
.cf-stage.active .cf-num{color:var(--green)}
.cf-stage h3{font-size:18.5px; margin:10px 0 12px}
.cf-viz{width:100%; height:92px; display:block; margin-bottom:12px}
.cf-stage p{color:var(--text-2); font-size:13.5px; line-height:1.62}
.cf-stage .stamp{
  display:inline-block; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:8.5px;
  letter-spacing:.18em; color:var(--text-3); border:1px solid var(--line-soft); border-radius:4px; padding:4px 9px;
}
.cf-stage.active .stamp{color:var(--green); border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.cf-arrow{
  flex:none; width:54px; display:flex; align-items:center; justify-content:center; position:relative;
  margin-top:38px; align-self:flex-start; color:var(--text-3); transition:color .3s;
}
.cf-arrow.active, .cf-arrow.filling, .cf-arrow.filled{color:var(--green)}
.cf-arrow .arr-icon{display:flex; align-items:center; justify-content:center}
.cf-arrow .arr-desk{display:block; width:44px; height:16px}
.cf-arrow .arr-mob{display:none; width:16px; height:32px}

@media (max-width:920px){
  .chainflow{flex-direction:column; gap:0}
  .cf-stage{
    background:var(--card); border:1px solid var(--line-soft); border-radius:18px;
    padding:22px 18px 20px; opacity:.65; transition:all .35s ease; position:relative;
  }
  .cf-stage::before{display:none !important}
  .cf-stage.active{
    opacity:1; border-color:var(--green-dim);
    box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 16px rgba(74,245,101,.06);
  }
  .cf-arrow{
    width:100%; height:36px; margin:12px 0; align-self:center; display:flex;
    align-items:center; justify-content:center;
  }
  .cf-arrow .arr-desk{display:none}
  .cf-arrow .arr-mob{display:block; width:16px; height:32px; filter:drop-shadow(0 0 6px var(--green-dim))}
}

/* ===== hero powered-by strip ===== */
.powered{
  display:flex; align-items:stretch; gap:18px; margin-top:30px; max-width:560px;
  padding-left:18px; border-left:2px solid var(--green); text-align:left;
}
.powered:hover .pw-l{color:var(--green)}
.powered:hover .pw-l .aw{transform:translate(2px,-2px)}
.pw-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.pw-eyebrow{font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.24em; color:var(--green); text-transform:uppercase}
.pw-k{font-family:'Clash Display',sans-serif; font-weight:600; font-size:17px; letter-spacing:.01em; color:var(--text)}
.pw-s{font-family:'Archivo',sans-serif; font-size:12.5px; color:var(--text-2); line-height:1.5}
.pw-l{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--text-3); margin-top:7px; display:inline-flex; gap:6px; align-items:center; transition:color .2s}
.pw-l .aw{display:inline-block; transition:transform .2s}
@media (max-width:640px){ .powered{max-width:100%} }

/* ===== operating -> digital bridge ===== */
.bridge{display:grid; grid-template-columns:1fr 130px 1fr; gap:0; align-items:stretch; margin-top:8px}
.br-col{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px;
  padding:24px 22px; display:flex; flex-direction:column; gap:9px;
}
#brLeft{border-top-right-radius:0; border-bottom-right-radius:0}
#brRight{border-top-left-radius:0; border-bottom-left-radius:0; border-left:0}
#brLeft{border-right:0}
.br-head{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.br-head h3{font-family:'Clash Display',sans-serif; font-size:20px; font-weight:600; margin:0}
.br-stamp{
  align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.2em;
  border:1px solid var(--line); color:var(--text-2); border-radius:4px; padding:3px 8px;
}
.br-stamp.g{border-color:var(--green); color:var(--green)}
.br-sub{font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.16em; color:var(--text-3)}
.br-item{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  font-family:'Archivo',sans-serif; font-size:14px; font-weight:500; color:var(--text);
  background:var(--moss-2); border:1px solid var(--line-soft); border-radius:11px;
  padding:12px 15px; cursor:pointer; transition:all .2s;
}
.br-item .bi-ix{font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--green-dim); letter-spacing:.1em}
.br-item:hover{border-color:var(--green); transform:translateX(0) scale(1.015)}
#brLeft .br-item:hover{transform:translateX(4px)}
#brRight .br-item:hover{transform:translateX(-4px)}
.br-item.hit{border-color:var(--green); background:rgba(74,245,101,.08); box-shadow:0 0 18px rgba(74,245,101,.14)}
[data-theme="light"] .br-item.hit{background:rgba(14,138,69,.08); box-shadow:none}
.br-mid{position:relative; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--moss-2); overflow:hidden}
.br-mid canvas{position:absolute; inset:0; width:100%; height:100%}
.br-dir{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:7.5px; letter-spacing:.18em; color:var(--text-3); white-space:nowrap;
}
.br-note{margin-top:14px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.18em; color:var(--text-3)}
@media (max-width:880px){
  .bridge{grid-template-columns:1fr}
  #brLeft,#brRight{border-radius:18px; border:1px solid var(--line-soft)}
  .br-mid{height:90px; border:0; background:transparent}
  .br-dir{bottom:auto; top:50%; transform:translate(-50%,-50%) rotate(90deg)}
}

/* ===== market entry phases ===== */
.ph-run{position:relative; margin-top:10px}
.ph-line{position:absolute; left:6%; right:6%; top:-14px; height:2px; background:var(--line-soft); border-radius:2px; overflow:visible}
.ph-line::before{content:""; position:absolute; left:0; top:0; bottom:0; width:18%; background:var(--green); border-radius:2px}
.ph-spark{position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); animation:phS 4s ease-in-out infinite}
@keyframes phS{0%{left:0; opacity:1} 45%{left:17%; opacity:1} 55%{left:17%; opacity:0} 100%{left:0; opacity:0}}
@media (prefers-reduced-motion: reduce){ .ph-spark{animation:none; left:17%} }
.ph-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ph-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:18px; padding:24px 24px 22px;
  transition:all .25s; position:relative;
}
.ph-card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow)}
.ph-card.on{border-color:var(--green)}
.ph-card.on:hover{border-color:var(--green)}
.ph-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.ph-ix{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green-dim); letter-spacing:.14em}
.ph-stamp{font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.18em; border:1px solid var(--line); color:var(--text-3); border-radius:4px; padding:3px 8px}
.ph-stamp.live{border-color:var(--green); color:var(--green); animation:pwP 2.4s infinite}
.ph-card h3{font-family:'Clash Display',sans-serif; font-size:20px; font-weight:600; margin:0 0 8px}
.ph-card p{font-size:13.5px; color:var(--text-2); line-height:1.65; margin:0}
.ph-ctas{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}
@media (max-width:880px){ .ph-grid{grid-template-columns:1fr} .ph-line{display:none} }


/* Arabic desktop header: compact spacing keeps every control visible. */
@media (min-width:901px){
  [dir="rtl"] header .nav{gap:14px}
  [dir="rtl"] header .brand{margin-right:0; margin-left:10px; flex:none}
  [dir="rtl"] header .brand-logo{height:40px; width:auto}
  [dir="rtl"] header .nav-pill{gap:13px; min-width:0}
  [dir="rtl"] header .nav-pill>a,
  [dir="rtl"] header .nav-pill>.dd>button{font-size:11.5px; letter-spacing:0; white-space:nowrap}
  [dir="rtl"] header .nav-cta{gap:8px; flex:none}
  [dir="rtl"] header .lang-btn{padding-inline:3px; white-space:nowrap}
  [dir="rtl"] header .wallet-btn{font-size:10px; padding:10px 10px; letter-spacing:.04em; white-space:nowrap}
}


/* ================= MOBILE SAFETY NET ================= */
@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid-4{ grid-template-columns:1fr; }
  /* long mono labels must wrap rather than push the page sideways */
  .tick-item, .v-row .stamp, .layer .guide, .br-dir, .sod-detail .stamp{ white-space:normal; }
  .wallet-btn{ white-space:nowrap; }
}
/* nothing may exceed the viewport on a phone */
@media (max-width:560px){
  html, body{ overflow-x:hidden; }
  .wrap{ padding-left:18px; padding-right:18px; }
}