/* ============================================================
   Tarayan — geospatial security intelligence
   Refined, performance-first landing. Apple design language:
   clarity, deference, depth. System font (San Francisco on Apple
   platforms) — zero web-font requests.

   Colour language:
     blue  (--fov)    camera coverage / sensors
     teal  (--route)  tracked movement / AI intelligence
     amber (--alert)  alerts
     red   (--danger) restricted
   ============================================================ */

:root {
  --bg: #04070c;
  --panel: rgba(10, 14, 22, 0.74);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f4f7fa;
  --text-dim: #93a1b1;
  --text-mute: #6b7888;

  --fov: #78aad7;
  --route: #6ee7c8;
  --alert: #f2b84b;
  --danger: #d96c5f;

  --loop: 18s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --nav-h: 84px;
  --wrap: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.sprite { position: absolute; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--text); color: #04070c; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(22px, 6vw, 48px); }

/* ====================== HEADER ====================== */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
  animation: navIn 0.8s var(--ease) both;
}
.nav__inner {
  pointer-events: auto;
  width: min(1180px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 14px;
  border-radius: 20px;
  /* glassier: let the field behind show through */
  background: rgba(9, 13, 20, 0.34);
  backdrop-filter: blur(30px) saturate(1.9);
  -webkit-backdrop-filter: blur(30px) saturate(1.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(255, 255, 255, 0.03) inset,
    0 20px 54px -30px rgba(0, 0, 0, 0.95);
}
@keyframes navIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }

.nav__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.nav__logo { width: 62px; height: 29px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
/* keep the footer mark at a calmer size */
.footer__top .nav__logo { width: 50px; height: 23px; }
.nav__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; }

.nav__links { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.nav__links a { text-decoration: none; color: var(--text-dim); font-size: 14px; font-weight: 500; transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--text); }

.nav__actions { display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 18px); }

.langtoggle {
  font-family: inherit; min-width: 44px; height: 34px; padding: 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 100px;
  cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.langtoggle:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); }
.langtoggle:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }

/* ====================== BUTTONS ====================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; border: 0; border-radius: 12px; padding: 14px 24px; cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease); white-space: nowrap;
}
.btn--sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--primary { color: #07120e; background: linear-gradient(180deg, #f7fbfa, #dff3ec); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 12px 34px -14px rgba(110,231,200,0.5); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 46px -16px rgba(110,231,200,0.65); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:focus-visible { outline: 2px solid var(--route); outline-offset: 3px; }
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }
.btn__arrow { transition: transform 0.22s var(--ease); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }

/* ====================== HERO ====================== */
.hero { position: relative; width: 100%; min-height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
.theater { position: absolute; inset: 0; z-index: 0; }
.theater__scale { position: absolute; inset: -3%; transform-origin: 60% 52%; }
.hero.is-live .theater__scale { animation: breathe 30s ease-in-out infinite alternate; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.3%, -0.9%); } }

.theater__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 105% at 60% 46%, transparent 42%, rgba(0,0,0,0.7) 100%); }
.theater__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.9) 22%, rgba(0,0,0,0.46) 46%, rgba(0,0,0,0.14) 70%, rgba(0,0,0,0.55) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,0.78) 0%, transparent 16%);
}

.basemap { animation: introFade 1.4s var(--ease) both; }
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
.buildings rect { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.09); stroke-width: 1; }
.cameras circle { fill: var(--fov); }
.restricted-label { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; fill: var(--danger); }
.gate-label { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; fill: var(--route); }
.alert-text { font-family: var(--font); font-size: 12.5px; font-weight: 600; fill: var(--alert); }
.entry-text { font-family: var(--font); font-size: 12px; font-weight: 600; fill: var(--route); }
.blind-label { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; fill: rgba(220,228,238,0.6); }

/* --- incident loop: only animates while the hero is in view (.is-live) --- */
.incident-glow,
.cone, .cam, .pg, .alert, .entry, .entry__label,
.route-base, .route, .route-blind, .blindspot { opacity: 0; }

