/* ============================================================
   Design-System v3 lt. DESIGN.md — „Hell + dunkle Ops-Inseln":
   helle Papier-Basis (Frische/Ehrlichkeit) · Indigo als Text ·
   Smaragd-Akzent (Transformation) · Gold-Leitstern ·
   dunkle Inseln (Live-Feed, Ticker, Grundsatz-Band) = Technik-Tiefe.
   Konzept „Sendungsverfolgung" bleibt: Route/Wegpunkte · Beleg-
   Karten · Live-Feed · Conveyor-Ticker. Self-contained.
   ============================================================ */

:root{
  /* Helle Basis */
  --paper:#f7f8fb; --paper-2:#eef1f7; --card:#ffffff;
  --ink:#141d33; --muted:#5b6a8c; --line:#dbe1ee;
  /* Akzente */
  --accent:#0e9f7a; --accent-dark:#0a7d5f; --accent-ink:#0b7a5c;
  --gold:#c8922a; --gold-soft:#e8b13c; --blade:#e23b4e;
  /* Dunkle Ops-Inseln */
  --d-ink:#141d33; --d-deep:#0f1729; --d-surface:#1d2942; --d-line:#2c3a5a;
  --frost:#eaf0fc; --d-muted:#9fb0d0;
  --radius:16px; --maxw:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:1.05rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* Papier-Korn für Tiefe (inline-SVG, kein externer Host) */
body::after{content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
img,svg{max-width:100%; display:block}
a{color:inherit}
::selection{background:rgba(14,159,122,.22)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

h1,h2,h3{line-height:1.1; letter-spacing:-.025em; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.3rem,5.2vw,4.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.5rem)}
h3{font-size:1.15rem; line-height:1.35}
p{margin:0 0 1em}
.lead{color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.22rem); max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* Verlaufs-Highlight (Smaragd→Gold) mit einmaligem Scanner-Sweep */
.grad-text{background:linear-gradient(110deg,var(--accent) 20%,var(--gold) 45%,var(--accent) 70%);
  background-size:250% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 1.6s .35s ease-out forwards}
@keyframes sweep{to{background-position:0 0}}

.container{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}

/* Globale Sterne der Dunkel-Version: auf heller Basis aus —
   Sterne leben jetzt IN den dunklen Inseln (Band, Feed) */
.stars,.guiding{display:none}

main,header,footer{position:relative; z-index:1}

/* --- Navigation ------------------------------------------------ */
.site-header{position:fixed; inset-inline:0; top:0; z-index:50;
  background:rgba(247,248,251,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw); margin-inline:auto; padding-inline:20px;
  height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700;
  font-size:1.3rem; text-decoration:none; letter-spacing:-.02em}
/* Nav-Lockup: SAM in Versalien, Stern größer, Akronym-Subline */
.nav .brand{display:grid; grid-template-columns:auto auto; column-gap:11px;
  row-gap:0; align-items:center; justify-items:start}
.nav .brand svg{grid-row:1 / span 2; width:38px; height:38px;
  filter:drop-shadow(0 0 8px rgba(200,146,42,.25))}
.nav .brand [data-brand]{font-size:1.5rem; font-weight:800; letter-spacing:.09em;
  line-height:1.05; text-transform:uppercase}
.nav .brand::after{content:"Schmidt Automatisierung Mittelhessen"; grid-column:2;
  font-family:var(--mono); font-size:.55rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap}
.nav-links{display:flex; align-items:center; gap:22px; font-size:.92rem}
.nav-links a{color:var(--muted); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:2px}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:6px 10px; font-size:1.1rem; cursor:pointer}

/* --- Buttons ---------------------------------------------------- */
.btn{display:inline-block; text-decoration:none; font-weight:600; border-radius:999px;
  padding:13px 28px; transition:opacity .2s,border-color .2s,transform .2s; border:0;
  cursor:pointer; font-size:1rem; font-family:var(--font)}
.btn-primary{background:linear-gradient(135deg,#16bd91,var(--accent)); color:#fff;
  font-weight:700; text-shadow:0 1px 2px rgba(10,80,60,.25);
  box-shadow:0 10px 30px rgba(14,159,122,.28)}
.btn-primary:hover{opacity:.92; transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line); color:var(--ink); background:var(--card)}
.btn-ghost:hover{border-color:var(--muted)}
/* Sanfte Grün-Tönung — Zweit-CTA (z. B. Prozess-Check): gleiche Familie wie Primär, hellere Stufe */
.btn-soft{background:#e7f6f0; color:var(--accent-ink); border:1px solid rgba(14,159,122,.35)}
.btn-soft:hover{background:#d9f0e6; border-color:rgba(14,159,122,.55); transform:translateY(-1px)}
.btn-soft::before{content:"✓ "; color:var(--accent)}
.btn-sm{padding:9px 18px; font-size:.9rem}

/* --- Hero (hell, zweigeteilt) ------------------------------------ */
.hero{padding:150px 0 80px;
  background:radial-gradient(55% 55% at 78% 12%,rgba(14,159,122,.09),transparent 70%),
             radial-gradient(45% 45% at 8% 90%,rgba(200,146,42,.08),transparent 70%)}
.hero-split{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px}
.kicker::before{content:""; width:22px; height:1px; background:var(--accent)}
.facts{display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:38px; font-size:.9rem; color:var(--muted)}
.facts span::before{content:"◆ "; color:var(--gold)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.micro{font-size:.85rem; color:var(--muted); margin-top:12px}

/* --- Live-Feed-Karte = DUNKLE OPS-INSEL --------------------------- */
.feed-card{background:linear-gradient(180deg,var(--d-surface),var(--d-deep));
  border:1px solid var(--d-line); border-radius:var(--radius); color:var(--frost);
  box-shadow:0 30px 70px rgba(20,29,51,.35), 0 0 0 1px rgba(232,177,60,.06);
  overflow:hidden; transform:rotate(.6deg); position:relative}
.feed-card::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:
  radial-gradient(1.5px 1.5px at 18% 20%, rgba(234,240,252,.4), transparent 60%),
  radial-gradient(1px 1px at 80% 30%, rgba(232,177,60,.35), transparent 60%),
  radial-gradient(1px 1px at 60% 75%, rgba(234,240,252,.3), transparent 60%)}
.feed-head{display:flex; align-items:center; gap:8px; padding:13px 18px;
  border-bottom:1px solid var(--d-line); font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--d-muted)}
.feed-head .dot{width:9px; height:9px; border-radius:50%; background:var(--d-line)}
.feed-head .dot.r{background:var(--blade)} .feed-head .dot.g{background:var(--gold-soft)}
.feed-head .title{margin-left:8px}
.feed-head .live{margin-left:auto; color:var(--gold-soft)}
.feed-head .live::before{content:"● "; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.feed-body{list-style:none; margin:0; padding:14px 18px 18px; min-height:238px; max-height:238px;
  overflow:hidden; font-family:var(--mono); font-size:.82rem; line-height:1.5}
.feed-line{display:flex; gap:12px; align-items:baseline; padding:6px 0;
  border-bottom:1px dashed rgba(44,58,90,.55); animation:feedin .35s ease-out}
@keyframes feedin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.feed-line .ts{color:rgba(159,176,208,.55); flex-shrink:0}
.feed-line .tx{color:var(--d-muted)}
.feed-line.ok .tx{color:var(--frost)}
.feed-line .chip{margin-left:auto; flex-shrink:0; font-size:.7rem; border-radius:6px;
  padding:1px 7px; background:rgba(45,212,168,.14); color:#5fe3bd;
  border:1px solid rgba(45,212,168,.35)}
.feed-line .chip.h{background:rgba(232,177,60,.13); color:var(--gold-soft); border-color:rgba(232,177,60,.35)}
.feed-note{padding:10px 18px; border-top:1px solid var(--d-line); font-size:.72rem;
  color:rgba(159,176,208,.6); font-family:var(--mono)}

/* --- Conveyor-Ticker = DUNKLE INSEL -------------------------------- */
.ticker{border-block:1px solid var(--d-line); background:var(--d-ink); overflow:hidden;
  padding:14px 0; position:relative}
.ticker-track{display:flex; gap:0; width:max-content; animation:belt 55s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--mono); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(159,176,208,.65); padding:0 28px; white-space:nowrap}
.ticker span::after{content:"·"; margin-left:56px; color:var(--gold-soft)}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Sektionen + Wegpunkte ------------------------------------------ */
section{padding:84px 0; border-top:1px solid var(--line)}
section.alt{background:var(--paper-2)}
.waypoint{display:flex; align-items:center; gap:14px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:22px}
.waypoint::before{content:""; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--gold); box-shadow:0 0 10px rgba(200,146,42,.4); flex-shrink:0}
.waypoint::after{content:""; height:1px; flex:0 0 46px;
  background:linear-gradient(90deg,var(--gold),transparent)}

/* --- Beleg-Karten (Frachtbrief-Look, hell) --------------------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.waybill{position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:0; overflow:hidden;
  box-shadow:0 2px 10px rgba(20,29,51,.05);
  transition:transform .25s,border-color .25s,box-shadow .25s}
@media(hover:hover){
  .waybill:hover{transform:translateY(-5px) rotate(-.3deg); border-color:#c3cde3;
    box-shadow:0 20px 45px rgba(20,29,51,.13)}
  .waybill:hover .stamp{opacity:1; transform:rotate(-8deg) scale(1)}
}
.waybill .wb-head{display:flex; justify-content:space-between; align-items:center;
  padding:12px 22px; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px dashed var(--line); background:var(--paper)}
.waybill .wb-body{padding:20px 22px 18px}
.waybill h3{margin-top:0}
.waybill p{font-size:.94rem; color:var(--muted); margin:0}
.waybill .then{display:block; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line); color:var(--ink); font-size:.94rem}
.waybill .then strong{color:var(--accent-ink); font-family:var(--mono); font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase}
.waybill .barcode{height:26px; margin-top:4px; opacity:.22;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,
    var(--ink) 5px 6px,transparent 6px 11px,var(--ink) 11px 14px,transparent 14px 17px)}
.stamp{position:absolute; top:14px; right:14px; font-family:var(--mono); font-weight:700;
  font-size:.78rem; letter-spacing:.24em; color:var(--accent-ink); border:2px solid var(--accent-ink);
  border-radius:6px; padding:4px 10px; opacity:0; transform:rotate(-8deg) scale(1.3);
  transition:opacity .25s,transform .25s; pointer-events:none}

/* --- Drei-Wege-Diagramm ------------------------------------------------ */
.routes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.route{border:1px solid var(--line); border-radius:12px; padding:26px 24px;
  background:var(--card); position:relative; box-shadow:0 2px 10px rgba(20,29,51,.04)}
.route .r-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.route h3{font-size:1.05rem}
.route p{font-size:.92rem; color:var(--muted); margin:0}
.route.dim{opacity:.6; background:var(--paper-2)}
.route.dim h3{text-decoration:line-through; text-decoration-color:rgba(226,59,78,.55);
  text-decoration-thickness:2px}
.route.pick{border-color:rgba(14,159,122,.45); background:#f2faf7;
  box-shadow:0 10px 30px rgba(14,159,122,.09)}
.route.pick .r-label{color:var(--accent-ink)}
.route.pick::after{content:"★"; position:absolute; top:16px; right:18px; color:var(--gold);
  text-shadow:0 0 10px rgba(200,146,42,.4)}

/* --- Schritte / Band / Checkliste / Demo / CTA / Formular --------------- */
.step .num{font-family:var(--mono); font-size:2.6rem; font-weight:700; margin-bottom:10px}
.step p{color:var(--muted); font-size:.97rem}

/* Grundsatz-Band = DUNKLE INSEL mit Sternen */
.band{background:var(--d-ink); color:var(--frost); text-align:center; padding:76px 0;
  position:relative; overflow:hidden; border-top:0}
.band::before{content:""; position:absolute; inset:0; pointer-events:none; background-image:
  radial-gradient(1.5px 1.5px at 15% 25%, rgba(234,240,252,.4), transparent 60%),
  radial-gradient(1px 1px at 80% 18%, rgba(232,177,60,.4), transparent 60%),
  radial-gradient(1px 1px at 60% 80%, rgba(234,240,252,.3), transparent 60%),
  radial-gradient(1.5px 1.5px at 30% 70%, rgba(234,240,252,.25), transparent 60%)}
/* Mission-Sektion: Text links, Motiv-Bild rechts (Regel: Grafik nie durch Text) */
.split-media{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.mission-figure{margin:0}
.mission-figure img{width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(20,29,51,.14); border:1px solid var(--line)}
.mission-figure figcaption{margin-top:10px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right}
@media(max-width:900px){
  .split-media{grid-template-columns:1fr; gap:32px}
}

/* Symbiose-Motiv „Zwei Stränge, ein Weg" — NEBEN dem Text (Regel: Grafik nie durch Text) */
.band-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  text-align:left}
.band-grid .quote{margin:0 0 14px; max-width:none}
.band-grid p{margin:0; max-width:none}
.sym-side{width:100%; max-width:400px; justify-self:end}
@media(max-width:900px){
  .band-grid{grid-template-columns:1fr; text-align:center}
  .band-grid .quote{margin-inline:auto}
  .sym-side{display:none}
}

.band .quote{font-size:clamp(1.3rem,2.4vw,1.95rem); font-weight:700; letter-spacing:-.01em;
  max-width:24em; margin:0 auto 14px; position:relative}
.band .quote .grad-text{background:linear-gradient(110deg,#2dd4a8 20%,var(--gold-soft) 60%);
  -webkit-background-clip:text; background-clip:text; animation:none; background-position:0 0}
.band p{max-width:62ch; margin-inline:auto; color:var(--d-muted); position:relative}

.checklist{list-style:none; margin:36px 0 0; padding:0; max-width:46rem}
.checklist li{padding:14px 0 14px 38px; border-bottom:1px dashed var(--line); position:relative}
.checklist li::before{content:"✓"; position:absolute; left:4px; color:var(--accent-ink); font-weight:700}

.demo{margin-top:34px}
.demo .badge{display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  border:1px solid rgba(14,159,122,.35); border-radius:999px; padding:4px 12px; margin-bottom:14px}
.demo .media{aspect-ratio:16/9; background:var(--paper-2); border:1px dashed var(--line);
  border-radius:var(--radius); display:grid; place-items:center; color:var(--muted);
  font-size:.9rem; margin-top:18px; font-family:var(--mono)}
.demo .vorher{color:var(--muted); font-size:.95rem}
.demo .vorher strong,.demo .nachher strong{color:var(--ink)}
.demo .nachher{font-size:.95rem}

.cta-panel{text-align:center; padding:100px 0;
  background:radial-gradient(50% 60% at 50% 40%,rgba(14,159,122,.08),transparent 70%)}
.cta-panel h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.cta-panel p{color:var(--muted); font-size:1.1rem; max-width:52ch; margin:0 auto 30px}

.form{max-width:34rem; margin-top:36px}
.field{margin-bottom:20px}
.field label{display:block; font-size:.9rem; font-weight:600; margin-bottom:7px}
.field label .req{color:var(--blade)}
.field input,.field textarea{width:100%; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:1rem;
  font-family:var(--font)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.field textarea{min-height:120px; resize:vertical}
.form .hint{font-size:.82rem; color:var(--muted); margin-top:16px}
.form .hint a{color:var(--accent-ink)}
.form-status{margin-top:18px; padding:14px 16px; border-radius:10px; font-size:.95rem; display:none}
.form-status.ok{display:block; background:rgba(14,159,122,.1); border:1px solid rgba(14,159,122,.35)}
.form-status.info{display:block; background:var(--paper-2); border:1px solid var(--line)}

/* --- Prozess-Check (Lead-Magnet) ------------------------------------- */
.check-box{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:26px 26px 14px; margin-bottom:22px; box-shadow:0 2px 10px rgba(20,29,51,.04)}
.cb-head{display:flex; align-items:baseline; gap:16px; border-bottom:1px dashed var(--line);
  padding-bottom:12px; margin-bottom:6px}
.cb-head .mono{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.cb-head h3{margin:0}
.q{border:0; padding:14px 0 6px; margin:0}
.q legend{font-weight:600; padding:0 0 10px}
.opt{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:9px;
  cursor:pointer; font-size:.95rem; color:var(--muted); transition:background .15s}
.opt:hover{background:var(--paper-2)}
.opt input{margin-top:5px; accent-color:var(--accent); flex-shrink:0}
.opt:has(input:checked){background:#f2faf7; color:var(--ink); outline:1px solid rgba(14,159,122,.35)}
#check-form > .btn{margin-top:8px}

.result{margin-top:54px; padding-top:44px; border-top:1px solid var(--line)}
.hebel{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin-bottom:12px; max-width:46rem}
.hebel .mono{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink)}
.hebel p{margin:6px 0 0; font-size:.95rem; color:var(--muted)}
.result-cta{margin-top:40px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px}
.result-cta h3{margin-top:0}

/* --- Footer --------------------------------------------------------- */
footer{border-top:1px solid var(--line); padding:36px 0; font-size:.88rem;
  color:var(--muted); background:var(--paper-2)}
footer .inner{max-width:var(--maxw); margin-inline:auto; padding-inline:20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--ink)}
.staging{color:rgba(91,106,140,.55); font-size:.8rem; font-family:var(--mono)}

/* --- Premium-Interaktionen („Die Route zeichnet sich") ------------------ */

/* Tracking-Fortschritt unter der Navigation */
.scroll-progress{position:fixed; top:71px; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  transform-origin:left; transform:scaleX(0); pointer-events:none}

/* Wegpunkte werden beim Erreichen „abgestempelt": Punkt füllt sich golden */
.waypoint::before{transition:background .5s ease,box-shadow .5s ease}
.waypoint.in::before{background:var(--gold); box-shadow:0 0 14px rgba(200,146,42,.55)}

/* Leitstern-Cursor: weicher Gold-Glow, träge folgend (klein + dezent) */
.cursor-glow{position:fixed; top:0; left:0; width:110px; height:110px; z-index:1;
  pointer-events:none; border-radius:50%; will-change:transform;
  background:radial-gradient(circle,rgba(200,146,42,.14) 0%,rgba(14,159,122,.05) 45%,transparent 68%)}

/* Hero-Headline: Wort-für-Wort-Aufgang */
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.5deg)}
.hero h1.split .w{animation:wordrise .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.12s + var(--i) * .07s)}
@keyframes wordrise{to{opacity:1; transform:none}}
.hero h1.split.reveal{opacity:1; transform:none}

