/* =========================================================================
   Ariadne Sense — design system
   Dark theme · glassmorphism (Apple Liquid Glass) · accessibility-first
   ========================================================================= */

:root {
  /* Palette */
  --bg: #05060a;
  --bg-2: #0a0d16;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  /* Boundary of an actual UI control, as opposed to a decorative card edge.
     --border composites to ~1.35:1 on the page, well under the 3:1 that WCAG
     1.4.11 asks of a control's visual boundary; this clears it (3.7-3.9:1) on
     the page, the darker form background and the glass surface alike. */
  --border-control: #6a6d78;

  --text: #f4f6fb;
  --text-dim: #b9c0d4;
  --text-mute: #8a92a8;

  /* Iridescent accent (matches the logo glow) */
  --accent: #7cc6ff;
  --accent-2: #b58cff;
  --accent-3: #ffd59e;
  --grad-accent: linear-gradient(120deg, #7cc6ff 0%, #b58cff 50%, #ffd59e 100%);

  --radius: 22px;
  --radius-lg: 28px;
  --radius-sm: 14px;
  --container: 1160px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Inter, Roboto, system-ui, sans-serif;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding clears the sticky header so an element scrolled to by keyboard
   or by anchor never lands underneath it (WCAG 2.4.11 Focus Not Obscured). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient aurora background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(124, 198, 255, 0.16), transparent 60%),
    radial-gradient(55% 45% at 85% 12%, rgba(181, 140, 255, 0.16), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(255, 213, 158, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

/* ----- Accessibility helpers ----- */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: #fff; color: #05060a;
  padding: .6rem 1rem; border-radius: 10px;
  z-index: 200; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Visually hidden but still announced by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Layout ----- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* Landing blocks are each their own <section>, so two full paddings stacked into
   a ~220px gap between them. Collapse the seam: the first keeps its top padding,
   every following one only pays for the bottom. */
.landing-body-blocks .section + .section { padding-top: 0; }
/* The closing CTA is a sibling after the wrapper, so it needs the same treatment. */
.landing-body-blocks + .section { padding-top: 0; }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.section-head p { color: var(--text-dim); font-size: 1.08rem; }

/* ----- Glass surface ----- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-soft);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  /* Not --border-strong (1.86:1): on .btn-ghost the fill is transparent, so this
     edge is the control's only visual boundary and has to clear 3:1 on its own. */
  border: 1px solid var(--border-control);
  background: var(--surface-2); color: var(--text);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: .55rem 1rem; font-size: .92rem; }
/* The header actions sit in one row, so they share a height rather than each
   deriving its own from padding + font-size. */
.header-actions .btn-sm { height: 34px; padding: 0 1rem; font-size: .88rem; }
.btn-primary {
  background: #fff; color: #06080e; border-color: #fff;
  box-shadow: 0 10px 30px rgba(124, 198, 255, 0.25);
}
.btn-primary:hover { box-shadow: 0 16px 40px rgba(181, 140, 255, 0.4); }
/* The shared accent focus ring is only 1.85:1 against this button's white fill.
   A dark ring hugging the button (20:1 on white) plus an accent ring outside it
   (11:1 on the page) keeps the indicator visible against both surfaces. */
.btn-primary:focus-visible { outline-color: var(--bg); box-shadow: 0 0 0 6px var(--accent); }
.btn-ghost { background: transparent; }
/* Official Apple "Download on the App Store" badge — fixed aspect, no custom chrome */
.download-badge { display: inline-flex; align-items: center; border-radius: 10px; transition: transform .15s ease, box-shadow .2s ease; }
.download-badge img { display: block; height: 50px; width: auto; }
/* Voice nie jest w App Store, więc zamiast odznaki jest zwykły przycisk.
   Bez tych reguł zostawał goły tekst bez tła — a przycisk pobierania jest
   na tej stronie najważniejszym elementem. */
.download-badge { padding: 14px 28px; background: #fff; color: #06080e;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.download-badge:hover { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.download-badge:hover { transform: translateY(-2px); }
.download-badge:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.download-inner .download-badge img { height: 56px; }

/* ----- Header ----- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 9, 16, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.18rem; font-weight: 400; letter-spacing: .01em; }
.logo strong { font-weight: 700; }
.logo img { filter: drop-shadow(0 0 10px rgba(124, 198, 255, 0.5)); }
/* align-items: the row mixes plain text links with an inline-flex Menu button;
   without it the links stretch to the full row height and sit off-centre
   against the button. */
.nav { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.nav a { white-space: nowrap; }
.logo span { white-space: nowrap; }
/* Same vertical box as the Menu button beside them, so the row lines up and the
   links clear the 24px target minimum. */
.nav a { color: var(--text-dim); font-size: .98rem; display: inline-flex; align-items: center;
  padding: .25rem 0; min-height: 24px; }
.nav a:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: .8rem; margin-left: 1.2rem; }
/* Language menu (button + popup, replaces the old two-button switcher) */
.lang-menu { position: relative; }
.lang-menu-btn { display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .7rem; background: none;
  border: 1px solid var(--border-control); border-radius: 999px; color: var(--text-dim); font: inherit; font-size: .84rem;
  font-weight: 600; cursor: pointer; }
.lang-menu-btn:hover { color: var(--text); border-color: var(--text-mute); }
.lang-menu-code { text-transform: uppercase; letter-spacing: .02em; }
.lang-menu-btn .chev { transition: transform .2s ease; }
.lang-menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu-list { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; min-width: 170px; margin: 0;
  padding: .35rem; list-style: none; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.lang-menu-list[hidden] { display: none; }
.lang-menu-list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .7rem; border-radius: 9px; color: var(--text-dim); font-size: .95rem; }
.lang-menu-list a:hover { background: var(--surface-2); color: var(--text); }
.lang-menu-list a .tick { opacity: 0; flex: none; color: var(--accent); }
.lang-menu-list a.is-current { color: var(--text); font-weight: 600; }
.lang-menu-list a.is-current .tick { opacity: 1; }

/* Motion pause control (WCAG 2.2.2). Sized and bordered like the language
   button beside it so the actions row stays even. */
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  height: 34px; padding: 0 .7rem; background: none; border: 1px solid var(--border-control);
  border-radius: 999px; color: var(--text-dim); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; flex: none; white-space: nowrap; }
.motion-toggle:hover { color: var(--text); border-color: var(--text-mute); }
.motion-toggle[hidden] { display: none; }
.motion-icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-icon-play { display: block; }

/* Halt every decorative animation when the user asks for it. animation-play-state
   freezes CSS keyframes in place rather than resetting them, and the SVG
   <animateMotion> in the tech phone is paused separately from JS. */
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* One-shot entrance animations are cancelled outright rather than frozen. They
   start at opacity 0, so pausing them on their first frame would leave the
   element permanently invisible instead of merely still. Same treatment the
   reduced-motion block gives them. */
body.motion-paused .site-drawer,
body.motion-paused .drawer-backdrop,
body.motion-paused .lang-menu-list,
body.motion-paused [data-reveal] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Menu button + slide-in drawer */
/* In-nav Menu button: styled like the sibling nav links, not like a control. */
/* padding + min-height keep the hit area at 24px on the cross axis, which the
   bare line-box did not reach (WCAG 2.5.8 Target Size). */
.nav .nav-toggle { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0;
  padding: .25rem 0; min-height: 24px; color: var(--text-dim); font: inherit; cursor: pointer; }
.nav .nav-toggle:hover { color: var(--text); }
.nav .nav-toggle[aria-expanded="true"] { color: var(--text); }
.nav .nav-toggle .chev { transition: transform .2s ease; }
.nav .nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Small-screen hamburger in the actions row. */
.nav-toggle-mobile { display: none; align-items: center; justify-content: center; background: none;
  border: 1px solid var(--border-control); border-radius: 10px; color: var(--text); width: 42px; height: 38px;
  padding: 0; cursor: pointer; }
.nav-toggle-mobile:hover { border-color: var(--text-mute); }
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

/* Backdrop starts below the header so the bar stays visible and usable. */
.drawer-backdrop { position: fixed; inset: var(--header-h, 67px) 0 0; z-index: 90;
  background: rgba(4, 6, 12, .6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: drawer-fade .2s ease; }
.drawer-backdrop[hidden] { display: none; }
/* Full-width sheet dropping from under the header. Height follows the content
   (it is not a full-height panel), and the groups sit side by side in columns. */
.site-drawer { position: fixed; top: var(--header-h, 67px); left: 0; right: 0;
  z-index: 95; max-height: calc(100dvh - var(--header-h, 67px));
  display: flex; flex-direction: column; background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55); transform-origin: top center;
  animation: drawer-in .24s cubic-bezier(.32, .72, 0, 1); }
.site-drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: flex-end;
  width: min(1200px, 100%); margin: 0 auto;
  padding: .75rem clamp(1.15rem, 4vw, 2rem) 0; }
.drawer-title { display: none; }
.drawer-title { font-size: 1.05rem; font-weight: 700; }
.drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: none; border: 1px solid var(--border-control); border-radius: 10px; color: var(--text); cursor: pointer; }
.drawer-close:hover { border-color: var(--text-mute); }
.drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: min(1200px, 100%); margin: 0 auto; padding: 1.5rem clamp(1.15rem, 4vw, 2rem) 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 2rem;
  align-items: start; }

