/* ============================================================
   Vi2ionai — Premium 3D homepage layer (Phase 1)
   Additive component classes only. Loaded after the page's inline
   <style> block so these rules win on shared selectors (.pcard,
   .hero-prod-card, .sol-card, etc). Nothing here touches JS-owned
   DOM contracts (#hero-products, #product-grid ids stay put).
   ============================================================ */

/* ── Scroll reveal ─────────────────────────────────────────────── */
/* No will-change here on purpose — it's applied to dozens of elements
   sitewide, and a blanket will-change hint promotes every one of them
   to its own compositor layer for the page's whole life. Cheap for a
   couple of elements, expensive at this scale (and on low-end/mobile
   GPUs). The transition is short-lived, so the browser's own
   heuristics handle layer promotion fine without the hint. */
/* Uses the standalone `translate` property (not `transform`) for the
   slide-up, specifically so it composes independently with elements
   that are ALSO .tilt-card (which uses `transform` for rotation) —
   otherwise .reveal.is-visible's higher-specificity `transform: none`
   would silently cancel the tilt's rotation once revealed. */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--dur-mid) var(--ease-premium),
              translate var(--dur-mid) var(--ease-premium);
}
.reveal.is-visible { opacity: 1; translate: 0 0; }
.reveal-stagger.is-visible > * { transition-delay: calc(var(--stagger-i, 0) * 60ms); }

/* ── Tilt cards ───────────────────────────────────────────────────
   Cards sit at a small resting 3D tilt by default (not flat) so the
   depth reads even without a hover interaction, with a click/touch,
   or under prefers-reduced-motion. JS pointermove increases the tilt
   toward the cursor on fine-pointer devices; leaving the pointer (or
   never having one) falls back to this resting angle, never to flat.
   No transform-style: preserve-3d — these cards have no 3D-positioned
   children, so it bought nothing and only added compositing cost. */
.tilt-card {
  --tiltX: -2.5deg;
  --tiltY: 3deg;
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) ease;
}
.tilt-card:nth-child(3n+2) { --tiltY: -3deg; }
.tilt-card:nth-child(3n+3) { --tiltX: 2.5deg; --tiltY: 2deg; }

/* ── Glass surface ────────────────────────────────────────────── */
.glass-card {
  background: linear-gradient(160deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--depth-2);
}
.glass-card:hover { border-color: var(--glass-border-strong); }

/* ================================================================
   HERO — dark 3D stage
   ================================================================ */
#hero {
  position: relative;
  background:
    radial-gradient(circle at 72% 42%, rgba(37,215,255,.10) 0%, rgba(37,215,255,.03) 24%, transparent 48%),
    radial-gradient(circle at 20% 20%, rgba(59,130,246,.08) 0%, transparent 42%),
    linear-gradient(135deg, var(--hero-bg) 0%, #050C17 46%, var(--hero-bg-deep) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
#hero::before {
  /* faint grid, echoes the product SVG grid motif for continuity */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 100%);
  pointer-events: none;
}
#hero .hero-eyebrow { color: var(--hd-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
#hero .hero-eyebrow-dot { background: var(--cyan-glow); box-shadow: 0 0 8px var(--cyan-glow); }
#hero h1 {
  color: var(--hd-text-white);
  font-size: clamp(2.4rem, 3.4vw, 3.75rem);
  line-height: 1.05; letter-spacing: -.03em; max-width: 640px;
}
#hero .hero-sub { color: var(--hd-text-secondary); font-size: 1.1rem; line-height: 1.7; max-width: 560px; }
#hero .btn-primary {
  background: linear-gradient(135deg, #39D0FF 0%, var(--blue-primary) 48%, var(--blue-secondary) 100%);
  color: #06101B; border-radius: 12px;
  box-shadow: 0 10px 32px rgba(59,130,246,.25), 0 0 24px rgba(37,215,255,.12);
}
#hero .btn-primary:hover { opacity: 1; filter: brightness(1.08); }
#hero .btn-ghost {
  background: rgba(255,255,255,.035); color: var(--hd-text-primary); border-color: var(--hd-border-strong);
  border-radius: 12px;
}
#hero .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.09); }
#hero .trust-item { color: var(--hd-text-muted); }
#hero .trust-icon { color: var(--cyan-glow); }
#hero .hero-inner { position: relative; z-index: 2; }
/* Wide 40/60 composition only above the point the base stylesheet
   collapses .hero-inner to a single column (max-width:1024px) —
   this must stay scoped or it fights that collapse on mobile/tablet. */
