/* ═══════════════════════════════════════════════
   DIGITCA — styles.css v6
   Brand: Lora + Jost · #C8522E · dark/light theme system
   ═══════════════════════════════════════════════ */

/* ─── BRAND CONSTANTS ─── */
:root {
  --red:        #C8522E;
  --cream:      #F2EBDB;
  --ink:        #171717;
  --warm-gray:  #8A8176;
  --red-glow:   rgba(200, 82, 46, 0.30);

  /* Semantic tokens — light mode defaults */
  --surface:    var(--cream);
  --surface-alt: var(--ink);
  --on-surface: var(--ink);
  --on-surface-80: rgba(23, 23, 23, 0.80);
  --on-surface-50: rgba(23, 23, 23, 0.50);
  --on-surface-12: rgba(23, 23, 23, 0.12);
  --on-surface-06: rgba(23, 23, 23, 0.06);
  --on-alt:     var(--cream);
  --on-alt-65:  rgba(242, 235, 219, 0.65);
  --on-alt-40:  rgba(242, 235, 219, 0.40);
  --on-alt-12:  rgba(242, 235, 219, 0.12);

  /* Aliases for backward compat */
  --ink-80: var(--on-surface-80);
  --ink-50: var(--on-surface-50);
  --ink-12: var(--on-surface-12);

  /* Fonts */
  --font-sans:    'Jost', 'DM Sans', system-ui, sans-serif;
  --font-display: 'Lora', Georgia, serif;
  --font-headline:'Lora', Georgia, serif;
  --font-mono:    'Geist Mono', 'Fira Code', 'Courier New', monospace;

  /* Layout */
  --container: 1200px;
  --gap:       clamp(2rem, 5vw, 4rem);

  /* Shadows */
  --ss-radius: 38px;
  --ss-shadow: 0 40px 100px rgba(23,23,23,0.22), 0 8px 24px rgba(23,23,23,0.10);
  --ss-shadow-sm: 0 20px 60px rgba(23,23,23,0.16), 0 4px 12px rgba(23,23,23,0.08);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── DARK MODE OVERRIDES ─── */
[data-theme="dark"] {
  --surface:    var(--ink);
  --surface-alt: #0f0f0f;
  --on-surface: var(--cream);
  --on-surface-80: rgba(242, 235, 219, 0.80);
  --on-surface-50: rgba(242, 235, 219, 0.50);
  --on-surface-12: rgba(242, 235, 219, 0.12);
  --on-surface-06: rgba(242, 235, 219, 0.06);
  --on-alt:     var(--ink);
  --on-alt-65:  rgba(23, 23, 23, 0.65);
  --on-alt-40:  rgba(23, 23, 23, 0.40);
  --on-alt-12:  rgba(23, 23, 23, 0.12);
  --warm-gray:  #7a7068;

  --ink-80: var(--on-surface-80);
  --ink-50: var(--on-surface-50);
  --ink-12: var(--on-surface-12);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ─── CONTAINER ─── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ─── TYPOGRAPHY SCALE ─── */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.label--light { color: rgba(242,235,219,0.50); }
.label--gray  { color: var(--warm-gray); }

.section-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--on-surface);
}
.section-headline em { font-style: italic; font-weight: inherit; }

.section-body {
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.7;
  color: var(--on-surface-80);
  max-width: 44ch;
  font-weight: 400;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), opacity 0.18s, background 0.18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(160deg, #d95c38 0%, var(--red) 55%, #a83c1e 100%);
  color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 4px 20px var(--red-glow);
}
.btn--primary:hover {
  background: linear-gradient(160deg, #c85228 0%, #a03418 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,0.22), 0 10px 30px rgba(200,82,46,0.50);
}

.btn--ghost {
  background: transparent;
  color: var(--on-surface);
  border: 1.5px solid var(--on-surface-12);
}
.btn--ghost:hover { border-color: var(--on-surface-50); background: var(--on-surface-06); }

.btn--full { width: 100%; justify-content: center; margin-top: 1.5rem; }
.btn--lg { padding: 0.9rem 2rem; font-size: 0.9375rem; }

/* ─── SCROLL REVEAL ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem clamp(1.25rem, 5vw, 3rem);
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.nav--scrolled {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--on-surface-12);
}

/* Wordmark */
.nav-logo {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-surface);
  display: inline-flex;
  align-items: baseline;
  transition: opacity 0.15s;
}
.nav-logo:hover { opacity: 0.65; }
.nav-dot { color: var(--red); letter-spacing: 0; }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-50);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--on-surface); }
.nav-links .nav-cta { margin-left: 0.5rem; padding: 0; border: none; background: none; }

/* Language switcher (legacy flat — kept for mobile nav) */
.lang-switcher {
  display: flex;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.lang-switcher a {
  color: var(--on-surface-50);
  text-decoration: none;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  transition: color .15s;
}
.lang-switcher a:hover,
.lang-switcher a.lang-active { color: var(--on-surface); }

/* Language dropdown — nav (11 languages) */
.lang-dropdown { position: relative; }
.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-50);
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s;
  white-space: nowrap;
}
.lang-dropdown-btn:hover { color: var(--on-surface); }
.lang-dropdown-btn svg { flex-shrink: 0; transition: transform 0.2s var(--ease-out); }
.lang-dropdown--open .lang-dropdown-btn { color: var(--on-surface); }
.lang-dropdown--open .lang-dropdown-btn svg { transform: rotate(180deg); }

.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--on-surface-12);
  border-radius: 10px;
  padding: 0.3rem;
  min-width: 148px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 200;
}
.lang-dropdown--open .lang-dropdown-menu { display: block; }
.lang-dropdown-menu a {
  display: block;
  padding: 0.42rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--on-surface-80);
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.lang-dropdown-menu a:hover { background: var(--on-surface-06); color: var(--on-surface); }
.lang-dropdown-menu a.lang-active { color: var(--red); font-weight: 500; }

/* App Store badge */
.appstore-badge {
  display: inline-flex;
  text-decoration: none;
  transition: opacity .15s;
}
.appstore-badge svg,
.appstore-badge img { display: block; height: 100%; width: auto; }
.appstore-badge:hover { opacity: .75; }
.appstore-badge--nav  { height: 32px; }
.appstore-badge--hero { height: 48px; }
.appstore-badge--card { height: 44px; }

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border: 1.5px solid var(--on-surface-12);
  background: transparent;
  color: var(--on-surface-50);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--on-surface);
  border-color: var(--on-surface-50);
  background: var(--on-surface-06);
}
.theme-toggle svg { width: 15px; height: 15px; }
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ─── HERO ─── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 4rem;
  overflow: hidden;
  position: relative;
  border-top: 3px solid var(--red);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  overflow: hidden;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.hero-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.7rem, 5.5vw, 6.4rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--on-surface);
  overflow-wrap: normal;
  hyphens: none;
}
.hero-headline .accent { color: var(--red); }
.hero-headline .dot-accent { color: var(--red); }
.hero-tagline { font-weight: 600; }
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.7;
  color: var(--on-surface-80);
  max-width: 38ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-text-link {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-80);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
  border-bottom: 1px solid var(--on-surface-50);
  padding-bottom: 1px;
}
.hero-text-link:hover { color: var(--on-surface); border-bottom-color: var(--on-surface); }
.hero-platform {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--warm-gray);
  letter-spacing: 0.08em;
}

