/* ==========================================================================
   MAXSCAN 750 — Landing Page (Section 1: Header + Hero)
   Reuses css/tokens.css (dark_theme colors) but overrides the font stack:
   Cairo for Arabic (instead of tokens.css's Tajawal) and Jost for Latin/
   numerals — both self-hosted locally (see assets/fonts/) for reliability,
   same reasoning as the local Tajawal setup. Full-width desktop layout —
   intentionally does NOT include base.css (which pins the mobile 480px frame
   used by the app-simulation screens).
   ========================================================================== */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../../assets/fonts/cairo/Cairo-Arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../../assets/fonts/cairo/Cairo-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../assets/fonts/jost/Jost-VariableFont.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

:root {
  --lp-bg: #05070a;
  --lp-bg-alt: #0a0e14;
  --lp-gold: #f5b942;
  --lp-gold-soft: #ffe3a3;
  --lp-text-dim: #a9a29b;
  --lp-border: rgba(255, 255, 255, 0.1);
  --lp-maxw: 1180px;
  --font-family: 'Cairo', -apple-system, 'Segoe UI', sans-serif;
  --font-numeral: 'Jost', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --reveal-stagger: 80ms;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--lp-bg); }

body {
  margin: 0;
  max-width: none;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--lp-bg);
  color: #eef2f6;
  font-family: var(--font-family);
  line-height: 1.65;
}

