/* ==========================================================================
   MindHacking League — Challenge grammar (chamfers, italic condensed caps) in orange,
   with a cinematic, gritty game look: film grain, scratches, hex grid, HUD corners.
   Mobile-first. Breakpoints: 480 · 768 · 1024 · 1280 · 1440
   ========================================================================== */

@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:75% 118%;font-display:swap;
  src:url(fonts/archivo-it-display-v2.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url(fonts/archivo-text.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:optional;
  src:url(fonts/jbmono-500.woff2) format("woff2")}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:95.8%;ascent-override:91.6%;descent-override:21.9%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --bg:#000;--s1:#0b0b0c;--s2:#141416;--s3:#1e2022;
  --line:rgba(236,239,232,.12);--text:#ecefe8;--text-2:#a4a8a0;
  --or:#ff6b00;--or-hi:#ff8a2e;--on-or:#140700;--err:#ff4d7a;
  --f:"Archivo","Archivo Fallback",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-h2:clamp(2.25rem,1.15rem + 3.95vw,4.75rem);
  --fs-h3:clamp(1.375rem,1.1rem + .6vw,1.75rem);
  --fs-lead:clamp(1.0625rem,.95rem + .35vw,1.3125rem);
  --fs-body:16px;--fs-micro:14px;
  --cut-s:10px;--cut-m:16px;--cut-l:20px;
  --m:16px;--sec:72px;--hdr:56px;
  --e-slam:cubic-bezier(.2,.9,.1,1);--e-snap:cubic-bezier(.16,1,.3,1);--e-exit:cubic-bezier(.4,0,1,1);--e-out:cubic-bezier(.2,.7,.3,1);
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31zM28 63v34M1 16.5 0 16M55 16.5l1-.5' fill='none' stroke='%23ecefe8' stroke-width='1'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:480px){:root{--m:24px;--sec:80px}}
@media (min-width:768px){:root{--m:32px;--sec:96px;--cut-l:28px;--fs-body:17px}}
@media (min-width:1024px){:root{--m:40px;--sec:112px;--hdr:64px}}
@media (min-width:1280px){:root{--m:56px;--sec:128px}}
@media (min-width:1440px){:root{--m:64px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);font:400 var(--fs-body)/1.5 var(--f);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:var(--or);color:var(--on-or)}

.wrap{width:100%;max-width:calc(1312px + 2 * var(--m));margin-inline:auto;padding-inline:var(--m)}
.sec{padding-block:var(--sec)}
section[id]{scroll-margin-top:var(--hdr)}
.skip{position:fixed;left:var(--m);top:8px;z-index:60;padding:12px 16px;background:var(--or);color:var(--on-or);font:italic 800 16px/1 var(--f);text-transform:uppercase;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---------- grit: film grain over everything, scratches + hex grid on panels ---------- */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;background:var(--grain);opacity:.07;mix-blend-mode:overlay}
@media (prefers-reduced-motion:no-preference){html[data-tier="2"] body::after{animation:grain 1s steps(6) infinite}}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-4%)}50%{transform:translate(-4%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,4%)}100%{transform:translate(0,0)}}
.scr{position:relative;isolation:isolate}
.scr::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url(media/scratches.webp) 0 0/512px auto;opacity:.16;mix-blend-mode:screen}
.hexbg{position:absolute;inset:0;pointer-events:none;background:var(--hex) 0 0/56px 97px;opacity:.07;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent)}

/* ---------- type ---------- */
.h2{font:italic 900 var(--fs-h2)/.9 var(--f);font-stretch:75%;text-transform:uppercase;text-wrap:balance}
.h2 em{font-style:inherit;color:var(--or)}
.h3{font:italic 900 var(--fs-h3)/1 var(--f);font-stretch:75%;text-transform:uppercase;text-wrap:balance}
.lead{font:500 var(--fs-lead)/1.45 var(--f)}
p{text-wrap:pretty}

/* kicker: a small chamfered plate with a hairline orange frame */
.kick{position:relative;display:block;width:fit-content;max-width:100%;padding:.6em 1em;font:italic 800 clamp(12px,.65rem + .3vw,15px)/1.2 var(--f);
  letter-spacing:.08em;text-transform:uppercase;color:var(--or);background:rgba(255,107,0,.08);--c:8px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.kick::after{content:"";position:absolute;inset:0;background:var(--or);pointer-events:none;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .6px) 1.5px,1.5px calc(var(--c) + .6px),1.5px calc(100% - 1.5px),calc(100% - var(--c) - .6px) calc(100% - 1.5px),calc(100% - 1.5px) calc(100% - var(--c) - .6px),calc(100% - 1.5px) 1.5px,calc(var(--c) + .6px) 1.5px)}

/* ---------- buttons / links ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  height:56px;padding:0 24px;font:italic 800 var(--fs-body)/1 var(--f);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  color:var(--on-or);cursor:pointer;transition:transform 80ms linear}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--or);--c:var(--cut-s);transition:background-color 160ms var(--e-out);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.btn__arw{display:block;width:16px;height:16px;overflow:hidden;flex:none}
.btn__arw svg{width:16px;height:16px;fill:currentColor}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:var(--text)}
@media (hover:hover) and (pointer:fine){.btn:hover::before{background:var(--or-hi)}}
.btn--sm{height:40px;padding:0 16px}
.btn--sm .btn__arw,.btn--sm .btn__arw svg{width:14px;height:14px}
.btn--block{display:flex;width:100%}
.dw{display:inline-block;white-space:nowrap}

.tl{font-weight:600;color:var(--text);text-decoration:underline 1px rgba(236,239,232,.4);text-underline-offset:4px;
  background:linear-gradient(var(--or),var(--or)) 0 100%/0 2px no-repeat;transition:background-size 200ms var(--e-snap),color 160ms linear;padding-bottom:2px}
.tl:hover,.tl:focus-visible{background-size:100% 2px;text-decoration-color:transparent}
.tl__arw{display:inline-block;width:.75em;height:.75em;margin-left:.4em;vertical-align:-.02em;fill:currentColor}
.ibtn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;color:var(--text);transition:color 140ms linear}
.ibtn svg{width:20px;height:20px;fill:currentColor}
@media (hover:hover) and (pointer:fine){.ibtn:hover{color:var(--or)}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:#000;transition:transform 240ms var(--e-slam)}
.hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(#000,transparent);pointer-events:none}
.hdr[data-hidden="true"]{transform:translateY(-100%);transition-duration:200ms;transition-timing-function:var(--e-exit)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.hdr__logo{display:flex;align-items:center;min-height:44px;flex:none}
.hdr__logo img{width:auto;height:34px}
.hdr__nav{display:none}
.hdr__r{display:flex;align-items:center;gap:12px}
@media (min-width:1024px){
  .hdr__logo img{height:40px}
  .hdr__nav{display:flex;gap:32px;margin-left:auto;margin-right:24px}
  .hdr__nav a{position:relative;font:italic 800 15px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);padding:14px 0;transition:color 140ms linear}
  .hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--or);transform:scaleX(0);transform-origin:0 50%;transition:transform 220ms var(--e-slam)}
  .hdr__nav a:hover{color:var(--text)}
  .hdr__nav a:hover::after{transform:none}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:calc(100svh - var(--hdr));overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#000}
.hero__bg img,.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.95) contrast(1.06)}
.hero__bg video{opacity:0;transition:opacity 400ms var(--e-out)}
.hero__bg video.is-on{opacity:1}
.hero__bg::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.2) 100%),linear-gradient(transparent 55%,#000 100%)}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:url(media/scratches.webp) 0 0/640px auto;opacity:.12;mix-blend-mode:screen}
.hero__main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-block:48px 32px}
.hero__kick{margin-bottom:22px}
.h1{font:italic 900 clamp(2.6rem,11vw,8.5rem)/.86 var(--f);font-stretch:75%;letter-spacing:-.01em;text-transform:uppercase;max-width:14ch;color:var(--text)}
.h1 .g{display:block;clip-path:inset(-.4em -30% -.1em -.5em)}
.h1 .g>span{display:inline-block}
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m) - 8px) / 10.25),15svh,8.5rem);max-width:none}.h1 .g{white-space:nowrap}}

/* tags: chamfered glass chips with an orange corner notch */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tag{position:relative;isolation:isolate;padding:.85em 1.2em .85em 1.5em;font:italic 800 clamp(13px,.7rem + .35vw,17px)/1 var(--f);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);--c:10px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:linear-gradient(115deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 60%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tag::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(236,239,232,.28);pointer-events:none;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .4px) 1px,1px calc(var(--c) + .4px),1px calc(100% - 1px),calc(100% - var(--c) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--c) - .4px),calc(100% - 1px) 1px,calc(var(--c) + .4px) 1px)}
.tag::after{content:"";position:absolute;left:0;top:0;width:18px;height:18px;background:var(--or);clip-path:polygon(0 0,100% 0,0 100%)}
.hero__cta{margin-top:32px}
.hero__cta .btn{width:100%}
@media (min-width:480px){.hero__cta .btn{width:auto}}
@media (max-width:479px){.tag{font-size:13px;padding:.75em 1em .75em 1.3em}}

.hero__foot{padding-bottom:24px}
.logos{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.logos__lbl{color:var(--text-2);font:500 var(--fs-micro)/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.logos__list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px;align-items:center}
.logos__list li{display:grid;place-items:center start;height:48px}
.logos__list img{height:calc(var(--h) * .72);width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.7;transition:opacity 160ms var(--e-out),filter 160ms var(--e-out)}
.logos__list li:hover img{opacity:1;filter:none}
@media (min-width:1024px){
  .logos{grid-template-columns:200px 1fr;align-items:center;gap:32px}
  .logos__list{grid-template-columns:repeat(6,auto);justify-content:space-between}
  .logos__list img{height:calc(var(--h) * .82)}
}

/* ---------- agent: one character across two blocks ----------
   .agent is tall; .agent__stick pins one screen; app.js sets --k (0→1 transformation) and data-st (a | m | b) */
.agent{position:relative;height:320svh;--k:0}
.agent__stick{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.agent__stick::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hex) 0 0/56px 97px;opacity:.06;
  -webkit-mask-image:radial-gradient(55% 60% at 60% 50%,#000,transparent);mask-image:radial-gradient(55% 60% at 60% 50%,#000,transparent)}
.agent__fig{position:absolute;z-index:0;aspect-ratio:4/5;height:min(54svh,118vw);left:50%;top:calc(var(--hdr) + 8px);
  translate:-50% 0;transition:translate 600ms var(--e-snap)}
.agent__fig>img,.agent__fig>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 42%,#000 60%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 42%,#000 60%,transparent 100%)}
.agent__fig>video{opacity:0;transition:opacity 220ms linear}
.agent__still--b{opacity:0;transition:opacity 220ms linear}
.agent[data-st="a"] .agent__v--a.is-on,.agent[data-st="m"] .agent__v--m.is-on,.agent[data-st="n"] .agent__v--m.is-on,.agent[data-st="b"] .agent__v--b.is-on{opacity:1}
.agent[data-st="m"] .agent__still--a,.agent[data-st="n"] .agent__still--a,.agent[data-st="b"] .agent__still--a{opacity:0}
.agent[data-st="b"] .agent__still--b{opacity:1}
.agent__aura{position:absolute;inset:-12% -20%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,107,0,calc(.08 + var(--k) * .3)),rgba(255,107,0,0) 70%);
  animation:aura 4s ease-in-out infinite}