/* QR code — desktop only */
.hero-qr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--on-surface-20, rgba(23,23,23,0.1));
}
.hero-qr img {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0;
  border-radius: 5px;
  mix-blend-mode: multiply;
  opacity: 0.85;
  display: block;
}
[data-theme="dark"] .hero-qr img {
  mix-blend-mode: normal;
  filter: invert(1);
  opacity: 0.65;
}
[data-theme="dark"] .hero-qr {
  border-top-color: rgba(255,255,255,0.08);
}
.hero-qr-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gray);
  line-height: 1.55;
  opacity: 0.7;
}
@media (max-width: 900px) {
  .hero-qr { display: none; }
}

/* Feature story — situational prose, replaces bullet lists */
.feature-story {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--on-surface-80);
  max-width: 38ch;
}
.feature--dark .feature-story { color: var(--on-alt-65); }
[data-theme="dark"] .feature--dark .feature-story { color: rgba(242,235,219,0.68); }

/* Pull quote — editorial break between sections */
.pullquote {
  padding: clamp(4rem, 10vh, 8rem) 0;
  background: var(--surface);
  text-align: center;
  transition: background 0.3s;
}
.pullquote-text {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 5.5vw, 5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  color: var(--on-surface);
  max-width: 22ch;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}
@media (max-width: 640px) {
  .pullquote-text { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* Box image hero visual */
.hero-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-right: calc(var(--container-pad) * -1);
  z-index: 0;
}
.hero-box::before {
  content: "79";
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(16rem, 26vw, 34rem);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--on-surface);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hero-box-img {
  width: clamp(280px, 33.5vw, 515px);
  height: auto;
  display: block;
  transform: perspective(2000px) rotateY(-2.5deg) rotateX(1deg);
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.08))
    drop-shadow(0 20px 40px rgba(0,0,0,0.13))
    drop-shadow(0 56px 72px rgba(0,0,0,0.09));
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.hero-box-img:hover {
  transform: perspective(2000px) rotateY(-1deg) rotateX(0.5deg) scale(1.02);
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.08))
    drop-shadow(0 28px 52px rgba(0,0,0,0.17))
    drop-shadow(0 72px 90px rgba(0,0,0,0.11));
}
/* Image swap on theme */
.hero-box-img--dark  { display: none; }
.hero-box-img--light { display: block; }
[data-theme="dark"] .hero-box-img--light { display: none; }
[data-theme="dark"] .hero-box-img--dark  {
  display: block;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,0.35))
    drop-shadow(0 24px 48px rgba(0,0,0,0.55))
    drop-shadow(0 64px 80px rgba(0,0,0,0.4));
}

/* Legacy phone mockup layout — kept for compat */
.hero-screens {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(70vh, 600px);
}
.ss-wrap { position: absolute; top: 50%; left: 50%; }
.ss-frame {
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: var(--ss-shadow);
}
.ss-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ss-wrap--front {
  transform: translate(-55%, -50%) rotate(-3deg);
  z-index: 2;
  width: clamp(160px, 17vw, 230px);
}
.ss-wrap--front .ss-frame { aspect-ratio: 660 / 1000; }
.ss-wrap--back {
  transform: translate(-10%, -48%) rotate(5deg);
  z-index: 1;
  width: clamp(140px, 15vw, 200px);
}
.ss-wrap--back .ss-frame { aspect-ratio: 660 / 1000; box-shadow: var(--ss-shadow-sm); }
.ss-frame--tilt-l { transform: rotate(-3.5deg); box-shadow: var(--ss-shadow); }
.ss-frame--tilt-r { transform: rotate(3.5deg); box-shadow: var(--ss-shadow); }

/* ─── PHONE FRAME ─── */
/* ─── Mockup images (device frame baked in) ─── */
.mockup-img {
  width: clamp(200px, 21vw, 310px);
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.mockup-img:hover {
}
.mockup-img--tilt-l { transform: rotate(-4deg); }
.mockup-img--tilt-r { transform: rotate(4deg); }
.mockup-img--tilt-l:hover { transform: rotate(-2deg) scale(1.02); }
.mockup-img--tilt-r:hover { transform: rotate(2deg) scale(1.02); }
.feature--dark .feature-visual { filter: drop-shadow(0 32px 64px rgba(0,0,0,0.9)) drop-shadow(0 0 80px rgba(255,255,255,0.05)); }
.video-theme-light {
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,0.05))
    drop-shadow(0 12px 28px rgba(0,0,0,0.07));
}

/* ─── TICKER ─── */
.ticker {
  background: var(--surface-alt);
  color: var(--on-alt);
  padding: 0.875rem 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--on-alt-12);
  border-bottom: 1px solid var(--on-alt-12);
  transition: background 0.3s;
}
[data-theme="dark"] .ticker {
  background: #0f0f0f;
  color: var(--cream);
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  animation: ticker-scroll 50s linear infinite;
}
.ticker-track span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 0 0.9rem;
  text-transform: uppercase;
}
.ticker-track .dot { color: var(--red); padding: 0; letter-spacing: 0; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── FEATURE SECTIONS ─── */
.feature { padding: clamp(5rem, 11vh, 9rem) 0; }

/* Dark variant — uses alt surface */
.feature--dark {
  background: var(--surface-alt);
  color: var(--on-alt);
  transition: background 0.3s;
}
[data-theme="dark"] .feature--dark {
  background: #0f0f0f;
  color: var(--cream);
}
.feature--dark .section-headline { color: var(--on-alt); }
[data-theme="dark"] .feature--dark .section-headline { color: var(--cream); }
.feature--dark .section-body { color: var(--on-alt-65); }
[data-theme="dark"] .feature--dark .section-body { color: rgba(242,235,219,0.62); }
.feature--dark .feature-list li { color: var(--on-alt-65); }
[data-theme="dark"] .feature--dark .feature-list li { color: rgba(242,235,219,0.75); }
.feature--dark .feature-list li::before { background: color-mix(in srgb, var(--red) 65%, transparent); }

/* f-paska is the hero feature — disproportionate visual weight vs all other sections */
#f-paska { padding: clamp(7rem, 15vh, 13rem) 0; }
#f-paska .section-headline {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 1.04;
}

