/*══════════════════════════════════════════════════════════════════
  EMS SENSOR — Design Tokens v1.0
  Edge-Lit Precision · Cool Industrial · Dark Theme
  ══════════════════════════════════════════════════════════════════*/

/*────────────────────────────────────────────────────────────────
  ROOT: Design Tokens
  ────────────────────────────────────────────────────────────────*/
:root {
  /* ── Typography ── */
  --font-display: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", "Courier New", monospace;
  --font-body: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;

  /* Type Scale — Major Third (1.25) */
  --text-xs:    clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);   /* 11→12 */
  --text-sm:    clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);   /* 13→14 */
  --text-base:  clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15→16 */
  --text-md:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);     /* 17→19 */
  --text-lg:    clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20→24 */
  --text-xl:    clamp(1.625rem, 1.45rem + 0.8vw, 2.125rem);    /* 26→34 */
  --text-2xl:   clamp(2rem, 1.7rem + 1.2vw, 2.75rem);          /* 32→44 */
  --text-3xl:   clamp(2.5rem, 2rem + 1.8vw, 3.75rem);          /* 40→60 */

  /* ── Spacing (8px base) ── */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2.5rem;   /* 40px */
  --space-xl: 4rem;     /* 64px */
  --space-2xl: 6rem;    /* 96px */
  --space-3xl: 8rem;    /* 128px */

  /* Section gaps */
  --section-gap-md: var(--space-2xl);
  --section-gap-lg: var(--space-3xl);

  /* ── Color Palette: Cool Industrial ── */

  /* Backgrounds — deep charcoal-navy */
  --bg-deep:      #0B1018;   /* body background */
  --bg-surface:   #141C28;   /* cards, panels */
  --bg-elevated:  #1A2433;   /* modals, dropdowns */
  --bg-input:     #0F1720;   /* form inputs */

  /* Brand: Electric Teal-Cyan */
  --accent:            #00D4AA;   /* primary accent */
  --accent-bright:     #00E5FF;   /* hover/active glow */
  --accent-dim:        #009E7E;   /* subdued state */
  --accent-glow:       rgba(0, 212, 170, 0.20);  /* glow borders */
  --accent-glow-intense: rgba(0, 212, 170, 0.40); /* intense glow */

  /* Secondary Accent: Cool Amber (warning/CTA) */
  --amber:        #FF8C42;
  --amber-glow:   rgba(255, 140, 66, 0.25);

  /* Neutrals — Steel/Slate scale */
  --neutral-100:  #E2E8F0;   /* primary text on dark */
  --neutral-200:  #CBD5E1;   /* secondary text */
  --neutral-300:  #94A3B8;   /* muted text */
  --neutral-400:  #64748B;   /* placeholder, disabled */
  --neutral-500:  #475569;   /* borders */
  --neutral-600:  #334155;   /* subtle borders */
  --neutral-700:  #1E293B;   /* surface borders */

  /* Semantic */
  --text-primary:   var(--neutral-100);
  --text-secondary: var(--neutral-200);
  --text-muted:     var(--neutral-300);
  --text-inverse:   #0B1018;
  --border-default: var(--neutral-500);
  --border-subtle:  var(--neutral-600);
  --border-glow:    rgba(0, 212, 170, 0.25);

  /* ── Depth (Edge-Lit, not shadow-heavy) ── */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-pill: 4px;

  --border-card:   1px solid rgba(0, 212, 170, 0.12);
  --border-card-hover: 1px solid var(--accent-glow);
  --border-input:  1px solid var(--neutral-500);

  /* Only shadow: subtle elevation for modals/dropdowns */
  --elevate-modal: 0 0 0 1px rgba(0, 212, 170, 0.15), 0 8px 40px rgba(0, 0, 0, 0.6);

  /* ── Layout ── */
  --max-width: 1280px;
  --nav-height: 64px;

  /* ── Motion ── */
  --ease-calibrated: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  --stagger-delay: 80ms;
}

