/* ==========================================================================
   TinyComp — Landing Page Styles
   Design: full-viewport compositions, bold Archivo display type, acid-lime
   accent, tokenized light & dark themes. No cards. Every container is
   an explicit flex/grid layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --fs-eyebrow: clamp(0.72rem, 0.65rem + 0.35vw, 0.9rem);
  --fs-body: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  --fs-body-lg: clamp(16px, 1vw, 20px);
  --fs-h3: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  --fs-section: clamp(2rem, 1.4rem + 5.5vw, 7rem);
  --fs-claim: clamp(1.9rem, 1.2rem + 3.6vw, 5.4rem);
  --fs-hero: clamp(3.2rem, 1.4rem + 6.5vw, 8.5rem);
  --fs-cta: clamp(3.6rem, 1.6rem + 12vw, 12.5rem);
  --fs-format: clamp(1.4rem, 1rem + 2vw, 2.6rem);

  /* Space */
  --space-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --space-section: clamp(4.5rem, 10vh, 9rem);
  --header-h: clamp(4.25rem, 8vh, 5.25rem);

  /* Shape */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-pill: 999px;

  /* Fixed placeholder greys (identical in both themes by design) */
  --ph-bg: #dfdfda;
  --ph-fg: #8b8b84;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.6s;
}

:root[data-theme="light"] {
  --c-base: #f2f2ec;
  --c-alt: #ffffff;
  --c-invert: #12140c;
  --c-accent: #FF453A;

  --c-text: #14160e;
  --c-text-muted: rgba(20, 22, 14, 0.62);
  --c-text-invert: #f2f2ec;
  --c-text-invert-muted: rgba(242, 242, 236, 0.62);
  --c-on-accent: #ffffff;

  --c-line: rgba(20, 22, 14, 0.14);
  --c-line-invert: rgba(242, 242, 236, 0.18);
  /* white, not the dark tone used in dark mode — light mode's accent
     surface is red, and a dark border on red is nearly invisible */
  --c-line-accent: rgba(255, 255, 255, 0.4);

  --c-header-bg: rgba(255, 255, 255, 0.82);
  --c-chip-bg: rgba(255, 255, 255, 0.9);
  --c-shadow: rgba(18, 20, 12, 0.16);
}

