:root{--bg:#0c0f14;--bg2:#141a23;--ink:#0c0f14;--paper:#efe9de;--line:rgba(255,255,255,.12);--tx:#ece8df;--mut:#98a0ad;--acc:#ff6a13;--navy:#1d3f73}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--bg);color:var(--tx);font:17px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto;padding-block:clamp(60px,8vw,104px)}
section.wrap{padding-block:clamp(60px,8vw,104px)}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:12px}
.kicker{color:var(--acc);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;margin-bottom:16px}
.kicker.dark{color:var(--navy)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px max(20px,calc((100% - 1160px)/2));transition:.25s}
.nav.solid{background:rgba(12,15,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.15rem}
.brand .wave{width:30px;color:#5d8fd6}
.brand b{color:var(--acc)}
nav{display:flex;gap:4px;align-items:center}
nav a{text-decoration:none;padding:8px 14px;font-size:.93rem;color:#c9c5bb;border-radius:4px}
nav a:hover{color:#fff}
nav .cta{background:var(--acc);color:#111;font-weight:700}
nav .cta em{font-style:normal;background:#111;color:var(--acc);border-radius:99px;padding:0 7px;margin-left:6px;font-size:.8rem}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer}
.burger i{display:block;width:24px;height:2px;background:#fff;margin:5px auto}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;padding:110px max(20px,calc((100% - 1160px)/2)) 60px}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin-bottom:26px}
.hero h1 span{color:var(--acc)}
.lead{max-width:520px;color:#b9b6ad;font-size:1.1rem;margin-bottom:32px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 26px;text-decoration:none;font:inherit;font-weight:700;border:2px solid var(--acc);cursor:pointer;transition:.2s;border-radius:3px}
.btn.solid{background:var(--acc);color:#111}
.btn.solid:hover{background:#ff8236;border-color:#ff8236}
.btn.line{background:transparent;color:var(--tx);border-color:#4a505b}
.btn.line:hover{border-color:var(--tx)}
.hero-img{position:relative;aspect-ratio:4/5;max-height:76vh;justify-self:end;width:100%}
.hero-img::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--acc)}
.hero-img img{position:relative;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.hero-img .tag{position:absolute;left:-16px;bottom:34px;background:var(--paper);color:var(--ink);font-weight:700;font-size:.85rem;padding:8px 14px}

.ticker{overflow:hidden;background:var(--acc);color:#111;border-block:2px solid #111}
.ticker div{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker span{padding:12px 28px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;white-space:nowrap}
.ticker span::after{content:"/";margin-left:56px;opacity:.5}
@keyframes tick{to{transform:translateX(-50%)}}

/* section heads */
.sec-head{display:grid;grid-template-columns:90px 1fr;gap:10px;margin-bottom:44px;align-items:start}
.sec-head .num{font-size:3.4rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--acc)}
.sec-head p:not(.num){max-width:640px;color:var(--mut)}

/* paper section */
.paper{background:var(--paper);color:var(--ink)}
.paper .sec-head p:not(.num),.paper .note{color:#555}
.paper .sec-head .num{-webkit-text-stroke-color:var(--navy)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filters button{background:transparent;border:2px solid var(--ink);color:var(--ink);padding:8px 18px;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;border-radius:3px}
.filters button:hover{background:#ddd5c5}
.filters button.on{background:var(--ink);color:var(--paper)}
.list{list-style:none;border-top:2px solid var(--ink)}
.item{display:grid;grid-template-columns:96px 1fr 1.4fr auto;gap:12px 24px;padding:22px 0;border-bottom:1px solid rgba(12,15,20,.22);align-items:center}
.item h3{font-size:1.25rem;margin-bottom:4px}
.item .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--navy)}
.item p{font-size:.95rem;color:#444;margin-bottom:8px}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.specs span{font-size:.78rem;background:rgba(12,15,20,.08);padding:3px 9px;border-radius:2px}
.buy{text-align:right;min-width:150px}
.price{display:block;font-weight:800;margin-bottom:8px;font-size:.95rem}
.add{background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:9px 16px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;border-radius:3px}
.add:hover{background:var(--navy);border-color:var(--navy)}
.add.on{background:var(--acc);border-color:var(--acc);color:#111}
.note{font-size:.85rem;margin-top:18px}

/* sets */
.sets{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--line)}
.set{padding:32px 28px;border-right:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.set:last-child{border:0}
.set.featured{background:var(--bg2);outline:2px solid var(--acc);outline-offset:-2px;position:relative}
.set.featured::before{content:"Beliebt";position:absolute;top:-2px;right:20px;background:var(--acc);color:#111;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:4px 10px}
.set h3{font-size:1.6rem}
.set .tg{color:var(--mut);font-size:.9rem}
.set ul{list-style:none;display:grid;gap:8px;flex:1;margin:6px 0 10px}
.set li{padding-left:22px;position:relative;font-size:.95rem}
.set li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--acc)}
.set .price{font-size:1.05rem;color:var(--acc);margin:0}

/* steps */
.band{background:var(--bg2);border-block:1px solid var(--line)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;gap:0}
.steps li{counter-increment:s;padding:6px 24px 6px 0;color:var(--mut);font-size:.95rem;border-top:2px solid var(--acc);padding-top:18px;margin-right:24px}
.steps li::before{content:"0" counter(s);display:block;font-weight:900;font-size:.85rem;color:var(--acc);margin-bottom:6px}
.steps b{display:block;color:var(--tx);font-size:1.15rem;margin-bottom:4px}

/* faq */
.faq{max-width:820px;margin-left:100px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:20px 0;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc);font-size:1.5rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--mut);padding-bottom:20px;max-width:640px}

/* club */
.club{background:var(--bg2);border-top:1px solid var(--line)}
.club-grid{max-width:760px}
.club p:not(.kicker){color:var(--mut);margin-bottom:12px}
.masonry{columns:3 140px;column-gap:10px}
.masonry a{display:block;margin-bottom:10px;overflow:hidden;break-inside:avoid}
.masonry img{width:100%;transition:transform .5s;filter:saturate(.85)}
.masonry a:hover img{transform:scale(1.06);filter:none}
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,7,10,.95);display:grid;place-items:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:88vh}
.lb button{position:absolute;background:#222;border:0;color:#fff;font-size:2rem;width:50px;height:50px;cursor:pointer}
.lb button:hover{background:var(--acc);color:#111}
.lb .x{top:18px;right:18px}.lb .p{left:14px}.lb .n{right:14px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:start}
.paper h2{color:var(--ink)}
.mail{font-weight:800;font-size:1.2rem;margin:14px 0 26px;color:var(--navy)}
.basket{border:2px solid var(--ink);padding:20px;background:rgba(255,255,255,.4)}
.basket h3{font-size:1.05rem;margin-bottom:10px}
.basket ul{list-style:none;display:grid;gap:6px}
.basket li{display:flex;justify-content:space-between;gap:10px;font-size:.93rem;border-bottom:1px dashed rgba(12,15,20,.3);padding-bottom:6px}
.basket p{font-size:.9rem;color:#555}
.basket a{color:var(--navy);font-weight:700}
.form{display:grid;gap:16px}
.form label{display:grid;gap:5px;font-size:.82rem;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:.06em}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form textarea{background:#fff;border:2px solid var(--ink);padding:12px 14px;font:inherit;color:var(--ink);border-radius:3px;min-width:0;text-transform:none;letter-spacing:0;font-weight:400}
.form input:focus,.form textarea:focus{outline:3px solid var(--navy);outline-offset:0}

/* thumbs & details */
.thumb{position:relative;width:96px;height:80px;background:var(--ink);color:#9db9e6;border:0;cursor:pointer;padding:8px;border-radius:3px;overflow:hidden}
.thumb:hover{background:var(--navy);color:#fff}
.thumb svg{width:100%;height:100%}
.thumb img{width:100%;height:100%;object-fit:cover;margin:-8px;width:calc(100% + 16px);height:calc(100% + 16px);max-width:none}
.play{position:absolute;right:4px;bottom:4px;background:var(--acc);color:#111;font-style:normal;font-size:.6rem;padding:2px 5px;border-radius:2px}
.lnk{background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;letter-spacing:inherit}
.lnk:hover{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:3px;text-underline-offset:4px}
.buy{display:grid;gap:8px;justify-items:end}
.more{background:none;border:0;font:inherit;font-weight:700;font-size:.85rem;color:var(--navy);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.paper :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.pop{border:0;padding:0;margin:auto;width:min(880px,calc(100% - 24px));max-height:calc(100dvh - 24px);background:var(--bg2);color:var(--tx);display:grid;grid-template-columns:1.15fr 1fr;overflow:auto;box-shadow:0 0 0 2px var(--acc),0 40px 100px #000}
.pop:not([open]){display:none}
.pop::backdrop{background:rgba(5,7,10,.82)}
.pop-x{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border:0;background:#000a;color:#fff;font-size:1.6rem;cursor:pointer}
.pop-x:hover{background:var(--acc);color:#111}
.pop-media{background:#05080d;min-height:300px;display:flex;flex-direction:column}
.pop-media>img,.pop-media>video,.pop-media>iframe{width:100%;flex:1;min-height:260px;object-fit:cover;border:0;background:#000}
.illu{flex:1;display:grid;place-items:center;color:#9db9e6;position:relative;padding:28px;background:radial-gradient(circle at 50% 45%,#16233a,#05080d 70%)}
.illu svg{width:min(100%,340px)}
.illu span{position:absolute;left:12px;bottom:10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.vid{flex:1;min-height:260px;border:0;background:#05080d;color:#fff;cursor:pointer;display:grid;place-content:center;gap:6px;text-align:center}
.vid span{font-weight:800;font-size:1.1rem;color:var(--acc)}.vid small{color:var(--mut)}
.strip{display:flex;gap:6px;padding:6px;background:#000}
.strip button{width:64px;height:48px;border:2px solid transparent;padding:0;cursor:pointer;background:none}
.strip button:hover{border-color:var(--acc)}
.strip img{width:100%;height:100%;object-fit:cover}
.pop-body{padding:34px 28px 26px;display:flex;flex-direction:column;gap:12px}
.pop-body .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--acc)}
.pop-body h3{font-size:1.7rem}
.pop-body p{color:#c9c5bb;font-size:.98rem}
.pop-specs{list-style:none;display:grid;gap:6px;margin:4px 0}
.pop-specs li{padding-left:20px;position:relative;font-size:.93rem}
.pop-specs li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:2px;background:var(--acc)}
.pop-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.pop .price{font-weight:800;color:var(--tx);margin:0}
.pop .add{background:var(--acc);border-color:var(--acc);color:#111}
.pop .add.on{background:transparent;color:var(--acc)}
.pop .hint{font-size:.78rem;color:var(--mut)}
@media(max-width:700px){.pop{grid-template-columns:1fr}.pop-media{min-height:220px}.item{grid-template-columns:80px 1fr}.item>div:nth-child(3),.item .buy{grid-column:1/-1}.thumb{width:80px;height:66px}.buy{justify-items:start;display:flex;flex-wrap:wrap;align-items:center}}

footer{border-top:1px solid var(--line);color:var(--mut);font-size:.9rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:26px}
.foot a:hover{color:#fff}

.legal{max-width:760px;padding-top:130px}
.legal h1{font-size:2.4rem;margin-bottom:24px}
.legal h2{font-size:1.25rem;margin:26px 0 8px}
.legal p{color:#b9b6ad;margin-bottom:10px}
.legal a{color:var(--acc)}

@media(prefers-reduced-motion:reduce){.ticker div{animation:none}html{scroll-behavior:auto}}
@media(max-width:980px){
  .burger{display:block;z-index:60}
  nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:10px;background:var(--bg);translate:100% 0;transition:.3s}
  nav.open{translate:0}
  nav a{font-size:1.5rem}
  .hero{grid-template-columns:1fr;padding-top:100px}
  .hero-img{aspect-ratio:16/10;justify-self:stretch;margin-right:18px}
  .item{grid-template-columns:96px 1fr}.item>div:nth-child(3),.item .buy{grid-column:1/-1}
  .buy{text-align:left;display:flex;align-items:center;gap:16px}
  .price{margin:0}
  .sets{grid-template-columns:1fr}
  .set{border-right:0;border-bottom:2px solid var(--line)}
  .steps{grid-template-columns:1fr 1fr;gap:24px 0}
  .club-grid,.contact-grid{grid-template-columns:1fr}
  .faq{margin-left:0}
  .sec-head{grid-template-columns:1fr}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}}

/* dynamic additions */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.flash{padding:14px 16px;margin-bottom:16px;font-weight:700;border:2px solid}
.flash.ok{background:#dff3e3;border-color:#1f6b32;color:#124a21}
.flash.bad{background:#fbe3e0;border-color:#a3281d;color:#7a1b12}
.stock{font-size:.8rem;color:#2d6a3a;font-weight:700}
.stock.none{color:#a3281d}
.item.out .thumb,.item.out h3{opacity:.55}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:26px;height:26px;border:2px solid var(--ink);background:#fff;font-weight:800;cursor:pointer;line-height:1}
.qty button:hover{background:var(--ink);color:#fff}
.qty .rm{border-color:transparent;background:none;color:#a33;font-size:1.1rem}
.qty b{min-width:22px;text-align:center}
.tel{font-weight:700;color:var(--ink)}
.mail a{color:var(--navy)}

.secnote{font-size:.78rem;color:#555;margin:0}
