:root{--bg:#0a0a10;--fg:#ececf3;--mut:#8d8da3;--card:#14141d;--line:#23232f;--acc1:#3ee6b0;--acc2:#7ff5d0}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,48px);background:rgba(10,10,16,.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.5rem}.logo img{width:28px;height:28px;border-radius:7px;display:block}.top nav a{color:var(--mut)}.top nav a:hover{color:var(--fg)}
.hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;background:var(--bg);overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,16,0) 35%,rgba(10,10,16,.65) 70%,var(--bg))}
.hero-in{position:relative;z-index:1;padding:0 clamp(16px,4vw,48px) 56px;max-width:760px}
.kicker{margin:0 0 6px;color:var(--acc2);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.02;margin:0 0 10px;letter-spacing:-.02em}
.tag{color:#d4d4e2;margin:0 0 22px}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;background:linear-gradient(90deg,var(--acc1),var(--acc2));font-weight:700;color:#06261c;box-shadow:0 8px 30px rgba(62,230,176,.30)}
main{padding:28px clamp(16px,4vw,48px) 60px;max-width:1400px;margin:0 auto}
.gh{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}.gt{margin:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{background:var(--card);color:var(--mut);border:1px solid var(--line);padding:8px 14px;border-radius:999px;font:inherit;font-size:.9rem;cursor:pointer}
.filters button.on{color:var(--fg);border-color:var(--acc1);background:#12261f}
.col h2{font-size:1rem;color:var(--mut);font-weight:600;margin:28px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:#3a3a55}
.pics{position:relative;aspect-ratio:16/9;overflow:hidden}.pd{width:100%;height:100%;object-fit:cover}
.pp{position:absolute;right:10px;bottom:10px;width:19%;height:auto;border-radius:8px;border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.card.phone-first .pics{aspect-ratio:9/16}.card.phone-first .pd{display:none}.card.phone-first .pp{position:static;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.meta{padding:12px 14px 14px}.meta h3{margin:0 0 8px;font-size:1.05rem}
.badges{display:flex;gap:6px;flex-wrap:wrap}.b{font-size:.72rem;padding:3px 8px;border-radius:999px;background:#1e1e2a;color:#b8b8cc}
.b.free{background:rgba(62,230,176,.12);color:var(--acc2)}.b.prem{background:rgba(255,190,60,.14);color:#ffc65c}
.detail{max-width:1200px}.back{color:var(--mut);display:inline-block;margin-bottom:16px}
.dhero img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}
.dmeta{margin:22px 0 8px}.dmeta p{color:#c7c7d6;max-width:720px}
.dev{border-top:1px solid var(--line);padding:26px 0}.dev-h{display:flex;align-items:baseline;gap:10px}.dev-h h2{margin:0 0 14px}.dev-h span{color:var(--mut)}
.dev-b{display:grid;grid-template-columns:minmax(0,1.4fr) 1fr;gap:22px;align-items:start}.dev-b.tall{grid-template-columns:minmax(0,260px) 1fr}
.dev-b img{border-radius:12px;width:100%;height:auto}
.dls{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.dl{display:flex;flex-direction:column;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);transition:border-color .15s,background .15s}
.dl:hover{border-color:var(--acc2);background:#122019}.dl b{font-size:1.05rem}.dl small{color:var(--mut)}
.dl.buy{font:inherit;color:#ffc65c;cursor:not-allowed}
.legal{max-width:760px}.legal h1{font-size:2rem}.legal p{color:#c7c7d6}
footer{border-top:1px solid var(--line);padding:26px clamp(16px,4vw,48px);color:var(--mut);font-size:.85rem;text-align:center}footer a{color:#c7c7d6}
@media(max-width:720px){.dev-b,.dev-b.tall{grid-template-columns:1fr}.dev-b.tall img{max-width:260px}.grid{grid-template-columns:1fr}.hero{min-height:62vh}}