/*────────────────────────────────────────────────────────────────
  RESET & BASE
  ────────────────────────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--text-primary);
  background:var(--bg-deep);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-calibrated)}
a:hover{color:var(--accent-bright)}
::selection{background:rgba(0,212,170,0.3);color:var(--neutral-100)}

/*────────────────────────────────────────────────────────────────
  TYPOGRAPHY UTILITIES
  ────────────────────────────────────────────────────────────────*/
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;line-height:1.15}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:400;line-height:1.2;color:var(--neutral-100)}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}

.section-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;letter-spacing:-0.01em}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.12em;
  display:block;
  margin-bottom:var(--space-xs);
}
.lead{font-size:var(--text-md);color:var(--text-secondary);line-height:1.7;max-width:64ch}

/*────────────────────────────────────────────────────────────────
  LAYOUT UTILITIES
  ────────────────────────────────────────────────────────────────*/
.container{
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--space-md);
}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-lg)}

/* Section spacing */
.section-gap-md{padding-block:var(--section-gap-md)}
.section-gap-lg{padding-block:var(--section-gap-lg)}

/*────────────────────────────────────────────────────────────────
  BUTTONS
  ────────────────────────────────────────────────────────────────*/
.btn{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-family:var(--font-mono);font-size:var(--text-xs);
  font-weight:500;text-transform:uppercase;letter-spacing:0.08em;
  padding:0.75rem 1.5rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--duration-fast) var(--ease-calibrated);
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--accent);
  color:var(--text-inverse);
  border-color:var(--accent);
}
.btn-primary:hover{
  background:var(--accent-bright);
  border-color:var(--accent-bright);
  color:var(--text-inverse);
  box-shadow:0 0 24px var(--accent-glow);
}
.btn-outline{
  background:transparent;
  color:var(--accent);
  border-color:var(--accent-glow);
}
.btn-outline:hover{
  border-color:var(--accent);
  box-shadow:0 0 16px var(--accent-glow);
  color:var(--accent-bright);
}
.btn-inverse{
  background:var(--neutral-100);
  color:var(--text-inverse);
  border-color:var(--neutral-100);
}
.btn-inverse:hover{
  background:white;
  border-color:white;
  color:var(--bg-deep);
}
.btn-outline-inverse{
  background:transparent;
  color:var(--neutral-200);
  border-color:var(--neutral-400);
}
.btn-outline-inverse:hover{
  border-color:var(--neutral-100);
  color:var(--neutral-100);
}
.btn-amber{
  background:var(--amber);
  color:var(--bg-deep);
  border-color:var(--amber);
}
.btn-amber:hover{
  box-shadow:0 0 20px var(--amber-glow);
  color:var(--bg-deep);
}

/*────────────────────────────────────────────────────────────────
  CARDS
  ────────────────────────────────────────────────────────────────*/
.card{
  background:var(--bg-surface);
  border:var(--border-card);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color var(--duration-base) var(--ease-calibrated);
}
.card:hover{border-color:var(--accent-glow)}
.card-media{position:relative;overflow:hidden;background:var(--bg-deep)}
.card-media img{width:100%;height:240px;object-fit:cover;transition:transform var(--duration-slow) var(--ease-calibrated)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{padding:var(--space-md)}
.card-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:400;margin-bottom:var(--space-xs)}
.card-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:1.6;margin-bottom:var(--space-sm)}

/* Badge */
.badge{
  position:absolute;top:var(--space-sm);right:var(--space-sm);
  font-family:var(--font-mono);font-size:var(--text-xs);
  background:var(--accent);color:var(--text-inverse);
  padding:0.25rem 0.625rem;border-radius:var(--radius-pill);
  letter-spacing:0.06em;text-transform:uppercase;
}

/* Spec Mini (card specs) */
.spec-mini{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs);margin-bottom:var(--space-md)}
.spec-mini dt{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}
.spec-mini dd{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent);font-weight:500}

/*────────────────────────────────────────────────────────────────
  FORM ELEMENTS
  ────────────────────────────────────────────────────────────────*/
