/* Craft layer: one signature (night road), quieter everything else. */

.highway-bg{
  position:fixed;left:0;right:0;top:-12vh;z-index:-2;height:124vh;
  background:
    url("assets/images/driverion-camera.png") right 8% center / min(46vw,640px) auto no-repeat,
    url("assets/images/highway-bg.png") center 30% / cover no-repeat;
  pointer-events:none;will-change:transform;
  filter:saturate(.75) brightness(.45);
}
.highway-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,7,.28),rgba(5,6,7,.5) 46%,rgba(5,6,7,.72));
}
body{background:#050607}

.scroll-rail{
  position:fixed;top:0;left:0;z-index:1100;height:2px;width:100%;
  background:transparent;pointer-events:none;
}
.scroll-rail span{
  display:block;height:100%;width:0;transform-origin:left center;
  background:linear-gradient(90deg,transparent,var(--red2));
  box-shadow:0 0 12px rgba(227,38,54,.55);
}

.section{scroll-margin-top:96px}
.section::before{
  content:attr(data-section);
  position:absolute;top:clamp(28px,4vw,48px);right:var(--pad);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  color:rgba(255,255,255,.22);pointer-events:none;
}

.section h2,.hero h1,.final-content h2{
  font-weight:560;
  letter-spacing:-.045em;
}
.eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.2em;font-size:.68rem}
.hero h1{
  background:linear-gradient(180deg,#fff 20%,#b7c0c8 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 span{
  background:linear-gradient(90deg,#fff,#ffd0d4 40%,#e32636);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.btn{position:relative;overflow:hidden}
.btn-primary{box-shadow:0 10px 30px rgba(255,255,255,.08)}
.btn-primary:focus-visible,.btn-ghost:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--red2);outline-offset:3px;
}

.hero-product,.cinema-card,.fleet-frame,.evidence-console,.product-card,.dev-console{
  transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .6s;
}
.hero-product:hover,.cinema-card:hover,.fleet-frame:hover{
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(227,38,54,.25);
}

.product-card{
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s;
}
.product-card:hover{transform:translateY(-8px);border-color:rgba(227,38,54,.4)}

:root{
  --glass:rgba(18,20,24,.55);
  --glass-strong:rgba(12,14,18,.72);
  --glass-line:rgba(255,255,255,.16);
  --glass-shine:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 28%,transparent 60%);
}
.nav-shell,.mobile-menu,.hero-product,.cinema-card,.fleet-frame,.evidence-console,.workflow-card,.product-card,.dev-console,.scenario-tabs,.event-matrix,.industry-grid article,.comparison,.arch-core,.eco-node,.eco-core,.packet,.principle-grid article,.operating-loop>div,.pipeline-step,.floating-alert,.scenario-copy,.metric-ribbon,.metric-stack,.state-rail,.fatigue-states figure{
  background:var(--glass);
  background-image:var(--glass-shine);
  border-color:var(--glass-line);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-shell{background:rgba(16,18,22,.42)}
.hero-product,.cinema-card,.fleet-frame,.dev-console{background:var(--glass-strong)}
.section{background:transparent}
.observation,.road,.privacy,.finale{background:transparent}
.final-bg,.hero-vignette{opacity:.55}

.reveal{transition-delay:var(--d,0ms)}
.reveal.is-visible{transition-timing-function:cubic-bezier(.16,1,.3,1)}

.desktop-nav a[aria-current="true"]{color:#fff}
.desktop-nav a[aria-current="true"]::after{
  content:"";display:block;height:1px;margin-top:4px;
  background:var(--red2);
}

@media (max-width:900px){
  .section::before{display:none}
  .night-road{opacity:.72}
}

.beat-index{
  position:fixed;left:18px;top:50%;z-index:40;transform:translateY(-50%);
  margin:0;padding:0;list-style:none;display:grid;gap:10px;
}
.beat-index a{
  display:grid;grid-template-columns:10px auto;align-items:center;gap:8px;
  color:rgba(255,255,255,.38);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.beat-index a::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.beat-index a[aria-current="true"]{color:#fff}
.beat-index a[aria-current="true"]::before{background:var(--red2);border-color:var(--red2);box-shadow:0 0 10px rgba(227,38,54,.7)}

.fatigue-states{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.fatigue-states figure{margin:0;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#000}
.fatigue-states img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fatigue-states figcaption{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:.86rem}
@media (max-width:900px){.fatigue-states{grid-template-columns:1fr}}

.marquee{overflow:hidden;border-block:1px solid var(--glass-line);padding:22px 0;background:rgba(8,10,12,.35);backdrop-filter:blur(16px)}
.marquee div{display:flex;gap:48px;width:max-content;animation:ticker 32s linear infinite}
.marquee span{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:rgba(255,255,255,.7);white-space:nowrap}
.marquee span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red2);margin-right:14px;vertical-align:middle}
@keyframes ticker{to{transform:translateX(-50%)}}

.compare-stage{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-stage figure{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(20px)}
.compare-stage img{width:100%;aspect-ratio:16/9;object-fit:cover}
.compare-stage figcaption{padding:14px 16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.compare-stage figure:last-child figcaption{color:var(--red2)}

.faq-list{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq-list details{border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(20px);padding:6px 20px}
.faq-list summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--red2);font-size:1.3rem}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:0 0 16px;color:var(--muted)}

.device-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.device-grid h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.98;letter-spacing:-.045em;margin:0 0 18px}
.device-grid p:last-child{color:var(--muted);max-width:42ch}
.device-hero{width:100%;height:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.55))}
.footer-credit{margin-top:14px;font-size:.78rem;color:var(--dim)}
.footer-credit a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
@media (max-width:900px){
  .compare-stage,.device-grid{grid-template-columns:1fr}
  .highway-bg{background:
    url("assets/images/driverion-camera.png") center 78% / 78% auto no-repeat,
    url("assets/images/highway-bg.png") center 30% / cover no-repeat}
}

@media (max-width:1180px){.beat-index{display:none}}

@media (prefers-reduced-motion:reduce){
  .marquee div{animation:none}
  .highway-bg{top:0;height:100vh;transform:none!important}
  .scroll-rail{display:none}
  .hero-product:hover,.cinema-card:hover,.fleet-frame:hover,.product-card:hover{transform:none}
}