@keyframes aura{50%{transform:scale(1.06);opacity:.75}}
.agent__hud{position:absolute;width:28px;height:28px;border:2px solid var(--or);opacity:calc(.35 + var(--k) * .65)}
.agent__hud--tl{left:6%;top:4%;border-right:0;border-bottom:0}
.agent__hud--br{right:6%;bottom:10%;border-left:0;border-top:0}

.agent__ui{position:absolute;inset:0;z-index:1;pointer-events:none}
.agent__ui a{pointer-events:auto}
.agent__s1,.agent__s2{position:absolute;left:var(--m);right:var(--m);bottom:calc(28px + env(safe-area-inset-bottom));transition:opacity 260ms linear,transform 420ms var(--e-snap)}
.agent__s1 .lead{margin-top:14px;max-width:26em}
.agent__more{margin-top:18px}
.agent__more .tl{font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.agent .h2{font-size:clamp(2.1rem,1.2rem + 3vw,4.25rem)}
.agent[data-st="n"] .agent__s1,.agent[data-st="b"] .agent__s1{opacity:0;transform:translateY(-24px);pointer-events:none}
.agent__s2{opacity:0;transform:translateY(24px)}
.agent[data-st="n"] .agent__s2,.agent[data-st="b"] .agent__s2{opacity:1;transform:none}
.agent__s2 .agent__h2{font-size:clamp(1.75rem,1rem + 2.6vw,3.5rem)}

.why{display:grid;gap:8px;margin-top:16px}
.why__i{position:relative;isolation:isolate;padding:14px 16px;background:rgba(14,15,16,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);--c:var(--cut-m);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  opacity:0;transform:translateY(18px) scale(.96);transition:opacity 200ms linear,transform 420ms var(--e-slam)}
.why__i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--or)}
.why__i::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(media/scratches.webp) 0 0/420px auto;opacity:.14;mix-blend-mode:screen}
.why__i.is-on{opacity:1;transform:none}
.why__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.why__n{font:italic 900 clamp(1.6rem,1.2rem + 1.4vw,3.25rem)/.85 var(--f);font-stretch:75%;color:var(--or)}
.why__ic{display:block;width:28px;height:28px;flex:none;color:var(--or)}
.why__ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.why__t{margin-top:6px;font:italic 900 clamp(1.05rem,.9rem + .6vw,1.6rem)/1 var(--f);font-stretch:75%;text-transform:uppercase}
.why__i p{margin-top:4px;color:var(--text-2);font-size:clamp(14px,.8rem + .3vw,18px);line-height:1.4}
@media (max-width:1023px){
  .why__i{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  .why__top{grid-row:1 / span 2}
  .why__ic{display:none}
  .why__t{margin:0}
}
@media (max-height:700px) and (max-width:1023px){.agent__fig{height:46svh}.why__i p{display:none}}

/* desktop: the figure stands to the right while he concentrates, steps to the centre as he transforms; the reasons surround him */
@media (min-width:1024px){
  .agent__fig{height:min(86svh,980px);top:auto;bottom:0;translate:calc(-50% + (1 - var(--k)) * 18vw) 0;transition:none}
  .agent__fig>img,.agent__fig>video{-webkit-mask-image:linear-gradient(transparent 0,#000 8%,#000 78%,transparent 100%),radial-gradient(80% 90% at 50% 45%,#000 55%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(transparent 0,#000 8%,#000 78%,transparent 100%),radial-gradient(80% 90% at 50% 45%,#000 55%,transparent 100%);mask-composite:intersect}
  .agent__s1{left:var(--m);right:auto;top:50%;bottom:auto;width:min(40vw,560px);transform:translateY(-50%)}
  .agent[data-st="n"] .agent__s1,.agent[data-st="b"] .agent__s1{transform:translate(-40px,-50%)}
  .agent__s2{position:absolute;inset:calc(var(--hdr) + 24px) var(--m) 40px;bottom:auto;height:calc(100svh - var(--hdr) - 64px);transform:none}
  .agent__s2 .agent__h2{max-width:9ch}
  .why{position:absolute;inset:0;margin:0;display:block}
  .why__i{position:absolute;width:min(25vw,330px);padding:22px 22px 24px}
  .why__i:nth-child(1){left:0;top:42%}
  .why__i:nth-child(2){right:0;top:16%}
  .why__i:nth-child(3){right:0;top:58%}
  .why__ic{width:44px;height:44px}
  .why__t{margin-top:14px}
  .why__i p{margin-top:8px}
  .why__i:nth-child(1){transform:translateX(-30px)}
  .why__i:nth-child(2),.why__i:nth-child(3){transform:translateX(30px)}
  .why__i.is-on{transform:none}
}

/* no motion / weak devices: two plain stacked blocks with stills */
html.agent-static .agent{height:auto}
html.agent-static .agent__stick{position:relative;height:auto;overflow:visible;padding-block:var(--sec)}
html.agent-static .agent__fig{position:relative;left:auto;top:auto;bottom:auto;translate:none;margin:0 auto;height:auto;width:min(100%,460px)}
html.agent-static .agent__fig>video,html.agent-static .agent__still--b,html.agent-static .agent__hud{display:none}
html.agent-static .agent__ui{position:static}
html.agent-static .agent__s1,html.agent-static .agent__s2{position:static;opacity:1;transform:none;width:auto;height:auto;inset:auto;margin-top:32px}
html.agent-static .why{position:static;display:grid}
html.agent-static .why__i{position:relative;inset:auto;width:auto;opacity:1;transform:none}
@media (min-width:768px){html.agent-static .why{grid-template-columns:repeat(3,1fr)}}

/* ---------- season 2026: one event card (remove after the final) ---------- */
.ev{position:relative;isolation:isolate;overflow:hidden;background:var(--s1);--c:var(--cut-l);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.ev::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:url(media/scratches.webp) 0 0/560px auto;opacity:.18;mix-blend-mode:screen}
.ev__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.ev__media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.ev__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,var(--s1))}
.ev__body{position:relative;z-index:2;padding:4px 20px 28px}
.ev__h{margin-top:16px;font-size:clamp(2.25rem,1.1rem + 3.6vw,4.5rem);max-width:12ch}
.ev__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font:italic 800 clamp(14px,.8rem + .3vw,18px)/1.2 var(--f);letter-spacing:.04em;text-transform:uppercase}
.ev__meta span{display:inline-flex;align-items:center;gap:8px}
.ev__ic{width:20px;height:20px;color:var(--or);flex:none}
.ev__steps{display:grid;gap:10px;margin:22px 0 28px;max-width:34em}
.ev__steps li{display:flex;align-items:baseline;gap:12px;color:var(--text);font-size:var(--fs-lead);line-height:1.35}
.ev__n{font:italic 900 1.25em/1 var(--f);font-stretch:75%;color:var(--or);flex:none;min-width:1.6em}
@media (max-width:479px){.ev .btn{width:100%}}
.ev__hud{position:absolute}
@media (min-width:1024px){
  .ev{min-height:min(640px,calc(100svh - var(--hdr) - 80px));display:flex;align-items:center}
  .ev__media{position:absolute;inset:0;aspect-ratio:auto}
  .ev__media img{object-position:80% 40%}
  .ev__media::after{background:linear-gradient(90deg,var(--s1) 0%,rgba(11,11,12,.92) 30%,rgba(11,11,12,.4) 58%,rgba(11,11,12,0) 80%),linear-gradient(transparent 70%,rgba(11,11,12,.6))}
  .ev__body{padding:56px 0 56px clamp(40px,5vw,72px);max-width:620px}
}