.drawer-group-title { display: block; margin: 0 0 .3rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-mute); }
.drawer-group ul { list-style: none; margin: 0; padding: 0; }
.drawer-group a { display: block; padding: .72rem .5rem; margin: 0 -.5rem; border-radius: 10px;
  color: var(--text-dim); font-size: 1.02rem; }
.drawer-group a:hover { background: var(--surface-2); color: var(--text); }
.drawer-group a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.drawer-cta { grid-column: 1 / -1; justify-self: start; justify-content: center; min-width: 220px; }
.drawer-cta-contact { margin-top: .6rem; }
body.drawer-open { overflow: hidden; }

@keyframes drawer-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .site-drawer, .drawer-backdrop { animation: none; }
}

/* Just above the drawer breakpoint the bar carries the nav, both CTAs and three
   controls at once. Contact is the one that can go: it stays in the drawer, and
   the footer links to the same form. */
@media (max-width: 1040px) {
  .header-contact { display: none; }
}

@media (max-width: 880px) {
  .nav-toggle-mobile { display: inline-flex; }
  .site-drawer { max-height: calc(100dvh - var(--header-h, 67px)); }
  .drawer-body { grid-template-columns: 1fr; gap: .25rem; padding-top: 1rem; }
  /* The toggle already turns into an X in the bar right above, so the panel's own
     title row would be a second, redundant close control. */
  .drawer-head { display: none; }
  .drawer-body { padding-top: 1rem; }
  .nav { display: none; }
  /* Both header CTAs fold into the drawer at this width; the bar keeps only the
     language, motion and menu controls. */
  .header-download, .header-contact { display: none; }
  /* Narrow bar: the pause control keeps its icon but drops the word, which is
     what overflows once the language button and hamburger are alongside it.
     The name survives in the sr-only span, so the button stays labelled. */
  .motion-toggle { width: 34px; padding: 0; gap: 0; }
  .motion-toggle-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* ----- Hero ----- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); background: none; border: 0; padding: 0;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hero h1 { margin-top: 1rem; }
.hero h1 .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 1.18rem; color: var(--text-dim); max-width: 38ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero-note { margin-top: 1rem; color: var(--text-mute); font-size: .9rem; }

/* Device mockup */
.device {
  position: relative; width: min(300px, 78%); margin: 0 auto;
  border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.device::after {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 40%, rgba(181,140,255,.35), transparent 70%);
  filter: blur(30px);
}
.device img { border-radius: 36px; width: 100%; }

/* ----- Value bar ----- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.value { text-align: center; padding: 1.2rem 1rem; }
.value .icon { width: 26px; height: 26px; color: var(--accent); margin: 0 auto .5rem; filter: drop-shadow(0 0 8px rgba(124,198,255,.5)); }
.value strong { display: block; font-size: 1rem; }

/* ----- Quad grid: the app's four-button home screen -----
   Two columns, tall tiles, one accent per quadrant, in the same order as on the
   phone. Authored as an <ol> so the reading order matches the on-screen order
   for anyone who cannot see the arrangement. */
