/* ═══════════════════════════════════════════════════════════════════
   RetinaTag — Landing styles
   Warm-dark, archival, photographic. Inspired by stipple plugin pages
   and the actual app's copper-on-deep-brown palette.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Warm-dark base — matches the actual app */
  --bg:        #0E0C0B;
  --bg2:       #15110F;
  --bg3:       #1F1916;
  --bg4:       #2A2320;
  --text:      #ECE5D4;
  --muted:     #8A8378;
  --dim:       #5E5751;
  --border:    rgba(255, 240, 220, 0.06);
  --border2:   rgba(255, 240, 220, 0.10);
  --border3:   rgba(255, 240, 220, 0.18);

  /* Brand accents — copper, red, cream */
  --copper:    #C97C4D;
  --copper2:   #DA8E5E;
  --copper-soft: rgba(201, 124, 77, 0.16);
  --copper-glow: rgba(201, 124, 77, 0.22);
  --red:       #D04438;
  --red2:      #E25647;
  --gold:      #F0B760;
  --green:     #4ADE80;

  /* Type */
  --display: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif;
  --sans:    'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing & rhythm */
  --pad-h:   clamp(20px, 5vw, 64px);
  --ease:    cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* ─── Reset & base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01" on, "cv01" on;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg { max-width: 100%; display: block; }
.mono { font-family: var(--mono); }

/* TR loading flash-prevention */
.i18n-loading body { opacity: 0; transition: opacity 0.15s; }

/* Selection */
::selection { background: var(--copper); color: var(--bg); }

/* Subtle film grain — uniformly applied to body via SVG noise */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.045;
  mix-blend-mode: overlay;
  animation: grainShift 7s steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ─── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  padding: 0 var(--pad-h);
  background: rgba(14, 12, 11, 0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-left  { display: flex; align-items: center; gap: 14px; }
.nav-home  {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  text-transform: lowercase; letter-spacing: 0.04em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.nav-home:hover {
  color: var(--text);
  border-color: var(--border2);
  background: rgba(255, 240, 220, 0.03);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo  { width: 24px; height: 24px; }
.nav-wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: 17px; letter-spacing: -0.01em;
}
.nav-wordmark .dot { color: var(--copper); }

.nav-links { display: flex; align-items: center; gap: 26px; }
@media (max-width: 880px) { .nav-links { display: none; } }
.nav-link {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em;
  transition: color 200ms var(--ease);
}
.nav-link:hover { color: var(--text); }

.nav-cta {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  background: var(--copper); color: #1A130F;
  padding: 12px 22px;
  border-radius: 6px;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.nav-cta:hover { background: var(--copper2); transform: translateY(-1px); }

/* Lang switcher */
.lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 16px; margin-right: 8px;
}
.lang-switch .lang-btn {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 4px 6px;
  opacity: 0.6;
  transition: color 180ms var(--ease), opacity 180ms var(--ease);
}
.lang-switch .lang-btn:hover { opacity: 0.9; color: var(--text); }
.lang-switch .lang-btn.active { color: var(--copper); opacity: 1; font-weight: 700; }
.lang-sep { color: var(--dim); font-size: 11px; }

/* ─── Stipple background — fixed, full-viewport ───────────────────── */
#stipple-mount {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(201, 124, 77, 0.06), transparent 70%),
    radial-gradient(50% 50% at 20% 90%, rgba(208, 68, 56, 0.04), transparent 70%),
    var(--bg);
}
#stipple-mount canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: auto;  /* canvas itself receives clicks (window listener filters) */
}

/* All page content sits above the stipple */
.nav, .hero, .strip, .section, .manifesto, .download, .pricing, .faq, .final-cta, .footer {
  position: relative;
  z-index: 1;
}