:root[data-theme="dark"] {
  --c-base: #15180d;
  --c-alt: #222222;
  --c-invert: #e9ecdc;
  --c-accent: #d4ff4f;

  --c-text: #eef0e4;
  --c-text-muted: rgba(238, 240, 228, 0.6);
  --c-text-invert: #12140c;
  --c-text-invert-muted: rgba(18, 20, 12, 0.62);
  --c-on-accent: #14160e;

  --c-line: rgba(238, 240, 228, 0.14);
  --c-line-invert: rgba(18, 20, 12, 0.18);
  --c-line-accent: rgba(20, 22, 14, 0.22);

  --c-header-bg: rgba(34, 34, 34, 0.78);
  --c-chip-bg: rgba(34, 34, 34, 0.88);
  --c-shadow: rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  /* matches the shared section grey (--c-alt), not the older --c-base tone —
     visible during iOS overscroll bounce and in any gap between sections */
  background-color: var(--c-alt);
  overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.menu-locked {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Smooth-scroll structural wrappers (ScrollSmoother) */
#smooth-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#smooth-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Block-formatting-context parent for pinned sections — ScrollTrigger's
   pin spacer cannot reserve space inside a flex/grid parent */
.pin-wrap {
  display: flow-root;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Shared section shells & themed surfaces
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100svh;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.bg-base {
  background-color: var(--c-base);
  color: var(--c-text);
}

.bg-alt {
  background-color: var(--c-alt);
  color: var(--c-text);
}

.bg-invert {
  background-color: var(--c-invert);
  color: var(--c-text-invert);
}

.bg-accent {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Marked word — a background highlight behind a word or phrase, like a
   selection, used inside titles to call out a specific word. */
.mark {
  background: var(--c-accent);
  /* matches the shared section grey (--c-alt) rather than a generic
     on-accent color, so marked words read as "cut out" of the surrounding
     surface instead of using an unrelated tone. */
  color: var(--c-alt);
  padding: 0.03em 0.26em;
  /* negative margin offsets the padding so the highlighted word doesn't
     visibly push its neighbors further away than normal word spacing —
     real padding (not box-shadow) so it stays evenly spaced from the next
     character even when there's no whitespace there (e.g. "Mac.") */
  margin: 0 -0.1em;
  border-radius: 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* bg-invert doesn't need an override — its surface isn't accent-colored,
   so the default accent-bg/grey-text mark reads consistently there too.
   bg-accent sections (CTA) still need to flip, since a same-colored mark
   would vanish against the section's own accent background. */
.bg-accent .mark {
  background: var(--c-on-accent);
  color: var(--c-accent);
}

/* When a mark is immediately followed by punctuation (no space, e.g.
   "Mac."), the default negative margin pulls the period in too close —
   this widens just the trailing gap for that case. */
.mark-pre-punct {
  margin-right: 0.08em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}

.eyebrow-dot {
  display: inline-flex;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.bg-accent .eyebrow-dot,
.bg-invert .eyebrow-dot {
  background: currentColor;
}

/* --------------------------------------------------------------------------
   4. Image placeholders (always light grey, centered "IMG")
   -------------------------------------------------------------------------- */

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ph-bg);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.img-placeholder-label {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ph-fg);
}

.theme-shot {
  width: 100%;
  height: auto;
  display: block;
}

:root[data-theme="dark"] .theme-shot-light { display: none; }
:root[data-theme="light"] .theme-shot-dark { display: none; }

/* --------------------------------------------------------------------------
   5. Buttons — swipe-fill + label-slide hover
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* fill layer that swipes up on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1);
}

/* label slides out, duplicate slides in from below */
.btn-label {
  display: inline-flex;
  overflow: hidden;
  line-height: 1.4;
}

.btn-label-inner {
  position: relative;
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}

.btn-label-inner::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
}

.btn:hover .btn-label-inner,
.btn:focus-visible .btn-label-inner {
  transform: translateY(-100%);
}

.btn:hover .btn-icon,
.btn:focus-visible .btn-icon {
  transform: translate(2px, 0) rotate(0.001deg);
}

.btn:active {
  transform: scale(0.97);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s var(--ease-out);
}

.btn-icon svg {
  width: 1.1em;
  height: 1.1em;
}

/* Primary: accent surface, fills to invert */
.btn-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}

.btn-primary::before {
  background: var(--c-invert);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--c-text-invert);
  border-color: var(--c-invert);
}

/* Ghost: outline, fills to text color */
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: var(--c-line);
}

.btn-ghost::before {
  background: var(--c-text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--c-base);
  border-color: var(--c-text);
}

/* Invert: dark pill on accent surfaces, fills to base */
.btn-invert {
  background: var(--c-invert);
  color: var(--c-text-invert);
  border-color: var(--c-invert);
}

.btn-invert::before {
  background: var(--c-base);
}

.btn-invert:hover,
.btn-invert:focus-visible {
  color: var(--c-text);
}

/* In dark mode, --c-invert flips light (by design, for bg-invert sections) —
   but on the accent-colored CTA it needs to stay a dark pill, with the icon
   picking up the accent color instead of blending into the dark fill. */
:root[data-theme="dark"] .cta .btn-invert {
  background: var(--c-base);
  color: var(--c-text);
  border-color: var(--c-base);
}

:root[data-theme="dark"] .cta .btn-invert .btn-icon {
  color: var(--c-accent);
}

:root[data-theme="dark"] .cta .btn-invert::before {
  background: var(--c-invert);
}

