/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --bg3:       #1a1a1a;
  --border:    #2a2a2a;
  --text:      #f0f0f0;
  --muted:     #999999;
  --accent:    #f5c518;
  --accent2:   #e6b800;
  --danger:    #e05252;
  --radius:    10px;
  --radius-lg: 16px;
  --font:      -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --max-w:     1100px;
  --transition: 0.2s ease;
}

html { scroll-behavior: smooth; }

html, body {
  overscroll-behavior: none;
  overflow-x: hidden;
}
body {
  width: 100%;
  max-width: 100vw;
  position: relative;
}
@media (max-width: 768px) {
  html, body {
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
  }
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* min-height in dvh keeps short pages full-height as Telegram's collapsing top
     bar shrinks the viewport, instead of leaving a black gap. */
  min-height: 100dvh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 14px;
}
nav .nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 calc(20px + env(safe-area-inset-right, 0px)) 0 calc(20px + env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text);
}
.nav-logo span { color: var(--accent); }
.nav-cta {
  background: var(--accent); color: #000;
  padding: 8px 18px; border-radius: 8px;
  font-weight: 600; font-size: 0.85rem;
  white-space: nowrap;
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--accent2); color: #000; }
.nav-cta-short { display: none; }

@media (max-width: 540px) {
  .nav-cta-full  { display: none; }
  .nav-cta-short { display: inline; }
  .nav-cta { padding: 8px 14px; }
  nav .nav-inner > div { gap: 8px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  padding: 90px 0 70px;
  text-align: center;
}
.hero-badge {
  display: inline-block;
  background: rgba(245,197,24,0.12);
  color: var(--accent);
  border: 1px solid rgba(245,197,24,0.3);
  padding: 5px 14px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), #ff9500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  font-size: 1.15rem; color: var(--muted); max-width: 540px;
  margin: 0 auto 36px;
}
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: all var(--transition);
}
.btn-primary {
  background: var(--accent); color: #000;
}
.btn-primary:hover { background: var(--accent2); color: #000; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(245,197,24,0.3); }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--muted); background: var(--bg2); }

/* ── Features ─────────────────────────────────────────────────────────────── */
.features { padding: 60px 0; }
/* One panel holding tiles of deliberately different sizes — the cheat-sheet
   framing from inside the guide, but uneven. The sizes carry meaning: the
   device-specific promise is the tall hero tile, the two short claims stack
   beside it, and the LUT tile runs the full width because its Russian title
   is the longest string on the page. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.feature-card:nth-child(1) { grid-column: 1;      grid-row: 1 / span 2; }
.feature-card:nth-child(2) { grid-column: 2;      grid-row: 1; }
.feature-card:nth-child(4) { grid-column: 2;      grid-row: 2; }
.feature-card:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }

.feature-card {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 18px;
  transition: border-color var(--transition);
}
.feature-card:hover { border-color: rgba(245,197,24,0.28); }

/* The hero tile is the only one that gets the accent block; everything else
   carries a quiet inline mark so the panel has one focal point, not four. */
.feature-card:nth-child(1) .feature-icon {
  width: 40px; height: 40px;
  background: rgba(245,197,24,0.10);
  border: 1px solid rgba(245,197,24,0.20);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  color: var(--accent);
}
.feature-card:nth-child(1) .feature-icon svg { width: 20px; height: 20px; }

/* Out of flow, with only the first line of the title indented past it: a grid
   column or a float shortens every line, which splits long words. */
.feature-card:not(:nth-child(1)) .feature-icon {
  position: absolute;
  top: 18px;
  inset-inline-start: 16px;
  width: 16px; height: 16px;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  color: var(--accent);
}
.feature-card:not(:nth-child(1)) .feature-icon svg { width: 16px; height: 16px; }
/* Pad every line, not just the first. text-indent moved only line one, and the
   16px icon is taller than a 15px title line on a phone, so a wrapped second
   line ran straight under the icon. */
.feature-card:not(:nth-child(1)) h3 { padding-inline-start: 22px; min-height: 18px; }

.feature-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
  overflow-wrap: break-word;
}
.feature-card:nth-child(1) h3 { font-size: 1.05rem; }
.feature-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  overflow-wrap: break-word;
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.pricing {
  padding: 60px 0;
  text-align: center;
}
.pricing h2 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.pricing > .container > p { color: var(--muted); margin-bottom: 36px; }
.pricing-card {
  max-width: 420px; margin: 0 auto;
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.price-tag { font-size: 3.5rem; font-weight: 800; color: var(--accent); }
.price-tag sup { font-size: 1.5rem; vertical-align: super; }
.price-tag sub { font-size: 1rem; color: var(--muted); font-weight: 400; }
.price-desc { color: var(--muted); font-size: 0.9rem; margin: 8px 0 24px; }
.price-list { list-style: none; text-align: left; margin-bottom: 28px; }
.price-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  display: flex; align-items: center; gap: 10px;
}
.price-list li:last-child { border-bottom: none; }
.check { color: var(--accent); font-size: 1.1rem; }

@media (max-width: 700px) {
  .pricing { padding: 28px 0 40px; }
  .pricing > .container > p { margin-bottom: 24px; }
  .pricing-card { padding: 28px 22px; }
}

/* ── Section headings ─────────────────────────────────────────────────────── */
.section-title {
  text-align: center; margin-bottom: 40px;
}
.section-title h1,
.section-title h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 8px; }
.section-title p { color: var(--muted); }
@media (max-width: 700px) {
  .section-title { margin-bottom: 24px; }
}

/* ── Device Select page ───────────────────────────────────────────────────── */
.select-page { padding: 50px 0 80px; }
.select-page .section-title { margin-bottom: 32px; }

.device-group-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted); margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
}

/* White Apple-store style card */
.device-card {
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 16px 12px 14px;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12);
}
.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.18);
  border-color: rgba(245,197,24,0.6);
}
.device-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(245,197,24,0.2), 0 4px 14px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.device-card.selected::after {
  content: "✓";
  position: absolute; top: 9px; right: 10px;
  background: var(--accent); color: #000;
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
}

/* iPhone image */
.device-img-wrap {
  height: 118px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 10px;
}
.device-img {
  height: 112px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.22s ease;
}
.device-card:hover .device-img {
  transform: scale(1.06) translateY(-4px);
}
.device-card.selected .device-img {
  transform: translateY(-2px);
}

/* Text on white card — dark */
.device-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: #1d1d1f;
  margin-bottom: 4px;
  line-height: 1.3;
}
.device-chip {
  font-size: 0.68rem;
  color: #6e6e73;
  background: #f2f2f7;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
}

.select-footer {
  margin-top: 48px;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  max-width: 420px;
  margin-left: auto; margin-right: auto;
}

