/* AGR CORP BOMBER JACKET · teaser. Mobil je hlavní, od 960 px text vlevo a video přes celou plochu. */
@font-face{font-family:"Saira XC";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/saira-extra-condensed-latin-ext-800.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:"Saira XC";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/saira-extra-condensed-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Saira XC";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/saira-extra-condensed-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:"Saira XC";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/saira-extra-condensed-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --ink:#0A0A0C;--ink2:#141417;--line:#3A3A42;--mute:#B4B4BC;--white:#fff;
  --red:#D6111C;--red-hi:#FF5A5F;
  --disp:"Saira XC","Arial Narrow",Impact,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --svh:1vh;--gut:16px;
  color-scheme:dark;
}
@supports (height:1svh){:root{--svh:1svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--white);font:400 14px/1.45 var(--mono);overflow-x:hidden}
img,video{display:block;max-width:100%}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--white);outline-offset:2px}
h2:focus,[tabindex="-1"]:focus{outline:none}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(var(--svh)*100);overflow:hidden;padding-top:env(safe-area-inset-top)}
.media{position:absolute;inset:0;z-index:-1;background:#000}
/* Mobil: obraz v pásu mezi názvem a panelem (přes celou výšku by byl z videa 5:4 jen detail) */
.media img,.media video{position:absolute;left:0;top:15%;width:100%;height:68%;object-fit:cover;object-position:50% 40%}
.media video{opacity:0;transition:opacity .6s linear}
.media video.on{opacity:1}
/* Video a fotka mají světlé pozadí: tahle vrstva drží kontrast textu nad AA (npm run contrast, nejhorší snímek smyčky). */
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0,var(--ink) 15%,rgba(10,10,12,.62) 26%,rgba(10,10,12,.12) 42%,rgba(10,10,12,.12) 62%,rgba(10,10,12,.7) 74%,var(--ink) 83%)}
.fx{position:absolute;inset:0;pointer-events:none}
.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,transparent 1px,transparent 3px)}
.grain{inset:-50%;opacity:.13;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(4%,4%)}}

