:root { --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --primary:#22d3ee; --green:#22c55e; --blue:#3b82f6; --orange:#f59e0b; --outline:#22d3ee33; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: var(--bg); color: var(--text); }
.container { width: min(1100px, 92%); margin: auto; }
.header { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { width:60px; height:60px; border-radius:12px; border:1px solid #1f2937; background:#111827; }
.subtitle { color: var(--muted); margin: 4px 0 0; }
.card { background: var(--card); border:1px solid #1f2937; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25); margin: 16px 0; }
.hero { position:relative; min-height: 260px; background-size:cover; background-position:center; }
.hero .overlay { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); padding:26px; border-radius:12px; }
.grid.buttons { display:grid; gap:12px; grid-template-columns:1fr; margin:14px 0; }
@media (min-width: 760px) { .grid.buttons { grid-template-columns: repeat(3,1fr); } }
.button { display:inline-block; padding:14px 16px; border-radius:12px; text-decoration:none; font-weight:800; text-align:center; border:1px solid transparent; }
.button.pc { background:var(--blue); color:white; }
.button.android { background:var(--green); color:#06200e; }
.button.ios { background:var(--orange); color:#231a00; }
.muted { color: var(--muted); }
.grid.two { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.footer { padding: 30px 0 60px; color: var(--muted); text-align:center; }