/* ════════════════════════════════════════════════════════════
   FREECER® — Cinematic Product Journey · style.css  (v3)
   Persistent 3D layer · stacked-sheet transitions · 50/50 dark-light
   ────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
     0  · Tokens                     (CSS custom properties: colors, fonts, radii, easing, z-index)
     1  · Reset / base               (global reset, body defaults, headings, chips, buttons, sheet transitions)
     2  · Persistent GL layer        (fixed canvas wrapper the 3D FREECER renders into)
     3  · Loader                     (cinematic intro loading screen)
     4  · Navigation                 (fixed top nav, language switch, mobile burger + menu)
     5  · HERO                       (hero background layers, copy, HUD temperature readout, scroll hint)
     6  · Marquee                    (scrolling claims ticker band)
     7  · FILM — portrait reel       (pinned video reel with editorial side columns)
     8  · PROBLEM → SOLUTION wipe    (dark-to-light ice-wipe scroll transition)
     9  · BENEFITS — orbital ring    (3D card ring orbiting the product, light arena)
     10 · TECHNOLOGY                 (orbit rings, product stage, spec callouts)
     11 · TARGET GROUPS              (sticky stacking card list)
     12 · FAQ                        (accordion list + animated snowflake icon)
     13 · CTA                        (closing call-to-action panel)
     14 · Footer                     (site footer grid + bottom bar)
          14a · Generic page fallback (plain WordPress Pages not built with Elementor)
     15 · Responsive                 (breakpoints: 1180 / 1024 / 860 / 560 / short viewports)
     16 · Reduced motion             (prefers-reduced-motion overrides)
════════════════════════════════════════════════════════════ */

/* ── 0 · Tokens ─────────────────────────────────────────── */
:root{
  --deep:      #030508;
  --navy:      #07111A;
  --charcoal:  #0C141C;
  --ice:       #008BC4;
  --ice-hi:    #00AAEE;
  --ice-glow:  #35C4FF;
  --frost:     #F3FAFC;
  --silver:    #B8C7D1;
  --muted:     #7F8B96;
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);

  --l-text:  #0B1620;
  --l-muted: #4E5E6B;
  --l-line:  rgba(7,17,26,.10);

  --serif: "Tenor Sans", Georgia, serif;
  --sans:  "Tenor Sans", "Segoe UI", system-ui, sans-serif;

  --r-xl: 34px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-pill: 100px;
  --sheet-r: clamp(28px, 4vw, 52px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .35s var(--ease);

  /* stacking plan: bg layers (auto) < .gl 5 < content 10 < menu 90 < nav 100 < loader 200 */
  --z-gl: 5;
  --z-content: 10;
  --z-menu: 90;
  --z-nav: 100;
  --z-loader: 200;

  --gutter: clamp(20px, 4vw, 56px);

  /* Vertical space the fixed header occupies: its 16px offset from the top of
     the viewport plus the pill's own height. Content that must sit below the
     header (builder-authored Pages) clears it by this much. */
  --nav-offset: 82px;
}

/* ── 1 · Reset / base ───────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:var(--sans);
  background:var(--deep);
  color:var(--silver);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,canvas{ max-width:100%; display:block; }

/* these tag-level resets are scoped away from Elementor-built content
   (.elementor / .elementor-widget-container) so widgets keep their own styling.
   :where() is used (not :not()) so this exclusion adds zero specificity —
   these rules must stay as weak as a plain tag selector so any single-class
   override elsewhere in this file (e.g. .film-giant, .pwipe-problem h2) still wins. */
a:where(:not(.elementor-widget-container a)){ color:inherit; text-decoration:none; }
button:where(:not(.elementor-widget-container button)){ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul:where(:not(.elementor-widget-container ul)){ list-style:none; }

::selection{ background:rgba(0,170,238,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--ice-hi); outline-offset:3px; border-radius:4px; }

h1:where(:not(.elementor-widget-container h1)),
h2:where(:not(.elementor-widget-container h2)),
h3:where(:not(.elementor-widget-container h3)){
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--frost);
}
h2:where(:not(.elementor-widget-container h2)){ font-size:clamp(2.2rem, 4.4vw, 3.9rem); }
h3:where(:not(.elementor-widget-container h3)){ font-size:clamp(1.6rem, 2.8vw, 2.3rem); }