/* ─── Hero — single column, centered, transparent over stipple ────── */
.hero {
  padding: 160px var(--pad-h) 110px;
  text-align: center;
  background: transparent;
}
.hero-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 60px) clamp(28px, 5vw, 56px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Defensive: ensure all children are centered */
  text-align: center;
}
.hero-inner .hero-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hero-logo {
  margin: 0 auto 36px;
  width: clamp(160px, 18vw, 240px);
  height: auto;
  position: relative;
  filter: drop-shadow(0 0 60px rgba(201, 124, 77, 0.45));
  animation: logoFloat 6s ease-in-out infinite;
}
.hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero-copy { max-width: 600px; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--copper);
  background: var(--copper-soft);
  border: 1px solid rgba(201, 124, 77, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.kicker::before {
  content: '●';
  color: var(--copper);
  font-size: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* Numbered kicker — "01 / Semantic search" */
.kicker-num {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--copper);
  margin-right: 8px;
}
.kicker-num::after {
  content: ' /';
  color: var(--dim);
  font-weight: 500;
  margin-left: 3px;
}

/* ─── How it works — 4-step list ──────────────────────────────────── */
.how-steps {
  list-style: none;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px)  { .how-steps { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (min-width: 1100px) { .how-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.how-step {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(31, 25, 22, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.how-step::before {
  /* Top-left copper spark — quiet brand mark */
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 10px rgba(201, 124, 77, 0.6);
}
.how-num {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  color: var(--copper);
  letter-spacing: 0.18em;
  margin-bottom: 14px;
}
.how-num::after {
  content: ' / 04';
  color: var(--dim);
  font-weight: 500;
}
.how-step h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.how-step p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}
.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
  display: flex; flex-direction: column;
}
.hero-title-accent { color: var(--copper); }
.hero-title em {
  font-style: normal;
  background: linear-gradient(110deg, var(--copper) 35%, var(--gold) 50%, var(--copper) 65%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}
.hero-sub {
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }

.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 18px;
}
.cta-row--center {
  justify-content: center;
  margin-bottom: 26px;
}
/* Equal-width CTA buttons in centered rows.
   Each button takes 1fr of available space, with a 220px floor so they
   never get cramped. white-space:nowrap on the small caption stops the
   sub-text from wrapping and making one button taller than the other. */
.cta-row--center .cta {
  flex: 1 1 0;
  min-width: 220px;
  max-width: 320px;
  justify-content: flex-start;
}
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
  flex: 1 1 0;
  min-width: 220px;
}
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cta-stack strong { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.cta-stack small { font-size: 10px; color: inherit; opacity: 0.85; letter-spacing: 0.06em; white-space: nowrap; }
.cta-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 240, 220, 0.08);
  flex-shrink: 0;
}
.cta-icon svg { width: 16px; height: 16px; }
.cta-primary {
  background: var(--copper);
  color: #1A130F;
}
.cta-primary:hover { background: var(--copper2); transform: translateY(-2px); }
.cta-primary .cta-icon { background: rgba(0, 0, 0, 0.12); }
.cta-secondary {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
}
.cta-secondary:hover { background: rgba(255, 240, 220, 0.04); border-color: var(--border3); transform: translateY(-2px); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--copper); }

/* ─── Trust strip ─────────────────────────────────────────────────── */
/* "Silindir": the strip-row floats as a solid dark pill/cylinder over
   the stipple. No transparency — the dots stop at the cylinder edge so
   text inside reads cleanly. Chips lose their own backgrounds so the
   surface looks like one continuous capsule. */
.strip {
  padding: 36px var(--pad-h);
  background: transparent;
  border-top: none;
  border-bottom: none;
  display: flex;
  justify-content: center;
}
.strip-row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  /* The cylinder itself — solid, no see-through */
  background: linear-gradient(180deg, #1c1612 0%, #14100c 50%, #100d0a 100%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 170, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  max-width: fit-content;
  margin: 0 auto;
}
.strip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  position: relative;
}
/* Subtle vertical separators between chips (but not after the last) */
.strip-chip:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 220, 170, 0.10);
}
.strip-chip strong {
  font-weight: 700;
  color: var(--copper);
  font-size: 12px;
}

/* ─── Section frame ───────────────────────────────────────────────── */
/* Sections are fully transparent — the stipple covers the entire page.
   Inner content cards (.problem-card, .how-step, .feature-shot,
   .price-card, .faq-item) carry their own translucent backgrounds so
   text stays legible. */