/* f-paska background — #171717 accounts for H.264 color-space render shift over raw #141414 */
#f-paska.feature--dark,
[data-theme="dark"] #f-paska.feature--dark { background: #171717; }

#f-archiv.feature--dark,
[data-theme="dark"] #f-archiv.feature--dark { background: #171717; }

#f-export.feature--dark,
[data-theme="dark"] #f-export.feature--dark { background: #171717; }

#f-sci.feature--dark,
[data-theme="dark"] #f-sci.feature--dark { background: #171717; }

/* shots.so mockup has its own depth — kill the white-glow filter that boxes the video rect */
#f-paska .feature-visual { filter: none; }
/* No CSS tilt — shots.so already has 3D perspective baked in; rotation creates subpixel seam */
#f-paska .mockup-img { transform: none; scale: 1; transition: scale 0.4s var(--ease-out); }
#f-paska .feature-visual:hover .mockup-img { scale: 1.02; }

#f-sci .feature-visual { filter: none; }
#f-sci .mockup-img { transform: none; scale: 1; transition: scale 0.4s var(--ease-out); }
#f-sci .feature-visual:hover .mockup-img { scale: 1.02; }


/* Export section — more present phone, warm glow behind device */
#f-export .mockup-img { width: clamp(200px, 22vw, 320px); filter: brightness(1.12) contrast(1.04); }
#f-export .feature-visual {
  filter:
    drop-shadow(0 32px 64px rgba(0,0,0,0.88))
    drop-shadow(0 0 80px rgba(226,116,69,0.12))
    drop-shadow(0 0 160px rgba(226,116,69,0.07));
}


/* Quiet aside — closing note, softer than body */
.feature-aside {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--on-surface-80);
  opacity: 0.42;
  margin-top: 2.25rem;
}

/* Light variant — uses main surface */
.feature--light { background: var(--surface); transition: background 0.3s; }
.feature--light .section-body { color: var(--on-surface-80); }
.feature--light .feature-list li { color: var(--on-surface-80); }

/* Per-section warm tints — light mode only */
#f-hlas.feature--light      { background: #F3EEE0; }
#f-prevodnik.feature--light { background: #F3EEE0; }
#f-design.feature--light    { background: #F0EAE2; }
[data-theme="dark"] #f-hlas.feature--light,
[data-theme="dark"] #f-prevodnik.feature--light,
[data-theme="dark"] #f-design.feature--light { background: var(--ink); }

/* Light sections: remove heavy dark drop-shadow from visual container (video handles its own depth).
   Blend white video backgrounds (shots.so mockup frame) into the cream section — white × cream = cream. */
.feature--light .feature-visual { filter: none; }
:root:not([data-theme="dark"]) .feature--light .video-theme-light { mix-blend-mode: multiply; }

.feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}
.feature-text { display: flex; flex-direction: column; gap: 1.25rem; }
.feature-list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem; }
.feature-list li {
  font-size: 0.9375rem;
  padding-left: 1.625rem;
  position: relative;
  letter-spacing: 0.01em;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 50%, transparent);
}

.feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,0.55)) drop-shadow(0 8px 20px rgba(0,0,0,0.25));
}
.feature-visual .ss-frame { width: clamp(180px, 22vw, 280px); aspect-ratio: 660 / 1200; overflow: hidden; }
.feature-visual .ss-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feature-visual--right { order: 1; }
#f-paska .feature-visual { justify-content: flex-start; padding-left: clamp(1rem, 2.5vw, 2.5rem); }
@media (max-width: 900px) { #f-paska .feature-visual { justify-content: center; padding-left: 0; } }
.feature-visual--left  { order: -1; }

/* ─── FEATURE QUOTE CARD ─── */
.feature-quote {
  margin-top: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--red);
  background: color-mix(in srgb, var(--red) 6%, transparent);
  border-radius: 0 0.75rem 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 36rem;
}
.feature-quote p {
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--on-surface-80);
  margin: 0;
}
.feature-quote cite {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  color: var(--red);
  opacity: 0.75;
}

/* Subtle user quote variant — no callout box, just quiet testimony */
.feature-quote--subtle {
  border-left: 1px solid var(--on-surface-80);
  background: none;
  border-radius: 0;
  padding: 0 0 0 1.25rem;
  margin-top: 1.75rem;
  opacity: 0.7;
}
.feature-quote--subtle cite {
  color: var(--on-surface-80);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.6;
}

/* onethumb image — no device chrome, just the illustration */
.onethumb-img {
  width: clamp(220px, 28vw, 380px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.06))
    drop-shadow(0 12px 32px rgba(0,0,0,0.12))
    drop-shadow(0 32px 64px rgba(0,0,0,0.10));
}

/* NLP badges */
.nlp-badge {
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.nlp-expr {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--surface);
  color: var(--on-surface);
  border: 1.5px solid var(--on-surface-12);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  box-shadow: 0 4px 16px rgba(23,23,23,0.08);
  white-space: nowrap;
}
[data-theme="dark"] .nlp-expr {
  background: #2a2a2a;
  color: var(--cream);
  border-color: rgba(242,235,219,0.15);
}

/* Format tags */
.export-formats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.format-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--on-surface-12);
  border-radius: 3px;
  padding: 0.3rem 0.8rem;
  color: var(--on-surface-80);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.format-tag:hover {
  background: var(--on-surface);
  color: var(--surface);
  border-color: var(--on-surface);
}

/* OCR badges */
.ocr-badge {
  position: absolute;
  left: -1.5rem;
  top: 35%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 4px 16px var(--red-glow);
}
.ocr-badge-2 {
  position: absolute;
  right: -1rem;
  top: 55%;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.4rem 1rem;
  border-radius: 3px;
  border: 1.5px solid var(--on-surface-12);
  white-space: nowrap;
}