.container{
  width:100%;
  max-width:1360px;
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.ice{ color:var(--ice-hi); }

/* 1a · film grain (cinematic texture, masks upscaled media) */
.grain{ position:relative; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px;
  opacity:.07;
  mix-blend-mode:overlay;
}

/* 1b · chips (pill-shaped labels used above section headings) */
.chip{
  display:inline-block;
  padding:9px 20px;
  border-radius:var(--r-pill);
  border:1px solid rgba(0,170,238,.35);
  background:rgba(0,139,196,.10);
  color:var(--ice-hi);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.chip-dark{ border-color:rgba(0,139,196,.4); background:rgba(0,139,196,.09); color:var(--ice); }
.chip-glass{
  border-color:var(--line);
  background:rgba(255,255,255,.07);
  color:var(--frost);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.chip-warm{ border-color:rgba(200,155,108,.4); background:rgba(200,155,108,.08); color:#C89B6C; }

/* 1c · buttons (primary / glass / white / outline variants) */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 34px;
  border-radius:var(--r-pill);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:transform var(--t-fast), box-shadow var(--t-fast),
             background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  will-change:transform;
}
.btn-sm{ padding:11px 24px; font-size:.82rem; }
.btn-lg{ padding:19px 44px; font-size:1rem; }
.btn-primary{
  background:linear-gradient(135deg, var(--ice) 0%, var(--ice-hi) 100%);
  color:#fff;
  box-shadow:0 8px 32px rgba(0,150,215,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ box-shadow:0 12px 44px rgba(0,170,238,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-glass{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--frost);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.btn-glass:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.btn-white{ background:var(--frost); color:var(--l-text); box-shadow:0 10px 40px rgba(220,245,255,.18); }
.btn-white:hover{ box-shadow:0 16px 56px rgba(220,245,255,.3); }
.btn-outline-dark{
  border:1px solid rgba(7,17,26,.25);
  color:var(--l-text);
  background:rgba(255,255,255,.4);
}
.btn-outline-dark:hover{ border-color:var(--ice); color:var(--ice); }

/* 1d · shine sweep (animated highlight overlay for buttons/cards) */
.shine{ overflow:hidden; }
.shine::before{
  content:"";
  position:absolute; top:0; left:0;
  width:60%; height:100%;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-180%) skewX(-18deg);
  animation:shineSweep 4.5s var(--ease) infinite 1.5s;
  pointer-events:none;
}
@keyframes shineSweep{
  0%,65%{ transform:translateX(-180%) skewX(-18deg); }
  100%{ transform:translateX(320%) skewX(-18deg); }
}

/* 1e · stacked-sheet section transitions (site-wide motif: rounded panel "sheets" that overlap on scroll) */
.sheet-light, .sheet-light2, .sheet-dark{
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  margin-top:calc(var(--sheet-r) * -1);
}
.sheet-light{
  background:
    radial-gradient(1200px 600px at 80% -5%, rgba(0,170,238,.10), transparent 60%),
    radial-gradient(900px 500px at 5% 60%, rgba(0,139,196,.06), transparent 60%),
    #EFF7FB;
  color:var(--l-muted);
}
.sheet-light2{
  background:
    radial-gradient(1100px 500px at 85% -5%, rgba(0,170,238,.10), transparent 60%),
    var(--frost);
  color:var(--l-muted);
}
/* A third light tone, deeper than the other two. The gallery sits between two
   light sections (Target Groups, FAQ), so it needs to read as its own panel
   rather than continuing them — this is the darkest of the three, which also
   gives the imagery more contrast to sit against. */
.sheet-light3{
  background:
    radial-gradient(1000px 520px at 12% -8%, rgba(0,170,238,.12), transparent 62%),
    radial-gradient(900px 600px at 92% 30%, rgba(0,110,170,.08), transparent 60%),
    #E3EEF5;
  color:var(--l-muted);
}
.sheet-light h2, .sheet-light h3,
.sheet-light2 h2, .sheet-light2 h3,
.sheet-light3 h2, .sheet-light3 h3{ color:var(--l-text); }
.sheet-dark{
  background:var(--deep);
}

/* ── 2 · Persistent GL layer ────────────────────────────── */
.gl{
  position:fixed;
  inset:0;
  z-index:var(--z-gl);
  pointer-events:none;
}
.gl canvas{ width:100% !important; height:100% !important; }
html.no-motion .gl, html:not(.js) .gl{ display:none; }

/* ── 3 · Loader ─────────────────────────────────────────── */
.loader{ display:none; }
html.js .loader{
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed; inset:0;
  z-index:var(--z-loader);
  background:radial-gradient(900px 600px at 50% 60%, #071019, var(--deep) 70%);
  transition:opacity .9s var(--ease-out), visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ text-align:center; }
.loader-word{
  font-weight:800;
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing:.42em;
  padding-left:.42em;
  color:var(--frost);
  display:block;
  animation:loaderIn 1.1s var(--ease-out) both;
}
.loader-word sup{ font-size:.4em; letter-spacing:0; color:var(--ice-hi); }
.loader-line{
  display:block;
  position:relative;
  height:1px;
  margin:20px auto 16px;
  width:220px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.loader-line i{
  position:absolute; inset:0;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--ice), var(--ice-glow));
  box-shadow:0 0 16px rgba(0,170,238,.8);
}
.loader-tag{
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  animation:loaderIn 1.1s var(--ease-out) both .3s;
}
.loader-temp{
  position:absolute;
  right:clamp(24px, 5vw, 64px);
  bottom:clamp(22px, 5vh, 48px);
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6vw, 4rem);
  color:rgba(190,230,250,.18);
}

.preloader-logo{
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes loaderIn{ from{ opacity:0; transform:translateY(14px); filter:blur(6px);} to{ opacity:1; transform:none; filter:blur(0);} }

/* ── 4 · Navigation ─────────────────────────────────────── */
.site-nav{
  position:fixed;
  top:16px; left:0;
  z-index:var(--z-nav);
  display:flex;
  justify-content:center;
  width:100vw;
  width:100lvw; /* stable viewport width — doesn't pulse as the mobile browser's address bar shows/hides (unlike left:0;right:0, whose containing block resizes with it) */
  padding-inline:var(--gutter);
  box-sizing:border-box;
}
.nav-shell{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.5vw, 36px);
  width:min(1280px, 100%);
  padding:10px 12px 10px 26px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-soft);
  background:rgba(5,10,16,.55);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 12px 48px rgba(0,0,0,.45);
  transition:background var(--t-fast), border-color var(--t-fast);
}
.site-nav.scrolled .nav-shell{ background:rgba(4,8,13,.85); border-color:var(--line); }
.nav-brand{ font-weight:800; letter-spacing:.3em; font-size:1rem; color:var(--frost); flex-shrink:0; }
.nav-brand sup{ font-size:.5em; letter-spacing:0; color:var(--ice-hi); }
.custom-logo-link{ display:flex; align-items:center; flex-shrink:0; }
.custom-logo-link .custom-logo{ max-height:40px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:clamp(4px, 1.2vw, 12px); margin-inline:auto; }
.nav-link{
  position:relative;
  padding:8px 12px;
  font-size:.84rem;
  font-weight:600;
  color:var(--silver);
  border-radius:var(--r-pill);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-link:hover{ color:var(--frost); background:rgba(255,255,255,.05); }
.nav-link.active{ color:var(--ice-hi); }
.nav-link.active::after{
  content:"";
  position:absolute;
  left:50%; bottom:2px;
  width:16px; height:2px;
  border-radius:2px;
  transform:translateX(-50%);
  background:var(--ice-hi);
  box-shadow:0 0 10px var(--ice-hi);
}
.nav-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
/* Language switcher — the theme's own two-option pill control. Each option is
   a real link to the TranslatePress URL for that language (see
   inc/translation.php), so it works without JavaScript. */
.lang-switch{
  display:inline-flex;
  padding:4px; gap:2px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05);
}
.lang-opt{
  padding:6px 13px;
  border-radius:var(--r-pill);
  font-size:.75rem; font-weight:700; letter-spacing:.08em;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.lang-opt:hover{ color:var(--frost); }
.lang-opt.active{
  color:#fff;
  background:linear-gradient(135deg, var(--ice), var(--ice-hi));
  box-shadow:0 4px 16px rgba(0,170,238,.4);
}

/* TranslatePress' own floating/shortcode switcher is hidden: the theme renders
   this control instead, and two switchers on one page would be confusing.
   Remove this rule if you'd rather use the plugin's widget. */
.trp-language-switcher-container,
#trp-floater-ls{ display:none !important; }
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px; height:44px;
  padding:10px;
  border-radius:50%;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05);
}
.nav-burger span{ display:block; height:2px; border-radius:2px; background:var(--frost); transition:transform .4s var(--ease); }
.nav-burger.open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  z-index:var(--z-menu);
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu-inner{ text-align:center; padding:40px; width:100%; max-width:420px; margin-block:auto; }
.mobile-links{ display:flex; flex-direction:column; gap:6px; margin-bottom:40px; }
.mobile-link{
  font-family:var(--serif);
  font-size:clamp(1.8rem, 7vw, 2.4rem);
  color:var(--frost);
  padding:8px;
  opacity:0; transform:translateY(22px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), color .3s;
}
.mobile-menu.open .mobile-link{ opacity:1; transform:none; }
.mobile-link:hover{ color:var(--ice-hi); }
.mobile-menu.open .mobile-link:nth-child(1){ transition-delay:.08s; }
.mobile-menu.open .mobile-link:nth-child(2){ transition-delay:.14s; }
.mobile-menu.open .mobile-link:nth-child(3){ transition-delay:.2s; }
.mobile-menu.open .mobile-link:nth-child(4){ transition-delay:.26s; }
.mobile-menu.open .mobile-link:nth-child(5){ transition-delay:.32s; }
.mobile-menu.open .mobile-link:nth-child(6){ transition-delay:.38s; }
.mobile-menu-foot{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--ease-out) .45s, transform .55s var(--ease-out) .45s;
}
.mobile-menu.open .mobile-menu-foot{ opacity:1; transform:none; }
/* switcher inside the menu is phone-only — tablet keeps the one in the top nav bar */
.mobile-menu-lang{ display:none; }

/* ── 5 · HERO ───────────────────────────────────────────── */
.hero{ position:relative; }
.hero-bglayer{
  position:sticky;
  top:0;
  height:100svh;
  margin-bottom:-100svh; /* the stage overlays it; sticky = free "pin" without a stacking context */
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 700px at 66% 40%, rgba(0,90,140,.22), transparent 62%),
    radial-gradient(900px 700px at 15% 90%, rgba(0,60,100,.12), transparent 60%),
    linear-gradient(175deg, #04070c 0%, #060d15 55%, #030508 100%);
}
.hero-gridlines{
  position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 45%, #000 25%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 60% 45%, #000 25%, transparent 75%);
}
.hero-glow{
  position:absolute;
  width:min(58vw, 860px); aspect-ratio:1;
  right:4%; top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,170,238,.16), rgba(0,120,180,.05) 45%, transparent 70%);
  filter:blur(30px);
  opacity:.45;
}

/* invisible anchors the 3D product flies between */
.anchor{ position:absolute; width:2px; height:2px; }
#haStart{ right:23%; top:52%; }
#haEnd{ left:50%; top:50%; }

.hero-fallback{ display:none; }
.hero.no3d .hero-fallback{
  display:block;
  position:absolute;
  right:8%; top:52%;
  transform:translateY(-50%);
  width:min(30vw, 360px);
}
.hero.no3d .hero-fallback img{ filter:drop-shadow(0 50px 70px rgba(0,0,0,.65)) drop-shadow(0 0 70px rgba(0,160,230,.2)); }
.hero-fallback-fog{
  position:absolute;
  bottom:-16%; left:-20%;
  width:140%; height:56%;
  background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(200,235,250,.16), transparent 70%);
  filter:blur(26px);
}

.hero-stage{
  position:relative;
  z-index:var(--z-content);
  height:100svh;
}
.hero-copy{
  position:absolute;
  left:var(--gutter);
  top:0;
  bottom:0;
  margin-block:auto;
  height:fit-content;
  max-width:min(800px, 50vw);
  padding-top:40px;
}
/* .hero-el items are visible by default; the JS intro (gsap.fromTo) only
   plays a fade/rise-in on top of this baseline — if the intro script never
   runs (or a scroll refresh interrupts it) on some real devices, the copy
   still shows instead of staying stuck at the tween's initial opacity:0 */