.quad-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
  list-style: none; margin: 0; padding: 0;
  max-width: 780px; margin-inline: auto;
}
.quad-tile {
  position: relative; display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem; min-height: 230px;
  border-radius: var(--radius);
  /* The tint sits under the glass, mirroring each button's colour in the app. */
  background:
    radial-gradient(120% 90% at 50% 8%, var(--quad-tint) 0%, transparent 62%),
    var(--surface);
}
.quad-tile[data-quad="1"] { --quad-tint: rgba(124, 198, 255, .20); }
.quad-tile[data-quad="2"] { --quad-tint: rgba(181, 140, 255, .22); }
.quad-tile[data-quad="3"] { --quad-tint: rgba(126, 231, 179, .18); }
.quad-tile[data-quad="4"] { --quad-tint: rgba(255, 213, 158, .20); }
.quad-pos {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute);
}
.quad-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: .9rem 0 .8rem;
}
.quad-icon .icon { width: 30px; height: 30px; color: var(--text); }
.quad-tile[data-quad="1"] .icon { color: #7cc6ff; }
.quad-tile[data-quad="2"] .icon { color: #b58cff; }
.quad-tile[data-quad="3"] .icon { color: #7ee7b3; }
.quad-tile[data-quad="4"] .icon { color: #ffd59e; }
.quad-tile h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.quad-tile p { margin: 0; color: var(--text-dim); font-size: .95rem; line-height: 1.55; }
.quad-hold { margin-top: .7rem !important; padding-top: .7rem; border-top: 1px solid var(--border); }
.quad-hold strong { color: var(--text); }
.quad-note { max-width: 780px; margin: 1rem auto 0; color: var(--text-mute); font-size: .92rem; text-align: center; }
/* Muted note colour would otherwise make the link indistinguishable from the
   sentence around it, so it carries both a colour shift and an underline. */
.quad-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.quad-note a:hover { color: var(--text); }

@media (max-width: 620px) {
  /* One column below the phone-ish breakpoint: two narrow tall tiles side by
     side would squeeze the copy harder than losing the 2x2 shape costs. */
  .quad-grid { grid-template-columns: 1fr; }
  .quad-tile { min-height: 0; }
  /* Tighten the actions row so the three remaining controls still fit on the
     narrowest phones without the logo wrapping. */
  .header-actions { gap: .45rem; margin-left: .6rem; }
  .header-inner { gap: .5rem; }
  .lang-menu-btn { padding: 0 .5rem; }
  .lang-menu-btn .chev { display: none; }
  /* The wordmark is the only non-shrinkable item in the row, so at 320px it
     pushes the controls past the viewport edge and clips the last one. Letting
     it shrink keeps the bar inside the screen (WCAG 1.4.10 Reflow). It stays on
     one line and truncates rather than wrapping, which would deepen the header;
     the link keeps its aria-label, so the name is intact either way. */
  .logo { min-width: 0; }
  .logo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Below this the wordmark would truncate to a couple of characters, which reads
   worse than the mark alone. The logo link keeps its aria-label either way, so
   the accessible name survives. */
@media (max-width: 340px) {
  .logo span { display: none; }
}

/* ----- Feature grid ----- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feature-card { padding: 1.5rem; transition: transform .18s ease, border-color .2s ease, background .2s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-2); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
}
.feature-icon .icon { width: 26px; height: 26px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(124,198,255,.45)); }
.feature-card h3 { margin-bottom: .35rem; }
.feature-card p { color: var(--text-dim); margin: 0; font-size: .98rem; }

/* ----- For who ----- */
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.persona { padding: 1.5rem; }
.persona .icon { width: 30px; height: 30px; color: var(--accent-2); margin-bottom: .8rem; }
.persona h3 { font-size: 1.1rem; }
.persona p { color: var(--text-dim); font-size: .96rem; margin: 0; }

/* ----- Use cases ----- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.usecase { padding: 1.5rem; }
.usecase .icon { width: 28px; height: 28px; color: var(--accent-3); margin-bottom: .7rem; filter: drop-shadow(0 0 8px rgba(255,213,158,.4)); }
.usecase h3 { font-size: 1.12rem; }
.usecase p { color: var(--text-dim); font-size: .97rem; margin: 0; }

/* ----- How it works ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { padding: 1.7rem 1.5rem; position: relative; }
.step-number {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem;
  background: var(--grad-accent); color: #06080e;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--text-dim); margin: 0; }
.steps-more { text-align: center; margin: 1.6rem 0 0; }
.steps-more a { color: var(--accent); font-weight: 600; }

/* ----- Privacy ----- */
.privacy-block { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4vw, 3rem); }
.privacy-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.privacy-points li { display: flex; gap: .8rem; }
.privacy-points .icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; margin-top: .2rem; }
.privacy-points strong { display: block; }
.privacy-points span { color: var(--text-dim); font-size: .95rem; }
.privacy-points .privacy-closing { border-top: 1px solid var(--border); padding-top: 1rem; }

/* ----- Highlight block: one lead fact, figure first ----- */
.highlight-block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4vw, 2.8rem); }
.highlight-figure { display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center; margin: 0; }
.highlight-value { font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.03em;
  line-height: 1; background: var(--grad-accent); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.highlight-unit { color: var(--text-dim); font-size: .98rem; max-width: 22ch; }
.highlight-copy h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; }
.highlight-copy p { color: var(--text-dim); margin: 0 0 .7rem; }
.highlight-copy .ticks { margin-top: 1rem; }

/* ----- Pricing ----- */
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 820px; margin: 0 auto; }
.plan { padding: 1.8rem; position: relative; display: flex; flex-direction: column; }
.plan.featured { border-color: var(--border-strong); box-shadow: 0 0 0 1px rgba(124,198,255,.25), var(--shadow-soft); }
.plan-badge { position: absolute; top: -12px; left: 1.8rem; background: var(--grad-accent); color: #06080e; font-weight: 700; font-size: .76rem; padding: .25rem .7rem; border-radius: 999px; }
.plan h3 { font-size: 1.25rem; }
.plan .price { font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; }
.plan .price span { font-size: 1rem; font-weight: 500; color: var(--text-mute); }
.plan .tokens { color: var(--accent); font-weight: 600; margin: .2rem 0 1rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .55rem; color: var(--text-dim); font-size: .96rem; }

/* Token top-up picker: a slider over the tiers. What differs between packages is
   how long they last, so the readout shows the amount and its talk time. */
.tier-picker { max-width: 560px; margin: 0 auto; --tier-pct: 33.3%; --tier-thumb: 26px; }
.tier-readout { display: flex; flex-direction: column; align-items: center; gap: .25rem;
  min-height: 132px; justify-content: center; padding: 1.2rem 1rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; }
.tier-badge-slot { min-height: 1.15rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: transparent; }
.tier-badge-slot.is-on { background: var(--grad-accent); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.tier-amount { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.tier-time { color: var(--text-dim); font-size: .98rem; }
.tier-time strong { color: var(--accent); font-weight: 700; }
.tier-time-typical { color: var(--text-mute); font-size: .88rem; }
.tier-time-typical strong { color: var(--text-dim); font-weight: 700; }

.tier-range { -webkit-appearance: none; appearance: none; width: 100%; margin: 1.6rem 0 .5rem;
  height: 24px; background: none; cursor: pointer; }
.tier-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--tier-pct), var(--border-control) var(--tier-pct)); }
.tier-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-control); }
.tier-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.tier-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  margin-top: -10px; border-radius: 50%; background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.tier-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 3px solid var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.tier-range:focus-visible { outline: none; }
.tier-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(124, 198, 255, .45); }
.tier-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(124, 198, 255, .45); }

/* Ticks must sit exactly where the thumb stops. The thumb centre travels between
   half-a-thumb from each end, so each tick is absolutely placed at that fraction
   of the track; flex cells drifted up to 27px away from the thumb. */
.tier-ticks { list-style: none; position: relative; height: 1.2rem;
  margin: 0 calc(var(--tier-thumb, 26px) / 2); padding: 0; }
.tier-ticks li { position: absolute; top: 0; left: var(--x); transform: translateX(-50%);
  font-size: .82rem; font-weight: 600; color: var(--text-mute);
  transition: color .15s ease; white-space: nowrap; }
.tier-ticks li.is-active { color: var(--text); }
.tier-hint { text-align: center; color: var(--text-mute); font-size: .88rem; margin: 1.1rem auto 0;
  max-width: 46ch; }
.tier-cta { text-align: center; margin: 1.4rem 0 0; }
.tier-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem;
  color: var(--text-dim); text-align: center; }

@media (max-width: 560px) {
  .tier-amount { font-size: 2.1rem; }
  .tier-ticks li { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tier-ticks li { transition: none; }
}
.plan li .icon { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: .25rem; }
.plan .btn { margin-top: auto; justify-content: center; }
.pricing-note { text-align: center; color: var(--text-mute); font-size: .9rem; margin-top: 1.4rem; }

/* ----- Partners (B2B) ----- */
.partners-block { padding: clamp(1.8rem, 4vw, 3rem); text-align: center; }
.partners-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin: 1.8rem 0; text-align: left; }
.partners-points .item { padding: 1.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.partners-points h3 { font-size: 1.05rem; }
.partners-points p { color: var(--text-dim); font-size: .94rem; margin: 0 0 .4rem; }
.partners-points .item-link { color: var(--accent); font-size: .94rem; font-weight: 600; }
.partners-points .item-link:hover { text-decoration: underline; }

/* ----- Download ----- */
.download-inner { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); }
.download-inner .device { margin-bottom: 1.5rem; width: min(220px, 60%); }
.store-btns { display: flex; justify-content: center; gap: .8rem; margin: 1.2rem 0 .6rem; flex-wrap: wrap; }
.download-note { color: var(--text-mute); font-size: .9rem; }

/* ----- Footer ----- */
.site-footer { border-top: 1px solid var(--border); margin-top: 2rem; padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer-tagline { color: var(--text-mute); font-size: .92rem; max-width: 30ch; margin-top: .8rem; }
.footer-col h2 { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--text-dim); font-size: .95rem; }
.footer-col a:hover { color: var(--text); }
.footer-b2b { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  color: var(--text-mute); font-size: .92rem; }
.footer-b2b a { color: var(--accent); font-weight: 600; }
.footer-bottom { margin-top: 1.4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--text-mute); font-size: .88rem; display: flex; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; }

