:root{
  /* 8-point spacing system */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* restored original green theme */
  --brand: #059669;      /* emerald-600 (original) */
  --brand-700: #047857;  /* darker emerald for hover */
  --ring: rgba(5,150,105,.25);

  --bg: #ffffff;
  --bg-soft: #eefaf2;
  --text: #0f172a;
  --muted: #475569;

  --card: #ffffff;
  --border: rgba(15,23,42,.08);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 12px;

  /* subtle halo color (used sparingly) */
  --card-halo: rgba(110,231,183,0.10);
}

/* ----------------------
   Reset / base
   ---------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(to bottom, var(--bg), var(--bg-soft));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container uses 8pt horizontal padding */
.container{max-width:1140px;margin:0 auto;padding:0 var(--space-2)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* icons */
.material-icons{
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size:20px;
  line-height:1;
  display:inline-block;
  vertical-align:middle;
  color:var(--brand-700);
  margin-right:8px;
}

/* ----------------------
   Buttons / pills
   ---------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--brand);color:white;border:1px solid var(--brand);
  padding:calc(var(--space-1) * 0.95) var(--space-2);border-radius:10px;font-weight:600;box-shadow:var(--shadow);
  transition:background .12s ease;
}
.btn:hover{background:var(--brand-700)}
.btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.secondary{background:#e2e8f0;color:#0f172a;border-color:#e2e8f0}
.btn.full{width:100%;justify-content:center}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:calc(var(--space-1) * .45) var(--space-2);border-radius:999px;border:1px solid var(--border);
  background:#ffffffb3;backdrop-filter:blur(6px);font-size:.9rem;color:#0f172a;
  box-shadow:0 2px 8px rgba(2,6,23,.06)
}
.pill.small{padding:4px 8px;font-size:.78rem}

/* ----------------------
   Nav
   ---------------------- */
.nav{position:sticky;top:0;z-index:60;background:#ffffffb3;border-bottom:1px solid var(--border);backdrop-filter:blur(6px);padding:var(--space-1)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.brand{display:flex;align-items:center;gap:var(--space-2)}
.logo{height:36px;width:36px;border-radius:.9rem;background:var(--brand);display:grid;place-content:center;color:white;font-weight:900;box-shadow:var(--shadow)}
.brand-name{font-weight:800;font-size:1.1rem}
.nav-links{display:none;gap:var(--space-2)}
.nav-links a{color:#0f172a}
.nav-cta{display:none}
.hamburger{display:inline-flex;flex-direction:column;gap:6px;background:transparent;border:0;padding:var(--space-1);border-radius:8px}
.hamburger span{width:24px;height:2px;background:#0f172a;display:block;border-radius:2px}

/* mobile menu (full panel) */
.mobile-menu{
  display:none;flex-direction:column;padding:var(--space-3);border-bottom:1px solid var(--border);background:white;
  position:fixed; inset:var(--space-3) 0 0 0; z-index:70; overflow:auto; gap:var(--space-2);
}
.mobile-menu a{padding:var(--space-2) 0}
.mobile-menu .btn.full{padding:calc(var(--space-1) * .9)}
.mobile-menu.show{display:flex}

@media(min-width:900px){
  .nav-links{display:flex}
  .nav-cta{display:block}
  .hamburger{display:none}
  .mobile-menu{display:none!important}
}

/* ----------------------
   Hero
   ---------------------- */
.hero{position:relative;padding:calc(var(--space-4) + var(--space-1)) 0 calc(var(--space-3) + var(--space-1)) 0}
.hero::before{content:"";position:absolute;inset:-80px auto auto 50%;transform:translateX(-50%);width:520px;height:520px;background:rgba(110,231,183,.35);filter:blur(60px);border-radius:50%;z-index:-1}
.hero-inner{display:grid;gap:var(--space-3)}
.accent{color:var(--brand-700)}
.meta{margin-top:var(--space-2);font-size:.95rem;color:var(--muted)}
.meta .links{display:flex;gap:var(--space-2);margin-top:6px}

/* hero cards grid (responsive) */
.hero-cards{display:grid;gap:var(--space-3);grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));}

/* ----------------------
   Cards / features / stats
   ---------------------- */
.card, .feature, .stat {
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-2);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}

/* subtle halo moved to right/bottom to avoid horizontal overflow */
.card::before, .feature::before, .stat::before{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-28px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 40% 30%, var(--card-halo), transparent 40%);
  filter:blur(14px);z-index:-1;opacity:1;
  pointer-events:none;
}

