:root {
  --bg: #050506;
  --bg-2: #0a0b0d;
  --line: rgba(255, 255, 255, 0.08);
  --line-blue: rgba(157, 163, 170, 0.28);
  --text: #f9f9f9;
  --muted: #90969f;
  --dim: #61676f;
  --blue: #878d97;
  --blue-2: #727983;
  --blue-soft: #aaafb5;
  --cyan: #a5aab1;
  --green: #2bd67b;
  --amber: #ffb547;
  --red: #ff5b6b;
  --radius: 16px;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip (not hidden) keeps position: sticky working */
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(135, 141, 151, 0.5); }
:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; animation: navIn .8s var(--ease) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-12px); } }
.nav.scrolled { background: rgba(5, 5, 6, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; height: 72px; gap: 32px; }
.nav-sep { width: 1px; height: 22px; background: var(--line); margin: 0 -8px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(160deg, #8f959e, #6a717a); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 20px rgba(135, 141, 151,.35); transition: transform .4s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); }
.brand-mark svg { width: 18px; height: 18px; }
.nav-links { display: flex; gap: 32px; font-size: 14px; color: #d1d3d7; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--blue-soft); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14px; }
.status { display: flex; align-items: center; gap: 8px; color: #dddfe2; }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(43,214,123,.18), 0 0 10px var(--green); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { box-shadow: 0 0 0 6px rgba(43,214,123,0), 0 0 4px var(--green); } }
.status.down .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(255,91,107,.2); animation: none; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; width: 40px; height: 40px; place-items: center; cursor: pointer; }
.mobile-menu { display: none; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 4px; font-size: 15px; font-weight: 500; border: 0; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .3s, opacity .2s; white-space: nowrap; overflow: hidden; }
.btn:active { transform: translateY(1px); }
.btn-white { background: #fff; color: #0e1012; min-width: 160px; box-shadow: 0 0 0 0 rgba(177, 181, 187,0); }
.btn-white:hover { background: #f5f6f6; box-shadow: 0 10px 40px -8px rgba(171, 176, 182,.65); transform: translateY(-1px); }
.btn-shine::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(135, 141, 151,.22), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn-blue { background: var(--blue); color: #fff; height: 36px; padding: 0 16px; border-radius: 8px; font-size: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 24px rgba(135, 141, 151,.4); }
.btn-blue:hover { background: #9298a0; box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 8px 32px rgba(135, 141, 151,.6); }
.btn-ghost { background: none; color: #fff; padding: 0 8px; }
.arr { display: inline-block; transition: transform .25s var(--ease); }
.btn-ghost:hover .arr, .pill:hover .arr { transform: translateX(4px); }
.btn-outline { background: rgba(255,255,255,.03); color: #fff; border: 1px solid var(--line); border-radius: 8px; }
.btn-outline:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Pills ---------- */
.pill { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 4px 14px 4px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(12, 14, 15,.7); font-size: 13px; color: #c0c3c8; isolation: isolate; }
.pill::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang), transparent 0 70%, rgba(177, 181, 187,.9) 82%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; z-index: -1; }
@keyframes spin { to { --ang: 360deg; } }
.pill .tag { background: linear-gradient(180deg, #79808b, #5b6169); color: #fff; padding: 4px 12px; border-radius: 7px; font-weight: 500; box-shadow: 0 0 0 1px rgba(177, 181, 187,.35) inset, 0 0 18px rgba(135, 141, 151,.5); }
.eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 13px; color: #cbced2; }
.badge { font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: #d1d3d7; white-space: nowrap; }
.badge.on { color: #8ff0bb; border-color: rgba(43,214,123,.4); background: rgba(43,214,123,.08); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 168px; text-align: center; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.aura { position: absolute; border-radius: 50%; filter: blur(80px); }
.aura.a1 { left: 50%; top: -260px; width: 1100px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(118, 125, 136,.55), transparent); animation: aura 9s ease-in-out infinite alternate; }
.aura.a2 { left: 12%; top: 40px; width: 420px; height: 320px; background: radial-gradient(closest-side, rgba(113, 120, 130,.22), transparent); animation: aura2 12s ease-in-out infinite alternate; }
@keyframes aura { to { opacity: .7; transform: translateX(-50%) scale(1.08); } }
@keyframes aura2 { to { transform: translate(140px, 40px); opacity: .6; } }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; margin: 40px auto 26px; max-width: 1040px; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: inline-block; animation: lineUp 1s var(--ease) both; animation-delay: var(--d); }
.ln:nth-child(1) > span { animation-delay: .15s; } .ln:nth-child(2) > span { animation-delay: .3s; }
@keyframes lineUp { from { transform: translateY(105%); opacity: 0; } }
.hero h1 .serif { font-size: 1.04em; letter-spacing: -0.02em; padding-right: .06em; }
.shine { background: linear-gradient(100deg, #ffffff 20%, #cdd0d3 40%, #ffffff 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShine 6s linear infinite; }
@keyframes textShine { to { background-position: -250% 0; } }
.rotator { display: inline-block; position: relative; vertical-align: bottom; transition: width .5s var(--ease); }
.rotator .serif { display: inline-block; white-space: nowrap; }
.rotator .out { animation: wordOut .45s var(--ease) both; }
.rotator .inn { animation: wordIn .6s var(--ease) both; }
@keyframes wordOut { to { opacity: 0; transform: translateY(-40%); filter: blur(8px); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(40%); filter: blur(8px); } }
.hero p.lead { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: 17px; }
.in { animation: fadeUp 1s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.hero-cta { display: flex; justify-content: center; gap: 22px; margin-top: 38px; flex-wrap: wrap; }
.hero-feats { position: relative; z-index: 3; display: flex; justify-content: center; margin-top: 64px; }
.hero-feats .feat { display: flex; align-items: center; gap: 14px; padding: 0 30px; font-size: 15px; color: #b1b5bb; }
.hero-feats .feat + .feat { border-left: 1px solid var(--line); }
.icon-box { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); flex: none; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.icon-box svg { width: 18px; height: 18px; stroke: #f1f2f3; }
.icon-box.lg { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; background: linear-gradient(160deg, rgba(143, 149, 157,.45), rgba(53, 56, 61,.5)); border-color: var(--line-blue); }
.icon-box.lg svg { width: 22px; height: 22px; }
.hero-feats .feat:hover .icon-box { border-color: var(--line-blue); box-shadow: 0 0 20px rgba(135, 141, 151,.35); }

.hero-art { position: relative; height: 640px; margin-top: -150px; z-index: 1; pointer-events: none; animation: artIn 1.8s var(--ease) .35s both; }
@keyframes artIn { from { opacity: 0; transform: translateY(60px) scale(.97); } }
.hero-art svg { position: absolute; left: 50%; top: 0; width: max(1600px, 112vw); height: 100%; transform: translateX(-50%); overflow: visible; }
.hero-art .px { transform: translate(calc(var(--mx, 0) * var(--depth) * 18px), calc(var(--my, 0) * var(--depth) * 12px)); transition: transform .9s var(--ease); }
.hero-art .drift { animation: drift 14s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 30% 50%; }
.hero-art .drift-b { animation: drift2 18s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 50% 50%; }
.hero-art .drift-c { animation: drift3 11s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 60% 40%; }
@keyframes drift { from { transform: translate(-8px, 4px) rotate(-.5deg); } to { transform: translate(10px, -8px) rotate(.5deg); } }
@keyframes drift2 { from { transform: translate(14px, 6px); } to { transform: translate(-16px, -6px); } }
@keyframes drift3 { from { transform: translate(6px, 8px) rotate(.6deg); } to { transform: translate(-10px, -6px) rotate(-.4deg); } }
.hero-art .breathe { animation: breathe 6s ease-in-out infinite alternate; }
.hero-art .breathe-2 { animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .65; } to { opacity: 1; } }
.runner { stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: run 5s linear infinite; }
.runner.r2 { animation-duration: 4.2s; animation-delay: -1.5s; stroke-dasharray: 9 91; }
.runner.r3 { animation-duration: 6.5s; animation-delay: -3s; opacity: .8; }
.runner.r4 { animation-duration: 7s; animation-delay: -2s; opacity: .7; stroke-dasharray: 5 95; }
@keyframes run { to { stroke-dashoffset: 0; } }

/* ---------- Logo strip ---------- */
.strip { overflow-x: clip; position: relative; z-index: 2; margin-top: -150px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 5, 6,.35), rgba(5, 5, 6,.85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.strip::before, .strip::after { content: ''; position: absolute; top: -40px; bottom: -40px; width: 180px; pointer-events: none; filter: blur(40px); opacity: .7; }
.strip::before { left: -80px; background: radial-gradient(closest-side, rgba(135, 141, 151,.8), transparent); }
.strip::after { right: -80px; background: radial-gradient(closest-side, rgba(135, 141, 151,.8), transparent); }
.strip-inner { display: flex; align-items: center; gap: 40px; height: 96px; }
.strip-label { font-size: 12.5px; line-height: 1.35; color: #a9aeb5; width: 140px; flex: none; }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.chain-logo { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap; opacity: .9; transition: opacity .2s; }
.chain-logo:hover { opacity: 1; }
.chain-logo svg { width: 26px; height: 26px; }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 130px 0 0; }
.section-tight { padding-top: 90px; }
.section-head { text-align: center; max-width: 820px; margin: 0 auto; }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; margin: 22px 0 16px; }
.section-head h2 .serif { font-size: 1.06em; }
.section-head p { color: var(--muted); font-size: 16px; max-width: 640px; margin: 0 auto; }
.center-cta { display: flex; justify-content: center; gap: 18px; margin-top: 56px; flex-wrap: wrap; }

/* ---------- Card system ---------- */
/* .glass = blue glass surface, .fx = glowing border + cursor spotlight */
.glass {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(110% 70% at 25% 0%, rgba(142, 148, 156, 0.32), transparent 60%),
    linear-gradient(180deg, rgba(58, 62, 67, 0.55), rgba(17, 19, 21, 0.8));
  border: 1px solid rgba(157, 163, 170, 0.18);
  box-shadow: 0 30px 60px -30px rgba(71, 75, 81, 0.6), 0 0 0 1px rgba(0,0,0,.2);
}
.fx { position: relative; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.fx::before { /* gradient border, brighter at the top */
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(194, 197, 202, 0.55), rgba(160, 165, 172, 0.14) 35%, rgba(160, 165, 172, 0.04) 70%, rgba(194, 197, 202, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .3s;
}
.fx::after { /* spotlight that follows the cursor */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(160, 165, 172, 0.2), transparent 45%);
}
.fx:hover::after { opacity: 1; }
.fx:hover::before { background: linear-gradient(180deg, rgba(205, 208, 212, 0.85), rgba(160, 165, 172, 0.3) 40%, rgba(160, 165, 172, 0.12) 75%, rgba(194, 197, 202, 0.35)); }

/* Feature cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.feature-card { padding: 34px 30px 30px; min-height: 340px; display: flex; flex-direction: column; overflow: hidden; }
.feature-card > * { position: relative; z-index: 1; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px rgba(126, 133, 143, 0.55); }
.feature-card .ill { position: relative; height: 72px; margin-bottom: 54px; width: max-content; animation: bob 5s ease-in-out infinite; }
.feature-card:nth-child(2) .ill { animation-delay: -1.6s; } .feature-card:nth-child(3) .ill { animation-delay: -3.2s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.feature-card .ill svg { height: 72px; width: auto; position: relative; filter: drop-shadow(0 10px 18px rgba(126, 133, 143, .45)); transition: transform .5s var(--ease); }
.feature-card:hover .ill svg { transform: scale(1.08) rotate(-2deg); }
.ill-glow { position: absolute; inset: -30px -40px; background: radial-gradient(closest-side, rgba(143, 149, 157, .45), transparent); filter: blur(10px); opacity: .7; transition: opacity .4s; }
.feature-card:hover .ill-glow { opacity: 1; }
.feature-card h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 14px; }
.feature-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 24px; }
.mini-tag { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(171, 176, 182, .22); background: rgba(135, 141, 151, .08); color: #d6d8db; }
/* card dot-grid texture */
.feature-card, .cat.score, .token-card, .form-card, .stat, .phase.live { background-image:
    radial-gradient(rgba(188, 192, 197, .14) 1px, transparent 1.2px),
    radial-gradient(110% 70% at 25% 0%, rgba(142, 148, 156, 0.32), transparent 60%),
    linear-gradient(180deg, rgba(58, 62, 67, 0.55), rgba(17, 19, 21, 0.8));
  background-size: 18px 18px, auto, auto; background-position: 0 0; }
.layer-hi { animation: lift 4s ease-in-out infinite; transform-box: fill-box; }
@keyframes lift { 50% { transform: translateY(-4px); } }
.sq { transform-box: fill-box; transform-origin: center; animation: sq 6s ease-in-out infinite; }
.sq.s2 { animation-delay: -1.5s; } .sq.s3 { animation-delay: -3s; } .sq.s4 { animation-delay: -4.5s; }
@keyframes sq { 0%, 70%, 100% { opacity: .75; } 80% { opacity: 1; } }
.spark { transform-box: fill-box; transform-origin: center; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(.75) rotate(45deg); } }
.dt { animation: typing 1.4s ease-in-out infinite; }
.dt.d2 { animation-delay: .2s; } .dt.d3 { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* Steps */
.steps { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; margin-top: 70px; }
.step-list { display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 22px 26px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.015); overflow: hidden; cursor: default; }
.step.fx::before { opacity: .35; transition: opacity .3s; }
.step.active { background: linear-gradient(120deg, rgba(135, 141, 151,.14), rgba(255,255,255,.01)); border-color: transparent; }
.step.active.fx::before { opacity: 1; }
.step .num { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 22px; background: rgba(135, 141, 151,.12); border: 1px solid var(--line-blue); color: #e3e4e7; transition: .3s; }
.step.active .num { background: linear-gradient(160deg, #8f959e, #6a717a); color: #fff; box-shadow: 0 0 24px rgba(135, 141, 151,.55); }
.step h4 { font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 14.5px; }
.step-bar { position: absolute; left: 22px; right: 22px; bottom: 12px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.04); overflow: hidden; opacity: 0; transition: opacity .3s; }
.step.active .step-bar { opacity: 1; }
.step-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.step.active .step-bar i { animation: fill 4s linear forwards; }
@keyframes fill { to { width: 100%; } }

.mock { padding: 0 26px 14px; overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; margin: 0 -26px 22px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.2); }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mock-bar code { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.mock-top { display: flex; gap: 20px; align-items: center; }
.ring { position: relative; width: 120px; height: 120px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .val b { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; display: block; }
.ring .val small { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; }
.mock-arc { transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 6px rgba(255,120,90,.5)); }
.mock-title { font-size: 20px; font-weight: 500; }
.mock-addr { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; word-break: break-all; }
.find { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
.find:first-of-type { margin-top: 20px; }
.mock .find { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mock.play .find { opacity: 1; transform: none; }
.mock.play .find:nth-of-type(2) { transition-delay: .25s; } .mock.play .find:nth-of-type(3) { transition-delay: .5s; } .mock.play .find:nth-of-type(4) { transition-delay: .75s; } .mock.play .find:nth-of-type(5) { transition-delay: 1s; }
.sev { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; flex: none; text-transform: uppercase; }
.sev.critical { background: rgba(255,91,107,.15); color: #ff8d98; border: 1px solid rgba(255,91,107,.35); }
.sev.high { background: rgba(255,181,71,.12); color: #ffcd80; border: 1px solid rgba(255,181,71,.3); }
.sev.medium { background: rgba(165, 170, 177,.14); color: #cdd0d3; border: 1px solid rgba(165, 170, 177,.32); }
.sev.low, .sev.info { background: rgba(255,255,255,.06); color: #d1d3d7; border: 1px solid var(--line); }
.find .pen { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 13px; }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; }
.cat { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); display: flex; flex-direction: column; overflow: hidden; }
.cat:hover { transform: translateY(-4px); }
.cat.fx::before { opacity: .5; } .cat.fx:hover::before { opacity: 1; }
.cat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cat:hover .icon-box { border-color: var(--line-blue); box-shadow: 0 0 18px rgba(135, 141, 151,.35); }
.cat .cap { font-family: var(--mono); font-size: 11.5px; color: var(--blue-soft); padding: 3px 8px; border-radius: 6px; background: rgba(135, 141, 151,.1); }
.cat h4 { font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.cat p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cap-bar { margin-top: auto; padding-top: 18px; }
.cap-bar::before { content: ''; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); }
.cap-bar i { display: block; height: 3px; margin-top: -3px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 1.4s var(--ease) .3s; }
.cat.in .cap-bar i { width: var(--w); }
.cat.score { border-color: rgba(157, 163, 170,.3); }
.cat.score .cap { align-self: flex-start; }
.score-big { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; }
.score-big b { font-size: 64px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #fff, #c6c9cd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score-big .serif { font-size: 26px; color: #dfe1e4; }
.grade-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: auto; padding-top: 18px; }
.grade-scale i { font-style: normal; font-size: 10px; color: var(--muted); padding-top: 8px; border-top: 3px solid var(--c); text-align: center; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 26px; display: grid; gap: 4px; align-content: start; overflow: hidden; }
.stat:hover { transform: translateY(-4px); }
.stat .icon-box { margin-bottom: 14px; }
.stat b { display: block; font-size: 42px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; background: linear-gradient(180deg, #fff, #cdd0d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat > span:last-child { color: var(--muted); font-size: 14px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2s ease-in-out infinite; }

/* Token */
.token { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.token-card { padding: 32px; overflow: hidden; }
.token-card > * { position: relative; }
.tc-head { display: flex; justify-content: space-between; align-items: center; }
.token-card h3 { font-size: 15px; font-weight: 500; color: #cdd0d4; letter-spacing: .02em; }
.price { font-size: 48px; font-weight: 500; letter-spacing: -0.03em; margin: 14px 0 4px; background: linear-gradient(180deg, #fff, #cdd0d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chg.up { color: var(--green); } .chg.down { color: var(--red); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.kv div { padding: 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); transition: border-color .2s; }
.kv div:hover { border-color: var(--line-blue); }
.kv span { display: block; font-size: 12px; color: var(--muted); }
.kv b { font-weight: 500; font-size: 17px; }
.ca { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.3); font-family: var(--mono); font-size: 12.5px; }
.ca code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dddfe2; }
.copy { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 12px; cursor: pointer; transition: .2s; }
.copy:hover { background: rgba(135, 141, 151,.25); border-color: var(--line-blue); }
.tokenomics { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; margin-top: 24px; }
.donut { width: 170px; height: 170px; border-radius: 50%; position: relative; background: conic-gradient(#eef0f3 0 55%, #d8c7a3 0 70%, #9aa0a8 0 82%, #6b717a 0 92%, #3a3e45 0 100%);
  -webkit-mask: conic-gradient(#000 var(--p), transparent 0); mask: conic-gradient(#000 var(--p), transparent 0); --p: 0%; transition: --p 1.6s var(--ease); filter: drop-shadow(0 0 20px rgba(135, 141, 151,.35)); }
.in .donut, .donut.in { --p: 100%; }
.donut-in { position: absolute; inset: 22px; border-radius: 50%; background: #111316; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.donut-in b { font-size: 24px; font-weight: 500; }
.donut-in span { font-size: 11px; color: var(--muted); }
.legend { display: grid; gap: 10px; font-size: 14px; }
.legend div { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.legend div:last-child { border-bottom: 0; padding-bottom: 0; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.legend b { font-weight: 500; font-family: var(--mono); font-size: 13px; }

/* Roadmap */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 64px 0 22px; height: 12px; }
.timeline::before { content: ''; position: absolute; left: 16.66%; right: 16.66%; top: 5px; height: 2px; background: var(--line); }
.tl-fill { position: absolute; left: 16.66%; top: 5px; height: 2px; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 1.6s var(--ease) .3s; box-shadow: 0 0 12px var(--blue); }
.timeline.in .tl-fill { width: 22%; }
.timeline i { justify-self: center; position: relative; width: 12px; height: 12px; border-radius: 50%; background: #1b1e23; border: 2px solid #3b3f44; }
.timeline i.on { background: var(--blue); border-color: #cdd0d3; box-shadow: 0 0 0 6px rgba(135, 141, 151,.18), 0 0 16px var(--blue); animation: blink 2.4s ease-in-out infinite; }
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.phase { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.015); overflow: hidden; }
.phase:hover { transform: translateY(-4px); }
.phase.fx:not(.live)::before { opacity: .4; }
.phase .ph { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.phase h4 { font-size: 22px; font-weight: 500; margin: 18px 0 10px; }
.phase p { color: var(--muted); font-size: 14.5px; }
.phase ul { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: 14px; color: #cdd0d4; }
.phase li::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-soft); margin-right: 10px; vertical-align: middle; }
.phase.live li::before { background: var(--green); box-shadow: 0 0 6px var(--green); }

/* Forms */
.join { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.form-card { padding: 34px; overflow: hidden; }
.form-card > * { position: relative; }
.form-card h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.form-card > p { color: var(--muted); font-size: 14.5px; margin: 8px 0 22px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; color: #c2c5ca; }
.input { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.35); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
textarea.input { height: 110px; padding: 12px 14px; resize: vertical; }
.input::placeholder { color: var(--dim); }
.input:hover { border-color: rgba(255,255,255,.14); }
.input:focus { border-color: rgba(170, 175, 181,.7); box-shadow: 0 0 0 4px rgba(135, 141, 151,.16); background: rgba(0,0,0,.45); }
.form-msg { font-size: 14px; margin-top: 12px; min-height: 21px; }
.form-msg.ok { color: #8ff0bb; } .form-msg.err { color: #ff9aa4; }

/* FAQ */
.faq { max-width: 820px; margin: 56px auto 0; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; background: rgba(255,255,255,.015); }
.faq details.fx::before { opacity: .35; }
.faq details[open] { background: linear-gradient(180deg, rgba(135, 141, 151,.1), rgba(255,255,255,.01)); }
.faq details[open].fx::before { opacity: 1; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; font-size: 24px; line-height: 1; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: #fff; }
.faq details p { color: var(--muted); margin-top: 12px; font-size: 15px; animation: fadeUp .4s var(--ease); }

/* Footer */
.footer { margin-top: 140px; border-top: 1px solid var(--line); padding: 56px 0 40px; position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; left: 50%; bottom: -260px; width: 900px; height: 400px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(135, 141, 151,.35), transparent); pointer-events: none; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h5 { font-size: 13px; font-weight: 500; color: #cdd0d4; margin-bottom: 14px; }
.foot-grid a { display: block; color: var(--muted); font-size: 14px; padding: 4px 0; transition: color .2s; }
.foot-grid a:hover { color: #fff; }
.foot-grid .about { color: var(--muted); font-size: 14px; max-width: 300px; margin-top: 16px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .45s var(--ease), border-color .3s; transition-delay: var(--rd, 0s); }
.reveal.in { opacity: 1; transform: none; }
.reveal.in.fx:hover { transition-delay: 0s; }
.feature-card.reveal.in:hover { transform: translateY(-6px); }
.cat.reveal.in:hover, .stat.reveal.in:hover, .phase.reveal.in:hover { transform: translateY(-4px); }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #1d2025; border: 1px solid var(--line-blue); padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .25s; z-index: 100; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav-links, .nav-right .status, .nav-sep { display: none; }
  .menu-btn { display: grid; }
  .nav-right { gap: 12px; }
  .mobile-menu.open { display: grid; gap: 4px; padding: 8px 24px 20px; background: rgba(5, 5, 6,.95); border-bottom: 1px solid var(--line); }
  .mobile-menu a { padding: 12px 0; border-bottom: 1px solid var(--line); color: #d1d3d7; }
  .cards-3, .road { grid-template-columns: 1fr; }
  .timeline { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .token, .join { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .feature-card { min-height: 0; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero { padding-top: 120px; }
  .hero p.lead { font-size: 15.5px; }
  .hero-feats { flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; }
  .hero-feats .feat + .feat { border-left: 0; }
  .hero-feats .feat { width: 250px; padding: 0; }
  .hero-art { height: 420px; margin-top: -60px; }
  .hero-art svg { width: 1100px; }
  .strip { margin-top: -90px; }
  .strip-inner { flex-direction: column; align-items: flex-start; gap: 14px; height: auto; padding: 22px 0; }
  .strip-label { width: auto; }
  .marquee { width: 100%; }
  .section { padding-top: 96px; }
  .cat-grid { grid-template-columns: 1fr; }
  .stats { gap: 10px; }
  .stat { padding: 20px; }
  .stat b { font-size: 32px; }
  .tokenomics { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; }
  .feature-card .ill { margin-bottom: 36px; }
  .btn-blue.hide-sm { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .mock-top { flex-direction: column; align-items: flex-start; }
  .token-card, .form-card { padding: 24px; }
}
@media (hover: none) { .fx::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mock .find { opacity: 1; transform: none; }
}

/* =========================================================
   Page background after the hero: transparent blue glass
   ========================================================= */
.page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--bg-o, 0); transition: opacity .8s ease; }
.page-bg .orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.page-bg .o1 { width: 620px; height: 620px; left: -220px; top: 8%; background: radial-gradient(closest-side, rgba(129, 136, 146, .55), transparent); animation: orb1 26s ease-in-out infinite alternate; }
.page-bg .o2 { width: 560px; height: 560px; right: -200px; top: 38%; background: radial-gradient(closest-side, rgba(148, 154, 162, .38), transparent); animation: orb2 30s ease-in-out infinite alternate; }
.page-bg .o3 { width: 760px; height: 480px; left: 30%; bottom: -260px; background: radial-gradient(closest-side, rgba(123, 130, 140, .35), transparent); animation: orb3 34s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate(220px, 160px) scale(1.15); } }
@keyframes orb2 { to { transform: translate(-260px, -120px) scale(.9); } }
@keyframes orb3 { to { transform: translate(-200px, -80px) scale(1.1); } }
.page-bg .grid { position: absolute; inset: -64px 0 0; background-image: linear-gradient(rgba(177, 181, 187, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(177, 181, 187, .055) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%); animation: gridMove 30s linear infinite; }
@keyframes gridMove { to { transform: translateY(64px); } }
.page-bg .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(5, 5, 6, .85)); }

/* Soft blue glow behind every section heading */
.section-head { position: relative; isolation: isolate; }
.section-head::before { content: ''; position: absolute; left: 50%; top: -110px; width: min(900px, 120vw); height: 420px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(135, 141, 151, .26), rgba(135, 141, 151, .08) 55%, transparent); filter: blur(6px); }
.section-head .eyebrow { background: rgba(17, 19, 22, .6); border-color: rgba(171, 176, 182, .22); box-shadow: 0 0 24px rgba(135, 141, 151, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Glass ribbons that echo the hero art inside some sections */
.sec-ribbon { position: absolute; left: 0; right: 0; height: 520px; z-index: -1; pointer-events: none; overflow: hidden; opacity: .7; }
.sec-ribbon svg { position: absolute; left: 50%; top: 0; width: max(1600px, 110vw); height: 100%; transform: translateX(-50%); overflow: visible; }
.sec-ribbon.flip svg { transform: translateX(-50%) scaleX(-1); }
.sec-ribbon .float { animation: drift2 16s ease-in-out infinite alternate; transform-box: view-box; }

/* Thin glowing divider between sections */
.beam { position: relative; height: 1px; max-width: var(--max); margin: 120px auto 0; background: linear-gradient(90deg, transparent, rgba(171, 176, 182, .35) 30%, rgba(200, 203, 207, .8) 50%, rgba(171, 176, 182, .35) 70%, transparent); }
.beam::after { content: ''; position: absolute; left: 50%; top: -30px; width: 360px; height: 60px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(148, 154, 162, .45), transparent); filter: blur(8px); }
.beam + .section { padding-top: 110px; }

/* Cards become real frosted glass over the moving light */
.glass { background:
    radial-gradient(110% 70% at 25% 0%, rgba(142, 148, 156, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(58, 62, 67, 0.42), rgba(17, 19, 21, 0.62));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.feature-card, .cat.score, .token-card, .form-card, .stat, .phase.live { background-image:
    radial-gradient(rgba(188, 192, 197, .13) 1px, transparent 1.2px),
    radial-gradient(110% 70% at 25% 0%, rgba(142, 148, 156, 0.3), transparent 60%),
    linear-gradient(180deg, rgba(58, 62, 67, 0.42), rgba(17, 19, 21, 0.62)); }
.cat, .phase, .step, .faq details, .panel, .finding, .check { background-color: rgba(15, 17, 19, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.strip { background: linear-gradient(180deg, rgba(5, 5, 6,.25), rgba(12, 14, 15,.7)); }
.footer { background: linear-gradient(180deg, transparent, rgba(25, 28, 32, .35)); }

@media (max-width: 640px) {
  .page-bg .orb { filter: blur(60px); }
  .page-bg .o1 { width: 380px; height: 380px; }
  .page-bg .o2 { width: 340px; height: 340px; }
  .sec-ribbon { height: 360px; opacity: .55; }
  .beam { margin-top: 90px; }
  .beam + .section { padding-top: 80px; }
}

/* =========================================================
   Seamless transitions: no visible edges between hero and the rest
   ========================================================= */
/* The glass art may now spill below the hero instead of being cut off... */
.hero { overflow-x: clip; overflow-y: visible; }
/* ...and it melts away with a soft fade instead of ending on a line. */
.hero-art {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.15) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.15) 92%, transparent 100%);
}
/* A long blue haze that carries the hero light down into the next section */
.hero::after {
  content: ''; position: absolute; left: 50%; bottom: -320px; width: min(1700px, 140vw); height: 520px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(132, 138, 148, .22), rgba(132, 138, 148, .08) 55%, transparent 75%);
  filter: blur(20px); pointer-events: none; z-index: -1;
}

/* Chain strip without hard borders or a blurred box: lines fade out at both ends */
.strip {
  border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background:
    linear-gradient(90deg, transparent, rgba(194, 197, 202, .16) 25%, rgba(194, 197, 202, .16) 75%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(194, 197, 202, .12) 25%, rgba(194, 197, 202, .12) 75%, transparent) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(8, 9, 11, .55) 50%, rgba(5, 5, 6, 0));
}
.strip::before, .strip::after { opacity: .45; }

/* Section dividers become a soft glow only, no line */
.beam { background: none; height: 0; }
.beam::after { top: -60px; width: min(900px, 90vw); height: 120px; background: radial-gradient(closest-side, rgba(148, 154, 162, .22), transparent); filter: blur(16px); }

/* Ribbons fade at their top and bottom so their box never shows */
.sec-ribbon { -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }

/* Footer: no hard top border */
.footer { border-top: 0; background: linear-gradient(180deg, transparent, rgba(25, 28, 32, .3) 60%, rgba(25, 28, 32, .45)); }
.footer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(194, 197, 202, .14) 30%, rgba(194, 197, 202, .14) 70%, transparent); }
.foot-bottom { border-top: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 20%, rgba(255,255,255,.07) 80%, transparent) top / 100% 1px no-repeat; }

/* Page light starts faintly under the hero already, so there is no jump when it fades in */
.page-bg { opacity: calc(.35 + var(--bg-o, 0) * .65); }

/* Strip: no lines at all, just a soft dark band that fades in and out */
.strip { background: linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(8, 9, 11, .5) 50%, rgba(5, 5, 6, 0)); }
@media (max-width: 640px) {
  .strip-inner { padding: 22px 16px; }
  .hero-art { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.4) 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.4) 75%, transparent 100%); }
}

/* =========================================================
   Silver theme: chrome surfaces with dark text, graphite
   background and a soft champagne accent
   ========================================================= */
:root {
  --chrome: linear-gradient(180deg, #ffffff 0%, #e4e7eb 38%, #b9bec5 70%, #9aa0a8 100%);
  --chrome-hover: linear-gradient(180deg, #ffffff 0%, #eef0f3 40%, #c9cdd3 75%, #aab0b8 100%);
  --ink: #0b0c0f;
  --gold: #d8c7a3;
}
.btn-blue, .pill .tag, .brand-mark, .step.active .num {
  background: var(--chrome); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 -2px 0 rgba(0,0,0,.12) inset, 0 6px 22px rgba(200, 206, 214, .28);
}
.btn-blue:hover { background: var(--chrome-hover); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 8px 30px rgba(220, 225, 232, .4); }
.brand-mark svg circle[stroke] { stroke: var(--ink); }
.brand-mark svg circle[fill="#fff"] { fill: var(--ink); }
.btn-white { background: linear-gradient(180deg, #ffffff, #e9ebee); }
.btn-white:hover { background: #ffffff; box-shadow: 0 10px 40px -8px rgba(225, 230, 236, .55); }
.btn-shine::after { background: linear-gradient(100deg, transparent, rgba(150, 156, 165, .35), transparent); }
.shine { background-image: linear-gradient(100deg, #ffffff 20%, #b9bec6 38%, #e9dcc0 50%, #ffffff 62%); }
.score-big b, .stat b, .price { background-image: linear-gradient(180deg, #ffffff, #a9afb7); }
.page-bg .o3 { background: radial-gradient(closest-side, rgba(216, 199, 163, .16), transparent); }
.aura.a2 { background: radial-gradient(closest-side, rgba(216, 199, 163, .12), transparent); }
.timeline i.on { background: var(--chrome); border-color: #fff; box-shadow: 0 0 0 6px rgba(220, 225, 232, .14), 0 0 16px rgba(230, 234, 240, .6); }
.eyebrow { color: #d9dce1; }
.mini-tag { color: #d3d6db; }
::selection { background: rgba(200, 206, 214, .35); color: #fff; }
.footer::after { display: none; }

/* =========================================================
   Scroll experience
   ========================================================= */
/* Smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Silver scrollbar */
html { scrollbar-color: #9aa0a8 #0b0c0f; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #08090b; }
::-webkit-scrollbar-thumb { border-radius: 10px; border: 2px solid #08090b; background: linear-gradient(180deg, #f2f3f5, #b9bec5 45%, #7e848d); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffffff, #cfd3d8 45%, #9aa0a8); }
::-webkit-scrollbar-corner { background: #08090b; }

/* Reading progress line */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, #7e848d, #f4f5f7 60%, #d8c7a3); box-shadow: 0 0 12px rgba(230, 234, 240, .55); pointer-events: none; }

/* Pinned scene: words light up over silver waves */
.scene { position: relative; height: 340vh; }
.scene-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
#waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 50%, transparent 30%, rgba(5, 5, 6, .55) 80%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.scene-inner { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; }
.scene-text, .scene-grid-wrap { grid-area: 1 / 1; will-change: transform, opacity; }
.scene-text .eyebrow { margin-bottom: 28px; }
.manifesto { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.12; font-weight: 500; letter-spacing: -0.035em; max-width: 1050px; margin: 0 auto; }
.manifesto .w { display: inline-block; opacity: .14; filter: blur(2px); transition: opacity .35s ease, filter .35s ease, color .35s ease; }
.manifesto .w.on { opacity: 1; filter: none; }
.manifesto .w.key { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.manifesto .w.key.on { background: linear-gradient(100deg, #ffffff, #c9cdd3 45%, #e9dcc0 70%, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scene-grid-wrap { width: 100%; max-width: 980px; opacity: 0; pointer-events: none; }
.scene-grid-wrap.live { pointer-events: auto; }
.scene-grid-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 32px; }
.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 118px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 43, 48, .55), rgba(12, 13, 16, .7)); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(40px) scale(.94); }
.tile svg { width: 26px; height: 26px; }
.tile b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.tile small { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tile small i { width: 6px; height: 6px; border-radius: 50%; background: #5d636b; }
.tile small i.up { background: var(--green); box-shadow: 0 0 8px var(--green); }
.scene-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; }
.scene-hint span { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, #e6e8eb); animation: hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Blocks that tilt up into place while you scroll (3D mockup feel) */
.tilt-in { transform-origin: 50% 100%; will-change: transform; }

@media (max-width: 640px) {
  .scene { height: 300vh; }
  .scene-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tile { height: 78px; gap: 6px; border-radius: 12px; }
  .tile svg { width: 20px; height: 20px; }
  .tile b { font-size: 12px; }
  .tile small { top: 6px; right: 7px; font-size: 0; }
  .scene-grid-title { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene-sticky { position: relative; height: auto; padding: 120px 0; }
  .scene-text, .scene-grid-wrap { grid-area: auto; }
  .scene-inner { gap: 60px; }
  .manifesto .w { opacity: 1; filter: none; }
  .scene-grid-wrap, .tile { opacity: 1; transform: none; }
}
/* Hero art sinks and grows slightly while scrolling */
.hero-art svg { transform: translateX(-50%) translateY(calc(var(--hs, 0) * 90px)) scale(calc(1 + var(--hs, 0) * .1)); transform-origin: 50% 0; }
.hero-copy { will-change: transform, opacity; }
/* Seamless scene: no dark layer, the waves themselves fade at the top and bottom */
.scene-shade { background: none; }
#waves { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
/* 13 chains: centred rows (5 + 5 + 3 on desktop) */
.scene-grid-wrap { max-width: 1100px; }
.scene-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.scene-grid .tile { flex: 0 0 calc((100% - 48px) / 5); }
@media (max-width: 640px) { .scene-grid .tile { flex-basis: calc((100% - 16px) / 3); } }
/* Official chain logos */
.chain-logo img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.tile img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); transition: transform .35s var(--ease); }
.tile:hover img { transform: scale(1.08); }
@media (max-width: 640px) { .tile img { width: 26px; height: 26px; border-radius: 7px; } }

/* =========================================================
   Holt brand: logo tile, lore section, Holt-green touches
   ========================================================= */
:root { --holt: #2a6a49; --holt-deep: #103322; }
.brand-mark { background: none !important; box-shadow: none !important; width: 30px; height: 30px; }
.brand-mark img { width: 30px; height: 30px; display: block; }
.lore-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.lore-copy h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; font-weight: 500; letter-spacing: -0.035em; margin: 22px 0 22px; }
.lore-copy h2 .serif { background: linear-gradient(100deg, #ffffff 15%, #a8d5bd 55%, #ffffff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.lore-copy p { color: #a9aeb6; font-size: 16.5px; line-height: 1.7; margin-bottom: 16px; max-width: 560px; }
.lore-copy p b { color: #eef0f3; font-weight: 500; }
.lore-copy code, .lore-ledger code { font-family: var(--mono); font-size: .88em; color: #dfe3e8; background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 6px; }
.lore-cta { margin-top: 26px; }
.lore-ledger { padding: 26px; }
.lore-ledger::before { background: linear-gradient(180deg, rgba(168, 213, 189, .55), rgba(90, 120, 110, .12) 35%, rgba(255,255,255,.04) 75%, rgba(168, 213, 189, .2)) !important; }
.ledger-head { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ledger-head img { border-radius: 6px; }
.ledger-head .live-dot { margin-left: auto; }
.ledger-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.07); font-size: 14.5px; }
.ledger-row span { color: var(--muted); }
.ledger-row b { font-weight: 500; font-size: 13.5px; color: #eef0f3; text-align: right; }
.ledger-row a:hover { color: #a8d5bd; }
.ledger-note { margin-top: 16px; font-size: 13px; color: var(--dim); }
@media (max-width: 1000px) { .lore-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) { .ledger-row { font-size: 13px; } .ledger-row b { font-size: 12px; } .lore-ledger { padding: 20px; } }