/* Status line above the form */
.selection-status {
  color: var(--muted);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 18px;
  transition: color 0.2s;
}
.selection-status.has-device {
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Unified pay form — brutalist / premium aesthetic */
.pay-form {
  display: flex; flex-direction: column; gap: 10px;
  background: #0a0a0a;
  border: 1px solid #1f1f1f;
  padding: 22px 22px 20px;
  border-radius: 14px;
  position: relative;
}
.pay-form::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(245,197,24,0.18), rgba(245,197,24,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s ease;
}

/* Armed state: device picked → form lights up to invite payment */
.pay-form.is-armed {
  border-color: rgba(245,197,24,0.32);
  box-shadow: 0 24px 60px -28px rgba(245,197,24,0.32),
              0 0 0 1px rgba(245,197,24,0.08);
  animation: payArm 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pay-form.is-armed::before {
  background: linear-gradient(180deg, rgba(245,197,24,0.45), rgba(245,197,24,0.05));
}
@keyframes payArm {
  0%   { transform: translateY(0); box-shadow: 0 0 0 0 rgba(245,197,24,0); }
  45%  { transform: translateY(-2px); box-shadow: 0 36px 80px -28px rgba(245,197,24,0.45),
                                                  0 0 0 2px rgba(245,197,24,0.18); }
  100% { transform: translateY(0); box-shadow: 0 24px 60px -28px rgba(245,197,24,0.32),
                                              0 0 0 1px rgba(245,197,24,0.08); }
}
.pay-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: -2px;
}
.pay-input {
  width: 100%;
  padding: 14px 16px;
  background: #000;
  border: 1.5px solid #222;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
}
.pay-input::placeholder { color: #555; font-weight: 400; }
.pay-input:hover { border-color: #333; }
.pay-input:focus {
  outline: none;
  border-color: var(--accent);
  background: #050505;
  box-shadow: 0 0 0 3px rgba(245,197,24,0.12);
}

.btn-buy {
  background: var(--accent); color: #000;
  padding: 15px 24px; border-radius: 8px;
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.01em;
  border: none; cursor: pointer;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
  opacity: 0.35; pointer-events: none;
  width: 100%;
  margin-top: 4px;
}
.btn-buy.active, .pay-primary:not(:disabled) { opacity: 1; pointer-events: all; }
.pay-primary:not(:disabled):hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(245,197,24,0.5);
}
.pay-primary:not(:disabled):active { transform: translateY(0); }

.pay-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 2px;
  color: #555;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pay-divider::before, .pay-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, #222, transparent);
}

.crypto-net-picker {
  display: flex;
  gap: 4px;
  margin: 6px 0 8px;
}
.crypto-net-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 1px solid #1a1a1a;
  background: #080808;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  user-select: none;
}
.crypto-net-option:hover { border-color: #2e2e2e; background: #0d0d0d; }
.crypto-net-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.crypto-net-option:has(input[type="radio"]:checked) {
  border-color: var(--accent, #f5c518);
  background: rgba(245,197,24,0.06);
}
.crypto-net-short {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  color: #c8c8c8;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  line-height: 1;
}
.crypto-net-option:has(input[type="radio"]:checked) .crypto-net-short {
  color: var(--accent, #f5c518);
}

.pay-secondary {
  width: 100%;
  padding: 13px 20px;
  background: transparent;
  color: #aaa;
  border: 1.5px solid #2a2a2a;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  opacity: 0.45;
  pointer-events: none;
}
.pay-secondary:not(:disabled) { opacity: 1; pointer-events: all; }
.pay-secondary:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245,197,24,0.04);
}

.select-secure-text {
  font-size: 0.72rem;
  color: #555;
  text-align: center;
  margin: 14px 0 0;
  letter-spacing: 0.02em;
}

/* ── Content (access) page ────────────────────────────────────────────────── */
.content-page { padding: 40px 0 80px; }
.content-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
.content-sidebar {
  position: sticky; top: 80px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.content-sidebar h3 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin-bottom: 14px;
}
.sidebar-nav { list-style: none; }
.sidebar-nav li a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 0.88rem; color: var(--muted);
  border-radius: 6px;
  transition: all var(--transition);
}
.sidebar-nav li a svg { flex-shrink: 0; opacity: 0.5; transition: opacity var(--transition); }
.sidebar-nav li a:hover svg, .sidebar-nav li a.active svg { opacity: 1; }
.sidebar-nav li a:hover {
  color: var(--text); background: var(--bg3);
}
.sidebar-nav li a.active {
  color: var(--accent); font-weight: 600;
  background: rgba(245,197,24,0.08);
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}

.content-body h2 {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.3px;
  margin: 48px 0 20px; padding-bottom: 0; border-bottom: none;
  scroll-margin-top: 90px; position: relative;
}
.content-body h2::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 14px;
  background: linear-gradient(to right, rgba(245,197,24,0.4), transparent 70%);
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 10px; }
.content-body p  { color: var(--muted); margin-bottom: 16px; font-size: 0.95rem; }
.content-body ul, .content-body ol {
  padding-left: 20px; margin-bottom: 16px;
}
.content-body li { color: var(--muted); font-size: 0.95rem; margin-bottom: 6px; }

/* Settings table */
.settings-table {
  width: 100%; border-collapse: collapse; margin: 20px 0;
  border-radius: var(--radius); overflow: hidden;
}
.settings-table th {
  background: var(--bg3); text-align: left;
  padding: 10px 16px; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
}
.settings-table td {
  padding: 12px 16px; border-top: 1px solid var(--border);
  font-size: 0.92rem;
}
.settings-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
.settings-table td:first-child { color: #aaaaaa; }
.settings-table td:last-child { font-weight: 600; color: var(--accent); }
.settings-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Steps list with connector line */
.steps-list {
  position: relative;
}
.steps-list::before {
  content: '';
  position: absolute;
  left: 34px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(245,197,24,0.55), rgba(245,197,24,0.08));
  pointer-events: none;
}

/* Step */
.step {
  display: flex; gap: 16px; margin-bottom: 14px;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(245,197,24,0.35);
  border-radius: var(--radius-lg);
  position: relative;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.step:hover {
  border-left-color: rgba(245,197,24,0.7);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
}
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--accent); color: #000;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 0 12px rgba(245,197,24,0.3);
}
.step-body h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.step-body p  { color: var(--muted); font-size: 0.9rem; margin: 0; }
.step-img { margin-top: 12px; }