/* ─── THEMES SECTION ─── */
.themes {
  background: var(--surface-alt);
  padding: clamp(4rem, 10vh, 8rem) 0 clamp(3rem, 6vh, 5rem);
  overflow: clip; /* clips horizontally (no scrollbar leak) but allows vertical drop-shadows */
  transition: background 0.3s;
}
[data-theme="dark"] .themes { background: #0f0f0f; }
.themes-header { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.themes-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 400;
  color: var(--on-alt);
  line-height: 1.08;
  letter-spacing: 0;
}
[data-theme="dark"] .themes-headline { color: var(--cream); }
.themes-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.5;
  color: var(--on-alt-65);
  margin-top: 0.75rem;
}
.themes-sub + .themes-sub { margin-top: 0.25rem; }
[data-theme="dark"] .themes-sub { color: rgba(242,235,219,0.65); }
.themes-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  width: 100%;
}
.theme-tile { position: relative; aspect-ratio: 1; overflow: hidden; cursor: default; }
.theme-tile-bg {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 80%;
  transition: transform 0.4s var(--ease-out), filter 0.3s;
  filter: brightness(0.88);
}
.theme-tile::after {
  content: attr(data-name);
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: transparent;
  background: linear-gradient(to top, rgba(23,23,23,0.7) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s, color 0.3s;
}
.theme-tile:hover .theme-tile-bg { transform: scale(1.06); filter: brightness(1.05); }
.theme-tile:hover::after { opacity: 1; color: rgba(242,235,219,0.9); }

/* ─── THEME FILMSTRIP ─── */
.theme-filmstrip {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* match .container side padding so first card aligns with text above */
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-block: 0.75rem 3rem;
  cursor: grab;
}
.theme-filmstrip:active { cursor: grabbing; }
.theme-filmstrip::-webkit-scrollbar { display: none; }

.theme-film-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.theme-film-img {
  height: clamp(260px, 40vh, 420px);
  width: auto;
  display: block;
  border-radius: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow:
    0 20px 52px rgba(0,0,0,0.2),
    0 6px 16px rgba(0,0,0,0.1);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.theme-film-item:hover .theme-film-img,
.theme-film-item:focus-visible .theme-film-img {
  transform: translateY(-8px);
  box-shadow:
    0 30px 64px rgba(0,0,0,0.26),
    0 10px 24px rgba(0,0,0,0.12);
}
@media (prefers-reduced-motion: reduce) {
  .theme-film-img { transition: none; }
}

.theme-film-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
  line-height: 1;
}

/* Mystery / hidden theme card */
.theme-film-mystery {
  height: clamp(260px, 40vh, 420px);
  aspect-ratio: 9 / 19.5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 2px dashed color-mix(in srgb, var(--warm-gray) 50%, transparent);
  font-size: 2.5rem;
  color: var(--warm-gray);
  opacity: 0.45;
  transition: opacity 0.2s;
}
.theme-film-item--hidden:hover .theme-film-mystery { opacity: 0.75; }

/* ─── DEMO (interactive tape calculator) ─── */
.demo {
  padding: clamp(5rem, 11vh, 9rem) 0;
  background: var(--surface);
  transition: background 0.3s;
}

.demo-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.demo-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}

.demo-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  color: var(--on-surface-50);
  margin: 0;
}

/* ── Phone shell ── */
.demo-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.demo-phone {
  width: clamp(240px, 38vw, 340px);
  aspect-ratio: 390 / 844;
  background: #0e0e0e;
  border-radius: clamp(36px, 7vw, 52px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 10px #111,
    0 0 0 11px rgba(255,255,255,0.06),
    0 40px 100px rgba(0,0,0,0.65),
    0 10px 30px rgba(0,0,0,0.4);
  padding: clamp(14px, 3vw, 22px) clamp(12px, 2.5vw, 18px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Dynamic island cutout */
.demo-phone::before {
  content: '';
  position: absolute;
  top: clamp(10px, 2vw, 14px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 18vw, 112px);
  height: clamp(20px, 4vw, 28px);
  background: #0e0e0e;
  border-radius: 50px;
  z-index: 10;
}

/* ── App inner ── */
#demo-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #141414;
  border-radius: clamp(26px, 5.5vw, 40px);
  overflow: hidden;
}

/* ── Tape scroll area ── */
.demo-tape-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  padding-top: clamp(24px, 5vw, 36px); /* space for dynamic island */
}

#demo-tape {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 1rem 0.25rem;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}
#demo-tape::-webkit-scrollbar { display: none; }

/* ── Tape rows ── */
.demo-tr {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.4vw, 0.8rem);
  line-height: 1.9;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(242, 235, 219, 0.45);
  animation: demo-row-in 0.18s var(--ease-out) both;
}

@keyframes demo-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-tr--num .demo-op-label {
  color: rgba(200, 82, 46, 0.75);
  min-width: 1.1em;
}
.demo-tr--num .demo-num-val {
  flex: 1;
  text-align: right;
}

/* First number in a segment — no op label, right-align the bare value */
.demo-tr--first {
  justify-content: flex-end;
}

.demo-tr--result {
  color: rgba(242, 235, 219, 0.85);
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  border-top: 1px solid rgba(242, 235, 219, 0.1);
  margin-top: 2px;
  padding-top: 2px;
}
.demo-tr--result .demo-op-label {
  color: rgba(200, 82, 46, 0.8);
}
.demo-tr--result .demo-result-val {
  flex: 1;
  text-align: right;
  color: #F2EBDB;
}

.demo-tr--sep {
  height: clamp(0.5rem, 1.5vw, 0.85rem);
}

/* ── Display panel ── */
.demo-display {
  background: #1a1a1a;
  padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 16px);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.demo-display-total {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.2vw, 0.7rem);
  color: rgba(242, 235, 219, 0.3);
  text-align: right;
  height: 1.2em;
  line-height: 1.2;
}

.demo-display-input {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 300;
  color: #F2EBDB;
  text-align: right;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Keyboard grid ── */
.demo-keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2px, 0.5vw, 4px);
  padding: clamp(4px, 1vw, 8px);
  background: #111;
}

/* ── Keys ── */
.demo-key {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.1 / 1;
  border-radius: clamp(8px, 1.5vw, 12px);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.8vw, 1rem);
  font-weight: 400;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.08s, transform 0.08s;
  position: relative;
  overflow: hidden;
  /* default: number key */
  background: #2a2a2a;
  color: #F2EBDB;
}

.demo-key:active,
.demo-key--press {
  filter: brightness(1.35);
  transform: scale(0.94);
}

.demo-key--fn {
  background: #3a3a3c;
  color: rgba(242, 235, 219, 0.75);
  font-size: clamp(0.6rem, 1.5vw, 0.85rem);
}

.demo-key--op {
  background: #3d2218;
  color: #E8856A;
}

.demo-key--op.demo-key--active {
  background: #C8522E;
  color: #fff;
}

.demo-key--eq {
  background: #C8522E;
  color: #fff;
  font-weight: 600;
}
.demo-key--eq:active,
.demo-key--eq.demo-key--press {
  filter: brightness(1.2);
}

/* Keyboard hint */
.demo-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--on-surface-50);
  letter-spacing: 0.06em;
  margin-top: 1rem;
  opacity: 0.6;
}