.section {
  padding: clamp(72px, 11vw, 130px) var(--pad-h);
  position: relative;
  background: transparent;
}
.section--bordered {
  border-top: 1px solid var(--border);
}
.section--alt {
  background: transparent;
}
.section-header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
  /* Translucent panel — readable over the stipple */
  padding: 36px clamp(24px, 4vw, 44px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.section-header .kicker { margin-bottom: 18px; }
.section-header h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.section-header h2 em {
  font-style: normal;
  color: var(--copper);
}
.section-header p {
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Problem section (split) ─────────────────────────────────────── */
.problem-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .problem-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.problem-card {
  padding: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  /* Solid dark base + blur — readable over the stipple background */
  background: rgba(14, 12, 11, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.problem-card--bad {
  /* Solid base + faint red tint from top */
  background:
    linear-gradient(180deg, rgba(208, 68, 56, 0.10), rgba(208, 68, 56, 0.02) 70%),
    rgba(14, 12, 11, 0.82);
  border-color: rgba(208, 68, 56, 0.22);
}
.problem-card--good {
  /* Solid base + faint copper tint from top */
  background:
    linear-gradient(180deg, rgba(201, 124, 77, 0.12), rgba(201, 124, 77, 0.02) 70%),
    rgba(14, 12, 11, 0.82);
  border-color: rgba(201, 124, 77, 0.28);
}
.problem-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.problem-card--bad .problem-tag { color: var(--red2); }
.problem-card--good .problem-tag { color: var(--copper); }
.problem-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.problem-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ─── Feature blocks (alternating image/text) ─────────────────────── */
.feature {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.feature + .feature { margin-top: clamp(72px, 9vw, 110px); }
@media (min-width: 980px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 60px; }
  .feature--reverse .feature-text  { order: 2; }
  .feature--reverse .feature-shot  { order: 1; }
}
.feature-text {
  max-width: 540px;
  padding: clamp(28px, 4vw, 38px) clamp(24px, 3.5vw, 36px);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.feature-text .kicker { margin-bottom: 16px; }
.feature-text h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.feature-text h3 em {
  font-style: normal;
  color: var(--copper);
}
.feature-text p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.feature-text p strong { color: var(--text); font-weight: 600; }
.feature-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
.feature-list li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text);
  line-height: 1.55;
}
.feature-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--copper);
  margin-top: 8px;
}
.feature-list li strong { color: var(--text); font-weight: 700; }

.feature-shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border2);
  background: var(--bg2);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.45),
    0 0 0 1px rgba(201, 124, 77, 0.08);
}
.feature-shot img {
  width: 100%; height: auto; display: block;
}
.feature-shot--cinema {
  /* Used for wide screenshots (timeline) — softer treatment */
  background: var(--bg);
}
.feature-shot--narrow {
  /* Tall narrow images (sidebar, photo detail panel) — center + cap height */
  background: var(--bg2);
  display: flex;
  justify-content: center;
}
.feature-shot--narrow img {
  max-height: 640px;
  width: auto;
  margin: 0 auto;
}
.feature-shot-cap {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: rgba(14, 12, 11, 0.78);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
}