/* ---------- form ---------- */
.apply{position:relative;isolation:isolate}
.apply::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--hex) 0 0/56px 97px;opacity:.05;
  -webkit-mask-image:radial-gradient(60% 70% at 75% 50%,#000,transparent);mask-image:radial-gradient(60% 70% at 75% 50%,#000,transparent)}
.apply__in{display:grid;gap:40px}
.dl{margin-top:20px;font-size:var(--fs-lead);color:var(--text-2)}
.dl b{color:var(--text);font-weight:700}
@media (min-width:1024px){.apply__in{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px;align-items:start}}
.apply__box{position:relative;isolation:isolate;padding:28px 20px 32px;background:var(--s1);--c:var(--cut-l);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.apply__box::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(media/scratches.webp) 0 0/520px auto;opacity:.12;mix-blend-mode:screen}
@media (min-width:480px){.apply__box{padding:36px 32px 40px}}
.fld+.fld{margin-top:18px}
.fld label{display:block;margin-bottom:8px;font:italic 800 15px/1.2 var(--f);letter-spacing:.04em;text-transform:uppercase}
.opt{color:var(--text-2);font-weight:700;text-transform:none;letter-spacing:0}
.fld__box{position:relative;isolation:isolate;min-height:52px;display:flex}
.fld__box::before,.fld__box::after{content:"";position:absolute;pointer-events:none}
.fld__box::before{inset:0;z-index:-2;background:rgba(236,239,232,.32);transition:background-color 120ms linear;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.fld__box::after{inset:1px;z-index:-1;background:var(--s2);clip-path:polygon(9.6px 0,100% 0,100% calc(100% - 9.6px),calc(100% - 9.6px) 100%,0 100%,0 9.6px)}
.fld__box:focus-within::before{background:var(--or)}
.fld__box:focus-within::after{inset:2px}
.fld input{flex:1;min-width:0;height:52px;background:transparent;border:0;border-radius:0;outline:none;padding:0 44px 0 16px;font-size:17px}
.fld__ok{position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;fill:var(--or);opacity:0;transition:opacity 140ms linear}
.fld.is-valid .fld__ok{opacity:1}
.fld.is-err .fld__box::before{background:var(--err)}
.fld.is-err .fld__box::after{inset:2px}
.fld__err{color:var(--err);font-size:15px;line-height:1.4}
.fld__err:not(:empty){padding-top:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chk{margin-top:24px}
.chk__l{display:flex;align-items:flex-start;gap:12px;cursor:pointer;line-height:1.45}
.chk__l input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.chk__b{position:relative;flex:none;width:24px;height:24px;display:grid;place-items:center;background:rgba(236,239,232,.32);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:background-color 120ms linear}
.chk__b::after{content:"";position:absolute;inset:1px;background:var(--s2);clip-path:inherit;transition:opacity 120ms linear}
.chk__b svg{position:relative;z-index:1;width:14px;height:14px;fill:var(--on-or);opacity:0;transform:scale(.4);transition:opacity 120ms linear,transform 200ms var(--e-slam)}
.chk__l input:checked+.chk__b{background:var(--or)}
.chk__l input:checked+.chk__b::after{opacity:0}
.chk__l input:checked+.chk__b svg{opacity:1;transform:none}
.chk__l input:focus-visible+.chk__b{outline:2px solid var(--or);outline-offset:3px}
.chk.is-err .chk__b{background:var(--err)}
.form__go{margin-top:28px}
.go-busy{display:none}
.form[aria-busy="true"] .go-idle{display:none}
.form[aria-busy="true"] .go-busy{display:inline}
.form[aria-busy="true"] .form__go{opacity:.75;pointer-events:none}
.form__fail{margin-top:16px;color:var(--text-2)}
.form__ok:focus{outline:none}
.ok__ic{display:grid;place-items:center;width:56px;height:56px;background:var(--or);margin-bottom:20px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.ok__ic svg{width:24px;height:24px;fill:var(--on-or)}
.ok__p{margin-top:12px;color:var(--text-2);font-size:var(--fs-lead)}

/* ---------- footer: our ecosystem as a clear tree, no logos ---------- */
.ftr{padding:64px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--s3);color:var(--text-2)}
.ftr__grid{display:grid;gap:48px}
@media (min-width:768px){.ftr__grid{grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:start}}
.ftr__lbl{margin-bottom:18px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.eco__name{display:block;font:italic 900 clamp(26px,1.2rem + 1.2vw,36px)/1 var(--f);font-stretch:75%;text-transform:uppercase;color:var(--text);transition:color 140ms linear}
.eco__name i{font-style:inherit;color:var(--text-2)}
.eco__d{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:var(--text-2)}
.eco__root{display:inline-block}
.eco__root:hover .eco__name{color:var(--or)}
.eco__kids{position:relative;display:grid;gap:4px;margin:14px 0 0 12px;padding-left:28px}
.eco__kids::before{content:"";position:absolute;left:0;top:-6px;bottom:30px;width:2px;background:var(--s3)}
.eco__kids li{position:relative}
.eco__kids li::before{content:"";position:absolute;left:-28px;top:22px;width:20px;height:2px;background:var(--s3)}
.eco__kid{position:relative;display:block;padding:10px 0}
.eco__kid .eco__name{font-size:clamp(22px,1rem + .8vw,28px)}
.eco__kid:hover .eco__name{color:var(--or)}
.eco__kid[aria-current] .eco__name{color:var(--or)}
.eco__kids li:has([aria-current])::before{background:var(--or)}
.eco__here{display:inline-block;margin-top:8px;padding:.45em .7em;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-or);background:var(--or);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
@media (min-width:768px){
  .eco__kids{grid-template-columns:repeat(2,minmax(0,280px));gap:0 32px;padding-left:0;margin:20px 0 0;padding-top:22px;border-top:2px solid var(--s3)}
  .eco__kids::before{left:0;top:-2px;bottom:auto;width:44px;height:2px;background:var(--text-2)}
  .eco__kids li::before{left:0;top:-24px;width:2px;height:22px}
  .eco__kids li{padding-left:16px}
  .eco__kids li::before{left:0}
}
.ftr__side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ftr__mail{font:italic 800 clamp(17px,.9rem + .5vw,22px)/1 var(--f);color:var(--text);border-bottom:2px solid var(--or);padding-bottom:4px;transition:color 140ms linear}
.ftr__mail:hover{color:var(--or)}
.ftr__soc{display:flex;gap:4px;margin-left:-10px}
@media (min-width:768px){.ftr__side{align-items:flex-end;text-align:right}.ftr__soc{margin:0 -10px 0 0}}
.ftr__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:48px;padding-top:22px;border-top:1px solid var(--s3)}
.ftr__priv{font-weight:400;color:var(--text-2)}
.ftr__credit{display:inline-flex;align-items:center;gap:.45em;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ftr__credit a{color:var(--text);border-bottom:1px solid var(--s3);padding-bottom:2px;transition:color 140ms linear,border-color 140ms linear}
.ftr__credit a:hover{color:var(--or);border-color:var(--or)}
.ufo{width:2.2em;height:auto;fill:var(--or);display:block;translate:0 -1px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hero__kick{animation:slap 420ms var(--e-slam) 520ms both}
  .js .h1 .g>span{animation:rise 620ms var(--e-slam) both}
  .js .h1 .g:nth-child(2)>span{animation-delay:110ms}
  .js .tags .tag,.js .hero__cta,.js .hero__foot{animation:up 460ms var(--e-snap) both}
  .js .tags .tag:nth-child(1){animation-delay:640ms}
  .js .tags .tag:nth-child(2){animation-delay:720ms}
  .js .tags .tag:nth-child(3){animation-delay:800ms}
  .js .hero__cta{animation-delay:920ms}
  .js .hero__foot{animation-delay:1040ms}
  .js .hero__bg{animation:bgin 1200ms var(--e-out) both}
  .js .rv{opacity:0;transform:translateY(28px) skewY(1.5deg);transition:opacity 420ms var(--e-snap),transform 620ms var(--e-slam)}
  .js .rv.is-in{opacity:1;transform:none}
}
@keyframes rise{from{transform:translateY(105%) skewY(4deg)}to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slap{0%{opacity:0;transform:scale(1.6) rotate(-6deg)}60%{opacity:1;transform:scale(.96) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes bgin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
html.intro-done .hero__kick,html.intro-done .tags .tag,html.intro-done .hero__cta,html.intro-done .hero__foot{animation:none!important}

/* drum: scroll-linked transforms come from app.js; plain reveals step aside */
html.cyl .rv{opacity:1!important;transition:none!important;will-change:transform}
html.cyl .rv:not(.is-in){transform:none}

/* lens: chromatic fringe at the top and bottom of the screen */
.lens{position:fixed;left:0;right:0;height:22vh;z-index:39;pointer-events:none;-webkit-backdrop-filter:url(#lensT);backdrop-filter:url(#lensT)}
.lens--t{top:0;-webkit-mask-image:linear-gradient(#000 0,rgba(0,0,0,.6) 45%,transparent);mask-image:linear-gradient(#000 0,rgba(0,0,0,.6) 45%,transparent)}
.lens--b{bottom:0;-webkit-backdrop-filter:url(#lensB);backdrop-filter:url(#lensB);-webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 45%,transparent);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.6) 45%,transparent)}
@media (prefers-reduced-motion:reduce){.lens{display:none}}

/* ---------- preloader ---------- */
#pl{display:none}
html.pl #pl{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:plGone 0s 4s forwards}
html.pl.pl-q #pl{opacity:0;animation:plShow 160ms linear 300ms forwards,plGone 0s 4s forwards}
.pl__half{position:absolute;left:0;right:0;height:50.5%;background:#000;transition:transform 620ms cubic-bezier(.7,0,.2,1)}
.pl__half--t{top:0}
.pl__half--b{bottom:0}
.pl__in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity 220ms linear}
.pl__logo{width:min(300px,62vw);height:auto;clip-path:inset(0 100% 0 0);animation:plWipe 560ms cubic-bezier(.7,0,.2,1) 80ms both}
.pl__bar{width:min(280px,64vw);height:3px;background:var(--s3);overflow:hidden}
.pl__bar i{display:block;height:100%;background:var(--or);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.pl__pct{font:500 13px/1 var(--f-mono);letter-spacing:.12em;color:var(--text-2)}
.pl__n{color:var(--text)}
html.pl-out .pl__in{opacity:0}
html.pl-out .pl__half--t{transform:translateY(-100%)}
html.pl-out .pl__half--b{transform:translateY(100%)}
@keyframes plWipe{to{clip-path:inset(-10% -10% -10% -10%)}}
@keyframes plGone{to{visibility:hidden;opacity:0}}
@keyframes plShow{to{opacity:1}}
html.pl:not(.pl-out) .hero__bg,html.pl:not(.pl-out) .hero__kick,html.pl:not(.pl-out) .h1 .g>span,
html.pl:not(.pl-out) .tags .tag,html.pl:not(.pl-out) .hero__cta,html.pl:not(.pl-out) .hero__foot{animation-play-state:paused}

/* agent on a transparent canvas: the hidden films feed WebGL; stills (with alpha) show until the first frame is drawn */
.agent__fig>video{position:absolute;inset:auto;left:0;top:0;width:2px!important;height:2px!important;opacity:0!important;pointer-events:none}
.agent__cv{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(#000 82%,transparent 100%);mask-image:linear-gradient(#000 82%,transparent 100%)}
.agent__fig>img{-webkit-mask-image:linear-gradient(#000 82%,transparent 100%)!important;mask-image:linear-gradient(#000 82%,transparent 100%)!important}
.agent.gl-on .agent__still{visibility:hidden}

/* =====================================================================
   Agent as a two-step stage (app.js): stop on A → any scroll plays the transformation → the reasons are branded in
   ===================================================================== */
.agent{height:200svh}

/* the reasons: hidden until he has transformed, then burned in like a brand — white-hot flash, a fire edge eating
   through from the left, a push, sparks (app.js); on the way back they cool off */
@property --burn{syntax:'<percentage>';inherits:false;initial-value:0%}
.why__i{opacity:0;transform:none;transition:none}
.agent .why__i:nth-child(n){transform:none}
.why__i.is-on{opacity:1;animation:brandIn 900ms cubic-bezier(.2,.9,.1,1) both;
  -webkit-mask-image:radial-gradient(160% 220% at 0% 50%,#000 calc(var(--burn) - 8%),transparent var(--burn));
  mask-image:radial-gradient(160% 220% at 0% 50%,#000 calc(var(--burn) - 8%),transparent var(--burn))}
.why__i.is-on::after{z-index:2;opacity:1;mix-blend-mode:screen;background:
  radial-gradient(160% 220% at 0% 50%,transparent calc(var(--burn) - 22%),rgba(255,90,0,.85) calc(var(--burn) - 11%),#ffd27a calc(var(--burn) - 8.5%),transparent calc(var(--burn) - 6%)),
  url(media/scratches.webp) 0 0/420px auto;
  animation:brandEdge 900ms linear both}
.why__i.is-off{opacity:0;animation:brandOut 260ms ease-in both}
@keyframes brandIn{
  0%{--burn:0%;transform:scale(1.14) rotate(-1.5deg);filter:brightness(3) saturate(1.8) sepia(.6)}
  22%{transform:scale(.96) rotate(.4deg);filter:brightness(2.2) saturate(1.6) sepia(.4)}
  40%{transform:scale(1.015)}
  70%{--burn:150%;filter:brightness(1.25) saturate(1.1)}
  100%{--burn:150%;transform:none;filter:none}}
@keyframes brandEdge{0%{--burn:0%;opacity:1}70%{--burn:150%;opacity:1}100%{--burn:150%;opacity:.14}}
@keyframes brandOut{0%{opacity:1;filter:none}35%{filter:brightness(1.8) sepia(.5)}100%{opacity:0;transform:scale(.96);filter:brightness(.4) blur(2px)}}

.ember{position:absolute;z-index:3;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;pointer-events:none;
  background:#ffd27a;box-shadow:0 0 6px 2px rgba(255,107,0,.9),0 0 14px 4px rgba(255,107,0,.45)}
.ember:nth-child(3n){width:3px;height:3px;background:#ff8a2e}
.ember:nth-child(4n){width:2px;height:2px;background:#fff1d0}

/* the texts follow the transformation; stills only until WebGL draws */
@media (prefers-reduced-motion:reduce){.why__i.is-on,.why__i.is-on::after{animation:none;-webkit-mask-image:none;mask-image:none}}
html.agent-static .why__i{opacity:1!important;animation:none!important;-webkit-mask-image:none!important;mask-image:none!important}

/* client round 3: the championship title sits above the event card; the card keeps the challenge line as its own title */
.agent__s2 .agent__h2{max-width:12ch}
.season__h{max-width:20ch;font-size:clamp(2.1rem,1rem + 3.2vw,4.25rem);margin-bottom:clamp(24px,3vw,40px)}
.ev__h{margin-top:0;max-width:15ch;font-size:clamp(2rem,1rem + 2.6vw,3.5rem)}
@media (min-width:1024px){.ev{min-height:min(580px,calc(100svh - var(--hdr) - 80px))}}
.ev__body{padding-top:20px}
@media (min-width:1024px){.ev__body{padding-top:56px}}

/* =====================================================================
   Agent v6: he stands near the centre; the holographic interface wraps around him in lime + orange —
   a big window on his right, a small one up on his left, a light ring around him at hand height.
   State A: a live session (gauge, EEG, buttons he presses). State B: his scoreboard and a level-up.
   ===================================================================== */
:root{--hl:#c0fc04;--hl-2:rgba(192,252,4,.62);--hl-3:rgba(192,252,4,.2);--hl-4:rgba(192,252,4,.08)}

/* ---------- stage geometry ---------- */
.agent{--fh:min(54svh,118vw);--fw:calc(var(--fh) * .8);--cx:50vw}
@media (min-width:1024px){.agent{--fh:min(80svh,900px);--cx:56vw}}
.agent__fig{height:var(--fh)!important;translate:none!important;left:calc(var(--cx) - var(--fw) / 2)!important;right:auto!important}
@media (min-width:1024px){.agent__fig{top:auto;bottom:0}}
.agent__aura{inset:-6% -14%;background:radial-gradient(closest-side,rgba(192,252,4,.07),rgba(255,107,0,.08) 45%,transparent 72%)}

/* light ring around him at hand height: the back half behind him, the front half in front */
.ring{position:absolute;left:-8%;width:116%;top:56%;height:16%;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--hl);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:3 2;opacity:.55;
  filter:drop-shadow(0 0 4px var(--hl));animation:ringRun 6s linear infinite}
.ring--back{z-index:0}
.ring--back path{opacity:.3}
.ring--front{z-index:2}
@keyframes ringRun{to{stroke-dashoffset:-100}}
.agent__cv{z-index:1}
/* the interface lights him: a soft lime spill from his right, only where he is (soft-light does nothing on black) */
.agent__spill{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(60% 50% at 92% 58%,rgba(192,252,4,.55),transparent 70%),radial-gradient(40% 35% at 10% 28%,rgba(255,138,46,.35),transparent 70%)}
.agent__hud{display:none!important}
.agent__spill{display:none}   /* the interface light is applied in the WebGL shader, on him only */

/* ---------- the windows ---------- */
.holo{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:1000px}
.hw{position:absolute;mix-blend-mode:screen;filter:drop-shadow(0 0 12px rgba(192,252,4,.28)) drop-shadow(0 0 1.5px rgba(192,252,4,.7))}
.hw__in{position:relative;display:grid;padding:14px 16px 16px;color:var(--hl);--c:14px;
  background:linear-gradient(160deg,rgba(192,252,4,.13),rgba(192,252,4,.035) 55%,rgba(255,138,46,.06));
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  animation:holoHum 5s ease-in-out infinite}
.hw__in::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--hl-2);
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .4px) 1px,1px calc(var(--c) + .4px),1px calc(100% - 1px),calc(100% - var(--c) - .4px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--c) - .4px),calc(100% - 1px) 1px,calc(var(--c) + .4px) 1px)}
.hw__in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,rgba(192,252,4,.05) 2px 3px),
    linear-gradient(transparent 0%,rgba(192,252,4,.12) 50%,transparent 52%) 0 -100%/100% 200% no-repeat;
  animation:scan 3.6s linear infinite}
@keyframes scan{to{background-position:0 0,0 200%}}
@keyframes holoHum{50%{opacity:.9}}
.hw b{font-weight:inherit;color:#fff}
/* both states share the cell; the change is a clean cross-fade (no glitch) */
.hw__a,.hw__b{grid-area:1/1;min-width:0;transition:opacity 320ms linear,transform 420ms var(--e-snap)}
.hw__b{opacity:0;transform:translateY(8px)}
.agent[data-st="n"] .hw__a,.agent[data-st="b"] .hw__a{opacity:0;transform:translateY(-8px)}
.agent[data-st="n"] .hw__b,.agent[data-st="b"] .hw__b{opacity:1;transform:none}

/* wrapped around him: each window turns its far edge away, like a curved screen around the player */
.hw--main{transform:rotateY(-19deg);transform-origin:0 50%}
.hw--mini{transform:rotateY(20deg);transform-origin:100% 50%}

.hw__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--hl-3);
  font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.hw__tag{color:#fff;display:inline-flex;align-items:center;gap:8px}
.rec{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 8px var(--or);animation:rec 1s steps(2) infinite}
@keyframes rec{50%{opacity:.2}}
.hw__time{font-size:15px;color:#fff}

/* --- session (state A) --- */
.ha__row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:12px}
.gauge{position:relative;width:118px;height:118px}
.gauge svg{width:100%;height:100%;overflow:visible}
.gauge__ticks circle{fill:none;stroke:var(--hl-2);stroke-width:5;stroke-dasharray:.25 .75}
.gauge__ticks{transform-origin:60px 60px;animation:spin 18s linear infinite}
.gauge__track{fill:none;stroke:var(--hl-3);stroke-width:7}
.gauge__val{fill:none;stroke:var(--hl);stroke-width:7;stroke-dasharray:var(--g,86) 100;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dasharray 500ms var(--e-snap);filter:drop-shadow(0 0 4px var(--hl))}
.gauge__spin{fill:none;stroke:var(--or-hi);stroke-width:2.5;transform-origin:60px 60px;animation:spin 4s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.gauge__n{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge__n b{font:italic 900 34px/.9 var(--f);font-stretch:75%}
.gauge__n span{font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hl-2)}
.eeg__lbl{display:flex;justify-content:space-between;font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hl-2)}
.eeg__hz{color:var(--or-hi)}
.eeg__cv{display:block;width:100%;height:84px;margin-top:6px;border-top:1px solid var(--hl-4);border-bottom:1px solid var(--hl-4)}
.ha__ctrl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.hbtn{position:relative;padding:8px 4px;text-align:center;font:500 9.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hl);
  background:var(--hl-4);--c:6px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  box-shadow:inset 0 0 0 1px var(--hl-3);transition:background-color 120ms linear,color 120ms linear}
.hbtn.on{background:var(--hl);color:#0c1000;box-shadow:none}
.hbtn.on.alt{background:var(--or-hi)}
.ha__row2{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:12px}
.slider{display:grid;gap:6px}
.slider__lbl{font:500 9.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hl-2)}
.slider__rail{position:relative;height:4px;background:var(--hl-3)}
.slider__rail i{position:absolute;top:50%;left:var(--s,62%);width:14px;height:14px;margin:-7px 0 0 -7px;transform:rotate(45deg);border:2px solid var(--hl);background:#0c1000;
  box-shadow:0 0 8px var(--hl);transition:left 600ms var(--e-snap)}
.slider__rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--s,62%);background:var(--hl);transition:width 600ms var(--e-snap)}
.eq{display:flex;align-items:flex-end;gap:3px;height:30px}
.eq i{width:4px;height:100%;background:var(--hl);transform-origin:50% 100%;animation:eq 900ms ease-in-out infinite alternate}
.eq i:nth-child(odd){animation-duration:640ms}
.eq i:nth-child(3n){background:var(--or-hi);animation-duration:1100ms}
.eq i:nth-child(2){animation-delay:-200ms}.eq i:nth-child(4){animation-delay:-450ms}.eq i:nth-child(5){animation-delay:-120ms}.eq i:nth-child(7){animation-delay:-600ms}.eq i:nth-child(8){animation-delay:-330ms}.eq i:nth-child(10){animation-delay:-520ms}
@keyframes eq{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.hw__foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:8px;border-top:1px solid var(--hl-3);
  font:500 10.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hl-2)}

/* --- mini window: target (A) → level up (B) --- */
.mini__cnt{color:var(--hl-2)}
.reticle{width:120px;height:120px;margin:10px auto 0}
.reticle svg{width:100%;height:100%;overflow:visible}
.ret__o,.ret__i{fill:none;stroke:var(--hl-3);stroke-width:1.5}
.ret__spin{fill:none;stroke:var(--hl);stroke-width:2.5;transform-origin:50px 50px;animation:spin 3s linear infinite;filter:drop-shadow(0 0 3px var(--hl))}
.ret__x{stroke:var(--hl-2);stroke-width:1.5}
.ret__dot{fill:var(--or-hi);animation:rec 900ms steps(2) infinite}
.ret__i{transform-origin:50px 50px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25);opacity:.4}}
.lvl__up{color:var(--or-hi)}
.lvl{position:relative;height:64px;margin-top:8px;overflow:hidden;font:italic 900 64px/1 var(--f);font-stretch:75%;color:#fff;text-align:center}
.lvl span{position:absolute;left:0;right:0;top:0;transition:transform 520ms var(--e-slam) 500ms,opacity 300ms linear 500ms}
.lvl__new{transform:translateY(100%);opacity:0;color:var(--hl);text-shadow:0 0 18px rgba(192,252,4,.6)}
.holo.is-score .lvl__old{transform:translateY(-100%);opacity:0}
.holo.is-score .lvl__new{transform:none;opacity:1}
.xp{height:6px;margin-top:10px;background:var(--hl-3)}
.xp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--hl),var(--or-hi));transform:scaleX(.2);transform-origin:0 50%;transition:transform 1200ms var(--e-snap) 300ms;box-shadow:0 0 8px var(--hl)}
.holo.is-score .xp i{transform:scaleX(.86)}
.xp__lbl{margin-top:6px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hl-2);text-align:right}
.xp__lbl b::before{content:"+"}

/* --- scoreboard (state B) --- */
.hs__sub{color:var(--hl-2);font-size:10px;letter-spacing:.06em;text-transform:none}
.hs__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:12px}
.m{min-width:0;padding-top:8px;border-top:1px solid var(--hl-3);opacity:0;transform:translateY(6px);transition:opacity 220ms linear,transform 320ms var(--e-snap)}
.holo.is-score .m{opacity:1;transform:none;transition-delay:calc(var(--i) * 80ms)}
.m:nth-child(1){--i:0}.m:nth-child(2){--i:1}.m:nth-child(3){--i:2}.m:nth-child(4){--i:3}.m:nth-child(5){--i:4}.m:nth-child(6){--i:5}.m:nth-child(7){--i:6}.m:nth-child(8){--i:7}
.m__lbl{font:500 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hl-2)}
.m__val{margin-top:3px;font:italic 900 20px/1 var(--f);font-stretch:75%;color:var(--hl)}
.m__val b{font-size:1.25em}
.m__note{margin-top:4px;font:500 11px/1.25 var(--f-mono);color:#fff}
.m__scale,.m__fill,.m__strip,.m__tape{position:relative;height:6px;margin-top:8px;background:var(--hl-3)}
.m__scale{background:linear-gradient(90deg,rgba(192,252,4,.06),rgba(192,252,4,.3))}
.m__zone{position:absolute;left:70%;right:0;top:-2px;bottom:-2px;border:1px solid rgba(255,138,46,.75);background:rgba(255,138,46,.2)}
.m__mark{position:absolute;top:-5px;left:0;width:3px;height:16px;margin-left:-1.5px;background:#fff;box-shadow:0 0 8px #fff,0 0 14px var(--or);
  transition:left 1100ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 200ms)}
.holo.is-score .m__mark{left:77.6%}
.m__axis{display:flex;justify-content:space-between;margin-top:5px;font:500 8.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hl-2)}
.m__fill i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);background:var(--hl);box-shadow:0 0 8px var(--hl);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1000ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 200ms)}
.holo.is-score .m__fill i{transform:none}
.m__stops{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.m__stops i{width:7px;height:7px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:var(--hl-3);transition:background-color 120ms linear}
.m__stops i.on{background:var(--hl)}
.m__strip{background:repeating-linear-gradient(90deg,var(--hl-3) 0 1px,transparent 1px 3px),var(--hl-4)}
.m__strip i{position:absolute;top:-2px;bottom:-2px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);background:var(--or);box-shadow:0 0 10px var(--or);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 300ms)}
.holo.is-score .m__strip i{transform:none}
.m__line{display:block;width:100%;height:28px;margin-top:6px;overflow:visible}
.m__line path{fill:none;stroke:var(--hl);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1200ms cubic-bezier(.3,.6,.2,1) calc(var(--i) * 80ms + 200ms);filter:drop-shadow(0 0 3px var(--hl))}
.holo.is-score .m__line path{stroke-dashoffset:0}
.m__line circle{fill:var(--or);opacity:0;transition:opacity 200ms linear calc(var(--i) * 80ms + 900ms)}
.holo.is-score .m__line circle{opacity:1}
.m__tape{height:10px;background:var(--hl);opacity:.85;box-shadow:0 0 8px rgba(192,252,4,.45);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1000ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 200ms)}
.holo.is-score .m__tape{transform:none}
.m__tape i{position:absolute;top:-1px;bottom:-1px;left:calc(var(--x) * 100%);width:3px;background:#000}
.m__cols{display:flex;align-items:flex-end;gap:10px;height:50px;margin-top:6px}
.m__cols span{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.m__cols span::before{content:"";display:block;height:calc((var(--h) - .88) * 800%);max-height:100%;background:var(--hl-3);border-top:2px solid var(--hl);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform 900ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 200ms)}
.m__cols span:last-child::before{background:rgba(255,138,46,.3);border-top-color:var(--or-hi);box-shadow:0 -4px 12px rgba(255,138,46,.4)}
.holo.is-score .m__cols span::before{transform:none}
.m__cols b{position:absolute;left:0;right:0;bottom:calc((var(--h) - .88) * 800% + 2px);text-align:center;font:italic 900 14px/1 var(--f);font-stretch:75%}
.m__cols em{margin-top:3px;font:500 8.5px/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--hl-2);text-align:center}

/* ---------- placement ---------- */
@media (min-width:1024px){
  .hw--main{left:calc(var(--cx) + var(--fw) * .28);top:calc(100svh - var(--fh) * .76);width:min(25vw,380px)}
  .hw--mini{right:calc(100vw - var(--cx) + var(--fw) * .2);top:calc(100svh - var(--fh) * .98);width:200px}
  /* text column on the left, vertically centred in both states, with air between title and cards */
  .agent__s1,.agent__s2{inset:auto;left:var(--m);top:50%;width:min(27vw,390px);height:auto;transform:translateY(-50%)}
  .agent[data-st="n"] .agent__s1,.agent[data-st="b"] .agent__s1{transform:translate(-24px,-50%)}
  .agent__s2{opacity:0;transform:translate(0,calc(-50% + 24px))}
  .agent[data-st="n"] .agent__s2,.agent[data-st="b"] .agent__s2{opacity:1;transform:translateY(-50%)}
  .agent__s2 .agent__h2{max-width:none;font-size:clamp(2rem,1rem + 2vw,3.25rem)}
  .why{position:static;display:grid;gap:12px;margin-top:clamp(24px,4svh,40px)}
  .why__i{position:relative;inset:auto!important;width:auto;padding:16px 18px 18px}
  .agent .why__i:nth-child(n){left:auto;right:auto;top:auto}
  .why__ic{width:36px;height:36px}
  .why__t{margin-top:10px}
}
@media (min-width:1024px) and (max-width:1279px){.hw--mini{display:none}.hw--main{width:min(30vw,380px)}}

/* phones / tablets: figure on top, the main window over his chest (smaller, still turned), copy below */
@media (max-width:1023px){
  .hw--mini{display:none}
  .hw--main{left:50%;top:calc(var(--hdr) + var(--fh) * .4);width:min(86vw,380px);transform:translateX(-50%) rotateY(-10deg);transform-origin:50% 50%}
  .agent[data-st="n"] .hw--main,.agent[data-st="b"] .hw--main{top:calc(var(--hdr) + var(--fh) * .35)}
  .hw__in{padding:10px 12px 12px}
  .ha__row{grid-template-columns:auto 1fr;gap:10px}
  .gauge{width:84px;height:84px}
  .gauge__n b{font-size:24px}
  .eeg__cv{height:56px}
  .ha__row2{display:none}
  .hs__grid{gap:6px 12px;margin-top:8px}
  .m{padding-top:5px}
  .m__val{font-size:16px}
  .m--rhythm,.m--back,.m__axis,.hs__sub{display:none}
  .m__cols{height:26px}
  .m__cols b{font-size:12px}
  .m__scale,.m__fill,.m__strip{margin-top:5px}
  .m__tape{height:7px;margin-top:5px}
  .m__note{font-size:10px}
  .why{gap:6px;margin-top:12px}
  .why__i{padding:10px 14px}
}

/* =====================================================================
   Hero, client round 5: centred, a readable kicker, more air
   ===================================================================== */
.hero__main{align-items:center;text-align:center;padding-block:clamp(56px,10svh,120px) clamp(40px,7svh,80px)}
.hero__kick{margin:0 auto clamp(28px,4.5svh,48px);font-size:clamp(14px,.75rem + .55vw,21px);padding:.75em 1.3em;letter-spacing:.09em;--c:10px}
.h1{margin-inline:auto;max-width:15ch}
@media (min-width:768px){.h1{max-width:none}}
.tags{justify-content:center;gap:12px 14px;margin-top:clamp(30px,5svh,56px)}
.hero__cta{margin-top:clamp(32px,5svh,56px)}
.hero__bg::before{background:radial-gradient(75% 70% at 50% 48%,rgba(0,0,0,.45),rgba(0,0,0,.82) 100%),linear-gradient(transparent 55%,#000 100%)}
.hero__foot{padding-bottom:clamp(20px,3svh,32px)}

/* =====================================================================
   Agent v7: two still photos (no motion) — casual → special agent with the League patch;
   a lime scan line sweeps down and dresses him; only the interface is animated. One curved window on his right.
   ===================================================================== */
.agent__still--a,.agent__still--b{opacity:1!important;visibility:visible!important;transition:none!important}
.agent__still--a{clip-path:inset(calc(var(--k) * 100%) 0 0 0)}
.agent__still--b{clip-path:inset(0 0 calc(100% - var(--k) * 100%) 0)}
.agent__scan{position:absolute;left:-6%;right:-6%;top:calc(var(--k) * 100%);height:3px;margin-top:-1.5px;z-index:2;pointer-events:none;opacity:0;
  background:var(--hl);box-shadow:0 0 12px 2px var(--hl),0 0 40px 8px rgba(192,252,4,.35)}
.agent__scan::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:90px;background:linear-gradient(transparent,rgba(192,252,4,.16))}
.agent.is-swap .agent__scan{opacity:1}
.hw--mini{display:none!important}

/* the light ring sits on him: centred on his body, at hand height */
.ring{left:50%!important;width:104%!important;translate:-50% 0;top:60%!important;height:14%!important}

/* the window is a curved screen: arched top and bottom edges, darker towards its sides, turned towards him */
.hw--main{transform:rotateY(-14deg)}
.hw--main .hw__in{clip-path:url(#hw-curve);
  background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%,transparent 82%,rgba(0,0,0,.28)),
    linear-gradient(160deg,rgba(192,252,4,.13),rgba(192,252,4,.035) 55%,rgba(255,138,46,.06))}
.hw--main .hw__in::before{display:none}
.hw__frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.hw__frame path{fill:none;stroke:var(--hl-2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.hw--main .hw__in{padding:22px 20px 22px}
@media (min-width:1024px){.hw--main{left:calc(var(--cx) + var(--fw) * .26);width:min(27vw,400px)}}

/* =====================================================================
   Season title centred; footer v3: two columns on one top line, ecosystem as product cards (no rules or ticks)
   ===================================================================== */
.season__h{margin-inline:auto;text-align:center;max-width:22ch}

.ftr{padding:72px 0 calc(28px + env(safe-area-inset-bottom))}
.ft{display:grid;gap:48px}
@media (min-width:900px){.ft{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:64px;align-items:start}}
.ft__lbl{margin:0 0 20px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.ft__name{display:block;font:italic 900 clamp(24px,1.1rem + .9vw,32px)/1 var(--f);font-stretch:75%;text-transform:uppercase;color:var(--text);transition:color 140ms linear}
.ft__name i{font-style:inherit;color:var(--text-2)}
.ft__desc{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:var(--text-2)}
.ft__root{position:relative;display:block;padding:0 36px 22px 0;border-bottom:1px solid var(--s3)}
.ft__root:hover .ft__name{color:var(--or)}
.ft__arw{position:absolute;right:0;top:4px;width:16px;height:16px;fill:var(--text-2);transition:fill 140ms linear}
.ft__root:hover .ft__arw{fill:var(--or)}
.ft__prods{display:grid;gap:12px;margin-top:20px}
@media (min-width:600px){.ft__prods{grid-template-columns:1fr 1fr}}
.ft__prod{position:relative;display:block;height:100%;padding:20px 22px 22px;background:var(--s1);--c:12px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background-color 160ms linear}
.ft__prod .ft__name{font-size:clamp(22px,1rem + .6vw,26px)}
.ft__prod:hover{background:var(--s2)}
.ft__prod:hover .ft__name{color:var(--or)}
.ft__prod.is-here{background:var(--s2);box-shadow:inset 3px 0 0 var(--or)}
.ft__prod.is-here .ft__name{color:var(--or)}
.ft__here{position:absolute;right:14px;top:16px;padding:.45em .7em;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-or);background:var(--or);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.ft__contact{display:flex;flex-direction:column;align-items:flex-start}
.ft__mail{font:italic 800 clamp(18px,.95rem + .5vw,23px)/1.1 var(--f);color:var(--text);border-bottom:2px solid var(--or);padding-bottom:5px;transition:color 140ms linear;word-break:break-all}
.ft__mail:hover{color:var(--or)}
.ft__note{margin-top:12px;font-size:15px;color:var(--text-2)}
.ft__soc{display:flex;gap:4px;margin:18px 0 0 -10px}
.ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:56px;padding-top:22px;border-top:1px solid var(--s3)}
.ft__priv{font-weight:400;color:var(--text-2)}
@media (max-width:1023px){
  .hw--main{left:auto;right:max(10px,3vw);width:min(70vw,330px);top:calc(var(--hdr) + var(--fh) * .42);transform:rotateY(-12deg);transform-origin:0 50%}
  .agent[data-st="n"] .hw--main,.agent[data-st="b"] .hw--main{top:calc(var(--hdr) + var(--fh) * .38)}
  .hw--main .hw__in{padding:14px 12px}
}
@media (max-width:1023px){
  .agent[data-st="n"] .hw--main,.agent[data-st="b"] .hw--main{top:calc(var(--hdr) + var(--fh) * .56)}
  .m--focus,.m--clutch{display:none}
}

/* =====================================================================
   Round 6: a really curved window, gesture-driven stage, cooling scratches, 2-line championship title
   ===================================================================== */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scrollbar-gutter:stable}
html.is-frozen{overflow:hidden;overscroll-behavior:none}   /* only the root: overflow on body would make it the scroller and unstick the stage */

/* the window: slices on a cylinder around him (built in app.js) */
.holo{perspective:1400px}
.curve{position:absolute;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.curve__s{position:absolute;left:0;top:0;overflow:hidden;backface-visibility:hidden;mix-blend-mode:screen;opacity:var(--shade,1);
  filter:drop-shadow(0 0 10px rgba(192,252,4,.22))}
.curve__in{position:relative;color:var(--hl)}
.curve__in b{font-weight:inherit;color:#fff}
.curve__in .hw__frame{display:none}
.agent__fig{z-index:0}
@media (max-width:1023px){.curve__in{padding:12px 12px 14px}}

/* the reasons: scratches burn orange, then cool down to a faint grey; the fire edge runs on the card itself */
.why__i::after{background:#8a8f94;opacity:.14;mix-blend-mode:normal;
  -webkit-mask:url(media/scratches.webp) 0 0/420px auto;mask:url(media/scratches.webp) 0 0/420px auto}
.why__i.is-on::after{z-index:2;mix-blend-mode:normal;background:#8a8f94;animation:scratchCool 1800ms cubic-bezier(.3,.6,.3,1) both}
@keyframes scratchCool{0%{background-color:#fff1c0;opacity:1}18%{background-color:#ff8a2e;opacity:1}55%{background-color:#a3471a;opacity:.5}100%{background-color:#8a8f94;opacity:.14}}
.why__i.is-on{background:
  radial-gradient(160% 220% at 0% 50%,transparent calc(var(--burn) - 22%),rgba(255,90,0,.85) calc(var(--burn) - 11%),#ffd27a calc(var(--burn) - 8.5%),transparent calc(var(--burn) - 6%)),
  rgba(14,15,16,.82)}

/* the championship title in two lines */
.season__h{max-width:none;text-wrap:balance}
@media (min-width:1024px){.season__h{max-width:28ch;font-size:clamp(2.6rem,1rem + 3vw,4.25rem)}}
@media (min-width:1024px){.agent{--cx:53vw}}
@media (max-width:1023px){.agent{--cx:38vw}}
@media (max-width:1023px){
  .curve{transition:margin-top 420ms var(--e-snap)}
  .agent[data-st="n"] .curve,.agent[data-st="b"] .curve{margin-top:calc(var(--fh) * .3)}
}
@media (max-width:1023px){.curve__s{filter:none}}

/* =====================================================================
   Round 7: scroll-driven scan line (no locks), concave curved window without per-slice filters, light footer
   ===================================================================== */
.agent{height:240svh}
.holo{perspective:1000px}
.curve__s{filter:none!important;mix-blend-mode:screen}
.curve__in{box-shadow:inset 0 0 0 1px rgba(192,252,4,.18)}
@media (max-width:1023px){.agent{--cx:50vw}}
/* text: A = trials copy, B = why + cards */
.agent[data-st="b"] .agent__s1{opacity:0;pointer-events:none}
.agent[data-st="b"] .agent__s2{opacity:1}

/* footer, light: two compact columns on one line, a breadcrumb-like ecosystem */
.ftr{padding:44px 0 calc(24px + env(safe-area-inset-bottom))}
.fl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px 48px}
.fl__lbl{margin:0 0 12px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.fl__tree{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0}
.fl__root{display:inline-flex;align-items:center;gap:8px;font:italic 900 22px/1 var(--f);font-stretch:75%;text-transform:uppercase;color:var(--text);transition:color 140ms linear}
.fl__root svg{width:12px;height:12px;fill:currentColor;opacity:.6}
.fl__root:hover{color:var(--or)}
.fl__kids{display:inline-flex;align-items:center;gap:6px;padding-left:18px;border-left:1px solid var(--s3)}
.fl__kids a{padding:7px 12px;font:italic 800 14px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);background:var(--s1);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:color 140ms linear,background-color 140ms linear}
.fl__kids a:hover{color:var(--text)}
.fl__kids a[aria-current]{color:var(--on-or);background:var(--or)}
.fl__row{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:0}
.fl__mail{font:italic 800 18px/1.1 var(--f);color:var(--text);border-bottom:2px solid var(--or);padding-bottom:3px;transition:color 140ms linear}
.fl__mail:hover{color:var(--or)}
.fl__soc{display:inline-flex;gap:2px}
.fl__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:32px;padding-top:18px;border-top:1px solid var(--s3);font-size:14px}
.fl__priv{font-weight:400;color:var(--text-2)}
@media (max-width:599px){.fl__kids{padding-left:0;border-left:0}}
@media (max-width:1023px){.agent[data-st="n"] .curve,.agent[data-st="b"] .curve{margin-top:calc(var(--fh) * .12)}}

/* the hologram is one WebGL canvas over the stage (the interface is drawn in 2D and mapped onto a curved strip) */
.hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:1}

/* round 9: the man is the hero of the block — much bigger */
@media (min-width:1024px){.agent{--fh:min(92svh,1120px);--cx:59vw}}
@media (max-width:1023px){.agent{--fh:min(60svh,128vw)}}
@media (min-width:1024px){.agent{--cx:53vw}}
@media (max-width:1023px){.agent{--cx:40vw}}

/* atmosphere behind him: backlight, dust / embers / smoke (app.js) */
.atmos{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.agent__aura{display:none}
/* the atmosphere fades out towards the top and bottom of the stage, so it never meets the blocks around it */
.atmos{-webkit-mask-image:linear-gradient(transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 22%,#000 82%,transparent 100%)}

/* the light ring follows the change: lime for the student, orange for the agent */
.ring path{stroke:color-mix(in srgb,var(--hl) calc((1 - var(--k,0)) * 100%),#ff6b00);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hl) calc((1 - var(--k,0)) * 100%),#ff6b00))}
.agent{height:300svh}

/* round 10 — hero: a brighter film; the scratches only at the edges (a vignette), the centre stays clean */
.hero__bg img,.hero__bg video{filter:brightness(.78) saturate(1) contrast(1.05)}
.hero__bg::before{background:radial-gradient(75% 70% at 50% 48%,rgba(0,0,0,.24),rgba(0,0,0,.66) 100%),linear-gradient(transparent 62%,#000 100%)}
.hero__bg::after{opacity:.09;
  -webkit-mask-image:radial-gradient(70% 75% at 50% 48%,transparent 45%,#000 100%);mask-image:radial-gradient(70% 75% at 50% 48%,transparent 45%,#000 100%)}

/* round 10 — the ring a little lower on him; the energy around the second look (app.js) has no top fade */
.ring{top:68%!important}
.energy{position:absolute;left:-25%;top:-12%;width:150%;height:124%;z-index:1;pointer-events:none;mix-blend-mode:screen}
html.agent-static .energy{display:none}

/* round 13 — the man and the hologram move right: more air for the text and the cards on the left */
@media (min-width:1024px){.agent{--cx:57vw}}

/* =====================================================================
   Round 15 (client PDF v5)
   ===================================================================== */
/* hero kicker: a solid white plate with black text, no outline */
.hero__kick{color:#0b0b0c;background:#fff}
.hero__kick::after{display:none}

/* trials: one block of text given in portions; the punch line arrives with the second look. The old reasons moved to .vals */
.agent[data-st="n"] .agent__s1,.agent[data-st="b"] .agent__s1{opacity:1;pointer-events:auto;transform:none}
@media (min-width:1024px){.agent[data-st="n"] .agent__s1,.agent[data-st="b"] .agent__s1{transform:translateY(-50%)}}
.agent__s1 .lead{max-width:24em}
.agent__s1 .agent__l2{margin-top:6px}



/* championship: the "Primera temporada" tag above a two-line title */
.season__kick{margin:0 auto 18px}
.season__h span,.season__h em{display:block}
/* the team photo: on desktop it fills the right 70 % of the card, top-aligned, so the trophy is whole and out of the text's shade */
.ev__media img{object-position:72% 0}
@media (min-width:1024px){
  .ev__media{inset:0 0 0 30%}
  .ev__media img{object-position:100% 0}
  .ev__media::after{background:linear-gradient(90deg,var(--s1) 0%,rgba(11,11,12,.55) 16%,rgba(11,11,12,0) 42%),linear-gradient(transparent 76%,rgba(11,11,12,.55))}
}

/* =====================================================================
   Round 16
   ===================================================================== */
/* header with the Challenge mechanics: at the top the plain bar on a dark fade; after it slides away it returns
   as a floating chamfered glass card (app.js toggles .is-card / data-hidden) */
.hdr{position:fixed;top:10px;left:0;right:0;margin-inline:auto;width:min(calc(100% - 20px),1380px);height:64px;--c:12px;
  background:rgba(14,15,16,.62);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:transform 460ms cubic-bezier(.2,.9,.1,1),top 300ms var(--e-out),width 300ms var(--e-out),height 300ms var(--e-out),background-color 220ms linear}
.hdr::after{display:none}
.hdr::before{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,255,255,.14);
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .41px) 1px,1px calc(var(--c) + .41px),1px calc(100% - 1px),calc(100% - var(--c) - .41px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--c) - .41px),calc(100% - 1px) 1px,calc(var(--c) + .41px) 1px)}
.hdr[data-hidden="true"]{transform:translateY(calc(-100% - 16px));transition-duration:300ms;transition-timing-function:cubic-bezier(.5,0,.75,0)}
.hdr.is-card .hdr__in{max-width:none;padding-inline:20px 12px}
@media (min-width:768px){.hdr{top:14px;width:min(calc(100% - 32px),1380px);--c:16px;height:76px}.hdr.is-card .hdr__in{padding-inline:32px 16px}}
.hdr:not(.is-card){top:0;width:100%;height:var(--hdr);--c:0px;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,0));-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr:not(.is-card)::before{opacity:0}
@media (prefers-reduced-motion:reduce){.hdr[data-hidden="true"]{transform:none}}
/* the hero now starts under the header */
.hero{min-height:100svh;padding-top:var(--hdr)}

/* trials: the heading, then three lines that arrive one by one (the last with the second look), one rhythm, no stair-step */
.agent__lines{margin-top:22px;display:grid;gap:14px;max-width:25em}
.agent__ln{position:relative;padding-left:18px;font:500 var(--fs-lead)/1.4 var(--f);color:var(--text);text-wrap:balance;
  opacity:0;transform:translateY(10px);transition:opacity 360ms linear,transform 560ms var(--e-snap)}
.agent__ln::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;background:var(--hl);transform:scaleY(0);transform-origin:50% 0;transition:transform 520ms var(--e-snap) 120ms}
.agent__ln.is-on{opacity:1;transform:none}
.agent__ln.is-on::before{transform:none}
.agent__ln--punch{font:italic 800 calc(var(--fs-lead) * 1.18)/1.25 var(--f)}
.agent__ln--punch::before{background:var(--or)}
.agent__ln--punch em{font-style:inherit;color:var(--or)}
html.agent-static .agent__ln{opacity:1;transform:none}
html.agent-static .agent__ln::before{transform:none}

.hs__done{margin-top:10px;font:italic 900 18px/1.1 var(--f);text-transform:uppercase;color:var(--hl)}

/* =====================================================================
   Round 17 — values: an abstract particle field + the reasons as a typographic list;
   season: a timeline of the season (weekly ticks, match nodes, the final), a "Tu equipo" marker travels with the scroll
   ===================================================================== */
.rs{display:grid;gap:8px;margin-top:clamp(20px,3vw,40px)}
.rs__art{position:sticky;top:calc(var(--hdr) + 4px);z-index:1;height:min(38svh,340px);background:linear-gradient(#000 82%,rgba(0,0,0,0))}
.rs__cv{display:block;width:100%;height:100%}
.rs__list{display:grid}
.rs__i{min-height:44svh;display:flex;flex-direction:column;justify-content:center;padding:28px 0 28px 22px;border-left:2px solid rgba(255,255,255,.1);
  opacity:.3;transition:opacity 320ms linear,border-color 320ms linear}
.rs__i.is-on{opacity:1;border-left-color:var(--or)}
.rs__n{font:italic 900 clamp(2.6rem,1.8rem + 3vw,5.5rem)/.8 var(--f);font-stretch:75%;color:transparent;-webkit-text-stroke:1.5px var(--or)}
.rs__t{margin-top:14px;font:italic 900 clamp(1.5rem,1.1rem + 1.7vw,2.9rem)/1 var(--f);font-stretch:75%;text-transform:uppercase;text-wrap:balance}
.rs__i p{margin-top:12px;font:500 var(--fs-lead)/1.45 var(--f);color:var(--text-2);max-width:24em}
@media (min-width:1024px){
  .rs{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
  .rs__art{top:calc(50svh - min(35svh,320px));height:min(70svh,640px);background:none}
  .rs__i{min-height:min(70svh,640px)}   /* the same height as the sticky art, so the art is centred on the first and the last reason too */
}

.flow__lead{margin-top:14px;color:var(--text-2);max-width:30em}

/* =====================================================================
   Round 18 — season: one simple line runs through the three cards and lights them up
   ===================================================================== */
.stl{position:relative;--p:0;margin-top:clamp(32px,4vw,56px)}
.stl__line{position:absolute;z-index:2;pointer-events:none;left:14px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.14)}
.stl__line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p) * 100%);background:var(--or);box-shadow:0 0 14px var(--or)}
.stl__line i::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,107,0,.35),0 0 18px var(--or)}
.stl__ph{display:grid;gap:12px}
.stl__p{position:relative;isolation:isolate;padding:26px 22px 28px 40px;background:var(--s1);--c:var(--cut-m);opacity:.5;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:opacity 360ms linear,background-color 360ms linear}
.stl__p::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(160deg,rgba(255,107,0,.22),rgba(255,107,0,0) 60%);opacity:0;transition:opacity 420ms linear}
.stl__p.is-on{opacity:1}
.stl__p.is-on::after{opacity:1}
.stl__n{display:block;font:italic 900 clamp(2.4rem,1.6rem + 2vw,3.6rem)/.8 var(--f);font-stretch:75%;color:rgba(255,255,255,.18);transition:color 360ms linear}
.stl__p.is-on .stl__n{color:var(--or)}
.stl__t{margin-top:16px;font:italic 900 clamp(1.3rem,1rem + 1vw,2rem)/1 var(--f);font-stretch:75%;text-transform:uppercase}
.stl__p p{margin-top:10px;color:var(--text-2);line-height:1.45}
.stl__p--fin.is-on{box-shadow:none}
.stl__p--fin.is-on::after{background:linear-gradient(160deg,rgba(255,107,0,.4),rgba(255,107,0,.04) 70%)}
.stl__p--fin.is-on .stl__t{color:var(--or)}
@media (min-width:768px){
  .stl__line{left:0;right:0;top:86px;bottom:auto;width:auto;height:2px}
  .stl__line i{height:100%;width:calc(var(--p) * 100%)}
  .stl__line i::after{left:auto;right:-5px;top:50%;bottom:auto;margin:-5px 0 0}
  .stl__ph{grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
  .stl__p{padding:28px 26px 30px}
  .stl__t{margin-top:44px}
}

/* =====================================================================
   Round 19 — air under the values heading; a slow-motion crowd film behind the season block
   ===================================================================== */
.vals .rs{margin-top:clamp(40px,7vw,112px)}
.flow{position:relative;isolation:isolate;padding-block:calc(var(--sec) * 1.15)}
.flow__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.flow__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.85) contrast(1.05);transition:opacity 800ms var(--e-out)}
.flow__bg video.is-on{opacity:.5}
.flow__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#000 0,rgba(0,0,0,.35) 26%,rgba(0,0,0,.35) 74%,#000 100%)}
.stl__p{background:rgba(14,15,16,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* =====================================================================
   Round 22 — hero kicker: a black plate with orange text; phones: the man centred, the hologram in one place;
   the sticky particle box on phones fades out at its top and bottom edges instead of a hard black square
   ===================================================================== */
.hero__kick{color:var(--or);background:linear-gradient(rgba(255,107,0,.08),rgba(255,107,0,.08)),rgba(0,0,0,.45)}
@media (max-width:1023px){.agent{--cx:50vw}}
@media (max-width:1023px){
  .rs__art{top:0;padding-top:var(--hdr);height:calc(min(38svh,340px) + var(--hdr));
    background:linear-gradient(rgba(0,0,0,0) 0,#000 calc(var(--hdr) * .8),#000 calc(100% - 56px),rgba(0,0,0,0) 100%)}
}
/* phones: the student's torso sits at 46 % of his frame, his whole figure with the arm at 53 % — a small nudge balances the two */
@media (max-width:1023px){.agent__still--a{translate:1.5% 0}}
/* the hero kicker: the outlined plate — orange text, hairline orange frame, a faint orange tint over a light dark wash so the text reads */
.hero__kick::after{display:block}

/* =====================================================================
   Round 23 — phones: a bigger hero title; the values art stops above the last reason instead of covering it
   ===================================================================== */
@media (max-width:767px){.h1{font-size:clamp(2.6rem,14vw,8.5rem)}}
@media (max-width:1023px){
  .rs__i:last-child{margin-bottom:-44svh}      /* the sticky box's container ends where the last reason begins… */
  .vals .rs{margin-bottom:44svh}               /* …and the section keeps its height */
}

/* =====================================================================
   Round 24 (client PDF v6)
   ===================================================================== */
/* hero: one sentence as the title, three lines; "Cada temporada, los equipos:" above the tags */
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m) - 8px) / 14.2),11.5svh,6.6rem)}}
@media (max-width:767px){.h1{font-size:clamp(2rem,10.4vw,3.4rem)}}
.hero__pre{margin:clamp(24px,3.8svh,44px) auto 0;text-align:center;font:italic 800 clamp(15px,.8rem + .45vw,21px)/1.1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.hero__pre + .tags{margin-top:14px}
@media (min-width:1024px){.logos{grid-template-columns:1fr}}
/* the agent stage title is longer now */
.agent__s1 .h2{max-width:16ch;font-size:clamp(1.9rem,1rem + 2.4vw,3.4rem)}
/* season: an endless strip of event photos under the cards (paused off screen) */
.evc{position:relative;margin-top:clamp(40px,5vw,72px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.evc__track{display:flex;gap:14px;width:max-content;animation:evc 70s linear infinite;animation-play-state:paused}
.evc.is-on .evc__track{animation-play-state:running}
.evc:hover .evc__track{animation-play-state:paused}
.evc__i{flex:none;margin:0;width:clamp(230px,23vw,360px);aspect-ratio:4/3;overflow:hidden;--c:12px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.evc__i img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--e-out)}
.evc__i:hover img{transform:scale(1.05)}
@keyframes evc{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.evc{overflow-x:auto}.evc__track{animation:none}}
/* form: a dark, warm event photo behind the section; the message field */
.apply__bg{position:absolute;inset:0;z-index:-2;background:url(media/form-bg.webp) 50% 40%/cover no-repeat;opacity:.24;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.fld textarea{flex:1;min-width:0;min-height:112px;background:transparent;border:0;border-radius:0;outline:none;padding:14px 16px;font:inherit;font-size:17px;line-height:1.45;color:inherit;resize:vertical}
.fld textarea::placeholder{color:var(--text-2);opacity:.7}

/* the light ring: lime for the student, fading into a slowly moving spectrum for the hero (an SVG gradient drifting along it) */
.ring path{stroke:var(--hl);filter:drop-shadow(0 0 4px var(--hl));opacity:calc(.55 * (1 - var(--k,0)))}
.ring--back path{opacity:calc(.3 * (1 - var(--k,0)))}
.ring path.rb{stroke:url(#ring-rb);filter:drop-shadow(0 0 5px rgba(255,255,255,.55));opacity:calc(.85 * var(--k,0))}
.ring--back path.rb{opacity:calc(.45 * var(--k,0))}

/* =====================================================================
   Round 25 (client PDF v7) — hero title in two tiers: the brand line smaller ("MindHacking League" in orange),
   the promise big; a soft local shade under the text so it reads over the film. Agent stage: eyebrow + short title.
   ===================================================================== */
.h1 .h1__pre{font-size:.4em;letter-spacing:.02em;margin-bottom:.3em;clip-path:none}
.h1 .h1__pre em{font-style:inherit;color:var(--or)}
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m) - 8px) / 11.4),13svh,7.8rem)}}
@media (max-width:767px){.h1{font-size:clamp(2.3rem,12.2vw,4rem)}.h1 .h1__pre{font-size:.5em}}
.hero__main{position:relative}
.hero__main::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,110%);height:80%;translate:-50% -52%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.28) 55%,rgba(0,0,0,0))}
.agent__kick{margin-bottom:16px}
.agent__s1 .h2{max-width:12ch;font-size:clamp(2.2rem,1rem + 3.2vw,4.4rem)}

