*{box-sizing:border-box;margin:0}
:root{--bg:#0d0b0a;--bg2:#171310;--ink:#f3ece2;--mute:#b9aea0;--acc:#ffb02e;--line:#2c2520}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--bg);color:var(--ink);font:400 18px/1.65 Inter,system-ui,sans-serif;overflow-x:hidden}
h1,h2,.brand,.kick,.tl button,.card b,.thanks,#menu a{font-family:Oswald,Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em}
#bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 32px;background:rgba(13,11,10,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{color:var(--acc);font-weight:700;font-size:20px;text-decoration:none}
#menu{display:flex;gap:6px}
#menu a{color:var(--mute);text-decoration:none;font-size:14px;padding:6px 12px;border-bottom:2px solid transparent;transition:.2s}
#menu a:hover{color:var(--ink)}
#menu a.on{color:var(--acc);border-color:var(--acc)}
.band{padding:110px 0;border-bottom:1px solid var(--line)}
.alt{background:var(--bg2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative}
.kick{color:var(--acc);font-size:15px;margin-bottom:8px}
h2{font-size:clamp(40px,7vw,88px);line-height:1;font-weight:700;margin-bottom:40px}
h1{font-size:clamp(44px,10vw,150px);line-height:.95;font-weight:700;margin:10px 0 24px}
.cover{min-height:100vh;display:flex;align-items:flex-end;padding:0 0 90px;position:relative;overflow:hidden}
.cover .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;animation:zoom 14s ease-out both}
.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 5%,transparent 70%)}
.cover .wrap{z-index:2;width:100%}
.ln{display:block;overflow:hidden}
.ln>span{display:block;animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.ln:nth-child(2)>span{animation-delay:.15s;color:var(--acc)}
.sub{font-size:clamp(18px,2vw,24px);max-width:560px;color:var(--ink)}
.cols{columns:2;column-gap:56px}
.cols p{break-inside:avoid;margin-bottom:18px}
.lead{font-size:22px;line-height:1.5;color:var(--acc)}
p{margin-bottom:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev{align-items:start}
.pic{width:100%;display:block;object-fit:cover;aspect-ratio:4/3;border-radius:2px}
.pic.wide{aspect-ratio:16/7;margin-top:12px}
.tabs{margin-top:40px}
.split .tabs{margin-top:0}
.tl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tl button{background:none;border:1px solid var(--line);color:var(--mute);padding:10px 18px;font-size:15px;cursor:pointer;transition:.2s}
.tl button:hover{color:var(--ink);border-color:var(--mute)}
.tl button.on{background:var(--acc);border-color:var(--acc);color:#0d0b0a}
.tp{display:none;border-left:3px solid var(--acc);padding-left:20px;font-size:19px}
.tp.on{display:block;animation:fade .4s both}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.card{background:none;border:0;padding:0;height:170px;perspective:800px;cursor:pointer;color:inherit;font:inherit;text-align:left}
.in{display:block;position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.card.on .in{transform:rotateY(180deg)}
.f,.b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;backface-visibility:hidden;border:1px solid var(--line)}
.f{background:var(--bg2);font-size:26px;text-align:center}
.card:hover .f{border-color:var(--acc)}
.b{background:var(--acc);color:#0d0b0a;transform:rotateY(180deg);font-size:15px;line-height:1.4;font-weight:600}
.thanks{font-size:clamp(36px,6vw,72px);color:var(--acc);font-weight:700}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}
.js .rv.in-v{opacity:1;transform:none}
@keyframes up{from{transform:translateY(105%)}}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{transform:scale(1.12)}}
@media(max-width:820px){
 body{font-size:17px}
 #bar{padding:8px 14px;flex-direction:column;align-items:flex-start;gap:2px}
 #menu{flex-wrap:wrap;gap:0}
 #menu a{padding:4px 8px;font-size:13px}
 html{scroll-padding-top:84px}
 .band{padding:80px 0}.wrap{padding:0 20px}
 .cover{padding-bottom:50px}
 .cols{columns:1}
 .split{grid-template-columns:1fr;gap:28px}
 .split.rev .pic:first-child{order:0}
 .cards{grid-template-columns:repeat(2,1fr)}
 .card{height:190px}.f{font-size:20px}
 .lead{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}
 .js .rv{opacity:1;transform:none}
 html{scroll-behavior:auto}
}