@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800&display=swap');

:root { color-scheme: dark; --bg:#10110d; --panel:#181a14; --ink:#f1f0e8; --muted:#97998e; --acid:#dcff1f; --line:rgba(241,240,232,.14); }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { min-height:100dvh; margin:0; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 84% 8%,rgba(220,255,31,.08),transparent 24%),var(--bg); font-family:Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a,button,input { -webkit-tap-highlight-color:transparent; }
.grain { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.topbar { display:flex; align-items:center; justify-content:space-between; max-width:1440px; height:92px; margin:auto; padding:0 48px; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; line-height:1; }
.brand-main { display:block; font-family:Unbounded,sans-serif; font-size:20px; font-weight:800; letter-spacing:-.08em; }
.brand-main span,.brand small,footer strong span { color:var(--acid); }
.brand small { display:block; margin-top:7px; font-size:8px; font-weight:800; letter-spacing:.22em; }
.top-actions { display:flex; align-items:center; gap:10px; }
.round-button { display:grid; width:43px; height:43px; padding:0; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; }
.round-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.back { display:flex; align-items:center; gap:22px; height:43px; padding:0 18px; border:1px solid var(--ink); color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.11em; text-decoration:none; }
.back span { color:var(--acid); font-size:16px; }
main { max-width:1440px; margin:auto; }
.hero { position:relative; min-height:660px; padding:92px 48px 98px; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::after { content:"Ж"; position:absolute; z-index:-1; right:-1vw; top:-95px; color:rgba(255,255,255,.025); font-family:Unbounded,sans-serif; font-size:min(52vw,680px); font-weight:800; line-height:1; }
.kicker,.section-number { margin:0 0 25px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.2em; }
.kicker span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 18px var(--acid); }
h1 { margin:0; font-family:Unbounded,sans-serif; font-size:clamp(48px,7.2vw,110px); font-weight:800; line-height:.91; letter-spacing:-.075em; text-transform:uppercase; }
h1 em { color:var(--acid); font-style:normal; }
.lead { max-width:500px; margin:36px 0 0 28%; color:#b7b9ae; font-size:15px; line-height:1.7; }
.hero-stamp { position:absolute; right:9%; top:134px; width:166px; height:166px; color:var(--acid); transform:rotate(10deg); }
.hero-stamp svg { width:100%; overflow:visible; fill:currentColor; }
.hero-stamp text { font-size:11px; font-weight:800; letter-spacing:2.2px; }
.stamp-check { fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:square; stroke-linejoin:miter; }
.hero-ticker { position:absolute; bottom:0; left:0; display:flex; width:max-content; align-items:center; gap:42px; padding:18px 48px; color:#0b0c09; background:var(--acid); font-family:Unbounded,sans-serif; font-size:11px; font-weight:800; letter-spacing:.1em; }
.hero-ticker b { font-size:14px; }
.catalog { padding:88px 48px 120px; }
.catalog-head { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.catalog h2 { margin:0; font-family:Unbounded,sans-serif; font-size:clamp(38px,5vw,68px); line-height:1; letter-spacing:-.07em; text-transform:uppercase; }
.search { display:flex; width:min(330px,100%); align-items:center; gap:12px; padding:0 0 12px; border-bottom:1px solid #777a70; }
.search svg { width:19px; fill:none; stroke:var(--muted); stroke-width:1.7; }
.search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font:600 13px Manrope,sans-serif; }
.search input::placeholder { color:#787b70; }
.categories { display:flex; gap:8px; margin:50px 0 28px; overflow:auto; scrollbar-width:none; }
.categories::-webkit-scrollbar { display:none; }
.category { flex:none; padding:11px 17px; border:1px solid var(--line); color:#a7a99f; background:transparent; font:700 10px Manrope,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.category:hover,.category.active { border-color:var(--acid); color:#11130c; background:var(--acid); }
.result-line { display:flex; align-items:center; gap:20px; margin-bottom:23px; color:#7e8176; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.rule { height:1px; flex:1; background:var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--panel); transition:transform .25s,border-color .25s; }
.card:hover { transform:translateY(-5px); border-color:rgba(220,255,31,.5); }
.card-media { position:relative; aspect-ratio:1.16; overflow:hidden; background:linear-gradient(145deg,#25281f,#141510); }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover img { transform:scale(1.035); }
.card-media.no-image::after { content:"Ж"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(220,255,31,.17); font-family:Unbounded,sans-serif; font-size:90px; font-weight:800; }
.badge { position:absolute; top:13px; left:13px; z-index:1; padding:8px 10px; color:#11130c; background:var(--acid); font-size:8px; font-weight:800; letter-spacing:.1em; }
.card-body { padding:20px; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#86897d; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.card h3 { margin:12px 0 8px; font-family:Unbounded,sans-serif; font-size:17px; line-height:1.25; letter-spacing:-.04em; }
.card-description { min-height:38px; margin:0; color:#999c91; font-size:11px; line-height:1.55; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:15px; border-top:1px solid var(--line); }
.source { min-width:0; color:#8d9085; font-size:9px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.source:hover { color:var(--ink); }
.buy { display:flex; flex:none; align-items:center; gap:14px; color:var(--acid); font-size:10px; font-weight:800; letter-spacing:.08em; text-decoration:none; }
.buy span { font-size:17px; }
.empty { padding:90px 20px; border:1px solid var(--line); text-align:center; background:rgba(255,255,255,.015); }
.empty-mark { display:grid; width:72px; height:72px; margin:0 auto 25px; place-items:center; border:1px solid var(--acid); border-radius:50%; color:var(--acid); font:800 30px Unbounded,sans-serif; }
.empty h3 { margin:0; font:800 25px Unbounded,sans-serif; letter-spacing:-.05em; text-transform:uppercase; }
.empty p { max-width:430px; margin:14px auto 25px; color:var(--muted); font-size:13px; line-height:1.6; }
.empty a { color:var(--acid); font-size:11px; font-weight:800; letter-spacing:.08em; }
.hidden { display:none!important; }
footer { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:50px; max-width:1440px; margin:auto; padding:50px 48px; border-top:1px solid var(--line); }
footer strong { font:800 17px Unbounded,sans-serif; letter-spacing:-.07em; }
footer p,footer small { margin:7px 0 0; color:#70736a; font-size:9px; }
footer a { color:#aeb0a6; font-size:10px; font-weight:700; text-decoration:none; }
.toast { position:fixed; z-index:20; left:50%; bottom:24px; padding:11px 17px; border:1px solid rgba(220,255,31,.35); color:var(--ink); background:#1b1e15; font-size:11px; transform:translate(-50%,20px); opacity:0; transition:.2s; }
.toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:900px) { .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-stamp{right:4%;top:120px;width:120px}.lead{margin-left:15%} }
@media (max-width:620px) { .topbar{height:72px;padding:0 18px}.brand-main{font-size:16px}.brand small{font-size:6px}.round-button{display:none}.back{height:37px;padding:0 12px;gap:10px}.hero{min-height:540px;padding:72px 18px 78px}h1{font-size:clamp(42px,13.5vw,68px)}.hero-stamp{position:relative;top:auto;right:auto;width:92px;height:92px;margin:28px 0 -100px auto}.lead{margin:30px 0 0;max-width:88%;font-size:13px}.hero-ticker{gap:25px;padding:15px 18px}.catalog{padding:64px 18px 80px}.catalog-head{align-items:start;flex-direction:column}.search{width:100%;margin-top:8px}.categories{margin-top:32px}.grid{grid-template-columns:1fr}.card-media{aspect-ratio:1.35}.card-description{min-height:0}footer{grid-template-columns:1fr;padding:38px 18px;gap:20px}footer small{display:none} }