/* Styles inspired by huey.webby.fun, adapted for One Dollar */
:root{
  --bg:#061a3d; /* deeper navy */
  --cyan:#8af1ff;
  --cyan-strong:#26c7f6;
  --text:#e8fbff;
  --muted:#9fe7fb;
  --card:#0a214e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"ABeeZee", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Background blobs closer to source */
.bg-blur{position:fixed;inset:-25% -10% auto -10%;height:70vh;pointer-events:none;filter:blur(80px);background:
  radial-gradient(600px 400px at 15% 10%, rgba(138,241,255,.28), transparent 60%),
  radial-gradient(700px 450px at 85% 15%, rgba(38,199,246,.18), transparent 60%)}

/* Header similar spacing */
.header{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:64px;height:64px;object-fit:contain;border-radius:16px;background:#081a3c;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.wordmark{font-family:"Poppins", system-ui, sans-serif;font-weight:800;font-size:28px;color:var(--cyan)}
.socials{display:flex;gap:14px}
.icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(138,241,255,.35);background:linear-gradient(180deg,#112a5c,#0b1d3e);color:var(--cyan);text-decoration:none;font-weight:800;letter-spacing:.3px}

/* HERO — big centered heading and CTA */
.hero{padding:48px 0 8px;display:flex;flex-direction:column;align-items:center;text-align:center}
.title{font-family:"Poppins", system-ui, sans-serif;font-weight:800;font-size:clamp(56px,8.5vw,104px);line-height:1.02;color:var(--cyan);text-shadow:0 2px 0 #06405a, 0 18px 60px rgba(38,199,246,.35)}
.contract{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 26px;padding:10px 14px;border:1px solid rgba(138,241,255,.35);background:linear-gradient(180deg,#102a5e,#0b1e41);border-radius:999px}
.contract span{color:var(--muted)}
.contract code{color:var(--text)}
.copy{appearance:none;border:0;background:var(--cyan-strong);color:#00121e;padding:9px 14px;border-radius:999px;font-weight:800;cursor:pointer}
.hero-ctas{display:flex;gap:14px}
.btn{display:inline-block;background:linear-gradient(180deg,#34d7ff,#1cc0f4);color:#00121e;padding:16px 26px;border-radius:20px;text-decoration:none;font-weight:900;letter-spacing:.3px;box-shadow:0 16px 40px rgba(38,199,246,.4)}

/* STORY section (long paragraph) */
.about{padding:70px 0}
.about h2{font-family:"Poppins", system-ui, sans-serif;font-size:clamp(28px,5vw,52px);color:var(--cyan);text-align:center;margin:0 0 18px}
.about p{max-width:900px;margin:0 auto;color:#7fd5ee;font-size:19px;line-height:1.9}
.about p + p{margin-top:12px}

/* HOW-TO cards */
.how{background:#081c41;padding:74px 0;border-top:1px solid rgba(138,241,255,.15);border-bottom:1px solid rgba(138,241,255,.15)}
.how h2{font-family:"Poppins", system-ui, sans-serif;font-size:clamp(28px,5vw,48px);color:var(--cyan);text-align:center;margin:0 0 28px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:linear-gradient(180deg,#122e63,#0b1f42);border:1px solid rgba(138,241,255,.28);border-radius:18px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.step h3{font-family:"Poppins", system-ui, sans-serif;margin:0 0 8px;color:var(--cyan)}
.step p{margin:0;color:#8fdcf2}

.footer{padding:28px 0;text-align:center;color:#8fdcf2;background:#071736}

@media (max-width: 960px){
  .steps{grid-template-columns:1fr}
  .contract{border-radius:16px}
}