/* ============================================================
   AETHERIX — Sitio inmersivo
   Sistema de diseño · marca monocromática + verde acento
   ============================================================ */

:root{
  --ink:#0D1F26;
  --ink-2:#162a33;
  --ink-3:#22363f;
  --paper:#F5F6F2;
  --paper-2:#EDEFE9;
  --mute:#8A98A0;
  --line:#D7DBD4;
  --green:#22D87E;
  --green-2:#15B468;
  --green-soft:#C9F4DD;
  --warn:#F2B53F;
  --danger:#E55B5B;
  --info:#5BA8E5;
  --hm-accent:#6D28D9;
  --hm-accent-2:#6366F1;

  --on-dark:#EAF1EE;
  --on-dark-soft:#9fb0ab;
  --line-dark:rgba(234,241,238,.12);

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --r-s:12px;
  --r-m:18px;
  --r-l:24px;
  --r-xl:32px;

  --shadow:0 24px 60px -24px rgba(13,31,38,.18);
  --shadow-lg:0 40px 120px -32px rgba(13,31,38,.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"Manrope",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{ overflow-x:clip; }
body.lock{ overflow:hidden; }

::selection{ background:var(--green); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Type ---------- */
.mono{ font-family:"JetBrains Mono",monospace; }
.display{ font-family:"Space Grotesk",sans-serif; font-weight:700; line-height:.96; letter-spacing:-.025em; }
.wordmark{ font-family:"Michroma",sans-serif; letter-spacing:.18em; text-transform:uppercase; }

.eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--green-2);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;background:currentColor;opacity:.6;
}
.eyebrow.on-dark{ color:var(--green); }
.eyebrow.center::before{ display:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
section{ position:relative; }
.section-pad{ padding-block:clamp(80px,11vw,160px); }

.dark{ background:var(--ink); color:var(--on-dark); overflow-x:clip; }
.dark .display{ color:var(--on-dark); }
.paper{ background:var(--paper); color:var(--ink); }
.paper-2{ background:var(--paper-2); color:var(--ink); }

/* subtle grid + aurora decorations */
.aurora{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; pointer-events:none; z-index:0; }
.aurora.green{ background:radial-gradient(circle,rgba(34,216,126,.55),transparent 70%); }
.grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(13,31,38,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,31,38,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 80%);
}
.dark .grid-lines{
  background-image:
    linear-gradient(rgba(234,241,238,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(234,241,238,.05) 1px,transparent 1px);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:17px;height:17px; transition:transform .35s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--green-2); color:#fff; box-shadow:0 14px 34px -14px rgba(21,180,104,.7); }
.btn-primary:hover{ box-shadow:0 22px 50px -14px rgba(21,180,104,.85); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-green{ background:var(--green); color:var(--ink); box-shadow:0 14px 34px -14px rgba(34,216,126,.7); }
.btn-green:hover svg{ transform:translateX(4px); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.5); }
.dark .btn-ghost{ border-color:var(--line-dark); color:var(--on-dark); background:rgba(234,241,238,.03); }
.btn-ghost:hover{ border-color:var(--green-2); color:var(--green-2); }
.dark .btn-ghost:hover{ border-color:var(--green); color:var(--green); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:15px; color:var(--green-2);
}
.dark .link-arrow{ color:var(--green); }
.link-arrow svg{ width:16px;height:16px; transition:transform .35s var(--ease-out); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-3); background:rgba(255,255,255,.55);
}
.dark .chip{ border-color:var(--line-dark); color:var(--on-dark-soft); background:rgba(234,241,238,.04); }
.chip .dot{ width:6px;height:6px;border-radius:50%;background:var(--green-2); }
.dark .chip .dot{ background:var(--green); box-shadow:0 0 10px var(--green); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,48px);
  transition:background .4s var(--ease), backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(13,31,38,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-dark);
  padding-block:12px;
}
.nav__logo{ display:flex; align-items:center; gap:11px; height:32px; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-size:14px; font-weight:600; color:var(--on-dark-soft);
  position:relative; transition:color .25s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--green);
  transition:width .3s var(--ease-out);
}
.nav__link:hover{ color:var(--on-dark); }
.nav__link:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:18px; }

.lang-toggle{
  display:flex; align-items:center; font-family:"JetBrains Mono",monospace; font-size:12px;
  border:1px solid var(--line-dark); border-radius:999px; overflow:hidden;
}
.lang-toggle button{ padding:6px 11px; color:var(--on-dark-soft); transition:color .2s,background .2s; }
.lang-toggle button.active{ background:var(--green); color:var(--ink); font-weight:600; }

.nav__burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav__burger span{ height:2px; background:var(--on-dark); border-radius:2px; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:96px; padding-bottom:56px;
  background:var(--ink); color:var(--on-dark); overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,transparent 40%,rgba(13,31,38,.55) 100%),
    linear-gradient(180deg,rgba(13,31,38,.5) 0%,transparent 22%,transparent 70%,var(--ink) 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero__copy{ max-width:620px; }
.hero h1{
  font-size:clamp(38px,5.6vw,80px);
  margin:22px 0 0;
}
.hero h1 .accent{ color:var(--green); }
.hero__lead{
  margin-top:26px; font-size:clamp(17px,1.5vw,20px); line-height:1.55;
  color:var(--on-dark-soft); max-width:520px; text-wrap:pretty;
}
.hero__cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{
  margin-top:54px; display:flex; gap:40px; flex-wrap:wrap;
}
.hero__stat .n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:30px; color:var(--on-dark); }
.hero__stat .n .u{ color:var(--green); }
.hero__stat .l{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-top:4px; }

/* ============================================================
   Reveal helpers
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
}
/* Failsafe: if the page loads in a throttled/background context where CSS
   transitions never run, never trap content at opacity:0 */
html.reveal-all .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ============================================================
   Section heading block
   ============================================================ */
.head{ max-width:760px; }
.head.center{ margin-inline:auto; text-align:center; }
.head h2{
  font-size:clamp(30px,4.4vw,56px); margin-top:18px;
}
.head p{ margin-top:20px; font-size:18px; line-height:1.55; color:var(--ink-3); text-wrap:pretty; }
.dark .head p{ color:var(--on-dark-soft); }
.head.center .eyebrow{ justify-content:center; }

/* ============================================================
   SOLUCIONES
   ============================================================ */
.sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:60px; }
.sol-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark);
  padding:38px; min-height:480px; display:flex; flex-direction:column;
  cursor:pointer; isolation:isolate;
  transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
}
.sol-card:hover{ transform:translateY(-6px); border-color:rgba(34,216,126,.4); box-shadow:var(--shadow-lg); }
.sol-card__media{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  transition:opacity .6s, transform .8s var(--ease-out);
}
.sol-card:hover .sol-card__media{ opacity:.72; transform:scale(1.05); }
.sol-card__glow{ position:absolute; z-index:-1; width:340px;height:340px; right:-80px; top:-90px; border-radius:50%; background:radial-gradient(circle,rgba(34,216,126,.35),transparent 70%); filter:blur(40px); opacity:.7; }
.sol-card__top{ display:flex; align-items:center; justify-content:space-between; }
.sol-card__num{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--green); }
.sol-card__icon{ width:46px;height:46px;border-radius:13px; display:grid; place-items:center; background:rgba(201,244,221,.12); color:var(--green); border:1px solid rgba(34,216,126,.3); }
.sol-card__icon svg{ width:24px;height:24px; }
.sol-card h3{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; letter-spacing:-.02em; color:var(--on-dark); margin-top:auto; }
.sol-card .kicker{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-top:14px; }
.sol-card p{ color:var(--on-dark-soft); margin-top:16px; font-size:16px; max-width:90%; }
.sol-card__foot{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; }
.sol-card__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.sol-open{ display:inline-flex; align-items:center; gap:9px; color:var(--green); font-weight:700; font-size:14px; }
.sol-open svg{ width:16px;height:16px; transition:transform .35s var(--ease-out); }
.sol-card:hover .sol-open svg{ transform:translate(4px,-4px); }

