/* ============================================
   KIPKUL — Landing v4 (premium light)
   ============================================ */
:root {
  --white: #FFFFFF;
  --page: #F3F2F0;
  --cream: #FAFAFB;
  --cream-warm: #F5F2EC;
  --cream-deep: #ECE7DE;
  --text: #111111;
  --text-body: #2A2A2A;
  --text-muted: #6B6B6B;
  --text-soft: #8C8C8C;
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  /* Brand green — Kickstarter waitlist CTAs only */
  --kickstarter: #40BA76;
  --kickstarter-hover: #2E9A5E;
  --kickstarter-shadow: rgba(255,107,74,0.5);
  --kickstarter-shadow-hover: rgba(64,186,118,0.6);

  /* Primary text/fill replacement for old green */
  --dark: #252a41;
  --dark-soft: rgba(37,42,65,0.08);

  /* Accent blue — icons, highlights, decorative */
  --accent: #ff6b4a;
  --accent-soft: rgba(255,107,74,0.14);
  --accent-light: #FF9E85;

  /* Legacy green vars retained for safety (no longer used) */
  --green: var(--dark);
  --green-dark: var(--dark);
  --green-soft: var(--accent-soft);

  --orange: #ff6b4a;
  --orange-dark: #E5563A;
  --coral: #E07C5C;
  --purple: #7654E0;

  --night: #252a41;
  --night-soft: #1F1F1F;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-card: 0 30px 60px -28px rgba(17,17,17,0.18);
  --shadow-soft: 0 14px 32px -16px rgba(17,17,17,0.12);
  --shadow-hover: 0 36px 72px -24px rgba(17,17,17,0.22);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* Kill the tap flash, the iOS link-drag line, the long-press callout, and the
   stray focus outline on touch/click (keyboard focus kept via :focus-visible) */
a, button, [role="button"], summary {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) { outline: none; }
.nav-links, .nav-links *, .lang-dd, .lang-dd *, .sensor-orbit .sensor-card, .sensor-orbit .sensor-card * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
/* Icons/labels don't capture the touch, so iOS can't drag them (the <a> handles the tap) */
.nav-links .nav-ico, .nav-links .nav-ico svg, .nav-links .nav-txt { pointer-events: none; }
html {
  scroll-behavior: smooth;
  /* Nav is fixed at the top of the viewport; this leaves room for it on every
     anchor jump (nav links, CTAs, etc.) so the target section's top edge
     sits flush with the nav's bottom edge — no previous-section sliver. */
  --nav-height: 76px;
  scroll-padding-top: var(--nav-height);
  /* Reserve the scrollbar gutter so that opening a modal (body overflow:hidden)
     doesn't remove the scrollbar and shift the fixed nav / page content. */
  scrollbar-gutter: stable;
}
/* Belt-and-suspenders: every section that can be linked to gets the same
   scroll-margin-top, so scrollIntoView() and href="#…" both land cleanly. */
.hero,
.waitlist,
.problem,
.system,
.device-section,
.app,
.diff,
.pricing,
.team,
.faq {
  scroll-margin-top: var(--nav-height);
}
body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* position:fixed (not just overflow:hidden) so iOS Safari actually locks the
   background scroll behind the modal/bottom-sheet. JS stores & restores the
   scroll position via an inline `top`. */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* The hero dog + title use `transform`, which promotes them to their own
   compositing layers. The checkout/contact modals use backdrop-filter:blur,
   which fails to capture those layers (they "punch through" sharp & bright
   over the dimmed modal). The hero is fully covered while a modal is open,
   so hide those transformed layers to kill the bleed-through. */
body.modal-open .hero-photo,
body.modal-open .hero-title { visibility: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease), opacity .2s var(--ease); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 22px;
}
.eyebrow-green { color: var(--green-dark); }
.hero-title {
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 24px;
}
.display {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}
.display em { font-style: normal; color: inherit; }
.display-lg {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 18px;
}
.section-title {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 0 22px;
}
.section-lead {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 48px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-primary {
  background: var(--kickstarter);
  color: var(--white);
  box-shadow: 0 14px 30px -10px var(--kickstarter-shadow);
}
.btn-primary:hover { background: var(--kickstarter-hover); transform: translateY(-2px); box-shadow: 0 20px 38px -10px var(--kickstarter-shadow-hover); }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.btn-ghost:hover { background: var(--cream); border-color: rgba(0,0,0,0.25); }

/* NAV — logo (left) + CTA, then big gap, then nav links + lang on the right */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.nav.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); box-shadow: 0 1px 0 var(--border); }
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 56px; /* generous space between logo and Join Waitlist */
}
.nav-logo img { height: 26px; display: block; }
.nav-cta { padding: 5px 16px; font-size: 13px; letter-spacing: -0.005em; }
.nav-cta-short { display: none; }
.lang-select {
  display: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  appearance: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto; /* push to far right */
}
.nav-links a {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-body);
  letter-spacing: -0.005em;
  position: relative;
  padding: 4px 0;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 1px;
  background: var(--text);
  transition: width .25s var(--ease), left .25s var(--ease);
}
.nav-links a:hover::after { width: 100%; left: 0; }
.nav-ico { display: none; } /* nav icons appear only in the mobile menu */
.nav-links { margin-right: 110px; /* reserve room for the absolutely positioned lang-toggle */ }
.lang-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 4px;
}
.lang-btn {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.lang-btn.active { color: var(--text); }
.lang-btn:not(.active):hover { color: var(--text); }
.lang-divider {
  width: 1px;
  height: 12px;
  background: var(--border-strong);
  margin: 0 2px;
}

/* Compact language dropdown — used on mobile (hidden on desktop) */
.lang-dd { display: none; position: relative; }
.lang-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.lang-dd-btn:hover,
.lang-dd.open .lang-dd-btn { background: rgba(17,17,17,0.05); border-color: rgba(17,17,17,0.22); }
.lang-dd-chev { transition: transform .25s var(--ease); opacity: 0.6; }
.lang-dd.open .lang-dd-chev { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 174px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(170%) blur(20px);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  border: 1px solid rgba(17,17,17,0.07);
  border-radius: 16px;
  box-shadow: 0 20px 48px -14px rgba(17,17,17,0.32), 0 2px 6px rgba(17,17,17,0.05);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .24s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 200;
}
.lang-dd.open .lang-dd-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lang-dd-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  text-align: left;
  color: var(--text-body);
  padding: 10px 14px 10px 11px;
  border-radius: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang-dd-flag { display: none; }
.lang-dd-name { flex: 1; }
.lang-dd-opt:hover { background: rgba(17,17,17,0.05); }
.lang-dd-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.lang-dd-opt.active::after {
  content: '';
  width: 6px;
  height: 11px;
  flex: none;
  border: solid var(--accent);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
  margin-bottom: 3px;
}

.nav-toggle { display: none; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; height: 2px; width: 22px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width: 980px) {
  .nav-inner { gap: 12px; }
  .nav-left { gap: 0; }
  .nav-cta { display: inline-flex; padding: 6px 14px; font-size: 12px; }
  /* Mobile: hide desktop pill + native select, show the clean dropdown */
  .lang-toggle { display: none; }
  .lang-select { display: none; }
  .lang-dd { display: inline-flex; margin-left: auto; }
  /* Polished mobile nav — floating glass card with chevron rows */
  .nav-links {
    position: fixed;
    top: 62px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch; /* full-width rows so icons align at the left (was inheriting center) */
    gap: 3px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    padding: 12px;
    border: 1px solid rgba(17,17,17,0.07);
    border-radius: 20px;
    box-shadow: 0 26px 60px -18px rgba(17,17,17,0.40), 0 4px 14px rgba(17,17,17,0.06);
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: transform .34s cubic-bezier(0.22, 1, 0.36, 1), opacity .26s var(--ease);
    display: flex;
    margin: 0;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    padding: 12px 14px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: background .18s var(--ease), color .18s var(--ease);
  }
  .nav-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: rgba(17,17,17,0.05);
    color: var(--text);
    transition: background .18s var(--ease), color .18s var(--ease);
  }
  .nav-ico svg { width: 20px; height: 20px; }
  .nav-links a::after {
    content: '';
    position: static;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border: solid var(--text-soft);
    border-width: 1.7px 1.7px 0 0;
    transform: rotate(45deg);
    background: none;
    opacity: 0.45;
    transition: border-color .2s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav-links a:hover,
  .nav-links a:active {
    background: rgba(17,17,17,0.06);
    color: var(--text);
  }
  .nav-links a:hover .nav-ico,
  .nav-links a:active .nav-ico { background: rgba(17,17,17,0.12); color: var(--text); }
  .nav-links a:hover::after,
  .nav-links a:active::after { width: 7px; height: 7px; left: auto; border-color: var(--text-muted); opacity: 1; transform: rotate(45deg) translate(1px, -1px); }
  /* Staggered entrance for the menu items */
  .nav-links.open a { animation: navItemIn .42s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .nav-links.open a:nth-child(1) { animation-delay: .04s; }
  .nav-links.open a:nth-child(2) { animation-delay: .08s; }
  .nav-links.open a:nth-child(3) { animation-delay: .12s; }
  .nav-links.open a:nth-child(4) { animation-delay: .16s; }
  .nav-links.open a:nth-child(5) { animation-delay: .20s; }
  .nav-links.open a:nth-child(6) { animation-delay: .24s; }
  .nav-links.open a:nth-child(7) { animation-delay: .28s; }
  @keyframes navItemIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
  /* Dimmed backdrop behind the open menu */
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(17,17,17,0.34);
    z-index: 990;
    animation: navScrimIn .3s var(--ease);
  }
  @keyframes navScrimIn { from { opacity: 0; } to { opacity: 1; } }
  .nav-toggle { display: flex; margin-left: 10px; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* HERO — title + paragraph + CTA stacked; dog photo behind, right-aligned */
.hero {
  position: relative;
  padding: 150px 0 70px;
  background: #EFEFEF; /* matches the studio-grey backdrop of the hero photo for a seamless blend */
  overflow: hidden;
  /* Fixed px height (not 100vh): the gap below the content + the dog's position
     must look identical on every desktop, regardless of the monitor's height.
     100vh made taller screens show a big empty gap under the CTA. */
  min-height: 700px;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 450px;
  padding-top: 40px; /* baja el bloque de texto para alinear el título con la cabeza del perro */
}
.hero-title { position: relative; z-index: 2; max-width: 50%; transform: translateY(-50px); }
.hero-rotator {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  max-width: 52%;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--text);
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 0.25em;
  white-space: nowrap;
}
.hero-rotator-prefix { color: var(--text); }
.hero-rotator-word {
  display: inline-block;
  color: var(--orange);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  will-change: opacity, transform;
  padding-right: 0.08em;
}
.hero-rotator-word::after {
  content: '.';
  color: var(--orange);
}
.hero-rotator-word.is-out {
  opacity: 0;
  transform: translateY(-0.25em);
}
.hero-rotator-word.is-in {
  opacity: 0;
  transform: translateY(0.25em);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 50%;
  flex: 1;
}
.hero-photo {
  /* Uses hero-dog-crop.webp — a tight crop of the dog on a flat #EFEFEF bg
     (matches the hero, so no visible seam). Width-relative so the dog scales
     proportionally with the viewport/zoom, bottom-anchored so the paws stay
     on the hero baseline (level with the "See how it works" link). Knobs:
       • bigger dog       -> increase  width (%) / max-width
       • raise paw line   -> increase  bottom
       • move left        -> increase  right (%) */
  position: absolute;
  bottom: 50px;
  right: 9%;
  width: 42%;
  max-width: 470px;
  height: auto;
  object-fit: contain;
  overflow: visible;
  transform: translate(68px, 92.5px); /* X+ -> derecha, Y+ -> abajo; ajuste fino de posición, no afecta al tamaño */
  z-index: 0;
  pointer-events: none;
  display: block;
}
.hero-dog {
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 600px;
}
.hero-title {
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-title em {
  font-style: normal;
  color: inherit;
}
.hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Refined "See how it works" arrow link */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  padding: 12px 0 10px;
  border-bottom: 1.5px solid var(--text);
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
  white-space: nowrap;
  align-self: flex-start;
}
.hero-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  gap: 22px;
}
.hero-link-arrow {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--ease);
}
.hero-link-arrow svg { width: 22px; height: 22px; }
.hero-link:hover .hero-link-arrow { transform: translateX(2px); }

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-ai-badge {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero { padding: 110px 0 80px; }
  .hero-inner { gap: 16px; min-height: 0; }
  .hero-title span { white-space: normal; }
  .hero-title { max-width: none; }
  .hero-content { max-width: none; flex: initial; }
  .hero-rotator { max-width: none; white-space: normal; flex-wrap: wrap; }
  .hero-link { margin-top: 0; }
  /* On mobile, full photo stacks below the text at its natural ratio */
  .hero-photo {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
    transform: none; /* reset the desktop positioning transform so the stacked photo isn't shifted */
    z-index: 0;
  }
  .hero-dog {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    opacity: 1;
  }
  .hero-content { position: relative; z-index: 2; }
}

