/* Landing page (index) only. about.html keeps using site.css alone. */
html{scroll-behavior:smooth}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;min-height:68px;background:rgba(5,7,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navmark{font-family:"Krona One",sans-serif;font-size:26px;letter-spacing:-.03em;line-height:1}
.navmark span,.fm{display:inline-block}
.navmark span{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(var(--c) 0 52%,transparent 52%),repeating-linear-gradient(var(--c) 0 .05em,transparent .05em .09em)}
.navmark .ft{--c:var(--text)}.navmark .w{--c:var(--blue)}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.nav nav a:hover{color:var(--text);background:var(--panel)}
.navcta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.06em;border:1px solid rgba(255,255,255,.18)}
.navcta i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(255,176,32,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.hero{padding-top:12px}
.hero-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:end}
.lede{max-width:520px;justify-self:end;color:var(--muted);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.5}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ctas .more{min-width:0;min-height:60px;display:inline-flex;gap:12px;padding:0 26px}
.ctas svg,.more svg{width:22px;height:22px;fill:currentColor;flex:none}
.hero-art{position:relative;margin-top:28px;overflow:hidden;line-height:0}
/* The wire: one looping line under the hero, pulses run past the six topics */
.hero-art video{display:block;width:100%;height:clamp(220px,30vw,440px);object-fit:cover;object-position:center 90%}
.band{margin-top:clamp(56px,7vw,110px)}
.band h2{margin-bottom:28px}
.flow-art{line-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--panel)}
.flow-art video{display:block;width:100%;height:auto;aspect-ratio:3.2}
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:f}
.flow li{position:relative;padding:22px 22px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.flow b{font-family:"JetBrains Mono",monospace;color:var(--blue);font-size:14px}
.flow h3,.topic h3{margin-top:10px;font-family:"Krona One",sans-serif;font-weight:400;font-size:clamp(16px,1.3vw,20px);text-transform:uppercase;letter-spacing:-.01em}
.flow p,.topic p{margin-top:8px;color:var(--muted);font-weight:500;font-size:15px;line-height:1.5}
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.topic{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;padding-bottom:22px;transition:border-color .2s,transform .2s}
.topic:hover{border-color:rgba(61,123,255,.6);transform:translateY(-3px)}
.topic img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;border-bottom:1px solid var(--line)}
.topic h3,.topic p{padding:0 22px}
.topic h3{margin-top:18px}
.verdict-board{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:stretch}
.dial{line-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.dial video{display:block;width:100%;height:100%;aspect-ratio:5/3;object-fit:cover}
.vlist{list-style:none;display:flex;flex-direction:column;gap:12px}
.vlist li{flex:1;display:grid;grid-template-columns:14px 1fr;column-gap:16px;align-content:center;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.vlist i{grid-row:span 2;align-self:center;width:14px;height:14px;border-radius:50%}
.vlist strong{font-family:"Krona One",sans-serif;font-weight:400;font-size:clamp(18px,1.6vw,24px);text-transform:uppercase}
.vlist p{color:var(--muted);font-weight:500;font-size:15px;margin-top:4px}
.vlist .v-acc i{background:var(--blue)}.vlist .v-acc strong{color:var(--blue)}
.vlist .v-watch i{background:var(--amber)}.vlist .v-watch strong{color:var(--amber)}
.vlist .v-skep i{background:#FF4D5E}.vlist .v-skep strong{color:#FF4D5E}
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.crew article{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);padding-bottom:20px}
.crew img,.crew video{display:block;width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;object-position:center 70%}
.crew strong{display:block;margin:16px 20px 0;font-size:15px;text-transform:uppercase;letter-spacing:.08em}
.crew span{display:block;margin:6px 20px 0;color:var(--muted);font-weight:500;font-size:15px}
.crew .ai{border-color:rgba(61,123,255,.5)}
.foot .pres{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:13px}
@media (max-width:1000px){.topics{grid-template-columns:repeat(2,minmax(0,1fr))}.verdict-board{grid-template-columns:1fr}}
@media (max-width:860px){.nav nav{display:none}.navcta{margin-left:auto}.hero-row{grid-template-columns:1fr;gap:16px}.lede{justify-self:start}.crew,.flow{grid-template-columns:1fr}.hero-art video{object-position:center 95%}.ctas .more{flex:1 1 100%;justify-content:center}}
@media (max-width:560px){.flow,.topics{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.navcta i{animation:none}.topic{transition:none}}