input,textarea,select{
  width:100%;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-primary);
  background:var(--bg-input);
  border:1px solid var(--neutral-500);
  border-radius:var(--radius-sm);
  padding:0.75rem 1rem;
  transition:border-color var(--duration-fast) var(--ease-calibrated);
  outline:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
textarea{resize:vertical;min-height:120px}
label{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:0.375rem;
}
.form-group{margin-bottom:var(--space-md)}

/*────────────────────────────────────────────────────────────────
  MEDIA SPLIT
  ────────────────────────────────────────────────────────────────*/
.media-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:center;
}
.media-split.reverse{direction:rtl}
.media-split.reverse .media-text{direction:ltr}
.media-img{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--neutral-600);
}
.media-img img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
}
.feature-list{
  list-style:none;
  display:flex;flex-direction:column;gap:var(--space-xs);
  margin:var(--space-md) 0;
}
.feature-list li{
  padding-left:1.5em;position:relative;
  font-size:var(--text-sm);color:var(--text-secondary);
}
.feature-list li::before{
  content:'';position:absolute;left:0;top:0.55em;
  width:6px;height:6px;
  background:var(--accent);
  border-radius:1px;
}

/*────────────────────────────────────────────────────────────────
  NAVIGATION
  ────────────────────────────────────────────────────────────────*/
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-height);
  background:rgba(11,16,24,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,212,170,0.08);
  transition:border-color var(--duration-base) var(--ease-calibrated);
}
.site-nav.scrolled{border-bottom-color:var(--accent-glow)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--space-md);
}
.nav-brand{
  font-family:var(--font-display);
  font-size:var(--text-md);
  color:var(--accent);
  letter-spacing:0.04em;
  text-decoration:none;
  font-weight:500;
}
.nav-links{
  display:flex;align-items:center;gap:var(--space-lg);
  list-style:none;
}
.nav-links a{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.08em;
  text-decoration:none;
  transition:color var(--duration-fast);
}
.nav-links a:hover{color:var(--accent)}
.nav-cta{margin-left:var(--space-sm)}
.nav-toggle{
  display:none;
  background:none;border:none;color:var(--text-primary);
  font-size:1.5rem;cursor:pointer;padding:var(--space-xs);
}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-menu{
  display:none;
  position:absolute;top:100%;left:0;
  min-width:220px;
  background:var(--bg-elevated);
  border:1px solid var(--accent-glow);
  border-radius:var(--radius-sm);
  padding:var(--space-xs) 0;
  box-shadow:var(--elevate-modal);
}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;
  padding:0.5rem 1rem;
  font-size:var(--text-xs);
  color:var(--text-secondary);
}
.nav-dropdown-menu a:hover{background:rgba(0,212,170,0.08);color:var(--accent)}

/*────────────────────────────────────────────────────────────────
  CTA BAND
  ────────────────────────────────────────────────────────────────*/
.cta-band{
  background:linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border-top:1px solid var(--accent-glow);
  border-bottom:1px solid var(--accent-glow);
}
.cta-band-inner{
  text-align:center;
  max-width:640px;
  margin-inline:auto;
}
.cta-band-title{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}
.cta-band-lead{color:var(--text-muted);margin-bottom:var(--space-lg)}
.cta-band-actions{
  display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;
}

/*────────────────────────────────────────────────────────────────
  FOOTER
  ────────────────────────────────────────────────────────────────*/
.site-footer{
  background:var(--bg-surface);
  border-top:1px solid var(--neutral-600);
  padding-block:var(--space-xl) var(--space-md);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-lg)}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-muted);
  margin-bottom:var(--space-sm);
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-col a{font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  margin-top:var(--space-lg);
  padding-top:var(--space-md);
  border-top:1px solid var(--neutral-600);
  font-size:var(--text-xs);color:var(--text-muted);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-xs);
}

/*────────────────────────────────────────────────────────────────
  MODAL
  ────────────────────────────────────────────────────────────────*/
