:root {
  --blue: #2E5BFF;
  --teal: #20E3B2;
  --ink: #0B1020;
  --slate: #CBD5E1;
  --white: #F9FAFB;
  --gradient: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);
  --radius-xl: 1.25rem;
  --radius-lg: .875rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  --shadow: 0 4px 16px -2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin:0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; background: var(--white); color: var(--ink); line-height:1.5; }
h1,h2,h3,h4 { font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0 0 .75rem; }
p { margin:0 0 1rem; }
a { color: var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
.container { width:100%; max-width:1200px; margin:0 auto; padding: clamp(1rem, 3vw, 3rem); }
header.site-header { position:sticky; top:0; backdrop-filter: blur(18px); background: rgba(11,16,32,.82); border-bottom:1px solid rgba(255,255,255,.08); z-index:40; }
.site-header .inner {
  display:flex;
  align-items:center;
  gap:1.25rem;
  width:100%;
  padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 3rem);
}
.logo-lockup {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:600;
  color: var(--white);
  font-size:1.125rem;
  letter-spacing:.5px;
  text-transform:lowercase;
}
nav { margin-left:auto; display:flex; gap:.35rem; }
nav a { font-size:.875rem; font-weight:500; padding:.65rem 1rem; border-radius: var(--radius-md); color: var(--slate); display:inline-flex; align-items:center; gap:.35rem; }
.logo-lockup svg { flex-shrink:0; }
nav a:hover { background:rgba(255,255,255,.06); color:var(--white); }
.logo-mark { width:48px; height:48px; border-radius:1rem; box-shadow: var(--shadow-sm); }
.btn { --btn-bg: var(--blue); --btn-color: #fff; cursor:pointer; font-weight:600; display:inline-flex; gap:.5rem; align-items:center; border:none; background:var(--btn-bg); color:var(--btn-color); padding:.9rem 1.25rem; font-size:.95rem; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 6px 16px -4px rgba(46,91,255,.4); position:relative; transition: background .25s, transform .25s, box-shadow .25s; }
.btn:hover { background:#244bcc; transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn.alt { --btn-bg: var(--ink); }
.btn.gradient { background: var(--gradient); box-shadow: 0 4px 20px -2px rgba(32,227,178,.4), 0 6px 24px -6px rgba(46,91,255,.5); }
.btn.gradient:hover { filter: brightness(.95); }
.hero { position:relative; background: radial-gradient(circle at 70% 30%, rgba(32,227,178,.18), transparent 60%), var(--ink); color: var(--white); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(140deg, rgba(46,91,255,.55) 0%, rgba(32,227,178,.55) 60%, transparent 85%); mix-blend-mode: overlay; pointer-events:none; }
.hero-grid { display:grid; gap:3rem; align-items:center; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); background: linear-gradient(110deg, var(--white), var(--slate)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { font-size: clamp(1.05rem, 1.4vw, 1.35rem); max-width: 640px; color: var(--slate); font-weight:400; }
.pill { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; text-transform: uppercase; letter-spacing:.15em; background: rgba(255,255,255,.08); padding:.5rem .9rem; border-radius:999px; color: var(--slate); font-weight:600; margin-bottom:1.25rem; backdrop-filter: blur(4px); }
.features { background: var(--white); position:relative; }
.feature-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.card { background: #fff; border:1px solid #E2E8F0; padding:1.4rem 1.25rem 1.7rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position:relative; display:flex; flex-direction:column; gap:.75rem; }
.card .icon { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background: var(--gradient); color: #fff; font-weight:600; font-size:1.15rem; box-shadow: 0 4px 14px -4px rgba(46,91,255,.55), 0 6px 18px -6px rgba(32,227,178,.35); }
.card h3 { font-size:1.05rem; margin:0 0 .25rem; }
.card p { font-size:.85rem; color:#475569; margin:0; }
.divider { height:1px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent); margin:4rem 0 3rem; }
.section-head { display:flex; flex-direction:column; gap:.5rem; margin-bottom:2rem; }
.section-head h2 { font-size: clamp(1.75rem,3.2vw,2.3rem); }
.values-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.value { background: var(--ink); color: var(--white); padding:1.25rem 1.15rem 1.3rem; border-radius: var(--radius-lg); position:relative; overflow:hidden; font-size:.85rem; line-height:1.4; }
.value::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(32,227,178,.35), transparent 60%); opacity:.9; }
.value h3 { margin:0 0 .35rem; font-size:.95rem; letter-spacing:.5px; font-weight:600; }
.cta-band { background: var(--gradient); color:#fff; border-radius: var(--radius-xl); padding: clamp(1.75rem,3.5vw,3.25rem); position:relative; overflow:hidden; box-shadow: var(--shadow); }
.cta-band::after { content:""; position:absolute; inset:0; background: linear-gradient(45deg, rgba(255,255,255,.15), transparent 60%); mix-blend-mode: overlay; }
.cta-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.25rem; }
footer { background: var(--ink); color: var(--slate); padding:3.2rem 0 2.8rem; margin-top:4rem; font-size:.75rem; }
footer a { color: var(--slate); opacity:.8; }
footer a:hover { opacity:1; }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.small-logo { width:40px; height:40px; border-radius:12px; background:var(--gradient); display:grid; place-items:center; box-shadow: var(--shadow-sm); }
.token-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.1rem; }
.token { font-size:.6rem; letter-spacing:.12em; font-weight:600; padding:.45rem .6rem; border-radius:6px; background:var(--ink); color:var(--slate); border:1px solid rgba(255,255,255,.08); }
.palette { display:grid; gap:.9rem; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); margin-top:1rem; }
.swatch { border-radius:10px; padding:.75rem .6rem 1.1rem; background:#fff; border:1px solid #E2E8F0; font-size:.6rem; font-weight:500; position:relative; min-height:74px; display:flex; flex-direction:column; justify-content:space-between; }
.swatch span { font-size:.65rem; font-weight:600; letter-spacing:.03em; }
.swatch .chip { height:28px; border-radius:8px; margin-bottom:.5rem; }
.gradient-chip { background: var(--gradient); }
/* Responsive adjustments */
@media (max-width: 880px) { nav { display:none; } header.site-header { position:static; } }
@media (max-width:600px) { .hero-grid { gap:2.25rem; } .logo-mark { width:44px; height:44px; } }