:root[data-theme="dark"] .cta .btn-invert:hover,
:root[data-theme="dark"] .cta .btn-invert:focus-visible {
  color: var(--c-text-invert);
}

:root[data-theme="dark"] .cta .btn-invert:hover .btn-icon,
:root[data-theme="dark"] .cta .btn-invert:focus-visible .btn-icon {
  color: var(--c-text-invert);
}

.btn-small {
  padding: 0.65em 1.4em;
}

.btn-big {
  padding: 1.15em 2.6em;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   5b. Custom cursor (desktop, fine-pointer only — native cursor stays on
   touch/coarse-pointer devices)
   -------------------------------------------------------------------------- */

.custom-cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }

  .custom-cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    /* difference blend keeps the cursor visible against any background —
       header, images, accent-colored sections — by inverting whatever is
       underneath it, instead of a fixed color that can wash out. */
    mix-blend-mode: difference;
    transition: opacity 0.25s ease;
  }

  .custom-cursor.is-visible {
    opacity: 1;
  }

  /* GSAP quickTo owns x/y translation on these -pos wrappers only — it
     takes over an element's whole transform (including the standalone
     scale/rotate properties) every animated frame, which was silently
     fighting the CSS hover-scale below when both lived on the same node. */
  .custom-cursor-dot-pos,
  .custom-cursor-ring-pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }

  .custom-cursor-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    scale: 1;
    transition: scale 0.2s var(--ease-out);
  }

  .custom-cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    opacity: 0.6;
    scale: 1;
    transition: scale 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
  }

  .custom-cursor.is-active .custom-cursor-ring {
    scale: 1.7;
    opacity: 0.9;
  }

  .custom-cursor.is-active .custom-cursor-dot {
    scale: 0;
  }
}

/* --------------------------------------------------------------------------
   6. Splash screen
   -------------------------------------------------------------------------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--c-accent);
  color: var(--c-on-accent);
  overflow: hidden;
  /* CSS-only fallback: if JS never runs, the splash removes itself */
  animation: splash-autohide 0.6s ease 3.4s forwards;
}

.splash.is-done {
  display: none;
}

@keyframes splash-autohide {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.splash-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  width: min(90vw, 34rem);
}

.splash-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.splash-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.6rem, 6vw, 3.4rem);
  height: clamp(2.6rem, 6vw, 3.4rem);
  border-radius: 12px;
  background: var(--c-on-accent);
  color: var(--c-accent);
}

.splash-mark svg {
  width: 55%;
  height: 55%;
}

.splash-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: -0.01em;
}

.splash-meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

.splash-counter {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 900;
  font-stretch: 120%;
  line-height: 1;
  color: var(--c-on-accent);
  font-variant-numeric: tabular-nums;
}

.splash-status {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
}

.splash-bar {
  display: flex;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-on-accent) 18%, transparent);
  overflow: hidden;
}

.splash-bar-fill {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--c-on-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  /* viewport-fit=cover lets the page paint edge-to-edge, so the header's
     own height needs to grow by the notch/Dynamic Island inset — otherwise
     its content sits partly underneath it instead of below it. env()
     resolves to 0 on devices without a safe area, so this is a no-op there. */
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  transition: transform 0.5s var(--ease-out), background-color 0.4s ease;
  transform: translateY(0);
}

.site-header.is-scrolled {
  background: var(--c-header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding-inline: var(--space-gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.05);
}

.brand-mark svg {
  width: 55%;
  height: 55%;
}

.brand-name {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-stretch: 115%;
  letter-spacing: -0.01em;
}

.brand-name-tiny {
  font-weight: 900;
}

.brand-name-comp {
  font-weight: 300;
}

.brand-by {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.brand-by-name {
  font-weight: 900;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.nav-link:hover {
  color: var(--c-text);
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link.is-active {
  color: var(--c-text);
  font-weight: 600;
}

.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1rem);
}

/* Theme toggle */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  border-color: var(--c-accent);
  transform: rotate(15deg);
}

.theme-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}