.hero-el{ opacity:1; visibility:visible; }
.hero-title{ font-size:clamp(2.5rem, 5vw, 4.4rem); margin-top:24px; }
.hero-title .accent{
  font-style:italic;
  color:var(--ice-hi);
  text-shadow:0 0 44px rgba(0,170,238,.45);
}
.hero-claim{
  margin-top:18px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem, 1.7vw, 1.25rem);
  color:var(--silver);
  letter-spacing:.04em;
}
.hero-text{
  margin-top:16px;
  max-width:825px;
  font-size:clamp(.95rem, 1.2vw, 1.05rem);
}
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }

/* 5a · HUD overlay (temperature readout + floating stat chips over the hero product) */
.hud{ position:absolute; inset:0; pointer-events:none; }
.hud-temp{
  position:absolute;
  top:clamp(96px, 14vh, 140px);
  right:var(--gutter);
  text-align:right;
  opacity:0;
  transform:translateY(-14px);
}
.hud-temp-val{
  display:block;
  font-family:var(--serif);
  /* font-size:clamp(2.6rem, 5.4vw, 4.6rem); */
  font-size:clamp(3rem, 5.4vw, 4rem);
  line-height:1;
  color:var(--frost);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(0,170,238,.35);
}
.hud-temp-label{
  display:block;
  margin-top:8px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}
.hud-temp-track{
  display:block;
  margin-top:12px;
  margin-left:auto;
  width:150px; height:2px;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden;
}
.hud-temp-track i{
  display:block;
  height:100%; width:100%;
  transform-origin:right;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--ice), var(--ice-glow));
  box-shadow:0 0 12px rgba(0,170,238,.8);
}
.hud-chip{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 22px;
  border-radius:var(--r-md);
  border:1px solid rgba(0,170,238,.3);
  background:rgba(6,14,21,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(26px) scale(.92);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hud-chip-val{ font-family:var(--serif); font-size:2.5rem; line-height:1; color:var(--frost); }
.hud-chip-label{
  font-size:.64rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.hud-chip.c1{ left:13%; top:27%; }
.hud-chip.c2{ right:7%; bottom:42%; }
.hud-chip.c3{ left:15%; bottom:20%; }
.hud-chip.on{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }

.hero-scrollhint{
  position:absolute;
  left:50%; bottom:clamp(20px, 4vh, 38px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--muted);
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-scrollhint i{
  width:44px; height:1px;
  background:linear-gradient(90deg, var(--ice-hi), transparent);
  animation:hintPulse 2.2s var(--ease) infinite;
}
@keyframes hintPulse{
  0%{ transform:scaleX(0); transform-origin:left; }
  45%{ transform:scaleX(1); transform-origin:left; }
  55%{ transform:scaleX(1); transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}

/* mobile-only horizontal-scroll guard: clips any stray overflow from page
   content without touching html/body (which are Lenis's/ScrollTrigger's
   own scroll container — clipping overflow there previously broke the
   pinned scroll animations). #main is just a content wrapper inside that
   scroll container, so containment here is safe. */
@media (max-width: 767px){
  #main{ overflow-x:hidden; }
}

/* ── 5b · HERO — mobile-only simple version (no 3D) ────────
   #hero-mobile-only is hidden everywhere by default; swapped in for #hero
   (which is hidden instead) only at phone widths. Kept fully separate from
   the desktop hero's markup/CSS so nothing here can affect desktop/tablet. */
#hero-mobile-only{ display:none; }
@media (max-width: 767px){
  .hero{ display:none; }
  #hero-mobile-only{
    display:block;
    overflow-x:hidden;
    background:
      radial-gradient(1100px 700px at 66% 40%, rgba(0,90,140,.22), transparent 62%),
      radial-gradient(900px 700px at 15% 90%, rgba(0,60,100,.12), transparent 60%),
      linear-gradient(175deg, #04070c 0%, #060d15 55%, #030508 100%);
  }
  .hero-mobile-ony-elements{
    padding:132px var(--gutter) 56px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hmo-visual{
    position:relative;
    width:min(40vw, 170px);
  }
  .hmo-product{
    width:100%;
    filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(0,160,230,.18));
    height:auto;
  }
  .hmo-stat{
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:2px;
    width:min(28vw, 110px);
    padding:7px 10px;
    border-radius:var(--r-md);
    border:1px solid rgba(0,170,238,.3);
    background:rgba(6,14,21,.68);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 14px 40px rgba(0,0,0,.45);
  }
  .hmo-stat-val{ font-family:var(--serif); font-size:1.1rem; line-height:1; color:var(--frost); }
  .hmo-stat-label{
    font-size:.52rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted);
    line-height:1.3;
  }
  /* only ~10% of each chip's own width should rest on the image — anchor
     at the image edge (left:0 / right:0) then push it outward by 90% of
     its own width via transform (relative to the chip's size) */
  .hmo-stat-1{ left:0; top:8%; transform:translateX(-90%); }
  .hmo-stat-2{ right:0; bottom:10%; transform:translateX(90%); }
  .hmo-title{
    margin-top:28px;
    font-size:clamp(1.8rem, 8vw, 2.4rem);
  }
  .hmo-title .accent{
    font-style:italic;
    color:var(--ice-hi);
    text-shadow:0 0 44px rgba(0,170,238,.45);
  }
  .hmo-claim{
    margin-top:12px;
    font-family:var(--serif);
    font-style:italic;
    font-size:1.02rem;
    color:var(--silver);
    letter-spacing:.04em;
  }
  .hmo-text{
    margin-top:12px;
    font-size:.92rem;
    color:var(--muted);
  }
  .hmo-actions{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    width:100%;
    max-width:320px;
  }

  /* entrance fade-up, staggered per element — animated via GSAP
     (see script.js, mirrors the desktop hero's .hero-el intro). This
     opacity:0 is just the pre-animation resting state; if GSAP fails to
     load, .hmo-el--no-gsap (added by JS) reveals it plainly. */
  .hmo-el{ opacity:0; }
  .hmo-el.hmo-el--no-gsap{ opacity:1; }
}

/* ── 6 · Marquee ────────────────────────────────────────── */
.marquee{
  position:relative;
  z-index:var(--z-content);
  padding:20px 0;
  overflow:hidden;
  background:linear-gradient(90deg, #050c13, #07131d 50%, #050c13);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--deep), transparent); }
.marquee::after{ right:0; background:linear-gradient(-90deg, var(--deep), transparent); }
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.mq-group{ display:flex; align-items:center; flex-shrink:0; padding-right:64px; gap:64px; }
.mq-item{
  font-size:.8rem; font-weight:800; letter-spacing:.24em; white-space:nowrap;
  color:var(--frost);
  text-shadow:0 0 24px rgba(0,170,238,.5);
}
.mq-sep{ color:var(--ice-hi); font-size:.7rem; opacity:.7; }
html:not(.js) .marquee-track{ animation:mqScroll 30s linear infinite; }
@keyframes mqScroll{ to{ transform:translateX(-50%); } }

/* ── 7 · FILM — portrait reel ───────────────────────────── */
.film{ position:relative; background:var(--deep); }
.film-pin{
  position:relative;
  z-index:var(--z-content);
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.film-giant{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(94vw, 1500px);
  text-align:center;
  /* font-size:clamp(3rem, 8.5vw, 8rem); */
  line-height:1.02;
  color:rgba(190,228,245,.14);
  pointer-events:none;
  white-space:normal;
  font-size: 65px !important;
}
.film-frame{
  position:relative;
  height:min(75svh, 780px);
  aspect-ratio:9/16;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 60px 140px rgba(0,0,0,.7), 0 0 80px rgba(0,140,200,.18);
  border:1px solid rgba(255,255,255,.1);
  transform:scale(.72);
  will-change:transform;
}
html:not(.js) .film-frame, html.no-motion .film-frame{ transform:none; }
.film-frame video{ width:100%; height:100%; object-fit:cover; }
.film-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,5,8,.2) 0%, transparent 30%, transparent 68%, rgba(3,5,8,.65) 100%);
}
.film-caption{
  position:absolute;
  left:0; right:0;
  bottom:clamp(22px, 5vh, 46px);
  text-align:center;
  padding-inline:var(--gutter);
}

/* editorial columns flanking the portrait reel */
.film-side{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:clamp(220px, 20vw, 300px);
  display:flex;
  flex-direction:column;
  gap:26px;
  z-index:2;
}
.film-side.left{
  left:clamp(28px, 7vw, 120px);
  align-items:flex-start;
  text-align:left;
}
.film-side.right{
  right:clamp(28px, 7vw, 120px);
  align-items:flex-end;
  text-align:right;
}
.fs-vert{
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--muted);
  writing-mode:vertical-rl;
  height:150px;
}
.fs-vert sup{ font-size:.6em; color:var(--ice-hi); }
.fs-vert.flip{ transform:rotate(180deg); }
.fs-stat .fs-val{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.6rem, 3.6vw, 3.6rem);
  line-height:1;
  color:var(--frost);
  text-shadow:0 0 36px rgba(0,170,238,.35);
}
.fs-stat .fs-val i{ font-style:normal; font-size:.5em; color:var(--ice-hi); }
.fs-stat .fs-label{
  display:block;
  margin-top:8px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.fs-line{
  width:64px; height:1px;
  background:linear-gradient(90deg, var(--ice-hi), transparent);
}
.film-side.right .fs-line{ background:linear-gradient(-90deg, var(--ice-hi), transparent); }
.fs-text{
  font-size:.92rem;
  color:var(--silver);
  max-width:24ch;
}
.fs-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem, 1.6vw, 1.45rem);
  line-height:1.4;
  color:var(--frost);
  max-width:22ch;
}
@media (max-width: 1180px){
  .film-side{ display:none; }
}

/* ── 8 · PROBLEM → SOLUTION wipe (dark → LIGHT) ─────────── */
.pwipe{ position:relative; background:var(--deep); }
.pwipe-pin{
  position:relative;
  z-index:var(--z-content);
  height:100svh;
  overflow:hidden;
}
.pwipe-panel{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
}
.pwipe-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
  padding-top:5vh;
}
.pwipe-inner{ position:relative; }
.pwipe-inner h2{ margin-top:22px; font-size:clamp(2rem, 3.6vw, 3.2rem); }
.pwipe-inner > p{ margin-top:18px; max-width:54ch; font-size:clamp(.96rem, 1.2vw, 1.06rem); }