/* TG banner */
.tg-banner {
  background: linear-gradient(135deg, rgba(0,136,204,0.18), rgba(0,136,204,0.05));
  border: 1px solid rgba(0,136,204,0.35);
  border-radius: var(--radius-lg);
  padding: 24px; margin: 24px 0;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 4px 24px rgba(0,136,204,0.08);
}
.tg-icon { font-size: 2.2rem; flex-shrink: 0; }
.tg-banner h4 { font-weight: 700; margin-bottom: 4px; }
.tg-banner p  { color: var(--muted); font-size: 0.88rem; margin: 0; }
.tg-banner a  { color: #29a8e0; font-weight: 600; }

/* ── Step screenshots ──────────────────────────────────────────────────────── */
.step-screenshot {
  margin: 16px 0 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.screenshot-img {
  width: 100%;
  display: block;
  border-radius: 0;
  max-height: 420px;
  object-fit: cover;
  background: #000;
}
.screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 24px 16px;
  color: #3a3a3a;
  font-size: 0.82rem;
  text-align: center;
  gap: 8px;
  background: var(--bg3);
  user-select: none;
}
.screenshot-placeholder svg { opacity: 0.2; }

/* App download banner */
.download-banner {
  background: linear-gradient(135deg, rgba(245,197,24,0.13), rgba(245,197,24,0.03));
  border: 1px solid rgba(245,197,24,0.28);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 4px 24px rgba(245,197,24,0.07);
}
.download-banner-icon { font-size: 2.4rem; flex-shrink: 0; }
.download-banner-info { flex: 1; min-width: 180px; }
.download-banner-info h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.download-banner-info p  { color: var(--muted); font-size: 0.88rem; margin: 0; }
.btn-appstore {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #000;
  padding: 10px 18px; border-radius: 10px;
  font-weight: 700; font-size: 0.9rem;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.btn-appstore:hover { opacity: 0.88; color: #000; }
.btn-appstore svg { width: 18px; height: 18px; }

/* Device header */
.device-header {
  background: linear-gradient(135deg, rgba(245,197,24,0.07) 0%, var(--bg2) 60%);
  border: 1px solid rgba(245,197,24,0.25);
  border-top: 2px solid rgba(245,197,24,0.45);
  border-radius: var(--radius-lg); padding: 24px;
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 16px;
}
.device-header-icon {
  width: 60px; height: 60px;
  background: rgba(245,197,24,0.13);
  border: 1px solid rgba(245,197,24,0.30);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(245,197,24,0.12);
}
.device-header-info h1 {
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(90deg, #f5c518, #f0f0f0 65%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.device-header-info p  { color: var(--muted); font-size: 0.88rem; margin: 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg2);
  position: relative;
  margin-top: 40px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Golden glow line at the top edge */
.footer-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245,197,24,0.45), transparent);
  pointer-events: none;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  padding: 64px 0 52px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

/* Brand column */
.footer-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  display: inline-block;
  margin-bottom: 14px;
  transition: opacity 0.15s;
}
.footer-logo:hover { opacity: 0.8; color: var(--text); }
.footer-logo span { color: var(--accent); }

.footer-tagline {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 240px;
}

.footer-cta {
  font-size: 0.875rem !important;
  padding: 10px 22px !important;
  display: inline-flex !important;
}

/* Nav columns */
.footer-links {
  display: flex;
  gap: 56px;
}

.footer-col h4 {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(153,153,153,0.55);
  font-weight: 700;
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
  color: rgba(240,240,240,0.55);
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--text); }
.footer-col a svg { opacity: 0.65; flex-shrink: 0; }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: 0.77rem;
  color: rgba(153,153,153,0.45);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.footer-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,197,24,0.55);
  flex-shrink: 0;
}

/* Blackmagic Cam icon in footer channel link */
.footer-bmc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

/* Advertising column */
.footer-ads-link {
  color: rgba(240,240,240,0.7) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.footer-ads-link:hover { color: var(--text) !important; }

.footer-ads-hint {
  font-size: 0.78rem;
  color: rgba(153,153,153,0.4);
  line-height: 1.45;
  max-width: 140px;
  margin-top: -2px;
}

@media (max-width: 700px) {
  .site-footer { margin-top: 24px; }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0 28px;
  }
  /* Product stays a full-height first column; Community and Advertising stack
     beside it as a second column so three lists read as two short columns
     instead of three long ones stacked to the bottom of the screen. */
  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-col:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .footer-col:nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer-col:nth-child(3) { grid-column: 2; grid-row: 2; }
  .footer-tagline { max-width: 100%; }
}

@media (max-width: 400px) {
  .footer-links { gap: 22px 14px; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-col li { margin-bottom: 9px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ── 404 / Error ──────────────────────────────────────────────────────────── */
.error-page {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; flex-direction: column; gap: 16px;
  padding: 60px 20px;
}
.error-page h1 { font-size: 5rem; font-weight: 800; color: var(--border); }
.error-page h2 { font-size: 1.5rem; font-weight: 700; }
.error-page p  { color: var(--muted); max-width: 400px; }

/* ── Cinema manifesto ─────────────────────────────────────────────────────── */
.manifesto {
  padding: 80px 0 90px;
  background: linear-gradient(180deg, var(--bg) 0%, #0d0d0d 40%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(245,197,24,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.manifesto-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.manifesto-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(245,197,24,0.3);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.manifesto-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 36px;
}
.manifesto-title span {
  color: var(--accent);
  position: relative;
}
.manifesto-title span::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.35;
  border-radius: 2px;
}
.manifesto-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
}
.manifesto-body p {
  font-size: 1.08rem;
  color: #aaa;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
}
.manifesto-body p strong { color: var(--text); }
.manifesto-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-wrap: wrap;
}
.mstat {
  flex: 1;
  min-width: 120px;
  padding: 24px 20px;
  text-align: center;
}
.mstat-num {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.mstat-label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.mstat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .manifesto-stats { flex-direction: column; }
  .mstat-divider { width: 80%; height: 1px; }
}

/* ── Language switcher ────────────────────────────────────────────────────── */
.lang-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.lang-btn:hover { color: var(--text); border-color: var(--border); }
.lang-btn.lang-active { color: var(--accent); border-color: rgba(245,197,24,0.4); }

/* ── Sidebar toggle (mobile only) ─────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Layout */
  .content-layout { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 50px; }
  .hero p { font-size: 1rem; }

  /* Device grid: always 2 columns on mobile */
  .device-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Inline pay form on mobile — sits below the device grid, no longer floating */
  .select-footer {
    margin-top: 36px;
    max-width: 460px;
  }
  .pay-form {
    padding: 20px 18px 18px;
    gap: 10px;
  }
  .selection-status { margin: 0 0 12px; font-size: 0.7rem; }
  .selection-status.has-device { font-size: 0.85rem; }
  .pay-label { font-size: 0.66rem; }
  .pay-input { padding: 13px 14px; font-size: 0.95rem; }
  .btn-buy { padding: 14px 20px; margin-top: 4px; font-size: 0.98rem; }
  .pay-divider { margin: 10px 0 4px; font-size: 0.64rem; }
  .pay-secondary { padding: 12px 18px; font-size: 0.9rem; }
  .select-secure-text { font-size: 0.68rem; margin-top: 12px; }

  /* Collapsible sidebar */
  .content-sidebar { position: static; }
  .sidebar-toggle {
    display: flex;
    width: 100%;
    padding: 11px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem; font-weight: 600;
    margin-bottom: 0;
  }
  .sidebar-toggle svg { transition: transform 0.2s ease; }
  .content-sidebar.collapsed .sidebar-toggle svg { transform: rotate(-90deg); }
  .content-sidebar.collapsed .sidebar-nav { display: none; }
  .content-sidebar .sidebar-nav { margin-top: 8px; }

  /* Bigger tap targets in sidebar */
  .sidebar-nav li a { padding: 10px 12px; font-size: 0.92rem; }
}

