/* TELOS — cinematic page kit (2026-09-27 visual revamp).
   The homepage hero's language (dot grid, corner brackets, scanline, cyan
   glow, Titillium 900 + JetBrains Mono) carried into the inner pages, plus
   broadcast pieces built on the real assets: driver cut-outs
   (assets/drivers/<no>.avif), 2026 cars (assets/cars/), white team logos.
   Opt-in by class, so no page changes unless it asks for it. */

:root{--cine-accent:#00f2ff;--cine-tc:#00f2ff;--cine-ink:#f5f7fa;--cine-mute:rgba(255,255,255,.55);--cine-line:rgba(255,255,255,.08)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.cine-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(0,242,255,.14);
  background:radial-gradient(ellipse 70% 90% at 78% 40%,color-mix(in srgb,var(--cine-tc) 26%,transparent),transparent 62%),
             radial-gradient(ellipse 90% 70% at 20% 0%,rgba(0,242,255,.10),transparent 60%),#03050a}
.cine-hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle,rgba(0,242,255,.16) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 0%,transparent 100%);mask-image:radial-gradient(ellipse 85% 80% at 50% 45%,#000 0%,transparent 100%)}
.cine-hero::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,242,255,.7) 50%,transparent);animation:cineScan 7s ease-in-out infinite;opacity:0}
@keyframes cineScan{0%{top:0;opacity:0}8%{opacity:.8}50%{opacity:.5}92%{opacity:.6}100%{top:100%;opacity:0}}
.cine-corner{position:absolute;width:30px;height:30px;z-index:3;pointer-events:none;border-color:rgba(0,242,255,.45);border-style:solid;border-width:0}
.cine-corner.tl{top:22px;left:22px;border-top-width:1px;border-left-width:1px}
.cine-corner.tr{top:22px;right:22px;border-top-width:1px;border-right-width:1px}
.cine-corner.bl{bottom:22px;left:22px;border-bottom-width:1px;border-left-width:1px}
.cine-corner.br{bottom:22px;right:22px;border-bottom-width:1px;border-right-width:1px}
.cine-ghost{position:absolute;z-index:-1;left:-2%;bottom:-6%;pointer-events:none;white-space:nowrap;
  font-family:'Titillium Web',sans-serif;font-weight:900;font-size:clamp(140px,24vw,380px);line-height:.8;letter-spacing:-.04em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06)}
.cine-in{position:relative;max-width:1240px;margin:0 auto;padding:118px 32px 64px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:end;min-height:560px}
.cine-copy{position:relative;z-index:2;padding-bottom:10px}
.cine-badge{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;background:rgba(0,242,255,.07);border:1px solid rgba(0,242,255,.24);
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--cine-accent)}
.cine-badge img{height:12px;border-radius:2px}
.cine-title{margin:22px 0 0;font-family:'Titillium Web',sans-serif;font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.02em;color:#fff;
  font-size:clamp(54px,8.2vw,124px);text-wrap:balance}
