:root{--bg:#0b1020;--card:#0f1425;--ink:#eef3f8;--muted:#9aa5b1;--line:rgba(255,255,255,.08);--accent:#6ee7ff;--accent-2:#7bf8cf;--hero-max-h:800px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial}
a{color:var(--accent);text-decoration:none}img{max-width:100%;height:auto;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.65);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px}.brand img{width:30px;height:30px}.brand span{font-size:1.05rem}
nav a{margin-left:18px;opacity:.9}.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.btn.primary{background:var(--accent);color:#02131d;border-color:transparent;font-weight:700}.btn.ghost{background:transparent}.btn.small{padding:8px 12px;border-radius:10px;font-size:.92rem}
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 70% 0%, rgba(110,231,255,.12), transparent 60%),radial-gradient(600px 400px at 10% 20%, rgba(123,248,207,.08), transparent 60%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,12,24,.2), rgba(8,12,24,1) 85%),url('assets/hero-trailer-wave.svg') center/cover no-repeat;opacity:.75;pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;padding:72px 20px 36px;position:relative}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.8rem}
.hero h1{font-size:2.6rem;line-height:1.1;margin:.4rem 0 .6rem}.hero p{max-width:760px;color:var(--muted);font-size:1.125rem;margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b1120}
.trust-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center}
.badge{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:8px 12px;border-radius:12px;font-size:.95rem}
.section{max-width:1100px;margin:0 auto;padding:40px 20px}.section h2{font-size:1.8rem;margin:0 0 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}.card p{color:var(--muted);margin:0 0 8px}.card ul{margin:8px 0 0 18px;color:var(--muted)}
.row{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}.row.reverse{grid-template-columns:.8fr 1.2fr}
.ill{background:linear-gradient(180deg,#0b1224,#0a1528);border:1px solid var(--line);border-radius:16px;padding:16px;height:100%}
.pricing{background:linear-gradient(180deg,#091225,#0b0f1e);border:1px solid var(--line);border-radius:16px;padding:18px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.tier h3{margin:0}.tier .price{font-weight:800;font-size:1.4rem;margin:4px 0 8px;color:var(--accent)}.tier small{color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding:20px}.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted)}
@media (max-width:1000px){.row,.row.reverse{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.price-grid{grid-template-columns:1fr}.hero h1{font-size:2.1rem}}
/* === Full-bleed hero background carousel === */
/* Full-bleed hero background carousel (adjusted height, gentler crop) */
.hero.hero--bg-carousel {
  position: relative;
  padding: 0;
  /* Height: between 48vh and 68vh, prefers a 16:9 feel via 56.25vw */
  height: min(clamp(48vh, 56.25vw, 68vh), var(--hero-max-h));
  display: grid;
  place-items: stretch;
  overflow: clip;
}

.hero-carousel {
  position: absolute;
  inset: 0;
  width: 100vw;             /* flush to both sides of the screen */
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.hero-carousel__viewport { position: absolute; inset: 0; }
.hero-carousel__track {
  display: flex;
  height: 100%;
  transition: transform .6s ease;
  will-change: transform;
}
.hero-carousel__slide { position: relative; height: 100%; }
.hero-carousel__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;        /* crop without distortion */
  object-position: 50% 45%; /* slightly bias upward to favor faces/equipment; tweak per image if needed */
  filter: saturate(1.03);
}

/* Legibility */
.hero-carousel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* Foreground content */
.hero.hero--bg-carousel .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 60px 20px 28px;
}

@media (max-width: 640px) {
  .hero.hero--bg-carousel { height: clamp(46vh, 65vw, 58vh); } /* a bit shorter on small screens */
  .hero.hero--bg-carousel .hero-inner { padding: 44px 16px 22px; }
}

.section.healthspan { text-align: center; }
.section.healthspan .grid-3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 24px; margin-top: 20px; }
.section.healthspan .icon { width: 60px; height: 60px; margin-bottom: 12px; }
.section.healthspan .quote-banner { margin-top: 32px; font-style: italic; font-size: 1.2rem; color: #6ee7ff; }


.section.videos { text-align: center; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; margin-top: 20px; }
.video-card img { width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: transform .25s; }
.video-card img:hover { transform: scale(1.03); }
.video-card h3 { margin-top: 10px; font-size: 1rem; }

.icon { width:60px; height:60px; margin-bottom:12px; color:#6ee7ff; }

/* ===== Responsive Header / Nav ===== */

/* Base header already in your theme; these are additions/refinements */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,16,32,.75); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }

/* Toggle button (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink); cursor: pointer;
  position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: ""; position: absolute; left: 50%; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px; transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-bar { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after  { top: 7px; }

/* Turn into “X” when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar   { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateX(-50%) rotate(-90deg); top: 0; }

/* Menu container */
.nav-menu { display: flex; align-items: center; gap: 18px; }

/* --- Mobile layout --- */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* stack menu under header, full width */
  .nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; grid-template-columns: 1fr; gap: 8px;
    padding: 12px 16px;
    background: rgba(11,16,32,.98);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease;
  }
  /* Show when open */
  .nav-menu.is-open { max-height: 420px; } /* enough for all links */

  /* Links grow for touch targets */
  .nav-menu a { padding: 10px 6px; display: inline-block; }

  /* Make the two buttons full-width on mobile */
  .nav-menu .btn { width: 100%; justify-content: center; }
}

/* Small fix for iOS notch safe area (optional) */
@supports (padding: max(0px)) {
  .site-header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}