.pwipe-problem{
  background:
    radial-gradient(900px 500px at 80% 110%, rgba(200,155,108,.10), transparent 60%),
    linear-gradient(150deg, #10131a 0%, #0a0d12 55%, #0d0f0d 100%);
}
.pwipe-problem h2{ color:#D8DDE2; }
.pwipe-problem .pwipe-inner > p{ color:var(--muted); }

/* the solution side is LIGHT — the wipe reveals brightness */
.pwipe-solution{
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(0,170,238,.16), transparent 60%),
    linear-gradient(150deg, #EAF5FB 0%, #F4FAFD 100%);
  clip-path:inset(0 0 0 100%);
  color:var(--l-muted);
}
.pwipe-solution h2{ color:var(--l-text); }
html:not(.js) .pwipe-solution, html.no-motion .pwipe-solution{ clip-path:none; position:relative; }
html:not(.js) .pwipe-problem, html.no-motion .pwipe-problem{ position:relative; }
html:not(.js) .pwipe-pin, html.no-motion .pwipe-pin{ height:auto; }
html:not(.js) .pwipe-panel, html.no-motion .pwipe-panel{ padding:12vh 0; }

.pwipe-visual{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/4.6;
  max-height:62svh;
  justify-self:end;
  width:100%;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
}
.pwipe-visual img{ width:100%; height:100%; object-fit:cover; }
.pwipe-visual.warm img{ filter:saturate(1.05) sepia(.12) contrast(1.02); }
.pwipe-visual.cold{ box-shadow:0 40px 100px rgba(0,90,150,.25), 0 0 60px rgba(0,170,238,.2); border-color:rgba(0,170,238,.3); }
.pwipe-visual figcaption{
  position:absolute;
  left:18px; bottom:18px;
  display:flex;
  align-items:center;
  gap:12px;
}
.pv-temp{
  padding:10px 18px;
  border-radius:var(--r-pill);
  font-family:var(--serif);
  font-size:1.15rem;
  color:#fff;
  background:rgba(20,14,8,.55);
  border:1px solid rgba(200,155,108,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  min-width: 110px !important;
}
.pv-temp.cold{
  background:rgba(4,16,26,.55);
  border-color:rgba(0,190,255,.55);
  text-shadow:0 0 18px rgba(0,190,255,.8);
}
.pv-cap{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}

.pwipe-quote{
  margin-top:28px;
  padding:20px 26px;
  border-left:2px solid var(--ice);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(0,139,196,.08);
  max-width:520px;
}
.pwipe-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--l-text);
}
.pwipe-num{
  position:absolute;
  top:-58px; left:2px;
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.2em;
  color:rgba(127,139,150,.55);
}
.pwipe-edge{
  position:absolute;
  top:0; bottom:0;
  left:100%;
  width:2px;
  z-index:5;
  background:linear-gradient(180deg, transparent, var(--ice-glow) 30%, var(--ice-glow) 70%, transparent);
  box-shadow:0 0 34px rgba(0,190,255,.9), 0 0 90px rgba(0,170,238,.5);
  pointer-events:none;
}
html:not(.js) .pwipe-edge, html.no-motion .pwipe-edge{ display:none; }
.pwipe-header{
  position:absolute;
  top:clamp(88px, 12vh, 124px);
  left:0; right:0;
  text-align:center;
  z-index:4;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.pwipe-header h2{
  font-size:clamp(1.5rem, 2.4vw, 2.2rem);
  color:rgba(243,250,252,.85);
}

/* ── 9 · BENEFITS — orbital ring (LIGHT arena) ──────────── */
.bene{ position:relative; }
.bene-bglayer{
  position:sticky;
  top:0;
  height:100svh;
  margin-bottom:-100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.bene-arena{
  position:relative;
  width:min(52svh, 520px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-top:2svh;
}
.arena-disc{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%, #12202c 0%, #081019 62%, #060c13 100%);
  box-shadow:0 60px 120px rgba(7,20,32,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.arena-ringline{
  position:absolute; inset:-7%;
  border-radius:50%;
  border:1px dashed rgba(0,139,196,.35);
  animation:spin 70s linear infinite;
}
.arena-glow{
  position:absolute; inset:12%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,170,238,.25), transparent 65%);
  filter:blur(22px);
  animation:glowBreathe 6s ease-in-out infinite alternate;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes glowBreathe{
  from{ opacity:.6; transform:scale(.96); }
  to{ opacity:1; transform:scale(1.05); }
}

.bene-pin{
  position:relative;
  z-index:var(--z-content);
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(90px, 12vh, 120px) 0 clamp(24px, 4vh, 40px);
  overflow:hidden;
}
.bene-head{ 
  text-align:center; 
  flex-shrink:0;
  margin-top: 25px;
}
.bene-head h2{ margin-top:16px; font-size:clamp(2rem, 3.6vw, 3.2rem); }
.bene-head p{ margin-top:10px; }

.bene-stage{
  position:relative;
  flex:1;
  perspective:1500px;
}
.bene-ring{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}
.ring-card{
  position:absolute;
  left:50%; top:57%;
  width:min(320px, 26vw);
  margin-left:calc(min(320px, 26vw) / -2);
  margin-top:-140px;
  padding:26px 28px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(7,17,26,.08);
  box-shadow:0 24px 60px rgba(7,30,45,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  will-change:transform, opacity;
}
.ring-num{
  position:absolute;
  top:16px; right:22px;
  font-family:var(--serif);
  font-size:1.8rem;
  color:rgba(7,17,26,.12);
  line-height:1;
}
.ring-icon{
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:14px;
  color:var(--ice);
  background:rgba(0,139,196,.1);
  border:1px solid rgba(0,139,196,.24);
}
.ring-icon svg{ width:24px; height:24px; }
.ring-card h3{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.05rem;
  color:var(--l-text);
  margin-top:18px;
}
.ring-card p{ margin-top:8px; font-size:.88rem; color:var(--l-muted); line-height:1.6; }

.bene-progress{
  width:min(420px, 70vw);
  height:2px;
  margin-inline:auto;
  border-radius:2px;
  background:rgba(7,17,26,.12);
  overflow:hidden;
}
.bene-progress i{
  display:block;
  height:100%; width:100%;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--ice), var(--ice-glow));
  box-shadow:0 0 12px rgba(0,170,238,.6);
}
html:not(.js) .bene-pin, html.no-motion .bene-pin{ height:auto; gap:40px; }

/* ── 10 · TECHNOLOGY ────────────────────────────────────── */
.torbit{ position:relative; } /* no overflow:hidden — it would break the sticky bg layer */
.torbit-bglayer{
  position:sticky;
  top:0;
  height:100svh;
  margin-bottom:-100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.torbit-stage{
  position:relative;
  width:min(58svh, 560px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-top:4svh;
}
.torbit-ring{ position:absolute; inset:-6%; width:112%; height:112%; }
.tr-dash{
  stroke:rgba(0,170,238,.16);
  stroke-width:1;
  stroke-dasharray:4 10;
  transform-origin:center;
  animation:spin 80s linear infinite;
}
.tr-draw{
  stroke:rgba(0,190,255,.5);
  stroke-width:1.4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(0,190,255,.6));
}
.tr-flow{
  stroke:rgba(0,190,255,.3);
  stroke-width:1.1;
  stroke-dasharray:6 220;
  stroke-linecap:round;
  animation:flowDash 7s linear infinite;
}
.tr-flow.f2{ animation-delay:3.5s; }
@keyframes flowDash{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-452; } }
.torbit-glow{
  position:absolute;
  width:70%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,170,238,.2), transparent 65%);
  filter:blur(28px);
  animation:glowBreathe 6s ease-in-out infinite alternate;
}
.torbit-product{
  position:relative;
  z-index:2;
  width:52%;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(0,160,230,.18));
}
html.gl3d .torbit-product{ visibility:hidden; } /* the live 3D product lands here instead */
.torbit-smoke{
  position:absolute;
  z-index:1;
  bottom:0;
  width:130%; height:44%;
  background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(200,235,250,.13), transparent 70%);
  filter:blur(24px);
  animation:fogDrift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes fogDrift{
  from{ transform:translateX(-4%) translateY(0); }
  to{ transform:translateX(5%) translateY(-3%); }
}

.torbit-pin{
  position:relative;
  z-index:var(--z-content);
  min-height:100svh;
  padding:clamp(96px, 13vh, 140px) var(--gutter) clamp(48px, 8vh, 80px);
}
.torbit-head{ position:relative; z-index:3; max-width:380px; }
.torbit-head h2{ margin-top:18px; font-size:clamp(1.9rem, 3vw, 2.8rem); }
.torbit-head p{ margin-top:14px; font-size:.92rem; color:var(--muted); max-width:44ch; }

.orbit-specs{ position:absolute; inset:0; pointer-events:none; }
.orbit-spec{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 24px;
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  background:rgba(6,13,20,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  pointer-events:auto;
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.os-key{
  font-size:.64rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.os-val{ font-weight:700; font-size:1.02rem; color:var(--frost); white-space:nowrap; }
.os1{ right:calc(46% + min(34vh, 340px)); top:20%; }
.os2{ left:calc(48% + min(30vh, 300px)); top:20%; }
.os3{ right:calc(48% + min(37vh, 370px)); top:54%; }
.os4{ left:calc(50% + min(33vh, 330px)); top:52%; }
.os5{ right:calc(44% + min(33vh, 330px)); top:80%; }
.os6{ left:calc(46% + min(29vh, 290px)); top:80%; }
html.js.motion-ok .orbit-spec{ opacity:.2; }
html.js.motion-ok .orbit-spec.lit{
  opacity:1;
  transform:translateY(-4px) scale(1.04);
  border-color:rgba(0,190,255,.55);
  box-shadow:0 18px 50px rgba(0,120,190,.35), 0 0 0 1px rgba(0,190,255,.15);
}

/* at these widths the circular spec cards don't leave enough room beside the
   text column — move the heading/paragraph above the circle instead of beside it */
@media (min-width:1025px) and (max-width:1400px){
  .torbit-pin{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:clamp(70px, 10vh, 110px);
  }
  .torbit-head{ max-width:560px; }
  .torbit-head p{ margin-inline:auto; }
}

/* ── 11 · TARGET GROUPS — luxury card stack ─────────────── */
.zg{
  position:relative;
  padding-bottom:clamp(70px, 10vh, 130px);
}
.zg-head{
  position:relative;
  z-index:var(--z-content);
  text-align:center;
  padding:clamp(90px, 13vh, 150px) var(--gutter) clamp(40px, 6vh, 70px);
}
.zg-head h2{ margin-top:16px; }

.zg-stack{
  position:relative;
  z-index:var(--z-content);
  display:flex;
  flex-direction:column;
  gap:5vh;
}
.stack-card{
  position:sticky;
  top:clamp(90px, 12vh, 120px);
  display:grid;
  grid-template-columns:1fr 1.05fr;
  min-height:min(66svh, 620px);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(7,17,26,.08);
  box-shadow:0 40px 110px rgba(7,30,45,.18);
  transform-origin:center top;
  will-change:transform, filter;
}
.stack-copy{
  padding:clamp(30px, 4vw, 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stack-index{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 4vw, 3.6rem);
  line-height:1;
  color:rgba(0,139,196,.2);
}
.stack-copy h3{ margin-top:14px; color:var(--l-text); }
.stack-copy p{ margin-top:14px; max-width:46ch; color:var(--l-muted); font-size:.97rem; }
.stack-actions{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.stack-visual{
  position:relative;
  overflow:hidden;
  min-height:320px;
}
.stack-visual::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,.9) 0%, transparent 22%);
  pointer-events:none;
}
.stack-visual img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.6s var(--ease-out);
}
.stack-card:hover .stack-visual img{ transform:scale(1.12); }

/* ── 11a · GALLERY — masonry grid + lightbox ─────────────── */
.gal{
  position:relative;
  padding:clamp(90px, 12vh, 140px) 0 clamp(80px, 11vh, 130px);
}
.gal-head{
  text-align:center;
  max-width:760px;
  margin-inline:auto;
  margin-bottom:clamp(38px, 5vh, 62px);
}
.gal-head h2{ margin:18px 0 12px; }
.gal-head p{ color:var(--l-muted); }

/* Flex columns, packed by script.
   CSS column-count was the obvious choice here but it balances columns by
   height rather than filling gaps: it runs items straight down column 1, then
   column 2, and so on, which leaves a hole mid-grid whenever one column's
   images are shorter. The JS in section 8a instead places each tile into
   whichever column is currently shortest, which is what actually produces an
   even masonry edge. Tiles still keep their natural height, so nothing is
   cropped.

   Before the script runs (and with scripting off) this is a plain flex row of
   equal columns holding the tiles in source order — a sensible layout on its
   own, so there is no flash of a broken grid. */
.gal-grid{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px, 1.4vw, 20px);
}
.gal-col{
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 20px);
  flex:1 1 0;
  min-width:0;   /* lets columns actually shrink rather than overflow */
}
.gal-tile{ display:block; margin:0; }

