/* ==========================================================================
   eShield — Section Styles (smooth-scrolling layout)
   ========================================================================== */

/* ---------- Page / section setup ----------
   Smooth-scroll is intentionally disabled: the background video is scrubbed
   directly off scrollY, and CSS-driven smooth-scrolling on anchor jumps
   causes the video to lurch through several seconds in one frame. Anchor
   smoothing is handled in JS instead. */
html { scroll-behavior: auto; }

/* ---------- Text legibility over the scene video ----------
   The hero title used a white→gray gradient text fill, which is invisible
   against bright cloud frames. Switch to a solid bright fill and add a
   subtle text-shadow on display headings so they read at every video beat. */
.hero-title,
.hero-title .accent {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 0 28px rgba(0, 0, 0, 0.55);
  filter: none;
}
.section--hero .hero-sub {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.45);
}
.statement,
.cta-headline,
.section h2 {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 22px rgba(0, 0, 0, 0.40);
}
.feature-list li,
p {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Radar was retired when the scene video took over the backdrop. */
.radar { display: none !important; }

.page {
  width: 100%;
}
.section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + var(--sp-8)) var(--gutter) var(--sp-12);
  overflow: hidden;
}
.section-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- Section nav (right-side dots) ---------- */
.section-nav {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}
.section-nav__dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid var(--text-dim);
  opacity: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
}
.section-nav__dot:hover {
  border-color: var(--accent);
}
.section-nav__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.section-nav__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.section-nav__dot:hover::after,
.section-nav__dot.is-active::after {
  opacity: 1;
}
.section-nav__dot.is-active::after { color: var(--accent); }

/* Section counter (bottom-right of viewport) */
.section-counter {
  position: fixed;
  bottom: clamp(16px, 3vh, 32px);
  right: clamp(16px, 3vw, 36px);
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-counter strong { color: var(--accent); font-weight: 500; }

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  animation: scroll-bob 2.4s ease-in-out infinite;
}
.scroll-hint svg { opacity: 1; }
@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* =====================================================
   HERO
   ===================================================== */
.section--hero { background: transparent; }
.hero-inner {
  position: relative;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.4rem 1rem;
  border: 1px solid var(--border-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  margin-bottom: var(--sp-6);
  backdrop-filter: blur(4px);
}
.hero-title {
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
  margin: 0 0 var(--sp-6);
  color: #ffffff;
}
.hero-title .accent {
  color: #ffffff;
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto var(--sp-8);
}

/* Animated radar backdrop */
.radar {
  position: absolute;
  top: 75%;
  left: 75%;
  width: min(80vmin, 700px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
  animation: radar-fade-in 10.0s ease-out 0.2s both;
}
@keyframes radar-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.35; }
}
.radar::before, .radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-line);
  border-radius: 50%;
}
.radar::after {
  inset: 20%;
  border-color: var(--border-strong);
  opacity: 0.4;
}
.radar__inner {
  position: absolute;
  inset: 40%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.25;
}
.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(0, 229, 255, 0.4) 0deg,
    rgba(0, 229, 255, 0.4) 0.6deg,
    rgba(0, 229, 255, 0) 1.2deg,
    rgba(0, 229, 255, 0) 280deg,
    rgba(0, 229, 255, 0.01) 295deg,
    rgba(0, 229, 255, 0.06) 335deg,
    rgba(0, 229, 255, 0.2) 355deg,
    rgba(0, 229, 255, 0.4) 360deg
  );
  animation: sweep 4s linear infinite;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.25));
}
@keyframes sweep {
  to { transform: rotate(360deg); }
}
.radar__pip {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  opacity: 0;
  animation: pip-ping 4s linear infinite;
}
.radar__pip:nth-of-type(1) { top: 28%; left: 62%; animation-delay: 0.318s; }
.radar__pip:nth-of-type(2) { top: 70%; left: 35%; animation-delay: 2.410s; }
.radar__pip:nth-of-type(3) { top: 45%; left: 78%; animation-delay: 0.887s; }
.radar__pip:nth-of-type(4) { top: 22%; left: 38%; animation-delay: 3.742s; }
.radar__pip:nth-of-type(5) { top: 58%; left: 68%; animation-delay: 1.266s; }
@keyframes pip-ping {
  0%   { opacity: 1;   transform: scale(2);   box-shadow: 0 0 16px rgba(0, 229, 255, 0.9); }
  8%   { opacity: 1;   transform: scale(1);   box-shadow: 0 0 12px rgba(0, 229, 255, 0.7); }
  60%  { opacity: 0.35; transform: scale(1);  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35); }
  100% { opacity: 0;   transform: scale(1);   box-shadow: 0 0 4px rgba(0, 229, 255, 0);   }
}