@media (max-width: 600px) {
  .demo-phone { width: clamp(220px, 72vw, 300px); }
  .demo-hint  { font-size: 0.55rem; }
}

/* ─── PRICING ─── */
.pricing {
  padding: clamp(5rem, 11vh, 9rem) 0;
  background: var(--surface);
  transition: background 0.3s;
}
.pricing-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  color: var(--on-surface);
}
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 720px;
  margin-inline: auto;
}
.pricing-card {
  background: var(--on-surface-06);
  border: 1.5px solid var(--on-surface-12);
  border-radius: 4px;
  padding: 2.25rem;
  position: relative;
  transition: box-shadow 0.2s, background 0.3s;
}
.pricing-card:hover { box-shadow: 0 16px 48px var(--on-surface-12); }
.pricing-card:not(.pricing-card--premium) { padding-bottom: 3rem; }
.pricing-card--premium {
  background: linear-gradient(150deg, var(--surface-alt) 0%, color-mix(in srgb, var(--surface-alt) 80%, #000) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 24px 56px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.20);
  color: var(--on-alt);
}
.pricing-card--premium:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 32px 72px rgba(0,0,0,0.40),
    0 12px 24px rgba(0,0,0,0.22);
}
[data-theme="dark"] .pricing-card--premium { background: linear-gradient(150deg, var(--cream) 0%, color-mix(in srgb, var(--cream) 88%, #ccc) 100%); color: var(--ink); }
.pricing-card--premium .pricing-features li { color: rgba(242,235,219,0.85); }
[data-theme="dark"] .pricing-card--premium .pricing-features li { color: rgba(23,23,23,0.75); }
.pricing-card.pricing-card--premium h3 { color: var(--on-alt); }
[data-theme="dark"] .pricing-card--premium h3 { color: var(--ink); }
.pricing-card--premium .price { color: rgba(242,235,219,0.80); }
[data-theme="dark"] .pricing-card--premium .price { color: rgba(23,23,23,0.75); }
.pricing-card-badge {
  position: absolute;
  top: -0.75rem; left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  border-radius: 2px;
  white-space: nowrap;
}
.pricing-card-top { margin-bottom: 1.5rem; }
.pricing-card h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 0.35rem;
  color: var(--on-surface);
}
.price { font-family: var(--font-mono); font-size: 0.75rem; color: var(--on-surface-50); letter-spacing: 0.04em; }
.pricing-features { display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-features li {
  font-size: 0.9375rem;
  color: var(--on-surface-80);
  padding-left: 1.25rem;
  position: relative;
}
.pricing-features li::before {
  content: '✓';
  position: absolute; left: 0;
  color: var(--red); font-size: 0.75rem; font-weight: 700;
}
.pricing-card--premium .pricing-features li::before { color: var(--red); }

/* "Navždy" — emotional anchor, visually separated */
.pricing-feature--highlight {
  color: var(--on-alt) !important;
  font-weight: 600;
  margin-top: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255,255,255,0.09);
}
[data-theme="dark"] .pricing-feature--highlight { color: var(--ink) !important; border-top-color: rgba(0,0,0,0.1); }

/* ─── VALUES ─── */
.values {
  background: var(--ink);
  padding: clamp(5rem, 11vh, 8rem) 0;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}
.bento-block {
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.bento-wide { grid-column: span 2; }
.bento-block--red  { background: #C8522E; }
.bento-block--dark { background: #1c1c1c; }
.bento-block--cream { background: #F2EBDB; }
.bento-block--ink  { background: #141414; border: 1px solid rgba(242,235,219,0.08); }
.bento-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: auto;
}
.bento-block--cream .bento-tag { color: #171717; }
.bento-block--red .bento-tag,
.bento-block--dark .bento-tag,
.bento-block--ink .bento-tag { color: #F2EBDB; }
.bento-headline {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 1.5rem;
}
.bento-block--cream .bento-headline { color: #171717; }
.bento-block--red .bento-headline,
.bento-block--dark .bento-headline,
.bento-block--ink .bento-headline { color: #F2EBDB; }
.bento-body {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 1rem;
  opacity: 0.6;
}
.bento-block--cream .bento-body { color: #171717; }
.bento-block--red .bento-body,
.bento-block--dark .bento-body,
.bento-block--ink .bento-body { color: #F2EBDB; }
.bento-price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: #C8522E;
  margin-top: 0.75rem;
  letter-spacing: -0.02em;
}

/* ─── BRAND STAMP ─── */
.brand-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border: 2px solid var(--red);
  border-radius: 4px;
  padding: 0.9rem 1.75rem;
  text-align: center;
}
.brand-stamp-name {
  font-family: var(--font-sans);
  font-size: 1.375rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--red);
}
.brand-stamp-est {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.2em;
  color: var(--red);
  display: flex; align-items: center; gap: 0.5rem;
}
.brand-stamp-est::before, .brand-stamp-est::after { content: '•'; }
.brand-stamp-tagline {
  font-family: var(--font-mono);
  font-size: 0.55rem; letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase;
}

/* ─── CTA FINAL ─── */
.cta-final {
  background: var(--surface);
  padding: clamp(6rem, 14vh, 11rem) 0;
  text-align: center;
  transition: background 0.3s;
}
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta-headline {
  font-family: var(--font-headline);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--on-surface);
}
.cta-headline .accent { color: var(--red); }
.cta-sub { font-size: 1.0625rem; color: var(--on-surface-80); max-width: 36ch; line-height: 1.65; }
.cta-platform {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--warm-gray); text-transform: uppercase;
  margin-top: -0.25rem;
}

/* ─── ABOUT ─── */
.about {
  background: var(--surface);
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-top: 1px solid var(--on-surface-06);
}
.about-inner { max-width: 680px; }
.about-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--on-surface);
  margin: 0.75rem 0 2rem;
}
.about-body { display: flex; flex-direction: column; gap: 1.25rem; }
.about-body p { font-size: 1.0625rem; line-height: 1.75; color: var(--on-surface-80); }
.about-emphasis {
  font-style: italic;
  color: var(--on-surface) !important;
  font-size: 1.125rem !important;
  border-left: 3px solid var(--red);
  padding-left: 1.25rem;
  margin-left: -1.25rem;
}
.about-kicker {
  font-family: var(--font-mono);
  font-size: 0.9375rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-80) !important;
}
.about-closing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.about-signature {
  display: block;
  width: clamp(100px, 16vw, 180px);
  height: auto;
  opacity: 0.72;
  flex-shrink: 0;
}
[data-theme="dark"] .about-signature {
  filter: invert(1);
  opacity: 0.55;
}

.about-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.about-cta-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--warm-gray);
  letter-spacing: 0.06em;
}

/* ─── FOOTER ─── */
.footer {
  background: var(--surface-alt);
  padding: 2rem 0;
  border-top: 1px solid var(--on-alt-12);
  transition: background 0.3s;
}
[data-theme="dark"] .footer { background: #0f0f0f; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-logo {
  font-family: var(--font-sans);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-alt);
  opacity: 0.6;
}
[data-theme="dark"] .footer-logo { color: var(--cream); }
.footer-logo .dot { color: var(--red); opacity: 1; letter-spacing: 0; }
.footer-nav { display: flex; gap: 1.75rem; }
.footer-nav a {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-alt-40);
  transition: color 0.15s;
}
[data-theme="dark"] .footer-nav a { color: rgba(242,235,219,0.40); }
.footer-nav a:hover { color: var(--on-alt); }
[data-theme="dark"] .footer-nav a:hover { color: rgba(242,235,219,0.85); }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.08em;
  color: var(--on-alt-40);
}
[data-theme="dark"] .footer-copy { color: rgba(242,235,219,0.25); }
.footer-social { display: flex; align-items: center; gap: 0.875rem; }
.footer-social a { color: var(--on-alt-40); transition: color 0.15s; display: flex; line-height: 1; padding: 12px; margin: -12px; }
.footer-social a:hover { color: var(--on-alt); }
[data-theme="dark"] .footer-social a { color: rgba(242,235,219,0.40); }
[data-theme="dark"] .footer-social a:hover { color: rgba(242,235,219,0.85); }