.hero.is-live .incident-glow { animation: glowPulse var(--loop) var(--ease) infinite; }
@keyframes glowPulse { 0%,6%{opacity:0} 20%{opacity:1} 70%{opacity:0.85} 90%{opacity:0.5} 96%,100%{opacity:0} }

.hero.is-live .cone, .hero.is-live .cam, .hero.is-live .pg { animation: coneIn var(--loop) var(--ease) infinite; }
.hero.is-live .cone.c4, .hero.is-live .cam.c4, .hero.is-live .pg.c4 { animation-delay: 0.12s; }
.hero.is-live .cone.c3, .hero.is-live .cam.c3, .hero.is-live .pg.c3 { animation-delay: 0.24s; }
@keyframes coneIn { 0%,4%{opacity:0} 10%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }

.ping { fill: none; stroke: rgba(130,180,225,0.6); stroke-width: 1.6; vector-effect: non-scaling-stroke; transform-box: view-box; opacity: 0; }
.ping.p1 { transform-origin: 900px 250px; }
.ping.p4 { transform-origin: 760px 230px; }
.ping.p3 { transform-origin: 620px 360px; }
.hero.is-live .ping { animation: ping 2.2s var(--ease) infinite; }
.hero.is-live .pg.c4 .ping { animation-delay: 0.45s; }
.hero.is-live .pg.c3 .ping { animation-delay: 0.9s; }
@keyframes ping { 0%{transform:scale(0.04);opacity:0.85} 55%{opacity:0.28} 100%{transform:scale(1);opacity:0} }

.hero.is-live .alert { animation: popInLate var(--loop) var(--ease) infinite; }
.alert__ring { transform-box: fill-box; transform-origin: center; }
.hero.is-live .alert__ring { animation: alertRing var(--loop) ease-out infinite; }
@keyframes popInLate { 0%,8%{opacity:0} 12%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }
@keyframes alertRing { 0%,8%{opacity:0;transform:scale(.5)} 11%{opacity:.9;transform:scale(.7)} 19%{opacity:0;transform:scale(2.2)} 100%{opacity:0;transform:scale(2.2)} }

.hero.is-live .route-base { animation: baseShow var(--loop) var(--ease) infinite; }
@keyframes baseShow { 0%,12%{opacity:0} 16%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }
.route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero.is-live .route { animation: drawRoute var(--loop) var(--ease) infinite; }
@keyframes drawRoute { 0%,14%{stroke-dashoffset:1;opacity:1} 23%{stroke-dashoffset:0;opacity:1} 92%{stroke-dashoffset:0;opacity:1} 97%,100%{stroke-dashoffset:0;opacity:0} }

.hero.is-live .route-blind { animation: blindDraw var(--loop) var(--ease) infinite; }
@keyframes blindDraw { 0%,23%{opacity:0} 27%{opacity:0.85} 92%{opacity:0.85} 97%,100%{opacity:0} }
.hero.is-live .blindspot { animation: blindShow var(--loop) var(--ease) infinite; }
@keyframes blindShow { 0%,25%{opacity:0} 29%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }

.hero.is-live .entry { animation: entryIn var(--loop) var(--ease) infinite; }
.entry__ring { transform-box: fill-box; transform-origin: center; }
.hero.is-live .entry__ring { animation: entryRing var(--loop) ease-out infinite; }
.hero.is-live .entry__label { animation: entryLabel var(--loop) var(--ease) infinite; }
@keyframes entryIn { 0%,25%{opacity:0} 29%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }
@keyframes entryRing { 0%,25%{opacity:0;transform:scale(.5)} 29%{opacity:.9;transform:scale(.7)} 37%{opacity:0;transform:scale(2.2)} 100%{opacity:0;transform:scale(2.2)} }
@keyframes entryLabel { 0%,29%{opacity:0} 33%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }

/* --- hero overlays --- */
.opstatus {
  position: absolute; z-index: 3; top: calc(var(--nav-h) + 14px); left: clamp(24px, 6vw, 88px);
  display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-dim);
  letter-spacing: 0.07em; font-variant-numeric: tabular-nums; animation: fadeIn 1s var(--ease) 0.6s both;
}
.opstatus__live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--route); }
.opstatus__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--route); animation: pulseDot 2.2s var(--ease) infinite; }