.cine-title .grad{display:block;font-size:.46em;letter-spacing:.14em;margin-top:.28em;
  background:linear-gradient(115deg,#fff 0%,#b0f4ff 30%,var(--cine-accent) 60%,#fff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:cineShine 7s linear infinite;filter:drop-shadow(0 0 30px rgba(0,242,255,.25))}
@keyframes cineShine{to{background-position:220% center}}
.cine-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--cine-mute)}
.cine-meta b{color:#fff;font-weight:700}
.cine-lead{margin-top:18px;max-width:560px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.66)}
.cine-lead strong{color:#fff;font-weight:600}
.cine-winner{display:flex;align-items:center;gap:16px;margin-top:28px;padding:14px 18px 14px 16px;border-radius:16px;max-width:520px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cine-tc) 22%,transparent),rgba(255,255,255,.02));border:1px solid color-mix(in srgb,var(--cine-tc) 40%,transparent);backdrop-filter:blur(14px)}
.cine-winner .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--cine-mute)}
.cine-winner .nm{font-family:'Titillium Web',sans-serif;font-weight:900;font-size:28px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.cine-winner .nm small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-bottom:3px}
.cine-winner .logo{height:30px;width:auto;margin-left:auto;opacity:.95}
.cine-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.cine-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;text-decoration:none}
.cine-btn i{font-size:16px}
.cine-btn.pri{background:var(--cine-accent);color:#03141a;box-shadow:0 0 28px rgba(0,242,255,.35)}
.cine-btn.pri:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,242,255,.55)}
.cine-btn.gho{border:1px solid rgba(255,255,255,.16);color:#fff;background:rgba(255,255,255,.03)}
.cine-btn.gho:hover{border-color:var(--cine-accent);color:var(--cine-accent)}
.cine-figure{position:relative;z-index:1;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:440px}
.cine-figure::before{content:'';position:absolute;left:10%;right:10%;bottom:8%;height:62%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--cine-tc) 55%,transparent),transparent 68%);filter:blur(24px);opacity:.75}
.cine-driver{position:relative;height:clamp(380px,46vw,600px);width:auto;max-width:100%;object-fit:contain;object-position:bottom;margin-bottom:-64px;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);
  animation:cineRise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes cineRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.cine-car{position:absolute;z-index:2;right:-4%;bottom:-2%;width:min(78%,640px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.7));animation:cineDrive 1.2s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes cineDrive{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.cine-track{position:relative;z-index:1;width:100%;max-width:520px;opacity:.9;filter:drop-shadow(0 0 30px rgba(0,242,255,.25))}

/* ── Big-number band ─────────────────────────────────────────────── */
.cine-stats{position:relative;z-index:4;max-width:1240px;margin:-38px auto 0;padding:0 32px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px}
.cine-stat{position:relative;overflow:hidden;padding:20px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(18,22,30,.92),rgba(8,10,16,.92));border:1px solid var(--cine-line);backdrop-filter:blur(18px)}
.cine-stat::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--c,var(--cine-accent)),transparent 80%)}
.cine-stat .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.42)}
.cine-stat .v{margin-top:10px;font-family:'Titillium Web',sans-serif;font-weight:900;font-size:clamp(26px,2.8vw,36px);line-height:1;color:var(--c,#fff);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cine-stat .s{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.5)}

/* ── Sections ─────────────────────────────────────────────────────── */
.cine-main{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:72px 32px 90px}
.cine-sec{margin:0 0 80px}
.cine-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px;flex-wrap:wrap}
.cine-h h2{margin:0;font-family:'Titillium Web',sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.cine-h h2 span{color:var(--cine-accent)}
.cine-h .k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:rgba(0,242,255,.7)}
.cine-h p{margin:0;font-size:14px;color:rgba(255,255,255,.5);max-width:440px}

/* ── Podium with cut-outs ─────────────────────────────────────────── */
.cine-podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:14px;align-items:end}
.cine-pod{position:relative;overflow:hidden;border-radius:22px;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 34%,#05070c) 0%,#070a10 72%);border:1px solid color-mix(in srgb,var(--tc) 38%,transparent);text-decoration:none;color:#fff;transition:transform .25s,box-shadow .25s}
.cine-pod:hover{transform:translateY(-6px);box-shadow:0 24px 60px -20px color-mix(in srgb,var(--tc) 70%,transparent)}
.cine-pod.p1{min-height:430px}
.cine-pod .num{position:absolute;top:-18px;right:10px;font-family:'Titillium Web',sans-serif;font-weight:900;font-size:220px;line-height:1;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--mc) 60%,transparent);opacity:.55}
.cine-pod img.cut{position:absolute;left:50%;top:14px;transform:translateX(-50%);height:205%;width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 26%,transparent 40%);mask-image:linear-gradient(to bottom,#000 26%,transparent 40%);filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));transition:transform .35s}
.cine-pod:hover img.cut{transform:translateX(-50%) scale(1.03)}
.cine-pod .info{position:relative;z-index:2}
.cine-pod .medal{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--mc);color:#000;font-family:'Titillium Web',sans-serif;font-weight:900;font-size:16px;box-shadow:0 0 22px color-mix(in srgb,var(--mc) 60%,transparent)}
.cine-pod .n{margin-top:10px;font-family:'Titillium Web',sans-serif;font-weight:900;font-size:26px;line-height:1;text-transform:uppercase}
.cine-pod .n small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.65);margin-bottom:3px}
.cine-pod .t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.6)}
.cine-pod .t img{height:16px;width:auto;opacity:.9}
.cine-pod .t b{color:var(--cine-accent);font-weight:800}