@media (max-width: 480px) {
  /* Hero */
  .hero { padding: 44px 0 36px; }
  .hero h1 { font-size: 1.9rem; letter-spacing: -1px; }
  .hero p { font-size: 0.95rem; margin-bottom: 28px; }
  .hero-badge { font-size: 0.72rem; margin-bottom: 16px; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-btns .btn { justify-content: center; }

  /* Buttons — min 44px touch target */
  .btn { padding: 13px 20px; font-size: 0.92rem; min-height: 44px; }
  .nav-cta { padding: 9px 16px; min-height: 38px; }

  /* Device cards — compact */
  .device-card { padding: 12px 8px 10px; border-radius: 14px; }
  .device-img-wrap { height: 88px; }
  .device-img { height: 80px; }
  .device-name { font-size: 0.75rem; }
  .device-chip { font-size: 0.62rem; padding: 2px 6px; }
  .device-group-label { font-size: 0.75rem; }

  /* Steps — tighter */
  .step { padding: 14px 12px; gap: 12px; }
  .step-num { width: 28px; height: 28px; font-size: 0.8rem; flex-shrink: 0; }
  .steps-list::before { left: 27px; }

  /* Settings table — scrollable */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
  .table-scroll .settings-table { margin: 0; min-width: 340px; }
  .settings-table td { padding: 10px 12px; font-size: 0.88rem; }
  .settings-table th { padding: 8px 12px; }

  /* Pricing */
  .pricing-card { padding: 24px 18px; }

  /* Restore bar — bigger tap target */
  .restore-bar { font-size: 0.78rem; padding: 10px 0; }
  .restore-bar .copy-btn { padding: 7px 14px; font-size: 0.82rem; min-height: 36px; }

  /* Manifesto */
  .manifesto { padding: 56px 0 64px; }
  .manifesto-label { font-size: 0.75rem; }
  .manifesto-title { font-size: clamp(1.9rem, 8vw, 3.2rem); }
  .manifesto-body p { font-size: 0.98rem; }
  .mstat { padding: 16px 12px; }
  .mstat-num { font-size: 1.4rem; }

  /* Error page */
  .error-page h1 { font-size: clamp(2rem, 18vw, 5rem); }

  /* Device content page */
  .device-header { padding: 16px; gap: 12px; }
  .device-header-info h1 { font-size: 1.15rem; }
  .content-body h2 { font-size: 1.35rem; margin: 32px 0 14px; }
  .content-body h3 { font-size: 1rem; }
  .tg-banner { padding: 16px; gap: 12px; }

  /* Section titles */
  .section-title h1,
  .section-title h2 { font-size: 1.55rem; }
}

/* ── Hero Video Background ─────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

.hero-video-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-video-bg video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.72) 0%,
    rgba(10,10,10,0.55) 50%,
    rgba(10,10,10,0.88) 100%
  );
}

/* ── Feature Icon Hover ─────────────────────────────────────────────────────── */
.feature-icon svg { transition: transform 0.25s ease; }
.feature-card:hover .feature-icon svg {
  transform: scale(1.18) rotate(-6deg);
}

/* ── Pricing Pulse ──────────────────────────────────────────────────────────── */
@keyframes price-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
.price-tag { animation: price-pulse 3.5s ease-in-out infinite; }

/* ── Scroll Reveal — single elements ───────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ── Scroll Reveal — staggered children ────────────────────────────────────── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.20s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.30s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.40s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.50s; }

/* ── Steps connector line draws top-to-bottom ───────────────────────────────── */
.steps-list::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.steps-list.is-visible::before { transform: scaleY(1); }

/* ── Reduced motion: disable all animations ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .steps-list::before { transform: scaleY(1) !important; transition: none !important; }
  .price-tag { animation: none !important; }
}

/* ── Timeline (horizontal steps) ───────────────────────────────────────────── */
.timeline-section { padding: 40px 0 60px; }

.timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.tl-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 0 8px;
}

.tl-num {
  width: 44px; height: 44px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tl-body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}
.tl-body p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.tl-arrow {
  flex-shrink: 0;
  color: rgba(245,197,24,0.35);
  padding-top: 10px;
  align-self: flex-start;
}

/* Mobile: vertical */
@media (max-width: 700px) {
  .timeline-section { padding: 20px 0 32px; }
  .timeline {
    flex-direction: column;
    gap: 0;
  }
  .tl-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 0 0;
    gap: 16px;
    padding-bottom: 24px;
  }
  .tl-step:last-child {
    padding-bottom: 0;
  }
  .tl-step:not(:last-child) {
    position: relative;
  }
  .tl-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: rgba(245, 197, 24, 0.25);
  }
  .tl-body { flex: 1; }
  .tl-arrow {
    display: none;
  }
}

/* ── Pricing ────────────────────────────────────────────────────────────────── */
.pricing { position: relative; }
.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(245,197,24,0.055) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.pricing > .container { position: relative; z-index: 1; }

/* Social proof */
.price-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}
.price-avatars { display: flex; }
.price-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: #fff;
  margin-left: -6px;
}
.price-avatars .price-avatar:first-child { margin-left: 0; }

/* ── Features split layout ──────────────────────────────────────────────────── */
.features-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: end;
}
.features-title-left { text-align: left; }

/* ── iPhone Mockup ──────────────────────────────────────────────────────────── */
.features-mockup {
  position: relative;
  display: flex;
  justify-content: center;
}
.iphone-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(245,197,24,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.iphone-frame {
  position: relative;
  z-index: 1;
  width: 240px;
  background: #1c1c1e;
  border-radius: 46px;
  border: 7px solid #3a3a3c;
  box-shadow:
    0 0 0 1px #555,
    inset 0 0 0 1px #2a2a2c,
    0 40px 80px rgba(0,0,0,0.7),
    0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  aspect-ratio: 9/19.5;
}
/* Dynamic island */
.iphone-di {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 28px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}
.iphone-screen {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}

/* Blackmagic Camera UI */
.bmc-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 52px 10px 8px;
  background: rgba(0,0,0,0.8);
  flex-wrap: wrap;
}
.bmc-val {
  font-size: 9px;
  font-weight: 600;
  color: #e0e0e0;
  letter-spacing: 0.02em;
  font-family: 'SF Mono', 'Menlo', monospace;
}
.bmc-val.accent { color: var(--accent); }
.bmc-sep {
  width: 1px;
  height: 10px;
  background: #444;
  flex-shrink: 0;
}

/* Viewfinder */
.bmc-vf {
  flex: 1;
  position: relative;
  background: #0a0a0a;
  overflow: hidden;
}
.bmc-vf-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
}
/* Rule-of-thirds grid */
.bmc-grid-line {
  position: absolute;
  background: rgba(255,255,255,0.07);
  z-index: 1;
}
.bmc-gl-v1 { top: 0; bottom: 0; left: 33.3%; width: 1px; }
.bmc-gl-v2 { top: 0; bottom: 0; left: 66.6%; width: 1px; }
.bmc-gl-h1 { left: 0; right: 0; top: 33.3%; height: 1px; }
.bmc-gl-h2 { left: 0; right: 0; top: 66.6%; height: 1px; }