.gal-open{
  display:block;
  width:100%;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  text-align:left;
}
.gal-open:focus-visible{ outline:2px solid var(--ice-hi); outline-offset:4px; border-radius:var(--r-lg); }

/* On a light sheet the tile reads as a card: white ground, hairline border and
   a soft cool shadow. The product renders are shot on white, so a white frame
   lets them sit on the page without a visible edge, while the photography gets
   a clean mount. */
.gal-frame{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--l-line);
  background:#fff;
  box-shadow:0 14px 34px rgba(11,22,32,.10);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform .5s var(--ease);
}
.gal-open:hover .gal-frame{
  border-color:rgba(0,139,196,.35);
  box-shadow:0 26px 60px rgba(0,110,170,.20);
  transform:translateY(-4px);
}
.gal-frame img{
  display:block;
  width:100%;
  height:auto;              /* natural ratio — the whole point of masonry */
  transition:transform .7s var(--ease);
}
/* The site-wide grain is tuned for dark panels; at full strength it dirties
   the product renders, which are shot on clean white. Halved here rather than
   removed, so the tiles still share the page's texture. */
.gal-frame.grain::after{ opacity:.035; }
.gal-open:hover .gal-frame img{ transform:scale(1.05); }

/* Darkens the lower half so the caption stays readable over any image. */
.gal-veil{
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background:linear-gradient(to top, rgba(3,6,10,.86), transparent);
  opacity:0;
  transition:opacity var(--t-fast);
  pointer-events:none;
}
.gal-open:hover .gal-veil,
.gal-open:focus-visible .gal-veil{ opacity:1; }

