:root{
  --bg:#0b0620;
  --bg2:#130a33;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --faint:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.14);
  --brand:#24e1b5;
  --brand2:#38a7ff;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 22px;
  --radius2: 16px;
  --max: 1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(56,167,255,.18), transparent 55%),
              radial-gradient(1000px 900px at 80% 20%, rgba(36,225,181,.16), transparent 50%),
              radial-gradient(900px 900px at 40% 90%, rgba(120,80,255,.16), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
.bg__grid{
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotate(-6deg);
  opacity:.25;
}
.bg__glow{position:absolute; filter: blur(70px); opacity:.9}
.bg__glow--a{width:520px;height:520px;left:-140px;top:120px;background:rgba(56,167,255,.35)}
.bg__glow--b{width:540px;height:540px;right:-160px;top:260px;background:rgba(36,225,181,.30)}
.bg__glow--c{width:560px;height:560px;left:20%;bottom:-220px;background:rgba(120,80,255,.32)}

.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(9,6,22,.85), rgba(9,6,22,.55));
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:650; letter-spacing:.14em}
.brand img{width:28px;height:28px; border-radius:10px; box-shadow: 0 8px 22px rgba(0,0,0,.35)}
.brand span{font-size:12px; text-transform:uppercase}
.nav{display:flex; gap:18px; align-items:center; font-size:13px; color:var(--muted)}
.nav a{padding:8px 10px; border-radius:999px; border:1px solid transparent}
.nav a:hover{color:var(--text); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04)}

.navToggle{
  display:none;
  width:44px;height:40px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  cursor:pointer;
}
.navToggle span{display:block;height:2px;background:rgba(255,255,255,.85);margin:6px 10px;border-radius:2px}

@media (max-width: 920px){
  .nav{display:none}
  .navToggle{display:block}
  .topbar{padding:12px 14px}
  body.menuOpen .nav{
    display:flex;
    position:absolute; left:14px; right:14px; top:64px;
    flex-direction:column; align-items:flex-start;
    gap:8px;
    padding:12px;
    background:rgba(10,7,25,.92);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    box-shadow: var(--shadow);
  }
  body.menuOpen .nav a{width:100%}
}

.hero{position:relative; padding:56px 0 30px}
.hero__content{position:relative}
.kicker{font-family:var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-size:12px; margin:0 0 12px}
.hero__title{
  margin:0 0 18px;
  font-size: clamp(34px, 4.8vw, 64px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.hero__status{display:flex; gap:10px; align-items:center; margin:10px 0 18px}
.badge{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  padding:7px 10px; border-radius:999px;
}
.statusText{font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.85); letter-spacing:.14em}
.hero__lead{max-width:720px; font-size:16px; color:var(--muted); line-height:1.65; margin:0 0 22px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:14px;
  cursor:pointer;
}
.btn--primary{
  background: linear-gradient(135deg, rgba(36,225,181,.95), rgba(56,167,255,.95));
  border-color: transparent;
  color: rgba(10,7,25,.98);
  font-weight:650;
  box-shadow: 0 14px 40px rgba(36,225,181,.12), 0 14px 40px rgba(56,167,255,.10);
}
.btn--primary:hover{filter:brightness(1.04)}
.btn--ghost:hover{background:rgba(255,255,255,.07)}
.btn--small{padding:10px 14px; font-size:13px}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap}

.metrics{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:28px}
.metric{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: var(--radius); padding:16px 16px 14px; box-shadow: 0 10px 34px rgba(0,0,0,.22)}
.metric__label{font-family:var(--mono); color:var(--faint); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px}
.metric__grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.metric__value{font-size:22px; font-weight:650; letter-spacing:-.02em}
.metric__sub{color:var(--faint); font-size:12px; margin-top:4px}
@media (max-width: 980px){ .metrics{grid-template-columns:1fr} .metric__grid{grid-template-columns:1fr 1fr 1fr}}

