/* RS-60 showcase. Colours and fonts follow liemo.nl (navy, LieMo blue, Space Grotesk + Inter);
   the page structure follows Apple's product pages (site menu, sticky product bar, big type). */

:root {
  --navy-950: #020a18;
  --navy-900: #04122a;
  --navy-800: #06203f;
  --navy: #0a2647;
  --accent: #2da6ff;
  --accent-2: #00d4ff;
  --accent-deep: #2d7ff0;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --line: #e3e6ec;
  --paper: #f5f6f8;
  --white: #ffffff;
  --on-dark: #f1f6ff;
  --on-dark-2: rgba(241, 246, 255, .66);
  --on-dark-3: rgba(241, 246, 255, .42);
  --grad-accent: linear-gradient(100deg, #2d7ff0 0%, #2da6ff 45%, #00d4ff 100%);
  --grad-hero: radial-gradient(120% 80% at 50% 0%, #0b2c57 0%, #04122a 48%, #020a18 100%);
  --font-head: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  --gnav-h: 97px; /* height of the liemo.nl header; main.js sets the measured value */
  --pnav-h: 52px;
  --abar-h: 42px; /* availability bar under the product bar; main.js sets the measured value */
  --radius: 28px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--pnav-h);
  overflow-x: clip; /* the liemo.nl phone menu waits off screen on the right; don't let it widen the page */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip; /* with html clipped too, hidden would make body a scroll box and break the sticky bar */
}

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; letter-spacing: -.02em; }
p { margin: 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; background: var(--white); color: var(--ink);
}
.skip:focus { top: 12px; }
/* Not in the liemo.nl header, footer and cookie banner: those keep the theme's own focus look. */
:where(:not(.site-header *, .site-footer *, .cookie-consent *, .nav-backdrop)):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }

/* ------------------------------------------------------------------ section themes */

section { position: relative; }
.dark { background: var(--navy-900); color: var(--on-dark); }
.light { background: var(--paper); color: var(--ink); }
.white { background: var(--white); color: var(--ink); }

.eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -.005em;
  color: var(--accent-deep); margin-bottom: 12px;
}
.dark .eyebrow { color: var(--accent); }

h2 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }

