@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#080b12;--surface:#111820;--line:#26352f;--text:#ecf6f0;--muted:#94a6a0;--green:#a0f7ba}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Space Grotesk',sans-serif}
.header{height:86px;max-width:1440px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px;font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.05em}
.accent{color:var(--green)}
.logo{display:grid;place-items:center;width:40px;height:40px;background:linear-gradient(135deg,#baffd1,#55cda0);color:#092015;border-radius:12px;font-size:28px}
nav,.header-actions{display:flex;align-items:center;gap:30px}
nav a,.login{color:#a0b0a8;font-size:12px;font-weight:700}
nav a:hover,.login:hover{color:white}
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:16px 22px;border-radius:9px;background:#a4f1bb;color:#0b2116;font-weight:800;font-size:12px;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px);background:#c7ffda}
.button.small{padding:12px 17px}
.hero{max-width:1440px;margin:35px auto 0;padding:85px 40px 110px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;min-height:610px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;color:#8fe2ac}
.dot{display:inline-block;width:7px;height:7px;background:#8df0b1;border-radius:50%;margin-right:9px;box-shadow:0 0 15px #8df0b177}
h1{font-size:clamp(45px,5vw,76px);line-height:1.08;letter-spacing:-.065em;margin:25px 0}
h1 span,.cta h2 span{color:var(--green)}
.lead{font-size:15px;line-height:1.9;color:var(--muted);max-width:540px}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}
.secondary{font-size:12px;font-weight:700;color:#b9d1c2}
.secondary:hover{color:white}
.disclaimer{font-size:10px;color:#738c7e;margin-top:25px}
.visual{min-height:340px;border:1px solid #355544;background:radial-gradient(circle at 50% 40%,#214735,#101b1a 70%);border-radius:18px;padding:25px;box-shadow:0 35px 100px #0005}
.visual-title,.visual-footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.1em;font-weight:800;color:#a7cbb4}
.visual-title span:last-child{color:#80e7a6}
.flow{min-height:245px;display:flex;justify-content:center;align-items:center}
.wallet{min-width:0;flex:1;text-align:center;background:#15261f;border:1px solid #416b50;border-radius:11px;padding:15px 7px;box-shadow:0 0 35px #4efa9210}
.wallet small,.wallet span{display:block;font-size:8px;color:#89b99c}
.wallet strong{display:block;font:600 11px monospace;color:#d6fbe1;margin:10px 0}
.wallet.source{border-color:#a0f7ba}
.wallet.target{border-color:#e6ba80}
.connection{height:2px;flex:0 0 22px;background:linear-gradient(90deg,#a0f7ba,#548d6e)}
.visual-footer{color:#668d78;font-size:9px}
.section{max-width:1440px;margin:auto;padding:85px 40px}
.section-heading{max-width:700px;margin-bottom:45px}
.section-heading h2{font-size:clamp(30px,3.3vw,48px);letter-spacing:-.055em;line-height:1.2;margin:18px 0}
.section-heading p{color:var(--muted);line-height:1.8}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#111820;border:1px solid #26352f;border-radius:15px;padding:32px;min-height:260px}
.card-icon{font-size:35px;color:var(--green)}
.card h3{font-size:21px;letter-spacing:-.04em;margin:25px 0 12px}
.card p{color:var(--muted);font-size:13px;line-height:1.8}
.card-tag{display:inline-block;margin-top:15px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#a0f7ba}
.card-tag.upcoming{color:#e6ba80}
.how{border-top:1px solid #202b27}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.steps>div{border-top:1px solid #41634d;padding-top:25px}
.steps span{color:var(--green);font:600 27px 'Space Grotesk',sans-serif}
.steps h3{font-size:23px;margin:22px 0 10px}
.steps p{color:var(--muted);font-size:13px;line-height:1.8}
.cta{text-align:center;padding:100px 25px;background:radial-gradient(ellipse at center,#183527,#0c1513 65%,#080b12);border-top:1px solid #253d30}
.cta h2{font-size:clamp(28px,3.7vw,49px);line-height:1.25;letter-spacing:-.055em;margin:25px auto 35px}
footer{border-top:1px solid #26352f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:30px 40px;color:#73887d;font-size:11px}
@media(max-width:950px){.hero{grid-template-columns:1fr;padding-top:55px}.visual{max-width:650px;width:100%}.cards{grid-template-columns:1fr}.steps{gap:18px}}
@media(max-width:650px){.header{height:auto;min-height:75px;padding:15px 18px;flex-wrap:wrap}.brand{font-size:16px}.header nav{display:none}.header-actions{gap:12px}.header-actions .button{font-size:10px;padding:10px}.hero{padding:45px 20px 70px;margin:0;gap:35px;min-height:0}h1{font-size:45px}.lead{font-size:13px}.visual{padding:15px;min-height:270px}.flow{min-height:195px}.wallet{padding:12px 4px}.wallet strong{font-size:9px}.connection{flex-basis:12px}.section{padding:65px 20px}.steps{grid-template-columns:1fr}.cta{padding:75px 20px}footer{padding:25px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* CHAINSENTINEL — LIVE INDEXING STATS */
.home-stats {
  display: flex;
  align-items: center;
  gap: 42px;
  flex-wrap: wrap;
  margin-top: 38px;
  padding-top: 25px;
  border-top: 1px solid #294037;
}

.home-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-stat strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
  color: #a0f7ba;
  font-variant-numeric: tabular-nums;
}

.home-stat span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #91a99b;
}

@media(max-width:650px) {
  .home-stats {
    gap: 25px;
    margin-top: 30px;
  }

  .home-stat strong {
    font-size: 31px;
  }

  .home-stat span {
    font-size: 8px;
  }
}