/* --- "backtracking" chip (top centre) --- */
.backtrack {
  position: absolute; z-index: 3; top: calc(var(--nav-h) + 10px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--route);
  padding: 6px 13px; border: 1px solid rgba(110,231,200,0.25); border-radius: 100px;
  background: rgba(7,18,14,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0;
}
.hero.is-live .backtrack { animation: btChip var(--loop) var(--ease) infinite; }
.backtrack__spin { width: 11px; height: 11px; border: 1.6px solid rgba(110,231,200,0.35); border-top-color: var(--route); border-radius: 50%; }
.hero.is-live .backtrack__spin { animation: spin 0.55s linear infinite; }
@keyframes btChip { 0%,11%{opacity:0;transform:translate(-50%,-6px)} 14%{opacity:1;transform:translate(-50%,0)} 24%{opacity:1} 28%,100%{opacity:0} }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- DETECTION card (object recognised from a feed) --- */
.vehcard {
  position: absolute; z-index: 3; top: calc(var(--nav-h) + 20px); right: clamp(20px, 3vw, 48px); width: 250px;
  display: flex; gap: 11px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.5); opacity: 0;
}
.hero.is-live .vehcard { animation: cardIn var(--loop) var(--ease) infinite; }
@keyframes cardIn { 0%,7%{opacity:0;transform:translateY(-8px)} 12%{opacity:1;transform:translateY(0)} 92%{opacity:1;transform:translateY(0)} 97%,100%{opacity:0;transform:translateY(-8px)} }
.snap { position: relative; flex: none; width: 74px; height: 56px; border-radius: 8px; background: rgba(110,231,200,0.05); border: 1px solid rgba(110,231,200,0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.snap svg { width: 86%; height: 70%; }
.snap__c { position: absolute; width: 8px; height: 8px; border: 1.4px solid var(--route); }
.snap__c.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.snap__c.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.snap__c.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.snap__c.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.vehcard__info { min-width: 0; flex: 1; }
.vehcard__id { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.vehcard__conf { font-size: 10px; font-weight: 600; color: var(--route); background: rgba(110,231,200,0.1); border: 1px solid rgba(110,231,200,0.2); padding: 1px 6px; border-radius: 6px; flex: none; }
.vehcard__rows { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.vehcard__rows li { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.vehcard__rows span { color: var(--text-dim); }
.vehcard__rows b { font-weight: 600; color: var(--text); text-align: right; }

/* --- NATURAL-LANGUAGE QUERY assistant --- */
.assistant { position: absolute; z-index: 3; right: clamp(20px, 3vw, 48px); bottom: clamp(24px, 6vh, 56px); width: 286px; max-width: 40vw; display: flex; flex-direction: column; gap: 9px; }
.msg { font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 13px; max-width: 92%; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.msg--user { align-self: flex-end; background: rgba(110,231,200,0.12); border: 1px solid rgba(110,231,200,0.22); color: var(--text); border-bottom-right-radius: 5px; opacity: 0; }
.hero.is-live .msg--user { animation: userIn var(--loop) var(--ease) infinite; }
@keyframes userIn { 0%,18%{opacity:0;transform:translateY(8px)} 22%{opacity:1;transform:translateY(0)} 92%{opacity:1} 97%,100%{opacity:0} }
.msg--bot { align-self: flex-start; position: relative; min-height: 38px; min-width: 60px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text-dim); border-bottom-left-radius: 5px; opacity: 0; }
.hero.is-live .msg--bot { animation: botIn var(--loop) var(--ease) infinite; }
@keyframes botIn { 0%,28%{opacity:0;transform:translateY(8px)} 31%{opacity:1;transform:translateY(0)} 92%{opacity:1} 97%,100%{opacity:0} }
.dots { position: absolute; left: 12px; top: 14px; display: inline-flex; gap: 4px; opacity: 0; }
.hero.is-live .dots { animation: dotsShow var(--loop) steps(1,end) infinite; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
.hero.is-live .dots i { animation: dotBounce 1.2s var(--ease) infinite; }
.dots i:nth-child(2){ animation-delay: .15s; } .dots i:nth-child(3){ animation-delay: .3s; }
@keyframes dotsShow { 0%,31%{opacity:0} 32%{opacity:1} 37%{opacity:1} 39%,100%{opacity:0} }
@keyframes dotBounce { 0%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-3px);opacity:1} }
.answer { display: block; opacity: 0; }
.hero.is-live .answer { animation: answerIn var(--loop) var(--ease) infinite; }
@keyframes answerIn { 0%,37%{opacity:0} 40%{opacity:1} 92%{opacity:1} 97%,100%{opacity:0} }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.src { font-size: 11px; font-weight: 500; color: var(--route); padding: 3px 8px 3px 7px; border-radius: 7px; background: rgba(110,231,200,0.08); border: 1px solid rgba(110,231,200,0.2); display: inline-flex; align-items: center; gap: 5px; opacity: 0; }
.src::before { content: "✓"; font-size: 9px; opacity: 0.9; }
.hero.is-live .src { animation: srcIn var(--loop) var(--ease) infinite; }
.src.s2 { animation-delay: .12s; } .src.s3 { animation-delay: .24s; }
@keyframes srcIn { 0%,46%{opacity:0;transform:translateY(5px)} 49%{opacity:1;transform:translateY(0)} 92%{opacity:1} 97%,100%{opacity:0} }

.hero__content { position: relative; z-index: 2; max-width: 600px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--nav-h) clamp(24px, 6vw, 88px) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 7px 13px 7px 11px; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,0.03); animation: rise 0.9s var(--ease) 0.1s both; }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--route); animation: pulseDot 2.6s var(--ease) infinite; }
.hero__title { margin-top: 4px; font-size: clamp(42px, 6.2vw, 78px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; text-shadow: 0 2px 50px rgba(0,0,0,0.6); white-space: pre-line; min-height: 2.04em; animation: rise 1s var(--ease) 0.15s both; }
.hero__actions { margin-top: 36px; animation: rise 1s var(--ease) 0.46s both; }
.hero__trust { margin-top: 22px; font-size: 13px; color: var(--text-dim); opacity: 0.78; animation: rise 1s var(--ease) 0.58s both; }

/* typing caret (shared by hero slogan + lead) */
.caret { display: inline-block; width: 2px; height: 0.92em; margin-left: 2px; background: var(--route); vertical-align: -0.08em; border-radius: 1px; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.typeit { display: inline-block; min-height: 1em; }

/* Lead — the relocated subtitle, large + typed, directly under the hero */
.lead { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(52px, 8vh, 96px); }
.lead__text { font-size: clamp(22px, 3vw, 34px); line-height: 1.36; letter-spacing: -0.02em; font-weight: 500; color: var(--text); max-width: 820px; min-height: 1.36em; }

/* ====================== SECTIONS ====================== */
.section { position: relative; padding: clamp(76px, 12vh, 140px) 0; border-top: 1px solid rgba(255,255,255,0.06); }
/* below-the-fold sections skip layout/paint until near the viewport */
.problem, .questions, .builtfor, .demo { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--route); margin-bottom: 18px; }
.section__title { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; max-width: 18ch; }

.problem__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.problem__body { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: var(--text-dim); max-width: 46ch; }

.qgrid { list-style: none; margin-top: clamp(32px, 5vw, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.q { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); color: var(--text); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); }
.q:hover { border-color: rgba(110,231,200,0.35); background: rgba(110,231,200,0.05); transform: translateY(-2px); }
.q__ico { width: 16px; height: 16px; flex: none; color: var(--route); }

.chips { list-style: none; margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { display: inline-flex; align-items: center; white-space: nowrap; gap: 9px; padding: 11px 16px 11px 14px; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,0.025); color: var(--text); font-size: 14.5px; font-weight: 500; transition: border-color 0.25s var(--ease); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fov); box-shadow: 0 0 8px rgba(120,170,215,0.6); }
.chip:hover { border-color: rgba(120,170,215,0.4); }