/* WHY — photo left, content right */
.why { background: var(--cream-warm); padding: 140px 0; }
.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #F0EBE0, var(--cream-deep));
  box-shadow: 0 30px 60px -30px rgba(17,17,17,0.22);
  display: flex;
  align-items: end;
  justify-content: center;
}
.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
/* Fallback (transparent PNG) — show full image centered, not cover-cropped */
.why-photo img.why-photo-fallback {
  width: auto;
  height: 90%;
  max-width: 92%;
  object-fit: contain;
}
.why-photo:hover img { transform: scale(1.03); }
.why-content { max-width: 540px; }
.why-content .display { max-width: 14ch; margin: 0 0 32px; }
.why-body { max-width: 56ch; margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--text-body); }

@media (max-width: 900px) {
  .why-inner { grid-template-columns: 1fr; gap: 40px; }
  .why-photo { aspect-ratio: 4 / 3; max-height: 460px; }
}

/* PROBLEM */
.problem { position: relative; background: var(--night); color: var(--white); overflow: hidden; }

/* Multi-layer background for depth */
.problem-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 92% 8%,  rgba(110,140,220,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 65% 55% at 50% 58%,  rgba(185,105,55,0.02) 0%, transparent 65%),
    var(--dark);
}
.problem-bg::after { display: none; }

/* Soft radial glow sitting just behind the stats grid */
.problem-inner::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 60px;
  transform: translateX(-50%);
  width: 720px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(185,105,55,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.problem-inner { position: relative; padding: 140px var(--pad); z-index: 2; }
.problem .eyebrow { color: rgba(255,255,255,0.7); }
.problem .section-title { color: var(--white); max-width: 18ch; }
.problem .section-lead { color: rgba(255,255,255,0.82); max-width: 56ch; }

.problem-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 64px;
  position: relative;
  z-index: 1;
}

/* Regular cards */
.problem-stat {
  padding: 40px 32px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease), box-shadow .35s var(--ease);
}
.problem-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}
.problem-stat:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.11);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}

/* Hero stats — same grid size, orange border distinction */
.problem-stat-hero {
  background: rgba(15, 17, 35, 0.65);
  border-color: rgba(255, 107, 74, 0.38);
}
.problem-stat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 10% 10%, rgba(255,107,74,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.problem-stat-hero:hover {
  background: rgba(15, 17, 35, 0.85);
  border-color: rgba(255, 107, 74, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 24px 56px -16px rgba(0,0,0,0.5), 0 0 24px -6px rgba(255,107,74,0.12);
}
.problem-stat-hero .problem-stat-num {
  font-size: clamp(44px, 4.2vw, 60px);
}
.problem-stat-hero .problem-stat-label {
  font-size: clamp(17px, 1.6vw, 24px);
  color: rgba(255,255,255,0.7);
  margin-top: 14px;
}
.problem-stat-hero-item { flex: 1; }
.problem-stat-hero-divider { display: none; }

.problem-stat-num {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--white);
  position: relative;
  z-index: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.problem-stat-num small {
  font-size: 1em;
  color: var(--white);
  margin-left: 2px;
  font-weight: 800;
  transition: color 0.25s ease;
}
.problem-stat:hover .problem-stat-num {
  color: var(--accent-light);
  text-shadow: 0 0 12px rgba(255,130,90,0.2), 0 0 28px rgba(255,107,74,0.1);
}
.problem-stat:hover .problem-stat-num small {
  color: var(--accent-light);
}
.problem-stat-label {
  margin: 16px 0 0;
  font-size: clamp(17px, 1.6vw, 24px);
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Staggered fade-up for each card */
.problem-stats .problem-stat.reveal:nth-child(1) { transition-delay: 0s; }
.problem-stats .problem-stat.reveal:nth-child(2) { transition-delay: .08s; }
.problem-stats .problem-stat.reveal:nth-child(3) { transition-delay: .18s; }
.problem-stats .problem-stat.reveal:nth-child(4) { transition-delay: .28s; }
.problem-stats .problem-stat.reveal:nth-child(5) { transition-delay: .36s; }

@media (max-width: 980px) {
  .problem-inner { padding: 120px 0; }
  .problem-stats { gap: 12px; }
}
@media (max-width: 560px) {
  .problem-stats { grid-template-columns: 1fr; }
  .problem-stat-hero .problem-stat-num { font-size: clamp(52px, 14vw, 72px); }
}

/* SYSTEM — dog photo as left-half background, horizontal pillar cards stacked on the right */
.system {
  position: relative;
  background:
    linear-gradient(180deg, #F0EBD8 0%, #ECE7D4 50%, #E8E3D0 100%);
  padding: 72px 0;
  overflow: hidden;
}
.system-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  pointer-events: none;
  background: url('assets/system-dog.jpg') no-repeat 30% center / cover;
}
.system-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}
.system-content {
  width: 50%;
  max-width: 560px;
}
.system-head {
  text-align: left;
  max-width: none;
  margin: 0 0 22px;
}
.system-head .section-title { max-width: none; margin: 0 0 16px; font-size: clamp(36px, 3.8vw, 54px); }
.system-head .section-lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; }
.pillars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.18);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform .4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease),
    background .4s var(--ease);
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,107,74,0.10), transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.pillar:hover {
  transform: translateY(-2px) translateX(6px);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 107, 74, 0.32);
  box-shadow: 0 24px 54px -20px rgba(0, 0, 0, 0.28);
}
.pillar:hover::before { opacity: 1; }
.pillar-num {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.65;
}
.pillar-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 12px;
  margin: 0;
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.22);
  color: var(--accent);
  transition: transform .4s var(--ease);
}
.pillar:hover .pillar-icon { transform: scale(1.05); }
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-text { flex: 1; min-width: 0; }
.pillar-tag {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 2px;
}
.pillar h3 {
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.pillar-body { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.pillar-arrow {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.pillar:hover .pillar-arrow { opacity: 1; transform: translateX(0); }
/* Stagger the reveal animation so the three pillars cascade in */
.pillars .pillar.reveal:nth-of-type(1) { transition-delay: 0s; }
.pillars .pillar.reveal:nth-of-type(2) { transition-delay: .12s; }
.pillars .pillar.reveal:nth-of-type(3) { transition-delay: .24s; }
@media (max-width: 980px) {
  .system { padding: 80px 0; }
  .system-bg {
    width: 100%;
    height: 44vh;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }
  .system-inner { display: block; }
  .system-content {
    width: 100%;
    max-width: none;
    margin-top: 36vh;
  }
}
@media (max-width: 560px) {
  .pillar { padding: 18px 20px; gap: 16px; }
  .pillar-icon { width: 48px; height: 48px; }
  .pillar-icon svg { width: 24px; height: 24px; }
  .pillar h3 { font-size: 19px; }
}

/* DEVICE */
.device-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #233158 0%, #131932 70%),
    #131932;
  padding: 90px 0 0;
  overflow: hidden;
  color: rgba(255,255,255,0.92);
  position: relative;
}
.device-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,107,74,0.08), transparent 45%),
    radial-gradient(circle at 82% 70%, rgba(95,180,255,0.07), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.device-section > .container { position: relative; z-index: 1; }
.device-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.device-head .eyebrow { color: rgba(255,180,140,0.85); }
.device-head .section-title { max-width: none; margin: 0 auto 22px; color: #FFFFFF; }
.device-head .section-lead { margin: 0 auto; color: rgba(255,255,255,0.78); }
/* Orbital sensor diagram — luminous circles on a perfect circle around the device, click to reveal */
.sensor-orbit {
  --R: 320px;
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 720px;
  margin: 40px auto 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sensor-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  z-index: 0;
}
.sensor-orbit.is-revealed .sensor-orbit-ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sensor-orbit .sensor-device {
  position: relative;
  z-index: 2;
  width: 360px;
  max-width: 80%;
  min-height: 0;
  margin: 0;
}
/* Luminous metric: just the icon + title floating in space. No disc, no border. */
.sensor-orbit .sensor-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.96);
  cursor: pointer;
  --x: 0px;
  --y: 0px;
  opacity: 0;
  filter: blur(10px);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x) * 1.45), calc(var(--y) * 1.3))
    scale(0.78);
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter .95s ease-out,
    width .7s cubic-bezier(0.22, 1, 0.36, 1),
    height .7s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius .7s cubic-bezier(0.22, 1, 0.36, 1),
    padding .7s cubic-bezier(0.22, 1, 0.36, 1),
    gap .7s cubic-bezier(0.22, 1, 0.36, 1),
    background .55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
