:root{
    --bg:#000;
    --fg:#fff;
    --muted:#9aa0a6;
    --accent:#7ac143;
    --card:#0e0e0e;
    --border:#1f1f1f;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:960px;margin:0 auto;padding:64px 24px 96px;min-height:100vh;display:flex;flex-direction:column}
  header{display:flex;justify-content:center;margin-bottom:56px}
  header img{max-width:340px;width:70%;height:auto}
  .hero{text-align:center;margin-bottom:64px}
  .hero h1{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.02em;margin:0 0 16px}
  .hero p{color:var(--muted);font-size:18px;max-width:560px;margin:0 auto;line-height:1.6}
  .accent{color:var(--accent)}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:8px}
  .card{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:28px;transition:border-color .2s,transform .2s,background .2s}
  .card:hover{border-color:var(--accent);transform:translateY(-2px);background:#121212}
  .card h2{margin:0 0 8px;font-size:22px;font-weight:600}
  .card p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.55}
  .card .go{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:14px;font-weight:500}
  .card .go::after{content:"→";transition:transform .2s}
  .card:hover .go::after{transform:translateX(4px)}
  footer{margin-top:auto;padding-top:64px;text-align:center;color:var(--muted);font-size:13px}