.modal-overlay{
  display:none;
  position:fixed;inset:0;z-index:200;
  background:rgba(11,16,24,0.88);
  align-items:center;justify-content:center;
  padding:var(--space-md);
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--bg-elevated);
  border:1px solid var(--accent-glow);
  border-radius:var(--radius-sm);
  padding:var(--space-lg);
  max-width:560px;width:100%;
  max-height:90vh;overflow-y:auto;
  box-shadow:var(--elevate-modal);
}
.modal-close{
  position:absolute;top:var(--space-sm);right:var(--space-sm);
  background:none;border:none;
  font-family:var(--font-mono);font-size:var(--text-lg);
  color:var(--text-muted);cursor:pointer;
  padding:var(--space-xs);
}
.modal-close:hover{color:var(--accent)}

/*────────────────────────────────────────────────────────────────
  REVEAL ANIMATION
  ────────────────────────────────────────────────────────────────*/
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--duration-reveal) var(--ease-calibrated),
             transform var(--duration-reveal) var(--ease-calibrated);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Stagger children */
.reveal-stagger{opacity:0;transform:translateY(24px)}
.reveal-stagger.visible{
  opacity:1;transform:translateY(0);
  transition:opacity var(--duration-reveal) var(--ease-calibrated),
             transform var(--duration-reveal) var(--ease-calibrated);
}

/*────────────────────────────────────────────────────────────────
  PRECISION STRIP (Stat counters)
  ────────────────────────────────────────────────────────────────*/
.precision-strip{
  background:var(--bg-surface);
  border-top:1px solid var(--border-glow);
  border-bottom:1px solid var(--border-glow);
}
.precision-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  text-align:center;
}
.precision-item{
  padding:var(--space-lg) var(--space-md);
  border-right:1px solid var(--neutral-600);
}
.precision-item:last-child{border-right:none}
.precision-value{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  color:var(--accent);
  display:block;
}
.precision-label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:var(--space-xs);
}

/*────────────────────────────────────────────────────────────────
  SPEC TABLE
  ────────────────────────────────────────────────────────────────*/
.spec-table{
  width:100%;border-collapse:collapse;
  font-family:var(--font-mono);font-size:var(--text-sm);
}
.spec-table th,.spec-table td{
  padding:0.75rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--neutral-600);
}
.spec-table th{
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:var(--text-xs);
  font-weight:500;
  background:var(--bg-surface);
}
.spec-table td{color:var(--text-primary)}
.spec-table tr:hover td{background:rgba(0,212,170,0.04)}

/*────────────────────────────────────────────────────────────────
  PAGE HEADER
  ────────────────────────────────────────────────────────────────*/
.page-header{
  padding-top:calc(var(--nav-height) + var(--space-xl));
  padding-bottom:var(--space-xl);
  text-align:center;
}
.page-header h1{font-size:var(--text-3xl)}
.page-header p{color:var(--text-muted);max-width:56ch;margin-inline:auto;margin-top:var(--space-sm)}
.breadcrumb{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-muted);
  margin-bottom:var(--space-sm);
}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--accent)}

/*────────────────────────────────────────────────────────────────
  HERO DASHBOARD (Index)
  ────────────────────────────────────────────────────────────────*/
.hero-dashboard{
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav-height);
}
.hero-dashboard-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--neutral-600);
  border:1px solid var(--neutral-600);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.hero-zone{
  background:var(--bg-surface);
  padding:var(--space-lg);
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
  gap:var(--space-sm);
  transition:background var(--duration-base) var(--ease-calibrated);
}
.hero-zone:hover{background:var(--bg-elevated)}
.hero-zone-icon{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-glow);
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-xs);
  color:var(--accent);
}
.hero-zone h3{
  font-family:var(--font-display);
  font-size:var(--text-md);
  color:var(--neutral-100);
}
.hero-zone .hero-spec{
  font-family:var(--font-mono);
  font-size:var(--text-2xl);
  color:var(--accent);
  font-weight:500;
}
.hero-zone .hero-spec-unit{
  font-size:var(--text-xs);
  color:var(--text-muted);
  display:block;
}
.hero-title-area{
  text-align:center;
  padding-block:var(--space-xl) var(--space-lg);
}
.hero-title-area h1{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:400;
  color:var(--neutral-100);
}
.hero-title-area .hero-sub{
  font-size:var(--text-md);
  color:var(--text-muted);
  margin-top:var(--space-sm);
}