/* Center cross */
.bmc-center-cross {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.bmc-cx-h {
  width: 16px; height: 1px;
  background: rgba(255,255,255,0.35);
  position: absolute;
  top: 0; left: -8px;
}
.bmc-cx-v {
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.35);
  position: absolute;
  top: -8px; left: 0;
}

/* WB label */
.bmc-wb-label {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 1;
  font-size: 8px; font-weight: 700;
  color: var(--accent);
  font-family: 'SF Mono', monospace;
  letter-spacing: 0.05em;
}

/* Exposure bar */
.bmc-exp-bar {
  position: absolute;
  right: 8px; top: 20%; bottom: 20%;
  z-index: 1;
  width: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}
.bmc-exp-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: rgba(245,197,24,0.5);
  border-radius: 2px;
}
.bmc-exp-marker {
  position: absolute;
  bottom: 55%;
  left: -3px; right: -3px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Bottom bar */
.bmc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 18px;
  background: rgba(0,0,0,0.85);
}
.bmc-side-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #aaa;
}
.bmc-rec-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}
.bmc-rec-btn:active { transform: scale(0.9); }
.bmc-rec-inner {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e03232;
  box-shadow: 0 0 12px rgba(224,50,50,0.6);
  transition: border-radius 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.bmc-rec-btn.recording .bmc-rec-inner {
  border-radius: 6px;
  width: 22px;
  height: 22px;
}

/* Recording timer */
.bmc-rec-timer {
  display: none;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 39px;
  z-index: 11;
}
.bmc-rec-timer.active { display: flex; }
.bmc-rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  animation: bmc-dot-blink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bmc-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}
.bmc-rec-time {
  font-size: 11px;
  font-weight: 700;
  color: #ff3b30;
  font-family: 'SF Mono', 'Menlo', monospace;
  letter-spacing: 0.06em;
}

/* Mobile: a full-height phone stacked above the copy pushed "one purchase,
   your device, perfect settings" a whole screen down. Instead the mockup is
   scaled to exactly half size and sits beside the heading, notebook-margin
   style — a small figure with a dash-led line of text next to it — while the
   feature grid keeps the full width it needs for the longer RU/AR strings.
   `.features-content` goes `display:contents` so its own children (heading,
   grid) become direct items of the outer grid without a markup change. */