/* =====================================================================
   Round 26 — hero title as one even block: three lines of about the same length, one moderate size, a little more leading;
   "MindHacking League" in orange to break the white; "Cada temporada, los equipos:" back to a small caption
   ===================================================================== */
.h1 em{font-style:inherit;color:var(--or)}
.h1{line-height:.98;letter-spacing:.005em}
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m)) / 17),9.5svh,5.4rem)}.h1 .g{white-space:nowrap}}
@media (max-width:767px){.h1{font-size:min(7.3vw,2.6rem);max-width:none;line-height:1.02}.h1 .g{white-space:nowrap}}
.hero__pre{margin-top:clamp(26px,4svh,44px);font:italic 700 clamp(12px,.68rem + .2vw,14px)/1.2 var(--f);letter-spacing:.1em;color:rgba(236,239,232,.82)}

/* round 27 — the hero copy breathes: wider letters and more leading in the title, more room between title, caption, tags and button */
.h1{font-stretch:88%;letter-spacing:.015em;line-height:1.1}
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m)) / 20),8.4svh,4.7rem)}}
@media (max-width:767px){.h1{font-size:min(6.8vw,2.5rem);line-height:1.12}}
.hero__pre{margin-top:clamp(34px,5.5svh,60px)}
.hero__pre + .tags{margin-top:18px;gap:14px 16px}
.hero__cta{margin-top:clamp(40px,6.5svh,68px)}
/* narrow phones: the long CTA wraps inside the screen instead of running off it */
@media (max-width:479px){.hero__cta{width:100%}.hero__cta .btn{width:100%;max-width:100%;white-space:normal;font-size:14px;letter-spacing:.02em}.hero__cta .btn__lbl{white-space:normal;text-align:left}}

