:root {
  --cs-navy-deep:    #071426;
  --cs-navy-mid:     #0D2045;
  --cs-navy-surface: #132952;
  --cs-navy-card:    #0f2b5b;
  --cs-blue:         #0A6AE2;
  --cs-blue-dark:    #3D94F5;
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  width: 100vw;
  height: 100dvh;
  background: var(--cs-navy-deep);
  font-family: var(--font);
  font-optical-sizing: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ── VIDEO BG ── */
.video-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  /* Own compositor layer — smooth fade-in, no main-thread repaints */
  will-change: opacity;
  transform: translateZ(0);
}
.video-overlay {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  background: rgba(7,20,38,0.52);
  z-index: 0;
}

/* ── CANVAS & GLOWS ── */
#techCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.glow {
  position: fixed; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}
.glow-1 {
  width: 60vw; height: 60vw;
  background: rgba(10,106,226,0.13);
  top: -15vw; right: -10vw;
  animation: drift1 14s ease-in-out infinite;
}
.glow-2 {
  width: 45vw; height: 45vw;
  background: rgba(13,32,69,0.70);
  bottom: -10vw; left: -10vw;
  animation: drift2 17s ease-in-out infinite;
}
.glow-3 {
  width: 30vw; height: 30vw;
  background: rgba(10,106,226,0.08);
  bottom: 20vw; right: 5vw;
  animation: drift1 20s ease-in-out infinite reverse;
}

/* ── KEYFRAMES ── */
@keyframes drift1 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(4vw,-3vw); }
  70%     { transform: translate(-3vw,2vw); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(-3vw,3vw); }
  70%     { transform: translate(3vw,-2vw); }
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.8); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ringPulse {
  0%,100% { opacity: 0.45; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.018); }
}
@keyframes scan {
  0%   { top: 10%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* ══════════════════════════════════════════════
   PAGE — single column, full height, no scroll
   All proportions driven by CSS custom properties
   so kiosk breakpoint only overrides the vars.
══════════════════════════════════════════════ */

/* Default (mobile-first) slot heights */
:root {
  --header-py:    clamp(6px, 1.5vh, 14px);
  --section-gap:  clamp(5px, 1vh, 10px);
  --carousel-h:   clamp(76px, 14vh, 130px);  /* ~half of QR card */
  --qr-size:      clamp(110px, 19vh, 170px);
  --card-px:      clamp(12px, 3vw, 22px);
  --card-py:      clamp(10px, 1.8vh, 18px);
  --footer-py:    clamp(4px, 0.8vh, 8px);
}

.page {
  position: relative; z-index: 1;
  width: 100%; height: 100dvh;
  max-width: 540px;
  padding: 0 clamp(10px, 2.5vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
}

/* ══════════════
   1. TOP BRAND
══════════════ */
.brand-header {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--header-py);
  padding-bottom: var(--header-py);
  flex-shrink: 0;
  animation: fadeUp 0.45s ease both;
}

/* Logo row */
.logos-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 40px);
  margin-bottom: clamp(5px, 0.8vh, 10px);
}

/* Each logo sits in a frosted pill so it's always visible */
.logo-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1vh, 12px) clamp(12px, 2.5vw, 22px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: clamp(10px, 1.5vh, 16px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.brand-logo {
  height: clamp(36px, 6vh, 60px);
  width: auto;
  display: block;
  object-fit: contain;
}

/* Main CS logo */
.brand-logo:not(.custom):not(.partner-logo) {
}

/* Partner logo */
.partner-logo {
  height: clamp(28px, 4.5vh, 48px);
  width: auto;
  object-fit: contain;
}

.brand-tagline {
  font-size: clamp(10px, 1.35vh, 13px);
  font-weight: 400; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.40);
  text-align: center; line-height: 1.5;
  max-width: 320px;
}

.brand-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: clamp(5px, 0.8vh, 10px);
  padding: 4px 13px;
  border: 1px solid rgba(10,106,226,0.35);
  border-radius: 20px;
  background: rgba(10,106,226,0.08);
}
.brand-pill-dot {
  width: 5px; height: 5px;
  background: var(--cs-blue); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.brand-pill-text {
  font-size: clamp(9px, 1.05vh, 11px); font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--cs-blue-dark);
}