.gal-caption{
  position:absolute;
  left:18px; right:52px; bottom:16px;
  font-size:.86rem;
  line-height:1.35;
  color:var(--frost);
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--t-fast), transform var(--t-fast);
  pointer-events:none;
}
.gal-open:hover .gal-caption,
.gal-open:focus-visible .gal-caption{ opacity:1; transform:none; }

/* Sits over the image rather than the page, so it stays a solid mark — brand
   blue here rather than the dark glass used on dark sheets. */
.gal-zoom{
  position:absolute;
  right:14px; bottom:14px;
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(135deg, var(--ice), var(--ice-hi));
  box-shadow:0 6px 18px rgba(0,120,190,.4);
  color:#fff;
  opacity:0;
  transform:translateY(6px) scale(.9);
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.gal-zoom svg{ width:16px; height:16px; }
.gal-open:hover .gal-zoom,
.gal-open:focus-visible .gal-zoom{ opacity:1; transform:none; }

/* Reveal-on-scroll, matched to the theme's other section entrances. */
html.js.motion-ok .gal-tile{ opacity:0; transform:translateY(26px); }
html.js.motion-ok .gal-tile.in{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

/* Column counts are applied by the script (it needs the number to distribute
   tiles), so the breakpoints below only cover the no-JS case, where .gal-grid
   is a plain flex row. The script reads the same thresholds. */
@media (max-width: 620px){
  .gal-caption{ opacity:1; transform:none; }   /* no hover on touch */
  .gal-veil{ opacity:1; }
}

/* Motion off: tiles are visible without waiting for the observer. */
html.no-motion .gal-tile, html:not(.js) .gal-tile{ opacity:1; transform:none; }

/* ── Lightbox ──────────────────────────────────────────── */
.gal-lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-loader);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 2vw, 28px);
  padding:clamp(16px, 4vw, 56px);
  background:rgba(2,5,9,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.gal-lightbox.open{ opacity:1; visibility:visible; }

.gal-lb-stage{
  margin:0;
  max-width:min(1200px, 100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
/* Native aspect ratio here — cropping belongs to the strip, not the viewer. */
.gal-lb-stage img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  height:auto;
  border-radius:var(--r-lg);
  box-shadow:0 40px 120px rgba(0,0,0,.65);
  opacity:0;
  transform:scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gal-lightbox.ready .gal-lb-stage img{ opacity:1; transform:none; }
.gal-lb-stage figcaption{
  font-size:.9rem;
  color:var(--silver);
  text-align:center;
}

.gal-lb-close,
.gal-lb-nav{
  flex-shrink:0;
  width:clamp(40px, 4vw, 52px);
  height:clamp(40px, 4vw, 52px);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--frost);
  cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.gal-lb-close:hover,
.gal-lb-nav:hover{ background:rgba(0,170,238,.18); border-color:rgba(0,170,238,.5); }
.gal-lb-close:active,
.gal-lb-nav:active{ transform:scale(.94); }
.gal-lb-close svg,
.gal-lb-nav svg{ width:20px; height:20px; }
.gal-lb-close{
  position:absolute;
  top:clamp(16px, 3vw, 34px);
  right:clamp(16px, 3vw, 34px);
}
.gal-lb-count{
  position:absolute;
  bottom:clamp(16px, 3vw, 34px);
  left:50%;
  transform:translateX(-50%);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--muted);
}

@media (max-width: 860px){
  .gal-lb-nav{ position:absolute; bottom:clamp(16px, 4vw, 30px); }
  .gal-lb-nav.prev{ left:22%; }
  .gal-lb-nav.next{ right:22%; }
  .gal-lb-count{ bottom:auto; top:clamp(16px, 4vw, 30px); }
}

/* Motion off: no JS-driven centring, so every tile reads at full strength. */
html.no-motion .gal-open, html:not(.js) .gal-open{ opacity:1; transform:none; }

/* ── 12 · FAQ ───────────────────────────────────────────── */
.faq{ position:relative; }
.faq-grid{
  position:relative;
  z-index:var(--z-content);
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:clamp(40px, 6vw, 100px);
  padding-top:clamp(100px, 14vh, 150px);
  padding-bottom:clamp(100px, 14vh, 150px);
  min-height:100svh;
  align-items:start;
}
.faq-left-inner{ position:sticky; top:130px; }
.faq-left h2{ margin-top:20px; font-size:clamp(2.2rem, 3.6vw, 3.2rem); }
.faq-left p{ margin:16px 0 26px; max-width:34ch; }
.faq-flake{
  width:110px;
  margin-top:48px;
  color:rgba(0,139,196,.35);
}
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  border-radius:var(--r-lg);
  border:1px solid var(--l-line);
  background:rgba(255,255,255,.85);
  overflow:hidden;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.faq-item.open{
  border-color:rgba(0,150,215,.45);
  box-shadow:0 18px 50px rgba(0,90,140,.12);
  background:
    linear-gradient(150deg, rgba(0,170,238,.05), transparent 40%),
    #fff;
}
.faq-q{
  width:100%;
  display:flex; align-items:center;
  gap:18px;
  text-align:left;
  padding:22px 26px;
}
.faq-num{
  font-family:var(--serif);
  font-size:1rem;
  color:rgba(0,139,196,.55);
  flex-shrink:0;
}
.faq-q-text{ font-weight:700; font-size:1rem; color:var(--l-text); flex:1; }
.faq-icon{
  flex-shrink:0;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(0,139,196,.3);
  color:var(--ice);
  transition:transform .5s var(--ease), background .4s, color .4s;
}
.faq-icon svg{ width:14px; height:14px; }
.faq-item.open .faq-icon{
  transform:rotate(135deg);
  background:linear-gradient(135deg, var(--ice), var(--ice-hi));
  border-color:transparent;
  color:#fff;
}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.faq-a-inner{ padding:0 26px 24px 70px; max-width:64ch; }

/* ── 13 · CTA ───────────────────────────────────────────── */
.cta{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cta-bg{ position:absolute; inset:0; }
.cta-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:.4;
  will-change:transform;
}
.cta-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 50% 60%, rgba(0,140,200,.14), transparent 65%),
    linear-gradient(180deg, var(--deep) 0%, rgba(3,5,8,.3) 30%, rgba(3,5,8,.5) 70%, var(--deep) 100%);
}
.cta-word{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(96vw, 1500px);
  pointer-events:none;
}
.cta-word text{
  font-family:var(--sans);
  font-size:210px;
  font-weight:800;
  letter-spacing:.06em;
  fill:transparent;
  stroke:rgba(0,170,238,.22);
  stroke-width:1.2;
}
.cta-fog{
  position:absolute;
  bottom:-10%; left:-15%;
  width:130%; height:55%;
  background:radial-gradient(ellipse 45% 55% at 40% 80%, rgba(195,230,248,.10), transparent 70%);
  filter:blur(34px);
  animation:fogDrift 24s ease-in-out infinite alternate;
  pointer-events:none;
}
.cta-inner{
  position:relative;
  z-index:var(--z-content);
  padding-top:clamp(110px, 14vh, 150px);
  padding-bottom:clamp(60px, 9vh, 110px);
}
.cta-panel{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:clamp(32px, 4vw, 72px);
  padding:clamp(34px, 4.5vw, 68px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(6,12,19,.55);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 50px 130px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.cta-left h2{
  margin-top:22px;
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  text-shadow:0 10px 60px rgba(0,0,0,.6);
}
.cta-sub{ margin:16px 0 0; max-width:44ch; color:var(--silver); font-size:1rem; }

/* circular demo button with rotating brand ring */
.cta-round{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(170px, 15vw, 210px);
  aspect-ratio:1;
  margin-top:clamp(30px, 4vh, 46px);
  border-radius:50%;
}
.cta-ring{
  position:absolute; inset:0;
  animation:spin 26s linear infinite;
}
.cta-round:hover .cta-ring{ animation-duration:9s; }
.cta-ring text{
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.34em;
  fill:var(--muted);
}
.cta-round-core{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:66%;
  aspect-ratio:1;
  border-radius:50%;
  text-align:center;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg, var(--ice), var(--ice-hi));
  box-shadow:0 14px 44px rgba(0,150,215,.45), inset 0 1px 0 rgba(255,255,255,.3);
  padding:12px;
  transition:box-shadow var(--t-fast), transform var(--t-fast);
}
.cta-round:hover .cta-round-core{
  box-shadow:0 18px 60px rgba(0,170,238,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transform:scale(1.04);
}
.cta-round-core svg{ width:20px; height:20px; }

/* contact rows */
.cta-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.cta-row{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 4px;
  border-bottom:1px solid var(--line-soft);
  transition:padding var(--t-fast);
}
.cta-row:first-child{ border-top:1px solid var(--line-soft); }
.cta-row-label{
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
.cta-row-val{
  font-weight:600;
  font-size:1.02rem;
  color:var(--frost);
  transition:color var(--t-fast);
}
.cta-row i{
  position:absolute;
  right:6px; top:50%;
  width:26px; height:1px;
  background:linear-gradient(90deg, transparent, var(--ice-hi));
  transform:scaleX(0) translateY(-50%);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.cta-row:not(.static):hover{ padding-left:14px; }
.cta-row:not(.static):hover .cta-row-val{ color:var(--ice-hi); }
.cta-row:not(.static):hover i{ transform:scaleX(1) translateY(-50%); }
.cta-row.static .cta-row-val{ font-size:.9rem; line-height:1.6; color:var(--silver); }

.cta-temp{
  margin-top:22px;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.cta-temp-val{
  font-family:var(--serif);
  font-size:2.2rem;
  color:rgba(190,230,250,.3);
}
.cta-temp-label{
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(127,139,150,.5);
}

/* 13a · CTA contact form (glass panel below the contact rows) */
.cta-form{
  position:relative;
  margin-top:clamp(24px, 4vw, 40px);
  padding:clamp(26px, 3.4vw, 44px);
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:rgba(9,17,25,.62);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.cta-form-title{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 2.4vw, 2.05rem);
  color:var(--frost);
  margin-bottom:8px;
}
.cta-form-intro{
  color:var(--muted);
  max-width:56ch;
  margin-bottom:clamp(18px, 2.4vw, 26px);
}
.cta-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.cta-field{ display:block; margin-bottom:16px; }
.cta-form-row .cta-field{ margin-bottom:0; }
.cta-field-label{
  display:block;
  margin-bottom:7px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--silver);
}
.cta-field-label em{ color:var(--ice-hi); font-style:normal; }
.cta-field input,
.cta-field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(3,5,8,.55);
  color:var(--frost);
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.5;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.cta-field textarea{ resize:vertical; min-height:120px; }
.cta-field input::placeholder,
.cta-field textarea::placeholder{ color:rgba(127,139,150,.55); }
.cta-field input:focus,
.cta-field textarea:focus{
  outline:none;
  border-color:var(--ice-hi);
  background:rgba(3,5,8,.75);
  box-shadow:0 0 0 3px rgba(0,170,238,.16);
}
/* Only flag invalid fields the visitor has actually interacted with, so the
   form doesn't turn red before anything has been typed.

   :user-invalid is the native version of exactly that, and .was-validated is
   added by the submit handler so a blocked submit highlights the offending
   fields even where the pseudo-class hasn't kicked in yet.

   The previous rule used :not(:placeholder-shown):invalid, which cannot work
   here: these inputs carry no placeholder attribute, so an empty field is
   never "placeholder-shown" and every required field matched on first paint —
   Name, Email and Message rendered red before anyone typed anything. */
.cta-field input:user-invalid,
.cta-field textarea:user-invalid,
.cta-form.was-validated .cta-field input:invalid,
.cta-form.was-validated .cta-field textarea:invalid{ border-color:rgba(232,120,110,.6); }

/* Honeypot — moved off-screen rather than display:none, which some bots skip. */
.cta-form-hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.cta-form-foot{ margin-top:clamp(18px, 2.4vw, 26px); }
.cta-form-submit{ position:relative; }
.cta-form-submit[disabled]{ opacity:.6; cursor:not-allowed; }
.cta-form-spinner{ display:none; }
.cta-form.is-sending .cta-form-spinner{
  display:inline-block;
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}

.cta-form-status{
  margin-top:14px;
  font-size:.92rem;
  min-height:1.4em;
}
.cta-form-status.is-success{ color:var(--ice-hi); }
.cta-form-status.is-error{ color:#E8786E; }

@media (max-width: 700px){
  .cta-form-row{ grid-template-columns:1fr; gap:0; }
  .cta-form-row .cta-field{ margin-bottom:16px; }
}

/* ── 14 · Footer ────────────────────────────────────────── */
.footer{
  position:relative;
  background:var(--deep);
  border-top:1px solid var(--line-soft);
  padding:clamp(60px, 8vw, 90px) 0 36px;
}
.footer .container{ position:relative; z-index:var(--z-content); }
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(32px, 5vw, 80px);
}
.footer-logo{
  display:inline-block;
  font-weight:800; letter-spacing:.3em; font-size:1.05rem;
  color:var(--frost);
  margin-bottom:16px;
}
.footer-logo sup{ font-size:.5em; color:var(--ice-hi); letter-spacing:0; }
.footer-logo-img{ line-height:0; }
.footer-logo-img img{ max-height:36px; width:auto; display:block; }
.footer-brand p{ max-width:38ch; font-size:.92rem; }
.footer-company{ margin-top:16px; font-size:.8rem !important; color:var(--muted); }
.footer-col h4{
  font-size:.74rem; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--frost);
  margin-bottom:20px;
}
.footer-col a{
  display:block;
  padding:6px 0;
  font-size:.92rem;
  color:var(--muted);
  transition:color var(--t-fast), transform var(--t-fast);
}
.footer-col a:hover{ color:var(--ice-hi); transform:translateX(6px); }
.footer-bottom{
  margin-top:clamp(48px, 6vw, 70px);
  padding-top:26px;
  border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:var(--muted);
}
.footer-bottom-links{ display:flex; align-items:center; gap:8px; }
.footer-bottom-links a{ color:var(--muted); transition:color var(--t-fast); }
.footer-bottom-links a:hover{ color:var(--ice-hi); }
.footer-bottom-links a:not(:last-child)::after{ content:"·"; margin-left:8px; color:var(--muted); }

/* ── 14a · Generic page fallback (non-Elementor Pages) ──── */

/* Builder-authored Pages sit between the header and footer like any ordinary
   document. The site header is position:fixed, so without this the first
   container starts at y=0 and is covered by the navbar. The theme's own
   templates (homepage, blog, single, 404) already carry their own offset and
   never get this class — see freecer_body_classes().

   The padding is on #main rather than on the content itself so it applies
   equally to Elementor output and to Gutenberg blocks, neither of which the
   theme controls the markup of. */
body.freecer-builder-page #main{
  padding-top:calc(var(--nav-offset) + clamp(24px, 4vh, 48px));
  background:var(--frost);
}

/* A page with no content at all still shouldn't collapse against the footer. */
body.freecer-builder-page #main:empty{ min-height:40vh; }

.freecer-page{
  position:relative;
  background:var(--frost);
  padding:clamp(80px, 10vh, 120px) 0;
}
.freecer-page-inner{
  /* Editor-facing content width. Matches the $content_width used for
     Gutenberg/Elementor so what you see in the editor matches the front end. */
  width:min(1140px, 100% - var(--gutter)*2);
  margin-inline:auto;
}
.freecer-page-thumb{
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:32px;
}
.freecer-page-thumb img{ width:100%; height:auto; object-fit:cover; }
.freecer-page-inner h1.freecer-page-title{
  color:var(--l-text);
  font-size:clamp(2rem, 4vw, 3rem);
  margin-bottom:24px;
}
.freecer-page-content{
  color:var(--l-muted);
  font-size:1rem;
  line-height:1.8;
}
.freecer-page-content p{ margin-bottom:1.4em; }
.freecer-page-content a{ color:var(--ice); text-decoration:underline; }
.freecer-page-content h2,
.freecer-page-content h3{ color:var(--l-text); margin:1.4em 0 .6em; }
.freecer-page-content ul,
.freecer-page-content ol{ margin:0 0 1.4em 1.4em; }
.freecer-page-content img{ max-width:100%; height:auto; border-radius:var(--r-md); }

/* ── 15 · Responsive ────────────────────────────────────── */
@media (max-width: 1180px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-right{ margin-left:auto; }
}

@media (max-width: 1024px){
  /* technology: static layout, PNG product, spec grid */
  .torbit-bglayer{ position:relative; height:auto; margin-bottom:0; padding-top:110px; overflow:visible; }
  .torbit-stage{ width:min(58svh, 82vw, 560px); margin-top:0; }
  .torbit-pin{
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:36px;
    padding-top:30px;
  }
  .torbit-head{ max-width:640px; text-align:center; }
  .torbit-head h2{ margin-inline:auto; }
  .torbit-head h2 br{ display:inline-block; width:.32em; }
  .torbit-head p{ margin-inline:auto; }
  .orbit-specs{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:min(680px, 100%);
  }
  .orbit-spec{ position:static; }
  .os-val{ white-space:normal; }
  html.js.motion-ok .orbit-spec{ opacity:1; }
  html.gl3d .torbit-product{ visibility:visible; } /* PNG returns on tablet/mobile */
  .pwipe-header{ display:none; }
  .pwipe-grid{ grid-template-columns:1fr; gap:28px; justify-items:center; text-align:center; }
  .pwipe-inner{ max-width:560px; }
  .pwipe-inner > p{ margin-inline:auto; }
  .pwipe-num{ left:50%; transform:translateX(-50%); }
  .pwipe-visual{ justify-self:center; max-width:440px; aspect-ratio:4/3.4; max-height:none; }

  /* benefits ring → horizontal swipe cards */
  .bene{ overflow-x:hidden; }
  .bene-bglayer{ display:none; }
  .bene-pin{
    height:auto;
    gap:36px;
    padding-block:110px 60px;
  }
  .bene-stage{ perspective:none; min-width:0; }
  .bene-ring{
    position:static;
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:10px var(--gutter) 24px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
  }
  .bene-ring::-webkit-scrollbar{ display:none; }
  .ring-card{
    position:static;
    margin:0;
    width:min(76vw, 330px);
    flex-shrink:0;
    transform:none !important;
    opacity:1 !important;
    scroll-snap-align:center;
  }
  .bene-progress{ display:none; }
}

@media (max-width: 1024px){
  /* tablet: same behavior as desktop — product shows first, hero copy
     alongside it, and the temp readout + 3 stat chips reveal on scroll
     (same as now on desktop). Just narrow the copy column and pull the
     chips onto the right-hand product side so neither overlaps the text
     once they do appear. */
  .hero-copy{ max-width:min(420px, 46vw); }
  .hud-temp{ top:96px; right:var(--gutter); max-width:44vw; }
  .hud-temp-val{ font-size:clamp(2.2rem, 6vw, 3rem); }
  .hud-temp-track{ width:110px; }
  .hud-chip{ padding:10px 16px; }
  .hud-chip-val{ font-size:1.9rem; }
  .hud-chip.c1{ left:6%; top:20%; }
  .hud-chip.c2{ right:2%; bottom:38%; }
  .hud-chip.c3{ left:6%; bottom:12%; }

  /* mobile menu: smaller link type + tighter spacing so all 6 links + the
     Order Now button fit on screen without clipping */
  .mobile-menu-inner{ padding:28px 40px; }
  .mobile-links{ gap:2px; margin-bottom:24px; }
  .mobile-link{ font-size:clamp(1.3rem, 4.6vw, 1.7rem); padding:6px; }
  .mobile-menu-foot{ gap:14px; }
}

@media (max-width: 767px){
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .nav-shell .btn{ display:none; }

  .hero-copy{
    left:0; right:0;
    padding-inline:var(--gutter);
    top:auto;
    bottom:10svh;
    transform:none;
    max-width:none;
    text-align:center;
  }
  .hero-copy .chip{ font-size:.6rem; padding:7px 14px; }
  .hero-title{ font-size:clamp(2.2rem, 9vw, 3rem); }
  .hero-claim{ text-align:center; }
  .hero-text{ display:none; }
  .hero-actions{ justify-content:center; }
  .hud-temp{ top:104px; }
  .hud-temp-val{ font-size:2.3rem; }
  .hud-chip{ display:none; }
  .hero-scrollhint{ display:none; }
  #haStart{ right:50%; top:34%; }
  #haEnd{ left:50%; top:42%; }

  .film-frame{ height:auto; width:min(88vw, 400px); transform:scale(.86); }
  .film-giant{ font-size:clamp(2.4rem, 11vw, 4rem); }

  .pwipe-pin{ height:auto; }
  .pwipe-panel{ position:relative; padding:12vh 0; }
  .pwipe-solution{ clip-path:none; }
  .pwipe-edge, .pwipe-header{ display:none; }

  .stack-card{ grid-template-columns:1fr; min-height:0; }
  .stack-visual{ order:-1; min-height:240px; }
  .stack-visual::before{
    background:linear-gradient(180deg, transparent 60%, rgba(255,255,255,.85) 100%);
  }

  .faq-grid{ grid-template-columns:1fr; min-height:0; }
  .faq-left-inner{ position:static; }
  .faq-flake{ display:none; }
  .faq-a-inner{ padding-left:26px; }
}

@media (max-width: 767px){
  .cta-panel{ grid-template-columns:1fr; gap:30px; }
  .cta-round{ margin-inline:auto; }
  .cta-left{ text-align:center; }
  .cta-sub{ margin-inline:auto; }
}

@media (max-width: 560px){
  .hero-actions .btn{ flex:1 1 100%; }
  .footer-bottom{ flex-direction:column; }
  /* Space is tight in the bar at this width, so the top-bar switcher gives way
     to the copy inside the mobile menu. */
  .nav-right .lang-switch{ display:none; }
  .mobile-menu-lang{ display:inline-flex; }
  .stack-actions .btn{ width:100%; }
  .cta-word text{ font-size:260px; }
}

@media (max-height: 620px){
  .hero-text, .hero-claim, .hud-chip{ display:none; }
}

/* short "laptop" viewports (desktop-width but not tall enough for the
   3D orbital ring's default sizing): keep the same pinned 3D ring, just
   compact the heading and pull the ring's vertical center down a touch
   so nothing overlaps within the single pinned screen */
@media (min-width: 1025px) and (max-height: 820px){
  .bene-pin{ padding-top:clamp(64px, 8vh, 90px); }
  .bene-head{ margin-bottom:0; }
  .bene-head h2{ margin-top:8px; font-size:clamp(1.5rem, 2.6vw, 2.2rem); }
  .bene-head p{ margin-top:6px; font-size:.85rem; }
  /* Short viewports: cap by height so the disc still clears the heading above
     it and the progress bar below on 768px-tall laptops. */
  .bene-arena{ width:min(38svh, 420px); margin-top:0; }
  .ring-card{ top:62%; padding:18px 20px; }
  .ring-card h3{ margin-top:12px; font-size:.95rem; }
  .ring-card p{ margin-top:6px; font-size:.82rem; }

  /* technology: narrow the text column and push the left-side spec cards
     further out so neither collides with the paragraph on short viewports */
  .torbit-pin{ padding-top:clamp(72px, 9vh, 100px); }
  .torbit-head{ max-width:300px; }
  .torbit-head h2{ margin-top:10px; font-size:clamp(1.5rem, 2.4vw, 2.1rem); }
  .torbit-head p{ margin-top:8px; font-size:.82rem; max-width:36ch; }
  .os1{ right:calc(46% + min(38vh, 380px)); top:16%; }
  .os3{ right:calc(48% + min(41vh, 410px)); top:52%; }
  .os5{ right:calc(44% + min(37vh, 370px)); top:82%; }
}


/* ── 16 · Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .cta-fog, .torbit-smoke, .shine::before{ display:none; }
  .film-frame{ transform:none; }
  .pwipe-pin{ height:auto; }
  .pwipe-panel{ position:relative; padding:12vh 0; }
  .pwipe-solution{ clip-path:none; }
  .pwipe-edge, .pwipe-header{ display:none; }
  .bene-pin{ height:auto; }
  .stack-card{ position:relative; top:0; }
  .hero-stage{ height:auto; min-height:100svh; }
}