/* Soft halo of light behind the icon — no visible boundary */
.sensor-orbit .sensor-card::before {
  content: '';
  position: absolute;
  top: 32%;
  left: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0) 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(4px);
  transition:
    background .55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .55s cubic-bezier(0.22, 1, 0.36, 1),
    width .7s cubic-bezier(0.22, 1, 0.36, 1),
    height .7s cubic-bezier(0.22, 1, 0.36, 1),
    top .7s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.sensor-orbit .sensor-card.is-visible {
  opacity: 1;
  filter: blur(0);
  transform:
    translate(-50%, -50%)
    translate(var(--x), var(--y))
    scale(1);
}
.sensor-orbit .sensor-card:hover { z-index: 3; }
.sensor-orbit .sensor-card:hover::before {
  background: radial-gradient(circle, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0) 70%);
}
.sensor-orbit .sensor-card:hover .sensor-icon {
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.95));
  transform: scale(1.06);
}
.sensor-orbit .sensor-card .sensor-icon {
  width: 50px;
  height: 50px;
  background: transparent;
  color: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
  transition:
    filter .55s cubic-bezier(0.22, 1, 0.36, 1),
    transform .55s cubic-bezier(0.22, 1, 0.36, 1),
    width .7s cubic-bezier(0.22, 1, 0.36, 1),
    height .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sensor-orbit .sensor-card .sensor-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.4;
  transition: width .7s cubic-bezier(0.22, 1, 0.36, 1), height .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sensor-orbit .sensor-card > div:last-child {
  flex: initial;
  min-width: 0;
  width: 100%;
}
.sensor-orbit .sensor-card h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 0 16px rgba(255,255,255,0.35);
  transition:
    font-size .7s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing .7s cubic-bezier(0.22, 1, 0.36, 1),
    margin .7s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow .55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Description hidden inside the card by default — revealed on expand. */
.sensor-orbit .sensor-card p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  letter-spacing: -0.003em;
  font-weight: 400;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height .65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .45s cubic-bezier(0.22, 1, 0.36, 1) .12s,
    margin-top .65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Expanded state — circle smoothly morphs into a fixed-size luminous rectangle.
   All expanded cards share identical dimensions for visual consistency. */
.sensor-orbit .sensor-card.expanded {
  width: 280px;
  height: 178px;
  border-radius: 22px;
  padding: 22px 24px;
  gap: 6px;
  z-index: 50;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(50,64,110,0) 55%),
    linear-gradient(180deg, rgba(54, 68, 116, 0.92) 0%, rgba(22, 32, 64, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 0 60px rgba(255, 255, 255, 0.16),
    0 30px 70px -22px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sensor-orbit .sensor-card.expanded::before {
  background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 70%);
  opacity: 0.7;
  width: 200px;
  height: 200px;
  top: 25%;
}
.sensor-orbit .sensor-card.expanded .sensor-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.85));
}
.sensor-orbit .sensor-card.expanded .sensor-icon svg { width: 24px; height: 24px; }
.sensor-orbit .sensor-card.expanded h5 {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  margin: 0 0 2px;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
}
.sensor-orbit .sensor-card.expanded p {
  max-height: 110px;
  opacity: 1;
  margin-top: 8px;
}
/* 8 cards placed at evenly spaced 45° intervals on a perfect circle of radius --R.
   Angles used (from positive x-axis): 22.5°, 67.5°, 112.5°, ... 337.5°.
   cos/sin values: 0.9239 and 0.3827. */
.sensor-orbit .sensor-card[data-pos="lt"]  { --x: calc(var(--R) * -0.3827); --y: calc(var(--R) * -0.9239); }
.sensor-orbit .sensor-card[data-pos="lmu"] { --x: calc(var(--R) * -0.9239); --y: calc(var(--R) * -0.3827); }
.sensor-orbit .sensor-card[data-pos="lml"] { --x: calc(var(--R) * -0.9239); --y: calc(var(--R) *  0.3827); }
.sensor-orbit .sensor-card[data-pos="lb"]  { --x: calc(var(--R) * -0.3827); --y: calc(var(--R) *  0.9239); }
.sensor-orbit .sensor-card[data-pos="rt"]  { --x: calc(var(--R) *  0.3827); --y: calc(var(--R) * -0.9239); }
.sensor-orbit .sensor-card[data-pos="rmu"] { --x: calc(var(--R) *  0.9239); --y: calc(var(--R) * -0.3827); }
.sensor-orbit .sensor-card[data-pos="rml"] { --x: calc(var(--R) *  0.9239); --y: calc(var(--R) *  0.3827); }
.sensor-orbit .sensor-card[data-pos="rb"]  { --x: calc(var(--R) *  0.3827); --y: calc(var(--R) *  0.9239); }
@media (max-width: 1080px) {
  .sensor-orbit { --R: 280px; height: 640px; }
  .sensor-orbit .sensor-device { width: 360px; }
}
@media (max-width: 940px) {
  .sensor-orbit { --R: 240px; height: 560px; }
  .sensor-orbit .sensor-device { width: 300px; }
}
@media (max-width: 900px) {
  /* Mobile: a clean single-column accordion. Tapping a sensor expands its
     description in place — no orbit math, no grid reflow when a card opens. */
  .sensor-orbit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    max-width: 460px;
    margin: 24px auto 0;
  }
  .sensor-orbit-ring { display: none; }
  .sensor-orbit .sensor-device {
    order: -1;
    width: 190px;
    max-width: 60%;
    margin: 0 auto 6px;
  }
  .sensor-orbit .sensor-card {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    --x: 0px;
    --y: 0px;
    transform: none;
    filter: blur(0);
    opacity: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
  }
  .sensor-orbit .sensor-card::before { display: none; }
  .sensor-orbit .sensor-card.is-visible { transform: none; opacity: 1; }
  .sensor-orbit .sensor-card .sensor-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--accent);
    filter: none;
  }
  .sensor-orbit .sensor-card .sensor-icon svg { width: 22px; height: 22px; }
  .sensor-orbit .sensor-card > div:last-child { width: auto; flex: 1 1 auto; min-width: 0; }
  .sensor-orbit .sensor-card h5 {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-align: left;
    text-shadow: none;
    -webkit-line-clamp: unset;
    display: block;
    color: #fff;
  }
  .sensor-orbit .sensor-card p {
    text-align: left;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
  }
  .sensor-orbit .sensor-card.expanded {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.20);
    box-shadow: none;
  }
  .sensor-orbit .sensor-card.expanded::before { display: none; }
  .sensor-orbit .sensor-card.expanded .sensor-icon { width: 30px; height: 30px; }
  .sensor-orbit .sensor-card.expanded .sensor-icon svg { width: 22px; height: 22px; }
  .sensor-orbit .sensor-card.expanded h5 {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-shadow: none;
    margin: 2px 0 0;
  }
  .sensor-orbit .sensor-card.expanded p {
    max-height: 240px;
    opacity: 1;
    margin-top: 6px;
  }
}
/* Legacy class kept inert in case anything else still references it */
.sensor-card { box-sizing: border-box; }
.sensor-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); border-radius: 10px; }
.sensor-icon svg { width: 20px; height: 20px; }
.sensor-card h5 { font-size: 15px; font-weight: 800; margin: 0 0 3px; letter-spacing: -0.01em; }
.sensor-card p { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.sensor-device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.sensor-device img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
  transition: filter .5s var(--ease);
  animation: heroFloat 6s var(--ease) infinite;
}
.sensor-device .color-swatches {
  position: relative;
  z-index: 4;
  margin-top: 4px;
}
.sensor-device .swatch-caption {
  position: relative;
  z-index: 4;
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  margin: 0;
  text-align: center;
}
/* Light glow behind the device removed — keeping the rules but rendering
   them invisible, so the existing JS color-cycle / flash hooks still no-op
   safely without errors. */