/* ----- Landing pages ----- */
.crumbs { color: var(--text-mute); font-size: .9rem; margin-bottom: 1.5rem; }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--text); }
.landing-hero { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 1rem; }
.landing-hero-inner { max-width: 760px; }
.landing-hero h1 { margin-top: .6rem; }
.landing-hero .lead { font-size: 1.2rem; color: var(--text-dim); max-width: 60ch; }
.landing-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.landing-list { padding: clamp(1.5rem, 4vw, 2.4rem); max-width: 820px; margin: 0 auto; }
.landing-list h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.landing-list .muted { color: var(--text-mute); margin-bottom: 1rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .6rem; color: var(--text-dim); }
.ticks li .icon { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: .25rem; }
a.card-link { color: inherit; }
a.card-link:hover { border-color: var(--border-strong); }
a.card-link::after { content: "→"; position: absolute; }
.feature-card.card-link { position: relative; padding-right: 2.4rem; }
.feature-card.card-link::after { right: 1.4rem; top: 1.5rem; color: var(--accent); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.feature-card.card-link:hover::after { opacity: 1; transform: translateX(3px); }

/* ----- Video (fasada + player, sekcja #historia i /story/) ----- */
.video-wrap { max-width: 880px; margin: 0 auto; }
.video-facade { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade .video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.video-facade .video-play:hover { transform: translate(-50%, -50%) translateY(-2px); }
.video-facade noscript video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-player { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; background: #000; }
.video-links { display: flex; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.2rem; }
.video-links a { color: var(--accent); font-weight: 600; }
.video-links a:hover { text-decoration: underline; }
.prose audio { width: 100%; margin-bottom: 1rem; }
.transcript p { margin-bottom: .6rem; }

/* ----- CTA box (ramka z linkiem, np. dofinansowanie) ----- */
.cta-box { max-width: 820px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.4rem); text-align: center; }
.cta-box h2, .cta-box h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.cta-box p { color: var(--text-dim); max-width: 60ch; margin: 0 auto 1.2rem; }
.cta-box .btn { justify-content: center; }
.pricing-funding { margin-top: 2.2rem; }

/* ----- Copy quote (gotowy akapit do skopiowania) ----- */
.copy-quote { max-width: 820px; margin: 1.2rem auto; padding: 1.3rem 1.5rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: var(--radius-sm); color: var(--text-dim); font-style: normal; }
.copy-quote p { margin: 0; }

/* ===== Hero scene v3: real 3D (Three.js canvas) ===== */
.walk3d { position: relative; width: 100%; max-width: 760px; margin: 0 auto; aspect-ratio: 5 / 4; }
.walk3d-viewport { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: var(--radius);
  /* Fade every edge so the canvas never shows a hard rectangle. One layer per axis:
     a lone radial is 115% wide, so its edges never leave the opaque core and the
     left/right sides stay hard. Intersecting explicit per-axis fades is what works. */
  -webkit-mask-image: radial-gradient(115% 100% at 50% 45%, #000 55%, transparent 88%),
                      linear-gradient(to bottom, #000 55%, transparent 92%),
                      linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: radial-gradient(115% 100% at 50% 45%, #000 55%, transparent 88%),
              linear-gradient(to bottom, #000 55%, transparent 92%),
              linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.walk3d-canvas { width: 100%; height: 100%; display: block; }
.walk3d .scene-pill { left: 0; top: 0; transform: translate(-50%, -140%); transition: opacity .4s ease; }
.walk3d .pill-walker::before { background: #6ee7a8; box-shadow: 0 0 8px #6ee7a8; }
@media (max-width: 900px) {
  /* Stacked layout: cap the scene by height (not just ratio) so the sticky block stays
     short enough that the step heading scrolling underneath it is never covered. */
  .walk3d { max-width: 340px; aspect-ratio: 1 / 1; max-height: 34dvh; margin-top: -1rem; }
  /* Soft-fade every edge so the scene melts into the page instead of a hard black box. */
  .walk3d-viewport {
    -webkit-mask-image: radial-gradient(88% 82% at 50% 44%, #000 40%, transparent 78%),
                        linear-gradient(to bottom, #000 48%, transparent 88%),
                        linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: radial-gradient(88% 82% at 50% 44%, #000 40%, transparent 78%),
                linear-gradient(to bottom, #000 48%, transparent 88%),
                linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}

/* ===== Hero scene v2: walking forward, obstacles fly toward you, phone HUD pinned ===== */
.walk-scene { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1 / 1; }
.walk-viewport { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius);
  perspective: 900px; perspective-origin: 40% 34%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.walk-world { position: absolute; inset: 0; transform-style: preserve-3d;
  /* --cam = how far the camera has walked (0..1); rotateY aims the vanishing point to upper-left */
  transform: rotateY(16deg) translateZ(calc(var(--cam, 0) * 1400px)); }

/* Ground: a receding plane with a lit walkway down the middle */
.walk-floor { position: absolute; left: 50%; bottom: -6%; width: 1400px; height: 1500px; margin-left: -700px;
  transform-origin: 50% 100%; transform: rotateX(72deg); transform-style: preserve-3d; }
.walk-floor::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(124,198,255,.3) 1.5px, transparent 2px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 100%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 70% at 50% 100%, #000 25%, transparent 72%); }
.walk-path { position: absolute; left: 46%; bottom: 8%; width: 300px; height: 1900px; margin-left: -150px;
  background: linear-gradient(to top, rgba(124,198,255,.16), rgba(124,198,255,.04) 60%, transparent 82%);
  border-left: 2px solid rgba(124,198,255,.45); border-right: 2px solid rgba(124,198,255,.45);
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 88%);
  mask-image: linear-gradient(to top, #000 40%, transparent 88%); }

/* Obstacles: positioned by --z (depth) and --x (lateral). Deeper = smaller + higher on screen. */
.walk-obj { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  transform: translate(-50%, -100%) translateX(var(--x, 0)) translateZ(calc(var(--z, 0) * -150px));
  will-change: transform; }
.walk-obj svg { display: block; }
.wobj-post svg { width: 108px; height: 135px; }
.wobj-door svg { width: 150px; height: 262px; }
.wobj-walker svg { width: 118px; height: 296px; }
.wobj-walker { filter: drop-shadow(0 0 18px rgba(205,214,234,.15)); }

.post-ring { animation: post-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 60px 140px; }
@keyframes post-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .post-ring { animation: none; } }

/* Walking-figure gait */
.walker-body { animation: walker-bob 1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes walker-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.walker-leg-l, .walker-arm-r, .walker-cane { animation: gait-a 1s ease-in-out infinite; transform-box: fill-box; }
.walker-leg-r, .walker-arm-l { animation: gait-b 1s ease-in-out infinite; transform-box: fill-box; }
.walker-leg-l { transform-origin: 60px 152px; } .walker-leg-r { transform-origin: 60px 152px; }
.walker-arm-l { transform-origin: 60px 80px; } .walker-arm-r { transform-origin: 60px 80px; }
.walker-cane { transform-origin: 84px 122px; }
.walker-cane-tip { animation: cane-sweep 1s ease-in-out infinite; transform-box: fill-box; transform-origin: 106px 290px; }
@keyframes gait-a { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes gait-b { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes cane-sweep { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

/* Phone HUD pinned bottom-right — the device you're holding */
/* Wrapper carries the bob/buzz offset (CSS vars from JS) and the 3D perspective. */
.walk-phone { position: absolute; left: 4%; bottom: 5%; width: 128px; height: 266px; z-index: 8;
  perspective: 900px; transform-origin: left bottom;
  transform: translate(calc(var(--intro-x, 0px) + var(--bob-x, 0px)), calc(var(--intro-y, 0px) + var(--bob-y, 0px))) scale(var(--intro-s, 1)); will-change: transform; }
/* Body holds the single tilt; opaque face; a left side-shadow gives it thickness. */
.walk-phone-body { position: relative; width: 100%; height: 100%; border-radius: 26px; background: #14171f;
  border: 2px solid #454b5c; padding: 6px; transform: rotateY(15deg) rotateZ(-2deg);
  box-shadow: 9px 0 0 -1px #20242f, 13px 0 22px rgba(0,0,0,.5), -22px 34px 60px rgba(0,0,0,.6); }
.walk-phone-body img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; opacity: 1; }
.walk-phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 46px; height: 13px; border-radius: 7px; background: #000; }

/* Legacy hero scene (kept for any stale refs) */
.hero-scene:not(.walk-scene) { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 560 / 600; transform-style: preserve-3d; }
.hero-scene-canvas { position: absolute; inset: 0; transform-style: preserve-3d; }
/* True CSS diorama: one coherent 3D space — a real ground plane, objects standing on it. */
.stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, 0, .2, 1); transform: translateZ(70px); }
.floor { position: absolute; left: 50%; bottom: 0; width: 1150px; height: 1150px; margin-left: -575px; transform-origin: 50% 100%; transform: rotateX(78deg); transform-style: preserve-3d; }
/* A mask on .floor itself would force-flatten its 3D children — keep the skin on a leaf pseudo. */
.floor::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(124, 198, 255, .5) 2.4px, transparent 3.2px);
  background-size: 74px 74px; background-position: 37px 20px;
  -webkit-mask-image: radial-gradient(ellipse 65% 85% at 50% 100%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 85% at 50% 100%, #000 35%, transparent 78%); }
.walkway { position: absolute; left: 50%; bottom: 0; width: 170px; height: 1150px; margin-left: -85px;
  background: linear-gradient(to top, rgba(124, 198, 255, .12), transparent 82%);
  border-left: 2px solid rgba(124, 198, 255, .45);
  border-right: 2px solid rgba(124, 198, 255, .45);
  transition: opacity .6s ease, filter .6s ease; }
.walkway::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to top, rgba(124, 198, 255, .28) 0 2.5px, transparent 2.5px 96px); }
.beam { position: absolute; left: 50%; bottom: 18%; width: 920px; height: 820px; margin-left: -460px; clip-path: polygon(50% 100%, 6% 0, 94% 0);
  background:
    repeating-radial-gradient(circle at 50% 100%, transparent 0 120px, rgba(124, 198, 255, .6) 120px 127px, transparent 127px 250px),
    linear-gradient(to top, rgba(124, 198, 255, .38), rgba(124, 198, 255, .1) 72%, rgba(124, 198, 255, .04));
  transition: opacity .6s ease, filter .6s ease; }
/* Scan wave: a pulse travelling from the phone into the field of view. */
.beam::after { content: ""; position: absolute; inset: 0; transform-origin: 50% 100%; opacity: 0;
  background: radial-gradient(circle at 50% 100%, transparent 56%, rgba(124, 198, 255, .55) 59%, transparent 64%); }
.story-journey .beam::after { animation: beam-wave 2.8s linear infinite; }
@keyframes beam-wave {
  0% { transform: scale(.12); opacity: 0; }
  12% { opacity: .9; }
  70% { opacity: .35; }
  100% { transform: scale(1.28); opacity: 0; }
}
.ring-post { position: absolute; left: 74%; top: 30%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; border: 2px dashed rgba(255, 213, 158, .6); }
.ring-post::after { content: ""; position: absolute; inset: -26%; border-radius: 50%; border: 2px dashed rgba(255, 213, 158, .32); }
.story-journey .ring-post { animation: ring-pulse 1.8s ease-in-out infinite; }
@keyframes ring-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
/* Objects stand upright on the floor: bottom-center anchored, counter-rotated. */
.up { position: absolute; translate: -50% -100%; transform-origin: 50% 100%; transform: rotateX(-78deg); }
.up svg { width: 100%; height: 100%; display: block; transition: transform .6s ease; }
.obj-door { left: 23%; top: 24%; width: 140px; height: 216px; }
.obj-post { left: 74%; top: 30%; width: 44px; height: 150px; }
/* Walking figure on the path — stands like other .up objects, animated gait */
.obj-walker { left: 48%; top: 30%; width: 68px; height: 170px; z-index: 1; }
.walker-body { animation: walker-bob 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes walker-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
.walker-leg-l { animation: walker-legl 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 60px 150px; }
.walker-leg-r { animation: walker-legr 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 60px 150px; }
@keyframes walker-legl { 0%,100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }
@keyframes walker-legr { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.walker-arm-l { animation: walker-legr 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 60px 78px; }
.walker-arm-r, .walker-cane { animation: walker-legl 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 60px 78px; }
.walker-cane { transform-origin: 82px 118px; }
.walker-cane-tip { animation: cane-sweep 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 112px 290px; }
@keyframes cane-sweep { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) {
  .walker-body, .walker-leg-l, .walker-leg-r, .walker-arm-l, .walker-arm-r, .walker-cane, .walker-cane-tip { animation: none; }
}

.obj-phone { left: 50%; top: 90%; width: 160px; height: 330px; transform: rotateX(-72deg) rotateY(-9deg); transform-style: preserve-3d; }
.phone3d { position: relative; width: 100%; height: 100%; border-radius: 30px; background: #14171f; border: 2px solid #454b5c; padding: 6px; transform-style: preserve-3d; box-shadow: 0 44px 70px rgba(0, 0, 0, .6); }
/* Extruded body gives the phone real thickness in the diorama */
/* Side wall visible at this laid-back angle: a darker shell peeking below + right of the face. */
.phone3d::before { content: ""; position: absolute; inset: -3px -3px -14px -3px; border-radius: 32px;
  background: linear-gradient(160deg, #3a4152 0%, #12151d 55%, #05060a 100%); transform: translateZ(-20px); z-index: -1; }
.phone3d img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }
.phone3d::after { content: ""; position: absolute; top: 12px; left: 50%; translate: -50%; width: 52px; height: 14px; border-radius: 8px; background: #000; }
.scene-pill { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .75rem; font-size: .84rem; font-weight: 600; color: var(--text); white-space: nowrap; background: rgba(10, 13, 22, .78); border: 1px solid var(--border-strong); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-soft); pointer-events: none; }
.scene-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.pill-door::before { background: #b58cff; box-shadow: 0 0 8px #b58cff; }

.pill-walker::before { background: #cdd6ea; box-shadow: 0 0 8px #cdd6ea; }

.pill-post::before { background: #ffd59e; box-shadow: 0 0 8px #ffd59e; }
/* Phone hotspot → screen guide; the chip shows on hover/focus */
/* One-shot scene motion (finite — WCAG 2.2.2 safe) */
.scan-sweep { opacity: 0; transform-box: view-box; transform-origin: 280px 415px; }
.story-journey .scan-sweep { animation: scan-sweep 2.6s ease-out .4s infinite; }
@keyframes scan-sweep {
  0% { opacity: 0; transform: scale(.15); }
  12% { opacity: .75; }
  100% { opacity: 0; transform: scale(1.22); }
}
.prox-ring { transform-box: view-box; transform-origin: 402px 402px; }
.story-journey .prox-ring { animation: prox-pulse 1.6s ease-in-out 2s infinite; }
.story-journey .prox-ring + .prox-ring { animation-delay: 2.4s; }
@keyframes prox-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}
/* Pills are driven by the journey's data-scene state (cumulative, current one full). */
.scene-pill { opacity: 0; transition: opacity .5s ease; }
[data-passed~="post"] .pill-post,
[data-passed~="door"] .pill-door,
[data-passed~="walker"] .pill-walker { opacity: 1; }
@media (max-width: 920px) { .scene-pill { font-size: .74rem; padding: .34rem .6rem; } }
@media (prefers-reduced-motion: reduce) {
  .scene-pill { opacity: 1; transition: none; }
  .scan-sweep { animation: none; opacity: 0; }
  .prox-ring { animation: none; }
  .story-journey .scene-3d { transition: none; transform: none !important; }
  .scene-tilt { transform: none !important; }
  .scene-layer { transform: none !important; }
  .scene-pill { transform: translate(-50%, -50%); }
  .story-journey .sc-door, .story-journey .sc-post, .story-journey .sc-path { transform: none !important; }
  [data-scene="post"] .phone3d { animation: none; }
  .ring-post { animation: none; }
  .beam::after { animation: none; }
  .anim-grid circle, .anim-tokens circle, .anim-eq rect { animation: none; }
}

/* ----- Scroll story (journey) ----- */
/* Scene column gets the larger share: the 3D view needs width to show the path ahead. */
.journey-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.journey-flow { grid-column: 1; grid-row: 1; }
.journey-grid > .journey-sticky { grid-column: 2; grid-row: 1; }
.journey-sticky { position: sticky; top: 90px; perspective: 750px; }
.scene-tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.scene-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.journey-flow .hero-copy { margin-bottom: clamp(3rem, 8vh, 6rem); }
.j-step { min-height: min(58vh, 30rem); display: flex; flex-direction: column; justify-content: center; max-width: 46ch; }
.j-step h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.j-step p { color: var(--text-dim); line-height: 1.75; }
.j-quote { quotes: "„" "\201D"; display: block; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 600; color: var(--text); margin: .3rem 0 .9rem; line-height: 1.35; }
html[lang="en"] .j-quote { quotes: "\201C" "\201D"; }

/* Scene reacts to the active step (parent .journey-sticky provides the perspective) */
.story-journey .scene-3d { transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.story-journey .sc-door, .story-journey .sc-post, .story-journey .sc-path { transition: opacity .6s ease, filter .6s ease; }
.story-journey .obj-phone { transition: opacity .8s ease, transform .9s cubic-bezier(.4, 0, .2, 1); }
/* We pass behind the phone: it swells and fades, the world takes over; it returns at the close. */
[data-scene="post"] .obj-phone, [data-scene="door"] .obj-phone, [data-scene="path"] .obj-phone, [data-scene="find"] .obj-phone { opacity: 0; transform: rotateX(-72deg) rotateY(-9deg) scale(1.45) translateY(26px); }
[data-scene="post"] .stage { transform: rotateY(-10deg) translateZ(175px); }
[data-scene="door"] .stage { transform: rotateY(10deg) translateZ(175px); }
[data-scene="path"] .stage { transform: rotateX(6deg) translateZ(165px); }
[data-scene="find"] .stage { transform: rotateY(-4deg) translateZ(195px); }
[data-scene="post"] .scene-3d { transform: rotateY(-20deg) rotateX(4deg) scale(1.16) translateX(-5%); }
[data-scene="door"] .scene-3d { transform: rotateY(20deg) rotateX(4deg) scale(1.16) translateX(6%); }
[data-scene="path"] .scene-3d { transform: rotateX(16deg) scale(1.1) translateY(3%); }
[data-scene="find"] .scene-3d { transform: rotateX(6deg) rotateY(-8deg) scale(1.08); }
[data-scene="close"] .scene-3d { transform: rotateX(3deg); }
[data-scene="post"] .sc-post svg { transform: scale(1.18); }
[data-scene="door"] .sc-door svg { transform: scale(1.16); }
[data-scene="path"] .sc-path { filter: brightness(1.5); }
[data-scene="post"] .sc-post { filter: drop-shadow(0 0 12px rgba(255, 213, 158, .8)); }
[data-scene="post"] .sc-door, [data-scene="post"] .sc-path { opacity: .3; }
[data-scene="post"] .phone3d { animation: phone-shake .5s ease-in-out 3; }
[data-scene="door"] .sc-door { filter: drop-shadow(0 0 12px rgba(181, 140, 255, .8)); }
[data-scene="door"] .sc-post, [data-scene="door"] .sc-path { opacity: .3; }
[data-scene="path"] .sc-path { filter: drop-shadow(0 0 10px rgba(124, 198, 255, .7)); }
[data-scene="path"] .sc-door, [data-scene="path"] .sc-post { opacity: .3; }
[data-scene="find"] .sc-cone { filter: brightness(1.6); }
[data-scene="find"] .sc-door, [data-scene="find"] .sc-post { opacity: .45; }
@keyframes phone-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-2.5px); }
  40% { transform: translateX(2.5px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
/* Pills: cumulative reveal, current step's pill full, earlier ones dimmed */
[data-scene="post"] .pill-post { opacity: 1; }
[data-scene="door"] .pill-door { opacity: 1; }
[data-scene="door"] .pill-post { opacity: .55; }
[data-scene="path"] .pill-path { opacity: 1; }
[data-scene="path"] .pill-post, [data-scene="path"] .pill-door { opacity: .55; }
[data-scene="find"] .scene-pill, [data-scene="close"] .scene-pill { opacity: 1; }
@media (max-width: 920px) {
  .journey-grid { display: block; }
  .journey-sticky { position: sticky; top: 60px; z-index: 5; padding: .4rem 0 .8rem; background: linear-gradient(180deg, var(--bg) 82%, transparent); }
  .journey-sticky .hero-scene { max-width: 300px; }
  /* dvh (not vh) so step height tracks the *visible* viewport — the URL bar no longer hides
     mid-scroll and makes the scroll-driven animation jump. */
  .j-step { min-height: 44dvh; }
}

/* ----- Problem / scenes ----- */
.scene-block { max-width: 820px; margin: 0 auto; }
.scene-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 1.1rem; }
.scene-lead { color: var(--text-dim); font-size: clamp(1.02rem, 1.6vw, 1.14rem); line-height: 1.75; margin-bottom: 1rem; }
.scene-list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.scene-list li { background: var(--bg-2); padding: 1.15rem 1.35rem; display: grid; gap: .3rem; }
.scene-list strong { color: var(--text); font-size: 1.02rem; }
.scene-list span { color: var(--text-dim); line-height: 1.65; }
.scene-close { margin-top: 1.8rem; padding-left: 1.2rem; border-left: 3px solid var(--accent); color: var(--text); font-size: clamp(1.05rem, 1.8vw, 1.2rem); line-height: 1.7; }

/* ----- Product voice: live message feed ----- */
.voice-block { max-width: 820px; margin: 0 auto; text-align: center; }
.voice-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .4rem 0 .8rem; }
.voice-intro { color: var(--text-dim); margin-bottom: 2.2rem; }
.voice-feed { max-width: 640px; margin: 0 auto; padding: 1.1rem 1.2rem 1.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: left; }
.voice-feed-head { display: flex; align-items: center; gap: .55rem; padding: .15rem .3rem .85rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); color: var(--text-mute); font-size: .88rem; letter-spacing: .02em; }
.voice-feed-head strong { color: var(--text-dim); }
.voice-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.voice-lines li { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); border-bottom-left-radius: 6px; }
.voice-lines q { quotes: "„" "\201D"; color: var(--text); font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 600; line-height: 1.4; }
html[lang="en"] .voice-lines q { quotes: "\201C" "\201D"; }
.voice-wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; flex: 0 0 auto; }
.voice-wave i { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); }
.voice-note { margin-top: 1.8rem; color: var(--text-mute); font-size: .95rem; }

/* Messages arrive one by one; bars pulse like speech. Motion only — text is always in the DOM. */
.voice-lines li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.is-visible .voice-lines li { opacity: 1; transform: none; }
.is-visible .voice-lines li:nth-child(1) { transition-delay: .2s; }
.is-visible .voice-lines li:nth-child(2) { transition-delay: .9s; }
.is-visible .voice-lines li:nth-child(3) { transition-delay: 1.6s; }
.is-visible .voice-lines li:nth-child(4) { transition-delay: 2.3s; }
/* Finite run (<5s total) keeps WCAG 2.2.2 satisfied without a pause control. */
.is-visible .voice-wave i { animation: voice-wave 1.15s ease-in-out 3; }
.is-visible .voice-wave i:nth-child(2) { animation-delay: .18s; }
.is-visible .voice-wave i:nth-child(3) { animation-delay: .36s; }
@keyframes voice-wave {
  0%, 100% { height: 6px; opacity: .65; }
  50% { height: 17px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-lines li { opacity: 1; transform: none; transition: none; }
  .voice-wave i { animation: none; }
}

/* ----- Home: featured features subset ----- */
.feature-when { margin-top: .7rem; font-size: .92rem; color: var(--text-mute); line-height: 1.6; }
.feature-when strong { color: var(--accent); font-weight: 600; }
/* "See all" card: same tile shell, accent-tinted, with a link affordance. */
.card-more { color: inherit; border-color: var(--border-strong);
  background: linear-gradient(150deg, rgba(124, 198, 255, .1), rgba(181, 140, 255, .07)); }
.card-more:hover { border-color: var(--accent); transform: translateY(-3px); }
.card-more h3 { color: var(--text); }
.card-more-cta { margin-top: auto; padding-top: .6rem; color: var(--accent); font-weight: 600; }
.usecase.card-more { display: flex; flex-direction: column; }
.why-cta { margin-top: 1.6rem; }

/* ----- Technology page: 3D phone at the centre, pipeline orbits it ----- */
.tech-hero { padding-bottom: 1rem; }
.tech-pipe { position: relative; }
.tech-pipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tech-pipe-flow { order: 1; }
.tech-pipe-stage { order: 2; }
.pipe-step { min-height: min(150vh, 60rem); display: flex; flex-direction: column; justify-content: center; max-width: 34rem; }
.pipe-step:last-child { min-height: min(120vh, 48rem); }
.pipe-step .tech-step { display: inline-block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1;
  background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.pipe-step .eyebrow { display: block; color: var(--accent); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; margin: .5rem 0 .35rem; }
.pipe-step h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .9rem; }
.pipe-step > p { color: var(--text-dim); font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.75; margin-bottom: 1.1rem; }
.tech-quote { quotes: "\201E" "\201D"; display: block; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--text); margin-bottom: .8rem; line-height: 1.4; }
html[lang="en"] .tech-quote { quotes: "\201C" "\201D"; }
.tech-chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.tech-chips li { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--text); border: 1px solid var(--border-strong); background: var(--surface-2); border-radius: 999px; padding: .34rem .8rem; }
.tech-chips .icon { width: 15px; height: 15px; color: var(--accent); }

/* Sticky 3D scene */
.tech-pipe-stage { position: sticky; top: 0; height: min(100vh, 44rem); display: flex; align-items: center; justify-content: center; }
.pipe-scene { position: relative; width: min(100%, 560px); aspect-ratio: 1; perspective: 1100px; transform-style: preserve-3d; }
.pipe-tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transition: transform .3s ease-out; }

/* The phone: real screenshot, 3D frame, sits dead centre */
.pipe-phone { position: absolute; left: 50%; top: 50%; width: 172px; height: 356px; margin: -178px 0 0 -86px; transform-style: preserve-3d; transform: rotateY(-22deg); z-index: 3; }
/* Extruded side gives real thickness in 3D */
.pipe-phone::before { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(90deg, #05060a, #2b3145 100%); transform: translateZ(-22px); z-index: -1; box-shadow: -14px 0 26px rgba(0,0,0,.55); }
.pipe-phone-body { position: relative; width: 100%; height: 100%; border-radius: 30px; background: #14171f; border: 2px solid #454b5c; padding: 7px; transform-style: preserve-3d; transform: translateZ(1px); z-index: 2; box-shadow: 0 50px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05) inset; }
/* Specular edge highlight on the tilted face */
.pipe-phone-body::after { content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 40%); }
.pipe-phone-body img { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; display: block; }
.pipe-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 58px; height: 16px; border-radius: 9px; background: #000; }
.pipe-phone-glow { position: absolute; inset: -40% -30%; z-index: -1; border-radius: 50%; transition: background .8s ease;
  background: radial-gradient(circle, rgba(124,198,255,.22), transparent 60%); }
[data-stage="analyze"] .pipe-phone-glow { background: radial-gradient(circle, rgba(181,140,255,.24), transparent 60%); }
[data-stage="send"] .pipe-phone-glow { background: radial-gradient(circle, rgba(181,140,255,.26), transparent 60%); }
[data-stage="respond"] .pipe-phone-glow { background: radial-gradient(circle, rgba(255,213,158,.22), transparent 60%); }

/* Orbits: one SVG layer per stage, shown only when its stage is active */
.orbit { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.92); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); z-index: 4; transform-style: preserve-3d; }
/* Cloud/uplink and haptic rings read as being AROUND the phone, not hidden flat behind it */
.orbit-svg { transform-style: preserve-3d; }
.orbit-svg { width: 100%; height: 100%; display: block; overflow: visible; }
[data-stage="capture"] .orbit-capture,
[data-stage="analyze"] .orbit-analyze,
[data-stage="send"] .orbit-send,
[data-stage="respond"] .orbit-respond { opacity: 1; transform: translateY(0) scale(1); }
/* Capture (LiDAR grid) and respond (voice/haptics) sit BEHIND the phone — they emanate
   from where it looks, not in front of the screen. */
.orbit-capture, .orbit-respond { z-index: 1; }
.orbit-analyze, .orbit-send { z-index: 4; }
/* Haptic rings wrap in front too, so the phone sits inside them */

/* Progress dots */
.pipe-dots { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.pipe-dots li { width: 9px; height: 9px; border-radius: 50%; background: var(--border-control); transition: background .4s ease, transform .4s ease; }
[data-stage="capture"] [data-dot="capture"],
[data-stage="analyze"] [data-dot="analyze"],
[data-stage="send"] [data-dot="send"],
[data-stage="respond"] [data-dot="respond"] { background: var(--accent); transform: scale(1.5); }

/* Per-stage animations, active only on the visible orbit */
[data-stage="capture"] .pc-dots circle { animation: pc-grid 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 55ms); transform-box: fill-box; transform-origin: center; }
@keyframes pc-grid { 0%,100% { opacity: .25; transform: translateY(0) scale(.85); } 45% { opacity: 1; transform: translateY(calc(var(--h, 0) * -3px)) scale(1); } }
[data-stage="analyze"] .pc-scanbox { animation: pc-scan 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pc-scan { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
[data-stage="analyze"] .pc-feats path { animation: pc-feat 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 180ms); transform-box: fill-box; transform-origin: center; }
@keyframes pc-feat { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
[data-stage="analyze"] .pc-tag { animation: pc-pop 3s ease-in-out infinite; animation-delay: calc(var(--i) * 500ms); transform-box: fill-box; transform-origin: center; }
@keyframes pc-pop { 0%,100% { opacity: .55; } 45% { opacity: 1; } }
[data-stage="send"] .pc-lock { animation: pc-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pc-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
[data-stage="respond"] .pc-voice rect { animation: pc-eq 1.05s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); transform-box: fill-box; transform-origin: center; }
@keyframes pc-eq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1.25); } }
[data-stage="respond"] .pc-haptic circle { animation: pc-ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: 262px 260px; animation-delay: calc(var(--i) * 1.2s); }
@keyframes pc-ring { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } }

@media (max-width: 900px) {
  .tech-pipe-grid { grid-template-columns: 1fr; gap: 0; }
  .tech-pipe-stage { position: sticky; top: 58px; height: 52vh; order: -1; z-index: 5;
    background: linear-gradient(180deg, var(--bg) 78%, transparent); }
  .pipe-scene { width: min(92%, 420px); }
  .pipe-step { min-height: 100vh; padding-top: 1rem; }
  .pipe-dots { right: 4px; }
  /* Smaller phone leaves room for the orbit visuals around it, not on top of it */
  .pipe-phone { width: 116px; height: 240px; margin: -120px 0 0 -58px; }
  /* Deeper Z push so behind-phone layers clearly clear the screenshot at this scale */
  .orbit-capture .orbit-svg { transform: translateZ(-160px); }
  .orbit-respond .orbit-svg { transform: translateZ(-50px); }
  .orbit-analyze .orbit-svg, .orbit-send .orbit-svg { transform: translateZ(70px); }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-tilt { transition: none; }
  .orbit [class^="pc-"], .orbit [class^="pc-"] * { animation: none !important; }
  .pc-packet { display: none; }
}


/* ----- Vision ----- */
.vision-block { max-width: 760px; margin: 0 auto; text-align: center; }
.vision-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: .4rem 0 1rem; }
.vision-block p { color: var(--text-dim); line-height: 1.75; }
.vision-kicker { margin-top: 1.4rem; font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 600; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Gradient text disappears when the system overrides colours — keep the words visible. */
@media (forced-colors: active) {
  .hero h1 .grad,
  .vision-kicker { background: none; color: CanvasText; }
}

/* ----- FAQ ----- */
.faq { max-width: 820px; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: 1.5rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.3rem; margin-bottom: .8rem; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--text-dim); margin: .8rem 0 0; }

/* ----- Prose (legal / long-form) ----- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { margin-bottom: .3rem; }
.prose .updated { color: var(--text-mute); margin-bottom: 2rem; }
.prose section { margin-bottom: 1.8rem; }
.prose h2 { font-size: 1.25rem; margin-bottom: .5rem; }
/* Sub-sections inside a numbered clause (2.1, 2.2). Smaller than the h2 above
   them so the hierarchy is visible, and spaced away from the preceding text. */
.prose h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.prose p { color: var(--text-dim); white-space: pre-line; }
.prose a { color: var(--accent); text-decoration: underline; }

/* ----- Explainer (sticky scrollytelling) ----- */
.explainer-intro { text-align: center; max-width: 760px; margin: 0 auto clamp(1rem, 3vw, 2rem); }
.explainer-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.explainer-sticky { position: sticky; top: 90px; align-self: start; }
.device-screen { position: relative; border-radius: 36px; overflow: hidden; }
.device-screen img { width: 100%; display: block; transition: filter .4s ease; }
.quads { position: absolute; inset: 0; pointer-events: none; }
.quad {
  position: absolute; width: 43%; height: 43.5%; border-radius: 20px;
  background: transparent; pointer-events: auto; cursor: pointer; z-index: 1;
  transition: box-shadow .4s ease, transform .4s ease;
}
.quad.q1 { top: 8.0%; left: 4.5%; }
.quad.q2 { top: 8.0%; right: 4.5%; }
.quad.q3 { bottom: 2.6%; left: 4.5%; }
.quad.q4 { bottom: 2.6%; right: 4.5%; }
.quad:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.quad:hover:not(.is-active) { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
/* Per-button accent colours (match the in-app button gradients) */
@property --ex-accent { syntax: "<color>"; inherits: true; initial-value: #7cc6ff; }
.explainer-page { transition: --ex-accent .5s ease; }
.quad.q1 { --qc: #7cc6ff; }  /* vibration — blue */
.quad.q2 { --qc: #b58cff; }  /* AI auto — purple */
.quad.q3 { --qc: #6ee7a8; }  /* extended/recording — green */
.quad.q4 { --qc: #ffcf72; }  /* skip — yellow */

/* Active = spotlight: a huge spread shadow darkens everything except this quad (clipped by .device-screen overflow) */
.quad.is-active {
  z-index: 2; transform: scale(1.03);
  box-shadow: 0 0 0 4px var(--qc, var(--accent)), 0 0 34px 8px color-mix(in srgb, var(--qc, var(--accent)) 65%, transparent), 0 0 0 9999px rgba(3, 4, 8, 0.82);
  animation: quadPulse 2.4s ease-in-out infinite;
}
@keyframes quadPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--qc, var(--accent)), 0 0 22px 4px color-mix(in srgb, var(--qc, var(--accent)) 50%, transparent), 0 0 0 9999px rgba(3, 4, 8, 0.82); }
  50% { box-shadow: 0 0 0 5px var(--qc, var(--accent)), 0 0 46px 12px color-mix(in srgb, var(--qc, var(--accent)) 85%, transparent), 0 0 0 9999px rgba(3, 4, 8, 0.82); }
}

/* Full-screen background tint that follows the active button's colour */
.explainer-page::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--ex-accent) 46%, transparent), transparent 78%),
    radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--ex-accent) 14%, transparent), transparent 90%);
  opacity: 0; transition: opacity .6s ease;
}
.explainer-page.tint-on::after { opacity: 1; }
/* Centred step's icon adopts the active colour too */
.explainer-page .ex-icon .icon { color: var(--ex-accent); }
.explainer-steps { display: flex; flex-direction: column; }
.ex-step { min-height: min(78vh, 34rem); display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.ex-step:first-child { min-height: min(40vh, 18rem); }
.ex-step .ex-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 15px; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 1rem; }
.ex-step .ex-icon .icon { width: 26px; height: 26px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(124,198,255,.45)); }
.ex-step h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
/* The four button sections are siblings of the intro, not children of it, so
   they are h2 as well; they keep the smaller size they had as h3. */
.ex-step[data-quad]:not([data-quad="0"]) h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ex-step .ex-lead { color: var(--text-dim); font-size: 1.1rem; }
.ex-actions { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .9rem; }
.ex-actions li { display: flex; gap: .8rem; }
.ex-actions .tag {
  flex: 0 0 auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .3rem .6rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); height: fit-content; min-width: 96px; text-align: center;
}
.ex-actions .tag.purpose { color: var(--accent-3); }
.ex-actions p { margin: 0; color: var(--text-dim); }
.ex-actions strong { color: var(--text); }

/* Gentle pull-to-center: snaps only when you stop near a step, never fights scrolling */
html:has(body.explainer-page) { scroll-snap-type: y proximity; scroll-padding-top: 80px; }
body.explainer-page .ex-step { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.explainer-page) { scroll-snap-type: none; }
}

@media (max-width: 900px) {
  .explainer-grid { grid-template-columns: 1fr; }
  .explainer-sticky { position: sticky; top: 64px; width: 168px; margin: 0 auto; z-index: 5; }
  /* Slim the mock-up frame down at this size — 10px padding + 44px radius reads as a chunky
     case when the screen itself is only ~110px wide. */
  .explainer-sticky .device { padding: 5px; border-radius: 26px; }
  .explainer-sticky .device-screen, .explainer-sticky .device img { border-radius: 21px; }
  .ex-step { min-height: 60vh; text-align: center; }
  .ex-actions li { text-align: left; }
  body.explainer-page .ex-step { scroll-snap-align: none; }
}

/* ----- Reveal animation ----- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ----- Responsive ----- */
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero .device { order: -1; }
  .features-grid, .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-grid, .values { grid-template-columns: repeat(2, 1fr); }
  .steps, .privacy-block, .pricing-grid, .partners-points { grid-template-columns: 1fr; }
  .highlight-block { grid-template-columns: 1fr; text-align: center; }
  .highlight-copy .ticks li { text-align: left; }
}
@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .features-grid, .usecase-grid, .persona-grid, .values { grid-template-columns: 1fr; }
  .header-actions .btn { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ----- High contrast / motion preferences ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
  :root { --text-dim: #e7ebf5; --text-mute: #cfd5e6; --border: rgba(255,255,255,.3); }
  .glass, .feature-card, .persona, .usecase, .plan { background: #0b0f1a; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ----- Contact form ----- */
.contact-block { max-width: 640px; margin: 0 auto; padding: clamp(1.6rem, 4vw, 2.6rem); }
.contact-block .section-head { margin-bottom: 1.6rem; }
.contact-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border-control); border-radius: 10px; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: #ff8f8f; }
.field-hint { font-size: .82rem; color: var(--text-mute); }
/* Empty until JS fills it, so it takes no space while the field is valid. */
.field-err:not(:empty) { font-size: .84rem; color: #ff8f8f; }
.contact-submit { justify-content: center; margin-top: .2rem; }
.contact-status:not(:empty) { margin: .2rem 0 0; font-size: .92rem; }
.contact-status.is-ok { color: #6ee7a8; }
.contact-status.is-err { color: #ff8f8f; }
.contact-error:not(:empty) { margin: .2rem 0 0; font-size: .92rem; color: #ff8f8f; }
/* Honeypot: off-screen rather than display:none, which some bots detect and skip.
   It stays focusable-free via tabindex="-1" and hidden from assistive tech via
   aria-hidden, so no keyboard or screen-reader user ever reaches it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-fallback { text-align: center; margin: 1.2rem 0 0; font-size: .9rem; color: var(--text-mute); }
.contact-fallback a { color: var(--accent); }

/* Zrzut okna aplikacji. Ramka i cień, żeby na ciemnym tle było widać, gdzie
   kończy się okno, a zaczyna strona — bez tego zlewa się w jedną plamę. */
.shot { margin: 40px auto 0; max-width: 1000px; }
.shot img { width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.shot figcaption { margin-top: 16px; text-align: center;
  color: var(--text-muted, #8a92a8); font-size: .95rem; }