/* Barcode-Scan-Sweep beim Karten-Hover */
.waybill .barcode{position:relative; overflow:hidden}
.waybill .barcode::after{content:""; position:absolute; top:-4px; bottom:-4px; width:34px;
  left:-40px; background:linear-gradient(90deg,transparent,rgba(14,159,122,.55),transparent)}
@media(hover:hover){
  .waybill:hover .barcode::after{animation:scan .9s ease-in-out}
}
@keyframes scan{from{left:-40px}to{left:105%}}

.btn-primary{will-change:transform}
.feed-card{will-change:transform; transition:transform .2s ease-out}

/* --- Reveal + Stagger -------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease-out,transform .55s ease-out}
.reveal.in{opacity:1; transform:none}
.grid-3 .reveal:nth-child(2),.routes .reveal:nth-child(2){transition-delay:.12s}
.grid-3 .reveal:nth-child(3),.routes .reveal:nth-child(3){transition-delay:.24s}
.grid-2 .reveal:nth-child(2){transition-delay:.12s}
.grid-2 .reveal:nth-child(3){transition-delay:.18s}
.grid-2 .reveal:nth-child(4){transition-delay:.28s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .waybill,.btn{transition:none}
  .grad-text{animation:none; background-position:0 0}
  .ticker-track{animation:none}
  .feed-head .live::before{animation:none}
  .scroll-progress,.cursor-glow{display:none}
  .hero h1 .w{opacity:1; transform:none; animation:none}
  .waybill .barcode::after{display:none}
}

/* --- Responsive ------------------------------------------------------ */
@media(max-width:960px){
  .hero-split{grid-template-columns:1fr; gap:40px}
  .feed-card{transform:none}
}
@media(max-width:860px){
  .grid-3,.grid-2,.routes{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-links{display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:10px 20px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0; width:100%}
  .nav-links .btn{margin:10px 0}
  .hero{padding:126px 0 64px}
  section{padding:62px 0}
}