*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a12;--surface:#14141f;--border:#1e1e2e;
  --text:#e8e8f0;--muted:#8888a0;--accent:#6c5ce7;--accent2:#00cec9;
}
html{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  color:var(--text);background:var(--bg);scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:720px;margin:0 auto;padding:0 24px}

/* Nav */
nav{position:sticky;top:0;z-index:10;background:rgba(10,10,18,.85);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px 0}
nav .container{display:flex;align-items:center;justify-content:space-between}
nav .logo{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
nav .links{display:flex;gap:20px;font-size:.9rem}
nav .links a{color:var(--muted)}nav .links a:hover{color:var(--text);text-decoration:none}

/* Hero */
.hero{text-align:center;padding:80px 0 48px}
.hero-emoji{font-size:4.5rem;margin-bottom:16px;display:block}
.hero h1{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.hero h1 .gradient{background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.15rem;color:var(--muted);max-width:480px;margin:0 auto 32px;line-height:1.6}

/* App Store button */
.app-store-btn{display:inline-block;transition:opacity .2s}
.app-store-btn:hover{opacity:.8}
.app-store-btn img{height:54px}

/* Features */
.features{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:48px 0}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px}
.feature .icon{font-size:1.8rem;margin-bottom:10px;display:block}
.feature h3{font-size:1rem;font-weight:600;margin-bottom:6px}
.feature p{font-size:.88rem;color:var(--muted);line-height:1.5}

/* Mechanic section */
.mechanic{text-align:center;padding:32px 0 48px}
.mechanic h2{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.mechanic p{color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto}
.chain{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:24px auto;font-size:1.1rem;font-weight:600;flex-wrap:wrap}
.chain .num{background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:8px 14px;min-width:40px;text-align:center}
.chain .op{color:var(--accent)}
.chain .result{border-color:var(--accent);color:var(--accent)}
.chain .badge{font-size:.7rem;color:var(--accent2);vertical-align:super}

/* Footer */
footer{margin-top:auto;border-top:1px solid var(--border);padding:28px 0;text-align:center}
footer .links{display:flex;justify-content:center;gap:24px;margin-bottom:10px;font-size:.9rem}
footer .copy{font-size:.8rem;color:var(--muted)}

/* Legal pages */
.legal{padding:60px 0 48px}
.legal h1{font-size:2rem;font-weight:700;margin-bottom:8px}
.legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:32px}
.legal h2{font-size:1.2rem;font-weight:600;margin:28px 0 8px}
.legal p,.legal ul{color:var(--muted);line-height:1.7;margin-bottom:12px;font-size:.95rem}
.legal ul{padding-left:24px}
.legal li{margin-bottom:6px}

@media(max-width:560px){
  .hero h1{font-size:1.9rem}
  .features{grid-template-columns:1fr}
  .hero{padding:56px 0 32px}
}