/* ── Timing tower rows ───────────────────────────────────────────── */
.cine-tower{display:flex;flex-direction:column;gap:6px}
.cine-row{position:relative;display:grid;grid-template-columns:56px 6px 56px minmax(0,1fr) 90px 130px 64px;gap:14px;align-items:center;padding:10px 16px 10px 10px;border-radius:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 12%,rgba(14,17,24,.9)) 0%,rgba(12,14,20,.86) 40%);border:1px solid rgba(255,255,255,.05);text-decoration:none;color:#fff;
  transition:transform .18s,border-color .18s,background .18s}
.cine-row:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--tc) 55%,transparent)}
.cine-row .pos{height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);font-family:'Titillium Web',sans-serif;font-weight:900;font-size:22px}
.cine-row.p1 .pos{background:#ffd700;color:#000}.cine-row.p2 .pos{background:#d6d6d6;color:#000}.cine-row.p3 .pos{background:#cd7f32;color:#000}
.cine-row.out .pos{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:#ff4466;background:rgba(255,68,102,.1)}
.cine-row .bar{height:36px;border-radius:3px;background:var(--tc)}
.cine-row .face{width:52px;height:44px;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--tc) 30%,#0b0e14)}
.cine-row .face img{width:100%;height:auto;object-fit:cover;object-position:top;transform:translateY(2px) scale(1.02)}
.cine-row .who{min-width:0;display:flex;flex-direction:column;gap:2px}
.cine-row .who b{font-family:'Titillium Web',sans-serif;font-weight:900;font-size:18px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cine-row .who b em{font-style:normal;font-weight:700;font-size:13px;color:rgba(255,255,255,.55);text-transform:none;margin-right:6px}
.cine-row .who span{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.5)}
.cine-row .who span img{height:12px;width:auto;opacity:.85}
.cine-row .mv{justify-self:start;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;padding:4px 9px;border-radius:6px}
.cine-row .mv.up{color:#00ff88;background:rgba(0,255,136,.1)}.cine-row .mv.down{color:#ff4466;background:rgba(255,68,102,.1)}.cine-row .mv.same{color:rgba(255,255,255,.35);background:rgba(255,255,255,.04)}
.cine-row .gap{text-align:right;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700}
.cine-row .gap small{display:block;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px}
.cine-row .pts{justify-self:end;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:800;color:#03141a;background:var(--cine-accent);border-radius:7px;padding:5px 9px;min-width:44px;text-align:center}
.cine-row .pts.zero{background:rgba(255,255,255,.05);color:rgba(255,255,255,.3)}
.cine-tower-head{display:grid;grid-template-columns:56px 6px 56px minmax(0,1fr) 90px 130px 64px;gap:14px;padding:0 16px 8px 10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.cine-tower-head span:nth-child(n+6){text-align:right}

/* ── Bento link tiles ─────────────────────────────────────────────── */
.cine-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cine-tile{position:relative;overflow:hidden;grid-column:span 2;min-height:190px;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;text-decoration:none;color:#fff;
  background:linear-gradient(160deg,rgba(20,24,34,.9),rgba(8,10,16,.95));border:1px solid rgba(255,255,255,.07);transition:transform .22s,border-color .22s,box-shadow .22s}
.cine-tile{padding-top:88px}
.cine-tile.hero{padding-top:24px}
.cine-tile.wide{grid-column:span 3}
.cine-tile.hero{grid-column:span 4;grid-row:span 2;min-height:394px}
.cine-tile.full{grid-column:span 6;min-height:120px;justify-content:center;padding-left:96px}
.cine-tile.full .ic{top:50%;transform:translateY(-50%)}
.cine-tile:hover{transform:translateY(-4px);border-color:rgba(0,242,255,.4);box-shadow:0 24px 60px -24px rgba(0,242,255,.45)}
.cine-tile::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(0,242,255,.14),transparent 55%);pointer-events:none}
.cine-tile .ic{position:absolute;top:22px;left:24px;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--cine-accent);background:rgba(0,242,255,.1);border:1px solid rgba(0,242,255,.25)}
.cine-tile b{font-family:'Titillium Web',sans-serif;font-weight:900;font-size:24px;line-height:1.05;text-transform:uppercase;position:relative;z-index:1}
.cine-tile.hero b{font-size:clamp(32px,3.4vw,46px)}
.cine-tile p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);max-width:440px;position:relative;z-index:1}
.cine-tile .go{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--cine-accent);position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px}
.cine-tile .art{position:absolute;right:-6%;top:12%;width:70%;opacity:.55;pointer-events:none;filter:drop-shadow(0 0 26px rgba(0,242,255,.3))}
.cine-tile.hero .art{right:-4%;top:6%;width:62%;opacity:.8}