@media (min-width: 1025px) {
  #hero .hero-inner {
    max-width: 1440px; padding: 90px 64px 100px;
    grid-template-columns: .95fr 1.05fr; gap: 56px;
  }
}

/* min-width:0 down this chain — grid/flex items default to
   min-width:auto, which sizes them to their content's min-content
   width. Nested nowrap text (the notification chip) and a fixed-width
   floating card can otherwise inflate that past the viewport on
   narrow screens and get silently clipped by #hero's overflow:hidden
   instead of wrapping. */
.hero-left { min-width: 0; }
.hero-right { position: relative; min-height: 360px; perspective: 1400px; min-width: 0; }
.hero-dashboard, .hd-shell, .hd-main { min-width: 0; }

.hero-products { position: relative; z-index: 2; width: 100%; max-width: 860px; margin-left: auto; }

/* ── Hero fleet control-centre dashboard ─────────────────────────────
   Sidebar nav + map + fleet-status cards inside one wide panel, with a
   floating vehicle-detail card docked over its right edge — modelled
   directly on the approved reference composition. */
/* Outer device bezel — a real 3D rotation of this much dense, readable
   UI broke badly (sidebar collapsed, text warped), so the "floating
   tablet" cue instead comes from a frame + a big soft glow shadow
   underneath, the way the reference actually reads: flat, not warped. */
.hero-dashboard {
  position: relative;
  width: 100%; min-height: 560px;
  background: linear-gradient(165deg, #0d1826 0%, #060d18 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  box-shadow:
    0 50px 100px rgba(0,0,0,.55),
    0 30px 70px rgba(37,215,255,.10),
    0 0 0 1px rgba(255,255,255,.02) inset;
  padding: 14px;
}

.hd-shell {
  display: flex; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(11,22,37,.96) 0%, rgba(5,12,23,.98) 100%);
  border: 1px solid var(--hd-border);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* Sidebar */
.hd-sidebar {
  flex-shrink: 0; width: 168px;
  background: var(--hero-panel);
  border-right: 1px solid var(--hd-border);
  padding: 20px 12px;
}
.hd-sidebar-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 800; color: var(--hd-text-white);
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em;
  margin-bottom: 20px; padding: 0 8px;
}
.hd-logo-ai { color: var(--cyan-glow); }
.hd-nav { display: flex; flex-direction: column; gap: 2px; }
.hd-nav-item {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 600; color: var(--hd-text-secondary);
  padding: 8px 9px; border-radius: 8px;
}
.hd-nav-item svg { flex-shrink: 0; }
.hd-nav-active {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-secondary));
  color: #fff; box-shadow: var(--shadow-blue);
}
.hd-nav-badge {
  margin-left: auto; background: var(--hd-red); color: #fff;
  font-size: .58rem; font-weight: 800; padding: 1px 6px; border-radius: 20px;
}

/* Main: map + stats */
.hd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; gap: 12px; }

.hd-map {
  position: relative; flex: 1; min-height: 300px; border-radius: 12px; overflow: hidden;
  background-color: var(--hero-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  border: 1px solid var(--hd-border);
}
.hd-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.hd-notification {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: var(--hd-glass); backdrop-filter: blur(10px);
  border: 1px solid var(--hd-border-strong); border-radius: 12px;
  padding: 8px 12px; box-shadow: var(--depth-2);
  max-width: 78%;
}
.hd-notif-text { display: flex; flex-direction: column; min-width: 0; }
.hd-notif-text strong { font-size: .72rem; font-weight: 700; color: var(--hd-text-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-notif-text span { font-size: .62rem; color: var(--hd-text-secondary); }
.hd-notif-close { margin-left: 4px; color: var(--hd-text-secondary); font-size: .95rem; line-height: 1; }

.hd-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex-shrink: 0; }
.hd-stat-card {
  background: rgba(9,19,33,.88); border: 1px solid var(--hd-border);
  border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,.26);
  padding: 11px 13px;
}
.hd-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
.hd-stat-num { font-size: 1.4rem; font-weight: 700; color: var(--hd-text-white); font-family: 'Plus Jakarta Sans', sans-serif; }
.hd-num-cyan { color: var(--cyan-glow); }
.hd-num-amber { color: var(--hd-orange); }
.hd-num-red { color: var(--hd-red); }
.hd-stat-link { font-size: .6rem; color: var(--hd-text-secondary); font-weight: 600; }
.hd-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--hd-text-muted); margin-bottom: 5px; }
.hd-spark { width: 100%; height: 18px; display: block; }