/* =====================================================
   GENERIC CONTENT SLIDE
   ===================================================== */
.slide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 6vw, var(--sp-16));
  align-items: center;
}
.slide-grid__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slide-grid__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 460px);
  max-height: min(70vh, 620px);
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 28px rgba(0, 229, 255, 0.18));
}
.slide-grid__visual--handheld img {
  max-width: min(100%, 255px);
  max-height: min(72vh, 600px);
}
.visual-caption {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--accent);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

.section-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: var(--sp-3);
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: #ffffff;
  max-width: 52ch;
  margin-bottom: var(--sp-6);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.45);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 var(--sp-8);
  display: grid;
  gap: var(--sp-3);
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.feature-list li::before {
  content: "▸";
  color: var(--accent);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* =====================================================
   PROBLEM section (full-bleed statement)
   ===================================================== */
.section--statement .section-inner {
  text-align: center;
}
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  max-width: 22ch;
  margin: var(--sp-6) auto;
  color: var(--text-primary);
}
.statement em {
  font-style: normal;
  color: var(--accent);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.45),
    0 0 32px var(--accent-glow);
}
.statement-meta {
  display: flex;
  justify-content: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-subtle);
}
.statement-meta__item {
  text-align: center;
}
.statement-meta__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.45);
}
.statement-meta__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.45);
  margin-top: var(--sp-2);
}

/* =====================================================
   SPECS table
   ===================================================== */
.specs-wrap {
  margin-top: var(--sp-8);
  border: 1px solid var(--border-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-surface);
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.specs-table th,
.specs-table td { width: 25%; }
.specs-table th, .specs-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.specs-table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(0, 229, 255, 0.03);
  text-transform: uppercase;
}
.specs-table td:first-child {
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.specs-table tr:last-child td { border-bottom: 0; }
.specs-table tr:hover td { background: rgba(0, 229, 255, 0.03); }
.specs-table .num { color: var(--accent); }

/* =====================================================
   CTA / Closing section
   ===================================================== */
.section--cta .section-inner {
  text-align: center;
}
.section--cta .site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--border-subtle);
}
.section--cta .site-footer .container {
  justify-content: center;
}
.section--cta .footer__legal {
  margin-inline: auto;
  text-align: center;
}
.cta-headline {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: var(--sp-6);
}
.cta-actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-8);
}

/* Contact list */
.contact-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 28rem;
}
.contact-item a {
  display: grid;
  grid-template-columns: 36px auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-line);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  text-align: left;
  transition: var(--transition);
}
.contact-item a:hover {
  border-color: var(--border-line);
  background:
    linear-gradient(rgba(0, 229, 255, 0.03), rgba(0, 229, 255, 0.03)),
    var(--bg-surface);
}
.contact-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-line);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(0, 229, 255, 0.06);
}
.contact-item__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-item__value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-align: right;
  white-space: nowrap;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .slide-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .slide-grid__visual {
    order: -1;
    max-width: min(72vw, 320px);
    margin-inline: auto;
  }
  .slide-grid__visual img {
    max-height: min(42vh, 360px);
  }
  .slide-grid__visual--handheld {
    max-width: min(42vw, 195px);
  }
  .slide-grid__visual--handheld img {
    max-height: min(63vh, 540px);
  }
  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-void);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a {
    display: block;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-toggle { display: inline-flex; }
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 720px) {
  .specs-table { font-size: 0.7rem; }
  .specs-table th, .specs-table td { padding: var(--sp-2) var(--sp-3); }

  .section--cta { padding-bottom: var(--sp-24); }

  /* Right-side dots are too tight on phones — hide them. The counter and
     scroll-hint stay (they give scroll feedback without taking real estate). */
  .section-nav { display: none !important; }
  .section-counter { font-size: 0.65rem; }
}

/* Shrink large display type slightly on shorter viewports. */
@media (max-height: 1100px) {
  .hero-title          { font-size: clamp(2.2rem, 6.5vw, 5rem); }
  .hero-sub            { font-size: clamp(0.9rem, 1.2vw, 1.05rem); }
  .statement           { font-size: clamp(1.6rem, 4vw, 3rem); }
  .statement-meta__num { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
  .cta-headline        { font-size: clamp(1.8rem, 4vw, 3rem); }
  .section h2          { font-size: clamp(1.55rem, 3vw, 2.4rem); }
  .lede                { font-size: clamp(0.95rem, 1.15vw, 1.05rem); }
  .feature-list li     { font-size: 0.85rem; }
}