/* Prevent halo for overview-specific elements to keep grid compact */
.overview-main::before, .bento-card::before { display: none; }

/* remove card hover transforms for consistent spacing */
.card, .feature, .stat { transition: none; }

/* card title / body */
.card-title{display:flex;align-items:center;gap:.6rem;font-weight:600;margin-bottom:.25rem;color:var(--text)}
.card-body, .feature p, .stat p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.35}

/* feature icon container */
.feature .fi{width:40px;height:40px;border-radius:.8rem;background:#f1f5f9;display:grid;place-content:center;margin-bottom:var(--space-1)}
.feature .fi .material-icons{color:var(--text);font-size:20px}

/* ----------------------
   Grid helpers (8pt)
   ---------------------- */
.card-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-3{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ----------------------
   Stats
   ---------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.stat{padding:var(--space-2)}
.stat .label{font-size:.85rem;color:#64748b}
.stat .value{font-size:1.3rem;font-weight:800}
.stat .hint{font-size:.78rem;color:#64748b;margin-top:6px}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ----------------------
   Bento grid (overview)
   ---------------------- */
section { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.section-head {
    text-align: center;
}

/* master overview grid */
.overview-grid { display:grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .overview-grid { grid-template-columns: 1.6fr 1fr; } }

/* featured main card */
.overview-main { padding: var(--space-3); background: linear-gradient(180deg, rgba(5,150,105,0.03), rgba(5,150,105,0.01)); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); }
.overview-main-inner { display:flex;flex-direction:column;gap:var(--space-2) }
.overview-main-top { display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;flex-wrap:wrap }
.overview-stat { display:flex;flex-direction:column;gap:6px }
.overview-stat-value { font-size:1.5rem; font-weight:800; color:var(--brand-700); line-height:1.05; }
.overview-stat-sub { font-size:0.95rem; color:var(--muted); }

/* CTA area in the main card */
.overview-actions { display:flex; gap: var(--space-2); margin-top: var(--space-1); }
@media (max-width:899px) {
  .overview-actions { width:100%; gap:var(--space-2); }
  .overview-actions .btn { flex: 1 1 auto; }
}

/* main body copy */
.overview-main-copy p { margin:0; color:var(--muted); font-size:0.98rem; line-height:1.4; }

/* Bento grid (compact facts) */
.bento-grid { display:grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); align-items:stretch; }
.bento-card { display:flex; flex-direction:column; gap:8px; padding: calc(var(--space-2) - 2px); border-radius:10px; border:1px solid var(--border); background:var(--card); box-shadow:0 8px 18px rgba(2,6,23,0.04); min-height:78px; }
.bento-value { font-size:1.05rem; font-weight:800; color:var(--text); line-height:1; }
.bento-value.small-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:0.95rem; letter-spacing:0.02em; }
.bento-title { font-size:0.95rem; font-weight:700; color:var(--text); }
.bento-note { font-size:0.86rem; color:var(--muted); line-height:1.3; }

/* ensure consistent spacing between features and overview */
.overview-features { margin-top: var(--space-3); }

/* ----------------------
   FAQ / CTA / Footer
   ---------------------- */
.faq details{background:white;border:1px solid var(--border);border-radius:1rem;padding:var(--space-2);margin:var(--space-2) 0;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted)}

.cta{background:linear-gradient(90deg, rgba(16,185,129,.04), rgba(5,150,105,.03))}
.center{text-align:center}

.footer{border-top:1px solid var(--border);background:white;padding-top:var(--space-3)}
.footer-grid{display:grid;gap:var(--space-2);padding:var(--space-2) 0}
.footer-grid h5{margin:.3rem 0}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:.4rem 0}
.footer .muted{color:var(--muted)}
.footer .tiny{font-size:.75rem}
.footer-bottom{display:flex;flex-direction:column;gap:var(--space-1);justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:var(--space-2) 0}
.footer .links{display:flex;gap:var(--space-2)}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}.footer-bottom{flex-direction:row}}

