:root{
    --slate:#1e293b; --slate-strong:#0f172a; --bronze:#b45309; --bronze-soft:#f59e0b;
    --paper:#faf7f2; --white:#ffffff; --ink:#1e293b; --muted:#64748b; --line:#e7e2d9;
    --tg:#2AABEE; /* Telegram blue */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink); background:var(--paper); line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:960px;margin:0 auto;padding:0 20px}
  a{color:inherit}

  /* Header */
  header{padding:22px 0}
  .brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--slate-strong)}
  .brand svg{width:34px;height:34px;display:block}
  .brand .kudi{color:var(--slate-strong)} .brand .wallet{color:var(--bronze)}

  /* Hero */
  .hero{padding:44px 0 12px;text-align:center}
  .badge{display:inline-block;font-size:12.5px;font-weight:700;color:var(--bronze);
    background:#fff4e6;border:1px solid #fde3c2;border-radius:999px;padding:5px 12px;margin-bottom:20px;letter-spacing:.02em}
  .hero h1{font-size:clamp(30px,6vw,50px);line-height:1.08;letter-spacing:-.03em;color:var(--slate-strong);font-weight:850}
  .hero h1 .hl{color:var(--bronze)}
  .hero p.sub{max-width:620px;margin:18px auto 0;font-size:clamp(16px,2.4vw,19px);color:var(--muted)}

  /* CTAs */
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 8px}
  .btn{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:17px;
    padding:15px 26px;border-radius:14px;text-decoration:none;transition:transform .06s ease, box-shadow .2s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--tg);color:#fff;box-shadow:0 8px 22px rgba(42,171,238,.32)}
  .btn-primary:hover{box-shadow:0 10px 28px rgba(42,171,238,.42)}
  .btn-ghost{background:var(--white);color:var(--slate-strong);border:1.5px solid var(--line)}
  .btn-ghost:hover{border-color:#d8cfc0}
  .btn svg{width:20px;height:20px;flex:0 0 auto}
  .cta-note{font-size:13.5px;color:var(--muted);margin-top:4px}

  /* Features */
  .features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:52px 0}
  .card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px}
  .card .ic{font-size:24px;line-height:1;margin-bottom:12px}
  .card h3{font-size:16.5px;color:var(--slate-strong);margin-bottom:6px;letter-spacing:-.01em}
  .card p{font-size:14.5px;color:var(--muted)}

  /* Steps */
  .steps{margin:8px 0 56px}
  .steps h2{text-align:center;font-size:clamp(22px,4vw,30px);color:var(--slate-strong);letter-spacing:-.02em;margin-bottom:26px}
  .step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .step{text-align:center;padding:8px}
  .step .n{width:38px;height:38px;border-radius:50%;background:var(--slate-strong);color:#fff;font-weight:800;
    display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:16px}
  .step h4{font-size:15.5px;color:var(--slate-strong);margin-bottom:4px}
  .step p{font-size:14px;color:var(--muted)}

  /* Final CTA band */
  .band{background:var(--slate-strong);border-radius:22px;padding:40px 24px;text-align:center;color:#fff;margin-bottom:48px}
  .band h2{font-size:clamp(22px,4vw,30px);letter-spacing:-.02em;margin-bottom:8px}
  .band p{color:#cbd5e1;margin-bottom:22px}
  .band .btn-primary{box-shadow:0 8px 22px rgba(0,0,0,.28)}

  /* Footer */
  footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:13.5px}
  .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
  footer a{color:var(--muted);text-decoration:none;margin-left:16px}
  footer a:hover{color:var(--slate-strong)}

  @media (max-width:560px){
    .features{grid-template-columns:1fr}
    .step-row{grid-template-columns:1fr;gap:22px}
    .btn{width:100%;justify-content:center}
  }