.hero__media{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.orb{position:absolute; border-radius:999px; filter: blur(0px); opacity:.85; mix-blend-mode:screen}
.orb--big{
  width:520px;height:520px;
  right:-140px; top:20px;
  background: radial-gradient(circle at 30% 30%, rgba(56,167,255,.95), rgba(56,167,255,0) 65%),
              radial-gradient(circle at 70% 60%, rgba(36,225,181,.70), rgba(36,225,181,0) 62%);
  filter: blur(1px);
}
.orb--mid{
  width:380px;height:380px;
  right:120px; top:180px;
  background: radial-gradient(circle at 40% 30%, rgba(36,225,181,.80), rgba(36,225,181,0) 65%),
              radial-gradient(circle at 70% 70%, rgba(120,80,255,.55), rgba(120,80,255,0) 62%);
  opacity:.65;
}
.orb--small{
  width:240px;height:240px;
  right:40%; top:40px;
  background: radial-gradient(circle at 35% 35%, rgba(120,80,255,.65), rgba(120,80,255,0) 60%);
  opacity:.55;
}

.ribbons{position:absolute; right:40px; top:90px; width:460px; height:460px; opacity:.75}
.rib{position:absolute; inset:0; border-radius: 999px; border: 14px solid rgba(56,167,255,.28); transform: rotate(18deg)}
.rib--2{inset:40px; border-color: rgba(36,225,181,.22); transform: rotate(40deg)}
.rib--3{inset:84px; border-color: rgba(255,255,255,.08); transform: rotate(62deg)}
@media (max-width: 980px){
  .hero__media{opacity:.55}
  .ribbons{right:-120px}
}

.section{padding:56px 0}
.section--alt{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.cards3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.20);
  min-height: 300px;
  position:relative;
}
.card__idx{font-family:var(--mono); color:rgba(255,255,255,.45); letter-spacing:.18em; font-size:12px}
.card__kicker{margin-top:12px; color:rgba(255,255,255,.62); font-size:13px}
.card__title{margin:10px 0 10px; font-size:28px; line-height:1.08; letter-spacing:-.02em}
.card__text{margin:0 0 14px; color:var(--muted); line-height:1.65}
.bullets{margin:0; padding-left:18px; color:rgba(255,255,255,.78)}
.bullets li{margin:8px 0}
@media (max-width: 980px){ .cards3{grid-template-columns:1fr} .card{min-height:auto} }

.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px}
.sectionHead__idx{font-family:var(--mono); letter-spacing:.18em; color:rgba(255,255,255,.45)}
.sectionHead__kicker{margin:0 0 6px; font-family:var(--mono); letter-spacing:.18em; color:rgba(255,255,255,.62); font-size:12px}
.sectionHead__title{margin:0; font-size:34px; letter-spacing:-.02em}
.sectionHead__right{display:flex; align-items:center}

.tiles3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.tile{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:18px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.tile:hover{transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
.tile__idx{font-family:var(--mono); color:rgba(255,255,255,.45); letter-spacing:.18em; font-size:12px}
.tile__tag{margin-top:12px; color:rgba(255,255,255,.65); font-size:13px}
.tile__title{margin:10px 0 10px; font-size:22px}
.tile__text{margin:0 0 14px; color:var(--muted); line-height:1.65}
.tile__cta{font-family:var(--mono); letter-spacing:.12em; font-size:12px; color:rgba(255,255,255,.86)}
@media (max-width: 980px){ .tiles3{grid-template-columns:1fr} }

.product{display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:stretch}
.product__mock{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.mockTop{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px;
  background: rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.22)}
.mockTitle{margin-left:8px; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.78)}
.mockBody{padding:16px}
.mockChart{
  height:160px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(56,167,255,.25), rgba(56,167,255,0)),
    radial-gradient(320px 220px at 30% 30%, rgba(36,225,181,.28), transparent 60%),
    radial-gradient(260px 200px at 70% 70%, rgba(120,80,255,.22), transparent 60%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
}
.mockRows{margin-top:14px; display:grid; gap:10px}
.row{display:flex; justify-content:space-between; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.pill{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:rgba(0,0,0,.92); background: linear-gradient(135deg, rgba(36,225,181,.85), rgba(56,167,255,.85)); padding:4px 8px; border-radius:999px}
.product__copy{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: var(--radius); padding:18px}
.product__lead{margin:0 0 14px; color:var(--muted); line-height:1.65}
.featureGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.feature{padding:12px 12px; border-radius: 16px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)}
.feature h3{margin:0 0 8px; font-size:16px}
.feature p{margin:0; color:var(--muted); line-height:1.55; font-size:14px}
@media (max-width: 980px){ .product{grid-template-columns:1fr} .featureGrid{grid-template-columns:1fr} }

.wideText{max-width: 900px; color:var(--muted); line-height:1.75; margin:0 0 18px}
.logoRow{display:flex; gap:10px; flex-wrap:wrap}
.logoRow span{
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:rgba(255,255,255,.82);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
}

.blogGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.post{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:18px;
  min-height: 220px;
}
.post__meta{font-family:var(--mono); color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.14em}
.post__title{margin:10px 0 10px; font-size:20px}
.post__text{margin:0 0 14px; color:var(--muted); line-height:1.65}
.post__cta{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:rgba(255,255,255,.86)}
.post--redacted{background: rgba(255,255,255,.03)}
@media (max-width: 980px){ .blogGrid{grid-template-columns:1fr} }

.community{display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 18px}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
}
.chip span{opacity:.65}
.chip:hover{background: rgba(255,255,255,.06)}