@media (max-width: 860px) {
  .features {
    padding: 36px 0 40px;
  }
  .features-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    row-gap: 18px;
    align-items: center;
  }
  .features-content { display: contents; }
  .features-mockup {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    margin-top: 0;
    width: 150px;
    height: 326px;
    overflow: hidden;
    align-self: start;
    /* .features-mockup is itself a flex container (base rule); its default
       align-items:stretch was overriding the frame's aspect-ratio and
       squashing it toward square. flex-start lets the frame keep its own
       height instead of being stretched to fill this box. */
    align-items: flex-start;
  }
  .features-title-left {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    /* Grid items default to min-width:auto, which holds the column to the
       heading's unbroken intrinsic width and pushes it past the viewport
       edge instead of wrapping inside the narrow column next to the mockup. */
    min-width: 0;
  }
  .features-title-left h2 {
    font-size: 1.2rem;
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .features-title-left p { font-size: 0.85rem; }
  .features-grid {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .iphone-frame {
    width: 300px;
    min-height: 0;
    flex-shrink: 0;
    transform: scale(0.5);
    transform-origin: top center;
  }
  .iphone-glow { display: none; }
  /* A handwritten-notebook dash in front of the heading, now that it reads as
     a line item next to the mockup instead of a centred banner under it. */
  .features-title-left h2::before {
    content: "— ";
    color: var(--accent);
  }
}

@media (max-width: 480px) {
  .features-mockup { width: 140px; height: 304px; }
  .iphone-frame { width: 280px; }
  .features-title-left h2 { font-size: 1.08rem; }
}

/* ── Cinematic intro overlay ── */
#bmc-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
#bmc-intro.intro-exit {
  opacity: 0;
  pointer-events: none;
}
.intro-inner {
  text-align: center;
}
.intro-logo {
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  animation: intro-logo-in 0.6s ease 0.3s forwards;
}
.intro-brand { color: #fff; }
.intro-cam   { color: var(--accent); }
.intro-line {
  height: 1px;
  background: var(--accent);
  width: 0;
  margin: 20px auto 0;
  animation: intro-line-expand 0.5s ease 1.1s forwards;
}
.intro-rec {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  opacity: 0;
  animation: intro-rec-in 0.3s ease 1.6s forwards;
}
.intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  animation: intro-dot-blink 0.4s ease 1.7s 2 alternate;
}
.intro-rec-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #e53935;
}
@keyframes intro-logo-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-line-expand {
  to { width: min(280px, 60vw); }
}
@keyframes intro-rec-in {
  to { opacity: 1; }
}
@keyframes intro-dot-blink {
  to { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  #bmc-intro { display: none; }
}

/* ── Hero → Manifesto wave ─────────────────────────────────────────────────── */
.hero-wave {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 70px;
}
@media (max-width: 480px) {
  .hero-wave svg { height: 44px; }
}

/* ── Features → Timeline divider ──────────────────────────────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px 48px;
}
.section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}
.section-divider-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(153,153,153,0.55);
  white-space: nowrap;
  font-weight: 600;
}
@media (max-width: 700px) {
  .section-divider { padding: 0 20px 24px; }
}

/* ── Timeline → Pricing cinematic break ───────────────────────────────────── */
.cinematic-break {
  padding: 48px 20px 56px;
  text-align: center;
  position: relative;
}
/* A one-line quote does not need 104px of vertical padding on a phone — it read
   as a gap between sections rather than a divider. */
@media (max-width: 640px) {
  .cinematic-break { padding: 26px 20px 30px; }
  .cinematic-break-inner { margin-bottom: 14px; }
}
.cinematic-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(245,197,24,0.035) 0%, transparent 70%);
  pointer-events: none;
}
.cinematic-break-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto 20px;
}
.cinematic-break-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245,197,24,0.25), transparent);
}
.cinematic-break-icon {
  color: rgba(245,197,24,0.5);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cinematic-break-quote {
  font-size: 0.88rem;
  color: rgba(153,153,153,0.5);
  font-style: italic;
  letter-spacing: 0.01em;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Devices section ───────────────────────────────────────────────────────── */
.devices-section {
  padding: 60px 0 100px;
  border-top: 1px solid var(--border);
}

/* ── Quick-reference card ───────────────────────────────────────────────────── */
.quick-ref {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.quick-ref-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 14px;
}
.quick-ref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.quick-ref-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
}
.quick-ref-item .qr-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.quick-ref-item .qr-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, 'SF Mono', monospace;
}
@media (max-width: 640px) {
  .quick-ref-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Inline value badge ─────────────────────────────────────────────────────── */
.val {
  display: inline-block;
  background: rgba(245,197,24,0.1);
  color: var(--accent);
  font-size: 0.82em;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  font-family: ui-monospace, 'SF Mono', monospace;
  border: 1px solid rgba(245,197,24,0.2);
  white-space: nowrap;
}

/* ── Pro-tip callout ────────────────────────────────────────────────────────── */
.pro-tip {
  background: linear-gradient(135deg, rgba(245,197,24,0.07), rgba(245,197,24,0.02));
  border: 1px solid rgba(245,197,24,0.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin: 14px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pro-tip-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: rgba(245,197,24,0.12);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-top: 1px;
}
.pro-tip-label {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.pro-tip-body {
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.6;
}
.pro-tip-body strong { color: var(--text); }

/* ── Device-specific callout ────────────────────────────────────────────────── */
.device-callout {
  background: linear-gradient(135deg, rgba(245,197,24,0.09), rgba(245,197,24,0.02));
  border: 1px solid rgba(245,197,24,0.22);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.device-callout-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  background: rgba(245,197,24,0.12);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.device-callout-body { font-size: 0.87rem; color: var(--muted); line-height: 1.6; }
.device-callout-body strong { color: var(--text); }

/* ── Step done / checkmark ──────────────────────────────────────────────────── */
.steps-list .step { cursor: pointer; user-select: none; }
.step.done {
  opacity: 0.48;
  border-left-color: rgba(245,197,24,0.1) !important;
  box-shadow: none !important;
}
.step.done .step-num {
  background: transparent;
  border: 2px solid rgba(245,197,24,0.45);
  color: var(--accent);
  font-size: 0;
  box-shadow: none;
}
.step.done .step-num::after {
  content: '✓';
  font-size: 0.9rem;
}

/* ── Sidebar progress bar ───────────────────────────────────────────────────── */
.sidebar-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-progress-label {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.35s ease;
  width: 0%;
}

/* ── Time badge ─────────────────────────────────────────────────────────────── */
.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  background: rgba(245,197,24,0.07);
  border: 1px solid rgba(245,197,24,0.16);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 10px;
  font-weight: 500;
  vertical-align: middle;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-section {
  padding: 80px 0;
  background: #0a0a0a;
  border-top: 1px solid var(--border);
}
@media (max-width: 700px) {
  .faq-section { padding: 28px 0 40px; }
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: rgba(255,255,255,0.01);
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(245,197,24,0.2);
}
.faq-item[open] {
  background: linear-gradient(180deg, rgba(245,197,24,0.05) 0%, rgba(245,197,24,0.01) 100%);
  border-color: rgba(245,197,24,0.3);
  box-shadow: 0 4px 20px rgba(245,197,24,0.05);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
  transition: color 0.25s ease;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ''; }
.faq-item:not([open]) .faq-summary:hover .faq-q {
  color: var(--accent);
}
.faq-item:not([open]) .faq-summary:hover .faq-icon {
  border-color: rgba(245,197,24,0.5);
  color: var(--accent);
}
.faq-summary:focus { outline: none; }
.faq-summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: var(--radius);
}
.faq-q {
  flex: 1;
  line-height: 1.4;
  transition: color 0.25s ease;
}
.faq-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  box-shadow: 0 0 12px rgba(245,197,24,0.4);
}
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
}
.faq-body > div {
  min-height: 0;
  overflow: hidden;
}
.faq-a {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 0 20px 20px;
  margin: 0;
}
@media (max-width: 640px) {
  .faq-summary { padding: 16px; font-size: 0.9rem; }
  .faq-a { padding: 0 16px 16px; }
  .faq-icon { width: 28px; height: 28px; }
}

/* ── Crypto Pay ──────────────────────────────────────────────────────────── */
.crypto-card {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
  margin: 0.85rem 0;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(245,197,24,0.08),
    0 4px 24px rgba(0,0,0,0.35);
}
.crypto-label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.crypto-amount {
  font-size: 2.4rem;
  font-weight: 800;
  font-family: 'SF Mono', ui-monospace, Menlo, Monaco, monospace;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(245,197,24,0.2);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.crypto-unit {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: none;
}
.crypto-addr {
  font-family: 'SF Mono', ui-monospace, Menlo, Monaco, monospace;
  word-break: break-all;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.crypto-qr {
  display: flex;
  justify-content: center;
  margin: 1.1rem auto 0.6rem;
  padding: 0.5rem;
  background: #fff;
  border-radius: 10px;
  width: fit-content;
}
.crypto-qr:empty {
  display: none;
}
.btn-copy {
  margin-top: 0.9rem;
  padding: 0.65rem 1.2rem;
  background: rgba(245,197,24,0.1);
  color: var(--accent);
  border: 1px solid rgba(245,197,24,0.35);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.btn-copy:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: translateY(-1px);
}
.btn-copy:active {
  transform: translateY(0);
}
.btn-copy svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}
.btn-copy .btn-copy-label::before {
  content: attr(data-label);
}
.btn-copy.copied {
  background: rgba(46,204,113,0.15);
  border-color: rgba(46,204,113,0.5);
  color: #2ecc71;
  pointer-events: none;
}
.btn-copy.copied .btn-copy-label::before {
  content: attr(data-label-copied);
}
@media (max-width: 640px) {
  .crypto-card {
    padding: 1.1rem;
    border-radius: 12px;
  }
  .crypto-amount { font-size: 2rem; }
  .crypto-addr { font-size: 0.8rem; }
  .btn-copy {
    width: 100%;
    justify-content: center;
    padding: 0.85rem;
    font-size: 0.9rem;
  }
}

/* ── Language transition overlay ─────────────────────────────────────────── */
#lang-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
html.lt-in #lang-transition,
html.lt-out #lang-transition { visibility: visible; pointer-events: auto; }
html.lt-out { overflow: hidden; }
html.lt-in  { overflow: hidden; }

.lt-panel {
  position: absolute;
  left: -2%; right: -2%;
  height: 34%;
  background: #050505;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(-105%, 0, 0);
  contain: layout style paint;
}
.lt-panel-1 { top: -1%; }
.lt-panel-2 { top: 33%; transform: translate3d(105%, 0, 0); }
.lt-panel-3 { top: 67%; }

.lt-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.06em;
  opacity: 0;
  will-change: opacity, transform;
  transform: translate3d(0, 16px, 0);
}
.lt-label-code {
  font-size: clamp(80px, 14vw, 180px);
  line-height: 0.9;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(245,197,24,0.4);
}
.lt-label-sub {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Pre-cover state used for OUT animation (set on page load if returning from a switch) */
html.lt-out .lt-panel-1,
html.lt-out .lt-panel-3 { transform: translate3d(0, 0, 0); }
html.lt-out .lt-panel-2 { transform: translate3d(0, 0, 0); }
html.lt-out .lt-label   { opacity: 1; transform: translate3d(0, 0, 0); }

/* IN: covering the screen — Material easeInOut for smooth, even glide */
html.lt-in .lt-panel-1 { animation: lt-in-l 0.6s        cubic-bezier(.4,0,.2,1) forwards; }
html.lt-in .lt-panel-2 { animation: lt-in-r 0.6s 0.07s  cubic-bezier(.4,0,.2,1) forwards; }
html.lt-in .lt-panel-3 { animation: lt-in-l 0.6s 0.14s  cubic-bezier(.4,0,.2,1) forwards; }
html.lt-in .lt-label   { animation: lt-label-in 0.35s 0.28s cubic-bezier(.22,1,.36,1) forwards; }

/* OUT: revealing the new page — symmetric ease */
html.lt-out.lt-leaving .lt-panel-1 { animation: lt-out-r 0.55s 0.06s cubic-bezier(.22,1,.36,1) forwards; }
html.lt-out.lt-leaving .lt-panel-2 { animation: lt-out-l 0.55s 0.12s cubic-bezier(.22,1,.36,1) forwards; }
html.lt-out.lt-leaving .lt-panel-3 { animation: lt-out-r 0.55s 0.18s cubic-bezier(.22,1,.36,1) forwards; }
html.lt-out.lt-leaving .lt-label   { animation: lt-label-out 0.25s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes lt-in-l    { from { transform: translate3d(-105%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes lt-in-r    { from { transform: translate3d(105%, 0, 0); }  to { transform: translate3d(0, 0, 0); } }
@keyframes lt-out-l   { from { transform: translate3d(0, 0, 0); }     to { transform: translate3d(-105%, 0, 0); } }
@keyframes lt-out-r   { from { transform: translate3d(0, 0, 0); }     to { transform: translate3d(105%, 0, 0); } }
@keyframes lt-label-in  { from { opacity: 0; transform: translate3d(0, 16px, 0); }  to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes lt-label-out { from { opacity: 1; transform: translate3d(0, 0, 0); }     to { opacity: 0; transform: translate3d(0, -16px, 0); } }

@media (prefers-reduced-motion: reduce) {
  html.lt-in #lang-transition,
  html.lt-out #lang-transition { display: none; }
}

/* ── Telegram in-app browser tweaks ───────────────────────────────────────── */
/* Drop the heavy autoplaying R2 hero videos in Telegram's WebView — they
   stutter on weak connections and there's no playback control surface. The
   poster image (already declared on the <video> tag) takes over. */
html[data-tg="1"] .hero-video-bg video,
html[data-tg="1"] .bmc-vf-photo {
  display: none;
}
html[data-tg="1"] .hero-video-bg {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

/* Telegram-only hints — default hidden, shown only inside Telegram WebView. */
.tg-only-hint { display: none; }
html[data-tg="1"] .tg-only-hint { display: block; }

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.testimonials {
  padding: 52px 0 46px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.testimonial-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition), transform var(--transition);
}
.testimonial-card:hover {
  border-color: rgba(245,197,24,0.35);
  transform: translateY(-2px);
}
.testimonial-stars {
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 2px;
  line-height: 1;
}
.testimonial-quote {
  font-style: italic;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #000;
  flex-shrink: 0;
}
.testimonial-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.testimonial-meta strong {
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
}
.testimonial-meta small {
  color: var(--muted);
  font-size: 0.78rem;
}
.testimonials-source {
  text-align: center;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.85rem;
}
.testimonials-source a {
  color: var(--accent);
  font-weight: 600;
}

.testimonials { overflow-x: clip; }

/* ── Marquee rows ────────────────────────────────────────────────────────── */
.testimonials-marquee {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-row {
  overflow: hidden;
  touch-action: pan-y;          /* let vertical page scroll pass through */
}
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee-row--rtl .marquee-track {
  animation-direction: reverse;
}
@media (hover: hover) {
  .marquee-track:hover {
    animation-play-state: paused;
  }
}
.marquee-track .testimonial-card {
  width: 340px;
  flex-shrink: 0;
  margin: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* RTL: invert default direction so motion still feels natural */
html[dir="rtl"] .marquee-row--ltr .marquee-track { animation-direction: reverse; }
html[dir="rtl"] .marquee-row--rtl .marquee-track { animation-direction: normal; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  .marquee-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;   /* allow both — page can still scroll vertically */
  }
  .marquee-track .testimonial-card {
    scroll-snap-align: start;
  }
}

/* Mobile: compact enough that the whole section fits one phone screen.
   Only the first row keeps scrolling — two independent strips running at once
   read as visual noise on a narrow screen, so the second row is dropped rather
   than just paused; the "from the Telegram channel" line still points to every
   quote, shown or not. animation-duration stays longhand so the reduced-motion
   block above still wins. */
@media (max-width: 720px) {
  .testimonials { padding: 24px 0 20px; }
  .testimonials .section-title { margin-bottom: 12px; }
  .testimonials .section-title h2 { font-size: 1.2rem; margin-bottom: 0; }
  /* The subtitle says the quotes come from the Telegram channel, and so does the
     line under the cards. Two lines of the same sentence were most of the space
     above the quotes on a phone, so keep the one that carries the link. */
  .testimonials .section-title p { display: none; }

  .marquee-row--rtl { display: none; }

  .testimonials-marquee { gap: 10px; margin-top: 0; }
  .marquee-track { gap: 10px; animation-duration: 45s; }

  .marquee-track .testimonial-card {
    width: 232px;
    padding: 12px 13px;
    gap: 8px;
    border-radius: 12px;
  }
  .marquee-track .testimonial-stars { font-size: 0.8rem; letter-spacing: 1.5px; }
  .marquee-track .testimonial-quote {
    font-size: 0.8rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
            line-clamp: 4;
    overflow: hidden;
  }
  .marquee-track .testimonial-author { gap: 9px; padding-top: 2px; }
  .marquee-track .testimonial-avatar { width: 30px; height: 30px; font-size: 0.85rem; }
  .marquee-track .testimonial-meta strong { font-size: 0.82rem; }
  .marquee-track .testimonial-meta small  { font-size: 0.7rem; }

  .testimonials-source { margin-top: 16px; font-size: 0.78rem; }
}

@media (max-width: 400px) {
  .marquee-track .testimonial-card  { width: 214px; }
  .marquee-track .testimonial-quote { font-size: 0.78rem; }
}

/* ── Learn: free articles (/learn) ────────────────────────────────────────── */
.learn-article { padding: 24px 0 72px; }
.learn-article .container { max-width: 760px; }

.learn-head { margin-bottom: 36px; }
.learn-head h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 16px;
}
.learn-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 12px;
}
.learn-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 0;
}

.learn-section { margin-bottom: 34px; }
.learn-section h2 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
}
.learn-section p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 14px;
}
.learn-steps,
.learn-bullets {
  margin: 0 0 16px;
  padding-inline-start: 22px;
  color: var(--muted);
  line-height: 1.7;
}
.learn-steps li,
.learn-bullets li { margin-bottom: 8px; }
.learn-steps li::marker { color: var(--accent); font-weight: 700; }
.learn-bullets li::marker { color: var(--accent); }
.learn-note {
  background: linear-gradient(135deg, rgba(245,197,24,0.09), rgba(245,197,24,0.02));
  border: 1px solid rgba(245,197,24,0.2);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text) !important;
  font-size: 0.92rem;
}

.learn-faq { margin: 44px 0 34px; }
.learn-faq h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; }
.learn-faq-item {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.learn-faq-item h3 {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.learn-faq-item p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.learn-related { margin: 44px 0 34px; }
.learn-related h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; }
.learn-related > p { color: var(--muted); line-height: 1.7; margin: 0 0 18px; }
.learn-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.learn-related-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.learn-related-card:hover {
  border-color: rgba(245,197,24,0.35);
  background: var(--bg3);
}
.lr-name { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.lr-chip { color: var(--muted); font-size: 0.76rem; }

.learn-cta {
  margin: 48px 0 0;
  padding: 28px 26px;
  background: linear-gradient(135deg, rgba(245,197,24,0.08), rgba(245,197,24,0.03));
  border: 1px solid rgba(245,197,24,0.2);
  border-radius: var(--radius-lg);
  text-align: center;
}
.learn-cta h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; }
.learn-cta p { color: var(--muted); line-height: 1.65; margin: 0 0 18px; }

.learn-more { margin-top: 40px; }
.learn-more h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }
.learn-more-list { list-style: none; margin: 0; padding: 0; }
.learn-more-list li { border-top: 1px solid var(--border); }
.learn-more-list a {
  display: block;
  padding: 13px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}
.learn-more-list a:hover { color: var(--accent); }

/* Hub */
.learn-hub { padding: 24px 0 80px; }
.learn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.learn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}
.learn-card:hover {
  border-top-color: var(--accent);
  transform: translateY(-2px);
}
.learn-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}
.learn-card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.learn-card-link { color: var(--accent); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 640px) {
  .learn-article { padding: 16px 0 56px; }
  .learn-head h1 { font-size: 1.6rem; }
  .learn-lede { font-size: 0.98rem; }
  .learn-section h2,
  .learn-faq h2,
  .learn-related h2 { font-size: 1.15rem; }
  .learn-section p,
  .learn-steps,
  .learn-bullets { font-size: 0.92rem; }
  .learn-cta { padding: 22px 18px; }
  .learn-card { padding: 18px; }
  .learn-hub { padding: 16px 0 56px; }
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
/* Guide pages carried BreadcrumbList markup with no visible trail to back it. */
.breadcrumbs {
  padding: 18px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.breadcrumbs li + li::before {
  content: "/";
  color: var(--border);
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .breadcrumbs { padding-top: 12px; font-size: 0.74rem; }
  /* Drop the current-page crumb on phones: a long title wrapped to its own line
     and left the "/" separator orphaned above it. The <h1> immediately below
     says where you are, and the BreadcrumbList markup is unaffected. */
  .breadcrumbs li:last-child { display: none; }
}

/* ── Supported devices map ────────────────────────────────────────────────── */
/* Each chip links to that model's guide — those 30 pages had no inbound link
   anywhere on the site, so search engines could only reach them via the sitemap. */
/* Pills that hug their own text, in one row per chip generation, every row
   flush to the same left edge. The varying widths are what make it read as a
   map; equal-width cells turned the buttons into plain text boxes, and
   centre-justified wrapping tapered every row towards the middle. */
.device-map {
  /* Sized to the widest generation row so the block sits centred under the
     heading instead of trailing empty space down its right side. */
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.device-gen {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.device-gen-label {
  flex: 0 0 auto;
  /* Wide enough for "A19 / A19 Pro": a narrower column let the long labels
     overflow leftwards, which made the left edge of the block ragged. */
  width: 84px;
  text-align: end;
  font-size: 0.7rem;
  color: rgba(153,153,153,0.6);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.device-gen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
}
.device-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), transform var(--transition);
}
.dl-pre   { color: rgba(153,153,153,0.55); }
.dl-model { font-weight: 600; }
@media (hover: hover) {
  .device-link:hover {
    color: var(--accent);
    background: rgba(245,197,24,0.10);
    border-color: rgba(245,197,24,0.25);
  }
  .device-link:hover .dl-pre { color: rgba(245,197,24,0.60); }
}
.device-link:active { transform: scale(0.97); }

/* Mobile keeps the pills and the generation grouping, but drops the chip label:
   its 44px column cost two pills per row, which pushed the block to 16 rows and
   off the screen. Each generation still reads as its own group because it wraps
   on its own line. */
@media (max-width: 600px) {
  .devices-section { padding: 24px 0 32px; }
  /* One continuous wrap instead of a row per generation. Grouped rows cost two
     lines each — 14 lines for eight generations — which pushed the block past a
     phone screen. The pills still hug their own text, so the block keeps the
     uneven, map-like edge; it just flows. */
  .device-map {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .device-gen,
  .device-gen-chips { display: contents; }
  .device-gen-label { display: none; }
  .device-link { padding: 6px 11px; font-size: 0.74rem; gap: 4px; }
}

@media (max-width: 360px) {
  .device-link { font-size: 0.71rem; padding: 6px 10px; }
}

/* The mosaic is re-cut for a phone. Spanning the hero tile down two rows works
   on a wide screen, where its copy fills the height; in a 156px column it left
   a third of the tile empty. Wide / two narrow / wide keeps the uneven rhythm
   and lets every tile size itself to its own text. */
@media (max-width: 640px) {
  .features { padding: 24px 0 32px; }
  .features-grid { gap: 8px; padding: 10px; }

  .feature-card:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .feature-card:nth-child(2) { grid-column: 1;      grid-row: 2; }
  .feature-card:nth-child(4) { grid-column: 2;      grid-row: 2; }
  .feature-card:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }

  .feature-card { padding: 12px 12px 14px; border-radius: 10px; }
  .feature-card:hover { border-color: var(--border); }
  .feature-card:hover .feature-icon svg { transform: none; }

  .feature-card:nth-child(1) .feature-icon {
    width: 30px; height: 30px;
    margin-bottom: 10px;
  }
  .feature-card:nth-child(1) .feature-icon svg { width: 16px; height: 16px; }
  .feature-card:not(:nth-child(1)) .feature-icon { top: 14px; inset-inline-start: 12px; }

  .feature-card h3 { font-size: 0.8rem; line-height: 1.25; margin-bottom: 4px; }
  .feature-card:nth-child(1) h3 { font-size: 0.85rem; }
  .feature-card p  { font-size: 0.72rem; line-height: 1.45; }
}

/* At 375px the tile is only ~155px wide, so trim the side padding and the title
   a step further: that buys 137.5px of text width against the 134.9px the word
   "кинематографические" needs at 0.7rem. Bold weight carries the heading. */
@media (max-width: 400px) {
  .features-grid { gap: 6px; padding: 8px; }
  .feature-card  { padding: 11px 10px 12px; }
  .feature-card:not(:nth-child(1)) .feature-icon { inset-inline-start: 10px; }
  .feature-card h3 { font-size: 0.76rem; }
  .feature-card:nth-child(1) h3 { font-size: 0.8rem; }
  .feature-card p  { font-size: 0.7rem; }
}