/* Floating vehicle-detail card, docked over the dashboard's right edge */
.hd-vehicle-float {
  position: absolute; top: 70px; right: -14px; z-index: 4;
  width: 230px;
  background: var(--hd-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hd-border-strong); border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-panel), 0 0 30px rgba(37,215,255,.14);
}
.hd-vf-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.hd-vf-name { font-size: .95rem; font-weight: 800; color: var(--hd-text-white); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.hd-vf-model { font-size: .72rem; color: var(--hd-text-secondary); margin-top: 2px; }
.hd-vf-driver-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hd-vf-driver-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-text-muted); }
.hd-vf-driver-name { font-size: .78rem; font-weight: 700; color: var(--hd-text-primary); }
.hd-vf-divider { height: 1px; background: var(--hd-border); margin-bottom: 12px; }
.hd-live-badge {
  display: inline-block; font-size: .6rem; font-weight: 800; letter-spacing: .05em;
  background: var(--hd-green-soft); color: var(--hd-green);
  padding: 3px 9px; border-radius: 20px; margin-bottom: 10px;
}
.hd-vf-speed-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.hd-vf-speed-num { font-size: 2rem; font-weight: 800; color: var(--hd-text-white); font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; }
.hd-vf-speed-unit { font-size: .85rem; color: var(--hd-text-secondary); font-weight: 600; }
.hd-vf-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; color: var(--hd-text-secondary);
  padding: 6px 0; border-top: 1px solid var(--hd-border);
}
.hd-vf-on { color: var(--hd-green); font-weight: 700; }

@keyframes hd-pulse-dot {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}

/* ── "View Live Demo" camera preview — a premium product-preview panel
   docked at the TOP of the hero's left column, above the headline. It is
   a secondary panel (smaller and visually quieter than the GPS dashboard
   on the right), but large enough that the four camera angles are
   actually legible — not a tiny thumbnail. The GPS dashboard on the
   right stays completely untouched and stands entirely on its own.
   Static poster only; no video/JS loads here. ── */
.hero-camera-preview {
  position: relative;
  display: block;
  width: 100%; max-width: 460px;
  margin: 0 0 28px 0;
  background: var(--hd-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hd-border-strong); border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease-premium), box-shadow .2s ease, border-color .2s ease;
}
.hero-camera-preview:hover {
  transform: translateY(-2px);
  border-color: rgba(37,215,255,.35);
  box-shadow: var(--shadow-panel), 0 0 28px rgba(37,215,255,.18);
}
.hero-camera-preview picture,
.hero-camera-preview img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}
.hcp-cta {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 800; color: var(--hd-text-white);
  letter-spacing: -.01em;
  padding: 13px 16px;
  border-top: 1px solid var(--hd-border);
  background: rgba(5,11,22,.55);
}
.hcp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--hd-red);
  box-shadow: 0 0 6px rgba(255,92,105,.7);
  animation: hd-pulse-dot 1.8s infinite;
  flex-shrink: 0;
}
.hcp-arrow { color: var(--cyan-glow); transition: transform .15s ease; }
.hero-camera-preview:hover .hcp-arrow { transform: translateX(2px); }

@media (max-width: 640px) {
  .hero-camera-preview { max-width: 100%; margin-bottom: 22px; }
  .hcp-cta { font-size: .88rem; padding: 11px 14px; }
}

.hero-features {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 36px 0;
}
.hero-features-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.hero-feature { display: flex; align-items: flex-start; gap: 12px; }
.hero-feature-title { font-size: .92rem; font-weight: 700; color: var(--hd-text-white); margin-bottom: 2px; }
.hero-feature-desc { font-size: .8rem; color: var(--hd-text-secondary); line-height: 1.4; }