img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------------------------- loading animation ---------------------------- */
.page-loader {
  position: fixed; inset: 0; z-index: 500; background: var(--lp-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .5s ease, visibility .5s ease;
}
.page-loader__logo { height: 46px; width: auto; animation: loaderPulse 1.4s ease-in-out infinite; }
.page-loader__bar { width: 160px; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.page-loader__bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-soft)); animation: loaderSlide 1.1s ease-in-out infinite; }
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loaderPulse { 0%, 100% { opacity: .6; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes loaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  margin-bottom: 18px;
}
.eyebrow--gold { color: var(--lp-gold-soft); border-color: rgba(245, 185, 66, 0.4); background: rgba(245, 185, 66, 0.08); }

/* ---------------------------- buttons ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; border-radius: 999px; padding: 14px 30px;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease, opacity .2s ease;
  cursor: pointer;
}
.btn--gold { background: linear-gradient(135deg, var(--lp-gold-soft), var(--lp-gold) 60%, #c98a1e); color: #1a1002; box-shadow: 0 8px 30px -8px rgba(245, 185, 66, 0.55); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -8px rgba(245, 185, 66, 0.75); }
.btn--lg { padding: 17px 40px; font-size: 17px; }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------------------------- header ---------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(5, 7, 10, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-border);
  transition: background .3s ease, padding .3s ease;
}
.site-header.is-scrolled { background: rgba(5, 7, 10, 0.92); }
.site-header__inner { max-width: var(--lp-maxw); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; }
.site-header__logo { height: 34px; width: auto; }
.site-header__nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 500; color: #d7dee6; }
.site-header__nav a:hover { color: var(--lp-gold-soft); }
.site-header__nav a.is-active { color: var(--lp-gold-soft); }
.site-header__tools { display: flex; align-items: center; gap: 10px; }
.tool-pill { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--lp-border); color: #cfd6dd; }
.tool-pill.is-current { color: var(--lp-gold-soft); border-color: var(--lp-gold-soft); }
.tool-pill svg { width: 14px; height: 14px; }

/* language switcher — single dropdown instead of one pill per language */
.lang-switch__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfd6dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 10px center;
  background-size: 13px;
  border: 1px solid var(--lp-border); border-radius: 999px;
  color: #cfd6dd; font-family: var(--font-family); font-size: 13px; font-weight: 500;
  padding: 7px 30px 7px 14px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lang-switch__select:hover, .lang-switch__select:focus { border-color: var(--lp-gold-soft); color: var(--lp-gold-soft); }
.lang-switch__select option { background: #11161d; color: #fff; }
html[dir="rtl"] .lang-switch__select {
  background-position: left 10px center; padding: 7px 14px 7px 30px;
}
.site-header__burger { display: none; flex-direction: column; gap: 4px; width: 24px; z-index: 61; position: relative; }
.site-header__burger span { height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease-spring), opacity .2s ease; }
.site-header__burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__burger.is-active span:nth-child(2) { opacity: 0; }
.site-header__burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

/* ---------------------------- hero ---------------------------- */
.hero { position: relative; padding: 150px 0 60px; overflow: hidden; background: var(--lp-bg); }
.hero__starfield {
  position: absolute; inset: -6% -6% -6% -6%; z-index: 0;
  background:
    radial-gradient(1.5px 1.5px at 8% 22%, #ffffff99, transparent),
    radial-gradient(1px 1px at 18% 68%, #ffffff77, transparent),
    radial-gradient(2px 2px at 27% 12%, #ffffffaa, transparent),
    radial-gradient(1px 1px at 35% 45%, #ffffff66, transparent),
    radial-gradient(1.5px 1.5px at 46% 78%, #ffffff88, transparent),
    radial-gradient(1px 1px at 58% 20%, #ffffff66, transparent),
    radial-gradient(2px 2px at 68% 55%, #ffffff99, transparent),
    radial-gradient(1px 1px at 77% 15%, #ffffff77, transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, #ffffff88, transparent),
    radial-gradient(1px 1px at 94% 70%, #ffffff66, transparent),
    radial-gradient(1.5px 1.5px at 12% 90%, #ffffff77, transparent),
    radial-gradient(1px 1px at 62% 88%, #ffffff55, transparent),
    radial-gradient(1px 1px at 50% 35%, #ffffff55, transparent),
    radial-gradient(1.5px 1.5px at 72% 8%, #ffffff77, transparent),
    var(--lp-bg);
  animation: starDrift 110s linear infinite alternate;
  will-change: transform;
}
@keyframes starDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3%, -2.5%); }
}
.hero__starfield::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(245, 185, 66, 0.18), transparent 42%),
    radial-gradient(circle at 82% 70%, rgba(245, 185, 66, 0.14), transparent 48%),
    radial-gradient(circle at 55% 100%, rgba(255, 227, 163, 0.1), transparent 55%);
  animation: nebulaBreathe 16s ease-in-out infinite alternate;
}
@keyframes nebulaBreathe {
  0% { transform: scale(1) translate(0, 0); opacity: .8; }
  100% { transform: scale(1.18) translate(-2%, 1.5%); opacity: 1; }
}
.hero__starfield::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 15% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 65%, #fff, transparent),
    radial-gradient(2px 2px at 65% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
    radial-gradient(2px 2px at 30% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 5% 55%, #fff, transparent);
  animation: starTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0% { opacity: .1; }
  50% { opacity: .9; }
  100% { opacity: .25; }
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: 93px; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 28px; }

/* ---------------------------- hero boot-in sequence ---------------------------- */
.hero__visual {
  position: relative;
  --boot-scale: .94;
  opacity: 0; transform: scale(var(--boot-scale));
  transition: opacity 1s var(--reveal-ease), transform 1s var(--reveal-ease);
}
.hero__inner.is-booted .hero__visual { opacity: 1; --boot-scale: 1; }
.hero__visual-parallax { will-change: transform; }
.hero__composite { width: 100%; height: auto; animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero__copy > * { opacity: 0; transform: translateY(22px); }
.hero__inner.is-booted .hero__copy > * { animation: heroBootIn .85s var(--reveal-ease) forwards; }
.hero__inner.is-booted .hero__copy > *:nth-child(1) { animation-delay: .05s; }
.hero__inner.is-booted .hero__copy > *:nth-child(2) { animation-delay: .17s; }
.hero__inner.is-booted .hero__copy > *:nth-child(3) { animation-delay: .29s; }
.hero__inner.is-booted .hero__copy > *:nth-child(4) { animation-delay: .41s; }
@keyframes heroBootIn { to { opacity: 1; transform: translateY(0); } }

.hero__title { margin: 6px 0 6px; line-height: 0; }
.hero__title-logo { display: inline-block; height: clamp(34px, 4.6vw, 66px); width: auto; }
.hero__tagline { font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.4; min-height: 2.8em; margin: 0 0 8px; color: var(--lp-gold-soft); }
.hero__tagline::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-inline-start: 3px;
  background: var(--lp-gold-soft);
  vertical-align: -0.15em;
  animation: heroTaglineCursor 900ms steps(1) infinite;
}
@keyframes heroTaglineCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__tagline::after { animation: none; opacity: 1; }
}
.hero__desc { color: var(--lp-text-dim); margin: 0 0 26px; font-size: 15px; }

.price-card { border: 1px solid var(--lp-border); border-radius: 12px; background: rgba(255,255,255,0.03); padding: 20px; margin-bottom: 22px; }
.price-card__row { display: flex; border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.price-card__col { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; }
.price-card__col--highlight { background: rgba(245, 185, 66, 0.08); border-left: 1px solid var(--lp-border); }
.price-panel__label { font-size: 12px; color: var(--lp-text-dim); }
.price-panel__value { font-family: var(--font-numeral); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; }
.price-panel__value--strike { text-decoration: line-through; color: #7d8994; }
.price-panel__value--gold { color: var(--lp-gold-soft); }
.price-panel__value small { font-size: 12px; font-weight: 300; }

.hero__limited { margin: 14px 0 0; font-size: 13px; color: var(--lp-text-dim); text-align: center; display: flex; align-items: center; justify-content: center; gap: 7px; }
.led-alert {
  width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6), 0 0 8px 1px rgba(255, 59, 59, 0.8);
  animation: ledPulse 1.4s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55), 0 0 8px 1px rgba(255, 59, 59, 0.8); }
  50% { box-shadow: 0 0 0 5px rgba(255, 59, 59, 0), 0 0 12px 3px rgba(255, 59, 59, 1); }
}

/* ---------------------------- hero stats strip ---------------------------- */
.hero-stats { position: relative; z-index: 1; background: var(--lp-bg-alt); border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.hero-stats__inner { max-width: var(--lp-maxw); margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; }
.hero-stats__item { display: flex; align-items: center; gap: 12px; flex: 1; color: var(--lp-gold-soft); }
.hero-stats__item--countdown { flex: 1.3; justify-content: center; }
.hero-stats__item svg { width: 30px; height: 30px; flex-shrink: 0; }
.hero-stats__divider { width: 1px; align-self: stretch; background: var(--lp-border); margin: 0 24px; }
.hero-stats__body { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.hero-stats__body--center { align-items: center; text-align: center; }
.hero-stats__label { font-size: 21px; color: var(--lp-text-dim); white-space: nowrap; }
.hero-stats__value { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
.hero-stats__value .numeral { font-family: var(--font-numeral); font-variant-numeric: tabular-nums; }
.hero-stats__item--units .hero-stats__value { direction: ltr; unicode-bidi: isolate; text-align: right; font-family: var(--font-numeral); font-variant-numeric: tabular-nums; }
.hero-stats__item--units .progress-bar { width: 160px; margin-inline-start: auto; }

.progress-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); margin-top: 8px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-soft)); border-radius: 999px; transition: width .6s ease; }

.countdown { display: flex; gap: 8px; }
.countdown--plain { direction: ltr; gap: 0; }
.countdown--plain .countdown__cell { background: none; border: none; border-radius: 0; padding: 0 16px; min-width: 0; border-left: 1px solid var(--lp-border); }
.countdown--plain .countdown__cell:first-child { border-left: none; padding-inline-start: 0; }
.countdown--plain .countdown__cell:last-child { padding-inline-end: 0; }
.countdown__cell { background: rgba(0,0,0,0.35); border: 1px solid var(--lp-border); border-radius: 10px; padding: 6px 10px; text-align: center; min-width: 46px; }
.countdown__cell span { display: block; font-family: var(--font-numeral); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lp-gold-soft); }
.countdown--plain .countdown__cell span { color: #fff; font-size: 28px; }
.countdown__cell small { font-size: 10px; color: var(--lp-text-dim); }

/* ---------------------------- reveal-on-scroll ----------------------------
   Generic engine: elements carry data-reveal="up|left|right|scale|pop".
   landing.js observes each and adds .is-inview once, in-place, no re-trigger.
   Wrap a set of siblings in [data-reveal-group] to auto-stagger them —
   landing.js writes --reveal-i per child so the CSS delay formula staggers. */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s var(--reveal-ease), transform .9s var(--reveal-ease), filter .9s var(--reveal-ease);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  will-change: transform, opacity;
}
[data-reveal].is-inview { opacity: 1; transform: none; filter: none; }

[data-reveal="up"] { transform: translateY(46px); }
[data-reveal="left"] { transform: translateX(-64px); }
[data-reveal="right"] { transform: translateX(64px); }
[data-reveal="scale"] { transform: scale(.85); transition-timing-function: var(--ease-spring); }
[data-reveal="pop"] { transform: scale(.4) rotate(-10deg); transition-timing-function: var(--ease-spring); }

/* one-shot golden materialize burst once the coupon settles into place */
.coupon-box.is-inview { animation: couponGlowPulse 1.1s ease-out .55s 1; }
@keyframes couponGlowPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 185, 66, .5); }
  55% { box-shadow: 0 0 44px 10px rgba(245, 185, 66, .35); }
  100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, 0); }
}

/* ---------------------------- generic section ---------------------------- */
.section {
  padding: 90px 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 900px 420px at 50% 0%, rgba(245, 185, 66, 0.05), transparent 70%), var(--lp-bg);
}
.section--alt {
  background: radial-gradient(ellipse 900px 420px at 50% 0%, rgba(245, 185, 66, 0.06), transparent 70%), var(--lp-bg-alt);
}
.section__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 35%;
  background-color: #0d0f12;
  /* filter: brightness(0.5) saturate(1.15) blur(1px); */
  animation: stageBgBreathe 9s ease-in-out infinite alternate;
}
.section__scrim {
  position: absolute; inset: 0 0 auto 0; height: 320px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.15) 70%, transparent);
}
@keyframes stageBgBreathe {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.5%, -1%); }
}
.section::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: 50%;
  width: min(700px, 86%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 185, 66, 0.7), transparent);
  box-shadow: 0 0 39px 1px rgba(245, 210, 91, 0.45);
  transform: translateX(-50%) scaleX(0); transform-origin: center; opacity: 0;
  transition: transform 1.1s var(--reveal-ease), opacity 1.1s var(--reveal-ease);
}
.section.is-inview::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
.section__inner { position: relative; z-index: 1; max-width: var(--lp-maxw); margin: 0 auto; padding: 0 28px; }
.section__title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 0 0 10px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.section__title--center { text-align: center; }
.section__lead { color: var(--lp-text-dim); font-size: 15px; margin: 0 0 30px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.section__lead--center { text-align: center; }

/* ---------------------------- promo video ---------------------------- */
.promo-video__frame {
  position: relative; width: 100%; max-width: 900px; margin: 44px auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(245, 185, 66, 0.25); background: #11151b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.promo-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0;
}
.promo-video__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-video__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.02), rgba(0,0,0,.28));
}
.promo-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 84px; height: 84px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: linear-gradient(135deg, var(--lp-gold-soft), var(--lp-gold) 70%); color: #1a1002;
  box-shadow: 0 0 0 10px rgba(245, 185, 66, 0.15), 0 14px 40px -8px rgba(245, 185, 66, 0.7);
  animation: hotspotPulse 2.4s ease-in-out infinite;
  transition: transform .25s var(--ease-spring);
}
.promo-video__play:hover, .promo-video__play:focus { transform: translate(-50%, -50%) scale(1.08); }
.promo-video__play svg { width: 30px; height: 30px; margin-left: 4px; }