.theme-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

:root[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

:root[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(90deg);
}

:root[data-theme="light"] .theme-icon-sun {
  opacity: 0;
  transform: rotate(-90deg);
}

:root[data-theme="light"] .theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
}

.nav-toggle-line {
  display: flex;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}

.nav-toggle.is-open .nav-toggle-line:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-line:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: flex;
  background: var(--c-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
  /* keeps the links clear of the notch/Dynamic Island and home indicator
     on edge-to-edge (viewport-fit=cover) iOS displays */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out);
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 3vh, 1.8rem);
  width: 100%;
  padding-inline: var(--space-gutter);
}

.mobile-nav-link {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.4rem);
  font-weight: 800;
  font-stretch: 115%;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transform: translateY(0);
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out),
    text-shadow var(--dur-fast) ease;
}

.mobile-nav-link:hover {
  color: var(--c-accent);
  transform: translateX(0.4em);
}

.mobile-nav-link.is-active {
  color: var(--c-accent);
  text-shadow: 0 0 20px rgba(212, 255, 79, 0.3);
  transform: translateX(0.6em);
}

/* Overrides the giant display-font .mobile-nav-link styling — this one
   should read as an actual pill button, not another oversized nav word. */
.mobile-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: 0.75rem;
  padding: 0.9em 1.9em;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 600;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}

.mobile-nav-cta:hover {
  color: var(--c-on-accent);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  justify-content: center;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) var(--space-gutter) clamp(4rem, 10vh, 6rem);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vh, 2rem);
  /* grid items default to min-width:auto, so the nowrap rotate word's
     intrinsic width can blow out this track and steal space from
     .hero-visual as the word changes ("Videos" vs "Images"). Pin the
     track to its 0.9fr share regardless of content. */
  min-width: 0;
}

.hero-eyebrow {
  color: var(--c-text-muted);
}

.hero-title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 900;
  font-stretch: 122%;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero-line {
  display: block;
}

/* Word rotator — a single word element whose text is swapped on each tick
   (see main.js), so its .mark box is always sized to exactly one word.
   Two words sharing a stacked grid cell looked close, but the grid track
   is sized to the widest of the two regardless of individual alignment,
   which could still misalign the shorter word's box on narrow screens. */
.hero-line-rotator {
  display: inline-block;
}

.hero-rotate-word {
  display: inline-block;
  /* color comes from the shared .mark treatment (accent highlight box) */
  /* single-word element — never let it break mid-word onto a second line */
  white-space: nowrap;
}

.hero-sub {
  display: block;
  max-width: 34em;
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  max-width: 34em;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--c-accent);
  text-wrap: pretty;
}

.hero-highlight strong {
  font-weight: 700;
}

.hero-highlight svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  padding-top: clamp(1.2rem, 3vh, 2rem);
  border-top: 1px solid var(--c-line);
  width: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-unit {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  overflow: visible;
}

.hero-shot {
  width: 180%;
  max-width: none;
  margin-left: 60px;
  margin-right: -200px;
  margin-top: 20px;
  transform: rotate(2.5deg);
  box-shadow: 0 40px 80px -30px var(--c-shadow);
  background: transparent;
}

.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  background: var(--c-chip-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -20px var(--c-shadow);
  font-weight: 600;
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
}

.hero-chip svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-accent);
}

.hero-chip-text {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}

.hero-chip-a {
  display: none;
}

.hero-chip-b {
  display: none;
}

.scroll-hint {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) ease;
}

.scroll-hint:hover {
  color: var(--c-text);
}