.grad {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.body { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.dark .body { color: var(--on-dark-2); }
.note { margin-top: 14px; font-size: .95rem; color: var(--muted); }
.dark .note { color: var(--on-dark-3); }

.section-head { margin-bottom: clamp(32px, 5vw, 64px); }
.section-head.center { margin-left: auto; margin-right: auto; max-width: 900px; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-xs { min-height: 30px; padding: 4px 14px; font-size: .8rem; }
.btn-primary { background: var(--grad-accent); color: var(--navy-900); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.btn:hover { transform: translateY(-1px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions.center { justify-content: center; }

/* ------------------------------------------------------------------ site menu */

/* The real liemo.nl header (theme header.php, styled by chrome.css) sits above the product bar.
   On other pages it is fixed; here it scrolls away and only the product bar sticks.
   (body > beats the .site-header of chrome.css, which loads after this file.) */
body > .site-header { position: relative; }

/* ------------------------------------------------------------------ language switch (in the product bar) */

.lang {
  display: inline-flex; flex-shrink: 0; padding: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.lang button {
  border: 0; background: transparent; cursor: pointer;
  min-width: 30px; height: 24px; padding: 0 7px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--on-dark-2);
}
.lang button[aria-pressed="true"] { background: var(--white); color: var(--navy-900); }
.pnav.on-light .lang { background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pnav.on-light .lang button { color: var(--muted); }
.pnav.on-light .lang button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

/* ------------------------------------------------------------------ product bar (sticky) */

.pnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--pnav-h);
  background: rgba(4, 18, 42, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  color: var(--on-dark);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.pnav.on-light { background: rgba(250, 251, 252, .8); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08); }
.pnav-inner {
  height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.pnav-title { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.pnav-links { display: flex; gap: 22px; margin-left: auto; font-size: .82rem; }
.pnav-links a { text-decoration: none; opacity: .72; transition: opacity .2s; }
.pnav-links a:hover, .pnav-links a.active { opacity: 1; }
.pnav-links a.active { font-weight: 600; }
.pnav-title, .pnav-links a, .pnav .btn { white-space: nowrap; }
@media (max-width: 520px) {
  .pnav-links a:first-child { display: none; }
  .pnav-inner { gap: 12px; }
  .pnav-links { gap: 14px; }
  .pnav .btn-xs { padding: 4px 12px; }
}
/* With the language switch in the bar there is no room for the quote button on a phone;
   the hero right below and the CTA at the end have it. */
@media (max-width: 480px) { .pnav .btn { display: none; } }
@media (max-width: 360px) { .pnav-links a[href="#specs"] { display: none; } }

/* ------------------------------------------------------------------ availability bar (under the product bar) */

.abar { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.abar-inner {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 18px;
  font-size: .88rem; line-height: 1.4; text-align: center;
}
.abar-when { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--on-dark); }
.abar-when::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(45, 166, 255, .18);
}
.abar-link { color: var(--on-dark-2); text-decoration: none; transition: color .2s; }
.abar-link::after { content: " \2192"; }
.abar-link:hover { color: var(--white); }

/* ------------------------------------------------------------------ reveal */

.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  /* Menu, product bar, availability bar and hero together fill the first screen, so the buttons are in view. */
  min-height: calc(100vh - var(--gnav-h) - var(--pnav-h) - var(--abar-h));
  min-height: calc(100svh - var(--gnav-h) - var(--pnav-h) - var(--abar-h));
  padding: clamp(28px, 5vh, 56px) 0 clamp(28px, 5vh, 56px);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--grad-hero);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* fine grid, like the firmware page */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 0%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 58%; width: min(1100px, 140vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(45, 166, 255, .22), rgba(0, 212, 255, .06) 55%, transparent 75%);
}
.hero-copy { text-align: center; padding: 0 var(--gutter); }
.hero-title { font-size: clamp(4.5rem, 14vw, 9.5rem); line-height: .9; font-weight: 700; letter-spacing: -.06em; color: var(--white); }
.hero-lead {
  margin-top: clamp(10px, 2vh, 20px);
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); letter-spacing: -.025em; line-height: 1.1;
  color: var(--white);
}
.hero .eyebrow { color: var(--on-dark-2); font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 4px; }
.hero-copy [data-reveal]:nth-child(2) { transition-delay: .08s; }
.hero-copy [data-reveal]:nth-child(3) { transition-delay: .16s; }

.hero-stage { position: relative; min-height: max(240px, 34vh); margin: 0 auto; width: 100%; max-width: 1400px; }
/* The loop has the hero's glow baked in; its edges fade into the page so no rectangle shows, which
   lets it be bigger than its row and run behind the title and the text under it (they sit on top).
   Its size follows the screen height, so the buttons below stay in the first screen; on a phone it
   is wider than the screen (only the faded edges are cut off). The element is exactly the clip
   (16:10), so the mask follows the picture. */
.hero-copy, .hero-foot { position: relative; z-index: 1; }
.hero-video {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  width: min(1040px, 150vw, (100svh - 120px) * .95); height: auto; max-width: none; aspect-ratio: 16 / 10;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 62%, transparent 100%);
}
/* Phones: at 150% of the screen width the podium and cable were cut off at the sides. Here the
   clip is just wider than the screen, so the whole product stays in view and only the faded
   edges fall outside. */
@media (max-width: 600px) {
  .hero-video { width: min(116vw, (100svh - 120px) * .95); transform: translate(-50%, -52%); }
}

.hero-foot { padding: 0 var(--gutter); }
.hero-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  margin: 14px 0 0; padding: 0; list-style: none; font-size: .95rem; font-weight: 500; color: var(--on-dark);
}
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before {
  content: ""; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232da6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-foot .actions { margin-top: clamp(20px, 3vh, 30px); }
@media (max-width: 520px) {
  .hero-foot .actions { flex-wrap: nowrap; gap: 10px; }
  .hero-foot .btn { padding: 12px 18px; }
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-sub {
  text-align: center; margin: 0 auto;
  max-width: 46em;
  color: var(--on-dark-2); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.5;
}

/* ------------------------------------------------------------------ film */

.film { background: var(--navy-950); }
/* Edge to edge: the full width of the window, 16:9 (9:16 on a phone held upright). */
.film-frame {
  position: relative; margin: 0 auto; overflow: hidden; background: #e9ebef;
  /* Full width where it fits; on wide, low windows (browser bars, task bar) no taller than what is
     visible under the product bar, so the whole film is always in view. */
  aspect-ratio: 16 / 9; width: min(100%, calc((100svh - var(--pnav-h) - 32px) * 16 / 9));
}
.film-frame.tall { aspect-ratio: 9 / 16; width: min(100%, calc((100svh - var(--pnav-h) - 16px) * 9 / 16)); }
/* When it no longer spans the window, it sits as a framed film on the dark background. */
@media (min-aspect-ratio: 16 / 8.6) {
  .film { padding: 0 var(--gutter) 32px; }
  .film-frame:not(.tall) { border-radius: var(--radius); }
}
.js .film-frame[data-reveal] { transform: none; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.film-controls { position: absolute; right: max(16px, 3%); bottom: max(16px, 4%); display: flex; gap: 10px; }
.ctl {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(29, 29, 31, .5); color: var(--white);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .2s var(--ease);
}
.ctl:hover { background: rgba(29, 29, 31, .72); }
.ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#film-play svg { fill: currentColor; stroke: none; }
.film-frame .i-play, .film-frame.paused .i-pause { display: none; }
.film-frame.paused .i-play { display: block; }
.film-frame .i-on, .film-frame.sound .i-off { display: none; }
.film-frame.sound .i-on { display: block; }

/* ------------------------------------------------------------------ adapter (sticky scroll, 3D) */

.adapter { height: 180vh; background: linear-gradient(180deg, var(--paper) 0%, #e9ecf0 100%); }
.adapter-sticky {
  position: sticky; top: var(--pnav-h);
  height: calc(100vh - var(--pnav-h)); height: calc(100svh - var(--pnav-h));
  overflow: hidden;
}
.adapter-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); }
.adapter-sticky canvas.ready { opacity: 1; }
.adapter-copy {
  position: absolute; z-index: 2;
  left: max(var(--gutter), calc((100vw - var(--max)) / 2));
  top: clamp(32px, 9vh, 96px);
  width: min(560px, 42vw);
}
.adapter-copy h2 { margin-bottom: 18px; }
.adapter-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0; }
.no-webgl .adapter-fallback { opacity: 1; }

.explode-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.tag {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: .88rem; font-weight: 500; color: var(--on-dark); white-space: nowrap;
  opacity: 0; transition: opacity .4s var(--ease);
  will-change: transform;
}
.tag i { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(45, 166, 255, .25)); position: relative; }
.tag i::after { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.tag.on { opacity: 1; }
.light-labels .tag { color: var(--ink); font-weight: 600; }
.light-labels .tag i { background: linear-gradient(90deg, var(--accent-deep), rgba(45, 127, 240, .25)); }
.light-labels .tag i::after { background: var(--accent-deep); box-shadow: 0 0 0 3px rgba(45, 127, 240, .18); }

@media (max-width: 820px) {
  .adapter { height: 170vh; }
  .adapter-copy { left: var(--gutter); right: var(--gutter); width: auto; top: 24px; }
  .adapter-copy h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); margin-bottom: 10px; }
  .adapter-copy .body { font-size: 1rem; }
  .tag { font-size: .74rem; gap: 6px; }
  .tag i { width: 20px; }
}

/* ------------------------------------------------------------------ how it works */

.how { padding: clamp(90px, 13vw, 170px) 0; }
.how-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.how-copy { padding-top: clamp(8px, 2vw, 24px); }
.tank { position: relative; margin: 0; }
.tank svg { width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.tank-wall { fill: #dfe4ec; stroke: #c4ccd8; stroke-width: 1; }
.tank-inside { fill: #fbfcfd; }
.tank-sensor rect { fill: #111316; }
.tank-sensor .tank-sensor-top { fill: #2a2e35; }
.tank-cable { fill: none; stroke: #1b1c1f; stroke-width: 6; stroke-linecap: round; }
.beam { fill: url(#beam-grad); }
.hit { fill: #d6ecff; opacity: 0; }
.pulses path { fill: none; stroke-linecap: round; }
.pulses .down { stroke: var(--accent-deep); stroke-width: 2.2; }
.pulses .up { stroke: #8ccaff; stroke-width: 1.8; }
.readout-line { stroke: var(--navy); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .55; }
.scale line { stroke: #c4ccd8; stroke-width: 1.2; }
.readout-tick { stroke: var(--accent-deep); stroke-width: 1.4; }
.readout-dot { fill: var(--accent-deep); }
.readout-text {
  font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  fill: var(--ink); text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums;
}
.how-facts { margin: clamp(28px, 4vw, 44px) 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.how-facts > div { display: grid; grid-template-columns: minmax(7.5em, auto) 1fr; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.how-facts dt { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; white-space: nowrap; }
.how-facts dt small { font-size: .55em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.how-facts dd { margin: 0; color: var(--muted); }
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ take a closer look */

.closer { background: var(--white); padding: clamp(90px, 12vw, 150px) 0 clamp(80px, 10vw, 130px); border-top: 1px solid var(--line); }
.closer h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.closer-stage {
  position: relative; margin: 0 auto; aspect-ratio: 4 / 3;
  width: min(100%, 1040px, calc((100vh - var(--pnav-h) - 220px) * 4 / 3));
  /* The renders are cut at the frame; let the cable fade out instead of stopping at an edge. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
}
.closer-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateX(var(--dx, 0%)) scale(calc(var(--zoom, 1) * .985)); transition: opacity .7s var(--ease), transform 1s var(--ease-out);
}
.closer-stage img.on { opacity: 1; transform: translateX(var(--dx, 0%)) scale(var(--zoom, 1)); }
/* The front and side renders show the sensor smaller than top and cable; bring them to the same size. */
.closer-stage img[data-view="three-quarter"] { --zoom: 1.32; }
.closer-stage img[data-view="side"] { --zoom: 1.3; --dx: 17%; } /* sensor sits left in this render, cable to the right */
.closer-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .7s var(--ease); touch-action: pan-y; cursor: grab;
}
.closer-stage canvas:active { cursor: grabbing; }
.closer-stage.has-3d canvas { opacity: 1; }
.closer-stage.has-3d img { opacity: 0 !important; }
.drag-hint {
  display: none; align-items: center; justify-content: center; gap: 8px; width: fit-content;
  margin: -8px auto 0; padding: 5px 14px; border-radius: 999px;
  color: var(--muted); font-size: .82rem; font-weight: 500; transition: opacity .4s var(--ease);
}
.drag-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.closer-stage.has-3d + .drag-hint { display: flex; }
.closer.interacted .drag-hint { opacity: 0; }
.closer.interacted .views button[aria-pressed="true"]::after { display: none; }
.closer-caption { text-align: center; min-height: 1.5em; margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.views {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  width: fit-content; margin: clamp(4px, 1vw, 10px) auto 0; padding: 4px;
  border-radius: 999px; background: #f0f1f4;
}
.views button {
  border: 0; background: transparent; cursor: pointer;
  height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
@media (max-width: 480px) { .views { flex-wrap: nowrap; } .views button { padding: 0 11px; font-size: .82rem; height: 34px; } }
/* Small phones: the Dutch labels (Voorkant, Bovenkant ...) are longer; keep the four buttons on screen. */
@media (max-width: 380px) { .views { gap: 2px; padding: 3px; } .views button { padding: 0 6px; font-size: .74rem; } }
.views button[aria-pressed="true"] { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(10, 38, 71, .12); }
/* The views change by themselves while the section is in view; the active pill shows the time left. */
.views button { position: relative; overflow: hidden; }
.views button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--grad-accent); transform-origin: left; transform: scaleX(0);
  animation: step-progress 4.5s linear forwards paused;
}
.closer.playing .views button[aria-pressed="true"]::after { animation-play-state: running; }
.closer.playing .closer-show:hover .views button[aria-pressed="true"]::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .views button[aria-pressed="true"]::after { display: none; } }

/* ------------------------------------------------------------------ versions */

.versions { padding: clamp(90px, 13vw, 170px) 0; background: linear-gradient(180deg, #04122a 0%, #06203f 100%); }
/* Four cards side by side that head the compare table; the labels in a column on the left. */
.vtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vtable .vt-corner { width: 16%; }
.vtable thead th { padding: 0 clamp(6px, 1.4vw, 18px) clamp(18px, 2.4vw, 28px); vertical-align: top; font-weight: inherit; }
.vt-card { display: grid; justify-items: center; text-align: center; gap: 4px; }
.vt-card img {
  width: min(260px, 100%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 16px;
  border-radius: 24px; background: radial-gradient(80% 70% at 50% 40%, #ffffff 0%, #e3e6eb 100%);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7);
}
.vt-card small { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.vt-card strong { font-family: var(--font-head); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.vt-card span { max-width: 22em; margin-top: 4px; font-size: .97rem; line-height: 1.45; color: var(--on-dark-2); }
.vtable tbody th, .vtable td { padding: 18px 12px; border-top: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.vtable tbody th { padding-left: 0; text-align: left; font-size: .92rem; font-weight: 600; color: var(--on-dark-2); }
.vtable td { text-align: center; color: var(--on-dark); font-size: .97rem; }
.vtable td, .vt-card span { text-wrap: balance; }
@media (max-width: 960px) {
  /* No room for four columns: one block per version. The table turns into one grid; main.js gives every
     cell an order (--o), so a version's card comes first, then its values, each with its label in front. */
  .vtable { display: grid; grid-template-columns: minmax(0, 1fr); }
  .vtable thead, .vtable tbody, .vtable tr { display: contents; }
  .vtable .vt-corner, .vtable tbody th { display: none; }
  .vtable thead th, .vtable td { order: var(--o); }
  .vtable thead th { padding: 0 0 6px; }
  .vtable thead th:not(:nth-child(2)) { margin-top: clamp(36px, 10vw, 56px); }
  .vt-card { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-content: center; column-gap: 18px; text-align: left; }
  .vt-card img { grid-row: 1 / span 3; align-self: center; width: 96px; margin-bottom: 0; border-radius: 16px; }
  .vt-card strong { font-size: 1.4rem; }
  .vt-card small, .vt-card span { font-size: .85rem; }
  .vtable td { padding: 12px 0; text-align: left; font-size: .95rem; overflow-wrap: anywhere; hyphens: auto; }
  .vtable td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 600; color: var(--on-dark-2); }
}

/* ------------------------------------------------------------------ app */

.app { padding: clamp(90px, 13vw, 170px) 0; overflow: hidden; }
.app::before {
  content: ""; position: absolute; right: -10%; top: 10%; width: 60%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(45, 166, 255, .18), transparent 70%);
}
.app-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.app-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.app-steps button {
  display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left;
  padding: 16px 18px; border: 0; border-radius: 18px; background: transparent; cursor: pointer;
  color: var(--on-dark-3); font-size: 1.05rem; line-height: 1.45;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.app-steps button:hover { color: var(--on-dark-2); }
.app-steps .n {
  flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: .8rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px currentColor; margin-top: 1px;
}
.app-steps strong { color: inherit; font-weight: 600; }
.app-steps li.on button { background: rgba(255, 255, 255, .06); color: var(--on-dark); }
.app-steps li.on strong { color: var(--white); }
.app-steps li.on .n { background: var(--grad-accent); color: var(--navy-900); box-shadow: none; }
.app-steps li.done .n { color: var(--accent); }
.app-steps button { position: relative; overflow: hidden; }
.app-steps li.on button::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--grad-accent); transform-origin: left; transform: scaleX(0);
  animation: step-progress 6s linear forwards paused;
}
.app-steps.playing li.on button::after { animation-play-state: running; }
.app-steps.playing:hover li.on button::after, .app-steps.finished li.on button::after { animation-play-state: paused; }
.app-steps.finished li.on button::after { transform: scaleX(1); }
@keyframes step-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .app-steps li.on button::after { display: none; } }
.phone {
  justify-self: center;
  width: min(320px, 72vw); aspect-ratio: 540 / 1169;
  padding: 11px; border-radius: 52px;
  background: linear-gradient(145deg, #2a2f38, #0b0d11);
  box-shadow: 0 0 0 1.5px #3a404b, 0 60px 100px -40px rgba(0, 0, 0, .8), 0 0 80px -20px rgba(45, 166, 255, .25);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #fff; }
/* The screenshots have no status bar and run into the corners: give them a phone's status bar
   (time, camera island) and home bar, and fit them in between without cropping. */
.phone-screen::before {
  content: ""; position: absolute; z-index: 2; top: 1.6%; left: 50%; transform: translateX(-50%);
  width: 31%; height: 3%; border-radius: 999px; background: #0b0d11;
}
.phone-screen::after {
  content: ""; position: absolute; z-index: 2; bottom: 1.1%; left: 50%; transform: translateX(-50%);
  width: 34%; height: 4px; border-radius: 4px; background: #1d1d1f;
}
.phone-time {
  position: absolute; z-index: 2; top: 1.9%; left: 11%;
  font: 600 13px/1 var(--font-body); color: #1d1d1f; letter-spacing: -.01em;
}
.phone-screen img {
  position: absolute; top: 6.4%; left: 2.5%; width: 95%; height: 90.5%;
  object-fit: contain; object-position: top center;
  opacity: 0; transition: opacity .6s var(--ease);
}
.phone-screen img.on { opacity: 1; }
@media (max-width: 820px) {
  .app-grid { grid-template-columns: 1fr; }
  .phone { grid-row: 2; }
}

/* ------------------------------------------------------------------ specs */

.specs { padding: clamp(90px, 13vw, 170px) 0; }
.keyspecs { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.keyspecs > div { padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.keyspecs > div:not(:nth-child(4n + 1)) { padding-left: clamp(16px, 2.6vw, 32px); border-left: 1px solid var(--line); }
.keyspecs dt { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 2.9vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.keyspecs dt small { font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.keyspecs dd { margin: 6px 0 0; color: var(--muted); }
.keyspecs-more { margin-top: 28px; max-width: 46em; color: var(--ink-2); }
.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.dl {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: 22px; background: var(--white); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(10, 38, 71, .06), 0 16px 34px -26px rgba(10, 38, 71, .4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dl:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(10, 38, 71, .08), 0 22px 40px -24px rgba(10, 38, 71, .45); }
.dl-icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad-accent); }
.dl-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--navy-900); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dl-text { display: grid; gap: 2px; }
.dl-text strong { font-size: 1.05rem; }
.dl-text span { color: var(--muted); font-size: .9rem; }
.dl-arrow { margin-left: auto; font-size: 1.3rem; color: var(--accent-deep); }
@media (max-width: 820px) {
  .keyspecs { grid-template-columns: 1fr 1fr; }
  .keyspecs > div:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .keyspecs > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
  .downloads { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) and (min-width: 821px) {
  .keyspecs { grid-template-columns: repeat(2, 1fr); }
  .keyspecs > div:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .keyspecs > div:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--line); }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ why radar (compare) */

.compare { padding: clamp(90px, 13vw, 170px) 0; background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); }
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.cmp-card {
  margin: 0; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius);
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.cmp-card[data-reveal]:nth-child(2) { transition-delay: .1s; }
.cmp-card[data-reveal]:nth-child(3) { transition-delay: .2s; }
.cmp-card svg { width: 100%; height: auto; margin-bottom: 14px; }
.cmp-card h3 { font-size: 1.35rem; color: var(--white); margin-bottom: 6px; }
.cmp-card p { color: var(--on-dark-2); font-size: .98rem; }
.cmp-us {
  background: linear-gradient(180deg, rgba(45, 166, 255, .16), rgba(45, 166, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(45, 166, 255, .5), 0 40px 90px -50px rgba(45, 166, 255, .7);
}
.cmp-us h3 { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.cmp-wall { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .2); }
.cmp-inside { fill: #081a33; }
.cmp-liquid { fill: var(--accent-deep); }
.cmp-metal { fill: #9aa3b2; }
.cmp-rod { stroke: #9aa3b2; stroke-width: 3; stroke-linecap: round; }
.cmp-float { fill: #dfe4ec; }
.cmp-tube { fill: #aeb6c3; }
.cmp-dirt ellipse { fill: #8c6b3a; }
.cmp-alert { fill: none; stroke: #ff6b6b; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cmp-alert 2.4s ease-out infinite; }
@keyframes cmp-alert { from { opacity: .95; transform: scale(.55); } to { opacity: 0; transform: scale(1.5); } }
.cmp-cable { fill: none; stroke: #2e3034; stroke-width: 4; stroke-linecap: round; }
.cmp-beam { fill: rgba(45, 166, 255, .16); }
.cmp-pulses path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .cmp-alert { animation: none; opacity: .8; } }

.cmp-table { width: 100%; max-width: 820px; margin: clamp(40px, 6vw, 72px) auto 0; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 15px 10px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.cmp-table thead th { font-family: var(--font-head); font-weight: 600; color: var(--on-dark-2); font-size: .95rem; border-bottom-color: rgba(255, 255, 255, .18); }
.cmp-table thead th.us { color: var(--white); }
.cmp-table tbody th { text-align: left; font-weight: 500; color: var(--on-dark); padding-left: 0; }
.cmp-table td { text-align: center; width: 17%; font-size: 1.15rem; font-weight: 600; }
.cmp-table td.no { color: var(--on-dark-3); }
.cmp-table td.yes { color: var(--accent); }
.cmp-table .us { background: rgba(45, 166, 255, .08); }
.cmp-table thead .us { border-radius: 14px 14px 0 0; }

@media (max-width: 820px) {
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-card { display: grid; grid-template-columns: minmax(120px, 44%) 1fr; gap: 16px; align-items: center; padding: 14px 16px; }
  .cmp-card svg { margin: 0; }
  .cmp-card h3 { font-size: 1.15rem; }
  .cmp-card p { font-size: .9rem; }
  .cmp-table th, .cmp-table td { padding: 12px 6px; font-size: .9rem; }
  .cmp-table td { width: 19%; font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ app: download */

.app-get {
  display: flex; align-items: center; gap: 18px; margin-top: clamp(28px, 4vw, 40px);
  padding: 20px 22px; border-radius: 24px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.app-get-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(45, 166, 255, .14); color: var(--accent);
}
.app-get-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.app-get-title { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--white); }
.app-get-sub { color: var(--on-dark-2); font-size: .95rem; margin-top: 4px; }

/* ------------------------------------------------------------------ FAQ */

.faq { padding: clamp(90px, 13vw, 170px) 0 clamp(70px, 9vw, 120px); }
.faq-group { display: grid; grid-template-columns: 1fr 2.4fr; gap: 12px clamp(24px, 5vw, 80px); padding: 26px 0 30px; border-top: 1px solid var(--line); }
.faq-group h3 { font-size: 1.3rem; padding-top: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 16px 44px 16px 0; font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--accent-deep); }
.faq details p { padding: 0 44px 20px 0; color: var(--ink-2); max-width: 44em; }
.faq-more { margin-top: 28px; color: var(--muted); font-size: 1.05rem; }
.faq-more a { color: var(--accent-deep); font-weight: 600; text-decoration: none; }
@media (max-width: 820px) { .faq-group { grid-template-columns: 1fr; gap: 0; } .faq-group h3 { padding-top: 0; margin-bottom: 4px; } }

/* ------------------------------------------------------------------ CTA (the footer is the liemo.nl one) */

.cta { padding: clamp(100px, 14vw, 180px) 0; background: var(--grad-hero); overflow: hidden; }
.cta h2 { font-size: clamp(2.4rem, 6.4vw, 4.8rem); color: var(--white); margin-bottom: 18px; }
.cta .body { margin: 0 auto 34px; }
/* The footer keeps its own 60 px top margin, like on every liemo.nl page; the CTA reaches down over it,
   so the dark section runs straight into the footer. */
.cta { margin-bottom: -60px; padding-bottom: calc(clamp(100px, 14vw, 180px) + 60px); }