.sensor-device::before,
.sensor-pulse,
.sensor-device::after { display: none; }
@media (max-width: 980px) {
  .sensor-device img { max-width: 280px; }
}
.device-specs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 0; }
.spec { text-align: center; padding: 0 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.spec:last-child { border-right: none; }
.spec-value { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.025em; color: #FFFFFF; display: block; }
.spec-label { margin-top: 4px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
@media (max-width: 900px) {
  .device-specs { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .spec { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 24px; }
  .spec:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .spec:nth-child(2n) { border-right: none; }
  .spec:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}
.compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-top: 40px;
}
.compact-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compact-device-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compact-device-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,152,96,0.25) 0%, transparent 65%);
  filter: blur(20px);
  transition: background .5s var(--ease);
}
.compact-device-img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 88%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(17,17,17,0.18));
  transition: filter .5s var(--ease);
  animation: heroFloat 6s var(--ease) infinite;
}
.color-swatches {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.swatch {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease);
  position: relative;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);
}
.swatch::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: border-color .2s var(--ease);
}
.swatch.active::before { border-color: rgba(255,255,255,0.95); }
.swatch:hover { transform: scale(1.08); }
.swatch-orange { background: #E89860; }
.swatch-navy { background: #2C3661; }
.swatch-olive { background: #3F4F35; }
.swatch-brown { background: #5A4630; }
.swatch-stone { background: #B8B4A8; }
.swatch-caption {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.compact-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.compact-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--border); }
.compact-list li:first-child { border-top: none; padding-top: 0; }
.compact-list strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--text); }
.compact-list span { font-size: 15px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) {
  .compact { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   APP — v4 (phone-only, compact)
   ============================================ */
.app {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #233158 0%, #131932 70%),
    #131932;
  padding: 0 0 140px;
  color: rgba(255,255,255,0.92);
  position: relative;
  overflow: hidden;
}
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,107,74,0.06), transparent 45%),
    radial-gradient(circle at 82% 70%, rgba(95,180,255,0.05), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.app > .container { position: relative; z-index: 1; }
.app-head { text-align: center; max-width: 760px; margin: 0 auto 80px; }
.app-head .eyebrow { color: rgba(255,180,140,0.85); }
.app-head .section-title { max-width: none; margin: 0 auto 22px; color: #FFFFFF; }
.app-head .section-lead { margin: 0 auto; color: rgba(255,255,255,0.78); }

.feature-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 110px;
}
.feature-row.reverse .feature-phones { order: 2; }
.feature-row.reverse .feature-copy { order: 1; }

.feature-phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
}
.feature-phones-stack {
  /* 3 phones orbiting a shared vertical axis (JS carousel) */
  min-height: 480px;
  width: 100%;
}
.feature-phones-stack .phone {
  position: absolute;
  filter: drop-shadow(0 24px 50px rgba(17,17,17,0.22));
  transition: none;
  will-change: transform, opacity;
}
.feature-phones-stack .phone:nth-child(1) { transform: translateX(-130px) translateY(20px) rotate(-4deg); z-index: 1; opacity: 0.75; }
.feature-phones-stack .phone:nth-child(2) { z-index: 3; }
.feature-phones-stack .phone:nth-child(3) { transform: translateX(130px) translateY(20px) rotate(4deg); z-index: 1; opacity: 0.75; }
.feature-phones-stack:hover .phone:nth-child(1) { transform: translateX(-150px) translateY(10px) rotate(-6deg); }
.feature-phones-stack:hover .phone:nth-child(3) { transform: translateX(150px) translateY(10px) rotate(6deg); }

.feature-phones-pair {
  min-height: 520px;
}
.feature-phones-pair .phone {
  position: absolute;
  filter: drop-shadow(0 24px 50px rgba(17,17,17,0.22));
}
.feature-phones-pair .phone:nth-child(1) { transform: translateX(-80px) translateY(-10px); z-index: 2; }
.feature-phones-pair .phone:nth-child(2) { transform: translateX(80px) translateY(10px); z-index: 1; opacity: 0.92; }

.feature-copy { max-width: 480px; }
.feature-copy h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; color: #FFFFFF; }
.feature-copy > p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0 0 28px; }
.feature-points { list-style: none; padding: 0; margin: 0; }
.feature-points li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.feature-points li:first-child { border-top: none; padding-top: 0; }
.feature-points strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; color: #FFFFFF; }
.feature-points span { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.45; }

/* Accordion feature-points */
.fp-accordion { margin-top: 8px; }
.fp-accordion .fp-item { padding: 0; border-top: 1px solid rgba(255,255,255,0.10); display: block; }
.fp-accordion .fp-item:first-child { border-top: none; }
.fp-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
}
.fp-btn strong {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  transition: color 0.2s;
}
.fp-btn:hover strong { color: var(--accent-light); }
.feature-copy .fp-btn:hover strong { color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,0.6), 0 0 28px rgba(255,255,255,0.2); }
.signal-text .fp-btn:hover strong { color: #ff4040; }
.signal-text-act .fp-btn:hover strong { color: #29E05A; }
.signal-text-sleep .fp-btn:hover strong { color: #8B5CF6; }
.signal-text-health .fp-btn:hover strong { color: #00cfff; }
.fp-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: rgba(255,255,255,0.6);
  transition: transform 0.25s ease, border-color 0.2s, color 0.2s;
}
.fp-item[data-open] .fp-icon {
  transform: rotate(45deg);
  border-color: var(--accent-light);
  color: var(--accent-light);
}
.fp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.fp-item[data-open] .fp-body { max-height: 200px; padding-bottom: 14px; }
.fp-body span {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  display: block;
}

@media (max-width: 900px) {
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 80px;
  }
  .feature-row.reverse .feature-phones, .feature-row.reverse .feature-copy { order: unset; }
  .feature-copy { max-width: none; }
  .feature-phones-stack, .feature-phones-pair { min-height: 420px; }
  .feature-phones-stack .phone:nth-child(1) { transform: translateX(-80px) translateY(20px) rotate(-4deg); }
  .feature-phones-stack .phone:nth-child(3) { transform: translateX(80px) translateY(20px) rotate(4deg); }
  .feature-phones-pair .phone:nth-child(1) { transform: translateX(-50px) translateY(-5px); }
  .feature-phones-pair .phone:nth-child(2) { transform: translateX(50px) translateY(5px); }
}

/* Trio block */
.trio-block { margin-bottom: 0; }
.trio-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.trio-head .eyebrow { color: rgba(255,180,140,0.85); }
.trio-title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; color: #FFFFFF; }
.trio-lead { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trio-card { text-align: center; padding: 28px 22px 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); backdrop-filter: blur(10px); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); display: flex; flex-direction: column; align-items: center; }
.trio-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55); }
.trio-card-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.trio-card-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 14px rgba(255,255,255,0.06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.trio-card:hover .trio-card-icon { transform: scale(1.06); }
.trio-icon-activity,
.trio-icon-sleep,
.trio-icon-heat { background: none; border-color: transparent; box-shadow: none; }

.trio-icon-electric {
  background: radial-gradient(circle at 40% 35%, rgba(0,200,255,0.18), rgba(0,120,220,0.08));
  border-color: rgba(0,200,255,0.45);
  box-shadow: 0 0 16px rgba(0,180,255,0.55), 0 0 32px rgba(0,140,255,0.25), inset 0 0 10px rgba(0,200,255,0.10);
  color: #00cfff;
}
.trio-card .phone { margin: 0 auto 22px; filter: drop-shadow(0 16px 30px rgba(0,0,0,0.45)); }

/* ---- Signal cards (dog bg + app screenshot) ---- */
.signal-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  margin-bottom: 0; /* full-bleed cards butt together — no gap between sections */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.signal-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.signal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.signal-overlay-left {
  background: linear-gradient(
    to right,
    rgba(19, 25, 50, 0.85) 0%,
    rgba(19, 25, 50, 0.60) 28%,
    rgba(19, 25, 50, 0.08) 52%,
    transparent 100%
  );
}
.signal-overlay-right {
  background: linear-gradient(
    to left,
    rgba(19, 25, 50, 0.85) 0%,
    rgba(19, 25, 50, 0.60) 28%,
    rgba(19, 25, 50, 0.08) 52%,
    transparent 100%
  );
}
.signal-overlay-heat-extra {
  background:
    linear-gradient(to left, rgba(19, 25, 50, 0.62) 0%, rgba(19, 25, 50, 0.30) 45%, transparent 75%),
    linear-gradient(to bottom, rgba(19, 25, 50, 0.20) 0%, transparent 40%),
    rgba(19, 25, 50, 0.12);
}
.signal-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 76px;
  gap: 48px;
}
.signal-screens-video {
  justify-content: flex-end;
  align-items: center;
  padding-right: 72px;
}
.signal-card-reverse .signal-screens-video {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 72px;
}
.signal-dotlottie {
  display: block;
  width: min(48vw, 680px);
  height: min(27vw, 382px);
  border-radius: 16px;
  /* drop-shadow (not box-shadow): the animations have transparent
     backgrounds, so the shadow must follow the shape, not the canvas box. */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7));
  flex-shrink: 0;
}
.signal-text {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signal-text-right {
  flex: 0 0 400px;
}
.signal-text h3,
.signal-text-right h3 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.signal-text p,
.signal-text-right p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 42ch;
}
.signal-screens {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-ss {
  position: absolute;
}
.signal-ss .phone {
  width: 100%;
}
.phone-ss-img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: cover;
  object-position: center top;
  border-radius: 26px;
  display: block;
  z-index: 1;
}
.signal-ss-front {
  width: 230px;
  left: 50%;
  top: 50%;
  transform: translate(-10%, -50%);
  z-index: 2;
  filter: drop-shadow(0 28px 56px rgba(0,0,0,0.8));
}
.signal-ss-back {
  width: 195px;
  left: 50%;
  top: 50%;
  transform: translate(75%, -44%) rotate(6deg);
  z-index: 1;
  opacity: 0.85;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.6));
}
.signal-card-reverse .signal-ss-front {
  transform: translate(-190%, -50%);
}
.signal-card-reverse .signal-ss-back {
  transform: translate(-108%, -44%) rotate(6deg);
}
@media (max-width: 900px) {
  .signal-card { height: auto; min-height: 560px; }
  .signal-screens { height: 320px; }
  .signal-content { flex-direction: column; padding: 40px 28px; gap: 32px; }
  .signal-card-reverse .signal-content { flex-direction: column-reverse; }
  .signal-text, .signal-text-right { flex: none; }
  .signal-overlay-left, .signal-overlay-right {
    background: linear-gradient(to bottom, rgba(19,25,50,0.92) 40%, rgba(19,25,50,0.4) 100%);
  }
  .signal-screens { width: 100%; height: 260px; }
}

/* ---- Screenshot pairs inside feature-rows ---- */
.feature-ss-pair {
  position: relative;
  min-height: 480px;
}
.fss {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 56px -16px rgba(0,0,0,0.65);
}
.fss img {
  width: 100%;
  height: auto;
  display: block;
}
.fss-front {
  width: 230px;
  left: 50%;
  top: 50%;
  transform: translate(-65%, -50%);
  z-index: 2;
}
.fss-back {
  width: 185px;
  left: 50%;
  top: 50%;
  transform: translate(5%, -42%) rotate(4deg);
  z-index: 1;
  opacity: 0.82;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.55);
}
/* Icon in feature-copy for trio rows */
.feature-copy .trio-card-icon {
  display: inline-flex;
  margin-bottom: 16px;
}
.feature-copy h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; color: #FFFFFF; }
.feature-copy > p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }

.trio-screenshots {
  position: relative;
  width: 100%;
  min-height: 290px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 24px;
}
.trio-ss-main {
  position: relative;
  z-index: 2;
  width: 182px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px -10px rgba(0,0,0,0.72);
  transform: translateX(-18px);
}
.trio-ss-main img {
  width: 100%;
  height: auto;
  display: block;
}
.trio-ss-secondary {
  position: absolute;
  right: 8px;
  top: 10px;
  z-index: 1;
  width: 148px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 32px -8px rgba(0,0,0,0.6);
  transform: rotate(3deg);
  opacity: 0.82;
}
.trio-ss-secondary img {
  width: 100%;
  height: auto;
  display: block;
}
.trio-card h4 { font-size: 19px; line-height: 1.2; margin: 0; letter-spacing: -0.02em; color: #FFFFFF; }
.trio-card p { font-size: 14px; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.5; }
@media (max-width: 980px) { .trio-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================
   PHONE FRAMES
   ============================================ */
.phone {
  position: relative;
  background: linear-gradient(160deg, #2A2A2A, #0F0F0F);
  border-radius: 32px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  width: 220px;
  aspect-ratio: 9 / 19.5;
}
.phone-sm { width: 200px; }
.phone-md { width: 230px; }
.phone-lg { width: 260px; }
.phone-front { z-index: 3; }
.phone-shifted { z-index: 1; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; background: #000; border-radius: 999px; z-index: 4; }
.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0E1226, #1F2447);
  border-radius: 26px;
  padding: 32px 14px 14px;
  overflow: hidden;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.ps-top { display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.6); margin-bottom: 8px; }

/* ---- Onboarding phone ---- */
.onb { padding-top: 32px; }
.onb-step { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; font-weight: 700; }
.onb-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.onb-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6CE0FA, #5C8FE0); border-radius: 999px; }
.onb-q { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; margin: 0 0 4px; }
.onb-help { font-size: 9.5px; color: rgba(255,255,255,0.55); margin: 0 0 14px; line-height: 1.3; }
.onb-opt { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 9px 10px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.onb-opt strong { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; }
.onb-opt span { font-size: 9px; color: rgba(255,255,255,0.55); line-height: 1.3; }
.onb-opt-active { background: rgba(92,143,224,0.15); border-color: rgba(108,224,250,0.4); }
.onb-nav { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.onb-back, .onb-next { font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.onb-back { color: rgba(255,255,255,0.55); }
.onb-next { background: #6CE0FA; color: #0E1226; }

/* ---- Home phone ---- */
.home { padding: 30px 12px 8px; }
.home-brand { text-align: center; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -0.02em; margin-bottom: 10px; }
.home-brand-r { font-size: 8px; vertical-align: super; opacity: 0.5; }
.home-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; margin: 0 0 2px; letter-spacing: -0.02em; }
.home-sub { font-size: 10px; color: rgba(255,255,255,0.55); margin: 0 0 12px; }
.home-section-l { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.home-profile { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 6px 10px; margin-bottom: 6px; transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.home-profile-selected {
  background: rgba(108,224,250,0.16);
  border-color: rgba(108,224,250,0.5);
  transform: scale(1.03);
}
.home-profile-selected .home-name { color: #6CE0FA; }
.home-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.home-name { flex: 1; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; }
.home-batt::after { content: ''; display: inline-block; width: 8px; height: 4px; background: var(--accent); border-radius: 1px; }
.home-bell::after { content: '🔔'; font-size: 10px; }
.home-add { text-align: center; padding: 7px; background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.15); border-radius: 12px; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; font-weight: 600; }
.home-tabs { display: flex; justify-content: space-around; margin-top: auto; padding: 8px 0 4px; border-top: 1px solid rgba(255,255,255,0.06); }
.home-tab { font-size: 9px; color: rgba(255,255,255,0.4); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.home-tab .home-tab-dot { width: 3px; height: 3px; background: #6CE0FA; border-radius: 50%; }
.home-tab:first-child { color: #6CE0FA; }

/* ---- Signals/Heat/Activity/Sleep phone ---- */
.ps-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ps-title-text { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -0.01em; }
.ps-emoji { font-size: 12px; }
.ps-mini-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #7BAFE0, #345A8F); margin-left: auto; }
.ps-title-text-sm { font-family: 'Manrope', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-bottom: 8px; }

.alert { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; margin-bottom: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); position: relative; }
.alert-tag { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 9.5px; letter-spacing: 0.04em; margin-bottom: 2px; }
.alert-when { font-size: 8.5px; color: rgba(255,255,255,0.5); position: absolute; top: 8px; right: 10px; }
.alert p { font-size: 9.5px; color: rgba(255,255,255,0.8); margin: 2px 0 0; line-height: 1.35; }
.alert-good { background: rgba(255,107,74,0.1); border-color: rgba(255,107,74,0.3); }
.alert-tag-green { color: var(--accent-light); }
.alert-tag-orange { color: #FFB36B; }
.alert-tag-purple { color: #C7AAFE; }
.alert-tag-red { color: #FF8A6B; }
.alert-strong { background: rgba(255,108,76,0.08); border-color: rgba(255,108,76,0.3); }

.ring-score { position: relative; width: 110px; height: 110px; margin: 8px auto 4px; }
.ring-svg { width: 100%; height: 100%; }
.score-arc { transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.03em; }
.ring-orange .ring-num { color: #FFB36B; }
.ring-purple .ring-num { color: #C7AAFE; }
.ring-green .ring-num { color: var(--accent-light); }
.ring-blue .ring-num { color: #6CE0FA; }
.ring-cap { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 3px; }

.ps-stats { display: flex; justify-content: space-between; padding: 10px 0; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ps-stats > div { text-align: center; flex: 1; }
.ps-k { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 12px; color: var(--white); }
.ps-l { font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 1px; }

.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.ps-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.mini { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 6px 7px; }
.mini-v { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 11px; }
.mini-v small { font-size: 0.6em; color: rgba(255,255,255,0.5); margin-left: 2px; font-weight: 600; }
.mini-l { font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* History rows (second phone in signals) */
.hist-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 10px; }
.hist-row-bordered { border-top: 1px solid rgba(255,255,255,0.06); }
.hist-row-current { background: rgba(108,224,250,0.05); padding: 7px 8px; border-radius: 6px; margin-top: 2px; }
.hist-row small { font-size: 7px; color: #6CE0FA; font-weight: 800; letter-spacing: 0.1em; margin-left: 4px; }
.hist-tag { font-size: 9px; font-weight: 700; }
.hist-good { color: var(--accent-light); }
.hist-ok { color: var(--accent-light); opacity: 0.7; }
.hist-low { color: #FF8A6B; }
.hist-norm { color: #6CE0FA; }

/* ---- Location phone ---- */
.loc-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.loc-back { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; }
.loc-geo { font-size: 9px; color: rgba(255,255,255,0.6); font-weight: 600; }
.loc-pill-active { font-size: 9px; padding: 3px 8px; background: var(--accent); color: var(--white); border-radius: 999px; font-weight: 700; }
.loc-active { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: var(--accent-light); padding: 5px 8px; background: rgba(255,107,74,0.12); border-radius: 6px; margin-bottom: 6px; }
.loc-stop { color: #FF8A6B; font-weight: 800; font-size: 8px; }

.map-canvas { position: relative; height: 110px; background: #141c35; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.map-canvas-tall { flex: 1; min-height: 130px; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes gps-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.1; } }
.gps-pulse-svg { animation: gps-pulse 2.5s ease-in-out infinite; }
@keyframes blink-safe-zone { 0%, 100% { opacity: 0.85; } 50% { opacity: 0; } }
.safe-zone-blink { animation: blink-safe-zone 2s ease-in-out infinite; }
@keyframes gps-pin-l {
  0%   { transform: translate(0px, 0px); }
  30%  { transform: translate(0px, 15px); }
  45%  { transform: translate(0px, 15px); }
  70%  { transform: translate(20px, 15px); }
  85%  { transform: translate(20px, 15px); }
  100% { transform: translate(0px, 0px); }
}
.gps-pin-move { animation: gps-pin-l 5s ease-in-out infinite; }
.dog-pin {
  position: absolute;
  top: 55%; left: 55%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: dogWalk 9s ease-in-out infinite;
}
@keyframes dogWalk {
  0%   { top: 55%; left: 55%; }
  20%  { top: 40%; left: 62%; }
  40%  { top: 50%; left: 70%; }
  60%  { top: 62%; left: 58%; }
  80%  { top: 48%; left: 45%; }
  100% { top: 55%; left: 55%; }
}
.dog-avatar { width: 28px; height: 28px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid var(--white); }
.dog-avatar-safe { background: #6CE0FA; }
.dog-name { margin-top: 3px; background: var(--white); color: var(--night); padding: 1px 6px; border-radius: 4px; font-family: 'Manrope', sans-serif; font-size: 8px; font-weight: 700; }

.loc-info { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.loc-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #7BAFE0, #345A8F); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.loc-meta { flex: 1; }
.loc-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; }
.loc-place { font-size: 8.5px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.loc-signal { text-align: right; }
.loc-strong { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 9px; color: var(--accent-light); }
.loc-when { font-size: 8px; color: rgba(255,255,255,0.5); }
.loc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.loc-tab { font-size: 9px; padding: 6px; text-align: center; background: rgba(255,255,255,0.04); border-radius: 6px; color: rgba(255,255,255,0.6); font-weight: 700; }
.loc-tab-active { background: rgba(108,224,250,0.15); color: #6CE0FA; }
.loc-guide { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; background: rgba(255,255,255,0.04); border-radius: 6px; font-size: 9px; font-weight: 700; margin-top: 4px; }
.loc-guide-r { color: #6CE0FA; }
.loc-title { flex: 1; text-align: center; font-size: 11px; font-weight: 800; font-family: 'Manrope', sans-serif; color: var(--white); }
.loc-more { font-size: 13px; color: rgba(255,255,255,0.38); letter-spacing: 1px; }
.map-controls { position: absolute; right: 6px; bottom: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.map-zoom-btn { width: 18px; height: 18px; background: rgba(10,16,32,0.82); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); }
.map-gps-badge { position: absolute; left: 6px; bottom: 8px; font-size: 6.5px; color: rgba(255,255,255,0.38); background: rgba(0,0,0,0.45); padding: 2px 5px; border-radius: 999px; z-index: 2; }
.loc-card { padding: 7px 8px 5px; display: flex; flex-direction: column; gap: 6px; }
.loc-card-top { display: flex; align-items: center; gap: 8px; }
.loc-card-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ff8f70, #ff6b4a); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: white; flex-shrink: 0; font-family: 'Manrope', sans-serif; }
.loc-card-ava-safe { background: linear-gradient(135deg, #5dd4f0, #3ab8d8); }
.loc-card-meta { flex: 1; min-width: 0; }
.loc-card-name { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 5px; color: var(--white); }
.loc-card-addr { font-size: 8px; color: rgba(255,255,255,0.42); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-card-ago { font-size: 7.5px; color: rgba(255,255,255,0.32); flex-shrink: 0; }
.loc-dot-active { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; display: inline-block; flex-shrink: 0; }
.loc-badge-active { font-size: 7px; background: rgba(74,222,128,0.14); color: #4ade80; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.loc-badge-safe { font-size: 7px; background: rgba(108,224,250,0.14); color: #6CE0FA; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.loc-card-stats { display: flex; align-items: center; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 8px 4px; }
.lcs { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lcs-v { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800; color: var(--white); line-height: 1; }
.lcs-v small { font-size: 6.5px; font-weight: 600; color: rgba(255,255,255,0.42); margin-left: 1px; }
.lcs-l { font-size: 6.5px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.4px; }
.lcs-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.07); flex-shrink: 0; }
.loc-card-btns { display: flex; gap: 6px; }
.lcb { flex: 1; padding: 7px 4px; border-radius: 8px; font-size: 9px; font-weight: 700; border: none; cursor: default; font-family: 'Manrope', sans-serif; }
.lcb-p { background: #ff6b4a; color: white; }
.lcb-s { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.loc-zone-panel { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 7px 10px; display: flex; flex-direction: column; gap: 4px; }
.lzp-row { display: flex; justify-content: space-between; font-size: 8.5px; color: rgba(255,255,255,0.7); font-weight: 600; }
.lzp-toggle { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: rgba(255,255,255,0.5); padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.06); }
.lzp-on { background: #4ade80; color: #0a1020; font-size: 6.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }

/* DIFF */
/* DIFFERENTIATION — full-bleed photo background with glassmorphic differentiator cards */
.diff {
  position: relative;
  background: #131932;
  padding: 130px 0 110px;
  overflow: hidden;
  color: #FFFFFF;
}
.diff-bg {
  position: absolute;
  inset: 0;
  background: url('assets/diff-walking.jpg?v=2') no-repeat center / cover;
  background-position: center 35%;
  z-index: 0;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}
.diff-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(19, 25, 50, 0.55) 0%,
      rgba(19, 25, 50, 0.70) 45%,
      rgba(19, 25, 50, 0.92) 100%
    ),
    radial-gradient(circle at 18% 30%, rgba(255,107,74,0.08), transparent 40%);
  z-index: 1;
}
.diff-inner {
  position: relative;
  z-index: 2;
}
.diff-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}
.diff-head .eyebrow {
  color: rgba(255,180,140,0.95);
  justify-content: center;
}
.diff-head .section-title {
  max-width: none;
  margin: 0 auto 20px;
  color: #FFFFFF;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.035em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.diff-head .section-lead {
  margin: 0 auto;
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  max-width: 58ch;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.diff-card {
  position: relative;
  padding: 28px 4px 8px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
  transition: border-color .4s var(--ease);
}
.diff-card:hover {
  border-top-color: rgba(255, 107, 74, 0.7);
}
.diff-num {
  position: relative;
  top: auto;
  right: auto;
  display: block;
  margin: 0 0 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
}
.diff-icon { display: none; }
.diff-card h4 {
  font-size: 19px;
  margin: 0 0 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  position: relative;
}
.diff-card h4::after { display: none; }
.diff-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}
/* Stagger reveal so the 5 cards cascade in instead of all snapping at once */
.diff-grid .diff-card.reveal:nth-of-type(1) { transition-delay: 0s; }
.diff-grid .diff-card.reveal:nth-of-type(2) { transition-delay: .08s; }
.diff-grid .diff-card.reveal:nth-of-type(3) { transition-delay: .16s; }
.diff-grid .diff-card.reveal:nth-of-type(4) { transition-delay: .24s; }
.diff-grid .diff-card.reveal:nth-of-type(5) { transition-delay: .32s; }
@media (max-width: 1100px) {
  .diff-grid { grid-template-columns: repeat(3, 1fr); }
  .diff { padding: 100px 0 90px; }
}
@media (max-width: 700px) {
  .diff-grid { grid-template-columns: 1fr; gap: 14px; }
  .diff { padding: 80px 0; }
  .diff-overlay { background: linear-gradient(180deg, rgba(19,25,50,0.7) 0%, rgba(19,25,50,0.95) 100%); }
}

/* PRICING */
.pricing { background: var(--page); padding: 140px 0; }
.pricing-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.pricing-head .section-title { max-width: none; margin: 0 auto 22px; }
.pricing-head .section-lead { margin: 0 auto; }

.pricing-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}
.trial-row { display: flex; justify-content: center; }
.toggle-row { display: flex; justify-content: center; }
.trial-banner {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--green-dark);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}

.billing-toggle { display: inline-flex; align-items: center; gap: 0; padding: 5px; background: var(--cream-warm); border: 1px solid var(--border); border-radius: 999px; }
.bill-btn { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; padding: 10px 22px; border-radius: 999px; color: var(--text-muted); transition: background .25s var(--ease), color .25s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.bill-btn.active { background: var(--text); color: var(--white); }
.bill-btn:not(.active):hover { color: var(--text); }
.bill-save { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 8px; background: var(--green); color: var(--white); border-radius: 999px; text-transform: uppercase; }
.bill-btn:not(.active) .bill-save { background: var(--green-soft); color: var(--green-dark); }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan {
  position: relative;
  text-align: center;
  padding: 36px 24px;
  background: var(--cream-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(255,107,74,0.35); }
.plan-best { border-color: var(--accent); box-shadow: 0 14px 32px -16px rgba(255,107,74,0.3); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px; background: var(--green); color: var(--white); border-radius: 999px; white-space: nowrap; }
.plan-cap { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); display: block; margin-bottom: 18px; }
.plan-price { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.035em; color: var(--text); transition: opacity .3s var(--ease); }
.plan-price small { font-size: 0.34em; font-weight: 600; color: var(--text-muted); margin-left: 2px; letter-spacing: 0; }
.pricing-foot { text-align: center; margin: 40px 0 0; font-size: 14px; color: var(--text-muted); }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* TEAM */
.team { background: var(--night); padding: 140px 0; }
/* Team section on brand navy — light text on dark, both desktop & mobile.
   Scoped with .team prefix so these win over the later base rules. */
.team .eyebrow { color: rgba(255,255,255,0.7); }
.team .section-title { color: #FFFFFF; }
.team .team-card h4 { color: #FFFFFF; }
.team .team-card h4::before { background: rgba(255,255,255,0.5); }
.team .team-role { color: rgba(255,255,255,0.6); }
.team .team-bio { color: rgba(255,255,255,0.78); }
.team .team-initials { color: #FFFFFF; }
.team-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.team-head .section-title { max-width: none; margin: 0 auto 22px; }
/* Team — single row, deck-style: tall photo, dotted divider, name, role, bio */
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: stretch;
}
.team-card {
  text-align: left;
  padding: 0;
  background: transparent;
  border: none;
  transition: transform .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.team-card:hover { transform: translateY(-4px); box-shadow: none; }
.team-card:hover .team-photo { box-shadow: 0 18px 36px -20px rgba(17,17,17,0.28); }

.team-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  margin: 0 0 18px;
  background-color: var(--cream-warm);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: flex;
  align-items: end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: box-shadow .35s var(--ease);
}
/* All headshots anchored to the bottom — bottoms of bodies align like Álvaro's photo.
   Zoom kept moderate so faces stay visible. */
.team-card:nth-child(1) .team-photo { background-size: cover; background-position: center bottom; }   /* Iñigo */
.team-card:nth-child(2) .team-photo { background-size: cover; background-position: center bottom; }   /* Patricia */
.team-card:nth-child(3) .team-photo { background-size: cover; background-position: center bottom; }   /* Inés */
.team-card:nth-child(4) .team-photo { background-size: cover; background-position: center bottom; }   /* Javier */
.team-card:nth-child(6) .team-photo { background-size: cover; background-position: center bottom; }   /* Álvaro */
/* Let's Prototype logo: bigger and lower */
.team-card:nth-child(5) .team-photo {
  background-size: 78% auto;
  background-position: center 62%;
  background-color: var(--cream-warm);
  border: none;
}
.team-initials {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.04em;
  opacity: 0.25;
}
.team-photo.has-image .team-initials { display: none; }

/* Thin divider under each photo, between photo and name (deck style) */
.team-card h4 {
  font-size: 16px;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  position: relative;
  padding-top: 12px;
}
.team-card h4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 1.5px;
  background: var(--text);
}
.team-role {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.team-bio {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* WAITLIST */
.waitlist {
  position: relative;
  background: linear-gradient(135deg, #2E9A5E 0%, #40BA76 50%, #2E9A5E 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.waitlist::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.waitlist-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    520px circle at var(--wl-mx, 50%) var(--wl-my, 30%),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0) 55%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
  z-index: 1;
}
.waitlist:hover .waitlist-spotlight { opacity: 1; }
.waitlist-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.waitlist-orb-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -120px;
  transform: translate3d(0, var(--wl-scroll, 0px), 0);
}
.waitlist-orb-2 {
  width: 460px;
  height: 460px;
  bottom: -160px;
  right: -160px;
  background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
  transform: translate3d(0, calc(var(--wl-scroll, 0px) * -0.6), 0);
}
.waitlist-inner {
  position: relative;
  z-index: 2;
  padding: 16px 0 24px;
  text-align: center;
}

/* Multi-step container: all three steps occupy the same grid cell so the
   section never changes height regardless of which step is showing. */
.waitlist-steps {
  position: relative;
  display: grid;
  width: 100%;
}
.waitlist-step {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1), transform .55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .55s;
}
.waitlist-step.is-active {
  opacity: 0;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1), transform .55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
.waitlist-step.is-entering { opacity: 1; transform: translateY(0); }

/* Reserve / done steps share the green background — text adapts for legibility. */
.reserve-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 12px;
}
.reserve-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 18px;
}
.reserve-pitch {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  margin: 0 auto 26px;
  max-width: 52ch;
}
.reserve-pitch strong { color: #FFFFFF; font-weight: 800; }
.reserve-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.reserve-btn-yes {
  min-width: 240px;
  padding: 16px 32px;
  font-size: 16px;
  background: #FFFFFF;
  color: #1C7A47;
  border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.reserve-btn-yes:hover {
  transform: translateY(-2px);
  background: #F4FFF8;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45);
}
.btn-link.reserve-btn-no {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 8px 12px;
  transition: color .2s var(--ease);
}
.btn-link.reserve-btn-no:hover { color: #FFFFFF; }

/* Social follow row on the "done" step */
.reserve-social-cta {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin: 24px 0 14px;
}
.reserve-social {
  display: inline-flex;
  gap: 14px;
  justify-content: center;
}
.reserve-social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.20);
  color: #FFFFFF;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.reserve-social-link:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.25);
}
.reserve-social-link svg { width: 18px; height: 18px; }

/* Suppress browser autofill background entirely — keeps the form's seamless
   pill look even when the browser auto-completes the email field. */
.waitlist-form input:-webkit-autofill,
.waitlist-form input:-webkit-autofill:hover,
.waitlist-form input:-webkit-autofill:focus,
.waitlist-form input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Spinning Kickstarter logo → tick animation, fires when Reserve / Skip is clicked */
.waitlist-logo { position: relative; }
.waitlist-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.waitlist-logo-tick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1C7A47;
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  transform-origin: center center;
  transition: opacity .35s var(--ease), transform .45s cubic-bezier(0.16, 1.4, 0.4, 1);
  pointer-events: none;
  overflow: hidden;
}
.waitlist-logo-tick svg { width: 52%; height: 52%; display: block; }
.waitlist-logo.is-spinning .waitlist-logo-img {
  animation: kickstarterSpinAccel 1.55s cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}
.waitlist-logo.is-done .waitlist-logo-img {
  opacity: 0;
  transform: scale(0.55) rotate(0);
}
.waitlist-logo.is-done .waitlist-logo-tick {
  opacity: 1;
  transform: scale(0.96) rotate(0);
}
@keyframes kickstarterSpinAccel {
  0% { transform: rotate(0); }
  100% { transform: rotate(2160deg); }
}

/* Checkout popup — replaces with Shopify Buy Button later */
.checkout-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;            /* above the fixed nav (z-index 1000) so the backdrop covers it */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.checkout-popup.open { display: flex; }
.checkout-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 16, 0.62);   /* solid enough on its own; blur is a progressive enhancement */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: backdropIn .35s ease;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.checkout-popup-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 36px 32px 30px;
  text-align: left;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
  animation: popupIn .42s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--text);
}
@keyframes popupIn {
  from { opacity: 0; transform: scale(0.95) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* On phones, present the checkout as a solid bottom sheet so it reads as
   intentional (not a transparent floating card). */
@media (max-width: 640px) {
  .checkout-popup { align-items: flex-end; padding: 0; }
  .checkout-popup-backdrop { background: rgba(10, 20, 16, 0.7); }
  .checkout-popup-card {
    max-width: 100%;
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 50px -16px rgba(0, 0, 0, 0.45);
    animation: sheetUp .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
.checkout-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.checkout-popup-close:hover {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
.checkout-product {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.checkout-product-thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.checkout-product-thumb img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.checkout-product-meta { flex: 1; min-width: 0; }
.checkout-product-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2E9A5E;
  margin: 0 0 4px;
}
.checkout-product-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}
.checkout-product-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.checkout-features {
  list-style: none;
  padding: 14px 0 18px;
  margin: 0 0 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.checkout-features li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-body);
}
.checkout-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2E9A5E;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6l2 2 4-4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
}
.checkout-pay-btn,
.checkout-next-btn,
.checkout-pay-final {
  width: 100%;
  padding: 16px 22px;
  font-size: 16px;
  background: linear-gradient(135deg, #2E9A5E, #40BA76);
  color: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 14px 30px -12px rgba(46,154,94,0.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.checkout-pay-btn:hover,
.checkout-next-btn:hover,
.checkout-pay-final:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(46,154,94,0.6);
}

/* Inline CTA button inside FAQ answers — centered between the answer and the
   next question, scrolls back to the waitlist section. */
.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 22px auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2E9A5E, #40BA76);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(46,154,94,0.5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(46,154,94,0.6);
}
.faq-q-body { display: flex; flex-direction: column; align-items: flex-start; }
.faq-q-body .faq-cta { align-self: center; }

/* Multi-step checkout container — each step occupies the same grid cell so the
   popup doesn't jump in size between steps. */
.checkout-popup-body { position: relative; }
.checkout-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.checkout-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.checkout-dot.is-active {
  background: #2E9A5E;
  transform: scale(1.2);
}
.checkout-dot.is-done { background: rgba(46,154,94,0.45); }
.checkout-step {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
              transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear .35s;
}
.checkout-step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  position: relative;
  transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1),
              transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}
.checkout-step:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.checkout-back {
  position: absolute;
  top: -6px;
  left: -8px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.checkout-back:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.checkout-back svg { width: 16px; height: 16px; }

.checkout-step-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.018em;
  margin: 0 0 6px;
  color: var(--text);
  text-align: center;
}
.checkout-step-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 22px;
  text-align: center;
  line-height: 1.5;
}

.checkout-field {
  display: block;
  margin: 0 0 14px;
  text-align: left;
}
.checkout-field > span {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.checkout-field input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: #F6F6F4;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.checkout-field input:focus {
  outline: none;
  border-color: rgba(46,154,94,0.55);
  background: #FFFFFF;
}
.checkout-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checkout-field-row .checkout-field-narrow { grid-column: span 1; }

/* Apple Pay button — black pill with the Apple glyph + word mark */
.checkout-applepay {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.checkout-applepay:hover { transform: translateY(-1px); background: #1a1a1a; }
.checkout-applepay svg { width: 22px; height: 22px; }
.checkout-divider {
  position: relative;
  text-align: center;
  margin: 4px 0 16px;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.checkout-divider::before,
.checkout-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--border);
}
.checkout-divider::before { left: 0; }
.checkout-divider::after { right: 0; }

/* Success step */
.checkout-success { text-align: center; }
.checkout-success-tick {
  width: 64px;
  height: 64px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E9A5E, #40BA76);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(46,154,94,0.5);
  animation: tickPop .6s cubic-bezier(0.16, 1.3, 0.4, 1);
}
.checkout-success-tick svg { width: 32px; height: 32px; }
@keyframes tickPop {
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
.checkout-secure {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}
body.modal-open .checkout-popup { pointer-events: auto; }
.waitlist-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.22), 0 10px 28px rgba(0,0,0,0.22);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.waitlist-logo img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.waitlist:hover .waitlist-logo {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.28), 0 14px 32px rgba(0,0,0,0.28);
}
.waitlist .eyebrow {
  color: rgba(255,255,255,0.85);
  justify-content: center;
  letter-spacing: 0.18em;
  margin: 0 0 14px;
}
.waitlist .display-lg {
  color: var(--white);
  text-shadow: 0 2px 30px rgba(0,0,0,0.12);
  margin: 0 0 16px;
}
.waitlist-sub {
  max-width: 54ch;
  margin: 0 auto 18px;
  color: rgba(255,255,255,0.92);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
}
.waitlist-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 16px;
  padding: 6px;
  background: rgba(255,255,255,0.98);
  border-radius: 999px;
  box-shadow: 0 24px 60px -20px rgba(0,40,20,0.55), 0 2px 6px rgba(0,0,0,0.05);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.waitlist-form:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 30px 70px -20px rgba(0,40,20,0.65), 0 2px 6px rgba(0,0,0,0.05);
}
.waitlist-form input {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  letter-spacing: -0.005em;
}
.waitlist-form input::placeholder { color: var(--text-muted); }
.waitlist-form .btn {
  padding: 14px 26px;
  font-size: 14px;
  background: var(--text);
  color: var(--white);
  border-radius: 999px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.waitlist-form .btn:hover {
  background: #000;
  transform: translateY(-1px);
}
.waitlist-msg { min-height: 24px; font-size: 14px; color: rgba(255,255,255,0.8); }
.waitlist-msg.success { color: #FFFFFF; font-weight: 700; }
.waitlist-msg.error { color: #FFDADA; font-weight: 600; }
.waitlist-perks {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.waitlist-perks > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.waitlist-perks > div:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.waitlist-perks span:first-child { color: var(--white); font-weight: 800; }

/* Pill badges */
.waitlist-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 20px;
}
.waitlist-pill {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.95);
  padding: 5px 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .waitlist-inner { padding: 32px 0; }
  .waitlist-form { flex-direction: column; border-radius: 18px; padding: 8px; }
  .waitlist-form input { padding: 14px; }
  .waitlist-form .btn { width: 100%; }
  .waitlist-orb-1 { width: 240px; height: 240px; }
  .waitlist-orb-2 { width: 280px; height: 280px; }
}

/* ============================================
   FAQ — minimalist rows
   ============================================ */
.faq { background: var(--page); padding: 140px 0; }
.faq-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.faq-head .section-title { max-width: none; margin: 0 auto 22px; }
.faq-head .section-lead { margin: 0 auto; }
.faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--border); }

.faq-cat { border-bottom: 1px solid var(--border); }
.faq-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
  text-align: left;
  transition: opacity .2s var(--ease);
}
.faq-cat-btn:hover { opacity: 0.75; }
.faq-cat-label { display: flex; align-items: center; gap: 28px; }
.faq-cat-num {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  min-width: 24px;
}
.faq-cat-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Plus/minus chevron */
.faq-chev {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
}
.faq-chev::before, .faq-chev::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--text);
  border-radius: 1px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-chev::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-chev::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-cat-btn[aria-expanded="true"] .faq-chev::after { opacity: 0; }
.faq-q-btn[aria-expanded="true"] .faq-chev::after { opacity: 0; }

.faq-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq-cat[data-open] .faq-cat-body { max-height: 3000px; }

.faq-q {
  border-top: 1px solid var(--border);
  margin-left: 52px;
}
.faq-q:first-child { border-top: none; }
.faq-q-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  text-align: left;
  transition: opacity .2s var(--ease);
}
.faq-q-btn:hover { opacity: 0.75; }
.faq-q-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.faq-q-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px; color: var(--text); letter-spacing: -0.01em; }
.faq-q-preview {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.faq-q-btn .faq-chev { width: 18px; height: 18px; }
.faq-q-btn .faq-chev::before { width: 11px; }
.faq-q-btn .faq-chev::after { height: 11px; }

.faq-q-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq-q[data-open] .faq-q-body { max-height: 600px; }
.faq-q[data-open] .faq-q-preview { display: none; }
.faq-q-body p {
  margin: 0;
  padding: 4px 0 24px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 640px;
}

@media (max-width: 700px) {
  .faq-cat-label { gap: 16px; }
  .faq-q { margin-left: 36px; }
}

/* FOOTER */
.footer { background: var(--cream-warm); color: var(--text-muted); padding: 80px 0 32px; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 2fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
.footer-brand p { margin: 16px 0 0; font-size: 14px; color: var(--text-muted); max-width: 36ch; }
.footer-logo { height: 26px; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.footer-cols h5 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin: 0 0 18px; }
.footer-cols a { display: block; font-size: 14px; color: var(--text-muted); padding: 6px 0; }
.footer-cols a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 16px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-cols { grid-template-columns: 1fr 1fr; } }

/* MODAL */
.modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s var(--ease); }
.modal.open .modal-backdrop { opacity: 1; }
.modal-card { position: relative; background: var(--white); border-radius: 28px; padding: clamp(36px, 5vw, 56px); max-width: 480px; width: 100%; box-shadow: 0 50px 100px rgba(0,0,0,0.3); transform: scale(0.92) translateY(16px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.modal.open .modal-card { transform: scale(1) translateY(0); opacity: 1; }
.modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); }
.modal-close:hover { background: var(--cream-deep); color: var(--text); }
.modal-close svg { width: 16px; height: 16px; }
.modal-eyebrow { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 12px; }
.modal-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 14px; color: var(--text); }
.modal-sub { font-size: 15px; color: var(--text-muted); line-height: 1.55; margin: 0 0 24px; }
.modal-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.modal-form input { width: 100%; padding: 16px 20px; border: 1.5px solid var(--border); border-radius: 14px; font-family: inherit; font-size: 15px; color: var(--text); outline: none; background: var(--white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.modal-form input::placeholder { color: var(--text-soft); }
.modal-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.modal-form .btn { width: 100%; }
.modal-msg { min-height: 22px; font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 16px; }
.modal-msg.success { color: var(--accent); font-weight: 600; }
.modal-msg.error { color: #C2454A; font-weight: 600; }
.modal-foot { text-align: center; font-size: 12px; color: var(--text-soft); margin: 0; }
.modal-card-wide { max-width: 540px; }
.modal-form textarea {
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  background: var(--white);
  resize: vertical;
  min-height: 110px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.modal-form textarea::placeholder { color: var(--text-soft); }
.modal-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ============================================
   All section headings left-aligned (override)
   Section bodies/grids below keep their layouts.
   ============================================ */
.why { text-align: left; }

.system-head,
.device-head,
.app-head,
.trio-head,
.diff-head,
.pricing-head,
.team-head,
.faq-head {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 760px;
}
.system-head .section-title,
.device-head .section-title,
.app-head .section-title,
.diff-head .section-title,
.pricing-head .section-title,
.team-head .section-title,
.faq-head .section-title,
.trio-head .trio-title {
  margin-left: 0;
  margin-right: 0;
}
.system-head .section-lead,
.device-head .section-lead,
.app-head .section-lead,
.diff-head .section-lead,
.pricing-head .section-lead,
.faq-head .section-lead,
.trio-head .trio-lead {
  margin-left: 0;
  margin-right: 0;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-dog, .sensor-device img, .sensor-pulse { animation: none !important; }
}

/* ============================================
   MOBILE — comprehensive redesign (≤ 640px)
   ============================================ */
@media (max-width: 640px) {

  /* --- Nav: CTA left, logo centered, lang-toggle + hamburger right --- */
  .nav-inner {
    position: relative;
  }
  .nav-left {
    gap: 0;
    flex: none;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .lang-toggle { display: none; }
  .lang-select { display: none; }
  .lang-dd { display: inline-flex; margin-left: auto; }
  .nav-toggle {
    margin-left: 10px;
  }
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }

  /* --- Hero --- */
  .hero {
    padding: 110px 0 60px;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .hero-inner { gap: 44px; }
  .hero-title { font-size: clamp(42px, 11vw, 60px); line-height: 0.92; }
  .hero-rotator {
    font-size: clamp(34px, 10vw, 48px);
    margin-top: 100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    white-space: normal;
  }
  .hero-sub { font-size: 17px; line-height: 1.68; margin-top: 7px; color: #3a3a3a; }
  .hero-photo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    transform: none; /* reset the desktop positioning transform so the full-bleed bg isn't shifted */
    z-index: 0;
  }
  .hero-dog {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 72% center;
    opacity: 0.6;
    transform-origin: bottom right;     /* shrink toward bottom-right */
    transform: scale(0.88) translate(80px, 18px); /* smaller + nudge right & down */
  }
  .hero-content { position: relative; z-index: 2; max-width: none; }
  .hero-cta-row { flex-wrap: wrap; gap: 15px; margin-top: 12px; }
  .hero .btn-lg { padding: 16px 28px; font-size: 16px; }
  .hero .hero-link { font-size: 16px; }

  /* --- Signal cards — full-screen immersive --- */
  .signal-card,
  .signal-card.signal-card-reverse {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 5;
  }
  /* Preventive-intelligence card: shift the bg image left on mobile so the
     tablet on the right edge stays partly visible (!important beats the inline
     object-position, which only suits desktop). */
  .signal-bg-health { object-position: 70% center !important; }
  .signal-content,
  .signal-card-reverse .signal-content {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 24px 40px;
    height: 100%;
    gap: 0;
  }
  /* Text block: title + icon visible, hide body + accordion */
  .signal-text,
  .signal-text-right {
    flex: none;
    max-width: 100%;
    order: 1;
  }
  .signal-text p,
  .signal-text-right p,
  .signal-text .feature-points,
  .signal-text-right .feature-points { display: none; }
  .signal-text h3,
  .signal-text-right h3 {
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-bottom: 0;
  }
  /* Screen/video block: bottom */
  .signal-screens,
  .signal-card-reverse .signal-screens {
    order: 2;
    width: 100%;
    height: 0;
    position: static;
    padding-right: 0;
    padding-left: 0;
    justify-content: flex-start;
    align-items: flex-end;
    overflow: visible;
  }
  /* Remove ALL stacking contexts so VP9 alpha composites against the real background */
  .signal-overlay,
  .signal-content,
  .signal-card-reverse .signal-content {
    z-index: auto;
  }
  .signal-dotlottie {
    display: block;
    position: absolute;
    /* Anchor to the bottom of the card so the animation sits below the title
       instead of overlapping it. */
    inset: auto 0 0 0;
    width: 100% !important;
    height: 62% !important;
    background: transparent;
    z-index: 0;
    /* Card clips overflow, so the drop-shadow is never visible here — skip it
       to save per-frame cost on phones. */
    filter: none;
  }
  /* Overlay: darker gradient from top for title legibility */
  .signal-overlay-left,
  .signal-overlay-right {
    background: linear-gradient(to bottom,
      rgba(10,14,35,0.82) 0%,
      rgba(10,14,35,0.35) 45%,
      rgba(10,14,35,0.55) 100%
    );
  }

  /* Hide phone mockups in health score card on mobile */
  .signal-screens:not(.signal-screens-video) { display: none !important; }

  /* Signal card expand button */
  .signal-expand-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 20;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.3s;
    padding: 0;
  }
  .signal-expand-btn.open { background: rgba(255,255,255,0.28); transform: rotate(45deg); }

  /* Signal card expand panel */
  .signal-expand-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(8,12,30,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px 16px 0 0;
    padding: 28px 22px 36px;
    z-index: 15;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    overflow-y: auto;
    max-height: 72%;
  }
  .signal-expand-panel.open { transform: translateY(0); }
  .signal-expand-panel h4 {
    font-size: 15px; font-weight: 800; color: #fff;
    margin: 0 0 10px; line-height: 1.25;
  }
  .signal-expand-panel > p {
    font-size: 14px; color: rgba(255,255,255,0.72);
    margin: 0 0 18px; line-height: 1.65;
  }
  /* Reuse fp-accordion styles inside panel */
  .signal-expand-panel .fp-accordion { margin-top: 0; }
  .signal-expand-panel .fp-item { border-top: 1px solid rgba(255,255,255,0.10); }
  .signal-expand-panel .fp-item:first-child { border-top: none; }
  .signal-expand-panel .fp-btn {
    padding: 12px 0; font-size: 13px;
  }
  .signal-expand-panel .fp-btn strong { color: rgba(255,255,255,0.9); font-size: 13px; transition: color 0.2s; }
  .signal-expand-panel .fp-body { font-size: 13px; }

  /* Section accent colors on open accordion item */
  .signal-expand-panel.signal-text-temp .fp-item[data-open] .fp-btn strong { color: #ff4040; }
  .signal-expand-panel.signal-text-act  .fp-item[data-open] .fp-btn strong { color: #29E05A; }
  .signal-expand-panel.signal-text-sleep .fp-item[data-open] .fp-btn strong { color: #8B5CF6; }
  .signal-expand-panel.signal-text-health .fp-item[data-open] .fp-btn strong { color: #00cfff; }

  /* Signal card background photos — fill card, less zoom via aspect-ratio on card */
  .signal-bg-img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* --- App section (feature rows) --- */
  .feature-row, .feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 60px;
  }

  /* Hide original copy — JS rebuilds it as header + expand panel */
  .has-mobile-expand .feature-copy { display: none !important; }

  /* Header above phones */
  .feature-row-header-m {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 52px;
  }
  .feature-row-header-m .trio-card-icon { flex-shrink: 0; }
  .feature-row-header-m h3 {
    font-size: clamp(22px, 6.5vw, 30px); font-weight: 800;
    color: #fff; margin: 0; line-height: 1.1; letter-spacing: -0.02em;
  }

  /* Expand button below phones */
  .feature-expand-btn {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    margin-top: 72px;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 26px; font-weight: 300; line-height: 1;
    cursor: pointer;
    transition: background 0.2s, transform 0.3s;
    padding: 0;
  }
  .feature-expand-btn.open { transform: rotate(45deg); background: rgba(255,255,255,0.22); }

  /* Expand panel slides down */
  .feature-expand-panel {
    overflow: hidden; max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.32,0.72,0,1);
  }
  .feature-expand-panel.open { max-height: 700px; margin-top: 16px; }
  .feature-expand-panel > p {
    font-size: 14px; color: rgba(255,255,255,0.72);
    line-height: 1.65; margin: 0 0 16px;
  }
  .feature-expand-panel .fp-accordion { margin-top: 0; }
  .feature-expand-panel .fp-item { border-top: 1px solid rgba(255,255,255,0.10); }
  .feature-expand-panel .fp-item:first-child { border-top: none; }
  .feature-expand-panel .fp-btn { padding: 12px 0; font-size: 13px; }
  .feature-expand-panel .fp-btn strong { font-size: 13px; }
  .feature-expand-panel .fp-body { font-size: 13px; }

  /* Stack: 3-phone carousel — JS drives everything */
  .feature-phones-stack {
    min-height: 460px;
    position: relative;
    margin: 20px 0 0;
  }
  .feature-phones-stack .phone {
    position: absolute !important;
    width: min(54vw, 200px) !important;
    transition: none !important;
    will-change: transform, opacity;
  }
  .feature-phones-stack .phone-md { width: min(58vw, 215px) !important; }

  /* Pair: stack vertically */
  .feature-phones-pair {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
  }
  .feature-phones-pair .phone {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    width: min(72vw, 260px);
  }

  /* --- App header --- */
  /* app-head is hidden on mobile, so add top padding for breathing room above
     the first feature row ("Personalization from day one"). */
  .app { padding-top: 64px; padding-bottom: 16px; }
  .app-head { display: none; }
  .app-head h2 { font-size: clamp(26px, 8vw, 38px); }

  /* --- Device / sensor orbit --- */
  .sensor-orbit {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px auto !important;
  }
  .sensor-orbit-ring { display: none !important; }
  .sensors-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .sensors-group--top { order: 1 !important; }
  .sensors-group--bottom { order: 3 !important; }

  /* Default: icon only, glowing */
  .sensor-orbit .sensor-card,
  .sensor-orbit .sensor-card.is-visible {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 18px 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    cursor: pointer !important;
  }
  .sensor-orbit .sensor-card .sensor-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: rgba(0,207,255,0.07) !important;
    border: 1.5px solid #00cfff !important;
    box-shadow: 0 0 10px rgba(0,207,255,0.4), inset 0 0 8px rgba(0,207,255,0.1) !important;
    filter: none !important;
    color: #ffffff !important;
  }
  .sensor-orbit .sensor-card .sensor-icon svg { width: 22px !important; height: 22px !important; stroke: #ffffff !important; }
  .sensor-orbit .sensor-card h5 { display: none !important; }
  .sensor-orbit .sensor-card p { display: none !important; }

  /* Expanded: full card spanning both columns */
  .sensor-orbit .sensor-card.expanded,
  .sensor-orbit .sensor-card.is-visible.expanded {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 16px !important;
    gap: 14px !important;
    background: linear-gradient(160deg, rgba(54,68,116,0.92) 0%, rgba(22,32,64,0.97) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 0 32px rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.5) !important;
  }
  .sensor-orbit .sensor-card.expanded .sensor-icon,
  .sensor-orbit .sensor-card.is-visible.expanded .sensor-icon {
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.8)) !important;
  }
  .sensor-orbit .sensor-card.expanded h5,
  .sensor-orbit .sensor-card.is-visible.expanded h5 { display: block !important; font-size: 13px !important; font-weight: 800 !important; opacity: 1 !important; margin: 0 0 4px !important; }
  .sensor-orbit .sensor-card.expanded p,
  .sensor-orbit .sensor-card.is-visible.expanded p { display: block !important; font-size: 12px !important; line-height: 1.45 !important; margin: 0 !important; opacity: 0.75 !important; }

  .sensor-orbit .sensor-device {
    position: relative !important;
    width: 72% !important;
    max-width: none !important;
    margin: 0 !important;
    order: 2 !important;
  }

  /* --- Problem / stats --- */
  .problem-inner { padding-left: var(--pad); padding-right: var(--pad); }
  .problem-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .problem-stat { padding: 18px 16px; border-radius: 14px; }
  .problem-stat-num { font-size: clamp(22px, 6vw, 32px); }
  .problem-stat-hero .problem-stat-num { font-size: clamp(24px, 6.5vw, 34px); }
  .problem-stat-label { font-size: 11px; margin-top: 6px; line-height: 1.35; }
  .problem-stat-hero .problem-stat-label { font-size: 11px; margin-top: 6px; }

  /* --- Membership cards --- */
  .plans { grid-template-columns: 1fr; gap: 16px; }

  /* --- Team --- */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* --- FAQ --- */
  .faq { padding: 80px 0; }

  /* --- Waitlist sections --- */
  .waitlist-inner { padding: 60px var(--pad); }
  .display-lg { font-size: clamp(30px, 9vw, 44px); }

  /* --- General section padding --- */
  .system-section, .device-section { padding: 80px 0; }
  .diff { padding: 80px 0; }
  .pricing { padding: 80px 0; }
  .team-section { padding: 80px 0; }
}