/* Shared pulse keyframe (used by video play, sensor pins, live dots, cam LED…) */
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,216,126,.5);} 70%{ box-shadow:0 0 0 12px rgba(34,216,126,0);} 100%{ box-shadow:0 0 0 0 rgba(34,216,126,0);} }

/* ============================================================
   R&D
   ============================================================ */
.rnd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; margin-top:60px; }
.paper-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:34px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.paper-card__badge{ position:absolute; top:22px; right:22px; z-index:2; }
.paper-card__img{ display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:24px; background:var(--paper-2); }
.paper-card__img img{ width:100%; height:auto; display:block; transition:transform .5s var(--ease-out); }
.paper-card__img:hover img{ transform:scale(1.02); }
.paper-card .doc{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:24px; background:var(--paper-2);
}
.paper-card .doc-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
.paper-card .doc-head .d{ width:9px;height:9px;border-radius:50%;background:var(--line); }
.paper-card .doc-body{ padding:24px 22px; }
.paper-card .doc-body .ln{ height:9px; border-radius:5px; background:var(--line); margin-bottom:12px; }
.paper-card .doc-body .ln.t{ height:13px; width:80%; background:var(--ink-3); margin-bottom:18px; }
.paper-card .doc-body .ln.s{ width:60%; }
.paper-card .doc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
.rnd-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; }
.rnd-meta div .k{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.rnd-meta div .v{ font-weight:700; margin-top:4px; }
.rnd-list{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.rnd-list .it{ display:flex; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.rnd-list .it:last-child{ border-bottom:none; }
.rnd-list .it .y{ font-family:"JetBrains Mono",monospace; color:var(--green-2); font-size:13px; flex:0 0 54px; }

/* ============================================================
   VIDEO
   ============================================================ */
.video-box{
  position:relative; margin-top:54px; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line-dark); aspect-ratio:16/9; background:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-lg);
}
.video-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-ph{ position:absolute; inset:0; }
.video-play{
  position:relative; z-index:2; width:88px;height:88px;border-radius:50%;
  background:var(--green); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(34,216,126,.5); transition:transform .4s var(--ease-out);
}
.video-box:hover .video-play{ transform:scale(1.08); }
.video-play::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(34,216,126,.5); animation:pulse 2.4s infinite; }
.video-play svg{ width:30px;height:30px; margin-left:4px; }
.video-cap{ position:absolute; left:24px; bottom:22px; z-index:2; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); }

/* ============================================================
   TECNOLOGÍAS (marquee + grid)
   ============================================================ */
.tech-marquee{ overflow:hidden; margin-top:50px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tech-track{ display:flex; gap:14px; width:max-content; animation:scrollx 38s linear infinite; }
.tech-marquee:hover .tech-track{ animation-play-state:paused; }
@keyframes scrollx{ to{ transform:translateX(-50%);} }
.tech-pill{
  display:inline-flex; align-items:center; gap:11px; padding:14px 22px; border-radius:999px;
  border:1px solid var(--line); background:#fff; white-space:nowrap; font-weight:700; font-size:16px;
}
.dark .tech-pill{ border-color:var(--line-dark); background:var(--ink-2); color:var(--on-dark); }
.tech-pill .tg{ width:9px;height:9px;border-radius:3px;background:var(--green-2); }
.dark .tech-pill .tg{ background:var(--green); }

.tech-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.tech-cat{ border:1px solid var(--line); border-radius:var(--r-m); padding:24px; background:#fff; transition:transform .4s var(--ease-out), border-color .3s; }
.dark .tech-cat{ background:var(--ink-2); border-color:var(--line-dark); }
.tech-cat:hover{ transform:translateY(-4px); border-color:var(--green-2); }
.tech-cat .ic{ width:42px;height:42px;border-radius:11px; display:grid;place-items:center; background:var(--green-soft); color:var(--green-2); margin-bottom:16px; }
.dark .tech-cat .ic{ background:rgba(34,216,126,.12); color:var(--green); }
.tech-cat .ic svg{ width:22px;height:22px; }
.tech-cat h4{ font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:600; }
.tech-cat ul{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.tech-cat li{ font-size:14px; color:var(--ink-3); font-family:"JetBrains Mono",monospace; letter-spacing:.02em; }
.dark .tech-cat li{ color:var(--on-dark-soft); }

/* ============================================================
   NOSOTROS
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; margin:60px auto 0; max-width:820px; }
.team-card{
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:#fff;
  transition:transform .5s var(--ease-out), box-shadow .5s, border-color .4s;
}
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--green-2); }
.team-photo{ aspect-ratio:4/5; position:relative; overflow:hidden; }
.team-photo .ph{ position:absolute; inset:0; }
.team-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .5s var(--ease-out); }
.team-card:hover .team-photo .ph,
.team-card:hover .team-photo img{ transform:scale(1.04); }
.team-photo .role{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--green); padding:6px 11px; border-radius:999px;
}
.team-body{ padding:22px; }
.team-body h4{ font-family:"Space Grotesk",sans-serif; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.team-body .spec{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--green-2); margin-top:5px; letter-spacing:.05em; }
.team-body p{ font-size:14.5px; color:var(--ink-3); margin-top:14px; text-wrap:pretty; }
.team-social{ margin-top:18px; display:flex; gap:9px; }
.team-social a{ width:34px;height:34px;border-radius:9px; border:1px solid var(--line); display:grid;place-items:center; color:var(--ink-3); transition:.25s; }
.team-social a:hover{ background:var(--ink); color:var(--green); border-color:var(--ink); }
.team-social svg{ width:16px;height:16px; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; }
.cta__inner{
  position:relative; z-index:2; border-radius:var(--r-xl); overflow:hidden;
  background:var(--ink); color:var(--on-dark); padding:clamp(48px,7vw,96px);
  text-align:center; border:1px solid var(--line-dark);
}
.cta__inner h2{ font-size:clamp(34px,5.4vw,72px); }
.cta__inner p{ margin:24px auto 0; max-width:560px; font-size:18px; color:var(--on-dark-soft); }
.cta__cta{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; margin-top:60px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:8px; }
.contact-row{ display:flex; align-items:center; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-dark); }
.contact-row .ic{ width:46px;height:46px;border-radius:12px; display:grid;place-items:center; background:rgba(34,216,126,.1); color:var(--green); border:1px solid rgba(34,216,126,.22); flex:0 0 auto; }
.contact-row .ic svg{ width:20px;height:20px; }
.contact-row .k{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.contact-row .v{ font-size:18px; font-weight:700; margin-top:3px; color:var(--on-dark); }
.form{ background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--r-l); padding:34px; }
.field{ margin-bottom:18px; }
.field label{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); display:block; margin-bottom:9px; }
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:12px; background:rgba(13,31,38,.6);
  border:1px solid var(--line-dark); color:var(--on-dark); font-family:inherit; font-size:15px;
  transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--mute); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(34,216,126,.18); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--on-dark-soft); padding:64px 0 30px; border-top:1px solid var(--line-dark); }
.footer__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line-dark); }
.footer__brand img{ height:30px; margin-bottom:18px; }
.footer__brand p{ max-width:300px; font-size:14.5px; }
.footer__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer__col h5{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:16px; }
.footer__col a{ display:block; font-size:14.5px; margin-bottom:11px; color:var(--on-dark-soft); transition:color .2s; }
.footer__col a:hover{ color:var(--green); }
.footer__bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.05em; color:var(--mute); }

/* ============================================================
   PLACEHOLDERS (rayados marca)
   ============================================================ */
.ph{
  background-color:var(--ink-2);
  background-image:repeating-linear-gradient(135deg,rgba(34,216,126,.10) 0 2px,transparent 2px 13px);
  display:grid; place-items:center; transition:transform .8s var(--ease-out);
}
.ph.light{ background-color:var(--paper-2); background-image:repeating-linear-gradient(135deg,rgba(13,31,38,.07) 0 2px,transparent 2px 13px); }
.ph__label{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); border:1px dashed var(--line-dark); padding:8px 14px; border-radius:999px;
  background:rgba(13,31,38,.5); text-align:center; max-width:80%;
}
.ph.light .ph__label{ background:rgba(245,246,242,.7); border-color:var(--line); }

/* ============================================================
   SOLUTION VIEWS (overlay pages)
   ============================================================ */
.view{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out), visibility .5s;
}
.view.open{ opacity:1; visibility:visible; transform:none; }
.view__bar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,48px); background:rgba(13,31,38,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-dark);
}
.view__back{ display:inline-flex; align-items:center; gap:10px; color:var(--on-dark); font-weight:700; font-size:14px; }
.view__back svg{ width:18px;height:18px; transition:transform .3s var(--ease-out); }
.view__back:hover svg{ transform:translateX(-4px); }
.view__title{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); }