/* ---------------------------- early bird offer ---------------------------- */
.early-bird__lead { color: var(--lp-gold-soft); font-weight: 700; margin-top: -14px; }
.coupon-box {
  display: flex; max-width: 480px; margin: 40px auto 0;
  border-radius: 14px; overflow: hidden;
}
.coupon-box__main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed rgba(245, 185, 66, 0.5); border-inline-start: none; border-radius: 14px 0 0 14px;
  background: rgba(245, 185, 66, 0.06); padding: 22px;
}
.coupon-box__code { font-family: var(--font-numeral); font-size: 24px; font-weight: 700; letter-spacing: 1px; color: var(--lp-gold-soft); }
.coupon-box__label { font-size: 12px; color: var(--lp-text-dim); }
.coupon-box__off {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 110px; flex-shrink: 0; border-radius: 0 14px 14px 0;
  background: linear-gradient(135deg, var(--lp-gold-soft), var(--lp-gold) 70%);
  font-family: var(--font-numeral); font-size: 26px; font-weight: 700; color: #1a1002;
}
.coupon-box__off small { font-size: 12px; font-weight: 700; letter-spacing: 1px; }

.benefits-row { display: flex; justify-content: center; gap: 18px; margin-top: 50px; flex-wrap: wrap; }
.early-bird__cta-wrap { display: flex; justify-content: center; margin-top: 46px; }
.benefit { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; }
.benefit__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid rgba(245, 185, 66, 0.25); background: rgba(255, 255, 255, 0.03); color: var(--lp-gold-soft);
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit__label { font-size: 13px; color: #d7dee6; text-align: center; }

/* ---------------------------- why maxscan ---------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.why-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 26px 14px; border: 1px solid rgba(245, 185, 66, 0.25); border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); transition: border-color .25s ease, transform .25s ease;
}
.why-card:hover { border-color: rgba(245, 185, 66, 0.55); transform: translateY(-3px); }
.why-card__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--lp-gold-soft); }
.why-card__icon svg { width: 30px; height: 30px; }
.why-card p { font-size: 14px; font-weight: 700; color: #eef2f6; margin: 0; }

/* ---------------------------- two systems ---------------------------- */
/* borderless, editorial-style rows — no card frame, section background
   matches the video's own background so everything reads as one continuous
   surface; the "+" is a small circular badge between rows. */
#systems.section { background: #11151b; }
#systems .section__title { position: relative; padding-bottom: 22px; }
#systems .section__title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lp-gold-soft), var(--lp-gold));
}
.systems-grid { display: grid; grid-template-columns: 1fr; gap: 64px; margin-top: 48px; }
.system-card {
  display: flex; align-items: center; gap: 48px; padding: 0;
  transition: transform .25s ease;
}
.system-card:hover { transform: translateY(-3px); }
/* the video grows to soak up whatever space the text column doesn't need,
   instead of sitting at a fixed width with dead space beside it */