/* ─── SUB-PAGE ─── */
.sub-page {
  padding-top: clamp(5rem, 12vh, 8rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  max-width: 720px;
}
.sub-page .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.25rem;
}
.sub-page h1 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  letter-spacing: -0.01em; text-transform: uppercase;
  line-height: 1.05; margin-bottom: 1.5rem;
  color: var(--on-surface);
}
.sub-page h2 {
  font-family: var(--font-sans);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2.5rem; margin-bottom: 0.75rem;
  color: var(--on-surface);
}
.sub-page p, .sub-page li { font-size: 1rem; line-height: 1.7; color: var(--on-surface-80); }
.sub-page ul { padding-left: 1.25rem; list-style: disc; }
.sub-page a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.sub-page .boilerplate {
  background: var(--on-surface-06);
  border-left: 3px solid var(--red);
  padding: 1rem 1.25rem;
  border-radius: 0 3px 3px 0;
  font-family: var(--font-mono);
  font-size: 0.875rem; line-height: 1.7;
  color: var(--on-surface-80);
}
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
.press-card { border: 1.5px solid var(--on-surface-12); border-radius: 4px; padding: 1.25rem; }
.press-card h3 { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--on-surface); }
.press-card p { font-size: 0.875rem; color: var(--on-surface-80); margin-bottom: 0.75rem; }
.press-card a { color: var(--red); font-size: 0.875rem; font-weight: 600; }
.press-card a:hover { text-decoration: underline; }
.kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--warm-gray); margin-top: 3rem; text-transform: uppercase; }
.footnote { font-size: 0.75rem; color: var(--on-alt-40); margin-top: 0.75rem; }

/* ─── RESPONSIVE ─── */

/* Large desktop — let the box breathe fully */
@media (min-width: 1400px) {
  .hero-box-img { width: clamp(380px, 33.5vw, 540px); }
}

/* Laptop (901–1160px) — reduce box, protect headline space */
@media (max-width: 1160px) and (min-width: 901px) {
  .hero-box-img { width: clamp(240px, 28vw, 400px); }
  .hero-headline { font-size: clamp(2.5rem, 4.8vw, 5.5rem); }
}

/* Tablet / mobile — single column, product above text */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: 5.5rem;
    padding-bottom: 3.5rem;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .hero-text { align-items: center; gap: 1.25rem; }
  .hero-sub { max-width: 42ch; }
  .hero-box { order: -1; margin-right: 0; justify-content: center; }
  .hero-box-img {
    width: clamp(240px, 62vw, 400px);
    transform: none;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.14)) drop-shadow(0 32px 48px rgba(0,0,0,0.1));
  }
  [data-theme="dark"] .hero-box-img--dark {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)) drop-shadow(0 32px 56px rgba(0,0,0,0.5));
  }
  .hero-headline { font-size: clamp(2.75rem, 7.5vw, 5rem); }
  .hero-text-link { display: none; }
  .hero-screens { height: min(50vw, 340px); order: -1; }
  .ss-wrap--front { width: clamp(120px, 24vw, 180px); }
  .ss-wrap--back  { width: clamp(100px, 20vw, 150px); }

  .feature-inner { grid-template-columns: 1fr; text-align: center; }
  .feature-text { align-items: center; }
  .section-body { max-width: 100%; }
  .feature-list { align-items: center; }
  .feature-visual--left, .feature-visual--right { order: -1; }
  .nlp-badge { display: none; }

  /* Always show feature visuals on mobile — bypass scroll-reveal which can
     silently fail on iOS Safari when elements near the top of a section
     enter the viewport before the IntersectionObserver fires */
  .feature-visual[data-reveal],
  .feature-visual[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
  /* Guarantee a minimum height so video containers don't collapse to zero
     before the browser has parsed the video metadata for height: auto */
  .feature-visual { min-height: 260px; }

  .mockup-img { width: clamp(180px, 46vw, 240px); }
  #f-export .mockup-img { width: clamp(140px, 38vw, 190px); }

  .themes-grid { grid-template-columns: repeat(4, 1fr); }
  .pricing-cards { grid-template-columns: 1fr; max-width: 400px; }
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-wide { grid-column: span 2; }
  .press-grid { grid-template-columns: 1fr; }
  .nav-links > a:not(.nav-cta) { display: none; }
}

/* Mobile portrait */
@media (max-width: 640px) {
  .nav-links > a:not(.nav-cta) { display: none; }
  .themes-grid { grid-template-columns: repeat(4, 1fr); }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
  .footer-inner { flex-direction: column; text-align: center; }
  .hero-box-img { width: min(80vw, 300px); }
  .hero-headline { font-size: clamp(2.5rem, 8vw, 3.25rem); line-height: 1.02; }
  .hero-tagline { font-size: 1.0625rem; }
  .hero-sub { font-size: 0.9375rem; max-width: 36ch; }
  .hero-actions { flex-direction: column; align-items: center; gap: 0.75rem; }
  .hero-platform { font-size: 0.75rem; text-align: center; }
  .hero-screens { height: min(60vw, 280px); }
  .ss-wrap--front { width: clamp(110px, 30vw, 160px); }
  .ss-wrap--back  { width: clamp(90px, 26vw, 130px); }
}