/* ── Session / section tabs (pill switch) ─────────────────────────── */
.cine-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-top:24px}
.cine-tabs a{padding:9px 16px;border-radius:9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;transition:.15s}
.cine-tabs a:hover{color:#fff}
.cine-tabs a.on{background:var(--cine-accent);color:#03141a}

/* ── Reveal on scroll (page adds .cine-ready to <html> once JS runs) ── */
.cine-ready .cine-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.cine-ready .cine-reveal.on{opacity:1;transform:none}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1000px){
  .cine-in{grid-template-columns:1fr;min-height:0;padding:104px 22px 40px}
  .cine-figure{min-height:340px;order:-1;margin-top:-10px}
  .cine-driver{height:360px;margin-bottom:-40px}
  .cine-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-20px;padding:0 22px}
  .cine-main{padding:56px 22px 70px}
  .cine-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cine-tile,.cine-tile.wide{grid-column:span 1}
  .cine-tile.full{grid-column:span 2}
  .cine-tile.hero{grid-column:span 2;grid-row:auto;min-height:260px}
}
@media (max-width:760px){
  .cine-podium{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .cine-pod,.cine-pod.p1{min-height:240px;padding:12px}
  .cine-pod .num{font-size:120px}
  .cine-pod .n{font-size:16px}.cine-pod .n small{font-size:10px}
  .cine-pod .t{display:none}
  .cine-row,.cine-tower-head{grid-template-columns:40px 4px minmax(0,1fr) 84px;gap:10px}
  .cine-row .face,.cine-row .mv,.cine-row .pts,.cine-tower-head span:nth-child(3),.cine-tower-head span:nth-child(5),.cine-tower-head span:nth-child(7){display:none}
  .cine-row .pos{height:38px;font-size:18px}
  .cine-row .who b{font-size:15px}
  .cine-row .gap{font-size:12px}
  .cine-ghost{font-size:120px}
}
@media (max-width:520px){
  .cine-title{font-size:48px}
  .cine-stats{grid-template-columns:1fr 1fr}
  .cine-bento{grid-template-columns:1fr}
  .cine-tile.hero,.cine-tile.full{grid-column:span 1}
  .cine-corner{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cine-hero::after,.cine-title .grad,.cine-driver,.cine-car{animation:none}
  .cine-ready .cine-reveal{opacity:1;transform:none;transition:none}
}