
:root{
  --red:#a70e13;--red2:#d71920;--gold:#ffb000;--cream:#fff8eb;
  --ink:#151515;--muted:#666;--line:#eadfce;--navy:#071b33;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fffdf9}
a{text-decoration:none;color:inherit}button,input{font:inherit}
.site-header{position:sticky;top:0;z-index:20;height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,249,.93);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.07)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,var(--red2),#6c0004);color:#fff;font-family:Oswald;font-size:25px;box-shadow:0 8px 24px #a70e1333}.brand strong{font-family:Oswald;font-size:22px;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;color:#777}
nav{display:flex;align-items:center;gap:28px;font-weight:700;font-size:14px}.nav-cta{padding:11px 17px;border-radius:999px;background:var(--red);color:white}
.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1.1fr .75fr;align-items:center;gap:6vw;padding:72px 7vw;background:
radial-gradient(circle at 10% 5%,#ffbf3240,transparent 28%),
linear-gradient(135deg,#7e0509 0%,#bd1117 46%,#f04a18 100%);color:white;overflow:hidden}
.hero-copy{max-width:760px}.eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:2px;color:#ffd67a}.eyebrow.dark{color:var(--red)}
h1{font-family:Oswald,Inter,sans-serif;font-size:clamp(48px,6.2vw,92px);line-height:.98;margin:18px 0 24px;text-transform:uppercase;letter-spacing:-1px}.hero p{font-size:18px;line-height:1.7;max-width:680px;color:#fff1e8}
.hero-actions{display:flex;gap:12px;margin:34px 0}.button{border:0;border-radius:12px;padding:15px 22px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#ffc020,#ff8a00);color:#4b1800;box-shadow:0 12px 30px #5d000660}.secondary{background:#ffffff16;color:white;border:1px solid #ffffff4a}
.hero-stats{display:flex;gap:42px;margin-top:42px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-size:27px;color:#ffd06a}.hero-stats span{font-size:12px;color:#ffdede}
.hero-art{position:relative;display:flex;justify-content:center}.hero-art:before{content:"";position:absolute;width:85%;height:85%;border-radius:50%;background:#ffc120;filter:blur(70px);opacity:.22}.hero-art img{position:relative;width:min(420px,88%);border-radius:22px;box-shadow:0 35px 80px #3c000a80;transform:rotate(2deg);border:5px solid #ffffff25}
.catalog{padding:90px 6vw}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}.section-heading h2,.about h2{font-family:Oswald;font-size:clamp(35px,4vw,56px);text-transform:uppercase;margin:8px 0}.section-heading p{max-width:460px;color:var(--muted);line-height:1.7}
.toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:25px 0 35px}.search{width:min(440px,100%);display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--line);border-radius:14px;padding:0 16px;box-shadow:0 10px 30px #3412000b}.search input{width:100%;padding:14px 0;border:0;outline:0;background:transparent}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{border:1px solid var(--line);background:white;border-radius:999px;padding:10px 15px;cursor:pointer;font-weight:700}.filter.active{background:var(--ink);color:white;border-color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.card{background:white;border:1px solid #ede4d6;border-radius:20px;overflow:hidden;box-shadow:0 10px 35px #4c22000c;transition:.25s}.card:hover{transform:translateY(-8px);box-shadow:0 22px 50px #5a1a001e}.cover-wrap{position:relative;aspect-ratio:4/5;background:linear-gradient(145deg,#f8eee0,#fff);display:grid;place-items:center;padding:20px}.cover-wrap img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 12px 15px #0002)}.number{position:absolute;top:14px;left:14px;background:var(--red2);color:white;font-size:12px;font-weight:900;border-radius:8px;padding:7px 9px}.card-body{padding:20px}.publisher{font-size:11px;font-weight:900;letter-spacing:1.2px;color:var(--red);text-transform:uppercase}.card h3{min-height:52px;font-size:17px;line-height:1.45;margin:9px 0 18px}.card-actions{display:flex;gap:9px}.buy{flex:1;text-align:center;padding:12px;border-radius:10px;background:linear-gradient(135deg,var(--red2),#8c060b);color:white;font-weight:900}.detail{width:43px;display:grid;place-items:center;border-radius:10px;background:#f4eee4;border:0;cursor:pointer}.empty{text-align:center;padding:55px;color:#777}
.about{margin:0 6vw 80px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:70px;background:linear-gradient(135deg,var(--navy),#102f50);color:white;border-radius:28px}.about p{line-height:1.8;color:#d4deea}.about a{display:inline-block;margin-top:12px;color:#ffbf32;font-weight:800}
footer{display:flex;justify-content:space-between;padding:30px 6vw;background:#110203;color:#d2bebe;font-size:13px}
dialog{padding:0;border:0;border-radius:18px;max-width:min(650px,92vw);background:#111;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#000b}dialog img{display:block;width:100%}.dialog-close{position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#111;font-size:26px;cursor:pointer}
@media(max-width:1050px){.product-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr 1fr}}
@media(max-width:780px){nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:55px}.hero-art{display:none}.hero-stats{gap:24px}.section-heading,.toolbar{align-items:stretch;flex-direction:column}.product-grid{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr;padding:38px}.site-header{padding:0 20px}}
@media(max-width:480px){h1{font-size:45px}.product-grid{grid-template-columns:1fr}.hero{padding-left:24px;padding-right:24px}.catalog{padding-left:20px;padding-right:20px}.hero-stats{justify-content:space-between}.hero-stats strong{font-size:22px}.about{margin-left:20px;margin-right:20px}footer{flex-direction:column;gap:4px}}