.hud{display:flex;justify-content:space-between;gap:12px;padding:10px var(--gut) 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.rec{display:inline-flex;align-items:center;gap:7px}
.rec i{width:7px;height:7px;border-radius:50%;background:var(--red-hi);animation:rec 1.6s steps(2,jump-none) infinite}
@keyframes rec{from{opacity:1}to{opacity:.25}}

.wrap{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:10px var(--gut) calc(16px + env(safe-area-inset-bottom))}
.head{min-width:0}
h1{font:800 min(29.5vw,calc(var(--svh)*16.5))/.86 var(--disp);letter-spacing:.005em;text-transform:uppercase;text-shadow:0 2px 24px rgba(0,0,0,.6)}
h1 span{display:block}
.t2{font-size:.61em;line-height:1;color:var(--white);margin-top:.06em}
.meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.meta strong{font:600 26px/1 var(--disp);letter-spacing:.04em;color:var(--white);background:var(--red);padding:3px 8px 2px}
.meta span{background:rgba(10,10,12,.88);padding:3px 6px;line-height:1.5}

/* ---------- Panel: odpočet a formulář ---------- */
.panel{position:relative;background:rgba(10,10,12,.9);border:1px solid var(--line);border-top:2px solid var(--red);padding:12px}
.panel::after{content:"";position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-right:2px solid var(--white);border-bottom:2px solid var(--white);pointer-events:none}
.cd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cd-l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.2}
.units{display:grid;grid-template-columns:repeat(4,auto);gap:12px}
.u{display:flex;flex-direction:column;align-items:center;min-width:38px}
.num{font:800 34px/1 var(--disp);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ul{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
#form,.done,.live{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.live{margin-top:0;padding-top:0;border-top:0}
label[for=email]{display:block;margin-bottom:5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.row{display:flex;gap:8px}
input[type=email]{flex:1;min-width:0;height:48px;padding:0 12px;border:1px solid #8C8C96;border-radius:0;background:var(--ink2);color:var(--white);font:400 16px/1.2 var(--mono);-webkit-appearance:none;appearance:none}
input[type=email]::placeholder{color:#9A9AA4;opacity:1}
input[aria-invalid=true]{border-color:var(--red-hi)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--red);border-radius:0;background:var(--red);color:var(--white);font:800 22px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#B00C16;border-color:#B00C16}
.btn[aria-disabled=true]{background:#8E0C14;border-color:#8E0C14;cursor:progress}
.btn-o{background:transparent;border-color:var(--white)}
.btn-o:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.sug{margin-top:6px;font-size:13px;color:var(--mute)}
.sug button{padding:10px 2px;border:0;background:none;color:var(--white);font:inherit;text-decoration:underline;cursor:pointer}
.err{margin-top:6px;font-size:13px;color:var(--red-hi)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chk{position:relative;display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:6px 0;font-size:12px;line-height:1.4;color:var(--mute);cursor:pointer}
.chk input{position:absolute;left:0;top:6px;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.box{flex:none;position:relative;width:24px;height:24px;border:1px solid #8C8C96;background:var(--ink2)}
.chk input:checked+.box{background:var(--red);border-color:var(--red)}
.chk input:checked+.box::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk input:focus-visible+.box{outline:2px solid var(--white);outline-offset:2px}
.chk input[aria-invalid=true]+.box{border-color:var(--red-hi)}
.chk a{color:var(--white)}
.status{font-size:13px;color:var(--mute)}
.status:not(:empty){margin-top:6px}
.status.bad{color:var(--red-hi)}
.status:has(.sr){margin:0}

.done{margin-top:10px}
.done h2,.live h2{font:800 40px/1 var(--disp);letter-spacing:.01em;text-transform:uppercase}
.done p{margin-top:4px;font-size:13px;color:var(--mute)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acts .btn{flex:1 1 140px}
.live .btn{display:flex;width:100%;margin-top:12px;min-height:56px;font-size:26px}
.vid{position:absolute;right:-1px;bottom:calc(100% + 2px);padding:7px 10px;border:0;background:rgba(10,10,12,.88);color:var(--white);font:400 11px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.vid::before{content:"";position:absolute;inset:-8px 0}
.still .grain,.still .rec i{animation:none}
.fail{display:none}
.agr-fail .fail{display:block;margin-top:10px}
.agr-fail .fail .btn{margin-top:8px}

/* ---------- Pás fotek ---------- */
.pas{padding:20px 0 24px;border-top:1px solid var(--line)}
.strip{display:flex;gap:8px;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:0 0 72vw;max-width:340px;aspect-ratio:4/5;scroll-snap-align:start;background:var(--ink2)}
.strip img{width:100%;height:100%;object-fit:cover}

/* ---------- Patička ---------- */
footer{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:16px var(--gut) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
footer a{color:var(--white);display:inline-flex;align-items:center;min-height:44px}
.foot-l{letter-spacing:.12em;text-transform:uppercase;flex-basis:100%}
.soc{display:flex;flex-wrap:wrap;gap:0 18px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;max-width:calc(100vw - 32px);padding:10px 14px;background:var(--white);color:var(--ink);font-size:13px;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Úzké telefony: tlačítko pod polem, ať e-mail není sevřený */
@media (max-width:359px){
  .row{flex-direction:column}
  .units{gap:8px}
  .u{min-width:32px}
  .num{font-size:30px}
}

/* ---------- Desktop ---------- */
@media (min-width:960px){
  :root{--gut:40px}
  .media img,.media video{top:0;height:100%;object-position:50% 34%}
  .scrim{background:linear-gradient(90deg,rgba(10,10,12,.94) 0,rgba(10,10,12,.86) 32%,rgba(10,10,12,.2) 58%,rgba(10,10,12,.18) 100%),linear-gradient(0deg,rgba(10,10,12,.7) 0,transparent 26%),linear-gradient(180deg,rgba(10,10,12,.9) 0,rgba(10,10,12,.9) 7%,transparent 16%)}
  .hud{padding-top:22px;font-size:12px}
  .wrap{justify-content:center;width:560px;gap:38px;padding-top:24px;padding-bottom:40px}
  h1{font-size:min(148px,calc(var(--svh)*19))}
  .meta{font-size:13px;margin-top:14px}
  .meta strong{font-size:32px}
  .panel{padding:18px}
  .num{font-size:44px}
  .u{min-width:50px}
  .units{gap:16px}
  .pas{padding:32px 0 40px}
  .strip{overflow:visible;gap:12px}
  .strip li{flex:1 1 0;max-width:none}
  .foot-l{flex-basis:auto}
}

/* Vynucené barvy (Windows, vysoký kontrast): vlastní zaškrtávátko by neukázalo stav, zůstává nativní */
@media (forced-colors:active){
  .chk input{opacity:1}
  .box{visibility:hidden}
}

/* Bez pohybu: stojí zrno i tečka, video se vůbec nenačte (app.js) */
@media (prefers-reduced-motion:reduce){
  .grain,.rec i{animation:none}
  .toast,.media video{transition:none}
}