@media (max-width: 400px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: span 1; }
}

/* ─── BURGER MENU ─── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-burger:hover { background: var(--on-surface-12); }
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--on-surface);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav panel */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 98;
  background: var(--surface);
  padding-top: 5rem;
  padding-bottom: 2rem;
  padding-inline: clamp(1.25rem, 6vw, 2.5rem);
  transform: translateY(-110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  border-bottom: 1px solid var(--on-surface-12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}
.nav-mobile.is-open { transform: translateY(0); }
.nav-mobile-links {
  display: flex;
  flex-direction: column;
}
.nav-mobile-links a {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface);
  padding: 1rem 0;
  border-bottom: 1px solid var(--on-surface-12);
  transition: color 0.15s;
}
.nav-mobile-links a:last-child { border-bottom: none; }
.nav-mobile-links a:active { color: var(--red); }
.nav-mobile-bottom {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .nav-burger { display: flex; }
  .nav-mobile { display: block; }
  .nav-links .nav-cta { display: none; }
  .lang-dropdown-btn { padding: 0.5rem 0.25rem; min-height: 44px; }
  .lang-dropdown-menu { min-width: 160px; }
}

/* ─── MOBILE SCROLL EFFECTS ─── */
@supports (animation-timeline: scroll()) {
  @media (max-width: 768px) {

    /* Scroll progress bar */
    body::after {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--red);
      transform-origin: left;
      transform: scaleX(0);
      z-index: 999;
      animation: m-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes m-progress {
      to { transform: scaleX(1); }
    }

    /* Feature visual entrance via scroll-driven animation
       (replaces the JS IntersectionObserver for these elements) */
    .feature-visual {
      animation: m-visual linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    @keyframes m-visual {
      from { opacity: 0; transform: scale(0.94) translateY(32px); }
      to   { opacity: 1; transform: none; }
    }

    /* Hero box subtle parallax */
    .hero-box-img {
      animation: m-hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0% 40%;
    }
    @keyframes m-hero-parallax {
      to { transform: translateY(-40px) scale(0.97); }
    }
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .theme-tile-bg { transition: none; }
  .hero-box-img { transition: none; animation: none; }
  body { transition: none; }
  body::after { animation: none; }
  .feature-visual { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CZECH HOMEPAGE ONLY — Speedrun link and the summer price label

   Nothing below can reach another locale. Every locale has its own index.html and
   only the Czech one emits `.nav-speedrun`; there is no markup to hide elsewhere and
   no existing rule is touched, so the other ten pages render byte for byte as they
   did. /speedrun loads this file too but never uses that name.

   The price label used to be drawn here in CSS. It is now part of the Czech hero
   renders themselves, so the rules that placed it are gone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A campaign runs for a few weeks and the navigation is where it is announced, so
   this one item is inked rather than merely coloured: a red word among grey words
   still reads as another link and gets skipped. It is a chip, not a banner — the
   type is the navigation's own size and weight, it sits on the same baseline as
   its neighbours, and it is shorter than the theme button beside it, so the bar
   does not grow by a pixel. */
.nav-links a.nav-speedrun {
  background: var(--red);
  color: var(--cream);
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.nav-links a.nav-speedrun:hover {
  background: var(--on-surface);
  color: var(--surface);
}
/* The mobile panel is a column of 22px words, where colour alone is already loud.
   A chip there would fight the list's own rhythm, so it keeps the red. */
.nav-mobile-links a.nav-speedrun { color: var(--red); }
.nav-mobile-links a.nav-speedrun:hover { color: var(--on-surface); }

/* ─── CZECH ONLY: DIGITCA × DISH — Speedrun event sticker in the nav ─────────
   Markup exists only in the Czech index.html. A small acid-lime ticket with an
   ink edge and a magenta lift, stuck dead-centre of the bar and a hair off
   level, like a label slapped on by hand. Colours are the speedrun page's own
   (--sr-acid #D9F227, --sr-magenta #FF2E7E) and are fixed — same in both
   themes, because a sticker does not change with the light. */
.nav-event {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: #15120E;
  background: #D9F227;
  border: 2px solid #15120E;
  box-shadow: 3px 3px 0 #FF2E7E;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.nav-event:hover {
  transform: translate(-50%, -50%) rotate(0deg) translateY(-1px);
  box-shadow: 5px 5px 0 #FF2E7E;
}
.nav-event:active {
  transform: translate(-50%, -50%) translate(2px, 2px);
  box-shadow: 1px 1px 0 #FF2E7E;
}
.nav-event-dot, .nav-event-x { color: #FF2E7E; }
.nav-event-x { font-weight: 400; }
.nav-event-sep { opacity: 0.45; }
.nav-event-name { font-weight: 700; }
/* the live dot: it is on, and it is happening */
.nav-event-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF2E7E;
  animation: nav-event-blink 1.4s ease-in-out infinite;
}
@keyframes nav-event-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .nav-event-live { animation: none; } }

/* Mobile: the bar gets a second row and the sticker sits centred in it. */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; row-gap: 0.625rem; }
  .nav::after { content: ''; flex-basis: 100%; order: 9; height: 0; } /* forces the line break */
  .nav-event {
    position: static; order: 10; flex: 0 0 auto;
    margin-inline: auto;
    transform: rotate(-1deg);
    font-size: 0.625rem; padding: 0.35rem 0.7rem;
  }
  .nav-event:hover  { transform: rotate(0deg); }
  .nav-event:active { transform: translate(2px, 2px); }
  /* the bar is taller now; keep the hero clear of it (Czech page only, via :has) */
  body:has(.nav-event) .hero { padding-top: 8rem; }
}
@media (max-width: 400px) {
  .nav-event { font-size: 0.5625rem; letter-spacing: 0.08em; gap: 0.4rem; }
}

/* Same sticker inside the burger panel. */
.nav-mobile-links a.nav-speedrun {
  display: inline-block; width: max-content;
  margin-block: 0.75rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #15120E; background: #D9F227;
  border: 2px solid #15120E; box-shadow: 3px 3px 0 #FF2E7E;
  transform: rotate(-1deg);
}
.nav-mobile-links a.nav-speedrun:hover,
.nav-mobile-links a.nav-speedrun:active { color: #15120E; }

/* ─── CZECH ONLY: App Store rating in the hero, reviews before pricing,
   Full card marked as the recommended one. Markup exists only in the
   Czech index.html; nothing here matches on the other locales. ─────────── */

/* Hero rating: sits beside the App Store badge, same height, reads as a spec line */
.hero-rating {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 40px; padding: 0 0.85rem;
  border: 1px solid var(--on-surface-12);
  border-radius: 6px;
  color: var(--on-surface);
  transition: border-color 0.15s, background 0.15s;
}
.hero-rating:hover { border-color: var(--on-surface-50); background: var(--on-surface-06); }
.hero-rating-stars { display: inline-flex; gap: 2px; }
.hero-rating-stars i {
  width: 11px; height: 11px; display: block;
  background: var(--red);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hero-rating-stars i.half {
  background: linear-gradient(to right, var(--red) 50%, var(--on-surface-12) 50%);
}
.hero-rating-num { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
.hero-rating-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-gray); }

/* Reviews */
.reviews {
  padding: clamp(4rem, 9vh, 7rem) 0 0;
  background: var(--surface);
  transition: background 0.3s;
}
.reviews-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-gray);
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.reviews-label-stars { color: var(--red); letter-spacing: 0.08em; margin-right: 0.35rem; }
.reviews-lead { margin: 0 auto clamp(2.5rem, 5vw, 4rem); max-width: 36ch; text-align: center; }
.reviews-lead blockquote { margin: 0; }
.reviews-lead p {
  font-family: var(--font-headline);
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-style: italic; font-weight: 400;
  line-height: 1.3;
  color: var(--on-surface);
}
.reviews-lead em { font-style: normal; color: var(--red); }
.reviews-lead figcaption,
.reviews-card figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-gray);
}
.reviews-lead figcaption { margin-top: 1.25rem; }
.reviews-stars { color: var(--red); font-size: 0.75rem; letter-spacing: 0.1em; }
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  max-width: 1000px; margin-inline: auto;
}
.reviews-card {
  margin: 0; padding: 1.5rem 1.625rem;
  border: 1.5px solid var(--on-surface-12);
  border-radius: 4px;
  background: var(--on-surface-06);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.reviews-card blockquote { margin: 0; flex: 1; }
.reviews-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--on-surface-80); }
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* Pricing: Full is the one to pick — red frame, red glow, the old price struck through,
   and a deadline line under the price. The free card steps back a little. */
