:root { color-scheme: dark; --bg:#111214; --panel:#1d1f23; --text:#f7f7f8; --muted:#b6b9c2; --red:#ff2434; --line:#31343b; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top,#2a1519 0,var(--bg) 42rem); color:var(--text); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:#ff8b94; } a:hover { color:#ffb6bc; }
.wrap { width:min(960px,calc(100% - 40px)); margin:0 auto; }
header { padding:26px 0; border-bottom:1px solid var(--line); } nav { display:flex; align-items:center; justify-content:space-between; gap:18px; } .brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:750; } .brand img { width:34px; height:34px; } .links { display:flex; gap:18px; flex-wrap:wrap; } .links a { color:var(--muted); text-decoration:none; }
.hero { padding:88px 0 62px; max-width:760px; } .hero .lead { margin-bottom:0; } h1 { font-size:clamp(2rem,4.2vw,3.35rem); line-height:1.03; letter-spacing:-.055em; margin:0 0 22px; } h2 { margin-top:54px; letter-spacing:-.025em; } .lead { color:var(--muted); font-size:1.2rem; max-width:650px; } .badge { display:inline-block; border:1px solid #77404a; border-radius:999px; color:#ffb5bd; padding:5px 10px; font-size:.85rem; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 0 85px; } .card { background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-radius:16px; padding:22px; } .card h3 { margin:0 0 9px; } .card p,main li { color:var(--muted); } .notice { border-left:3px solid var(--red); background:#23171a; padding:16px 18px; border-radius:0 10px 10px 0; color:var(--muted); } main.page { padding:56px 0 86px; max-width:760px; } footer { border-top:1px solid var(--line); padding:24px 0 38px; color:var(--muted); font-size:.9rem; }
.install-panel { display:flex; align-items:center; flex-direction:column; gap:10px; margin:0 0 62px; padding:42px 30px; border:1px solid #8d3843; border-radius:22px; text-align:center; background:radial-gradient(circle at 50% -20%,#5a252d 0,#28161a 48%,#1a1b1f 100%); box-shadow:0 18px 45px #0004; } .install-panel h2 { margin:0; font-size:clamp(1.8rem,4vw,2.4rem); letter-spacing:-.035em; } .install-panel p { margin:0 0 10px; color:#d5c8cb; font-size:1.08rem; } .install-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; appearance:none; border:0; border-radius:12px; padding:16px 25px; background:var(--red); color:#fff; font:750 1.08rem/1.2 inherit; box-shadow:0 9px 22px #ff243455; opacity:.78; cursor:not-allowed; } .store-icon { width:21px; height:21px; flex:0 0 21px; } .install-panel span { color:var(--muted); font-size:.84rem; } .privacy-note { margin:0 0 86px; }
.product-hero { margin:0 -80px 54px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#111214; } .product-hero img { display:block; width:100%; } .gallery { display:grid; gap:32px; padding:0 0 86px; } .gallery figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#111214; } .gallery img { display:block; width:100%; } .gallery figcaption { padding:14px 17px; color:var(--muted); font-size:.95rem; text-align:center; }
@media (max-width:700px) { .cards { grid-template-columns:1fr; } .hero { padding-top:60px; } .product-hero { margin:0 0 42px; border-radius:14px; } .install-panel { padding:34px 22px; } nav { align-items:flex-start; flex-direction:column; } }