/* round 28 — hero title: the orange brand line on its own, a breath, then the two-line promise as one block,
   a little smaller and looser; then air before the caption and the tags */
.h1 .h1__brand{margin-bottom:.32em}
.h1 .h1__line{font-size:.84em;letter-spacing:.03em;line-height:1.16}
@media (min-width:768px){.h1{font-size:min(calc((100vw - 2 * var(--m)) / 17.5),9svh,5.2rem)}}
@media (max-width:767px){.h1{font-size:min(7.9vw,2.9rem)}}

/* =====================================================================
   Performance: nothing animates where it can't be seen, and nothing re-blends the whole page
   ===================================================================== */
/* film grain: a still, plain layer (the moving full-screen overlay-blend layer forced the whole page to re-composite
   whenever the video or a canvas under it changed) */
body::after{inset:0;mix-blend-mode:normal;opacity:.035;animation:none!important}
/* the ring's running dashes only while the agent stage is on screen */
.agent:not(.is-vis) .ring path{animation-play-state:paused}
/* the DOM copy of the hologram is only a fallback: no loops while the WebGL hologram draws */
.holo.gl *,.holo.gl *::before,.holo.gl *::after{animation:none!important}

/* =====================================================================
   Phones, big text and page zoom (a phone at 150–200 % behaves like a 195–260 px wide, short screen)
   ===================================================================== */