/* ----------------------
   Utilities / accessibility
   ---------------------- */
h1{font-size:2.4rem;line-height:1.1;margin:.6rem 0}
h3{margin:.4rem 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.muted{color:var(--muted)}

:focus{outline:none}
button:focus, a:focus, input:focus{
  box-shadow:0 0 0 6px var(--ring);border-radius:8px;outline:2px solid transparent;
}

/* prevent halo overflow on small screens */
@media (max-width:520px) {
  .card::before, .feature::before, .stat::before { display:none; }
  .hero::before { display:none; }
}

/* Feature row (bars, not cards) */
.feature-row {
  display: grid;
  gap: calc(var(--space-2) / 1.2);
  grid-template-columns: 1fr;
  margin-top: calc(var(--space-2));
}

/* desktop: three small bars inline */
@media (min-width: 900px) {
  .feature-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
}

.feature-bar {
  display: flex;
  gap: calc(var(--space-2) * 0.6);
  align-items: flex-start;
  padding: calc(var(--space-1) * 0.75) calc(var(--space-2) * 0.9);
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.995));
  box-shadow: 0 6px 16px rgba(2,6,23,0.03);
}

/* icon container kept consistent */
.feature-bar .fi { width:36px; height:36px; border-radius:8px; display:grid; place-content:center; background:#f8faf6; flex-shrink:0; }
.feature-bar .material-icons { font-size:18px; color:var(--text); }

/* title + always-visible muted detail */
.feature-bar-body { display:flex; flex-direction:column; gap:4px; }
.feature-bar-title { font-weight:700; font-size:0.98rem; color:var(--text); }
.feature-bar-note { font-size:0.86rem; color:var(--muted); line-height:1.3; }

/* ---- stake-flow (3 step) ---- */
.stake-flow {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

/* desktop: three columns */
@media (min-width: 900px) {
  .stake-flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}

/* step card */
.stake-step {
  display:flex;
  gap: var(--space-2);
  align-items:flex-start;
  padding: calc(var(--space-2) - 2px);
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.995));
  box-shadow: 0 8px 20px rgba(2,6,23,0.04);
}

/* number circle */
.step-num {
  min-width:40px; min-height:40px; width:40px; height:40px;
  border-radius:999px; background:var(--brand); color:white;
  display:grid; place-content:center; font-weight:800; font-size:1rem;
  box-shadow: var(--shadow); flex-shrink:0;
}

/* step textual content */
.step-body { display:flex; flex-direction:column; gap:6px; }
.step-title { font-weight:700; font-size:1rem; color:var(--text); }
.step-desc { font-size:0.95rem; color:var(--muted); line-height:1.35; margin:0; }
.step-detail { font-size:0.86rem; color:var(--muted); margin-top:4px; }

/* ensure the step text is visually de-emphasized but always visible */
.step-desc, .step-detail { opacity:0.95; }

/* make steps equal height on wide screens */
@media (min-width:900px) {
  .stake-step { min-height: 106px; }
}

/* ---- improved actions center ---- */
.stake-actions {
  display:flex; align-items:center; gap:var(--space-2); justify-content:center; flex-wrap:wrap;
}
.btn-large { padding: calc(var(--space-1) * 1.2) calc(var(--space-2) * 1.2); font-size:1rem; border-radius:12px; }
.stake-actions .micro-links { display:flex; gap:calc(var(--space-1)); align-items:center; font-size:0.9rem; color:var(--muted); }
.stake-actions .micro-links a { color:var(--muted); text-decoration:underline; }
.stake-actions .micro-links a:hover { color:var(--brand-700); }

/* responsive: stack CTAs on small screens */
@media (max-width: 680px) {
  .stake-actions { flex-direction:column; gap:var(--space-2); }
  .feature-row { gap: var(--space-2); }
}

/* tiny visual tweak to ensure feature-bar vs card spacing consistency */
.feature-row, .stake-flow { margin-bottom: calc(var(--space-2)); }