.scroll-hint-text {
  display: inline-flex;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.scroll-hint-icon {
  display: inline-flex;
  animation: hint-bob 1.8s ease-in-out infinite;
}

.scroll-hint-icon svg {
  width: 1rem;
  height: 1rem;
}

@keyframes hint-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* --------------------------------------------------------------------------
   9. Format marquee
   -------------------------------------------------------------------------- */

.marquee {
  display: flex;
  width: 100%;
  padding-block: clamp(1.1rem, 3vh, 1.9rem);
  overflow: hidden;
  transition: background-color 0.5s ease;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  will-change: transform;
}

.marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  padding-right: clamp(1.6rem, 4vw, 3.2rem);
}

.marquee-item {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2.4vw, 3rem);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marquee-dot {
  display: inline-flex;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 2px solid var(--c-line-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Stats section
   -------------------------------------------------------------------------- */

.stats {
  min-height: auto;
  width: 100%;
}

.stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(4rem, 6vh, 6rem) var(--space-gutter);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2.5rem, 8vw, 5rem);
  width: 100%;
  max-width: 1000px;
}

.stats-grid .stat-value {
  font-size: clamp(3.6rem, 2.4rem + 5vw, 7rem);
}

/* --------------------------------------------------------------------------
   9b. Explainer (video)
   -------------------------------------------------------------------------- */

.explainer {
  justify-content: center;
}

.explainer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.explainer-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}

.explainer-eyebrow {
  color: var(--c-text-muted);
}

.explainer-video {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ph-bg);
  box-shadow: 0 40px 80px -30px var(--c-shadow);
}

.explainer-video iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   10. Claim (SplitText scrub)
   -------------------------------------------------------------------------- */

.claim {
  align-items: center;
  justify-content: center;
}

.claim-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.claim-eyebrow {
  color: var(--c-text-muted);
}

.claim-title {
  font-family: var(--font-display);
  font-size: var(--fs-claim);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.15;
  letter-spacing: -0.015em;

  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   11. Features — pinned horizontal scroll
   -------------------------------------------------------------------------- */

/* flow-root (not flex): this is the pin-spacer parent for .features-pin */
.features {
  display: flow-root;
  width: 100%;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.features-pin {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.features-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 1rem) var(--space-gutter) 1.5rem;
}

.features-eyebrow {
  color: var(--c-text-muted);
}

.features-progress {
  display: flex;
  width: min(30vw, 16rem);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--c-line);
  overflow: hidden;
}

.features-progress-fill {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.features-track {
  display: flex;
  flex: 1;
  align-items: stretch;
  width: max-content;
  will-change: transform;
}

.feature-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.5vh, 1.6rem);
  width: min(88vw, 60rem);
  flex-shrink: 0;
  padding: clamp(2rem, 6vh, 4rem) var(--space-gutter) clamp(4rem, 10vh, 6rem);
  border-left: 1px solid var(--c-line);
}

.feature-index {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 8vw, 10rem);
  font-weight: 900;
  font-stretch: 122%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-text-muted);
  opacity: 0.5;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.2rem, 6vh, 4rem);
  height: clamp(3.2rem, 6vh, 4rem);
  border-radius: 14px;
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.feature-icon svg {
  width: 48%;
  height: 48%;
}

.feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.feature-text {
  max-width: 34em;
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.tag:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   12. How it works
   -------------------------------------------------------------------------- */

.how {
  justify-content: center;
}

.how-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.how-eyebrow {
  color: var(--c-text-muted);
}

.how-title {
  margin-bottom: clamp(1.5rem, 5vh, 3.5rem);
}

.steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--c-line);
}

.step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.8rem, 5vh, 3.2rem);
  border-bottom: 1px solid var(--c-line);
  transition: padding-left 0.5s var(--ease-out);
}

.step:hover {
  padding-left: clamp(0.5rem, 1.5vw, 1.5rem);
}

.step-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 4.5vw, 6rem);
  font-weight: 900;
  font-stretch: 122%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-text-muted);
  transition: color 0.4s ease;
}