/*────────────────────────────────────────────────────────────────
  APP GRID
  ────────────────────────────────────────────────────────────────*/
.app-item{
  text-align:center;
  padding:var(--space-lg) var(--space-sm);
}
.app-item-icon{
  width:48px;height:48px;
  margin-inline:auto;margin-bottom:var(--space-sm);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-glow);
  border-radius:var(--radius-sm);
  color:var(--accent);
}
.app-item h4{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  margin-bottom:0.25rem;
}
.app-item p{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5}

/*────────────────────────────────────────────────────────────────
  PRODUCT PAGE
  ────────────────────────────────────────────────────────────────*/
.filter-tabs{
  display:flex;gap:var(--space-xs);flex-wrap:wrap;
  justify-content:center;
  margin-bottom:var(--space-lg);
}
.filter-tab{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:0.08em;
  padding:0.5rem 1rem;
  background:transparent;
  color:var(--text-muted);
  border:1px solid var(--neutral-500);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--duration-fast) var(--ease-calibrated);
}
.filter-tab:hover{color:var(--accent);border-color:var(--accent-glow)}
.filter-tab.active{
  background:var(--accent);
  color:var(--text-inverse);
  border-color:var(--accent);
}

/* Product Hero (Detail) */
.product-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:start;
  padding-top:calc(var(--nav-height) + var(--space-lg));
}
.product-hero-img{
  background:var(--bg-surface);
  border:1px solid var(--neutral-600);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.product-hero-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.product-hero-body h1{font-size:var(--text-3xl);margin-bottom:var(--space-xs)}
.product-hero-body .product-tagline{
  font-size:var(--text-md);color:var(--text-muted);margin-bottom:var(--space-md);
}
.product-hero-body .spec-mini-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);
  margin:var(--space-md) 0;padding:var(--space-md);
  background:var(--bg-surface);border:1px solid var(--neutral-600);
  border-radius:var(--radius-sm);
}

/* Cross-sell */
.cross-sell-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}

/*────────────────────────────────────────────────────────────────
  ABOUT PAGE
  ────────────────────────────────────────────────────────────────*/
.mission-statement{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  line-height:1.3;
  color:var(--neutral-100);
  max-width:24ch;
  margin-inline:auto;text-align:center;
}
.timeline{position:relative;padding:var(--space-xl) 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;
  width:1px;background:var(--neutral-500);
}
.timeline-item{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.timeline-item:nth-child(odd) .timeline-content{order:-1}
.timeline-year{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  color:var(--accent);
}
.timeline-content{padding:var(--space-md);background:var(--bg-surface);border:1px solid var(--neutral-600);border-radius:var(--radius-sm)}

/*────────────────────────────────────────────────────────────────
  RESPONSIVE
  ────────────────────────────────────────────────────────────────*/
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-dashboard-inner{grid-template-columns:1fr}
  .precision-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cross-sell-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  :root{--nav-height:56px}
  .grid-2,.grid-3,.grid-5{grid-template-columns:1fr}
  .media-split{grid-template-columns:1fr;gap:var(--space-lg)}
  .product-hero{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .timeline-item:nth-child(odd) .timeline-content{order:0}
  .timeline::before{left:1rem}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.mobile-open{
    display:flex;flex-direction:column;
    position:absolute;top:var(--nav-height);left:0;right:0;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--accent-glow);
    padding:var(--space-md);
    gap:var(--space-sm);
  }
  .precision-grid{grid-template-columns:1fr 1fr}
  .precision-item{border-right:none;border-bottom:1px solid var(--neutral-600)}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .container{padding-inline:var(--space-sm)}
  .precision-grid{grid-template-columns:1fr}
  .cta-band-actions{flex-direction:column;align-items:center}
}