/* SMART AQUA — Public Website Design System */

:root {
  --bg-dark: #040c18;
  --surface-dark: #071628;
  --surface-card: rgba(9, 26, 46, 0.72);
  --surface-card-solid: #0a1d33;
  --border-soft: rgba(120, 170, 210, 0.16);
  --aqua-primary: #1eb8d0;
  --aqua-secondary: #38d9f2;
  --text-white: #ffffff;
  --text-soft: #b8c7da;
  --text-muted: #8ba0bf;
  --success: #2dd98f;
  --warning: #f5a623;
  --danger: #e05a5a;

  --font-sans: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --max-width: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

html {
  scroll-behavior: auto;
}

body {
  background: var(--bg-dark);
  color: var(--text-soft);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Premium landing — W2/W3 */
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 500; padding: 0.7rem 1rem; color: #02141f; background: var(--aqua-secondary); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.landing-page { --landing-bg: #030914; --landing-surface: #081829; --landing-ink: #f4faff; --landing-soft: #b6c9d9; background: var(--landing-bg); }
.landing-page .site-header { position: absolute; width: 100%; background: linear-gradient(180deg, rgba(3,9,20,.82), transparent); border: 0; }
.landing-page .site-header.is-scrolled { position: fixed; background: rgba(3,9,20,.92); border-bottom: 1px solid rgba(182,201,217,.12); }
.landing-page .section-label { margin: 0 0 1rem; color: #68e7f2; font-size: .88rem; font-weight: 700; letter-spacing: .03em; }
.landing-hero { position: relative; min-height: min(940px, 100svh); display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.landing-hero__image, .landing-hero__veil, .landing-hero__glow { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-hero__image { z-index: -3; object-fit: cover; object-position: center; }
.landing-hero__veil { z-index: -2; background: linear-gradient(90deg, rgba(3,9,20,.97) 0%, rgba(3,9,20,.82) 34%, rgba(3,9,20,.12) 72%), linear-gradient(0deg, #030914 0%, transparent 26%); }
.landing-hero__glow { z-index: -1; opacity: .42; background: radial-gradient(circle at var(--pointer-x, 70%) var(--pointer-y, 48%), rgba(49,215,232,.2), transparent 26%); transition: opacity .3s; }
.landing-hero__content { padding-top: 8.5rem; padding-bottom: 5rem; }
.availability { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.6rem; color: var(--landing-soft); font-size: .88rem; }
.availability span { width: 7px; height: 7px; border-radius: 50%; background: #42d99a; box-shadow: 0 0 0 5px rgba(66,217,154,.12); }
.landing-hero h1 { max-width: 760px; margin-bottom: 1.5rem; color: var(--landing-ink); font-size: clamp(3.2rem, 7vw, 6rem); letter-spacing: -.04em; line-height: .96; }
.landing-hero h1 em { color: #68e7f2; font-style: normal; }
.landing-hero__lead { max-width: 650px; color: var(--landing-soft); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.7; text-wrap: pretty; }
.btn-large { padding: 1rem 1.8rem; }
.text-action { display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 0; color: var(--landing-ink); font-weight: 700; }
.text-action:hover { color: #68e7f2; }
.trust-line { display: flex; gap: clamp(1.6rem, 5vw, 4.5rem); margin: clamp(4rem, 9vh, 7rem) 0 0; }
.trust-line div { max-width: 190px; }
.trust-line dt { color: var(--landing-ink); font-weight: 700; }
.trust-line dd { margin: .25rem 0 0; color: #9bb2c5; font-size: .85rem; }
.system-story { padding: clamp(6rem, 12vw, 10rem) 0; }
.system-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.7fr); gap: 2rem 5rem; align-items: end; }
.system-intro .section-label { grid-column: 1 / -1; margin-bottom: -1rem; }
.system-intro h2, .experience h2, .local-proof h2, .early-access h2 { max-width: 780px; font-size: clamp(2.35rem, 5vw, 4.7rem); letter-spacing: -.04em; }
.system-intro > p:last-child, .experience-copy > p, .local-proof__copy > p, .early-access__copy > p { max-width: 65ch; color: var(--landing-soft); font-size: 1.08rem; }
.system-map { position: relative; min-height: 590px; margin-top: 5rem; border-radius: 16px; background: radial-gradient(circle at center, rgba(49,215,232,.1), transparent 27%), #061321; overflow: hidden; }
.system-map::before { content: ""; position: absolute; inset: 9%; border: 1px solid rgba(104,231,242,.1); border-radius: 50%; }
.system-map__lines { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.9%, rgba(104,231,242,.1) 50%, transparent 50.1%), linear-gradient(0deg, transparent 49.9%, rgba(104,231,242,.1) 50%, transparent 50.1%); }
.hub-node, .module-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--landing-ink); }
.hub-node { left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); border-radius: 50%; background: #09283a; box-shadow: 0 0 46px rgba(49,215,232,.18); }
.hub-node__pulse { position: absolute; inset: -16px; border: 1px solid rgba(104,231,242,.3); border-radius: inherit; animation: hub-pulse 3.5s ease-out infinite; }
.hub-node small, .module-node small { color: #9bb2c5; }
.module-node { width: 170px; min-height: 88px; padding: 1rem; border: 0; border-radius: 12px; background: #0b2134; cursor: pointer; transition: transform .3s var(--ease-out), background .3s; }
.module-node:hover, .module-node[aria-pressed="true"] { transform: translateY(-4px); background: #0c3045; }
.module-node--light { left: 8%; top: 16%; }.module-node--sensor { right: 8%; top: 16%; }.module-node--app { left: 8%; bottom: 17%; }.module-node--future { right: 8%; bottom: 17%; }
.system-map__detail { position: absolute; left: 50%; bottom: 1.4rem; width: min(90%, 600px); transform: translateX(-50%); color: #b6c9d9; text-align: center; }
.experience { padding: clamp(5rem, 10vw, 9rem) 0; background: #06111f; }
.experience .container { display: grid; grid-template-columns: minmax(0,.85fr) minmax(420px,1fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.reading-console { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 14px; background: #091c2e; }
.reading-console__head, .reading-row { display: flex; justify-content: space-between; align-items: center; }
.reading-console__head { padding-bottom: 1.2rem; color: #9bb2c5; font-size: .85rem; border-bottom: 1px solid rgba(182,201,217,.12); }
.reading-console__head i { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: #42d99a; }
.reading-primary { padding: 2.1rem 0 1.2rem; }
.reading-primary > span { display: block; color: #9bb2c5; }.reading-primary strong { display: block; color: var(--landing-ink); font-size: 3.8rem; line-height: 1.1; }.reading-primary strong small { font-size: 1.1rem; color: #9bb2c5; }
.reading-primary svg { width: 100%; height: 72px; margin-top: 1.1rem; overflow: visible; }.reading-primary path { fill: none; stroke: #31d7e8; stroke-width: 3; vector-effect: non-scaling-stroke; }
.reading-row { padding: 1rem 0; border-top: 1px solid rgba(182,201,217,.1); }.reading-row strong { color: var(--landing-ink); }
.local-proof { padding: clamp(6rem, 12vw, 11rem) 0; }.local-proof .container { display: grid; grid-template-columns: 1.1fr .7fr; gap: 4rem; }.local-proof__copy { padding-top: 3rem; }.local-proof__copy li { position: relative; padding: .75rem 0 .75rem 1.6rem; color: var(--landing-ink); border-bottom: 1px solid rgba(182,201,217,.1); }.local-proof__copy li::before { content: "✓"; position: absolute; left: 0; color: #42d99a; }
.early-access { padding: clamp(5rem, 9vw, 8rem) 0; background: #0a2637; }.early-access .container { display: grid; grid-template-columns: 1fr minmax(320px,.75fr); gap: 3rem 6rem; align-items: center; }.waitlist-form { padding: 2rem; border-radius: 14px; background: #f4faff; color: #082031; }.waitlist-form > label:first-child { display: block; margin-bottom: .5rem; font-weight: 700; }.waitlist-form__row { display: flex; gap: .7rem; }.waitlist-form input[type="email"] { min-width: 0; flex: 1; padding: .9rem 1rem; border: 1px solid #7891a5; border-radius: 8px; background: white; color: #061321; font: inherit; }.consent { display: flex; gap: .6rem; margin-top: 1rem; font-size: .82rem; line-height: 1.5; }.consent input { margin-top: .25rem; }.form-status { min-height: 1.5em; margin: .8rem 0 0; font-size: .9rem; }.form-status.success { color: #08764c; }.form-status.error { color: #a3242c; }
.landing-page .site-footer { background: #02070f; }.landing-page .footer-bottom { display: flex; justify-content: space-between; }
@keyframes hub-pulse { 0% { transform: scale(.86); opacity: .8; } 75%,100% { transform: scale(1.22); opacity: 0; } }
@media (max-width: 900px) { .system-intro, .experience .container, .local-proof .container, .early-access .container { grid-template-columns: 1fr; }.system-intro .section-label { margin-bottom: 0; }.experience-copy { max-width: 680px; }.local-proof__copy { padding-top: 0; } }
@media (max-width: 720px) { .landing-hero { min-height: 880px; }.landing-hero__image { object-position: 64% center; }.landing-hero__veil { background: linear-gradient(180deg, rgba(3,9,20,.55), rgba(3,9,20,.92) 63%, #030914); }.landing-hero__content { padding-top: 8rem; align-self: flex-end; }.landing-hero h1 { font-size: clamp(3rem, 14vw, 4.3rem); }.trust-line { display: grid; grid-template-columns: 1fr 1fr; }.system-map { min-height: 650px; }.module-node { width: 140px; }.module-node--light,.module-node--app { left: 4%; }.module-node--sensor,.module-node--future { right: 4%; }.waitlist-form__row { flex-direction: column; }.landing-page .footer-bottom { flex-direction: column; gap: .5rem; } }
@media (max-width: 430px) { .trust-line { grid-template-columns: 1fr; }.system-map { min-height: 720px; }.hub-node { top: 48%; }.module-node--light,.module-node--sensor { top: 9%; }.module-node--app,.module-node--future { bottom: 20%; }.system-map__detail { bottom: 2rem; } }
@media (prefers-reduced-motion: reduce) { .hub-node__pulse { animation: none; }.landing-hero__glow { display: none; } }

h1, h2, h3, h4 {
  color: var(--text-white);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

h1, h2, .brand {
  font-family: var(--font-display);
}

h1, h2, h3 { text-wrap: balance; }

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-2); }

.eyebrow {
  display: inline-block;
  color: var(--aqua-secondary);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: var(--space-1);
}

.lead {
  color: var(--text-soft);
  font-size: 1.1rem;
  max-width: 540px;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--aqua-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: var(--space-6) 0;
  position: relative;
}

@media (max-width: 768px) {
  .section { padding: var(--space-5) 0; }
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

.grid-2.reverse .grid-visual { order: 2; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2.reverse .grid-visual { order: -1; }
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* Buttons */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }

.btn-primary {
  background: linear-gradient(135deg, var(--aqua-primary), var(--aqua-secondary));
  color: #02141f;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px -6px rgba(56, 217, 242, 0.45);
}

/* Shine sweep on primary buttons */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-white);
}
.btn-outline:hover {
  border-color: var(--aqua-secondary);
  color: var(--aqua-secondary);
  box-shadow: 0 8px 24px -8px rgba(56, 217, 242, 0.3);
}

.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4, 12, 24, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: max-content;
}

.brand {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--text-white);
}
.brand span { color: var(--aqua-secondary); }

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(8, 28, 48, 0.78);
  box-shadow: inset 0 0 0 1px rgba(120, 170, 210, 0.2);
}

.language-switcher button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 38px;
  width: 38px;
  height: 32px;
  padding: 0.25rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.language-switcher button:hover { color: var(--text-white); transform: translateY(-1px); }
.language-switcher button[aria-pressed="true"] { color: #02141f; background: var(--aqua-secondary); }
.language-switcher__flag {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.main-nav ul {
  display: flex;
  gap: var(--space-3);
}

.main-nav a {
  position: relative;
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4rem 0.1rem;
}
.main-nav a:hover, .main-nav a.active { color: var(--text-white); }

.main-nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--aqua-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}
.main-nav ul a:hover::after, .main-nav ul a.active::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 72px;
  right: 0;
  left: 0;
  z-index: 99;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: 0.75rem 1.5rem 1.25rem;
  background: var(--surface-dark);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}
.mobile-nav.open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-2) 1.5rem; }
.mobile-nav a {
  display: block;
  padding: 0.85rem 0;
  color: var(--text-soft);
  font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
}
.mobile-nav .header-actions {
  width: 100%;
  padding: var(--space-2) 0 0;
  flex-direction: column;
  align-items: center;
}
.mobile-nav .header-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 900px) {
  .main-nav ul, .main-nav .header-actions { display: none; }
  .menu-toggle { display: flex; }
}

@media (max-width: 520px) {
  .site-header .container { padding-inline: 1rem; }
  .header-start { gap: 0.55rem; }
  .language-switcher button { min-width: 30px; width: 30px; padding: 0; }
}

html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .site-header .container,
html[dir="rtl"] .mobile-nav { direction: ltr; }
html[dir="rtl"] .main-nav a,
html[dir="rtl"] .mobile-nav a { direction: rtl; }
html[dir="rtl"] .cinematic-chapter,
html[dir="rtl"] .showcase-copy,
html[dir="rtl"] .section-head,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .content-copy,
html[dir="rtl"] .early-access__copy { direction: rtl; text-align: right; }
html[dir="rtl"] .btn-row,
html[dir="rtl"] .showcase-features,
html[dir="rtl"] .metric-picker { justify-content: flex-start; }
html[dir="rtl"] .showcase-features button { text-align: right; }
html[dir="rtl"] .local-proof__copy li { padding-right: 1.6rem; padding-left: 0; }
html[dir="rtl"] .local-proof__copy li::before { right: 0; left: auto; }
html[dir="rtl"] .reading-console__head i,
html[dir="rtl"] .live-board__head i { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] input[type="email"] { direction: ltr; text-align: left; }

/* Hero */
.hero {
  padding: var(--space-6) 0 var(--space-5);
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(30, 184, 208, 0.18), transparent 60%),
    radial-gradient(40% 40% at 10% 90%, rgba(56, 217, 242, 0.10), transparent 60%),
    var(--bg-dark);
  overflow: hidden;
}

.hero .grid-2 { gap: var(--space-5); }

.hero-badges {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.trust-strip {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--space-3) 0;
}

.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.trust-item svg { width: 18px; height: 18px; color: var(--aqua-secondary); flex-shrink: 0; }

/* Device visual (CSS/SVG built, no photography) */
.device-art {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #0c2238, #061322);
  border: 1px solid var(--border-soft);
  padding: var(--space-4);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 60px -10px rgba(30, 184, 208, 0.15) inset;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-art .glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 217, 242, 0.35), transparent 70%);
  filter: blur(10px);
  top: -40px;
  right: -40px;
}

/* Cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.icon-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(30, 184, 208, 0.14);
  color: var(--aqua-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.icon-circle svg { width: 20px; height: 20px; }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-soft);
}
.feature-list svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge-available { background: rgba(45, 217, 143, 0.14); color: var(--success); }
.badge-soon { background: rgba(245, 166, 35, 0.14); color: var(--warning); }

/* Module index sections (numbered) */
.module-number {
  color: var(--aqua-secondary);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

/* Live readings preview card (dashboard preview, customer-facing only) */
.readings-card .readings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.readings-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--success);
}
.readings-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
}
.readings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.reading {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.reading .label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.reading .value { font-size: 1.15rem; color: var(--text-white); font-weight: 700; }
@media (max-width: 480px) {
  .readings-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Specs table */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border-soft); }
.spec-table td { padding: 0.85rem 0.5rem; color: var(--text-soft); }
.spec-table td:first-child { color: var(--text-muted); width: 40%; }

/* Compare table */
.compare-table { width: 100%; border-collapse: collapse; overflow-x: auto; display: block; }
.compare-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-size: 0.92rem;
}
.compare-table th { color: var(--text-white); }

/* Final CTA */
.final-cta {
  text-align: center;
  background: linear-gradient(160deg, rgba(30,184,208,0.10), transparent 60%), var(--surface-dark);
  border-top: 1px solid var(--border-soft);
}
.final-cta .btn-row { justify-content: center; margin-top: var(--space-3); }

/* Footer */
.site-footer {
  background: #03070f;
  border-top: 1px solid var(--border-soft);
  padding: var(--space-5) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-3);
}
.footer-grid h4 {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.footer-grid a {
  display: block;
  color: var(--text-soft);
  padding: 0.35rem 0;
  font-size: 0.92rem;
}
.footer-grid a:hover { color: var(--aqua-secondary); }
.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

/* Forms */
.form-field { margin-bottom: var(--space-2); }
.form-field label {
  display: block;
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.form-field input, .form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--text-white);
  font-family: inherit;
  font-size: 0.95rem;
}
.form-field input:disabled, .form-field textarea:disabled { opacity: 0.6; }

.notice {
  background: rgba(30, 184, 208, 0.08);
  border: 1px solid rgba(30, 184, 208, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--text-soft);
  font-size: 0.92rem;
}

.draft-banner {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

/* Homepage — exact reference image with functional hotspot overlays */
body.image-homepage {
  margin: 0;
  background: var(--bg-dark);
}

.homepage-visual {
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  line-height: 0;
}

.homepage-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.hp-hotspot {
  position: absolute;
  display: block;
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollytelling story (pinned frame sequence + chapters) */
html.hero-loading, html.hero-loading body {
  overflow: hidden;
  height: 100%;
}

.story {
  position: relative;
}

.story-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #02080f;
}

.story-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.story-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 8, 15, 0.88) 0%, rgba(2, 8, 15, 0.4) 40%, transparent 62%);
}

.story-chapter {
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 500px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}

.story-chapter--intro {
  opacity: 1;
  visibility: visible;
}

.story-chapter h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

.story-chapter h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.story-chapter .lead {
  max-width: 460px;
}

.story-kicker {
  display: inline-block;
  color: var(--aqua-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--space-1);
}

/* Chapter link with nudging arrow */
.chapter-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--aqua-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: var(--space-2);
}
.chapter-link .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.chapter-link:hover .arrow { transform: translateX(5px); }
.chapter-link:hover { color: var(--text-white); }

/* Chapter progress rail */
.story-rail {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  z-index: 3;
}

.story-rail button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(56, 217, 242, 0.5);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.story-rail button:hover { transform: scale(1.3); }
.story-rail button.active {
  background: var(--aqua-secondary);
  box-shadow: 0 0 12px rgba(56, 217, 242, 0.7);
}

/* Skip link: hidden until keyboard focus */
.story-skip {
  position: absolute;
  top: 84px;
  left: 1rem;
  z-index: 10;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--surface-card-solid);
  border: 1px solid var(--aqua-secondary);
  color: var(--text-white);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
}
.story-skip:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .story-chapter {
    left: 5%;
    right: 5%;
    top: auto;
    bottom: 9%;
    transform: none;
    max-width: none;
  }
  .story-shade {
    background: linear-gradient(180deg, rgba(2, 8, 15, 0.25) 0%, rgba(2, 8, 15, 0.55) 55%, rgba(2, 8, 15, 0.95) 100%);
  }
  .story-rail {
    top: 78px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 0.75rem;
  }
}

/* No-motion fallback: reduced motion or GSAP unavailable.
   The story renders as a static hero image + normally stacked chapters. */
html.no-motion .story-stage {
  height: 62vh;
}
html.no-motion .story-chapter {
  position: static;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) 1.5rem;
}
html.no-motion .story-chapter > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html.no-motion .story-shade { background: linear-gradient(180deg, transparent 55%, rgba(2, 8, 15, 0.85) 100%); }
html.no-motion .story-rail, html.no-motion .story-skip { display: none; }

.hero-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: var(--bg-dark);
  transition: opacity 0.8s ease;
}

.hero-loader.hero-loader-done {
  opacity: 0;
  pointer-events: none;
}

.hero-loader-mark {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--text-white);
}
.hero-loader-mark span { color: var(--aqua-secondary); }

.hero-loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.hero-loader-fill {
  width: 0%;
  height: 100%;
  background: var(--aqua-secondary);
}

.hero-loader-caption {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .btn:active,
  .chapter-link:hover .arrow,
  .story-rail button:hover { transform: none !important; }
  .btn-primary::after { display: none; }
}

/* Cinematic Aquarium — Overdrive */
.cinematic-hero { position: relative; height: 420vh; background: #01050c; }
.cinematic-stage { position: sticky; top: 0; height: 100svh; min-height: 680px; overflow: hidden; isolation: isolate; background: #020814; }
.cinematic-fallback, .cinematic-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cinematic-fallback { z-index: -5; transition: opacity .8s ease; }
.cinematic-canvas { z-index: -4; opacity: 0; transition: opacity .8s ease; }
.cinematic-stage.is-canvas-ready .cinematic-canvas { opacity: 1; }
.cinematic-stage.is-canvas-ready .cinematic-fallback { opacity: 0; }
.cinematic-depth { position: absolute; z-index: -3; inset: -5%; background: radial-gradient(circle at calc(68% + var(--cinema-x, 0px)) calc(45% + var(--cinema-y, 0px)), transparent 0 18%, rgba(1,8,20,.1) 42%, rgba(1,5,12,.88) 92%); transform: scale(1.06); transition: background-position .3s ease-out; }
.cinematic-caustics { position: absolute; z-index: -2; inset: -30%; opacity: .34; mix-blend-mode: screen; filter: blur(18px); background: radial-gradient(ellipse at 20% 40%, rgba(35,214,236,.22) 0 3%, transparent 12%), radial-gradient(ellipse at 70% 62%, rgba(71,131,255,.2) 0 4%, transparent 14%), radial-gradient(ellipse at 48% 20%, rgba(130,244,255,.13) 0 2%, transparent 10%); background-size: 38% 32%, 44% 38%, 30% 28%; animation: cinematic-caustics 16s linear infinite alternate; }
.cinematic-vignette { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(1,5,12,.96) 0%, rgba(1,5,12,.74) 28%, transparent 63%), linear-gradient(0deg, rgba(1,5,12,.9) 0%, transparent 28%, rgba(1,5,12,.26) 100%); }
.cinematic-chapters { position: relative; height: 100%; }
.cinematic-chapter { position: absolute; top: 50%; left: 1.5rem; width: min(650px, calc(100% - 3rem)); color: #f7fcff; transform: translate3d(0, calc(-44% + 36px), 0); opacity: 0; visibility: hidden; filter: blur(14px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease, visibility 0s .7s; }
.cinematic-chapter.is-active { opacity: 1; visibility: visible; filter: blur(0); transform: translate3d(0,-44%,0); transition-delay: 0s; }
.cinematic-chapter--right { left: auto; right: 1.5rem; width: min(520px, calc(100% - 3rem)); text-align: right; }
.cinematic-index { margin-bottom: 1.35rem; color: #75e7f2; font-size: .77rem; font-weight: 800; letter-spacing: .11em; }
.cinematic-chapter h1, .cinematic-chapter h2 { margin: 0 0 1.5rem; max-width: 760px; color: #f7fcff; font-size: clamp(3.8rem, 7.3vw, 6rem); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.cinematic-chapter h1 em { color: #71e6ef; font-style: normal; }
.cinematic-chapter > p:not(.cinematic-index) { max-width: 600px; margin-bottom: 1.8rem; color: #c8d8e6; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.7; text-wrap: pretty; }
.cinematic-chapter--right > p:not(.cinematic-index) { margin-left: auto; }
.cinematic-link { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem .25rem; color: #f7fcff; font-weight: 700; }
.cinematic-link span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(247,252,255,.12); }
.cinematic-progress { position: absolute; z-index: 4; top: 50%; right: clamp(1rem,3vw,3rem); display: flex; flex-direction: column; align-items: center; gap: .6rem; color: #d9e9f3; font-size: .68rem; }
.cinematic-progress div { position: relative; width: 1px; height: 150px; background: rgba(255,255,255,.2); }
.cinematic-progress i { position: absolute; top: 0; left: 0; width: 1px; height: calc(var(--cinematic-progress, 0) * 100%); background: #65e7f1; box-shadow: 0 0 8px #65e7f1; }
.cinematic-scroll { position: absolute; z-index: 4; left: 50%; bottom: 1.8rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; transform: translateX(-50%); color: #c8d8e6; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; opacity: calc(1 - min(1, var(--cinematic-progress, 0) * 8)); }
.cinematic-scroll i { width: 1px; height: 34px; background: linear-gradient(#71e6ef, transparent); animation: cinematic-scroll 1.8s ease-in-out infinite; }
@keyframes cinematic-caustics { to { transform: translate3d(8%,5%,0) rotate(8deg) scale(1.08); } }
@keyframes cinematic-scroll { 0%,100% { transform: scaleY(.35); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

.control-theatre { padding: clamp(7rem, 13vw, 12rem) 0; overflow: hidden; background: #02070e; }
.control-theatre__intro { display: grid; grid-template-columns: 1fr minmax(280px,.48fr); gap: 1.5rem 5rem; align-items: end; margin-bottom: clamp(3rem,7vw,6rem); }
.control-theatre__signal { grid-column: 1 / -1; display: flex; align-items: center; gap: .65rem; margin: 0 0 .5rem; color: #85a2b8; font-size: .8rem; }
.control-theatre__signal span { width: 7px; height: 7px; border-radius: 50%; background: #42d99a; box-shadow: 0 0 0 5px rgba(66,217,154,.1); }
.control-theatre__intro h2 { max-width: 760px; margin: 0; color: #f5fbff; font-size: clamp(3rem,6vw,5.6rem); line-height: .96; letter-spacing: -.04em; }
.control-theatre__intro > p:last-child { max-width: 46ch; margin: 0 0 .5rem; color: #a9c0d0; font-size: 1.08rem; }
.control-theatre__shell { display: grid; grid-template-columns: 230px minmax(0,1fr); min-height: 720px; padding: 0; background: #06111d; border-radius: 16px; overflow: hidden; }
.control-theatre__tabs { display: flex; flex-direction: column; padding: 1rem; background: #050d17; }
.control-theatre__tabs button { position: relative; flex: 1; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-content: center; gap: .15rem .65rem; padding: 1rem; border: 0; border-bottom: 1px solid rgba(180,213,232,.1); background: transparent; color: #7893a7; text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; }
.control-theatre__tabs button:last-child { border-bottom: 0; }
.control-theatre__tabs button > span { grid-row: 1 / 3; align-self: center; color: #557085; font-size: .72rem; }
.control-theatre__tabs strong { color: inherit; font-size: 1rem; }
.control-theatre__tabs small { color: #668196; }
.control-theatre__tabs button:hover { color: #dcecf5; }
.control-theatre__tabs button[aria-selected="true"] { color: #f5fbff; background: #0a1d2d; }
.control-theatre__tabs button[aria-selected="true"]::after { content: ""; position: absolute; right: 0; top: 20%; bottom: 20%; width: 2px; background: #4cddea; }
.control-viewport { position: relative; min-width: 0; overflow: hidden; isolation: isolate; }
.control-viewport > img, .control-viewport__wash, .control-viewport__scan { position: absolute; inset: 0; width: 100%; height: 100%; }
.control-viewport > img { z-index: -4; object-fit: cover; object-position: 62% center; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.control-viewport__wash { z-index: -3; background: linear-gradient(90deg, rgba(3,10,18,.94), rgba(3,10,18,.42) 55%, rgba(3,10,18,.12)), linear-gradient(0deg, rgba(3,10,18,.92), transparent 50%); }
.control-viewport__scan { z-index: -2; opacity: .24; background: linear-gradient(110deg, transparent 35%, rgba(100,226,240,.22) 50%, transparent 65%); transform: translateX(-120%); animation: control-scan 8s ease-in-out infinite; }
@keyframes control-scan { 0%,55% { transform: translateX(-120%); } 85%,100% { transform: translateX(120%); } }
.control-hub { position: absolute; right: 7%; bottom: 7%; display: grid; grid-template-columns: auto auto; align-items: center; width: 158px; padding: 1rem 1.1rem; color: #eafbff; background: rgba(2,13,23,.82); border-radius: 12px; box-shadow: 0 0 0 1px rgba(105,225,239,.2); }
.control-hub i { grid-row: 1 / 4; width: 11px; height: 11px; margin-right: .75rem; border-radius: 50%; background: #42d99a; box-shadow: 0 0 16px #42d99a; }
.control-hub span { font-size: .65rem; letter-spacing: .16em; }.control-hub strong { font-size: 1.15rem; }.control-hub small { color: #86a2b6; }
.control-panel { position: absolute; inset: 0; padding: clamp(2rem,5vw,5rem); opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.control-panel.is-active { opacity: 1; transform: none; }
.control-panel__copy { max-width: 480px; }
.control-panel__copy > span { color: #6ee5ef; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.control-panel__copy h3 { margin: .8rem 0 1rem; color: #f5fbff; font-size: clamp(2.3rem,4.3vw,4rem); line-height: 1; letter-spacing: -.035em; }
.control-panel__copy p { max-width: 45ch; color: #b6cbd9; font-size: 1rem; }
.sun-dial { position: absolute; left: 7%; bottom: 10%; display: grid; place-items: center; width: 180px; height: 180px; border-radius: 50%; background: rgba(2,12,22,.76); }
.sun-dial__orbit { position: absolute; inset: 13px; border: 1px solid rgba(116,229,239,.35); border-radius: 50%; transform: rotate(var(--sun-angle, 25deg)); transition: transform .2s ease-out; }
.sun-dial__orbit i { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #e9fbff; box-shadow: 0 0 22px #4de2ef; }
.sun-dial strong { color: #f5fbff; font-size: 2rem; }.sun-dial > span { margin-top: 3.2rem; color: #7f9aae; font-size: .65rem; letter-spacing: .1em; }
.spectrum-control { position: absolute; left: calc(7% + 210px); bottom: 14%; width: min(300px,35%); color: #b8cddd; font-size: .78rem; }
.spectrum-control input { display: block; width: 100%; margin: .8rem 0; accent-color: #54e0eb; }.spectrum-control output { color: #f5fbff; font-size: 1.25rem; font-weight: 700; }
.light-controls { position: absolute; left: calc(7% + 210px); bottom: 9%; display: grid; width: min(340px,38%); gap: 1rem; }
.light-controls label { position: static; width: 100%; color: #b8cddd; font-size: .78rem; }
.light-controls input { display: block; width: 100%; margin: .55rem 0 .25rem; accent-color: #54e0eb; }
.light-controls output { color: #f5fbff; font-size: 1rem; font-weight: 700; }
[data-control-theatre][data-active="light"] .control-viewport > img { filter: brightness(var(--preview-brightness, .98)) saturate(1.04); }
.water-live { position: absolute; left: 7%; right: 8%; bottom: 8%; height: 250px; padding: 1.4rem; background: rgba(2,13,23,.78); border-radius: 12px; }
.water-live > div span { color: #f5fbff; font-size: 3.4rem; font-weight: 750; }.water-live > div small { color: #8fa8ba; font-size: 1rem; }.water-live svg { position: absolute; left: 28%; right: 2rem; top: 2.2rem; width: 67%; height: 130px; overflow: visible; }.water-live path { fill: none; stroke: #61e3ee; stroke-width: 3; stroke-dasharray: 700; animation: water-line 2.2s ease both; }.water-live p { position: absolute; left: 1.5rem; bottom: 1.3rem; color: #a7bfce; }.water-live p i { display: inline-block; width: 7px; height: 7px; margin-right: .5rem; border-radius: 50%; background: #42d99a; }
@keyframes water-line { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.route-visual { position: absolute; left: 7%; right: 8%; bottom: 12%; display: flex; align-items: center; justify-content: space-between; }
.route-node { display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; color: #edfaff; background: rgba(4,20,34,.9); box-shadow: 0 0 0 1px rgba(111,224,235,.22); font-weight: 700; }.route-node small { display: block; color: #7f9bad; font-weight: 400; }.route-node--main { background: #0b3445; box-shadow: 0 0 0 1px rgba(111,224,235,.38), 0 0 32px rgba(53,214,229,.18); }
.route-line { position: relative; flex: 1; height: 1px; margin: 0 1rem; background: rgba(111,224,235,.22); overflow: hidden; }.route-line i { position: absolute; width: 35%; height: 100%; background: #68e5ef; box-shadow: 0 0 8px #68e5ef; animation: route-packet 2s linear infinite; }
@keyframes route-packet { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
.module-dock { position: absolute; left: 7%; right: 8%; bottom: 10%; display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.module-dock > div { min-height: 135px; padding: 1.2rem; background: rgba(3,16,28,.8); border-radius: 10px; color: #91a9ba; }.module-dock i { display: block; width: 8px; height: 8px; margin-bottom: 2.5rem; border-radius: 50%; background: #61798a; }.module-dock strong,.module-dock small { display: block; }.module-dock small { margin-top: .3rem; color: #6f8799; }.module-dock .is-ready { color: #f1fbff; background: rgba(7,43,54,.88); }.module-dock .is-ready i { background: #42d99a; box-shadow: 0 0 10px #42d99a; }

@media (max-width: 900px) {
  .cinematic-hero { height: 360vh; }
  .cinematic-stage { min-height: 620px; }
  .cinematic-chapter--right { left: 1.5rem; right: auto; text-align: left; }
  .cinematic-chapter--right > p:not(.cinematic-index) { margin-left: 0; }
  .cinematic-vignette { background: linear-gradient(0deg, rgba(1,5,12,.95) 0%, rgba(1,5,12,.68) 55%, rgba(1,5,12,.16)); }
  .control-theatre__intro { grid-template-columns: 1fr; }
  .control-theatre__shell { grid-template-columns: 1fr; grid-template-rows: auto 650px; }
  .control-theatre__tabs { flex-direction: row; padding: .5rem; overflow-x: auto; }
  .control-theatre__tabs button { min-width: 150px; min-height: 76px; border-bottom: 0; border-right: 1px solid rgba(180,213,232,.1); }
  .control-theatre__tabs button[aria-selected="true"]::after { left: 18%; right: 18%; top: auto; bottom: 0; width: auto; height: 2px; }
}
@media (max-width: 640px) {
  .cinematic-stage { min-height: 580px; }
  .cinematic-fallback, .cinematic-canvas { object-position: 66% center; }
  .cinematic-chapter { top: auto; bottom: 7rem; left: 1.2rem; width: calc(100% - 2.4rem); transform: translate3d(0,25px,0); }
  .cinematic-chapter.is-active { transform: none; }
  .cinematic-chapter h1,.cinematic-chapter h2 { font-size: clamp(3rem,14vw,4.1rem); }
  .cinematic-chapter > p:not(.cinematic-index) { font-size: .98rem; line-height: 1.55; }
  .cinematic-progress { right: .75rem; }.cinematic-progress div { height: 100px; }.cinematic-scroll { display: none; }
  .control-theatre__shell { width: 100%; border-radius: 0; grid-template-rows: auto 720px; }
  .control-theatre__tabs { padding-left: 1rem; }.control-theatre__tabs button { min-width: 135px; }
  .control-panel { padding: 2rem 1.25rem; }.control-panel__copy h3 { font-size: 2.55rem; }
  .control-hub { right: 1rem; bottom: 1rem; transform: scale(.82); transform-origin: right bottom; }
  .sun-dial { left: 1.25rem; bottom: 9rem; width: 150px; height: 150px; }.light-controls { left: 1.25rem; right: 1.25rem; bottom: 1.5rem; width: auto; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .water-live { left: 1.25rem; right: 1.25rem; bottom: 5rem; height: 230px; }.water-live svg { left: 5%; top: 6rem; width: 90%; height: 80px; }
  .route-visual { left: 1rem; right: 1rem; bottom: 8rem; }.route-node { width: 88px; height: 88px; font-size: .8rem; }.route-line { margin: 0 .35rem; }
  .module-dock { left: 1.25rem; right: 1.25rem; bottom: 5rem; grid-template-columns: 1fr 1fr; }.module-dock > div { min-height: 105px; }.module-dock i { margin-bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero { height: 100svh; min-height: 720px; }
  .cinematic-canvas,.cinematic-caustics,.cinematic-progress,.cinematic-scroll { display: none; }
  .cinematic-chapter { display: none; }.cinematic-chapter:first-child { display: block; opacity: 1; visibility: visible; filter: none; transform: translateY(-44%); }
  .control-viewport__scan,.route-line i,.water-live path { animation: none; }
}

/* Legal content */
.legal-content h2 { margin-top: var(--space-4); }
.legal-content p, .legal-content li { color: var(--text-soft); }
.legal-content ul { list-style: disc; padding-left: 1.4rem; margin-bottom: var(--space-2); }

/* Calm chapter crossfade, smooth section seams, and interactive details */
.cinematic-chapters { perspective: none; }
.cinematic-chapter,
.cinematic-chapter--right { position: absolute; top: 50%; left: 1.5rem; right: auto; display: block; width: min(700px, calc(100% - 5rem)); height: auto; color: #f7fcff; text-align: left; opacity: 0; visibility: hidden; filter: blur(12px); transform: translate3d(0, calc(-44% + 22px), 0); transition: opacity .42s ease, filter .55s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1), visibility 0s linear .65s; pointer-events: none; }
.cinematic-chapter.is-active { opacity: 1; visibility: visible; filter: none; transform: translate3d(0, -44%, 0); transition-delay: 0s; pointer-events: auto; }
.cinematic-chapter--right > p:not(.cinematic-index) { margin-left: 0; }

.control-theatre,
.experience,
.local-proof,
.early-access { position: relative; isolation: isolate; }
.control-theatre { overflow: visible; }
.control-theatre::before,
.experience::before,
.local-proof::before,
.early-access::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none; }
.control-theatre::after,
.experience::after,
.local-proof::after,
.early-access::after { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; height: 90px; pointer-events: none; opacity: .45; border-top: 1px solid rgba(104,229,239,.34); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.control-theatre::before { top: 0; height: 110px; background: linear-gradient(180deg, #02070e 0%, rgba(2,7,14,.88) 42%, transparent 100%); border-radius: 0; }
.experience::before { top: -68px; height: 94px; background: #06111f; border-radius: 46% 54% 0 0 / 82% 100% 0 0; }
.local-proof::before { top: -72px; height: 102px; background: #030914; border-radius: 58% 42% 0 0 / 100% 76% 0 0; }
.early-access::before { top: -64px; height: 90px; background: #0a2637; border-radius: 43% 57% 0 0 / 78% 100% 0 0; }
.control-theatre::after { display: none; }
.experience::after { top: -54px; transform: rotate(.55deg); }
.local-proof::after { top: -58px; transform: rotate(-.45deg); }
.early-access::after { top: -50px; transform: rotate(.65deg); }
.control-theatre__intro,
.control-theatre__shell,
.experience > .container,
.local-proof > .container,
.early-access > .container { position: relative; z-index: 1; }

.water-metric-tabs { position: absolute; z-index: 2; left: 7%; right: 8%; bottom: 19rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.water-metric-tabs button { padding: .55rem .8rem; border: 0; border-radius: 999px; background: rgba(4,22,35,.82); color: #89a4b6; font: inherit; font-size: .75rem; cursor: pointer; transition: transform .2s ease, color .2s ease, background .2s ease; }
.water-metric-tabs button:hover { transform: translateY(-2px); color: #ecfbff; }
.water-metric-tabs button.is-active { color: #021219; background: #68e5ef; }
.water-metric-tabs small { margin-left: .25rem; opacity: .72; }
.derived-reading { position: absolute; right: 1.4rem; bottom: 1.1rem; max-width: 230px; text-align: right; }
.derived-reading strong,.derived-reading small { display: block; }.derived-reading strong { color: #71e5ee; }.derived-reading small { color: #8ca7b9; font-size: .68rem; }

.control-panel--expand { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; }
.control-panel--expand .control-panel__copy { grid-row: 1; }
.module-detail { position: static; grid-row: 2; align-self: end; max-width: 520px; padding: .9rem 1rem; background: rgba(3,18,30,.82); border-radius: 10px; }
.module-detail span { color: #68e5ef; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.module-detail p { margin: .35rem 0 0; color: #b8ceda; font-size: .86rem; }
.module-dock > button { min-height: 135px; padding: 1.2rem; border: 0; border-radius: 10px; background: rgba(3,16,28,.8); color: #91a9ba; font: inherit; text-align: left; cursor: pointer; transition: transform .28s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease; }
.module-dock > button:hover { transform: translateY(-6px); color: #e9f9ff; }
.module-dock > button.is-ready { color: #f1fbff; background: rgba(7,43,54,.88); }
.module-dock > button.is-active { background: #0c4050; box-shadow: 0 0 0 2px #65e3ed inset; }
.module-dock > button i { display: block; width: 8px; height: 8px; margin-bottom: 2.5rem; border-radius: 50%; background: #61798a; }
.module-dock > button.is-ready i { background: #42d99a; box-shadow: 0 0 10px #42d99a; }
.module-dock > button strong,.module-dock > button small { display: block; }.module-dock > button small { margin-top: .3rem; color: #7893a6; }
.control-panel--expand .module-dock { position: static; grid-row: 3; display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }

.reading-row--optional { background: rgba(84,213,225,.035); }
.reading-row--optional span small { display: inline-block; margin-left: .4rem; padding: .16rem .42rem; border-radius: 999px; color: #78dbe5; background: rgba(84,213,225,.09); font-size: .62rem; }
.reading-derived { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0 0; color: #7794a8; font-size: .76rem; }
.reading-derived strong { color: #70dce6; text-align: right; }
.local-proof .container { grid-template-rows: auto auto; }
.vision-plan { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px,.65fr) 1fr; gap: clamp(2rem,6vw,6rem); align-items: center; margin-top: clamp(4rem,8vw,7rem); padding: clamp(2rem,5vw,4.5rem); border-radius: 16px; background: #071c2a; overflow: hidden; }
.vision-plan__lens { position: relative; aspect-ratio: 1.4; border-radius: 50%; background: radial-gradient(circle, #07121b 0 18%, #115069 19% 25%, #081a28 26% 40%, #123448 41% 42%, #06131f 43% 100%); box-shadow: inset 0 0 45px rgba(75,219,233,.18); }
.vision-plan__lens::before { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a9f7ff 0 2%, #247f9e 8%, #071521 38%, #02070c 72%); }
.vision-plan__lens i { position: absolute; z-index: 2; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #42d99a; box-shadow: 0 0 16px #42d99a; transform: translate(-50%,-50%); animation: vision-pulse 2.4s ease-in-out infinite; }
@keyframes vision-pulse { 50% { transform: translate(-50%,-50%) scale(1.8); opacity: .5; } }
.vision-plan > div:last-child > span { color: #6ee5ef; font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.vision-plan h3 { margin: .7rem 0 1rem; color: #f4fbff; font-size: clamp(2rem,4vw,3.6rem); letter-spacing: -.035em; }
.vision-plan p { max-width: 58ch; color: #adc4d2; }
.vision-plan ul { display: flex; flex-wrap: wrap; gap: .6rem; }.vision-plan li { padding: .55rem .8rem; border-radius: 999px; color: #bdd3df; background: #0b2a3b; font-size: .76rem; }

@media (max-width: 900px) {
  .vision-plan { grid-template-columns: 1fr; }.vision-plan__lens { max-width: 520px; width: 100%; }
}
@media (max-width: 640px) {
  .cinematic-chapter,.cinematic-chapter--right { left: 1.2rem; width: calc(100% - 3rem); text-align: left; }
  .light-controls { grid-template-columns: 1fr; gap: .55rem; }
  .sun-dial { bottom: 12rem; }
  .water-metric-tabs { left: 1.25rem; right: 1.25rem; bottom: 19rem; }
  .module-dock > button { min-height: 105px; }.module-dock > button i { margin-bottom: 1.2rem; }
  .reading-derived { flex-direction: column; }.reading-derived strong { text-align: left; }
  .vision-plan { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-chapter { transition: none; filter: none; transform: translateY(-44%); }
  .vision-plan__lens i { animation: none; }
}

/* Reference-led product showcase */
.control-theatre,.experience,.local-proof,.early-access { display: none; }
.showcase-wave { position: relative; height: 110px; margin-top: -1px; background: #020813; overflow: hidden; }
.showcase-wave svg { display: block; width: 100%; height: 100%; }
.showcase-wave path { fill: #082746; stroke: rgba(91,181,255,.36); stroke-width: 2; }
.product-showcase { position: relative; color: #edf7ff; background: #06182b; overflow: hidden; }
.showcase-panel { position: relative; min-height: 620px; border-bottom: 1px solid rgba(109,177,226,.18); overflow: hidden; isolation: isolate; }
.showcase-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 78% 44%, rgba(22,112,207,.28), transparent 42%), linear-gradient(105deg,#06182b 0%,#082849 58%,#06182b 100%); }
.showcase-panel__inner { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(500px,1.42fr); align-items: center; min-height: inherit; gap: clamp(2rem,5vw,6rem); padding-block: clamp(4rem,8vw,7rem); }
.showcase-copy { position: relative; z-index: 3; max-width: 440px; }
.showcase-number { display: block; margin-bottom: .7rem; color: #42bfff; font-size: 1.05rem; font-weight: 700; }
.showcase-copy h2 { margin: 0 0 1rem; color: #f4f9ff; font-size: clamp(2.25rem,4vw,3.8rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.showcase-copy h2 small { display: inline-block; margin-left: .5rem; color: #42d8ef; font-size: .9rem; letter-spacing: 0; vertical-align: middle; }
.showcase-copy > p { max-width: 38ch; color: #bad0e1; font-size: 1.03rem; line-height: 1.7; }
.showcase-features { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.showcase-features button { min-width: 102px; padding: 0; border: 0; color: #a9c2d7; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.showcase-features button i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .65rem; border-radius: 50%; color: #78dfff; background: #0d3154; box-shadow: 0 0 0 1px rgba(111,205,255,.16); font-style: normal; transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s ease; }
.showcase-features button:hover i,.showcase-features button.is-active i { transform: translateY(-4px); color: #02121f; background: #57dafa; }
.showcase-features button span { font-size: .76rem; line-height: 1.35; }
.showcase-slider { display: block; width: min(360px,100%); margin-top: 2rem; color: #9fb9cd; font-size: .78rem; }
.showcase-slider input { display: block; width: 100%; margin: .65rem 0 .3rem; accent-color: #5dddf3; }.showcase-slider output { color: #eaf9ff; font-weight: 700; }
.showcase-visual { position: relative; min-width: 0; transform: perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.showcase-visual img { display: block; width: 100%; height: auto; object-fit: cover; }
.showcase-visual--reef { align-self: stretch; margin-right: -8vw; overflow: hidden; mask-image: linear-gradient(90deg,transparent 0%,#000 18%); }
.showcase-visual--reef img { height: 100%; min-height: 520px; filter: brightness(var(--showcase-light,.92)) saturate(1.14); transform: scale(1.07); transition: filter .35s ease, transform 1.2s cubic-bezier(.16,1,.3,1); }
.showcase-panel:hover .showcase-visual--reef img { transform: scale(1.025); }
.light-beam { position: absolute; inset: -20% 8% 0 18%; background: conic-gradient(from 210deg at 50% 0%,transparent,rgba(82,211,255,.25),transparent 34%); mix-blend-mode: screen; opacity: .8; pointer-events: none; }

.showcase-panel--water::before { background: radial-gradient(circle at 76% 30%,rgba(0,99,200,.35),transparent 36%),linear-gradient(105deg,#09213b,#07335e 64%,#071b31); }
.metric-picker { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.metric-picker button { padding: .55rem .7rem; border: 0; border-radius: 999px; color: #98b5ca; background: #0c3153; font: inherit; font-size: .75rem; cursor: pointer; }
.metric-picker button.is-active { color: #04131e; background: #64ddf2; }.metric-picker small { display: block; opacity: .72; font-size: .58rem; }
.live-board { width: min(660px,100%); padding: 1.5rem; border-radius: 14px; background: rgba(5,29,56,.92); box-shadow: 0 0 0 1px rgba(105,194,255,.24), 0 16px 30px rgba(0,5,15,.24); transform: perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.live-board__head { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid rgba(121,185,229,.17); }.live-board__head span { color: #9cb8cc; font-size: .72rem; }.live-board__head i { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: #41de97; box-shadow: 0 0 10px #41de97; }
.live-board__focus { position: relative; min-height: 205px; padding: 1.6rem 0; }.live-board__focus > span { color: #94b5cc; }.live-board__focus strong { display: block; margin-top: .2rem; font-size: 3.4rem; }.live-board__focus strong small { margin-left: .2rem; color: #9db8cb; font-size: 1rem; }.live-board__focus svg { position: absolute; right: 0; bottom: 1rem; width: 65%; height: 105px; }.live-board__focus path { fill: none; stroke: #3ecbff; stroke-width: 3; stroke-linecap: round; }
.live-board__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; }.live-board__grid span { padding: .8rem; color: #7fa1b9; background: #0a2848; font-size: .7rem; }.live-board__grid strong { display: block; margin-top: .35rem; color: #e9f7ff; font-size: .9rem; }

.showcase-panel--hub::before { background: radial-gradient(circle at 72% 52%,rgba(21,154,235,.42),transparent 38%),linear-gradient(110deg,#06182a,#0a3763); }
.showcase-visual--product { margin-right: -5vw; }.showcase-visual--product img { filter: saturate(1.05); }.product-aura { position: absolute; left: 45%; bottom: 4%; width: 44%; height: 12%; border-radius: 50%; background: #00bfff; filter: blur(36px); opacity: .34; z-index: -1; }
.hub-note { min-height: 2.8em; color: #6fdaef !important; font-size: .82rem !important; transition: opacity .2s ease, transform .25s ease; }

.showcase-panel--control::before { background: radial-gradient(circle at 75% 55%,rgba(23,124,205,.32),transparent 42%),linear-gradient(105deg,#06172a,#082c4f); }
.control-switch { display: inline-flex; gap: .25rem; margin-top: 1.6rem; padding: .25rem; border-radius: 999px; background: #0b2b49; }.control-switch button { padding: .65rem .85rem; border: 0; border-radius: 999px; color: #93afc4; background: transparent; font: inherit; cursor: pointer; }.control-switch button.is-active { color: #03121c; background: #59d9ef; }.control-mode-note { min-height: 2.8em; margin-top: 1rem; color: #72dbed !important; font-size: .82rem !important; }
.device-scene { position: relative; min-height: 440px; transform: perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.screen-mock { position: absolute; right: 0; top: 5%; display: grid; grid-template-columns: 120px 1fr; width: 82%; min-height: 360px; border-radius: 12px; background: #061326; box-shadow: 0 20px 40px rgba(0,0,0,.34); overflow: hidden; }.screen-nav { padding: 1.4rem 1rem; color: #dff7ff; background: #071b32; font-size: .75rem; }.screen-nav small { display: block; margin-top: 2rem; color: #4ed8ed; }.screen-main { padding: 1.5rem; }.screen-main > strong { color: #e8f7ff; }.screen-main svg { width: 100%; height: 135px; margin: 1rem 0; }.screen-main path { fill: none; stroke: #31c9ef; stroke-width: 3; }.screen-main > div { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }.screen-main span { padding: .8rem; color: #edf9ff; background: #0a2440; }.screen-main small { display: block; margin-top: .3rem; color: #6f9ab5; }
.phone-mock { position: absolute; left: 0; bottom: 0; z-index: 2; width: 160px; min-height: 330px; padding: 1rem; border-radius: 14px; color: #dff7ff; background: #050d19; box-shadow: 0 15px 30px rgba(0,0,0,.4); }.phone-reef { height: 92px; margin: .8rem 0; background: url('/website/assets/frames/frame_0038.jpg') center/cover; }.phone-mock p { color: #77ddef; }.phone-mock i { display: block; height: 32px; margin-top: .45rem; border-radius: 6px; background: #0a223b; }
.connection-orbit { position: absolute; right: -2%; top: 5%; width: 180px; height: 180px; border: 1px dashed rgba(82,214,239,.38); border-radius: 50%; animation: orbit-spin 14s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.showcase-panel--camera { min-height: 560px; }.showcase-panel--camera::before { background: radial-gradient(circle at 73% 40%,rgba(31,126,211,.3),transparent 38%),linear-gradient(105deg,#04101e,#071b30); }.showcase-visual--camera { margin-right: -7vw; }.showcase-visual--camera img { mask-image: linear-gradient(90deg,transparent,#000 22%); }
.showcase-access { padding: clamp(4rem,8vw,7rem) 0; background: #08243c; }.showcase-access > .container { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; }.showcase-access span { color: #55d9ee; font-size: .72rem; font-weight: 800; }.showcase-access h2 { max-width: 15ch; margin: .8rem 0 0; color: #f2f9ff; font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.035em; }

@media (max-width: 900px) {
  .showcase-panel__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .showcase-copy { max-width: 560px; }
  .showcase-visual--reef,.showcase-visual--product,.showcase-visual--camera { margin-right: 0; }
  .showcase-visual--reef { min-height: 420px; }
  .showcase-visual--reef img { min-height: 420px; }
  .device-scene { min-height: 420px; }
  .showcase-access > .container { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .showcase-wave { height: 70px; }
  .showcase-panel { min-height: auto; }
  .showcase-panel__inner { padding-block: 4rem; }
  .showcase-copy h2 { font-size: 2.45rem; }
  .showcase-features button { min-width: 88px; }
  .live-board { padding: 1rem; }
  .live-board__focus svg { position: static; width: 100%; margin-top: 1rem; }
  .live-board__grid { grid-template-columns: 1fr 1fr; }
  .screen-mock { position: relative; width: 100%; grid-template-columns: 80px 1fr; }
  .phone-mock { transform: scale(.78); transform-origin: left bottom; }
  .screen-main > div { grid-template-columns: 1fr; }
  .showcase-visual--camera strong { right: 5%; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-visual,.live-board,.device-scene { transform: none !important; transition: none; }
  .connection-orbit { animation: none; }
}

/* Full-bleed product imagery: copy and interactions float over the scene. */
.showcase-panel--light .showcase-panel__inner,
.showcase-panel--hub .showcase-panel__inner,
.showcase-panel--control .showcase-panel__inner,
.showcase-panel--camera .showcase-panel__inner { position: relative; display: flex; align-items: center; }
.showcase-panel--light .showcase-visual,
.showcase-panel--hub .showcase-visual,
.showcase-panel--camera .showcase-visual,
.showcase-panel--control .device-scene { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; min-height: 0; margin: 0; overflow: hidden; transform: translateX(-50%) perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transform-origin: 72% 50%; }
.showcase-panel--light .showcase-visual img,
.showcase-panel--hub .showcase-visual img,
.showcase-panel--camera .showcase-visual img,
.showcase-panel--control .device-scene img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; mask-image: none; transform: scale(1.015); transition: filter .35s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.showcase-panel--light:hover .showcase-visual img,
.showcase-panel--hub:hover .showcase-visual img,
.showcase-panel--camera:hover .showcase-visual img,
.showcase-panel--control:hover .device-scene img { transform: scale(1.035); }
.showcase-panel--light::after,
.showcase-panel--hub::after,
.showcase-panel--control::after,
.showcase-panel--camera::after { display: none; }
.showcase-panel--light .showcase-visual::after,
.showcase-panel--hub .showcase-visual::after,
.showcase-panel--camera .showcase-visual::after,
.showcase-panel--control .device-scene::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(2,10,20,.98) 0%,rgba(2,12,24,.88) 30%,rgba(2,12,24,.22) 58%,rgba(2,12,24,.06) 100%); }
.showcase-panel--light .showcase-panel__inner,
.showcase-panel--hub .showcase-panel__inner,
.showcase-panel--control .showcase-panel__inner,
.showcase-panel--camera .showcase-panel__inner { z-index: 1; }
.showcase-panel--light .showcase-copy,
.showcase-panel--hub .showcase-copy,
.showcase-panel--control .showcase-copy,
.showcase-panel--camera .showcase-copy { z-index: 2; }
.showcase-panel--light .light-beam { inset: 0; background: radial-gradient(circle at 74% 22%,rgba(73,206,255,.18),transparent 34%); }
.showcase-panel--hub .showcase-visual img { object-position: center; }
.showcase-panel--control .device-scene img { object-position: center; }
.showcase-panel--control .connection-orbit { right: 8%; top: 18%; }
.showcase-panel--control .connection-orbit { z-index: 2; }
.showcase-panel--camera .showcase-visual img { object-position: center; }

@media (max-width: 900px) {
  .showcase-panel--light .showcase-panel__inner,
  .showcase-panel--hub .showcase-panel__inner,
  .showcase-panel--control .showcase-panel__inner,
  .showcase-panel--camera .showcase-panel__inner { min-height: 660px; align-items: flex-end; }
  .showcase-panel--light .showcase-visual::after,
  .showcase-panel--hub .showcase-visual::after,
  .showcase-panel--camera .showcase-visual::after,
  .showcase-panel--control .device-scene::after { background: linear-gradient(0deg,rgba(2,10,20,.98) 0%,rgba(2,12,24,.72) 46%,rgba(2,12,24,.08) 78%); }
  .showcase-panel--light .showcase-copy,
  .showcase-panel--hub .showcase-copy,
  .showcase-panel--control .showcase-copy,
  .showcase-panel--camera .showcase-copy { max-width: 100%; padding: 1.3rem; background: rgba(2,12,24,.62); backdrop-filter: blur(8px); }
  .showcase-panel--light .showcase-visual img { object-position: 68% center; }
  .showcase-panel--hub .showcase-visual img { object-position: 68% center; }
  .showcase-panel--control .device-scene img { object-position: 64% center; }
  .showcase-panel--camera .showcase-visual img { object-position: 66% center; }
}

/* Seamless hero cut and product-focused micro-interactions */
.product-showcase { z-index: 2; margin-top: 0; }
.showcase-panel--light .showcase-visual,
.showcase-panel--hub .showcase-visual,
.showcase-panel--camera .showcase-visual,
.showcase-panel--control .device-scene { transform: translateX(-50%); transform-origin: center; }
.showcase-panel--light .showcase-visual img,
.showcase-panel--hub .showcase-visual img,
.showcase-panel--camera .showcase-visual img,
.showcase-panel--control .device-scene img,
.showcase-panel--light:hover .showcase-visual img,
.showcase-panel--hub:hover .showcase-visual img,
.showcase-panel--camera:hover .showcase-visual img,
.showcase-panel--control:hover .device-scene img { transform: scale(1.02); }
.showcase-panel--camera .showcase-visual img { transition: filter .3s ease, transform .3s ease; }
.showcase-panel--camera:hover .showcase-visual img { filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 20px rgba(52,180,255,.2)); }

@media (max-width: 900px) {
  .product-showcase { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-panel--camera .showcase-visual img { transition: none; }
}