:root {
  --bg: #080a0d;
  --bg2: #0d1015;
  --panel: #11151b;
  --panel2: #151a21;
  --text: #f3f5f7;
  --muted: #9da5ae;
  --line: rgba(255,255,255,.09);
  --red: #ff2538;
  --red2: #c80e22;
  --amber: #ffbd22;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
iframe { border: 0; }
.container { width: min(var(--max), calc(100% - 40px)); margin: auto; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(8,10,13,.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 76px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; font-family:Orbitron,sans-serif; letter-spacing:.05em; white-space:nowrap; }
.brand-logo {
  width:46px;height:46px;object-fit:cover;border-radius:9px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.brand-text { font-size:17px; }
.brand-text b { color:var(--red); }
.main-nav { margin-left:auto; display:flex; gap:20px; align-items:center; }
.main-nav a { font-size:13px; color:#c7ccd2; transition:.2s; }
.main-nav a:hover { color:#fff; }
.nav-cta { margin-left:2px; }
.menu-toggle { display:none; background:none; color:#fff; border:0; font-size:24px; }

.btn {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;border-radius:8px;font-weight:700;
  border:1px solid transparent;transition:.22s ease;cursor:pointer;
}
.btn-small { min-height:42px;padding:0 17px;font-size:13px; }
.btn-primary { background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 8px 30px rgba(255,37,56,.17); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 12px 35px rgba(255,37,56,.3); }
.btn-secondary { border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.025); }
.btn-secondary:hover { background:rgba(255,255,255,.07); }

.hero {
  position:relative;min-height:720px;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
}
.hero::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,10,13,.15),rgba(8,10,13,.05) 55%,rgba(8,10,13,.55));
  pointer-events:none;
}
.hero-glow {
  position:absolute;width:700px;height:700px;right:-200px;top:40px;
  background:radial-gradient(circle,rgba(255,25,47,.14),transparent 64%);
}
.hero-grid {
  display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center;
  position:relative;z-index:2;padding:90px 0;
}
.eyebrow { color:#ff4a5a;font-size:12px;letter-spacing:.18em;margin-bottom:18px; 
  
}
h1,h2,h3 { margin-top:0;line-height:1.08; }
h1 { font-family:Orbitron,sans-serif;font-size:clamp(43px,5vw,70px);letter-spacing:-.04em;margin-bottom:24px; }
h1 span { color:var(--red);text-shadow:0 0 34px rgba(255,37,56,.3); }
h2 { font-family:Orbitron,sans-serif;font-size:clamp(30px,3.3vw,45px);letter-spacing:-.03em;margin-bottom:18px; }
h3 { font-size:20px;margin-bottom:12px; }
.hero-lead { max-width:680px;font-size:18px;color:#b4bbc4;margin-bottom:32px; }
.hero-actions { display:flex;gap:12px;margin-bottom:50px; }
.hero-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:640px; }
.hero-stats div { border-left:1px solid rgba(255,255,255,.16);padding-left:16px; }
.hero-stats strong { display:block;font-family:Orbitron;font-size:18px; }
.hero-stats span { display:block;color:var(--muted);font-size:12px;margin-top:5px; }

.hero-product { display:flex;flex-direction:column;gap:16px; }
.brand-showcase {
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:linear-gradient(145deg,#171b20,#090b0e);
  padding:20px;display:grid;grid-template-columns:145px 1fr;gap:22px;align-items:center;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.brand-showcase img { width:145px;height:145px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.1); }
.brand-showcase-copy { display:flex;flex-direction:column;gap:10px; }
.brand-showcase-copy span { color:#8f98a2;font-size:20.3px;font-family:"Rajdhani",sans-serif;font-weight:700;letter-spacing:.18em; }
.brand-showcase-copy strong { font:700 18px Orbitron;line-height:1.5; }

.light-stack { display:grid;grid-template-columns:1fr;gap:10px; }
.light-demo {
  height:88px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  background:#0d1015;position:relative;overflow:hidden;padding:15px 18px;
  display:flex;align-items:flex-end;
}
.light-demo span { font-size:9px;font-weight:800;letter-spacing:.14em;color:#7e8791;position:relative;z-index:2; }
.light-demo i { position:absolute;display:block; }
.scanner-demo i {
  left:13%;right:13%;top:30px;height:8px;border-radius:50%;
  background:linear-gradient(90deg,#30070c,#ff293e,#fff,#ff293e,#30070c);
  box-shadow:0 0 15px #ff263c,0 0 32px rgba(255,38,60,.6);
  animation:scannerPulse 2s infinite;
}
.tail-demo i {
  top:27px;width:30%;height:12px;border-radius:50%;
  background:#ff293e;box-shadow:0 0 18px #ff293e;
}
.tail-demo i:nth-of-type(1){left:12%;transform:rotate(5deg)}
.tail-demo i:nth-of-type(2){right:12%;transform:rotate(-5deg)}
.hood-demo i {
  left:10%;right:10%;top:28px;height:7px;border-radius:50%;
  background:linear-gradient(90deg,#3d1014,#ff3250,#ffbd22,#ff3250,#3d1014);
  box-shadow:0 0 18px rgba(255,60,70,.75);
}
@keyframes scannerPulse { 0%,100%{transform:translateX(-12%);opacity:.65}50%{transform:translateX(12%);opacity:1} }

.trust-strip { border-bottom:1px solid var(--line);background:#0b0e12; }
.trust-items { min-height:76px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:20px;color:#aeb5bd;font-size:13px; }
.trust-items span { text-align:center; }

.section { padding:110px 0; }
.section-dark { background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.section-heading { display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:48px; }
.section-heading > div { max-width:720px; }
.section-heading > p,.section-heading.centered p { max-width:470px;color:var(--muted);margin:0; }
.section-heading.centered { display:block;text-align:center;max-width:780px;margin:0 auto 50px; }
.section-heading.centered p { margin:0 auto; }

.family-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.family-card {
  position:relative;border:1px solid var(--line);border-radius:16px;padding:30px;
  background:linear-gradient(145deg,#131820,#0d1014);min-height:420px;transition:.25s;
}
.family-card:hover { transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 20px 45px rgba(0,0,0,.25); }
.family-number { font:700 11px Orbitron;color:#59616a; }
.family-icon { height:120px;margin:28px 0 30px;border:1px solid var(--line);border-radius:10px;background:#090b0e;position:relative;overflow:hidden; }
.family-icon i { position:absolute;display:block; }
.scanner-icon i { left:14%;right:14%;top:54px;height:8px;background:linear-gradient(90deg,#3b070d,#ff2038,#fff,#ff2038,#3b070d);box-shadow:0 0 18px #ff2038;border-radius:50%; }
.tail-icon i { top:50px;width:30%;height:11px;background:#ff273e;box-shadow:0 0 15px #ff273e;border-radius:50%; }
.tail-icon i:first-child { left:14%;transform:rotate(6deg); }
.tail-icon i:last-child { right:14%;transform:rotate(-6deg); }
.hood-icon i { left:9%;right:9%;top:53px;height:7px;background:linear-gradient(90deg,#481016,#ff273e,#ffbd22,#ff273e,#481016);box-shadow:0 0 18px rgba(255,50,65,.7);border-radius:50%; }
.family-card p { color:var(--muted);font-size:14px; }
.family-card > span { position:absolute;bottom:28px;left:30px;color:#ff5261;font-weight:700;font-size:13px; }

.product-detail { padding:110px 0;border-top:1px solid var(--line);background:#090b0e;scroll-margin-top:76px; }
.product-detail.alternate { background:#0d1015; }
.product-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center; }
.product-detail-copy p { color:var(--muted);font-size:16px;margin-bottom:26px; }
.feature-pills { display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px; }
.feature-pills span { border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:11px;color:#cbd0d6;background:rgba(255,255,255,.02); }
.video-card { border:1px solid rgba(255,255,255,.11);border-radius:16px;background:#101319;padding:14px;box-shadow:0 25px 60px rgba(0,0,0,.3); }
.video-label { padding:5px 3px 14px;color:#858e98;font-size:9px;font-weight:800;letter-spacing:.16em; }
.video-frame { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;background:#050607; }
.video-frame iframe { position:absolute;inset:0;width:100%;height:100%; }

.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden; }
.feature-card { background:#0e1217;padding:38px 32px;min-height:240px; }
.feature-card > span { font-family:Orbitron;font-size:11px;color:var(--red); }
.feature-card h3 { margin-top:45px; }
.feature-card p { color:var(--muted);font-size:14px;margin-bottom:0; }

.videos-overview { background:#080a0d; }
.video-link-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.video-link-grid a { min-height:180px;padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#12171e,#0b0e12);display:flex;flex-direction:column;transition:.25s; }
.video-link-grid a:hover { transform:translateY(-4px);border-color:rgba(255,255,255,.18); }
.video-link-grid span { color:var(--red);font:700 11px Orbitron; }
.video-link-grid strong { margin-top:35px;font-size:17px; }
.video-link-grid small { color:#8d96a0;margin-top:auto; }
.youtube-cta { text-align:center;margin-top:34px; }

.support-section { border-top:1px solid var(--line); }
.support-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center; }
.support-grid p,.about-grid p { color:var(--muted); }
.support-links { border-top:1px solid var(--line); }
.support-links a { display:grid;grid-template-columns:42px 1fr 30px;gap:16px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line); }
.support-links a > span { width:38px;height:38px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--red); }
.support-links small { display:block;color:var(--muted);margin-top:3px; }

.about-section { background:#0c0f13; }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center; }
.about-visual { height:390px;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;overflow:hidden;position:relative;background:#090b0e; }
.pcb-lines { position:absolute;inset:0;opacity:.25;background:linear-gradient(90deg,transparent 49%,#4c5967 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#4c5967 50%,transparent 51%);background-size:64px 64px; }
.about-logo-image { position:relative;z-index:2;width:min(76%,330px);aspect-ratio:1/1;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 25px 60px rgba(0,0,0,.55); }
.text-link { color:#ff4b5b;font-weight:700;font-size:14px; }

.cta-section { padding:0 0 110px;background:#0c0f13; }
.cta-box { border-radius:20px;padding:52px;background:linear-gradient(130deg,#191e25,#0c0e12 65%);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:50px;position:relative;overflow:hidden; }
.cta-box::after { content:"";position:absolute;width:400px;height:400px;right:-150px;bottom:-260px;background:radial-gradient(circle,rgba(255,37,56,.2),transparent 65%); }
.cta-box h2 { max-width:720px; }
.cta-box p { color:var(--muted);max-width:700px;margin-bottom:0; }
.cta-actions { display:flex;flex-direction:column;gap:10px;min-width:210px;z-index:2; }

footer { padding:50px 0 35px;border-top:1px solid var(--line);background:#060709; }
.footer-grid { display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:40px;align-items:end; }
.footer-brand { display:inline-flex;margin-bottom:15px; }
.footer-logo { width:44px;height:44px; }
footer p,.footer-copy { color:#737b84;font-size:12px;max-width:350px; }
.footer-links { display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:12px;color:#afb6bd; }
.footer-copy { text-align:right; }

@media(max-width:1030px){
  .main-nav,.nav-cta{display:none}
  .menu-toggle{display:block;margin-left:auto}
  .main-nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#0b0e12;padding:24px;flex-direction:column;border-bottom:1px solid var(--line)}
  .hero-grid,.product-detail-grid,.support-grid,.about-grid{grid-template-columns:1fr;gap:50px}
  .hero{min-height:auto}
  .hero-product{max-width:650px;width:100%;margin:auto}
  .family-grid,.video-link-grid{grid-template-columns:1fr 1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
  .section-heading{display:block}
  .section-heading>p{margin-top:12px}
  .alternate .video-card{order:2}
  .alternate .product-detail-copy{order:1}
  .cta-box{display:block}
  .cta-actions{flex-direction:row;margin-top:30px}
}
@media(max-width:670px){
  .container{width:min(100% - 28px,var(--max))}
  .section,.product-detail{padding:78px 0}
  .hero-grid{padding:70px 0}
  h1{font-size:39px}
  .hero-actions{flex-direction:column}
  .hero-stats{grid-template-columns:1fr;gap:16px}
  .brand-showcase{grid-template-columns:95px 1fr;padding:14px}
  .brand-showcase img{width:95px;height:95px}
  .brand-showcase-copy strong{font-size:14px}
  .trust-items{grid-template-columns:1fr 1fr;padding:18px 0}
  .family-grid,.feature-grid,.video-link-grid{grid-template-columns:1fr}
  .family-card{min-height:390px}
  .about-visual{height:280px}
  .cta-box{padding:32px 24px}
  .cta-actions{flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
  .footer-copy{text-align:left}
}


/* Real HAZI TECH product photography */
.family-photo {
  height: 185px;
  margin: 28px 0 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #07090b;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.family-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.family-card:hover .family-photo img { transform: scale(1.025); }
.family-card { min-height: 500px; }
.media-stack { display: grid; gap: 14px; }
.product-photo-panel {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: #0a0d10;
  box-shadow: 0 24px 55px rgba(0,0,0,.3);
}
.product-photo-panel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  height: auto;
  object-fit: cover;
}
@media(max-width: 670px) {
  .family-card { min-height: 470px; }
  .family-photo { height: 165px; }
  .product-photo-panel img { aspect-ratio: 16 / 9; }
}

/* Updated 16:9 product artwork: preserve the complete compositions */
.family-photo {
  height: auto !important;
  aspect-ratio: 16 / 9;
  background: #000;
}
.family-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
.product-photo-panel {
  background: #000;
}
.product-photo-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center;
}

/* Real video product strip */
.video-strip {
  display: block;
  padding: 0;
  min-height: 118px;
  cursor: pointer;
  isolation: isolate;
}
.video-strip video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.video-strip-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5,7,9,.72) 0%, rgba(5,7,9,.12) 48%, rgba(5,7,9,.35) 100%);
}
.video-strip span {
  position: absolute;
  left: 22px;
  bottom: 17px;
  z-index: 2;
  color: #f2f4f6;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.video-strip b {
  position: absolute;
  right: 22px;
  bottom: 15px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
}
.video-strip:hover video {
  transform: scale(1.012);
}
.video-strip video {
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .video-strip video { display: none; }
  .video-strip {
    background: #090b0e url("assets/kitt-scanner.jpg") center/cover no-repeat;
  }
}

/* Product video labels moved to the top */
.video-strip span {
  top: 15px !important;
  bottom: auto !important;
  left: 22px;
}
.video-strip b {
  top: 14px !important;
  bottom: auto !important;
  right: 22px;
}
.video-strip-shade {
  background:
    linear-gradient(180deg, rgba(5,7,9,.72) 0%, rgba(5,7,9,.25) 32%, rgba(5,7,9,.04) 70%),
    linear-gradient(90deg, rgba(5,7,9,.22), transparent 50%, rgba(5,7,9,.12));
}


/* ============================================================
   HAZI TECH MOBILE HERO — APPROVED LOOK v5
   Mobile only. Desktop remains unchanged.
   ============================================================ */
.mobile-hero-features,
.mobile-scroll-cue { display:none; }

@media (max-width: 670px) {
  body { overflow-x:hidden; }

  .site-header {
    position:relative;
    background:#05070a;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav-wrap { min-height:84px; }

  .brand-logo {
    width:58px;
    height:58px;
    border-radius:11px;
  }

  .brand-text {
    font-size:22px;
    letter-spacing:.015em;
  }

  .menu-toggle {
    font-size:0;
    width:40px;
    height:40px;
    position:relative;
  }

  .menu-toggle::before {
    content:"☰";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:28px;
    line-height:1;
  }

  .hero {
    min-height:calc(100svh - 84px);
    padding:0;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at 83% 48%, rgba(255,18,39,.18), transparent 31%),
      radial-gradient(circle at 52% 75%, rgba(255,18,39,.16), transparent 36%),
      linear-gradient(180deg,#05070a 0%,#07090d 66%,#030405 100%);
  }

  .hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-5;
    background-image:
      linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 46%,transparent 84%);
    mask-image:linear-gradient(to bottom,#000 0 46%,transparent 84%);
  }

  .hero::after {
    content:"";
    position:absolute;
    z-index:-4;
    right:-7%;
    top:8%;
    width:49%;
    height:62%;
    opacity:.72;
    background:
      linear-gradient(90deg, transparent 0 16%, rgba(255,25,44,.06) 20%, rgba(255,25,44,.50) 21%, transparent 23%),
      linear-gradient(90deg, transparent 0 55%, rgba(255,25,44,.06) 59%, rgba(255,25,44,.88) 60%, rgba(255,255,255,.75) 60.7%, rgba(255,25,44,.74) 61.6%, transparent 64%);
    filter:drop-shadow(0 0 14px rgba(255,22,43,.38));
  }

  .hero-glow {
    position:absolute;
    z-index:-3;
    left:-10%;
    top:33%;
    width:120%;
    height:61%;
    background:
      radial-gradient(ellipse at 73% 46%,rgba(255,35,48,.19),transparent 43%),
      radial-gradient(ellipse at 42% 78%,rgba(165,0,15,.18),transparent 51%);
    filter:blur(18px);
  }

  .hero-grid {
    display:block;
    position:relative;
    padding:42px 0 30px !important;
  }

  .hero-copy {
    position:relative;
    z-index:2;
  }

  .hero .eyebrow {
    color:#ff4053;
    font-size:13px;
    letter-spacing:.22em;
    margin-bottom:17px;
  
  

  
}

  .hero h1 {
    max-width:100%;
    font-size:clamp(42px,11.8vw,57px);
    line-height:.99;
    letter-spacing:-.045em;
    margin-bottom:21px;
  }

  .hero h1 span { display:inline; }

  .hero-lead {
    position:relative;
    z-index:3;
    max-width:95%;
    color:#c4c8cf;
    font-size:18px;
    line-height:1.48;
    margin-bottom:300px;
  }

  .hero-copy::after {
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    left:-4.5%;
    right:-4.5%;
    top:350px;
    height:430px;
    background:url("assets/mobile-kitt-scene-v6.png") center bottom / cover no-repeat;
    filter:drop-shadow(0 24px 32px rgba(0,0,0,.55));
  }

  /* No scanner animation */
  .hero-copy::before {
    content:none !important;
    animation:none !important;
  }

  .hero-actions {
    position:relative;
    z-index:5;
    gap:11px;
    margin:0;
  }

  .hero-actions .btn {
    width:100%;
    min-height:58px;
    border-radius:12px;
    font-size:17px;
    font-weight:800;
  }

  .hero-actions .btn-primary {
    background:linear-gradient(90deg,#ff1e3b,#ef0d28);
    box-shadow:0 0 26px rgba(255,26,48,.21);
  }

  .hero-actions .btn-primary::after {
    content:"→";
    margin-left:11px;
    font-size:24px;
    vertical-align:-2px;
  }

  .hero-actions .btn-secondary::before {
    content:"▶";
    width:28px;
    height:28px;
    display:inline-grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    margin-right:10px;
    font-size:10px;
  }

  .hero-stats,
  .hero-product,
  .trust-strip {
    display:none !important;
  }

  .mobile-hero-features {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    position:relative;
    z-index:5;
    margin-top:30px;
    width:100%;
  }

  .mobile-feature {
    min-width:0;
    text-align:center;
    padding:0 5px;
    border-right:1px solid rgba(255,255,255,.08);
  }

  .mobile-feature:last-child { border-right:0; }

  .mobile-feature svg {
    display:block;
    width:31px;
    height:31px;
    margin:0 auto 9px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-feature:first-child svg path {
    fill:#fff;
    stroke:none;
  }

  .mobile-feature b {
    display:block;
    color:#f5f5f6;
    font-size:11.5px;
    line-height:1.18;
    font-weight:600;
  }

  .mobile-scroll-cue {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    position:relative;
    z-index:5;
    width:max-content;
    margin:28px auto 0;
    color:#aeb4bd;
  }

  .scroll-chevron {
    width:22px;
    height:22px;
    border-right:3px solid #fff;
    border-bottom:3px solid #fff;
    transform:rotate(45deg);
  }

  .mobile-scroll-cue b {
    font-size:10px;
    letter-spacing:.19em;
    font-weight:500;
  }

  /* Fix checkout numbered circles */
  .step-number,
  .step-badge,
  .config-step-number {
    flex:0 0 auto !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    line-height:34px !important;
  }
}

@media (max-width: 390px) {
  .hero-grid { padding-top:35px !important; }
  .hero h1 { font-size:41px; }
  .hero-lead { font-size:16px; margin-bottom:270px; }
  .hero-copy::after { top:326px; height:395px; }
  .mobile-feature b { font-size:10.5px; }
}


/* ============================================================
   HAZI TECH MOBILE HERO v7
   Full mobile-kitt-scene-v6 image visible through hero text.
   Removes the old black/grid/red-line background layer.
   ============================================================ */
@media (max-width: 670px) {
  .hero {
    background:
      linear-gradient(180deg,
        rgba(3,4,6,.12) 0%,
        rgba(3,4,6,.08) 28%,
        rgba(3,4,6,.02) 52%,
        rgba(3,4,6,.12) 78%,
        rgba(3,4,6,.50) 100%),
      url("assets/mobile-kitt-scene-v6.png") center top / cover no-repeat !important;
  }

  /* Remove previous decorative background layers */
  .hero::before,
  .hero::after,
  .hero-glow {
    display:none !important;
    content:none !important;
    background:none !important;
    filter:none !important;
  }

  /* Remove the separately-inserted car image.
     The approved scene is now the actual hero background. */
  .hero-copy::after {
    content:none !important;
    display:none !important;
    background:none !important;
  }

  /* No scanner animation overlay */
  .hero-copy::before {
    content:none !important;
    display:none !important;
    animation:none !important;
  }

  /* Let the background scene show continuously behind the text */
  .hero-copy,
  .hero-grid,
  .hero-lead,
  .hero h1,
  .hero .eyebrow {
    background:transparent !important;
  
  

  
}

  /* Because the car now lives in the full background,
     we no longer need the artificial 300px spacer. */
  .hero-lead {
    margin-bottom:300px !important;
    text-shadow:0 2px 12px rgba(0,0,0,.72);
  }

  .hero h1,
  .hero .eyebrow {
    text-shadow:0 2px 14px rgba(0,0,0,.55);
  
  

  
}

  .hero-actions,
  .mobile-hero-features,
  .mobile-scroll-cue {
    position:relative;
    z-index:5;
  }
}

@media (max-width: 390px) {
  .hero-lead {
    margin-bottom:270px !important;
  }
}


/* ============================================================
   HAZI TECH v8 — APPROVED DESKTOP TYPOGRAPHY CHANGES
   Mobile v7 styling remains untouched.
   ============================================================ */
@media (min-width: 901px) {

  /* Desktop Change #1:
     Enlarge the hero kicker so AUTOMOTIVE LED ELECTRONICS
     visually approaches the width of "Advanced". */
  .hero .eyebrow {
    font-size: 18px;
  
  

  
}

  /* Desktop Changes #2–#4:
     Standardize the red section labels across the desktop site.
     Applies to PRODUCT FAMILIES, all three product labels,
     WHY HAZI TECH, and the other matching red eyebrow headings. */
  main .eyebrow:not(.hero .eyebrow) {
    font-size: 16px;
  }

  /* WHY HAZI TECH feature identifiers 01–06 */
  .feature-card > span {
    font-size: 16px;
  }
}


/* ============================================================
   HAZI TECH v9 — DESKTOP PRODUCT CARD IDENTIFIERS
   Approved follow-up: 01 / 02 / 03 above product cards match
   the standardized desktop red-label typography size.
   Mobile remains unchanged.
   ============================================================ */
@media (min-width: 901px) {
  .product-card .product-number,
  .product-card .number,
  .product-card > .index,
  .product-card > .num,
  .product-card > span:first-child,
  .product-grid article > span:first-child,
  .products-grid article > span:first-child {
    font-size: 16px !important;
  }
}


/* ============================================================
   HAZI TECH v10 — UNIFIED DESKTOP NUMBER SIZE
   All red 01 / 02 / 03-style identifiers use the same approved
   size as the WHY HAZI TECH numbers. Mobile remains untouched.
   ============================================================ */
@media (min-width: 901px) {
  .feature-card > span,
  .product-card .product-number,
  .product-card .number,
  .product-card > .index,
  .product-card > .num,
  .product-card > span:first-child,
  .product-grid article > span:first-child,
  .products-grid article > span:first-child,
  .stat-number,
  .section-number,
  .card-number,
  .step-number {
    font-size: 16px !important;
  }
}


/* ============================================================
   HAZI TECH v11 — UNIFIED MOBILE TYPOGRAPHY
   Bring the approved desktop red label / number hierarchy
   to mobile while preserving the existing mobile hero layout.
   ============================================================ */
@media (max-width: 900px) {

  /* Red section labels/headings */
  main .eyebrow:not(.hero .eyebrow) {
    font-size: 16px !important;
  }

  /* Red 01 / 02 / 03-style identifiers */
  .feature-card > span,
  .product-card .product-number,
  .product-card .number,
  .product-card > .index,
  .product-card > .num,
  .product-card > span:first-child,
  .product-grid article > span:first-child,
  .products-grid article > span:first-child,
  .stat-number,
  .section-number,
  .card-number,
  .step-number {
    font-size: 16px !important;
  }
}


/* ============================================================
   HAZI TECH v12 — FINALIZED SHARED TYPOGRAPHY VALUES
   User-approved values applied to BOTH desktop and mobile.
   PRODUCT FAMILIES heading itself keeps its original/default size.
   ============================================================ */

/* AUTOMOTIVE LED ELECTRONICS */
.hero .eyebrow {
  font-size: 13.8px !important;

  

  
}

/* Product video labels:
   KITT SCANNER — PRODUCT VIDEO and equivalent labels */
.video-card .eyebrow,
.video-card .video-label,
.video-card .product-video-label,
.video-card .kicker,
.video-card > .eyebrow {
  font-size: 12px !important;

  

  
}

/* PRODUCT FAMILIES card numbers 01 / 02 / 03 only */
.product-card .product-number,
.product-card .number,
.product-card > .index,
.product-card > .num,
.product-card > span:first-child,
.product-grid article > span:first-child,
.products-grid article > span:first-child {
  font-size: 16px !important;
}

/* Product video numbers 01 / 02 / 03 */
.video-card .video-number,
.video-card .number,
.video-card > .index,
.video-card > .num,
.video-grid article > span:first-child,
.videos-grid article > span:first-child {
  font-size: 16px !important;
}


/* ============================================================
   HAZI TECH v13 — FINAL DESKTOP / MOBILE TYPOGRAPHY SEPARATION
   ============================================================ */

/* MOBILE: preserve the previously approved mobile hero value */
@media (max-width: 900px) {
  .hero .eyebrow {
    font-size: 13.8px !important;
  
  

  
}
}

/* DESKTOP / WEB ONLY */
@media (min-width: 901px) {

  /* AUTOMOTIVE LED ELECTRONICS */
  .hero .eyebrow {
    font-size: 16px !important;
  
  

  
}

  /* PRODUCT FAMILIES numbers only — 01 / 02 / 03 */
  .product-card .product-number,
  .product-card .number,
  .product-card > .index,
  .product-card > .num,
  .product-card > span:first-child,
  .product-grid article > span:first-child,
  .products-grid article > span:first-child {
    font-size: 16px !important;
  }

  /* PRODUCT VIDEOS numbers only — 01 / 02 / 03 */
  .video-card .video-number,
  .video-card .number,
  .video-card > .index,
  .video-card > .num,
  .video-grid article > span:first-child,
  .videos-grid article > span:first-child {
    font-size: 16px !important;
  }
}


/* ============================================================
   HAZI TECH v14 — EXACT CONFIRMED NUMBER SELECTORS
   Confirmed in Chrome DevTools.
   ============================================================ */

/* PRODUCT FAMILIES — 01 / 02 / 03 only */
.family-number {
  font-size: 16px !important;
}

/* PRODUCT VIDEOS — 01 / 02 / 03 only */
.video-link-grid span {
  font-size: 16px !important;
}

/* Desktop hero eyebrow */
@media (min-width: 901px) {
  .hero .eyebrow {
    font-size: 16px !important;
  
  

  
}
}

/* Mobile hero eyebrow remains at approved 13.8px */
@media (max-width: 900px) {
  .hero .eyebrow {
    font-size: 13.8px !important;
  
  

  
}
}


/* ============================================================
   HAZI TECH v20 — EXO 2 FIX
   Exo 2 is limited to the technical red uppercase labels that
   previously used Inter. Orbitron elements remain Orbitron.
   ============================================================ */

/* Intended Exo 2 technical labels */
.hero .eyebrow,
.product-family-section > .container > .section-heading .eyebrow,
.videos-overview .section-heading .eyebrow,
#features .section-heading .eyebrow,
#about .section-heading .eyebrow,
#support .section-heading .eyebrow,
#contact .section-heading .eyebrow,
.projects-home-card .eyebrow {
  font-family: "Rajdhani", sans-serif !important;
  font-weight: 700 !important;
}

/* Preserve Orbitron for numeric identifiers and other futuristic UI markers */
.family-number,
.video-link-grid span,
.feature-card > span,
.project-number,
.section-number,
.card-number,
.stat-number {
  font-family: "Orbitron", sans-serif !important;
  font-weight: 700 !important;
}


/* ============================================================
   HAZI TECH v22 — DESKTOP RAJDHANI SECTION LABEL STANDARD
   Apply the same 22px Rajdhani 700 treatment to comparable
   red uppercase section labels. Mobile remains unchanged.
   ============================================================ */
@media (min-width: 901px) {
  .hero .eyebrow,
  .product-family-section > .container > .section-heading .eyebrow,
  .videos-overview .section-heading .eyebrow,
  #features .section-heading .eyebrow,
  #about .section-heading .eyebrow,
  #support .section-heading .eyebrow,
  #contact .section-heading .eyebrow,
  .projects-home-card .eyebrow {
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
  }
}


/* ============================================================
   HAZI TECH v23 — ALL DESKTOP RED SECTION LABELS
   Rajdhani 700 / 22px for every .eyebrow-style section label.
   Mobile, Orbitron headings, numbers and normal red links remain unchanged.
   ============================================================ */
@media (min-width: 901px) {
  .eyebrow {
    font-family: "Rajdhani", sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
  }
}


/* ============================================================
   HAZI TECH v26 — INDEX PRODUCT VIDEO CARDS ONLY
   Replaces the three large YouTube embeds on index.html.
   kitt-scanner.html and all product images remain unchanged.
   ============================================================ */
.compact-product-video {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 28px 30px;
}

.compact-product-video .compact-video-icon {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
}

.compact-product-video .compact-video-icon span {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 3px solid var(--red);
  border-radius: 13px;
  color: var(--red);
  font-size: 32px;
  line-height: 1;
  padding-left: 5px;
}

.compact-product-video .video-label {
  margin-bottom: 9px;
}

.compact-product-video h3 {
  margin: 0 0 10px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(22px, 1.55vw, 30px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.compact-product-video p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.compact-product-video .compact-video-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.compact-product-video .compact-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
}

.compact-product-video .compact-play {
  margin-right: 8px;
}

.compact-product-video .compact-youtube-link {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.compact-product-video .compact-youtube-link:hover {
  color: #fff;
}

/* Preserve the existing mobile design philosophy while removing only the embeds. */
@media (max-width: 900px) {
  .compact-product-video {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
  }

  .compact-product-video .compact-video-icon {
    min-height: auto;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .compact-product-video .compact-video-icon span {
    width: 66px;
    height: 66px;
    font-size: 27px;
  }

  .compact-product-video .compact-video-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .compact-product-video .compact-video-button {
    width: 100%;
    min-width: 0;
  }
}


/* v42 — email address reminder */
.email-address-notice {
  display: none;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 46, 67, .42);
  border-radius: 10px;
  background: rgba(255, 46, 67, .08);
  color: #b8bec8;
  font-size: 13px;
  line-height: 1.45;
}
.email-address-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff;
  font-weight: 700;
}
#customerEmail:focus + .email-address-notice,
#customerEmail:not(:placeholder-shown) + .email-address-notice {
  display: block;
}


/* v47 — unified HAZI TECH Watch / Contact button styling */
.btn-watch-style,
.btn-contact-style {
  position: relative;
  min-height: 46px;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn-watch-style {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, #ff2338 0%, #d70d23 100%) !important;
  box-shadow: 0 10px 28px rgba(214, 11, 34, .20), inset 0 1px 0 rgba(255,255,255,.10);
}


.btn-contact-style {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: linear-gradient(180deg, rgba(22,24,29,.96), rgba(12,14,18,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}


.btn-watch-style:hover,
.btn-contact-style:hover {
  transform: translateY(-1px);
}

.btn-watch-style:hover {
  box-shadow: 0 14px 34px rgba(214, 11, 34, .28), inset 0 1px 0 rgba(255,255,255,.12);
}

.btn-contact-style:hover {
  border-color: rgba(255,255,255,.42) !important;
  background: linear-gradient(180deg, rgba(28,30,36,.98), rgba(14,16,20,.98)) !important;
}

@media (max-width: 620px) {
  .btn-watch-style,
  .btn-contact-style {
    min-height: 44px;
  }
}


/* v49 — Index page View/Visit YouTube CTA */
.index-youtube-red {
  color: #fff !important;
  background: linear-gradient(180deg, #ff2338 0%, #d70d23 100%) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 28px rgba(214,11,34,.20), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.index-youtube-red:hover {
  background: linear-gradient(180deg, #ff3044 0%, #e10f27 100%) !important;
  box-shadow: 0 14px 34px rgba(214,11,34,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}


/* =========================================================
   v51 — requested navigation and typography refinements
   ========================================================= */

/* Home button in top navigation */
.main-nav .nav-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: #f2f4f7;
  font-weight: 700;
}
.main-nav .nav-home-link:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
}

/* Hero stat descriptions:
   Core automotive LED product families
   Controllers & lighting effects
   Worldwide customers */
.hero-stats span {
  font-size: 15px !important;
}

/* Feature/trust strip */
.trust-items {
  font-size: 14px !important;
}

/* Product feature tags/chips */
.feature-pills span {
  font-size: 13px !important;
}

/* Support-link descriptions — +2px from their previous small-text size */
.support-links small {
  font-size: 14px !important;
}

/* Keep Home usable in the mobile menu */
@media (max-width: 900px) {
  .main-nav .nav-home-link {
    width: 100%;
    min-height: 40px;
  }
}


/* v73 — product user manual section */
.product-manual{padding-top:54px}
.manual-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  padding:26px 28px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(17,21,27,.96),rgba(10,13,17,.96));
}
.manual-card-copy h3{margin:0 0 8px;font-size:20px}
.manual-card-copy p{margin:0;color:#9da5ae;font-size:14px;line-height:1.6;max-width:760px}
.manual-card-action{min-width:210px;text-align:center}
.manual-coming-soon{width:100%;opacity:.72;cursor:not-allowed}
.manual-file-note{margin-top:8px;color:#7f8994;font-size:11px}
@media(max-width:760px){
  .manual-card{grid-template-columns:1fr}
  .manual-card-action{min-width:0}
}


/* v74 — Products dropdown navigation */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-toggle{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-caret{font-size:.8em;opacity:.75;transition:transform .18s ease}
.nav-dropdown.open .nav-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:280px;padding:8px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(10,13,17,.98);
  box-shadow:0 18px 46px rgba(0,0,0,.38);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:1000
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0)
}
.nav-dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;color:#d8dde3!important;text-decoration:none;white-space:nowrap}
.nav-dropdown-menu a:hover{color:#fff!important;background:rgba(255,255,255,.06)}
@media(max-width:900px){
  .nav-dropdown{display:block;width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:space-between}
  .nav-dropdown-menu{position:static;min-width:0;margin-top:8px;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.025)}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
}


/* v75 — Products nav typography matches the other index navigation items */
.nav-dropdown-toggle{
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}


/* v76 — index Products dropdown title exactly matches normal nav links */
.main-nav .nav-dropdown-toggle {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: #c7ccd2 !important;
}
.main-nav .nav-dropdown-toggle:hover,
.main-nav .nav-dropdown-toggle:focus {
  color: #fff !important;
}

/* v81 — carried-forward index branding */
.engineered-lighting-font-match{
  font-family:"Orbitron", sans-serif !important;
  font-size:18.15px !important;
}


/* v83 — Vehicle power supply notice */
.power-supply-notice{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.power-supply-notice strong{
  display:block;
  margin-bottom:3px;
  font-size:12px;
}
.power-supply-notice span{
  color:#9da5ae;
  font-size:11.7px;
  line-height:1.45;
}


/* v87 — Vehicle Light Controller 12"–80" slider rebuild */
body.tail-product .led-slider-wrap{
  --led-gap:1px;
  --led-count:160;
  --cell-width:calc((100% - (159 * var(--led-gap))) / 160);
  position:relative;
}

/* 160 visible 0.5" segments across the full 80" visual strip */
body.tail-product .led-progress{
  display:grid !important;
  grid-template-columns:repeat(160,minmax(0,1fr)) !important;
  gap:var(--led-gap) !important;
  width:100%;
  min-height:28px;
  align-items:center;
}

/* Keep 160 cells readable without forcing the old square aspect ratio */
body.tail-product .length-led{
  aspect-ratio:auto !important;
  height:18px !important;
  min-width:0 !important;
  border-radius:2px !important;
}

/* Native draggable range spans the actual selectable section only:
   12" (segment 24) through 80" (segment 160). */
body.tail-product .led-range-input{
  left:calc(
    (23.5 * var(--cell-width)) +
    (23 * var(--led-gap))
  ) !important;
  width:calc(
    136 * var(--cell-width) +
    136 * var(--led-gap)
  ) !important;
  top:0 !important;
  height:34px !important;
  opacity:1 !important;
  z-index:6;
  background:transparent !important;
}

/* Custom handle centers on the selected 0.5" segment. */
body.tail-product .led-slider-handle{
  --selected-index:40;
  left:calc(
    ((var(--selected-index) - .5) * var(--cell-width)) +
    ((var(--selected-index) - 1) * var(--led-gap))
  ) !important;
  width:max(5px, calc(var(--cell-width) * 1.8)) !important;
}

/* Meaningful scale markers, with 60" matching the automatic PSU threshold. */
body.tail-product .led-scale{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  justify-content:initial !important;
}
body.tail-product .led-scale span:nth-child(1){text-align:left}
body.tail-product .led-scale span:nth-child(2){text-align:center}
body.tail-product .led-scale span:nth-child(3){text-align:center}
body.tail-product .led-scale span:nth-child(4){text-align:right}

@media(max-width:780px){
  body.tail-product .led-slider-wrap{--led-gap:.5px;}
  body.tail-product .length-led{height:14px !important;}
}


/* v88 — Vehicle slider labels positioned by their real values (12"–80") */
body.tail-product .led-scale{
  display:block !important;
  position:relative !important;
  height:24px;
  width:100%;
}
body.tail-product .led-scale span{
  position:absolute !important;
  top:0;
  white-space:nowrap;
}
body.tail-product .led-scale .scale-12{
  left:0;
  transform:none;
}
body.tail-product .led-scale .scale-40{
  left:41.1764705882%;
  transform:translateX(-50%);
}
body.tail-product .led-scale .scale-60{
  left:70.5882352941%;
  transform:translateX(-50%);
}
body.tail-product .led-scale .scale-80{
  right:0;
  left:auto;
  transform:none;
}

/* v88 — Automatic upgraded PSU row matches the other configuration items */
body.tail-product #summaryPowerSupplyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
body.tail-product #summaryPowerSupplyRow[hidden]{
  display:none !important;
}
body.tail-product #summaryPowerSupplyRow span{
  font:inherit !important;
  color:inherit;
}
body.tail-product #summaryPowerSupplyRow b{
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
  white-space:nowrap;
}


/* v89 — 12px red USD label on LED Scanner + Vehicle Light Controller */
body.scanner-product .price-currency,
body.scanner-product .currency,
body.scanner-product .usd,
body.scanner-product .total-currency,
body.scanner-product .price-row small,
body.scanner-product .estimated-total small,
body.tail-product .price-currency,
body.tail-product .currency,
body.tail-product .usd,
body.tail-product .total-currency,
body.tail-product .price-row small,
body.tail-product .estimated-total small{
  font-size:12px !important;
}


/* v91 — Vehicle Light Controller slider reference labels
   Full visual strip represents 0"–80"; selectable input remains 12"–80". */
body.tail-product .vehicle-led-scale{
  display:block !important;
  position:relative !important;
  height:24px;
  width:100%;
}
body.tail-product .vehicle-led-scale span{
  position:absolute !important;
  top:0;
  white-space:nowrap;
}
body.tail-product .vehicle-led-scale .scale-0{
  left:0;
  transform:none;
}
body.tail-product .vehicle-led-scale .scale-12{
  left:15%;
  transform:translateX(-50%);
}
body.tail-product .vehicle-led-scale .scale-40{
  left:50%;
  transform:translateX(-50%);
}
body.tail-product .vehicle-led-scale .scale-60{
  left:75%;
  transform:translateX(-50%);
}
body.tail-product .vehicle-led-scale .scale-80{
  right:0;
  left:auto;
  transform:none;
}

/* v91 — Upgraded Power Supply row matches normal configuration-item spacing/color */
body.tail-product #summaryPowerSupplyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px !important;
  margin-top:20px !important;
  border-top:1px solid rgba(255,255,255,.10);
  color:#aeb5bf !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
body.tail-product #summaryPowerSupplyRow[hidden]{
  display:none !important;
}
body.tail-product #summaryPowerSupplyRow span{
  color:inherit !important;
  font:inherit !important;
}
body.tail-product #summaryPowerSupplyRow b{
  color:#f4f5f7 !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  white-space:nowrap;
}


/* v92 — precise Vehicle Light Controller slider labels + PSU row */
body.tail-product .vehicle-led-scale{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:24px !important;
}
body.tail-product .vehicle-led-scale span{
  position:absolute !important;
  top:0 !important;
  white-space:nowrap !important;
}
body.tail-product .vehicle-led-scale .scale-0{
  left:0% !important;
  transform:none !important;
}
body.tail-product .vehicle-led-scale .scale-12{
  left:15% !important;
  transform:translateX(-50%) !important;
}
body.tail-product .vehicle-led-scale .scale-40{
  left:50% !important;
  transform:translateX(-50%) !important;
}
body.tail-product .vehicle-led-scale .scale-60{
  left:75% !important;
  transform:translateX(-50%) !important;
}
body.tail-product .vehicle-led-scale .scale-80{
  left:100% !important;
  right:auto !important;
  transform:translateX(-100%) !important;
}

body.tail-product #summaryPowerSupplyRow{
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding-top:20px !important;
  margin-top:20px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color:#aeb5bf !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}
body.tail-product #summaryPowerSupplyRow:not([hidden]){
  display:flex !important;
}
body.tail-product #summaryPowerSupplyRow[hidden]{
  display:none !important;
}
body.tail-product #summaryPowerSupplyRow span{
  color:#aeb5bf !important;
  font:inherit !important;
}
body.tail-product #summaryPowerSupplyRow b{
  color:#f4f5f7 !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  white-space:nowrap !important;
}


/* v93 — final Vehicle Light Controller slider/PSU refinements */

/* Move only the 60" reference label to the user-requested position. */
body.tail-product .vehicle-led-scale .scale-60{
  left:72% !important;
  transform:translateX(-50%) !important;
}

/* PSU row sits between separators like the other summary rows. */
body.tail-product #summaryPowerSupplyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 !important;
  padding:16px 0 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  color:#aeb5bf !important;
}
body.tail-product #summaryPowerSupplyRow[hidden]{
  display:none !important;
}
body.tail-product #summaryPowerSupplyRow span{
  color:#aeb5bf !important;
  font:inherit !important;
}
body.tail-product #summaryPowerSupplyRow b{
  color:#f4f5f7 !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
}


/* v94 — align 60" label exactly under the 60" slider handle */
body.tail-product .vehicle-led-scale .scale-60{
  left:75% !important;
  transform:translateX(-50%) !important;
}


/* v95 — scale labels use the exact same 160-cell geometry as the slider handle */
body.tail-product .vehicle-led-scale{
  --led-gap:1px;
  --cell-width:calc((100% - (159 * var(--led-gap))) / 160);
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:24px !important;
}
body.tail-product .vehicle-led-scale span{
  position:absolute !important;
  top:0 !important;
  white-space:nowrap !important;
}

/* End labels sit at the physical ends of the 0–80" visual. */
body.tail-product .vehicle-led-scale .scale-0{
  left:0 !important;
  transform:none !important;
}
body.tail-product .vehicle-led-scale .scale-80{
  left:auto !important;
  right:0 !important;
  transform:none !important;
}

/* 12" = cell 24, 40" = cell 80, 60" = cell 120.
   This is the same formula used by .led-slider-handle. */
body.tail-product .vehicle-led-scale .scale-12{
  left:calc((23.5 * var(--cell-width)) + (23 * var(--led-gap))) !important;
  transform:translateX(-50%) !important;
}
body.tail-product .vehicle-led-scale .scale-40{
  left:calc((79.5 * var(--cell-width)) + (79 * var(--led-gap))) !important;
  transform:translateX(-50%) !important;
}
body.tail-product .vehicle-led-scale .scale-60{
  left:calc((119.5 * var(--cell-width)) + (119 * var(--led-gap))) !important;
  transform:translateX(-50%) !important;
}

@media(max-width:780px){
  body.tail-product .vehicle-led-scale{--led-gap:.5px;}
}