.newsletter{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:16px;
}
.newsletter h3{margin:0 0 6px; font-size:18px}
.newsletter p{margin:0; color:var(--muted)}
.newsletter__form{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.newsletter__form input{
  width:min(340px, 70vw);
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.newsletter__form input:focus{border-color: rgba(56,167,255,.6); box-shadow: 0 0 0 4px rgba(56,167,255,.15)}
.fineprint{margin:12px 0 0; color:rgba(255,255,255,.55); font-size:12px; line-height:1.6}

.footer{padding:34px 0 60px; border-top:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10)}
.footer__grid{display:grid; grid-template-columns: 1.2fr .9fr .9fr .9fr; gap:14px}
.footer__brand{display:flex; gap:10px; align-items:center; font-weight:650; letter-spacing:.14em}
.footer__brand img{width:28px;height:28px;border-radius:10px}
.footer__brand span{text-transform:uppercase; font-size:12px}
.footer__col{border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: var(--radius); padding:14px}
.footer__col a{display:block; padding:8px 0; color:rgba(255,255,255,.75)}
.footer__col a:hover{color:var(--text)}
.footer__head{font-family:var(--mono); letter-spacing:.14em; color:rgba(255,255,255,.62); font-size:12px; margin-bottom:8px}
.soon{opacity:.65}
@media (max-width: 980px){ .footer__grid{grid-template-columns:1fr} }

.srOnly{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.toast{
  position: fixed;
  left: 18px;
  bottom: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,7,25,.92);
  box-shadow: var(--shadow);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
  max-width: min(520px, calc(100% - 36px));
}
.toast.show{opacity:1; transform: translateY(0)}



/* === Metric number layout stabilization === */
.metric__value {
  white-space: nowrap;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3vw, 34px);
}

/* Reserve space so numbers never reflow */
.metric__value::after {
  content: "888,888,888";
  visibility: hidden;
  display: block;
  height: 0;
  overflow: hidden;
}



/* === Live chart in COOL Trade preview === */
.mockChart{
  position: relative;
  overflow: hidden;
}
.liveChartWrap{
  position:absolute;
  inset:0;
}
.liveChartWrap canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.92;
}
.liveChartHud{
  position:absolute;
  left:12px;
  right:12px;
  top:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  pointer-events:none;
}
.hudTitle{
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
}
.hudSub{
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
}
.hudRight{
  display:flex;
  align-items:center;
  gap: 8px;
}
.hudPill{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.85);
}
.hudValue{
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}


/* KPI: 2 metrics only (no COOL Trade, no Max TPS) */
.metric__grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.metric__value{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
}
.metric__value::after{
  content:"88,888,888";
  visibility:hidden;
  display:block;
  height:0;
  overflow:hidden;
}
@media (max-width: 760px){
  .metric__grid{ gap: 14px; }
  .metric__value{ font-size: clamp(20px, 7vw, 26px); }
  .metric__sub{ font-size: 12px; }
}



/* === Number overflow fix (auto-fit) === */
.metric__grid > div{ min-width: 0; }
.metric__value{
  display:block;
  max-width:100%;
  overflow:hidden;
  /* preferred range; JS will shrink further if needed */
  --num-max: 34;
  --num-min: 18;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.06;
}
@media (max-width: 760px){
  .metric__value{ --num-max: 28; --num-min: 16; font-size: clamp(18px, 6.2vw, 26px); }
}