/* nothing may push a column wider than the screen: long Spanish words break or hyphenate, grid/flex children may shrink */
.h1,.h2,.ev__h,.season__h,.rs__t,.stl__t,.agent__ln,.why__t,.flow__lead,.lead,.dl{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.apply__in>*,.ev__body,.fl>*,.fl__row,.stl__ph>*,.rs>*,.agent__s1{min-width:0}
.fl__mail{overflow-wrap:anywhere}
.btn{max-width:100%}
@media (max-width:767px){
  /* the header slides in as a solid card on phones: no backdrop blur (it stuttered while the page moved under it) */
  .hdr,.hdr.is-card,.hdr.is-solid{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr.is-card{background:rgba(12,13,14,.94)}
  .hdr{transition:transform 360ms cubic-bezier(.2,.9,.1,1),background-color 200ms linear}
  /* the agent stage: a soft dark bed under the text so it always reads */
  .agent__s1{isolation:isolate}
  .agent__s1::before{content:"";position:absolute;left:calc(-1 * var(--m));right:calc(-1 * var(--m));top:-36px;bottom:-24px;z-index:-1;pointer-events:none;
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.82) 34px,rgba(0,0,0,.9))}
}
@media (max-width:359px){
  :root{--m:12px}
  .h2,.season__h,.ev__h,.agent__s1 .h2{font-size:clamp(1.3rem,9.4vw,2.1rem)}
  .rs__t,.stl__t{font-size:clamp(1.05rem,7vw,1.6rem)}
  .rs__n,.stl__n{font-size:clamp(1.8rem,12vw,2.6rem)}
  .btn{white-space:normal;font-size:13px;padding-inline:14px 12px}
  .btn__lbl{white-space:normal;text-align:left}
  .apply__box{padding:22px 14px 26px}
  .fl__root{font-size:18px}
  .fl__mail{font-size:15px}
  .hdr__logo img{height:26px}
  .hdr__cta{padding-inline:10px 8px;font-size:12px}
  .kick{white-space:normal}
  .tag{font-size:11px}
  .ev__meta{flex-direction:column;gap:8px}
}
/* the simple stacked agent stage (reduced motion, weak devices, big text / zoom): the hero photo, then the text */
html.agent-static .agent__fig{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important;
  height:auto!important;width:min(100%,420px)!important;aspect-ratio:4/5;margin:0 auto}