/* ====================== DEMO FORM ====================== */
.demo { overflow: hidden; }
.demo__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 22% 26%, rgba(110,231,200,0.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(80% 80% at 30% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 80% at 30% 30%, #000 30%, transparent 78%);
}
.demo__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.demo__body { margin-top: 22px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--text-dim); max-width: 46ch; }
.demo__assure { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.demo__assure li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.demo__assure li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(110,231,200,0.25), transparent 70%); box-shadow: inset 0 0 0 1.4px rgba(110,231,200,0.6); }
.demo__assure li::after { content: ""; position: absolute; left: 4.5px; top: 9.5px; width: 3px; height: 6px; border: solid var(--route); border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }

.demo__form {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field--row > div { display: flex; flex-direction: column; gap: 8px; }
.demo__form label { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-dim); }
.field__opt { font-weight: 400; color: var(--text-mute); }
.demo__form input,
.demo__form select,
.demo__form textarea {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(2, 4, 8, 0.6); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 14px; width: 100%; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.demo__form textarea { resize: vertical; min-height: 104px; line-height: 1.55; }
.demo__form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.demo__form input::placeholder, .demo__form textarea::placeholder { color: var(--text-mute); }
.demo__form input:focus, .demo__form select:focus, .demo__form textarea:focus {
  outline: none; border-color: rgba(110,231,200,0.55);
  box-shadow: 0 0 0 3px rgba(110,231,200,0.16); background: rgba(2, 4, 8, 0.85);
}
.field[data-invalid] input, .field[data-invalid] textarea { border-color: rgba(217,108,95,0.7); }
.field__err { min-height: 0; font-size: 12.5px; color: var(--danger); }
.field[data-invalid] .field__err { min-height: 1em; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
/* custom checkbox: the global `.demo__form input { appearance:none }` rule
   strips native checkbox rendering, so we draw our own check state */
.consent input {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; padding: 0; margin-top: 1px;
  background: rgba(2, 4, 8, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  display: grid; place-content: center;
  cursor: pointer; flex: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.consent input::before {
  content: ""; width: 11px; height: 11px;
  transform: scale(0); transition: transform 0.15s var(--ease);
  background: #07120e;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.consent input:checked { background: var(--route); border-color: var(--route); }
.consent input:checked::before { transform: scale(1); }
.consent input:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }

/* privacy policy link (button styled as a link) */
.privacy-row { margin-top: -6px; }
.privacy-link {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 13px; color: var(--route); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.privacy-link:hover { color: #9ff0db; }
.privacy-link:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; border-radius: 4px; }
.privacy-link--footer { font-size: 14px; color: var(--text-dim); text-decoration: none; }
.privacy-link--footer:hover { color: var(--text); }

/* ====================== PRIVACY MODAL ====================== */
.privacy {
  width: min(620px, calc(100vw - 28px));
  max-height: min(84svh, 760px);
  margin: auto; padding: 0;
  background: #0b101a; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.privacy[open] { display: flex; flex-direction: column; }
.privacy::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body:has(.privacy[open]) { overflow: hidden; }
.privacy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex: none; }
.privacy__head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.privacy__close {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.privacy__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.privacy__close:focus-visible { outline: 2px solid var(--route); outline-offset: 2px; }
.privacy__body { padding: 16px 22px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.privacy__body h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 18px 0 6px; }
.privacy__body p { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.privacy__updated { margin-top: 20px; font-size: 12px; color: var(--text-mute); }

.turnstile-wrap { min-height: 65px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.demo__submit { margin-top: 4px; width: 100%; }
.demo__submit.is-sending .demo__submit-label::after { content: "…"; }
.demo__status { font-size: 14px; line-height: 1.5; min-height: 1.2em; margin-top: 2px; }
.demo__status[data-state="ok"] { color: var(--route); }
.demo__status[data-state="error"] { color: var(--danger); }

/* ====================== FOOTER ====================== */
.footer { border-top: 1px solid rgba(255,255,255,0.06); padding: clamp(40px, 6vw, 64px) 0 28px; }
.footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__top { display: inline-flex; align-items: center; gap: 9px; }
.footer__tag { margin-top: 14px; max-width: 34ch; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.footer__links { display: flex; flex-direction: column; gap: 12px; text-align: right; }
.footer__links a { color: var(--text-dim); text-decoration: none; font-size: 14px; transition: color 0.2s var(--ease); }
.footer__links a:hover { color: var(--text); }
.footer__legal { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); color: var(--text-mute); font-size: 12.5px; }

/* ====================== SCROLL REVEAL ====================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ====================== SHARED KEYFRAMES ====================== */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(110,231,200,0.45)} 70%{box-shadow:0 0 0 7px rgba(110,231,200,0)} 100%{box-shadow:0 0 0 0 rgba(110,231,200,0)} }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1024px) {
  .qgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* phones: full-bleed again (covers the whole hero), but the camera is
     panned onto the incident corridor (alert → route → gate), which is a
     naturally VERTICAL composition: full scene height is visible and the
     story plays top-right → bottom-centre at near-1:1 scale, so the map
     labels are readable. Slow breathe keeps it alive. */
  .theater__scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.74) 32%, rgba(0,0,0,0.2) 54%, transparent 72%, rgba(0,0,0,0.35) 100%);
  }
  .hero { display: flex; flex-direction: column; }
  /* map occupies exactly the first screen; cards flow below it */
  .theater { inset: 0 0 auto 0; height: 100svh; }
  .hero__content { order: 1; min-height: 100svh; justify-content: flex-start; padding-top: calc(var(--nav-h) + 58px); padding-bottom: 32px; max-width: none; }
  .hero__title { font-size: clamp(40px, 9vw, 58px); }
  .backtrack { display: none; }
  .opstatus { top: calc(var(--nav-h) + 18px); }
  .nav__links { display: none; }
  .nav__logo { width: 50px; height: 23px; }
  /* detection card + chat sit BELOW the map on phones so they never cover
     the field — shown in their final state instead of looping (the loop
     would blank them whenever the hero scrolls out of view) */
  .vehcard { order: 2; position: static; top: auto; right: auto; width: min(92vw, 380px); margin: 18px auto 0; }
  .assistant { order: 3; position: static; right: auto; bottom: auto; width: min(92vw, 380px); max-width: none; margin: 12px auto 26px; }
  .vehcard, .hero.is-live .vehcard,
  .msg--user, .hero.is-live .msg--user,
  .msg--bot, .hero.is-live .msg--bot,
  .answer, .hero.is-live .answer,
  .src, .hero.is-live .src { opacity: 1; animation: none; transform: none; }
  .dots, .hero.is-live .dots { display: none; }
  .problem__grid { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .demo__inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) and (orientation: portrait) {
  /* The portrait reframe itself is done in app.js by narrowing the SVG
     viewBox onto the incident corridor (no element translation — that
     would expose black). Here we reposition two map annotations:
     - alert badge: down-left into an empty map region, clear of the
       hero headline / CTA / trust stack in both EN and TR
     - coverage-gap label: right, fully inside the portrait window */
  .alert > rect, .alert > path, .alert > text { transform: translate(-100px, 210px); }
  .blindspot { transform: translateX(70px); }
}
@media (max-width: 560px) {
  .nav .btn--sm { display: none; }
  .qgrid { grid-template-columns: 1fr; }
  .field--row { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; }
  .footer__links { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 18px; }
}

/* ====================== REDUCED MOTION ====================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .theater__scale { transform: none; }
  .basemap, .incident-glow, .cone, .cam, .pg, .alert, .entry, .entry__label,
  .route-base, .route, .route-blind, .blindspot { opacity: 1; }
  .incident-glow { opacity: 0.5; }
  .ping { opacity: 0; }
  .route { stroke-dashoffset: 0; }
  .vehcard, .msg, .answer, .src { opacity: 1; transform: none; }
  .backtrack, .dots { opacity: 0; }
  .reveal { opacity: 1; transform: none; }
  .hero__content > * { opacity: 1; transform: none; }
  .typeit { min-height: 0; }
}