/* solution hero */
.sol-hero{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; padding:clamp(70px,10vw,120px) 0 clamp(60px,8vw,100px); }
.sol-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.sol-hero h1{ font-size:clamp(38px,6vw,84px); margin-top:20px; }
.sol-hero h1 .accent{ color:var(--green); }
.sol-hero__lead{ margin-top:24px; font-size:19px; color:var(--on-dark-soft); max-width:520px; line-height:1.55; }
.sol-hero__stats{ margin-top:40px; display:grid; grid-template-columns:repeat(3,auto); gap:34px; }
.sol-hero__stats .n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; color:var(--green); }
.sol-hero__stats .l{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:6px; max-width:140px; }

/* scroll stage (camera / trailer) */
.stage{ position:relative; height:115vh; }
.stage__sticky{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; }
.stage__obj{ width:min(560px,72vw); aspect-ratio:1; position:relative; will-change:transform; }
.stage__ring{ position:absolute; inset:-6% ; border:1px solid var(--line-dark); border-radius:50%; }
.stage__cap{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); z-index:5; text-align:center; }

/* feature rows */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-top:40px; }
.feature-row.rev{ direction:rtl; } .feature-row.rev > *{ direction:ltr; }
.feature-media{ border-radius:var(--r-l); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.dark .feature-media{ border-color:var(--line-dark); }
.feature-list{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.feature-list .it{ display:flex; gap:14px; }
.feature-list .it .ic{ flex:0 0 auto; width:38px;height:38px;border-radius:11px; display:grid;place-items:center; background:var(--green-soft); color:var(--green-2); }
.dark .feature-list .it .ic{ background:rgba(34,216,126,.12); color:var(--green); }
.feature-list .it .ic svg{ width:19px;height:19px; }
.feature-list .it h4{ font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:600; }
.feature-list .it p{ font-size:15px; color:var(--ink-3); margin-top:4px; }
.dark .feature-list .it p{ color:var(--on-dark-soft); }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:54px; }
.step{ position:relative; padding:28px; border:1px solid var(--line); border-radius:var(--r-m); background:#fff; }
.dark .step{ background:var(--ink-2); border-color:var(--line-dark); }
.step .num{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:42px; color:var(--green-2); opacity:.25; }
.dark .step .num{ color:var(--green); }
.step h4{ font-family:"Space Grotesk",sans-serif; font-size:19px; font-weight:600; margin-top:8px; }
.step p{ font-size:14.5px; color:var(--ink-3); margin-top:10px; }
.dark .step p{ color:var(--on-dark-soft); }

/* sensor pins on trailer */
.tr-pin{ position:absolute; width:14px;height:14px;border-radius:50%; background:var(--green); transform:translate(-50%,-50%); box-shadow:0 0 0 0 rgba(34,216,126,.6); animation:pulse 2.2s infinite; z-index:3; }
.tr-pin::after{ content:""; position:absolute; inset:-7px; border:1px solid var(--green); border-radius:50%; opacity:.5; }

/* ============================================================
   HEATMAP (EventMotion)
   ============================================================ */
.hm-wrap{ display:grid; grid-template-columns:1fr 300px; gap:26px; margin-top:40px; align-items:start; }
.hm-stage{ border-radius:var(--r-l); border:1px solid var(--line-dark); background:var(--ink); overflow:hidden; position:relative; box-shadow:var(--shadow-lg); }
.hm-stage__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-dark); }
.hm-stage__head .t{ display:flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); }
.hm-live{ display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--green); }
.hm-live .d{ width:7px;height:7px;border-radius:50%;background:var(--green); animation:pulse 1.8s infinite; }
#hm-canvas{ display:block; width:100%; height:auto; cursor:crosshair; }
.hm-tooltip{
  position:absolute; z-index:6; pointer-events:none; opacity:0; transform:translateY(6px);
  background:rgba(13,31,38,.95); border:1px solid var(--green-2); border-radius:12px; padding:12px 14px;
  font-size:13px; color:var(--on-dark); transition:opacity .2s, transform .2s; min-width:150px;
  box-shadow:var(--shadow-lg);
}
.hm-tooltip.show{ opacity:1; transform:none; }
.hm-tooltip .zt{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:15px; }
.hm-tooltip .zr{ display:flex; justify-content:space-between; gap:18px; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:11.5px; }
.hm-tooltip .zr .mu{ color:var(--mute); }
.hm-tooltip .zr .vg{ color:var(--green); }