html.agent-static .agent__still--a,html.agent-static .hud,html.agent-static .holo,html.agent-static .atmos,html.agent-static .agent__scan,html.agent-static .ring{display:none!important}
html.agent-static .agent__still--b{display:block!important;clip-path:none!important}
html.agent-static .agent__s1::before{display:none}
html.agent-static .agent__s1{transform:none!important;margin-top:24px}
/* the stage title never splits a word: no character cap on its width */
.agent__s1 .h2{max-width:none}
@media (min-width:1024px){.agent__s1{width:min(34vw,500px)!important}.agent__s1 .h2{font-size:clamp(2.2rem,1rem + 2.6vw,3.9rem)}}
.fl__kids{flex-wrap:wrap}

/* =====================================================================
   Performance (MacBook + screen recording): the grading of the hero and crowd films is baked into the files
   (media/hero-d, crowd-d), so the videos play without a CSS filter or opacity — a filtered full-screen video was
   re-processed by the GPU on every frame and kept off the system's direct video path
   ===================================================================== */
.hero__bg img,.hero__bg video{filter:none!important}
.flow__bg video{filter:none!important}
.flow__bg video.is-on{opacity:1}
/* the edge lens only exists while the page moves: at rest the backdrop under it (films, canvases, particles) keeps
   changing, which made the two backdrop filters re-run on every frame for an effect nobody sees at rest */