@media (max-width: 1024px) {
  .hero-features-inner { grid-template-columns: repeat(2, 1fr); padding: 0 32px; gap: 24px; }
}
@media (max-width: 640px) {
  .hero-features-inner { grid-template-columns: 1fr; padding: 0 20px; }
}

@media (max-width: 1024px) {
  #hero .hero-inner { padding: 64px 32px 56px; gap: 40px; }
  .hero-products { max-width: 620px; margin: 0 auto; }
  .hero-dashboard { transform: none; min-height: 460px; }
  .hd-vehicle-float { right: 12px; width: 210px; }
}
@media (max-width: 768px) {
  .hd-sidebar { display: none; }
}
@media (max-width: 640px) {
  #hero .hero-inner { padding: 56px 20px 48px; }
  .hero-dashboard { min-height: 0; }
  .hero-dashboard { flex-direction: column; }
  .hd-main { padding: 12px; }
  .hd-map { min-height: 260px; }
  .hd-vehicle-float { position: static; width: auto; margin-top: 10px; }
  .hd-notification { max-width: 90%; }
}

/* ================================================================
   PRODUCTS — dark glass showcase (matches the navy product SVGs)
   ================================================================ */
#hardware {
  background:
    radial-gradient(ellipse 800px 400px at 85% 0%, rgba(129,140,248,.12), transparent 55%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
}
#hardware .section-label { color: rgba(255,255,255,.4); }
#hardware .section-label::before { background: var(--accent-cyan); }
#hardware h2 { color: #fff; }
#hardware .section-desc { color: rgba(255,255,255,.55); }

.pcard {
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--depth-2);
}
.pcard:hover {
  border-color: rgba(56,189,248,.45);
  box-shadow: var(--depth-3), var(--glow-cyan);
  transform: translateY(-6px);
}
.pcard-image { transition: transform var(--dur-mid) var(--ease-premium); }
.pcard:hover .pcard-image { transform: translateZ(24px) scale(1.02); }
.pcard-brand { color: rgba(255,255,255,.4); }
.pcard-name { color: #fff; }
.pcard-desc { color: rgba(255,255,255,.55); }
.pcard-price { color: #fff; }
.pcard-price-sub { color: rgba(255,255,255,.4); }
.pcard-trust { color: rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.08); }
.add-btn {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  color: #04070f;
}
.add-btn:hover { opacity: 1; filter: brightness(1.08); }
.badge-dark { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)); color: #04070f; }
.badge-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.products-loading { color: rgba(255,255,255,.45); }

/* ================================================================
   SOLUTIONS — light section, cards get depth + tilt (no glass,
   keeps the alternating light/dark rhythm of the page)
   ================================================================ */
.sol-card {
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.sol-card:hover { box-shadow: var(--depth-2); transform: translateY(-4px) perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); }
.sol-icon {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  transition: transform var(--dur-fast) var(--ease-premium);
}
.sol-card:hover .sol-icon { transform: translateZ(18px) scale(1.06); }

/* ================================================================
   Dark-section cohesion touches (why-visual / demo / roi / footer
   already exist as dark panels — small glow/depth upgrades only)
   ================================================================ */
.why-visual { box-shadow: var(--depth-3); border: 1px solid rgba(255,255,255,.08); }
.demo-screen { box-shadow: var(--depth-3); }
.demo-vehicle-dot { box-shadow: 0 0 10px currentColor; }
.roi-calc, .roi-card { transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-premium); }
.roi-card:hover { border-color: rgba(56,189,248,.3); transform: translateY(-3px); }

footer { position: relative; }
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-violet), transparent);
  opacity: .5;
}

/* ── Reduced motion: keep resting 3D depth, drop continuous/large
   motion. Static tilt, glass, and glow all stay — only autoplay-style
   animation (orbFloat, hero autorotate) and snappy hover pop-outs are
   removed. Content is also revealed immediately with no transition. ── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .tilt-card { transition: none; }
  .pcard:hover, .sol-card:hover, .roi-card:hover { transform: none; }
  .pcard:hover .pcard-image, .sol-card:hover .sol-icon { transform: none; }
}