.step:hover .step-num {
  color: var(--c-accent);
  -webkit-text-stroke: 1.5px transparent;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1;
  text-transform: uppercase;
}

.step-text {
  max-width: 42em;
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 6vh, 3.8rem);
  height: clamp(3rem, 6vh, 3.8rem);
  border-radius: 50%;
  border: 1px solid var(--c-line);
  color: var(--c-text-muted);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease,
    transform 0.5s var(--ease-out);
}

.step:hover .step-icon {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  transform: rotate(-8deg) scale(1.06);
}

.step-icon svg {
  width: 42%;
  height: 42%;
}

/* --------------------------------------------------------------------------
   13. Privacy
   -------------------------------------------------------------------------- */

.privacy {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.privacy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3.5vh, 2.4rem);
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding: var(--space-section) var(--space-gutter);
}

.privacy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 8vh, 5rem);
  height: clamp(3.6rem, 8vh, 5rem);
  border-radius: 50%;
  /* inverted from the default accent-on-accent pairing — the section
     itself is accent-colored now, so the badge needs to stand out
     against it instead of blending in. */
  background: var(--c-on-accent);
  color: var(--c-accent);
}

.privacy-icon svg {
  width: 48%;
  height: 48%;
}

.privacy-title {
  max-width: 14ch;
}

.privacy-sub {
  max-width: 46em;
  font-size: var(--fs-body-lg);
  color: var(--c-on-accent);
  opacity: 0.72;
  text-wrap: pretty;
}

.privacy-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7em 1.3em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-accent);
  font-weight: 500;
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.badge:hover {
  border-color: currentColor;
  transform: translateY(-3px);
}

.badge svg {
  width: 1.05em;
  height: 1.05em;
}

.badge-text {
  display: inline-flex;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Showcase
   -------------------------------------------------------------------------- */

.showcase {
  justify-content: center;
  overflow: hidden;
}

.showcase-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vh, 4rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.showcase-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vh, 1.6rem);
}

.showcase-eyebrow {
  color: var(--c-text-muted);
}

.showcase-title {
  max-width: 14ch;
}

.showcase-stage {
  /* Sized to match .showcase-shot exactly (not the full section width) so
     the format cards' percentage offsets are anchored to the image's own
     border, not the viewport — otherwise they'd drift away from the shot
     on wide screens instead of hugging it. */
  position: relative;
  width: min(100%, 72rem);
  margin-inline: auto;
}

.showcase-shot {
  width: 100%;
  box-shadow: 0 60px 120px -40px var(--c-shadow);
  background: transparent;
}

/* Flying format cards — real format labels orbiting the center screenshot,
   in place of the old generic "IMG" placeholder squares */
.format-fly-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  background: var(--c-chip-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -25px var(--c-shadow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.78rem + 0.45vw, 1.1rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.format-fly-card svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--c-accent);
}

.format-fly-1 {
  top: -8%;
  left: 4%;
  transform: rotate(-6deg);
}

.format-fly-2 {
  top: -4%;
  right: 16%;
  transform: rotate(5deg);
}

.format-fly-3 {
  top: 40%;
  left: -5%;
  transform: rotate(-4deg);
}

.format-fly-4 {
  top: 44%;
  right: -5%;
  transform: rotate(4deg);
}

.format-fly-5 {
  bottom: -6%;
  left: 22%;
  transform: rotate(6deg);
}

.format-fly-6 {
  bottom: -8%;
  right: 8%;
  transform: rotate(-5deg);
}

/* --------------------------------------------------------------------------
   15. Formats
   -------------------------------------------------------------------------- */

.formats {
  justify-content: center;
}

.formats-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.formats-eyebrow {
  color: var(--c-text-muted);
}

.formats-title {
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}

.formats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  width: 100%;
}

.formats-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vh, 1.8rem);
}

.formats-col-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.formats-col-title svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c-accent);
}