/* ═══════════════════════
   2. PRODUCT CAROUSEL
   Fixed height = var(--carousel-h)  ≈ half QR card
═══════════════════════ */
.carousel-section {
  width: 100%;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  animation: fadeUp 0.5s 0.06s ease both;
}

.carousel-label {
  font-size: clamp(9px, 1.1vh, 12px); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  text-align: center;
  margin-bottom: clamp(4px, 0.7vh, 8px);
}

.carousel-viewport {
  width: 100%;
  height: var(--carousel-h);
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.carousel-viewport:active { cursor: grabbing; }

.carousel-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  background: rgba(10,106,226,0.18);
  border: 1px solid rgba(10,106,226,0.30);
  border-radius: 50%;
  color: rgba(255,255,255,0.65);
  font-size: clamp(13px, 1.8vh, 20px);
  width: clamp(26px, 3.8vh, 36px);
  height: clamp(26px, 3.8vh, 36px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.carousel-nav:hover { background: rgba(10,106,226,0.35); color: #fff; }
.carousel-nav-prev { left: 2px; }
.carousel-nav-next { right: 2px; }

.carousel-track {
  display: flex;
  height: 100%;
  touch-action: pan-y;
  will-change: transform;
  /* Contain layout so slides don't cause reflow outside */
  contain: layout style;
}

.product-slide {
  flex: 0 0 100%;
  height: 100%;
  /* Leave room for nav buttons */
  padding: 0 clamp(32px, 5vw, 44px);
  display: flex; align-items: stretch;
}

/* ── THE CARD: fixed height, flex row, no overflow ── */
.product-card {
  width: 100%;
  height: 100%;
  background: rgba(10,30,60,0.78);
  border: 1px solid rgba(61,148,245,0.22);
  border-radius: clamp(12px, 1.8vh, 18px);
  padding: 0 clamp(12px, 2.5vw, 20px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
  transform: scale(0.97); opacity: 0.6;
  will-change: transform, opacity;
  transition:
    transform 0.75s cubic-bezier(0.34, 1.36, 0.64, 1),
    opacity   0.75s ease,
    box-shadow 0.75s ease;
}
.product-card::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,148,245,0.45), transparent);
}
.product-card.active {
  transform: scale(1); opacity: 1;
  box-shadow:
    0 0 0 1px rgba(10,106,226,0.15),
    0 12px 40px rgba(7,20,38,0.60),
    inset 0 0 50px rgba(10,106,226,0.06);
}

/* Image / icon — square, fills the card height with padding */
.product-img,
.product-icon-wrap {
  flex-shrink: 0;
  /* Square: match the card's inner height */
  width: calc(var(--carousel-h) - clamp(16px, 3vh, 28px));
  height: calc(var(--carousel-h) - clamp(16px, 3vh, 28px));
  border-radius: clamp(8px, 1.2vh, 14px);
}

.product-img {
  object-fit: contain;
  background: rgba(10,106,226,0.06);
  border: 1px solid rgba(10,106,226,0.18);
  /* Hint browser to decode off main thread */
  content-visibility: auto;
  /* Prevent layout shift while loading */
  image-rendering: auto;
}

.product-icon-wrap {
  background: rgba(10,106,226,0.12);
  border: 1px solid rgba(10,106,226,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--carousel-h) * 0.28);
}

/* Text body — shrinks to remaining space, no overflow */
.product-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2px, 0.4vh, 5px);
  overflow: hidden;
}

.product-name {
  font-size: clamp(12px, 1.6vh, 17px); font-weight: 600;
  color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.product-desc {
  font-size: clamp(10px, 1.25vh, 13px);
  color: rgba(255,255,255,0.48); line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge — pinned top-right inside card */
.product-badge {
  position: absolute;
  top: clamp(6px, 1vh, 10px);
  right: clamp(8px, 1.5vw, 14px);
  font-size: clamp(7px, 0.9vh, 10px); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cs-blue-dark);
  background: rgba(10,106,226,0.14);
  border: 1px solid rgba(10,106,226,0.25);
  border-radius: 20px; padding: 2px 8px;
  white-space: nowrap;
}

/* Dots */
.carousel-dots {
  display: flex; justify-content: center;
  gap: 5px; margin-top: clamp(4px, 0.7vh, 7px);
}
.dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  transition: all 0.55s ease;
}
.dot.active { width: 18px; border-radius: 3px; background: var(--cs-blue); }