/* ─── Privacy manifesto (full-bleed pull-quote) ───────────────────── */
.manifesto {
  padding: clamp(80px, 11vw, 130px) var(--pad-h);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  /* Transparent — let the stipple bleed through this section. */
  background: transparent;
}
.manifesto::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 50%, rgba(201, 124, 77, 0.08), transparent 70%);
  pointer-events: none;
}
.manifesto-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.manifesto .kicker { margin-bottom: 22px; }
.manifesto-quote {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.manifesto-quote em {
  font-style: normal;
  color: var(--copper);
}
.manifesto-body {
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 28px;
}
.manifesto-list {
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.manifesto-list li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  color: var(--text);
  background: rgba(255, 240, 220, 0.02);
}
.manifesto-list li::before {
  content: '✓ ';
  color: var(--green);
  margin-right: 4px;
}

/* ─── Download tiles ──────────────────────────────────────────────── */
.download {
  padding: clamp(60px, 8vw, 90px) var(--pad-h);
  background: transparent;
}
.download-grid {
  max-width: 980px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .download-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.dl-tile {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.dl-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 124, 77, 0.35);
  background: var(--bg3);
}
.dl-tile-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--copper);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dl-tile-icon svg { width: 22px; height: 22px; color: #1A130F; }
.dl-tile-text { display: flex; flex-direction: column; gap: 4px; }
.dl-tile-text strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.dl-tile-text small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ─── Pricing card ────────────────────────────────────────────────── */
.pricing {
  padding: clamp(72px, 10vw, 120px) var(--pad-h);
  display: flex; flex-direction: column; align-items: center;
  background: transparent;
}
.price-card {
  width: 100%; max-width: 480px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(201, 124, 77, 0.08);
}
.price-card::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(201, 124, 77, 0.14), transparent 70%);
}
.price-card-inner { position: relative; }
.price-trial {
  text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.price-trial em {
  font-style: normal;
  background: linear-gradient(110deg, var(--copper) 35%, #fff 50%, var(--copper) 65%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
.price-trial-sub {
  text-align: center; color: var(--muted);
  font-size: 14px; margin-bottom: 26px;
}
.price-divider {
  display: flex; align-items: center; gap: 12px;
  text-align: center; color: var(--dim);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 22px;
}
.price-divider::before, .price-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.price-amount-free {
  text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(72px, 11vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 12px 0 18px;
  background: linear-gradient(110deg, var(--copper) 30%, #fff 50%, var(--copper) 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
.price-amount {
  text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(56px, 8vw, 76px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.price-amount-roll { display: inline-block; }
.price-amount.rolled .price-amount-roll {
  animation: rollIn 1.2s cubic-bezier(0.2,0.9,0.2,1) both;
}
@keyframes rollIn {
  0%   { transform: translateY(60%); opacity: 0; }
  50%  { transform: translateY(-8%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.price-currency { font-size: 0.5em; vertical-align: 0.7em; color: var(--muted); margin-right: 0.06em; }
.price-once {
  text-align: center; color: var(--copper);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 4px;
}
.price-forever {
  text-align: center; color: var(--muted);
  font-size: 14px; margin-bottom: 8px;
}
.price-no-sub {
  text-align: center; color: var(--gold);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.04em; font-weight: 500;
  margin-bottom: 24px;
}
.price-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 9px;
  margin-bottom: 28px;
}
.price-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text); line-height: 1.5;
}
.price-features svg {
  flex-shrink: 0; width: 16px; height: 16px;
  color: var(--copper); margin-top: 1px;
}
.price-features svg path {
  stroke: currentColor; stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.price-card.in-view .price-features svg path {
  animation: drawCheck 0.5s cubic-bezier(0.2,0.9,0.2,1) forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.price-card.in-view .price-features li:nth-child(1) svg path { animation-delay: 0.10s; }
.price-card.in-view .price-features li:nth-child(2) svg path { animation-delay: 0.16s; }
.price-card.in-view .price-features li:nth-child(3) svg path { animation-delay: 0.22s; }
.price-card.in-view .price-features li:nth-child(4) svg path { animation-delay: 0.28s; }
.price-card.in-view .price-features li:nth-child(5) svg path { animation-delay: 0.34s; }
.price-card.in-view .price-features li:nth-child(6) svg path { animation-delay: 0.40s; }
.price-card.in-view .price-features li:nth-child(7) svg path { animation-delay: 0.46s; }
.price-card.in-view .price-features li:nth-child(8) svg path { animation-delay: 0.52s; }

.price-cta {
  display: block; width: 100%;
  background: var(--copper); color: #1A130F;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center;
  padding: 14px 14px;
  border-radius: 10px;
  transition: background 200ms var(--ease), transform 180ms var(--ease);
}
.price-cta:hover { background: var(--copper2); transform: translateY(-1px); }
.price-trust {
  text-align: center; color: var(--dim);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  margin-top: 14px;
  opacity: 0;
  transition: opacity 0.6s ease 1.0s;
}
.price-card.in-view .price-trust { opacity: 1; }
.price-region {
  text-align: center; margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px; color: var(--dim); letter-spacing: 0.04em;
}
.price-region a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-region a:hover { color: var(--copper); }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq {
  padding: clamp(72px, 10vw, 120px) var(--pad-h);
  background: transparent;
}
.faq-list {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.faq-item {
  padding: 20px 26px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.faq-item[open] {
  border-color: rgba(201, 124, 77, 0.25);
  background: rgba(14, 12, 11, 0.70);
}
.faq-q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  list-style: none;
  letter-spacing: -0.005em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  color: var(--copper);
  font-size: 22px;
  font-weight: 300;
  transition: transform 240ms var(--ease);
  flex-shrink: 0;
  margin-left: 12px;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
  font-size: 14.5px; color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 620px;
}

/* ─── Final CTA ───────────────────────────────────────────────────── */
.final-cta {
  padding: clamp(80px, 12vw, 140px) var(--pad-h);
  text-align: center;
  border-top: 1px solid var(--border);
  background: transparent;
}
.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 60px) clamp(28px, 5vw, 56px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(14, 12, 11, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.final-cta h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.final-cta h2 em {
  font-style: normal;
  color: var(--copper);
}
.final-cta p {
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  margin-bottom: 32px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta .cta-row {
  justify-content: center;
  max-width: 540px; margin: 0 auto;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
  padding: 36px var(--pad-h) 28px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
}
.footer-brand img { width: 18px; height: 18px; }
.footer-brand .dot { color: var(--copper); }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-links a:hover { color: var(--copper); }
.footer-copy {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.06em;
}

/* ─── Reveal animations ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PASS — comprehensive overrides for ≤720px viewports.
   Tightens paddings, reduces panel chrome, stacks CTAs, sizes hero
   logo and title down so the first feature appears within one swipe.
   Stipple particle count is also reduced from canvas.js for perf.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Globals ── */
  :root { --pad-h: 18px; }
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* ── Nav ── */
  .nav { height: 56px; padding: 0 14px; }
  .nav-logo { width: 22px; height: 22px; }
  .nav-wordmark { font-size: 15px; }
  .nav-cta { padding: 8px 14px; font-size: 10px; }
  .lang-switch { margin-left: 8px; margin-right: 4px; }

  /* ── Hero ── */
  .hero { padding: 92px 14px 60px; }
  .hero-inner {
    padding: 28px 20px;
    border-radius: 16px;
  }
  .hero-logo {
    width: 110px;
    margin-bottom: 22px;
    filter: drop-shadow(0 0 36px rgba(201, 124, 77, 0.42));
  }
  .hero-title {
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .hero-title span { display: block; }
  .hero-sub {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 22px;
  }
  .hero-inner .hero-sub { max-width: 100%; }

  /* Stack CTAs full-width on mobile, no min-width fight */
  .cta-row { gap: 10px; }
  .cta-row--center .cta {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }
  .cta { padding: 13px 18px; }
  .cta-stack { align-items: flex-start; flex: 1; }
  .cta-stack strong { font-size: 13px; }
  .cta-stack small { font-size: 9.5px; }

  /* ── Trust strip cylinder (mobile) ── */
  .strip { padding: 22px 12px; }
  .strip-row {
    gap: 4px 2px;
    font-size: 10px;
    padding: 9px 14px;
    border-radius: 999px;
  }
  .strip-chip { padding: 3px 8px; }
  .strip-chip strong { font-size: 10.5px; }

  /* ── Sections / headers ── */
  .section { padding: 52px 14px; }
  .section-header {
    margin: 0 auto 36px;
    padding: 24px 18px;
    border-radius: 14px;
  }
  .section-header h2 { font-size: clamp(26px, 7vw, 34px); }
  .section-header p  { font-size: 14.5px; line-height: 1.6; }

  /* ── Problem section ── */
  .problem-card { padding: 22px 20px; border-radius: 12px; }
  .problem-card h3 { font-size: 19px; }
  .problem-card p { font-size: 14px; }

  /* ── How it works ── */
  .how-step { padding: 22px 20px 20px; border-radius: 12px; }
  .how-num { margin-bottom: 10px; }
  .how-step h4 { font-size: 16px; }
  .how-step p { font-size: 13.5px; line-height: 1.55; }

  /* ── Feature blocks ── */
  .feature { gap: 24px; }
  .feature + .feature { margin-top: 56px; }
  .feature-text {
    padding: 22px 20px;
    border-radius: 12px;
    max-width: 100%;
  }
  .feature-text .kicker { margin-bottom: 12px; font-size: 10px; }
  .kicker-num { letter-spacing: 0.14em; }
  .feature-text h3 { font-size: 22px; line-height: 1.18; }
  .feature-text p  { font-size: 14px; line-height: 1.6; }
  .feature-list li { font-size: 13.5px; padding: 10px 12px; }
  .feature-shot { border-radius: 10px; }
  .feature-shot img { border-radius: 10px; }
  /* Tall narrow shots (sidebar / photo-tags) — cap height harder */
  .feature-shot--narrow img { max-height: 460px; }

  /* ── Manifesto ── */
  .manifesto { padding: 60px 14px; }
  .manifesto-inner {
    padding: 32px 22px;
    border-radius: 16px;
  }
  .manifesto-quote { font-size: clamp(26px, 7.4vw, 34px); }
  .manifesto-body { font-size: 14.5px; line-height: 1.65; }

  /* ── Download tiles ── */
  .download { padding: 44px 14px; }
  .download-grid { grid-template-columns: 1fr; gap: 14px; }
  .dl-tile { padding: 22px 20px; }

  /* ── Pricing card ── */
  .pricing { padding: 52px 14px; }
  .price-card { padding: 0; }
  .price-card-inner { padding: 28px 22px; }
  .price-amount-free { font-size: clamp(56px, 18vw, 88px); margin: 8px 0 14px; }
  .price-no-sub { font-size: 13.5px; }
  .price-features li { font-size: 13.5px; padding: 10px 12px; }
  .price-cta { padding: 14px 18px; font-size: 13px; }

  /* ── FAQ ── */
  .faq { padding: 52px 14px; }
  .faq-item { padding: 16px 20px; border-radius: 10px; }
  .faq-q { font-size: 15px; }
  .faq-a { font-size: 13.5px; line-height: 1.6; }

  /* ── Final CTA ── */
  .final-cta { padding: 52px 14px; }
  .final-cta-inner {
    padding: 32px 22px;
    border-radius: 16px;
  }
  .final-cta h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .final-cta p { font-size: 14.5px; }

  /* ── Footer ── */
  .footer { padding: 24px 14px 20px; }
  .footer-inner { flex-direction: column; gap: 14px; align-items: flex-start; }
  .footer-links { flex-wrap: wrap; gap: 12px 16px; }
}

/* Even tighter for very narrow phones (≤380px) */
@media (max-width: 380px) {
  .hero-title { font-size: clamp(26px, 8.4vw, 36px); }
  .hero-logo { width: 96px; margin-bottom: 18px; }
  .hero-inner { padding: 22px 16px; }
  .feature-text h3 { font-size: 20px; }
  .price-amount-free { font-size: 64px; }
}

/* ─── Universal overflow guard for phones ───────────────────────
   Catches any element that would push horizontal scroll on small
   viewports. Allows long CTA text to wrap on phones. */
@media (max-width: 720px) {
  html, body { overflow-x: clip; max-width: 100vw; }
  p, li, h1, h2, h3, h4, h5, h6, span, a, label, td, th, dt, dd, figcaption {
    overflow-wrap: anywhere;
  }
  .cta-stack { min-width: 0; }
  .cta-stack strong, .cta-stack small {
    white-space: normal;
    word-break: keep-all;
  }
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }
  table { display: block; overflow-x: auto; max-width: 100%; }
  img, svg, video { max-width: 100%; height: auto; }
}