.format-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.format-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-block: clamp(0.8rem, 2vh, 1.3rem);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: var(--fs-format);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: padding-left 0.4s var(--ease-out), color 0.3s ease;
}

.format-item:hover {
  padding-left: 0.6rem;
  color: var(--c-accent);
}

.format-note {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-text-muted);
}

.format-coming {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
  background: var(--c-accent);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  margin-left: 0.8rem;
  vertical-align: middle;
  line-height: 1;
}

:root[data-theme="light"] .format-coming {
  color: white;
}

:root[data-theme="dark"] .format-coming {
  color: #14160e;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */

.faq {
  justify-content: center;
}

.faq-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.faq-eyebrow {
  color: var(--c-text-muted);
}

.faq-title {
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}

.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--c-line);
}

.faq-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--c-line);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.3rem, 3.5vh, 2rem);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--c-accent);
}

.faq-question-text {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.8rem);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.faq-question-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-out), background-color 0.3s ease,
    border-color 0.3s ease, color 0.3s ease;
}

.faq-question-icon svg {
  width: 1rem;
  height: 1rem;
}

.faq-item[open] .faq-question-icon {
  transform: rotate(45deg);
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.faq-answer {
  display: flex;
  overflow: hidden;
}

.faq-answer-text {
  max-width: 56em;
  padding-bottom: clamp(1.3rem, 3.5vh, 2rem);
  font-size: var(--fs-body-lg);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   17. CTA
   -------------------------------------------------------------------------- */

.cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  width: 100%;
  padding: var(--space-section) var(--space-gutter);
}

.cta-eyebrow {
  color: var(--c-on-accent);
  opacity: 0.7;
}

.cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-cta);
  font-weight: 900;
  font-stretch: 122%;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-note {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  width: 100%;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
  padding: clamp(3rem, 8vh, 5rem) var(--space-gutter);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.footer-tagline {
  max-width: 24em;
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.footer-link {
  display: inline-flex;
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.footer-link:hover {
  color: inherit;
  transform: translateX(0.35em);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.footer-credit {
  font-weight: 500;
  color: var(--c-text-muted);
}

.footer-credit-name {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: inherit;
  transition: color var(--dur-fast) ease;
}

.footer-credit-name:hover {
  color: var(--c-accent);
}

.footer-copyright {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.footer-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.footer-top:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  transform: translateY(-4px);
}

.footer-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(2.5rem, 6vh, 4rem);
  }

  .hero-visual {
    order: -1;
    margin-top: 0;
  }

  .hero-shot {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    transform: rotate(0);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .feature-panel {
    width: 92vw;
  }

  .step {
    grid-template-columns: auto 1fr;
  }

  .step-icon {
    display: none;
  }

  .formats-grid {
    grid-template-columns: 1fr;
  }

  .format-fly-card {
    display: none;
  }

  .hero-chip-a {
    top: 4%;
    left: 2%;
  }

  .hero-chip-b {
    bottom: 4%;
    right: 2%;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    gap: 1.5rem;
  }

  .header-inner {
    gap: 1rem;
  }

  .btn-small .btn-label {
    display: none;
  }

  .section-title {
    font-size: clamp(1.7rem, 1.2rem + 5vw, 2.6rem);
  }

  /* Asymmetric padding (not a transform) — more room above the word than
     below shifts the text down within the box without moving the box
     itself, and without disturbing the horizontal centering. */
  .hero-rotate-word {
    padding-top: calc(0.09em + 2px);
    padding-bottom: 0.01em;
  }

  /* stats-grid collapses to one column on mobile; without this each stat's
     label/value stays left-aligned inside that full-width column instead
     of reading as a centered block on the page. */
  .stats-grid {
    justify-items: center;
  }

  .stats-grid .stat {
    align-items: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .splash {
    animation: splash-autohide 0.01ms ease 0.4s forwards;
  }

  .scroll-hint-icon {
    animation: none;
  }
}