/* ═══════════════════════
   3. QR CARD
   Takes remaining flex space
═══════════════════════ */
.qr-card-container {
  width: 100%;
  flex: 1 1 auto; min-height: 0;
  background: rgba(10,30,60,0.85);
  border: 1px solid rgba(61,148,245,0.35);
  border-radius: clamp(16px, 2.5vh, 24px);
  padding: var(--card-py) var(--card-px);
  box-shadow:
    0 0 0 1px rgba(10,106,226,0.1),
    0 25px 80px rgba(7,20,38,0.75),
    0 12px 28px rgba(0,0,0,0.4),
    inset 0 0 60px rgba(10,106,226,0.08);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly;
  animation: fadeUp 0.55s 0.12s ease both;
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px);
}
.qr-card-container::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,148,245,0.70), transparent);
}
.qr-card-container::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 100px; height: 100px;
  background: radial-gradient(circle at bottom right, rgba(10,106,226,0.10), transparent 70%);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--cs-blue); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.eyebrow-text {
  font-size: clamp(9px, 1.1vh, 11px); font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.36);
}

.headline {
  font-size: clamp(15px, 2.4vh, 22px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.18;
  color: #fff; text-align: center;
}

.tagline-track {
  min-height: clamp(20px, 2.8vh, 30px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr-tagline {
  font-size: clamp(10px, 1.25vh, 12px); font-weight: 400;
  color: rgba(255,255,255,0.44);
  text-align: center; line-height: 1.5;
  transition: opacity 0.35s ease, transform 0.35s ease;
  max-width: 280px;
}

/* QR shell & rings */
.qr-shell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(10,106,226,0.17);
  animation: ringPulse 3.2s ease-in-out infinite;
}
.ring-1 { width: calc(100% + 22px); height: calc(100% + 22px); animation-delay: 0s; }
.ring-2 { width: calc(100% + 44px); height: calc(100% + 44px); animation-delay: 0.75s; }
.ring-3 { width: calc(100% + 66px); height: calc(100% + 66px); animation-delay: 1.5s; }

.qr-card {
  width:  var(--qr-size);
  height: var(--qr-size);
  background: #fff; border-radius: 12px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(7,20,38,0.50);
}
.qr-img { width: 90%; height: 90%; object-fit: contain; display: block; border-radius: 4px; }

.qr-placeholder {
  width: 72%; height: 72%;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding: 4px;
}
.qc { background: #071426; border-radius: 1px; }
.qc.off { background: transparent; }

.scan-bar {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(10,106,226,0.8), transparent);
  animation: scan 2.8s ease-in-out infinite; top: 0;
}
.corner {
  position: absolute; width: 16px; height: 16px;
  border-color: var(--cs-blue); border-style: solid; border-width: 0;
}
.c-tl { top:6px; left:6px;   border-top-width:2.5px; border-left-width:2.5px;   border-radius:2px 0 0 0; }
.c-tr { top:6px; right:6px;  border-top-width:2.5px; border-right-width:2.5px;  border-radius:0 2px 0 0; }
.c-bl { bottom:6px; left:6px;  border-bottom-width:2.5px; border-left-width:2.5px;  border-radius:0 0 0 2px; }
.c-br { bottom:6px; right:6px; border-bottom-width:2.5px; border-right-width:2.5px; border-radius:0 0 2px 0; }

/* CTA / Steps / URL */
.cta-wrap { text-align: center; }
.cta-main {
  font-size: clamp(11px, 1.45vh, 14px); font-weight: 600;
  color: rgba(255,255,255,0.88); margin-bottom: 2px;
}
.cta-sub { font-size: clamp(9px, 1.05vh, 11px); color: rgba(255,255,255,0.33); }

.steps {
  display: flex; align-items: center;
  gap: clamp(6px, 1.4vw, 12px);
}
.step { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.step-icon { width: clamp(22px, 2.8vh, 32px); height: clamp(22px, 2.8vh, 32px); line-height: 1; }
.step-icon svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.75); }
.step-label { font-size: clamp(7px, 0.85vh, 9px); color: rgba(255,255,255,0.36); text-align: center; line-height: 1.35; }
.step-arrow { font-size: clamp(10px, 1.3vh, 13px); color: rgba(10,106,226,0.50); flex-shrink: 0; }

.url-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
}
.url-dot { width: 5px; height: 5px; background: #22c55e; border-radius: 50%; animation: pulse 2.5s ease-in-out infinite; }
.url-text {
  font-size: clamp(9px, 1.1vh, 11px);
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: rgba(255,255,255,0.42); letter-spacing: 0.02em;
}

/* ══════════
   4. FOOTER
══════════ */
.footer {
  width: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--footer-py) 0;
  padding-bottom: max(var(--footer-py), env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.05);
  animation: fadeUp 0.6s 0.2s ease both;
}
.footer-left  { font-size: clamp(8px, 0.95vh, 10px); color: rgba(255,255,255,0.20); }
.footer-center { display: flex; align-items: center; gap: 5px; }
.footer-dot   { width: 4px; height: 4px; background: rgba(10,106,226,0.50); border-radius: 50%; animation: pulse 3s ease-in-out infinite; }
.footer-text  { font-size: clamp(8px, 0.95vh, 10px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.26); }
.footer-right { font-size: clamp(8px, 0.95vh, 10px); color: rgba(255,255,255,0.17); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* Tablet portrait (600–899px) */
@media (min-width: 600px) {
  .page { max-width: 600px; }
}

/* Small desktop / landscape tablet */
@media (min-width: 900px) {
  .page { max-width: 700px; }
  body  { justify-content: center; }
}

/* ═══════════════════════════════════════════════════
   LARGE PORTRAIT KIOSK  (1080 × 1920 and similar)
   All sizing driven through CSS vars so layout
   proportions stay identical — only scale changes.
═══════════════════════════════════════════════════ */
@media (min-width: 1000px) and (min-height: 1200px) {

  :root {
    --header-py:    clamp(24px, 3.2vh, 50px);
    --section-gap:  clamp(12px, 1.6vh, 22px);
    --carousel-h:   clamp(180px, 22vh, 280px);
    --qr-size:      clamp(280px, 34vh, 420px);
    --card-px:      clamp(40px, 5vw, 80px);
    --card-py:      clamp(22px, 2.8vh, 42px);
    --footer-py:    clamp(12px, 1.4vh, 22px);
  }

  body { justify-content: flex-start; }

  .page {
    max-width: none;
    width: 100%;
    padding: 0 clamp(40px, 6vw, 100px);
    height: 100dvh;
  }

  /* Logos */
  .logo-pill {
    padding: clamp(12px, 1.6vh, 22px) clamp(24px, 3.5vw, 44px);
    border-radius: clamp(14px, 2vh, 22px);
  }
  .brand-logo         { height: clamp(50px, 7vh, 90px); }
  .partner-logo       { height: clamp(40px, 5.5vh, 70px); }
  .logos-wrap         { gap: clamp(40px, 7vw, 90px); margin-bottom: clamp(10px, 1.4vh, 18px); }
  .brand-tagline      { font-size: clamp(14px, 1.7vh, 22px); max-width: 700px; }
  .brand-pill         { padding: 8px 22px; margin-top: 14px; }
  .brand-pill-dot     { width: 8px; height: 8px; }
  .brand-pill-text    { font-size: clamp(11px, 1.3vh, 15px); }

  /* Carousel */
  .carousel-label     { font-size: clamp(11px, 1.3vh, 16px); margin-bottom: clamp(8px, 1.2vh, 14px); }
  .carousel-nav {
    width:  clamp(44px, 6vh, 64px);
    height: clamp(44px, 6vh, 64px);
    font-size: clamp(20px, 2.8vh, 32px);
  }
  .product-slide      { padding: 0 clamp(52px, 7vw, 80px); }

  .product-name       { font-size: clamp(22px, 2.8vh, 36px); }
  .product-desc       { font-size: clamp(14px, 1.7vh, 22px); }
  .product-badge      {
    font-size: clamp(10px, 1.2vh, 14px);
    padding: 5px 14px;
    top: clamp(10px, 1.5vh, 18px);
    right: clamp(12px, 2vw, 22px);
  }
  .dot                { width: 8px; height: 8px; }
  .dot.active         { width: 28px; }
  .carousel-dots      { gap: 8px; margin-top: 14px; }

  /* QR card */
  .qr-card-container  { border-radius: clamp(24px, 3vh, 36px); }
  .eyebrow-dot        { width: 10px; height: 10px; }
  .eyebrow-text       { font-size: clamp(12px, 1.4vh, 17px); }
  .headline           { font-size: clamp(32px, 4.8vh, 64px); line-height: 1.1; }
  .qr-tagline         { font-size: clamp(14px, 1.7vh, 22px); max-width: 560px; }

  /* Rings scale with QR size */
  .ring-1 { width: calc(100% + 48px);  height: calc(100% + 48px); }
  .ring-2 { width: calc(100% + 96px);  height: calc(100% + 96px); }
  .ring-3 { width: calc(100% + 144px); height: calc(100% + 144px); }

  .qr-card            { border-radius: clamp(18px, 2.2vh, 28px); }

  .cta-main           { font-size: clamp(18px, 2.2vh, 28px); margin-bottom: 6px; }
  .cta-sub            { font-size: clamp(12px, 1.4vh, 18px); }

  .steps              { gap: clamp(16px, 3vw, 38px); }
  .step-icon          { width: clamp(36px, 5vh, 52px); height: clamp(36px, 5vh, 52px); }
  .step-label         { font-size: clamp(12px, 1.3vh, 16px); }
  .step-arrow         { font-size: clamp(20px, 2.4vh, 28px); }

  .url-chip           { padding: 9px 22px; }
  .url-dot            { width: 7px; height: 7px; }
  .url-text           { font-size: clamp(12px, 1.4vh, 17px); }

  /* Footer */
  .footer-left,
  .footer-text,
   .footer-right       { font-size: clamp(11px, 1.2vh, 15px); }
   .footer-dot         { width: 6px; height: 6px; }
 }

 /* ═══════════════════════════════════════════════════
    FULLSCREEN TOGGLE BUTTON
    Fixed position at bottom right
 ═══════════════════════════════════════════════════ */
 .fullscreen-btn {
   position: fixed;
   bottom: clamp(12px, 1.5vh, 24px);
   right: clamp(12px, 1.5vh, 24px);
   z-index: 1000;
   width: clamp(32px, 4vh, 48px);
   height: clamp(32px, 4vh, 48px);
   padding: 0;
   background: rgba(10, 106, 226, 0.18);
   border: 1px solid rgba(10, 106, 226, 0.30);
   border-radius: 50%;
   color: rgba(255, 255, 255, 0.65);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
   backdrop-filter: blur(8px);
 }

 .fullscreen-btn:hover {
   background: rgba(10, 106, 226, 0.35);
   color: #fff;
   transform: scale(1.05);
 }

 .fullscreen-btn:active {
   transform: scale(0.95);
 }

 .fullscreen-icon {
   width: clamp(16px, 2.2vh, 24px);
   height: clamp(16px, 2.2vh, 24px);
   pointer-events: none;
 }

 .fullscreen-icon-enter {
   display: block;
 }

 .fullscreen-icon-exit {
   display: none;
 }

 .fullscreen-btn.is-fullscreen .fullscreen-icon-enter {
   display: none;
 }

 .fullscreen-btn.is-fullscreen .fullscreen-icon-exit {
   display: block;
 }

/* Short landscape — collapse non-essentials */
@media (max-height: 580px) {
  .rings, .steps, .tagline-track { display: none; }
}