.hm-panel{ background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--r-l); padding:24px; }
.hm-panel h4{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; }
.hm-panel + .hm-panel{ margin-top:18px; }
.seg{ display:flex; background:rgba(13,31,38,.6); border:1px solid var(--line-dark); border-radius:11px; padding:4px; gap:4px; }
.seg button{ flex:1; padding:9px 6px; border-radius:8px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--on-dark-soft); transition:.2s; }
.seg button.active{ background:var(--green); color:var(--ink); font-weight:600; }
.hm-days{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hm-days button{ padding:10px 4px; border-radius:9px; border:1px solid var(--line-dark); background:rgba(13,31,38,.5); color:var(--on-dark-soft); font-family:"JetBrains Mono",monospace; font-size:11px; transition:.2s; }
.hm-days button.active{ background:var(--green-soft); color:var(--ink); border-color:var(--green); font-weight:600; }
.hm-slider-val{ display:flex; justify-content:space-between; font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--on-dark); margin-bottom:10px; }
.hm-slider-val .hr{ color:var(--green); font-weight:600; font-size:20px; font-family:"Space Grotesk",sans-serif; }
input[type=range].hm-range{ -webkit-appearance:none; width:100%; height:5px; border-radius:5px; background:linear-gradient(90deg,var(--green) 0%,var(--ink-3) 0%); outline:none; }
input[type=range].hm-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px;height:18px;border-radius:50%; background:var(--green); cursor:pointer; box-shadow:0 0 0 4px rgba(34,216,126,.2); border:2px solid var(--ink); }
input[type=range].hm-range::-moz-range-thumb{ width:18px;height:18px;border-radius:50%; background:var(--green); cursor:pointer; border:2px solid var(--ink); }
.hm-legend{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.hm-legend .bar{ flex:1; height:8px; border-radius:5px; background:linear-gradient(90deg,#1b3a33,var(--green),var(--warn),var(--danger)); }
.hm-legend span{ font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--mute); }
.hm-toggle{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; }
.hm-toggle .lbl{ font-size:14px; color:var(--on-dark); }
.sw{ width:42px;height:24px;border-radius:999px;background:var(--ink-3); position:relative; transition:.25s; flex:0 0 auto; }
.sw.on{ background:var(--green-2); }
.sw::after{ content:""; position:absolute; top:3px; left:3px; width:18px;height:18px;border-radius:50%;background:#fff; transition:.25s; }
.sw.on::after{ transform:translateX(18px); }
.hm-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:40px; }
.hm-stat{ border:1px solid var(--line-dark); border-radius:var(--r-m); padding:22px; background:var(--ink-2); }
.hm-stat .n{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:34px; color:var(--green); }
.hm-stat .l{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:6px; }

/* ---------- Heatmap restyle: white floor, blue/violet scale ---------- */
.hm-stage{ background:#fff; border-color:rgba(99,102,241,.20); }
.hm-stage__head{ border-bottom-color:rgba(40,30,90,.10); }
.hm-stage__head .t{ color:#1e1b4b; }
.hm-live{ color:var(--hm-accent); }
.hm-live .d{ background:var(--hm-accent); animation:pulseV 1.8s infinite; }
@keyframes pulseV{ 0%{ box-shadow:0 0 0 0 rgba(109,40,217,.5);} 70%{ box-shadow:0 0 0 9px rgba(109,40,217,0);} 100%{ box-shadow:0 0 0 0 rgba(109,40,217,0);} }
.hm-tooltip{ background:#fff; border-color:rgba(99,102,241,.45); color:#1e1b4b; box-shadow:0 24px 60px -22px rgba(40,30,90,.45); }
.hm-tooltip .zt{ color:#2e1065; }
.hm-tooltip .zr .mu{ color:#6b7280; }
.hm-tooltip .zr .vg{ color:var(--hm-accent); }
.hm-legend .bar{ background:linear-gradient(90deg,#EAEFFF,#8B96FF,#7C3AED,#B01E96); }
.hm-note p{ font-size:13px; line-height:1.55; color:var(--on-dark-soft); }
.hm-note b{ color:var(--green); font-weight:700; }

/* ============================================================
   EventMotion VISION PIPELINE — capture → analyze → store
   ============================================================ */
.vp{ display:grid; grid-template-columns:1.1fr auto 1fr auto .92fr; gap:clamp(10px,1.6vw,22px); align-items:center; }
.vp-stage{ position:relative; min-width:0; }
.vp-tag{ display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin-bottom:12px; }
.vp-tag .d{ width:7px; height:7px; border-radius:50%; background:var(--green-2); }

/* sticky scroll stage: scrubs the first pass, then auto-loops */
.vp-head{ padding-top:clamp(72px,10vw,140px); }
.vp-scroll{ position:relative; height:320vh; }
.vp-sticky{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:88px clamp(20px,5vw,48px) 44px; }
.vp-sticky .vp{ width:100%; max-width:1080px; }
.vp-hint{ display:flex; align-items:center; gap:12px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); transition:opacity .5s; }
.vp-hint .bar{ width:46px; height:1px; background:linear-gradient(90deg,transparent,var(--green-2)); position:relative; overflow:hidden; }
.vp-hint .bar::after{ content:""; position:absolute; inset:0; width:40%; background:var(--green-2); animation:vpsweep 2.4s var(--ease) infinite; }
@keyframes vpsweep{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

/* camera scene */
.vp-cam__view{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid var(--line-dark); background:radial-gradient(ellipse 80% 70% at 50% 28%, #173640, #0a171d 82%); box-shadow:var(--shadow-lg); }
.vp-cam__scene{ position:absolute; inset:0; }
.vp-cam__scene::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(234,241,238,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(234,241,238,.04) 1px,transparent 1px); background-size:30px 30px; opacity:.5; }
/* field of view + anonymous presences — cone exits the lens (~33% x) */
.vp-fov{ position:absolute; left:33%; top:42%; width:58%; height:54%; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(34,216,126,.22), rgba(34,216,126,.02));
  clip-path:polygon(45% 0, 55% 0, 100% 100%, 0% 100%); }
.vp-zone{ position:absolute; left:33%; bottom:20%; transform:translateX(-50%); font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; color:var(--green); background:rgba(13,31,38,.6); border:1px solid rgba(34,216,126,.3); border-radius:999px; padding:3px 10px; }
.vp-pp{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 14px rgba(34,216,126,.9); opacity:0; transition:opacity .45s; }
.vp-pp::after{ content:""; position:absolute; inset:-6px; border:1px solid rgba(201,244,221,.5); border-radius:50%; }
.vp-pp--1{ left:27%; bottom:30%; animation:vppp1 4.2s ease-in-out infinite; }
.vp-pp--2{ left:39%; bottom:42%; animation:vppp2 5.4s ease-in-out infinite; }
/* each presence appears in sync with its event (e1 -> dot 1, e2 -> dot 2) */
.vp.ph-e1 .vp-pp--1, .vp.ph-e2 .vp-pp--1, .vp.ph-send .vp-pp--1, .vp.ph-saved .vp-pp--1{ opacity:1; }
.vp.ph-e2 .vp-pp--2, .vp.ph-send .vp-pp--2, .vp.ph-saved .vp-pp--2{ opacity:1; }
@keyframes vppp1{ 0%,100%{ transform:translate(-7px,2px); } 50%{ transform:translate(9px,-4px); } }
@keyframes vppp2{ 0%,100%{ transform:translate(6px,0); } 50%{ transform:translate(-8px,4px); } }
.vp-cam__scan{ position:absolute; left:0; right:0; height:2px; top:12%; pointer-events:none; }
.vp-cam__scan--a{ background:linear-gradient(90deg,transparent,rgba(34,216,126,.7),transparent); box-shadow:0 0 12px rgba(34,216,126,.55); animation:vpscanA 3.2s ease-in-out infinite; }
.vp-cam__scan--b{ background:linear-gradient(90deg,transparent,rgba(91,168,229,.55),transparent); animation:vpscanB 3.2s ease-in-out infinite; }
@keyframes vpscanA{ 0%{ top:12%; } 50%{ top:86%; } 100%{ top:12%; } }
@keyframes vpscanB{ 0%{ top:86%; } 50%{ top:12%; } 100%{ top:86%; } }
.vp-cam__rec{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; color:#fff; background:rgba(13,31,38,.55); padding:4px 9px; border-radius:999px; z-index:3; }
.vp-cam__rec .d{ width:7px; height:7px; border-radius:50%; background:var(--danger); animation:recblink 1.2s infinite; }
@keyframes recblink{ 50%{ opacity:.25; } }
.vp-cam__status{ position:absolute; left:12px; bottom:12px; z-index:3; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); background:rgba(13,31,38,.62); padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px); }
.vp-cam__status .s{ display:none; }
.vp.ph-scan .s-scan{ display:inline; }
.vp.ph-e1 .s-detect, .vp.ph-e2 .s-detect{ display:inline; }
.vp.ph-send .s-store, .vp.ph-saved .s-store{ display:inline; }

/* CSS security camera (bullet + wall mount) */
.cctv{ position:absolute; top:12%; left:50%; transform:translateX(-50%) rotate(-7deg); width:min(62%,196px); aspect-ratio:196/124; filter:drop-shadow(0 14px 16px rgba(0,0,0,.45)); }
.cctv__plate{ position:absolute; right:0; top:40%; width:12%; height:40%; border-radius:50%; background:radial-gradient(circle at 38% 36%, #e4e9ef, #95a1af); box-shadow:inset 0 -3px 6px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.25); }
.cctv__arm{ position:absolute; right:7%; top:46%; width:34%; height:9%; border-radius:8px; background:linear-gradient(180deg,#dbe1ea,#9ca7b4); transform-origin:right center; transform:rotate(21deg); box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.cctv__body{ position:absolute; left:0; top:16%; width:78%; height:48%; border-radius:13px; background:linear-gradient(168deg,#f5f7fa 0%,#d6dde6 52%,#bcc5d0 100%); box-shadow:inset 0 2px 2px rgba(255,255,255,.7), inset 0 -6px 11px rgba(0,0,0,.14), 0 6px 14px -6px rgba(0,0,0,.5); }
.cctv__body::after{ content:""; position:absolute; right:12%; top:62%; width:22%; height:9%; border-radius:4px; background:rgba(0,0,0,.06); }
.cctv__hood{ position:absolute; left:-7%; top:-30%; width:108%; height:54%; border-radius:13px 13px 7px 7px; background:linear-gradient(165deg,#4a586e,#283240); transform:skewX(-9deg); box-shadow:0 5px 10px -4px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,255,255,.12); }
.cctv__lens{ position:absolute; left:3%; top:50%; transform:translateY(-50%); width:44%; aspect-ratio:1; border-radius:50%; padding:3px; background:conic-gradient(#d3dae3,#a7b1bd,#cfd6df,#959fad,#d3dae3); box-shadow:0 0 0 2px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.45); }
.cctv__lens::before{ content:""; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 40% 34%, #41526b 0%, #16202c 45%, #04070c 78%); box-shadow:inset 0 0 10px #000; }
.cctv__lens::after{ content:""; position:absolute; inset:30%; border-radius:50%; background:radial-gradient(circle at 42% 38%, #1d3d56, #060b13); }
.cctv__glint{ position:absolute; z-index:2; top:22%; left:24%; width:28%; height:28%; border-radius:50%; background:radial-gradient(circle, rgba(190,222,255,.95), rgba(190,222,255,0) 70%); }
.cctv__led{ position:absolute; z-index:2; right:13%; top:24%; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.8s infinite; }

/* flow connectors (data moving between stages) */
.vp-flow{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; }
.vp-flow::before{ content:""; position:absolute; left:4%; right:4%; top:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(34,216,126,.35),transparent); }
.vp-flow i{ position:relative; width:9px; height:9px; border-radius:50%; background:rgba(34,216,126,.55); box-shadow:0 0 6px rgba(34,216,126,.45); animation:vpflow 1.3s ease-in-out infinite; }
.vp-flow i:nth-child(2){ animation-delay:.16s; }
.vp-flow i:nth-child(3){ animation-delay:.32s; }
@keyframes vpflow{ 0%,100%{ opacity:.4; transform:scale(.82); } 50%{ opacity:1; transform:scale(1.28); box-shadow:0 0 11px rgba(34,216,126,.75); } }
.vp.ph-e1 .vp-flow--1 i, .vp.ph-e2 .vp-flow--1 i{ background:var(--green); box-shadow:0 0 12px var(--green); }
.vp.ph-send .vp-flow--2 i, .vp.ph-saved .vp-flow--2 i{ background:var(--green); box-shadow:0 0 12px var(--green); }

/* events */
.vp-events__card{ background:var(--ink); color:var(--on-dark); border:1px solid var(--line-dark); border-radius:16px; padding:18px; box-shadow:var(--shadow-lg); }
.vp-events__head{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-soft); margin-bottom:14px; }
.vp-events__head b{ font-family:"Space Grotesk",sans-serif; font-size:22px; color:var(--green); margin-right:5px; }
.vp-events__list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.vp-ev{ display:flex; gap:11px; align-items:center; padding:11px 13px; border-radius:11px; background:rgba(34,216,126,.06); border:1px solid var(--line-dark); opacity:0; transform:translateX(12px); }
.vp.ph-e1 .vp-ev[data-ev="1"], .vp.ph-e2 .vp-ev, .vp.ph-send .vp-ev, .vp.ph-saved .vp-ev{ opacity:1; transform:none; transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.vp-ev__ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:rgba(34,216,126,.14); color:var(--green); flex:0 0 auto; }
.vp-ev__ic svg{ width:18px; height:18px; }
.vp-ev__t{ display:block; font-size:13.5px; color:var(--on-dark); }
.vp-ev__t b{ color:var(--green); }
.vp-ev__m{ display:block; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mute); margin-top:3px; }
.vp-ev__m b{ color:var(--on-dark-soft); }

/* database */
.vp-db{ text-align:center; }
.vp-db__cyl{ position:relative; width:90px; height:104px; margin:2px auto 16px;
  background:linear-gradient(180deg, #173640, #0e2329);
  border-radius:45px/16px; border:1px solid var(--line-dark);
  box-shadow:inset 0 0 26px rgba(0,0,0,.45); transition:filter .4s; }
.vp-db__cyl::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:30px; border-radius:50%; background:#1f4654; border:1px solid rgba(34,216,126,.35); }
.vp-db__cyl::after{ content:""; position:absolute; left:9px; right:9px; top:46%; height:1px; background:rgba(234,241,238,.12); box-shadow:0 18px 0 rgba(234,241,238,.10); }
.vp.ph-saved .vp-db__cyl{ filter:drop-shadow(0 0 16px rgba(34,216,126,.5)); animation:vpbounce .6s var(--ease-out); }
@keyframes vpbounce{ 0%{ transform:scale(1); } 30%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.vp-db__saved{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%) scale(.8); z-index:2; display:inline-flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.04em; color:var(--green); background:rgba(13,31,38,.78); border:1px solid rgba(34,216,126,.4); border-radius:999px; padding:5px 10px; opacity:0; transition:opacity .3s, transform .3s; white-space:nowrap; }
.vp-db__saved svg{ width:13px; height:13px; }
.vp.ph-saved .vp-db__saved{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.vp-db__metric{ display:block; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-3); }
.vp-db__metric b{ font-family:"Space Grotesk",sans-serif; font-size:20px; color:var(--green-2); margin-right:4px; }
.vp-db__rows{ list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.vp-row{ display:flex; justify-content:space-between; gap:10px; font-family:"JetBrains Mono",monospace; font-size:11px; padding:7px 11px; border-radius:8px; background:#fff; border:1px solid var(--line); animation:vprow .4s var(--ease-out); }
.vp-row__z{ color:var(--ink-3); }
.vp-row__m{ color:var(--green-2); font-weight:600; }
@keyframes vprow{ 0%{ opacity:0; transform:translateY(-6px); } 100%{ opacity:1; transform:none; } }

/* EventMotion hero: live expo-floor simulation */
.expo-hero{ display:grid; place-items:center; min-height:380px; }
.expo-sim{ position:relative; width:min(470px,84vw); aspect-ratio:4/3; }
#expo-canvas{ display:block; width:100%; height:100%; }
.expo-sim__tag{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green);
  background:rgba(13,31,38,.55); border:1px solid rgba(34,216,126,.25); border-radius:999px; padding:6px 11px; backdrop-filter:blur(6px); }
.expo-sim__tag .d{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite; }

/* ============================================================
   TransIA hero — neural backdrop + interactive trailer
   ============================================================ */
.tr-hero{ overflow:hidden; }
.nn-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 65% 45%, #000 25%, transparent 85%);
          mask-image:radial-gradient(ellipse 85% 80% at 65% 45%, #000 25%, transparent 85%); }
.tr-hero__visual{ position:relative; display:grid; place-items:center; min-height:380px; }
.trk-shell{ position:relative; will-change:transform; }
.trk-scan{ position:absolute; inset:0; border-radius:18px; overflow:hidden; pointer-events:none; z-index:2; }
.trk-scan::before{ content:""; position:absolute; top:0; left:-35%; width:35%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(34,216,126,.20), transparent); animation:trkscan 3.4s var(--ease) infinite; }
@keyframes trkscan{ 0%{ left:-35%;} 100%{ left:100%;} }

/* ============================================================
   VIDEO FACADE (EventMotion demo)
   ============================================================ */
.vfacade-box{ background:#08130f; }
.vfacade{ position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,4vh,32px); padding:18px 18px 46px;
  background:radial-gradient(ellipse 75% 80% at 50% 50%, #11262d, #07120e 82%); }
.vfacade__grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(34,216,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,216,126,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 80%); }
.vfacade__rays{ position:absolute; inset:0; overflow:hidden; }
.vfacade__rays::before, .vfacade__rays::after{ content:""; position:absolute; height:1px; width:42%; left:-42%;
  background:linear-gradient(90deg,transparent,rgba(34,216,126,.6),transparent); filter:blur(.3px); }
.vfacade__rays::before{ top:34%; animation:streak 4.4s linear infinite; }
.vfacade__rays::after{ top:64%; width:34%; left:-34%; animation:streak 6s linear infinite 1.3s; }
@keyframes streak{ 0%{ transform:translateX(0);} 100%{ transform:translateX(360%);} }
.vfacade__brand{ position:relative; z-index:3; display:flex; align-items:center; gap:clamp(16px,3vw,28px); padding:0 24px; }
.vfacade__brand::before{ content:""; position:absolute; left:8%; top:50%; width:160px; height:160px; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(34,216,126,.32), transparent 70%); filter:blur(20px); z-index:-1; animation:vglow 5s ease-in-out infinite; }
.vfacade__logo{ width:clamp(52px,8vw,92px); height:auto; filter:drop-shadow(0 0 22px rgba(34,216,126,.55)); animation:vlogo 4.5s ease-in-out infinite; }
.vfacade__div{ width:1px; height:clamp(40px,7vw,76px); background:linear-gradient(transparent,rgba(34,216,126,.65),transparent); }
.vfacade__name{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(28px,5.4vw,58px); letter-spacing:-.02em; color:var(--on-dark); }
@keyframes vlogo{ 0%,100%{ transform:translateY(-4px) scale(1);} 50%{ transform:translateY(4px) scale(1.04);} }
@keyframes vglow{ 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
.vfacade-box .video-cap{ color:var(--on-dark-soft); }
.vfacade-box .video-play{ position:relative; z-index:3; width:74px; height:74px; }
.vfacade-box:hover .video-play{ transform:scale(1.08); }

/* ============================================================
   TRANSIA DASHBOARD (live, animated)
   ============================================================ */
.dash{ display:grid; grid-template-columns:248px 1fr; border-radius:22px; overflow:hidden; margin-top:48px;
  background:#0a151a; border:1px solid var(--line-dark); box-shadow:var(--shadow-lg); }
.dash__side{ background:#0c1920; border-right:1px solid var(--line-dark); padding:20px 14px; display:flex; flex-direction:column; gap:16px; }
.dash__brand{ display:flex; align-items:center; gap:11px; padding:4px 6px; }
.dash__brand img{ width:30px; height:30px; }
.dash__brandtxt{ display:flex; flex-direction:column; line-height:1; }
.dash__brandname{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:17px; color:var(--on-dark); }
.dash__brandsub{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.22em; color:var(--green); margin-top:4px; }
.dash__search{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; background:rgba(13,31,38,.6); border:1px solid var(--line-dark); color:var(--mute); font-size:13px; }
.dash__search svg{ width:15px; height:15px; }
.dash__search kbd{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px; border:1px solid var(--line-dark); border-radius:5px; padding:2px 5px; }
.dash__nav{ display:flex; flex-direction:column; gap:3px; }
.dash__navlabel{ font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin:12px 8px 5px; }
.dash__item{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:10px; color:var(--on-dark-soft); font-size:14px; font-weight:600; cursor:pointer; transition:background .2s,color .2s; }
.dash__item svg{ width:17px; height:17px; flex:0 0 auto; opacity:.8; }
.dash__item:hover{ background:rgba(234,241,238,.04); color:var(--on-dark); }
.dash__item.active{ background:rgba(34,216,126,.13); color:var(--green); }
.dash__item.active svg{ opacity:1; }
.dash__badge{ margin-left:auto; background:var(--danger); color:#fff; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; }
.dash__user{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px 8px 2px; border-top:1px solid var(--line-dark); }
.dash__avatar{ width:34px; height:34px; border-radius:10px; background:rgba(34,216,126,.15); color:var(--green); display:grid; place-items:center; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; flex:0 0 auto; }
.dash__user div{ display:flex; flex-direction:column; line-height:1.25; }
.dash__uname{ font-size:13px; font-weight:700; color:var(--on-dark); }
.dash__urole{ font-size:11px; color:var(--mute); }

.dash__main{ padding:22px 24px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.dash__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dash__crumb{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.dash__title{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,28px); color:var(--on-dark); margin-top:6px; }
.dash__title span{ color:var(--mute); font-weight:500; font-size:.62em; }
.dash__livebadge{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--green); border:1px solid rgba(34,216,126,.3); border-radius:999px; padding:6px 12px; }
.dash__livebadge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite; }

.dash__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.kpi{ position:relative; background:rgba(13,31,38,.55); border:1px solid var(--line-dark); border-radius:14px; padding:14px 15px; overflow:hidden; }
.kpi__l{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.kpi__row{ display:flex; align-items:baseline; gap:5px; margin-top:9px; }
.kpi__v{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:30px; color:var(--on-dark); line-height:1; }
.kpi__u{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--mute); }
.kpi__trend{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; }
.kpi__trend.up{ color:var(--danger); }
.kpi--warn .kpi__v{ color:var(--warn); }
.kpi__spark{ display:block; width:100%; height:30px; margin-top:10px; }

.dash__grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:13px; }
.dcard{ background:rgba(13,31,38,.55); border:1px solid var(--line-dark); border-radius:14px; padding:16px 18px; min-width:0; }
.dcard h4{ font-family:"Space Grotesk",sans-serif; font-size:14px; font-weight:600; color:var(--on-dark); }
.dcard__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.dcard__legend{ display:flex; gap:12px; flex-wrap:wrap; }
.lg{ font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--on-dark-soft); display:inline-flex; align-items:center; gap:6px; }
.lg::before{ content:""; width:10px; height:3px; border-radius:2px; }
.lg--vib::before{ background:#22D87E; } .lg--temp::before{ background:#F2B53F; } .lg--press::before{ background:#5BA8E5; }
#dash-telemetry{ display:block; width:100%; height:190px; }
.dcard--gauge{ display:flex; flex-direction:column; align-items:center; }
.dcard--gauge h4{ align-self:flex-start; }
#dash-gauge{ display:block; width:100%; height:184px; }
.dcard__gaugecomp{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mute); }
.riskbars{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:8px; }
.riskbars li{ display:grid; grid-template-columns:92px 1fr 40px; align-items:center; gap:10px; }
.rb__l{ font-size:12.5px; color:var(--on-dark-soft); }
.rb__bar{ height:8px; border-radius:5px; background:rgba(234,241,238,.08); overflow:hidden; position:relative; }
.rb__bar i{ display:block; height:100%; width:0; border-radius:5px; background:var(--green); transition:width 1s var(--ease-out); position:relative; overflow:hidden; }
.rb__bar i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:shimmer 2.4s linear infinite; }
.rb__v{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--on-dark); text-align:right; }
@keyframes shimmer{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.dalerts{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.da{ display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:10px; background:rgba(13,31,38,.5); border:1px solid var(--line-dark); }
.da__dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:0 0 auto; }
.da--high .da__dot{ background:var(--danger); box-shadow:0 0 10px rgba(229,91,91,.8); }
.da--mid .da__dot{ background:var(--warn); }
.da--low .da__dot{ background:var(--green); }
.da__t{ display:block; font-size:13px; font-weight:600; color:var(--on-dark); }
.da__m{ display:block; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--mute); margin-top:3px; }
.da__m b{ color:var(--on-dark-soft); font-weight:600; }

.dash-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px; }
.dash-feats .it{ display:flex; gap:14px; }
.dash-feats .it .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(34,216,126,.12); color:var(--green); }
.dash-feats .it .ic svg{ width:20px; height:20px; }
.dash-feats .it h4{ font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:600; color:var(--on-dark); }
.dash-feats .it p{ font-size:14.5px; color:var(--on-dark-soft); margin-top:5px; }

/* ============================================================
   TELEMETRY + AI ANALYSIS BAND (TransIA)
   NOTE: no overflow on the section — it would break the sticky stage.
   ============================================================ */
.tlm-stage{ height:320vh; }
.tlm-sticky{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(12px,2.2vh,26px); padding:clamp(78px,11vh,108px) clamp(16px,5vw,48px) clamp(28px,5vh,56px); }
.tlm-head{ text-align:center; position:relative; z-index:2; }
.tlm-head h2{ font-size:clamp(24px,3.6vw,44px); margin-top:10px; }
.tlm-live{ display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-2); }
.tlm-live .d{ width:8px; height:8px; border-radius:50%; background:var(--green-2); animation:pulse 1.8s infinite; }

.tlm-scene{ position:relative; z-index:2; width:min(1040px,94vw); transition:filter .5s, opacity .5s; }
.tlm-playhead{ position:absolute; top:4%; bottom:6%; left:0; width:1px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(34,216,126,0), rgba(34,216,126,.5)); }
.tlm-road{ position:relative; height:clamp(118px,17vh,176px); }
.tlm-road__lane{ position:absolute; left:0; right:0; bottom:8px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(13,31,38,.22) 0 16px, transparent 16px 34px); }
#trailer-scroll{ position:absolute; left:0; bottom:12px; width:min(320px,46%); will-change:transform; }

.tlm-chart{ position:relative; }
.tlm-chart__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.tlm-min{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3); }
.tlm-min b{ color:var(--green-2); }
.tlm-legend{ display:flex; gap:14px; flex-wrap:wrap; }
.tlm-legend .lg{ color:var(--ink-3); }
.tlm-legend .lg.t-temp::before{ background:#F2B53F; }
.tlm-legend .lg.t-torque::before{ background:#22D87E; }
.tlm-legend .lg.t-vib::before{ background:#5BA8E5; }
.tlm-legend .lg.t-press::before{ background:#7C3AED; }
.tlm-chart__plot{ position:relative; height:clamp(150px,23vh,212px); background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
#trailer-chart{ display:block; width:100%; height:100%; }
.tlm-chart__scan{ position:absolute; top:0; bottom:0; width:38%; left:-38%; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(34,216,126,.16), transparent); }
.tlm-sticky.is-analyzing .tlm-chart__scan{ opacity:1; animation:tlmscan 1.3s var(--ease) 1; }
@keyframes tlmscan{ 0%{ left:-38%; } 100%{ left:100%; } }
.tlm-readouts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.ro{ background:#fff; border:1px solid var(--line); border-left-width:3px; border-radius:11px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.ro.t-temp{ border-left-color:#F2B53F; } .ro.t-torque{ border-left-color:#22D87E; }
.ro.t-vib{ border-left-color:#5BA8E5; } .ro.t-press{ border-left-color:#7C3AED; }
.ro__l{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.ro__v{ font-family:"Space Grotesk",sans-serif; font-size:13px; color:var(--ink-3); }
.ro__v b{ font-size:21px; font-weight:700; color:var(--ink); }

/* analyzing overlay */
.tlm-analyzing{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; z-index:6; opacity:0; visibility:hidden; transition:opacity .35s; pointer-events:none; }
.tlm-sticky.is-analyzing .tlm-analyzing{ opacity:1; visibility:visible; }
.tlm-sticky.is-analyzing .tlm-scene{ filter:blur(2px); opacity:.5; }
.tlm-analyzing__t{ font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); }
.tlm-spin{ width:38px; height:38px; border-radius:50%; border:2px solid rgba(21,180,104,.22); border-top-color:var(--green-2); animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* AI summary */
.tlm-summary{ position:absolute; inset:0; display:grid; place-items:center; z-index:7; opacity:0; visibility:hidden; transition:opacity .5s; pointer-events:none; padding:0 16px; }
.tlm-sticky.is-analyzed .tlm-summary{ opacity:1; visibility:visible; }
.tlm-sticky.is-analyzed .tlm-scene{ filter:blur(3px); opacity:.3; }
.tlm-summary__card{ width:min(560px,94vw); background:rgba(10,21,26,.95); backdrop-filter:blur(10px); border:1px solid rgba(34,216,126,.32); border-radius:20px; padding:24px 26px; color:var(--on-dark); transform:translateY(18px) scale(.985); transition:transform .55s var(--ease-out); box-shadow:var(--shadow-lg); }
.tlm-sticky.is-analyzed .tlm-summary__card{ transform:none; }
.tlm-summary__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tlm-ai{ display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.tlm-ai svg{ width:16px; height:16px; }
.tlm-status{ display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.tlm-status.ok{ color:var(--green); border:1px solid rgba(34,216,126,.35); background:rgba(34,216,126,.08); }
.tlm-status .d{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.8s infinite; }
.tlm-summary__title{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:20px; margin-top:14px; color:var(--on-dark); }
.tlm-summary__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:18px; }
.tlm-summary__metrics div{ background:rgba(13,31,38,.5); border:1px solid var(--line-dark); border-radius:12px; padding:12px 13px; }
.tlm-summary__metrics b{ display:block; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:24px; color:var(--on-dark); line-height:1; }
.tlm-summary__metrics b.ok{ color:var(--green); }
.tlm-summary__metrics span{ display:block; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); margin-top:7px; }
.tlm-summary__alerts{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.tlm-al{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(13,31,38,.5); border:1px solid var(--line-dark); font-size:13px; color:var(--on-dark); opacity:0; transform:translateY(8px); }
.tlm-sticky.is-analyzed .tlm-al{ opacity:1; transform:none; transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.tlm-sticky.is-analyzed .tlm-al:nth-child(1){ transition-delay:.15s; }
.tlm-sticky.is-analyzed .tlm-al:nth-child(2){ transition-delay:.28s; }
.tlm-sticky.is-analyzed .tlm-al:nth-child(3){ transition-delay:.41s; }
.tlm-al .d{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.tlm-al.warn .d{ background:var(--warn); box-shadow:0 0 8px rgba(242,181,63,.7); }
.tlm-al.info .d{ background:var(--info); }
.tlm-verdict{ margin-top:16px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.05em; color:var(--green); text-align:center; border-top:1px solid var(--line-dark); padding-top:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero{ align-items:flex-start; }            /* copy at top; particle 'A' sits below it */
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ display:none; }
  .sol-grid, .rnd-grid, .tech-cats, .team-grid, .contact-grid, .sol-hero__grid, .feature-row, .steps{ grid-template-columns:1fr; }
  .feature-row.rev{ direction:ltr; }
  .tech-cats{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .hm-wrap{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  /* vision pipeline stacks AND compacts (tablets included) so it fits one screen */
  .vp{ grid-template-columns:1fr; gap:10px; }
  .vp-sticky .vp{ max-width:440px; margin-inline:auto; }   /* override the desktop 1080 width */
  .vp-flow{ transform:rotate(90deg); margin:2px 0; }
  .vp-scroll{ height:300vh; }
  .vp-sticky{ min-height:100vh; justify-content:center; padding:64px 18px 22px; gap:10px; }
  .vp-hint{ display:none; }
  .vp-tag{ margin-bottom:7px; }
  .vp-cam__view{ aspect-ratio:16/9; }
  .vp-events__card{ padding:13px 14px; }
  .vp-events__head{ margin-bottom:9px; }
  .vp-events__list{ gap:9px; }
  .vp-ev{ padding:9px 11px; }
  .vp-ev__ic{ width:30px; height:30px; }
  .vp-db__cyl{ width:80px; height:90px; margin:0 auto 12px; }
  .vp-db__rows{ display:none; }
  /* camera scene: height-based + lens/cone centered so they stay aligned at any aspect */
  .cctv{ top:12%; height:54%; width:auto; transform:translateX(-19.5%) rotate(-7deg); }
  .vp-fov{ left:50%; top:40%; transform:translateX(-50%); }
  .vp-zone{ left:50%; bottom:9%; }
  .vp-pp--1{ left:42%; bottom:28%; }
  .vp-pp--2{ left:57%; bottom:40%; }
  .dash{ grid-template-columns:1fr; }
  .dash__side{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px; border-right:none; border-bottom:1px solid var(--line-dark); }
  .dash__search, .dash__user{ display:none; }
  .dash__nav{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .dash__navlabel{ display:none; }
  .dash__item{ padding:8px 12px; }
  .dash__grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  /* header — smaller & tidier on phones */
  .nav{ padding:11px 14px; }
  .nav.scrolled{ padding-block:9px; }
  .nav__logo img{ height:23px; }
  .nav__right{ gap:9px; }
  .lang-toggle button{ padding:5px 8px; font-size:11px; }
  .nav__right .btn{ padding:9px 15px; font-size:13px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; width:22px; gap:4px; }

  .footer__top{ flex-direction:column; }
  .team-grid{ grid-template-columns:1fr; }
  .tech-cats{ grid-template-columns:1fr; }
  .hero__stats{ gap:24px; }
  .sol-hero__stats{ grid-template-columns:1fr; gap:18px; }
  .field-row{ grid-template-columns:1fr; }
  .hm-stats{ grid-template-columns:1fr; }
  .expo-hero{ min-height:300px; }
  .tr-hero__visual{ min-height:300px; }

  /* hero copy — tighter so the particle 'A' fits fully below it on short phones */
  .hero{ padding-top:84px; padding-bottom:38px; }
  .hero h1{ font-size:33px; }
  .hero__lead{ font-size:15px; margin-top:16px; line-height:1.5; }
  .hero__cta{ margin-top:24px; gap:10px; }

  .dash__kpis{ grid-template-columns:repeat(2,1fr); }
  .dash__item span{ font-size:13px; }
  .dash-feats{ grid-template-columns:1fr; gap:18px; }
  .vfacade__brand{ gap:14px; padding:0 16px; }
  .vfacade__name{ font-size:clamp(24px,7vw,34px); }
  .vfacade__brand::before{ width:120px; height:120px; }
  .vfacade-box .video-play{ width:60px; height:60px; }

  /* vision pipeline — sticky-scrubbed AND compact so the 3 stages fit one screen */
  .vp-scroll{ height:300vh; }
  .vp-sticky{ min-height:100vh; justify-content:center; padding:56px 14px 16px; gap:8px; }
  .vp-hint{ display:none; }
  .vp{ gap:8px; max-width:360px; }
  .vp-tag{ margin-bottom:6px; }
  .vp-cam__view{ aspect-ratio:16/9; }
  .vp-events__card{ padding:11px 12px; }
  .vp-events__head{ margin-bottom:8px; }
  .vp-events__list{ gap:8px; }
  .vp-ev{ padding:8px 10px; gap:9px; }
  .vp-ev__ic{ width:28px; height:28px; }
  .vp-ev__ic svg{ width:16px; height:16px; }
  .vp-db__cyl{ width:72px; height:82px; margin:0 auto 10px; }
  .vp-db__rows{ display:none; }   /* count + "Guardado" convey storage; skip detail rows to fit */

  .tlm-stage{ height:280vh; }
  #trailer-scroll{ width:min(220px,52%); }
  .tlm-readouts{ grid-template-columns:repeat(2,1fr); }
  .tlm-summary__metrics b{ font-size:20px; }
}
@media (max-width:720px) and (max-height:700px){
  /* very short phones (iPhone SE, etc.) — compact further so everything fits */
  .hero{ padding-top:78px; padding-bottom:30px; }
  .hero h1{ font-size:29px; }
  .hero__lead{ font-size:14px; margin-top:13px; line-height:1.46; }
  .hero__cta{ margin-top:18px; }
  .vp-sticky{ padding:58px 12px 12px; gap:9px; }
  .vp{ gap:9px; }
  .vp-tag{ margin-bottom:5px; }
  .vp-cam__view{ aspect-ratio:20/9; }
  .cctv{ height:50%; }
  .vp-zone{ display:none; }   /* avoid overlap with status on the short camera card */
  .vp-events__card{ padding:10px 12px; }
  .vp-events__head{ margin-bottom:6px; }
  .vp-events__list{ gap:6px; }
  .vp-ev{ padding:6px 9px; }
  .vp-ev__ic{ width:26px; height:26px; }
  .vp-db__cyl{ width:62px; height:72px; margin:0 auto 8px; }
}