:root { color-scheme: dark; --bg:#060608; --ink:#f4f4f5; --muted:#9a9aa6; --line:rgba(255,255,255,.10); --accent:#c146f5; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:inherit; }
.page { max-width:1040px; margin:0 auto; padding:0 24px; }

.bar { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800; font-size:20px; letter-spacing:-.3px; }
.brand img { width:36px; height:36px; border-radius:9px; display:block; }
.bar nav a { color:var(--muted); text-decoration:none; font-size:15px; margin-left:22px; }
.bar nav a:hover { color:var(--ink); }

.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:48px 0 72px; }
.hero h1 { font-size:clamp(40px,6.4vw,68px); line-height:1.02; letter-spacing:-2px; margin:0 0 20px; font-weight:800; }
.hero h1 span { color:var(--accent); }
.lead { font-size:19px; color:var(--muted); max-width:30em; margin:0 0 30px; }
.store { display:inline-block; background:var(--ink); color:#0b0b0d; font-weight:700; font-size:16px; text-decoration:none; padding:15px 26px; border-radius:14px; }
.store:hover { background:#fff; }
.stores { display:flex; flex-wrap:wrap; gap:12px; }
.end .stores { justify-content:center; }
.store.alt { background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.28); }
.store.alt:hover { background:rgba(255,255,255,.08); }
.note { display:block; color:var(--muted); font-size:14px; margin-top:14px; }

.phones { position:relative; height:560px; }
.phone { position:absolute; width:250px; border-radius:34px; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(0,0,0,.65); background:#000; }
.phone img { display:block; width:100%; height:auto; }
.phones .a { left:6%; top:34px; transform:rotate(-4deg); }
.phones .b { right:2%; top:0; transform:rotate(3deg); }

.row { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:72px 0; border-top:1px solid var(--line); }
.row.flip .shot { order:2; }
.shot { display:flex; justify-content:center; }
.shot .phone { position:relative; width:270px; }
.row small { display:block; color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.row h2 { font-size:clamp(28px,4vw,42px); line-height:1.08; letter-spacing:-1px; margin:0 0 16px; }
.row p { color:var(--muted); margin:0; max-width:28em; }

.end { border-top:1px solid var(--line); text-align:center; padding:80px 0 56px; }
.end h2 { font-size:clamp(30px,5vw,48px); letter-spacing:-1.2px; line-height:1.05; margin:0 0 24px; }

footer { border-top:1px solid var(--line); padding:28px 0 48px; display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; color:var(--muted); font-size:14px; }
footer nav a { color:var(--muted); text-decoration:none; margin-right:22px; }
footer nav a:hover { color:var(--ink); }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; gap:36px; padding-top:20px; }
  .phones { height:470px; max-width:420px; margin:0 auto; width:100%; }
  .phone { width:210px; }
  .row, .row.flip { grid-template-columns:1fr; gap:32px; padding:52px 0; }
  .row.flip .shot { order:0; }
  .bar nav a:not(:last-child) { display:none; }
}