.system-card__img { flex: 1 1 0; min-width: 0; }
video.system-card__img { height: auto; object-fit: contain; background: #11151b; }
.system-card__text { flex: 0 1 400px; min-width: 0; }
.system-card__text h3 { font-size: 21px; margin: 0 0 4px; color: var(--lp-gold-soft); }
.system-card__subtitle { font-family: var(--font-numeral); font-size: 12px; font-weight: 300; color: var(--lp-text-dim); margin: 0 0 16px; }
.system-card__desc { font-size: 14px; color: #d7dee6; margin: 0 0 10px; line-height: 1.7; }
.system-card__spec { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 20px; }
.btn-outline-gold {
  display: inline-block; border: 1.5px solid var(--lp-gold); color: var(--lp-gold-soft);
  background: transparent; border-radius: 999px; padding: 9px 20px; font-size: 13px; font-weight: 700;
}

/* ---------------------------- unit specs (vectorsense + smartsense) ---------------------------- */
/* two unit cards side by side on desktop, one row — each is its own unified
   card: video on top, spec table below, separated by a divider line, not
   two separate boxes with a gap between them, so each reads as one section.
   Wider than the standard --lp-maxw container: two full spec tables need
   more breathing room than this page's other (prose-width) sections. */
#unit-specs .section__inner { max-width: 1400px; }
.unit-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; align-items: start; }
.vectorsense-layout {
  display: flex; flex-direction: column;
  border: 1px solid rgba(245, 185, 66, 0.25); border-radius: var(--radius-lg);
  background: #11151b; overflow: hidden;
}
.unit-spec-card__title {
  margin: 0; padding: var(--space-4) var(--space-6) 0;
  font-size: 17px; font-weight: 700; color: var(--lp-gold-soft);
}
.vectorsense-specs { padding: var(--space-5) var(--space-6); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--lp-border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table th, .spec-table td { padding: var(--space-4) 0; text-align: left; vertical-align: top; font-size: 14px; line-height: 1.7; font-weight: 400; }
.spec-table th { width: 34%; padding-inline-end: var(--space-4); font-weight: 700; color: var(--lp-gold-soft); }
.spec-table td { color: #d7dee6; }
.video-frame { border-bottom: 1px solid rgba(245, 185, 66, 0.16); }
.video-frame video {
  width: 47%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* justify-items: center; */
  place-self: anchor-center;
}

/* ---------------------------- tech integration ---------------------------- */
.integration-card {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 34px;
  border: 1px solid rgba(245, 185, 66, 0.25); border-radius: 20px;
  background: rgba(255, 255, 255, 0.03); padding: 46px 40px; margin-top: 40px;
}
.integration-systems { display: flex; flex-direction: column; gap: var(--space-6); }

/* each unit is framed as its own panel — SmartSense / VectorSense — so its
   child systems read as belonging to it (parent -> children), not just a
   flat list. A thin trunk + branch tick per row gives the tree/org-chart
   cue the flat list was missing, kept low-opacity so it stays a structural
   hint rather than decoration. */
.integration-unit {
  border: 1px solid rgba(245, 185, 66, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.integration-unit h3 {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 700; color: #fff;
  margin: 0 0 var(--space-3); padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(245, 185, 66, 0.14);
}
.integration-unit h3::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lp-gold); flex: none;
}
.integration-sys-list {
  list-style: none; margin: 0; padding: 0;
  padding-inline-start: 20px;
  display: flex; flex-direction: column;
}
.integration-sys {
  position: relative; cursor: pointer;
  padding-block: 7px; padding-inline: 16px 6px;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease;
}
/* trunk: continuous line running through the whole list, connecting every
   system down to the next one; stops at the last node instead of
   overhanging past it. */
.integration-sys::before {
  content: ''; position: absolute; inset-inline-start: -14px;
  top: 0; bottom: 0; width: 1px; background: rgba(245, 185, 66, 0.22);
}
.integration-sys:last-child::before { bottom: auto; height: 20px; }
/* branch: short tick from the trunk into the row, anchored to the name
   line's own vertical center (not the row's midpoint) so it doesn't drift
   when the description reveals underneath the active row. */
.integration-sys::after {
  content: ''; position: absolute; inset-inline-start: -14px; top: 20px;
  width: 12px; height: 1px; background: rgba(245, 185, 66, 0.22);
}
.integration-sys:hover { background: rgba(255, 255, 255, 0.035); }
.integration-sys__name {
  display: block; font-size: 18px; font-weight: 600; color: #d7dee6;
  transition: color .2s ease;
}
.integration-sys:hover .integration-sys__name { color: var(--lp-gold-soft); }
.integration-sys.is-active { background: rgba(245, 185, 66, 0.07); }
.integration-sys.is-active::after { background: var(--lp-gold); }
.integration-sys.is-active .integration-sys__name { color: var(--lp-gold); }
/* one-line description, revealed only for the system currently playing —
   smooth opacity+height reveal on --reveal-ease (Apple-product-page feel),
   not a typewriter effect. */
.integration-sys__desc {
  display: block; overflow: hidden; max-height: 0; opacity: 0; font-size: 14px; color: var(--lp-text-dim);
  transform: translateY(-4px);
  transition: max-height .5s var(--reveal-ease), opacity .4s var(--reveal-ease), transform .4s var(--reveal-ease), margin-top .5s var(--reveal-ease);
}
.integration-sys.is-active .integration-sys__desc {
  max-height: 28px; opacity: 1; transform: translateY(0); margin-top: 4px;
}

.integration-phone { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.phone-frame { position: relative; width: 300px; border-radius: 34px; border: 3px solid #1c2530; background: #000; padding: 10px; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6); flex-shrink: 0; }
.phone-frame__screen { position: relative; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 18px; overflow: hidden; background: #000; }
.integration-lottie { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.integration-lottie svg { width: 100% !important; height: 100% !important; }
.integration-lottie-badge {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--lp-gold-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* home indicator, sitting just above .integration-lottie-badge, never overlapping it */
.phone-frame__home-indicator {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 3px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5); z-index: 3; pointer-events: none;
}
/* status bar — sits inside .phone-frame__screen (clipped to its rounded
   corners) so it reads as part of the screen glass, like a real phone. */
.phone-frame__statusbar {
  position: absolute; top: 10px; left: 16px; right: 16px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; pointer-events: none;
}
.phone-frame__time { font-family: var(--font-numeral); font-size: 11px; font-weight: 700; direction: ltr; }
.phone-frame__status-icons { display: flex; align-items: center; gap: 4px; }
.phone-frame__status-icons svg { display: block; }
.phone-frame__status-icons svg:nth-child(1) { width: 14px; height: 10px; }
.phone-frame__status-icons svg:nth-child(2) { width: 14px; height: 11px; }
.phone-frame__status-icons svg:nth-child(3) { width: 20px; height: 10px; }

/* side buttons — on the case itself, outside .phone-frame__screen's clip.
   Lighter brushed-metal tone (vs. the near-black bezel) plus a hairline
   dark edge so they read as distinct raised buttons, not just a shadow. */
.phone-frame__btn {
  position: absolute; width: 4px;
  background: linear-gradient(90deg, #454f5e, #250c06 45%, #5e5245);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  z-index: 1;
}
/* -4px here (vs. -8px/-10px in css/base.css and stage-layout.css) is
   intentional, not a leftover from before those were tuned: this frame's
   bezel is a thin 3px border, not a thick painted box-shadow ring, so the
   buttons need to sit much closer to the screen edge to land on that
   ring instead of floating past it. Don't blindly match the other two. */
.phone-frame__btn--vol-up, .phone-frame__btn--vol-down { left: -4px; border-radius: 0 3px 3px 0; }
.phone-frame__btn--vol-up { top: 68px; height: 30px; }
.phone-frame__btn--vol-down { top: 106px; height: 30px; }
.phone-frame__btn--power { right: -4px; top: 84px; height: 40px; border-radius: 3px 0 0 3px; }

/* mobile-only system slider — hidden on desktop, .integration-systems used there instead */
.integration-slider { display: none; }

.integration-tagline {
  grid-column: 1 / -1; text-align: center; margin: 30px 0 0; padding-top: 26px;
  border-top: 1px solid var(--lp-border); font-size: 24px; font-weight: 700; color: var(--lp-gold-soft);
}

/* ---------------------------- 3 imaging modes ---------------------------- */
.modes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.mode-card {
  border: 1px solid rgba(245, 185, 66, 0.25); border-radius: 16px;
  background: #070b14; padding: 26px; text-align: center;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}
.mode-card:hover { border-color: rgba(245, 185, 66, 0.55); transform: translateY(-3px); }
.mode-card h3 { font-size: 19px; margin: 0 0 4px; color: var(--lp-gold-soft); }
.mode-card__subtitle { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.mode-card__desc { font-size: 13.5px; color: var(--lp-text-dim); line-height: 1.7; margin: 0 0 22px; }
.mode-card__img { width: 100%; padding: 22px; box-sizing: border-box; }

/* ---------------------------- 360 product explorer / hotspots ---------------------------- */
/* .section (two-class selector, so it still wins over the plain .section
   padding overrides in the responsive tiers below — otherwise those reinsert
   bottom padding here and leave a gap between the device photo and the
   section edge, disconnecting it from the rock in the background image) */
.section.explorer-section { padding-top: 50px; padding-bottom: 0; }
.explorer-section.section::before { box-shadow: 0 0 55px 4px rgba(245, 210, 91, 0.9); }
/* the photo/rock stops at a hard section edge with nothing behind it (no
   next section shares its background) — fade it into the page's base tone
   before that edge instead of cutting straight to the next section's dark
   background. */
#explorer::after {
  content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(180deg, transparent, var(--lp-bg) 92%);
  pointer-events: none;
}
.simulator-section { background: #000; }
.sim-cta {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  transform: translate(-50%, calc(-50% + 10px)); opacity: 0;
  transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring);
}
.hotspot-stage.is-inview .sim-cta { opacity: 1; transform: translate(-50%, -50%); }
.hotspot-stage.is-inview .sim-cta:nth-of-type(1) { transition-delay: .85s; }
.hotspot-stage.is-inview .sim-cta:nth-of-type(2) { transition-delay: 1s; }
.sim-cta:hover, .sim-cta:focus { z-index: 50; }
.sim-cta__label { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.sim-cta__label strong { font-size: 13px; font-weight: 700; color: var(--lp-gold-soft); text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.sim-cta__label span { font-family: var(--font-numeral); font-size: 12px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.sim-cta__btn {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--lp-gold-soft), var(--lp-gold) 70%); color: #1a1002;
  box-shadow: 0 0 0 5px rgba(245, 185, 66, 0.15), 0 8px 26px -6px rgba(245, 185, 66, 0.7);
  animation: hotspotPulse 2.4s ease-in-out infinite; transition: transform .25s var(--ease-spring);
}
.sim-cta:hover .sim-cta__btn, .sim-cta:focus .sim-cta__btn { transform: scale(1.12); }
.sim-cta__btn svg { width: 20px; height: 20px; }
/* device hover spotlight — dims the rest of the composite photo and lifts
   a soft golden vignette over whichever unit is hovered (or its button).
   Two fixed hit zones per device (not the whole image) so the phone mockup
   between them never triggers it. */
.simulator-section .hotspot-stage__spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--reveal-ease);
}
.simulator-section .hotspot-hit { position: absolute; z-index: 1; cursor: pointer; }
.simulator-section .hotspot-hit--smartsense-a { left: 0; top: 38%; width: 66%; height: 30%; }
.simulator-section .hotspot-hit--smartsense-b { left: 0; top: 38%; width: 23%; height: 53%; }
.simulator-section .hotspot-hit--vectorsense { left: 70%; top: 0; width: 30%; height: 95%; }
/* NOTE: the golden highlight layer keeps an explicit small ellipse size on
   purpose (its last stop is transparent, so "outside the ellipse" is a no-op
   fill). The dark vignette layer must NOT use an explicit size — anything
   outside an explicit-size gradient is filled with a flat, hard-edged copy
   of the last color stop instead of continuing to fade, which read as a
   solid black rectangle covering most of the box. `farthest-corner` (the
   default sizing keyword) makes the 100% stop land exactly at the box's
   farthest corner so the fade stays smooth all the way to the edges. */
.simulator-section .hotspot-stage.spot-smartsense .hotspot-stage__spotlight {
  opacity: 1;
  background:
    radial-gradient(ellipse 34% 27% at 30% 62%, rgba(245, 185, 66, .16) 0%, rgba(245, 185, 66, .05) 45%, transparent 72%),
    radial-gradient(ellipse farthest-corner at 30% 62%, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0) 35%, rgba(5, 7, 10, .35) 68%, rgba(5, 7, 10, .55) 100%);
}
.simulator-section .hotspot-stage.spot-vectorsense .hotspot-stage__spotlight {
  opacity: 1;
  background:
    radial-gradient(ellipse 16% 30% at 86% 65%, rgba(245, 185, 66, .16) 0%, rgba(245, 185, 66, .05) 45%, transparent 72%),
    radial-gradient(ellipse farthest-corner at 86% 65%, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0) 28%, rgba(5, 7, 10, .35) 62%, rgba(5, 7, 10, .55) 100%);
}
.simulator-section .section__bg {
  background-position: bottom center; background-repeat: no-repeat; background-size: cover;
  /* filter: brightness(0.9) blur(0px); */
  /* opacity: 1; */
}
.explorer-section__inner { display: flex; flex-direction: column; min-height: 640px; }
.hotspot-stage { position: relative; max-width: 1500px; width: 100%; margin: 0 auto; margin-top: auto; }
.simulator-section .hotspot-stage { max-width: 900px; }
.simulator-section .explorer-section__inner { min-height: 0; }
.simulator-section .hotspot-stage { margin-top: 0; }
.simulator-section .section__title,
.simulator-section .section__lead {
  position: absolute; top: 80px; left: 0; right: 0; z-index: 3;
}
.simulator-section .section__lead { top: 150px; }
.hotspot-stage__img {
  position: relative; z-index: 1; width: 100%; height: auto; display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s var(--reveal-ease);
}
.hotspot-stage.is-inview .hotspot-stage__img { clip-path: inset(0 0 0 0); }

/* explorer section: the rock rises up from below, scrubbed to scroll
   position (GSAP ScrollTrigger — see js/screens/landing-gsap-trial.js),
   instead of the horizontal scan-wipe used elsewhere. ID beats the generic
   .hotspot-stage__img rule above so this always wins regardless of source
   order or .is-inview state. */
#explorer .hotspot-stage__img { clip-path: none; opacity: 0; transform: translateY(160px) scale(1.02); will-change: transform, opacity; }
#explorer.no-scroll-fx .hotspot-stage__img { opacity: 1; transform: none; }

/* scanner-head sweep bar — the device's own reveal, not a stock fade */
.hotspot-stage__scanbar {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--lp-gold-soft) 18%, var(--lp-gold) 50%, var(--lp-gold-soft) 82%, transparent);
  box-shadow: 0 0 22px 3px rgba(245, 185, 66, .75), 0 0 56px 12px rgba(245, 185, 66, .35);
  opacity: 0; pointer-events: none;
}
.hotspot-stage.is-inview .hotspot-stage__scanbar { animation: hotspotScanSweep 1.44s var(--reveal-ease) forwards; }

/* explorer section: scanbar sweep is now fired from the same GSAP timeline
   as the rise-up (as a "scan complete" flourish once the rock has landed),
   not from the separate is-inview stage observer — same reasoning as the
   image override above. */
#explorer .hotspot-stage.is-inview .hotspot-stage__scanbar { animation: none; }
#explorer.no-scroll-fx .hotspot-stage__scanbar { display: none; }
@keyframes hotspotScanSweep {
  0% { left: 0; opacity: 1; }
  25% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* simulator section: soft focus-in reveal instead of the scan-sweep */
.simulator-section .hotspot-stage__scanbar { display: none; }
.simulator-section .hotspot-stage__img {
  clip-path: none;
  opacity: 0; filter: blur(16px); transform: translateY(26px) scale(1.04);
  transition: opacity 1.1s var(--reveal-ease), filter 1.1s var(--reveal-ease), transform 1.1s var(--reveal-ease);
}
.simulator-section .hotspot-stage.is-inview .hotspot-stage__img {
  opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
}

.hotspot:hover, .hotspot:focus, .hotspot.is-active { z-index: 50; }
.hotspot {
  position: absolute; z-index: 2; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) scale(.35); opacity: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(245, 185, 66, 0.9); color: #1a1002; font-family: var(--font-numeral); font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(245, 185, 66, 0.2), 0 0 18px rgba(245, 185, 66, 0.6);
  animation: hotspotPulse 2.4s ease-in-out infinite;
  transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring);
  cursor: pointer;
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245, 185, 66, 0.2), 0 0 18px rgba(245, 185, 66, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(245, 185, 66, 0.12), 0 0 24px rgba(245, 185, 66, 0.8); }
}
.hotspot-stage.is-inview .hotspot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hotspot-stage.is-inview .hotspot:nth-of-type(1) { transition-delay: .85s; }
.hotspot-stage.is-inview .hotspot:nth-of-type(2) { transition-delay: .95s; }
.hotspot-stage.is-inview .hotspot:nth-of-type(3) { transition-delay: 1.05s; }
.hotspot-stage.is-inview .hotspot:nth-of-type(4) { transition-delay: 1.15s; }
.hotspot-stage.is-inview .hotspot:nth-of-type(5) { transition-delay: 1.25s; }
.hotspot-stage.is-inview .hotspot:nth-of-type(6) { transition-delay: 1.35s; }

/* explorer section: hotspots must never be visible before the rock is —
   they used to fade in on the separate is-inview stage observer, decoupled
   from the image's own reveal timing (bug: buttons floating with no rock
   under them). Pinned hidden here; GSAP brings them in as part of the same
   scrubbed timeline as the image, once it's mostly risen. */
#explorer .hotspot { opacity: 0; transition: none; }
#explorer.no-scroll-fx .hotspot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hotspot::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 12px); right: 50%; transform: translateX(50%) translateY(6px);
  width: 220px; background: rgb(11 14 19 / 33%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--lp-border); border-radius: 12px; padding: 12px 14px;
  font-family: var(--font-family); font-size: 12.5px; line-height: 1.6; color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 5;
}
.hotspot:hover::after, .hotspot:focus::after, .hotspot.is-active::after { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------------------------- booking reminder (subtle corner nudge) ---------------------------- */
.booking-reminder {
  /* bottom pushed up from the usual 22px to clear the fixed WhatsApp float
     button, which always sits bottom-left regardless of inset-inline-start's
     RTL flip — see .whatsapp-float below. */
  position: fixed; bottom: 100px; inset-inline-start: 22px; z-index: 55;
  display: flex; align-items: center; gap: 14px;
  max-width: 380px; background: rgba(10, 13, 18, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--lp-border); border-radius: 14px;
  padding: 14px 18px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  transform: translateY(140%); opacity: 0; transition: transform .5s var(--ease-spring), opacity .4s ease;
}
.booking-reminder[hidden] { display: none; }
.booking-reminder.is-visible { transform: translateY(0); opacity: 1; }
.booking-reminder__text { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: #eef2f6; }
.booking-reminder__cta { white-space: nowrap; flex-shrink: 0; }
.booking-reminder__close {
  position: absolute; top: -9px; inset-inline-end: -9px;
  width: 22px; height: 22px; border-radius: 50%; line-height: 1;
  background: var(--lp-bg-alt); border: 1px solid var(--lp-border); color: #eef2f6;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.booking-reminder__close:hover { color: var(--lp-gold-soft); }
@media (max-width: 560px) {
  .booking-reminder { inset-inline: 14px; bottom: 84px; max-width: none; flex-wrap: wrap; }
}

/* ---------------------------- WhatsApp floating widget ---------------------------- */
/* always physical bottom-left — opposite the Tawk.to bubble, which the chat
   vendor always renders bottom-right regardless of page direction. */
.whatsapp-float {
  position: fixed; left: 24px; bottom: 24px; z-index: 56;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: whatsappPulse 2.6s ease-in-out infinite;
  text-decoration: none;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float__hint {
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-8px);
  background: #11161d; color: #fff; padding: 10px 16px; border-radius: 10px; white-space: nowrap;
  font-family: var(--font-family); font-size: 13px; font-weight: 600;
  border: 1px solid var(--lp-border); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.whatsapp-float__hint::after {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: #11161d;
}
.whatsapp-float:hover .whatsapp-float__hint,
.whatsapp-float.is-hint-visible .whatsapp-float__hint {
  opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto;
}
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  50% { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.5), 0 0 0 12px rgba(37, 211, 102, 0); }
}
@media (max-width: 560px) {
  .whatsapp-float { left: 16px; bottom: 16px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float__hint { font-size: 12px; padding: 8px 12px; }
}

/* ---------------------------- Tawk.to widget — scaled down ~1/3 ---------------------------- */
/* third-party iframe, styled via inline styles set by their own script, so an
   un-!important rule here would lose the cascade — scale is the only lever
   this embed gives us without dashboard access. */
iframe[title="chat widget"] {
  transform: scale(0.67) !important;
  transform-origin: bottom right !important;
}

/* ---------------------------- about us ---------------------------- */
/* logo above, facts below as a 3-up row of icon cards (same bordered-card
   language as .why-card / .benefit) instead of a wall of paragraph text. */
.about-grid { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 44px; }
.about-grid__logo { flex: none; width: 100%; max-width: 260px; display: block; }

.about-facts {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 980px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.about-fact {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; min-width: 0;
  padding: 20px; border: 1px solid rgba(245, 185, 66, 0.25); border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); transition: border-color .25s ease, transform .25s ease;
}
.about-fact:hover { border-color: rgba(245, 185, 66, 0.55); transform: translateY(-3px); }
.about-fact__icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; margin-top: 2px;
  display: grid; place-items: center; color: var(--lp-gold-soft);
  border: 1px solid rgba(245, 185, 66, 0.3); background: rgba(245, 185, 66, 0.06);
}
.about-fact__icon svg { width: 21px; height: 21px; }
.about-fact p { margin: 0; font-size: 14px; line-height: 1.75; color: #d7dee6; min-width: 0; overflow-wrap: break-word; }

/* ---------------------------- footer ---------------------------- */
.site-footer { border-top: 1px solid var(--lp-border); background: var(--lp-bg-alt); }
.site-footer__inner {
  max-width: var(--lp-maxw); margin: 0 auto; padding: 40px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__logo { height: 30px; width: auto; display: block; }
.site-footer__tagline { margin: 0; font-size: 13px; color: var(--lp-text-dim); }
.site-footer__links { display: flex; align-items: center; gap: 24px; }
.site-footer__links a { font-size: 14px; color: #cfd6dd; }
.site-footer__links a:hover { color: var(--lp-gold-soft); }
.site-footer__contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px;
  padding: 18px 28px; border-top: 1px solid var(--lp-border);
}
.site-footer__contact-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfd6dd; }
.site-footer__contact-item svg { width: 16px; height: 16px; color: var(--lp-gold-soft); flex-shrink: 0; }
a.site-footer__contact-item:hover { color: var(--lp-gold-soft); }
.site-footer__bottom { border-top: 1px solid var(--lp-border); padding: 16px 28px; text-align: center; }
.site-footer__bottom p { margin: 0; font-size: 12px; color: var(--lp-text-dim); }

/* ==========================================================================
   RTL (Arabic) OVERRIDES — index-ar.html loads this same stylesheet with
   <html lang="ar" dir="rtl">. The rules above default to LTR (English,
   index.html): logo/brand at the physical left, primary actions at the
   right, body text left-aligned. These overrides restore the original
   RTL-authored physical layout (brand still pinned left via row-reverse,
   RTL-native right-aligned body copy) whenever dir="rtl" is set — so
   nothing in this file needs to be duplicated per language.
   ========================================================================== */
html[dir="rtl"] .site-header__inner { flex-direction: row-reverse; }
html[dir="rtl"] .site-header__tools { flex-direction: row-reverse; }
html[dir="rtl"] .hero-stats__item { flex-direction: row-reverse; }
html[dir="rtl"] .hero-stats__body { text-align: right; }
html[dir="rtl"] .site-footer__inner { flex-direction: row-reverse; }
html[dir="rtl"] .site-footer__brand { flex-direction: row-reverse; }
html[dir="rtl"] #unit-specs .spec-table { direction: ltr; }
html[dir="rtl"] #unit-specs .spec-table th, html[dir="rtl"] #unit-specs .spec-table td { text-align: left; }
html[dir="rtl"] .spec-table th, html[dir="rtl"] .spec-table td { text-align: right; }
html[dir="rtl"] .about-fact { text-align: right; }
/* Latin product name inside an RTL page: isolate it as its own LTR run so
   the trailing ™ resolves after the name ("GeoRender™"), not before it —
   then force the run back onto the same right edge as the unit heading
   above it, since an LTR run's default text-align would otherwise be left. */
html[dir="rtl"] .integration-sys__name { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* ==========================================================================
   RESPONSIVE — tiered for small laptops, tablets and phones.
   Base styles above target full desktop (>1180px). Each tier below only
   overrides what actually breaks or feels cramped at that width; layout,
   spacing and type scale down progressively rather than jumping straight
   from desktop to a single "mobile" collapse.
   ========================================================================== */

/* ---------------------------- small laptops / tablet landscape (≤1180px) ---------------------------- */
@media (max-width: 1180px) {
  .hero__inner { gap: 48px; max-width: 1100px; }
  .section { padding: 70px 0; }
  .hero-stats__label { font-size: 16px; }
  .integration-card { gap: 22px; padding: 38px 30px; }
  .integration-unit { padding: var(--space-4) var(--space-4) 12px; }
  .integration-unit h3 { font-size: 19px; margin-bottom: 10px; }
  .integration-sys__name { font-size: 16px; }
  .integration-sys::after { top: 18px; }
  .integration-sys:last-child::before { height: 18px; }
  .phone-frame { width: 250px; }
  .modes-grid { gap: 18px; }
}

/* ---------------------------- tablets portrait / mobile landscape (≤900px) ---------------------------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero { padding: 130px 0 0; }
  .hero__copy { text-align: center; }
  /* nav becomes position:fixed (out of flow) on mobile, so it no longer fills
     the middle of the flex row and pushes .tools/.burger to the far edge like
     it does on desktop — recreate that with the same auto-margin technique
     the desktop nav itself uses (see .site-header__nav's margin-left: auto). */
  .site-header__tools { margin-left: auto; }
  /* sized up for easier tapping on mobile */
  .lang-switch__select { padding: 8px 30px 8px 14px; font-size: 15px; font-weight: 600; }
  html[dir="rtl"] .lang-switch__select { padding: 8px 14px 8px 30px; }
  .site-header__burger { display: flex; }
  /* .site-header has backdrop-filter, which makes it (not the viewport) the
     containing block for any position:fixed descendant — so top/bottom here
     would be measured against the ~64px-tall header bar, not the screen.
     height:100vh sidesteps that (vh is always viewport-relative) and top:0
     still lines up since the header's own top edge sits at the real y:0. */
  .site-header__nav {
    position: fixed; top: 0; inset-inline: 0; height: 100vh; z-index: 59;
    flex-direction: column; align-items: stretch; gap: 6px; margin: 0;
    overflow-y: auto;
    background: rgba(5, 7, 10, 0.98);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    padding: 82px 20px 32px;
    transform: translateY(-16px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .35s var(--reveal-ease), opacity .3s ease, visibility 0s linear .35s;
  }
  .site-header__nav.is-open {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .35s var(--reveal-ease), opacity .3s ease, visibility 0s;
  }
  .site-header__nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 18px; font-size: 16px; font-weight: 600; color: #d7dee6;
    text-align: right; border: 1px solid transparent; border-radius: 12px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .site-header__nav a::after {
    content: ''; width: 7px; height: 7px; flex-shrink: 0;
    border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(135deg); opacity: .6;
  }
  .site-header__nav a:hover, .site-header__nav a:active {
    background: rgba(245, 185, 66, 0.08); border-color: rgba(245, 185, 66, 0.3); color: var(--lp-gold-soft);
  }
  .site-header__nav a.is-active { background: rgba(245, 185, 66, 0.1); border-color: rgba(245, 185, 66, 0.4); color: var(--lp-gold-soft); }
  .site-header__nav.is-open a { opacity: 1; transform: translateY(0); }
  .site-header__nav.is-open a:nth-child(1) { transition-delay: .08s; }
  .site-header__nav.is-open a:nth-child(2) { transition-delay: .13s; }
  .site-header__nav.is-open a:nth-child(3) { transition-delay: .18s; }
  .site-header__nav.is-open a:nth-child(4) { transition-delay: .23s; }
  .site-header__nav.is-open a:nth-child(5) { transition-delay: .28s; }
  /* mobile: the 3 stats used to be loosely stacked with mismatched alignment
     (icon+text left, countdown centered, icon+text left again) — give each
     one the same centered card treatment used elsewhere on the page. */
  .hero-stats__inner { flex-direction: column; gap: 16px; padding: 22px 18px; }
  .hero-stats__divider { display: none; }
  .hero-stats__item {
    width: 100%; flex: none; flex-direction: column; align-items: center; text-align: center;
    gap: 12px; padding: 24px 18px;
    border: 1px solid rgba(245, 185, 66, 0.22); border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
  }
  .hero-stats__item svg { width: 38px; height: 38px; }
  .hero-stats__body, .hero-stats__body--center { align-items: center; text-align: center; }
  .hero-stats__label { font-size: 16px; white-space: normal; }
  .hero-stats__value { font-size: 18px; }
  .hero-stats__item--units .hero-stats__value { text-align: center; }
  .hero-stats__item--units .progress-bar { width: 100%; max-width: 260px; height: 8px; margin-inline: auto; }
  /* countdown is the section's focal point on mobile — let the digits scale
     with the viewport instead of shrinking on smaller phones like before. */
  .countdown--plain { width: 100%; justify-content: space-between; }
  .countdown--plain .countdown__cell { padding: 0 4px; flex: 0 1 auto; min-width: 0; }
  .countdown--plain .countdown__cell span { font-size: clamp(26px, 8.5vw, 42px); white-space: nowrap; }
  .countdown--plain .countdown__cell small { font-size: 12px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  /* mobile card: title, subtitle, image, spec only — description and the
     "read more" link drop out since the whole card is already one big link */
  /* the 48px gap above is sized for the desktop side-by-side (image | text)
     layout — stacked on mobile, that same gap lands between all 4 items
     (title, subtitle, image, spec), reading as huge dead space. Each item
     already carries its own margin for stacked spacing, so zero it out. */
  .system-card { flex-direction: column; gap: 0; }
  .system-card__text { display: contents; }
  .system-card__text h3 { order: 1; margin-top: 4px; }
  .system-card__subtitle { order: 2; }
  .system-card__img { order: 3; flex: none; width: 92%; max-width: none; margin: 8px 0; }
  .system-card__spec { order: 4; margin: 4px 0 0; }
  .system-card__desc, .system-card .btn-outline-gold { display: none; }
  .unit-specs-grid { grid-template-columns: 1fr; gap: 28px; }
  .video-frame video { width: 77%; }
  .modes-grid { grid-template-columns: repeat(2, 1fr); }
  .explorer-section__inner { min-height: 420px; }
  /* the device photo fills the full stage width by default, which reads as
     oversized once the stage itself is as wide as the phone screen — shrink
     and center it instead of letting it edge-to-edge fill the section */
  .simulator-section .hotspot-stage { width: 78%; }
  /* #explorer::after's 220px fade height is tuned for desktop's much taller
     stage image — on mobile the image itself is much shorter (width:100%,
     height:auto) so the same fixed height eats most of the photo, reading
     as a heavy black band instead of a subtle fade. */
  #explorer::after { height: 100px; }
  .sim-cta__btn { width: 36px; height: 36px; }
  .sim-cta__btn svg { width: 15px; height: 15px; }
  .about-grid { gap: 26px; }
  .about-grid__logo { max-width: 180px; }
  .about-facts { grid-template-columns: 1fr; }

  .site-footer__inner,
  html[dir="rtl"] .site-footer__inner { flex-direction: column; text-align: center; padding: 32px 20px; }
  .site-footer__links { flex-wrap: wrap; justify-content: center; }
  .site-footer__brand,
  html[dir="rtl"] .site-footer__brand { flex-direction: column; gap: 14px; }
  .site-footer__logo { height: 95px; width: auto; display: block; }
  /* on mobile the Arabic footer should match the English one exactly (same
     stacking, same icon/text order), not the desktop RTL-mirrored layout —
     html[dir="rtl"] .site-footer__inner above (0,2,1 specificity) otherwise
     beats the plain .site-footer__inner rule regardless of source order */
  html[dir="rtl"] .site-footer { direction: ltr; }

  /* tech integration: 2-column grid + fixed-width phone rig doesn't fit — stack it,
     and swap the clickable unit/system list for a horizontal system slider (the
     unit grouping doesn't matter here, just the system names, like the real app). */
  .integration-card { grid-template-columns: 1fr; padding: 32px 0 32px 0; gap: 26px; }
  .integration-systems { display: none; }
  .integration-phone { order: 1; justify-content: center; }
  .integration-slider { display: block; order: 2; width: 100%; min-width: 0; }
  .integration-tagline { order: 3; font-size: 18px; margin-top: 22px; padding-top: 22px; padding-inline: 24px; }

  .integration-slider__title {
    text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: var(--lp-gold-soft); margin: 0 0 20px; padding-inline: 24px;
  }
  .integration-slider__track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 10px 42vw; -ms-overflow-style: none; scrollbar-width: none;
  }
  .integration-slider__track::-webkit-scrollbar { display: none; }
  .integration-slider__item {
    scroll-snap-align: center; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 84px; opacity: 0.4; transform: scale(0.82);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .integration-slider__icon {
    width: 64px; height: 64px; border-radius: 20px; background: #12161d;
    border: 1px solid rgba(245, 185, 66, 0.18); display: flex; align-items: center; justify-content: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .integration-slider__icon img { width: 60%; height: 60%; object-fit: contain; }
  .integration-slider__name { font-size: 12px; font-weight: 600; color: #a9a29b; white-space: nowrap; }
  .integration-slider__item.is-active { opacity: 1; transform: scale(1); }
  .integration-slider__item.is-active .integration-slider__icon {
    border-color: var(--lp-gold);
    box-shadow: 0 0 0 4px rgba(245, 185, 66, 0.12), 0 0 24px -4px rgba(245, 185, 66, 0.5);
  }
  .integration-slider__item.is-active .integration-slider__name { color: var(--lp-gold-soft); }

  /* simulator overlay title/lead are pinned at fixed pixel offsets, but the device
     image below them scales down with viewport width — on narrow screens the image
     (and its percentage-positioned hotspot labels) rides up underneath the text and
     collides with it. Take them out of the overlay and stack them in normal flow. */
  .simulator-section .section__title,
  .simulator-section .section__lead {
    position: static;
  }
  .simulator-section .section__lead { margin-bottom: 20px; }
}

/* ---------------------------- large phones (≤640px) ---------------------------- */
@media (max-width: 640px) {
  .section__inner, .hero__inner, .hero-stats__inner, .site-header__inner, .site-footer__inner {
    padding-left: 18px; padding-right: 18px;
  }
  .section { padding: 56px 0; }
  .hero { padding-top: 110px; }
  .price-card { padding: 16px; }
  /* mobile: only the discounted price gets a bordered box; the original
     price sits above it as a plain, dimmed note (not a shared split row) */
  .price-card__row {
    flex-direction: column-reverse; border: none; border-radius: 0; overflow: visible;
    gap: 14px; margin-bottom: 16px;
  }
  .price-card__col { padding: 0; align-items: center; text-align: center; }
  .price-card__col:not(.price-card__col--highlight) .price-panel__value { font-size: 18px; }
  .price-card__col--highlight {
    border: 1px solid rgba(245, 185, 66, 0.35); border-radius: 12px; padding: 18px 20px;
  }
  .price-card__col--highlight .price-panel__value { font-size: 30px; }
  .why-card { padding: 20px 12px; }
  .integration-slider__track { padding: 10px 30vw; }
  .integration-slider__item { width: 72px; }
  .integration-slider__icon { width: 56px; height: 56px; }
  .coupon-box { flex-direction: column; max-width: 340px; }
  .coupon-box__main {
    border-radius: 14px 14px;
    border-inline-start: 1.5px dashed rgba(245, 185, 66, 0.5);
    /* border-bottom: none; */
    padding: 18px;
    margin-top: 18px;
  }
  .coupon-box__off { width: 100%; flex-direction: row; gap: 8px; border-radius: 0 0 14px 14px; padding: 10px; }
  .benefits-row { gap: 14px; }
  .benefit { width: 100px; }
  .sim-cta__label { white-space: normal; max-width: 34vw; }
  .sim-cta__label strong { font-size: 12px; }
  /* overrides the inline --x/--y on .sim-cta[data-device="smartsense"] —
     needs !important since inline style otherwise always wins */
  .sim-cta[data-device="smartsense"] { --x: 6% !important; --y: 27% !important; }
  .sim-cta[data-device="vectorsense"] { --x: 102% !important; --y: 37% !important; }
  /* overrides the inline --x/--y on the MAXSCAN 750 explorer hotspots —
     needs !important since inline style otherwise always wins */
  .hotspot:nth-of-type(1) { --x: 39% !important; --y: 67% !important; }
  .hotspot:nth-of-type(3) { --x: 68% !important; --y: 44% !important; }
  .hotspot:nth-of-type(5) { --x: 87% !important; --y: 3% !important; }
  /* hotspots 2 and 5 sit near the right edge on mobile — the tooltip is
     normally centered on the button, which pushes it off-screen here.
     Anchor its right edge to the button instead so it only grows leftward. */
  .hotspot:nth-of-type(2)::after,
  .hotspot:nth-of-type(5)::after {
    right: 0; transform: translateY(6px);
  }
  .hotspot:nth-of-type(2):hover::after, .hotspot:nth-of-type(2):focus::after, .hotspot:nth-of-type(2).is-active::after,
  .hotspot:nth-of-type(5):hover::after, .hotspot:nth-of-type(5):focus::after, .hotspot:nth-of-type(5).is-active::after {
    transform: translateY(0);
  }
}

/* ---------------------------- phones (≤480px) ---------------------------- */
@media (max-width: 480px) {
  .site-header__inner { gap: 14px; padding: 12px 16px; }
  .site-header__tools { gap: 6px; }
  .site-header__tools .btn--sm { padding: 8px 14px; font-size: 12px; }
  .site-header__logo { height: 28px; }
  .hero__desc { font-size: 14px; }
  .why-grid { gap: 12px; }
  .why-card p { font-size: 13px; }
  .benefits-row { gap: 53px; }
  .benefit { width: 84px; }
  .benefit__icon { width: 46px; height: 46px; }
  .benefit__label { font-size: 12px; }
  .mode-card { padding: 16px; }
  .mode-card h3 { font-size: 16px; }
  .mode-card__subtitle { font-size: 12.5px; margin-bottom: 10px; }
  .mode-card__desc { font-size: 12.5px; margin-bottom: 16px; }
  .mode-card__img { padding: 14px; }
  .hotspot::after { width: min(200px, 68vw); font-size: 11.5px; padding: 10px 12px; }
  .explorer-section__inner { min-height: 340px; }
  .sim-cta__btn { width: 30px; height: 30px; }
  .sim-cta__btn svg { width: 13px; height: 13px; }
}

/* ---------------------------- small phones (≤380px) ---------------------------- */
@media (max-width: 380px) {
  .section__inner, .hero__inner, .hero-stats__inner, .site-header__inner, .site-footer__inner {
    padding-left: 14px; padding-right: 14px;
  }
  .site-header__inner { gap: 10px; }
  .hero__title-logo { height: 30px; }
  .countdown--plain .countdown__cell { padding: 0 2px; }
  .coupon-box { max-width: 100%; }
  .coupon-box__code { font-size: 20px; }
  .benefit { width: 74px; }
  .phone-frame { width: 168px; }
}

/* ---------------------------- reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; filter: none; }
  .section::before { transition: none; transform: translateX(-50%) scaleX(1); opacity: 1; }
  .hero__visual, .hero__copy > * { transition: none; animation: none; opacity: 1; transform: none; }
  .hero__composite { animation: none; }
  .hero__starfield, .hero__starfield::before, .hero__starfield::after { animation: none; }
  .section__bg { animation: none; }
  .hotspot-stage__img { transition: none; clip-path: inset(0 0 0 0); }
  .hotspot-stage__scanbar { display: none; }
  .hotspot { transition: none; animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .coupon-box.is-inview { animation: none; }
}