.lens{transition:opacity 220ms linear}
.lens.is-rest{opacity:0;visibility:hidden;transition:opacity 220ms linear,visibility 0s 220ms}
/* the atmosphere's fade is painted inside the canvas now (no CSS mask layer) */
.atmos{-webkit-mask-image:none!important;mask-image:none!important}
/* the film grain: a full-screen layer over everything, composited on every frame for an effect at 3.5 % — gone */
body::after{display:none!important}
/* the light ring: its dashes step at 30 fps (each step repaints the ring and its glow), and the ring that is fully
   faded out (lime once he is the hero, the spectrum before) is not drawn at all */
.ring path{animation-timing-function:steps(180)}
.agent[data-st="a"]:not(.is-swap) .ring path.rb,.agent[data-st="b"]:not(.is-swap) .ring path:not(.rb){display:none}

/* =====================================================================
   Typography: lines break where they read well, on every screen. Headings, tags and labels are balanced (no long
   line over a lone word), body copy avoids a lone last word, nothing is hyphenated automatically. A word only breaks
   inside if it alone is wider than its column (big text / zoom), never otherwise. Short words are glued in app.js.
   ===================================================================== */
*{-webkit-hyphens:manual!important;hyphens:manual!important}
/* text-wrap-style only: the shorthand text-wrap also turns wrapping ON, which broke the no-wrap button labels */
.h1,.h2,h3,.rs__t,.stl__t,.ev__h,.kick,.tag,.btn__lbl,.agent__ln,.hero__pre,.flow__lead,.dl,legend,label{text-wrap-style:balance}
p,li,.lead,.rs__i p,.stl__p p,.ev__steps li{text-wrap-style:pretty}
.agent .h2 .ln{display:block}
/* the client's two-line title of the stage, the one-line title of the values (it may only wrap on narrow screens) */
@media (min-width:1024px){.why__h{white-space:nowrap;font-size:clamp(1.9rem,.6rem + 2.7vw,3.6rem)}}

/* kickers: no plates any more (client) — where one is left it is a plain small line of orange text */
.kick,.agent__kick,.season__kick{padding:0!important;background:none!important;border:0!important;--c:0px;clip-path:none!important;
  font:600 clamp(12px,.66rem + .25vw,14px)/1.3 var(--f-mono)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--or)!important;font-style:normal!important}
.kick::before,.kick::after{display:none!important}
/* short titles stay on one line: their size follows the width of their own card / column (container units) */
.rs__i,.stl__p,.apply__txt{container-type:inline-size}
.rs__t{white-space:nowrap;font-size:min(clamp(1.5rem,1.1rem + 1.7vw,2.9rem),7.4cqi)}
.stl__t{white-space:nowrap;font-size:min(clamp(1.3rem,1rem + 1vw,2rem),10.5cqi)}
.apply .h2{font-size:min(var(--fs-h2),11cqi)}
@media (max-width:299px){.rs__t,.stl__t{white-space:normal}}
@media (max-width:480px){.season__h{font-size:min(clamp(1.3rem,9.4vw,2.1rem),8.8vw)}}
/* the stage on short phones: a compact text block, so the figure keeps its room above it */
@media (max-width:1023px){
  .agent.is-tight .agent__kick{margin-bottom:6px}
  .agent.is-tight .agent__s1 .h2{font-size:clamp(1.35rem,7vw,1.85rem)}
  .agent.is-tight .agent__lines{margin-top:12px;gap:7px}
  .agent.is-tight .agent__ln{font-size:14px;line-height:1.35;padding-left:14px}
  .agent.is-tight .agent__ln--punch{font-size:15px}
  .agent.is-tight .agent__s1{bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* performance levels (set by the governor in app.js) */
html.perf-2 .atmos{visibility:hidden}
.nw{white-space:nowrap}
/* "Así funciona la temporada": the title and its line are centred (client) */
#flow-h,.flow__lead{text-align:center;margin-inline:auto}

/* repeat visits: the black curtain covers the page from the very first frame (it used to stay transparent for 300 ms,
   so the page flashed before the loader appeared); only the logo and the bar wait 300 ms, in case the page is ready */
html.pl.pl-q #pl{opacity:1;animation:plGone 0s 4s forwards}
html.pl.pl-q .pl__in{opacity:0;animation:plShow 160ms linear 300ms forwards}
html.pl.pl-q.pl-out .pl__in{animation:none;opacity:0}

/* =====================================================================
   Client round (2026-10-21)
   ===================================================================== */
/* hero: the brand line is a quiet label over the title, close to it — not a second, louder headline */
.h1 .h1__brand{font-size:.56em;margin-bottom:.16em;letter-spacing:.04em}
/* the stage lines: all three in one voice (the last one no longer bold / bigger, only its accent stays orange), and
   never more than two lines — the type size follows the column so the longest sentence fits one line */
.agent__lines{container-type:inline-size}
.agent__ln,.agent__ln--punch{font:500 min(var(--fs-lead),calc((100cqi - 18px) / 23))/1.4 var(--f)}
.agent__ln--punch em{font-style:normal}
@media (max-width:1023px){.agent.is-tight .agent__ln,.agent.is-tight .agent__ln--punch{font-size:min(14px,calc((100cqi - 14px) / 23))}}
/* the values title sits in the middle of the page */
#why-h{text-align:center;margin-inline:auto}
/* kickers: a real label now — the display face, larger, orange (client: "Primera temporada" was too faint) */
.kick,.agent__kick,.season__kick,.flow__kick{font:italic 800 clamp(16px,.8rem + .7vw,24px)/1.2 var(--f)!important;font-stretch:88%;letter-spacing:.07em!important}
.flow__kick{text-align:center;margin:0 auto 14px}