:root{
  --bg:#05070f; --panel:#0b1224; --ink:#e2e8f0; --muted:#9fb2c8;
  --padel:#22c55e; --pickle:#06b6d4; --border:#1a2540; --ring:#ffffff22;
}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Manrope',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.detail{max-width:960px;margin:0 auto;padding:32px 20px}
.detail__header{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:24px}
.eyebrow{text-transform:uppercase;font-size:13px;letter-spacing:.16em;color:var(--muted);margin:0 0 8px}
h1{margin:0 0 12px;font-size:32px;line-height:1.2}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid var(--ring);color:var(--ink);background:transparent}
.btn.primary{background:linear-gradient(135deg,var(--padel),var(--pickle));color:#051222;border:none;box-shadow:0 18px 36px rgba(6,182,212,.2)}
.btn.ghost{background:#ffffff10}
.detail__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:24px}
.detail__grid article{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 14px 32px rgba(0,0,0,.35)}
.detail__grid h2{margin:0 0 8px;font-size:20px}
.detail__grid p{margin:4px 0;color:var(--muted)}
.detail__grid ul{padding-left:18px;margin:6px 0;color:var(--ink)}
@media (max-width:600px){
  .detail{padding:20px 14px}
  h1{font-size:26px}
}