.pricing-card--recommended {
  border: 2px solid var(--red);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 0 6px color-mix(in srgb, var(--red) 18%, transparent),
    0 24px 56px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.20);
}
.pricing-card--recommended:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 0 8px color-mix(in srgb, var(--red) 24%, transparent),
    0 32px 72px rgba(0,0,0,0.40),
    0 12px 24px rgba(0,0,0,0.22);
}
.pricing-card--recommended .pricing-card-badge { display: inline-block; font-size: 0.65rem; padding: 0.35rem 1rem; }
.pricing-card--recommended .price s { text-decoration-thickness: 1.5px; margin-right: 0.15em; }
.pricing-card--premium { --pricing-accent: #f28b68; }
[data-theme="dark"] .pricing-card--premium { --pricing-accent: #a83e20; }
.pricing-card--recommended .price strong { color: var(--pricing-accent); font-weight: 600; font-size: 1.15em; }
.pricing-card-deadline {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--pricing-accent);
}
.pricing-cards:has(.pricing-card--recommended) .pricing-card:not(.pricing-card--recommended) { opacity: 0.82; }
@media (min-width: 641px) {
  .pricing-card--recommended { transform: scale(1.05); }
  .pricing-card--recommended:hover { transform: scale(1.05) translateY(-2px); }
}

/* ─── Videos with a baked-in background: no blend, no shadow. The light NL and
   converter clips carry the section's own cream (#F3EEE0) around the phone, so
   they sit on the page directly; multiply would only darken them and Chrome
   skips blend on playing video anyway. ─────────────────────────────────────── */
#f-hlas .video-theme-light,
#f-prevodnik .video-theme-light { mix-blend-mode: normal; filter: none; }

/* Hero tagline "A počítá s tebou." — 15 % up */
.hero-tagline { font-size: 1.15rem; }
@media (max-width: 900px) { .hero-tagline { font-size: 1.22rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE MOCKUP SYSTEM — one phone width across the five phone sections, the
   iPad as the single big moment, every visual centred on its text.
   Crops are defined by the phone's width and a visible aspect, not by box height,
   so the box is exactly what you see and centring is honest.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --phone-w: clamp(280px, 27.8vw, 400px);   /* 400 at 1440 */
  --ipad-w:  clamp(520px, 48.6vw, 700px);   /* 700 at 1440 — 2.2× a phone's area */
}
.feature-visual { filter: none; }
.feature-inner .mockup-img { transform: none; scale: 1; transition: scale 0.4s var(--ease-out); }
.feature-visual:hover .mockup-img { scale: 1.02; }

/* Full phones */
#f-prevodnik .mockup-img,
#f-sci .mockup-img { width: var(--phone-w); }

/* Cropped phones: box width = phone width */
.tape-crop, .nl-crop, .export-crop {
  width: var(--phone-w);
  overflow: hidden;
  display: flex;
}
.tape-crop .mockup-img, .nl-crop .mockup-img, .export-crop .mockup-img { width: 100%; height: auto; flex-shrink: 0; }
/* Páska — top of the phone down to the C 4 5 6 row, bottom edge softened */
.tape-crop  { aspect-ratio: 540 / 700; align-items: flex-start;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); }
/* Řekni to — the clip is already cut at the top; box = clip */
.nl-crop    { aspect-ratio: 540 / 830; align-items: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 4%); }
/* Export — bottom of the phone with the share sheet */
.export-crop { aspect-ratio: 540 / 710; align-items: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 4%); }

/* Archiv — the moment: landscape iPad, wider column, device corners as rendered */
#f-archiv .feature-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
#f-archiv .feature-visual { justify-content: flex-start; overflow: visible; }
#f-archiv .mockup-img { width: var(--ipad-w); max-width: none; border-radius: 36px !important; }  /* bleeds past the column, like the hero carton */

@media (max-width: 900px) {
  :root { --phone-w: clamp(200px, 59vw, 260px); --ipad-w: clamp(300px, 86vw, 400px); }
  .feature { padding: 4rem 0; }
  #f-archiv .feature-inner { grid-template-columns: 1fr; }
  #f-archiv .feature-visual { justify-content: center; }
  #f-archiv .mockup-img { max-width: 100%; }
  #f-archiv .mockup-img { border-radius: 23px !important; }
  .feature-visual:hover .mockup-img { scale: 1; }
}
/* specificity overrides for older per-section rules above */
#f-export .export-crop .mockup-img { width: 100%; }
#f-paska .feature-visual { justify-content: center; padding-left: 0; }