/* ==========================================================================
   Fireflies Üzletépítő Szett — Landing styles
   Ported from design_handoff_fireflies_landing/ (tokens/* + styles.css).
   The brand lives on near-black teal darkness, lit by a cyan→green "firefly"
   glow and warm gold value cues. Dark is the primary surface.
   Build-free: plain CSS, consumed directly by index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Compatibility tokens (kept for the existing style contract / older code).
   These alias the Fireflies palette below. Declared FIRST so tooling that
   reads the first :root block still finds the canonical brand tokens.
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #14c4d0;   /* cyan-500 — primary accent */
  --color-bg: #00080a;        /* ink-900  — page ground     */
  --color-text: #ffffff;      /* text on dark               */
  --color-accent: #e9b44c;    /* gold-500 — value / accent  */
  --color-danger: #ff5a4d;    /* error                      */

  --font-base: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-size-sm: 0.9375rem;  /* 15px */
  --font-size-base: 1.0625rem;/* 17px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
}

/* --------------------------------------------------------------------------
   Webfonts (Google Fonts substitutions — see handoff fonts.css note).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Great+Vibes&display=swap');

/* --------------------------------------------------------------------------
   Color tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base ink */
  --ink-900: #00080a;
  --ink-850: #021114;
  --ink-800: #041619;
  --ink-700: #062a30;
  --ink-600: #0a3a42;

  /* Cyan — primary accent / "enlightened" glow */
  --cyan-400: #3fd6e0;
  --cyan-500: #14c4d0;
  --cyan-600: #00abb8;
  --cyan-700: #017e88;
  --cyan-800: #01666c;

  /* Green — lower half of the logo gradient */
  --green-500: #23a883;
  --green-600: #16866a;

  /* Gold — value, discounts, script accent */
  --gold-400: #f5c95b;
  --gold-500: #e9b44c;
  --gold-600: #c9922f;

  /* Neutrals / paper */
  --white: #ffffff;
  --paper-100: #f5f5f4;
  --paper-200: #e7e8e8;
  --paper-line: #d7dad9;
  --slate-900: #0b2126;
  --slate-600: #4a5b60;

  /* Status */
  --danger: #ff5a4d;
  --danger-ink: #d93025;
  --success: #37d39b;

  /* Semantic aliases */
  --bg-page: var(--grad-page);
  --bg-surface: var(--ink-800);
  --bg-panel: var(--ink-700);
  --bg-card-light: var(--paper-100);

  /* Surface fills (theme-aware) */
  --surface-panel: linear-gradient(180deg, rgba(10,58,66,0.55) 0%, rgba(4,22,25,0.75) 100%);
  --surface-card-glass: linear-gradient(180deg, rgba(13,66,74,0.5) 0%, rgba(5,25,29,0.78) 100%);
  --surface-input: rgba(255,255,255,0.04);
  --surface-header: rgba(0,8,10,0.72);
  --surface-header-solid: rgba(0,8,10,0.85);
  --surface-tile: rgba(4,22,25,0.7);
  --surface-ring: radial-gradient(circle at 50% 45%, #04252b 0%, #00080a 72%);
  --surface-icon-center: radial-gradient(circle at 50% 40%, rgba(4,22,25,0.6), rgba(0,8,10,0.9));
  --surface-band: linear-gradient(180deg, transparent, rgba(6,42,48,0.35), transparent);
  --panel-lift: inset 0 1px 0 rgba(255,255,255,0.06);

  --text-primary: var(--white);
  --text-secondary: rgba(255, 255, 255, 0.90);
  --text-muted: rgba(255, 255, 255, 0.80);
  --text-on-light: var(--slate-900);
  --text-on-light-muted: var(--slate-600);

  --accent: var(--cyan-500);
  --accent-strong: var(--cyan-600);
  --accent-soft: rgba(20, 196, 208, 0.14);
  --value: var(--gold-500);
  --link: var(--cyan-500);
  --link-hover: var(--cyan-400);

  --border-hairline: rgba(20, 196, 208, 0.35);
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-light: var(--paper-line);

  --glow-rgb: 20, 196, 208;

  /* Brand gradients */
  --grad-mark: linear-gradient(155deg, #16c6d4 0%, #12b3b8 45%, #23a883 100%);
  --grad-cyan: linear-gradient(120deg, #16c6d4 0%, #017e88 100%);
  --grad-gold: linear-gradient(135deg, #f5c95b 0%, #c9922f 100%);
  --grad-tab: linear-gradient(115deg, #16c6d4 0%, #017e88 100%);
  --grad-page: radial-gradient(120% 90% at 80% 0%, #04252b 0%, #00080a 60%);
}

/* --------------------------------------------------------------------------
   Typography tokens
   -------------------------------------------------------------------------- */
:root {
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Great Vibes', 'Segoe Script', cursive;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 2rem;       /* 32 */
  --fs-3xl: 2.75rem;    /* 44 */
  --fs-4xl: 3.75rem;    /* 60 */
  --fs-5xl: 5rem;       /* 80 */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --ls-logo: 0.34em;
  --ls-tagline: 0.3em;
  --ls-display: 0.005em;
  --ls-eyebrow: 0.16em;
  --ls-body: 0;

  --text-display: var(--fw-extrabold) var(--fs-4xl)/var(--lh-tight) var(--font-display);
  --text-h1: var(--fw-extrabold) var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --text-h2: var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --text-h3: var(--fw-bold) var(--fs-xl)/var(--lh-snug) var(--font-display);
  --text-body: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-body);
  --text-label: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body);
}

/* --------------------------------------------------------------------------
   Spacing & layout tokens
   -------------------------------------------------------------------------- */
:root {
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container-narrow: 42rem;
  --container: 52rem;
  --container-wide: 72rem;

  /* Copy/content width caps (replace scattered px magic numbers) */
  --maxw-lead: 520px;        /* hero lead paragraph */
  --maxw-lead-wide: 560px;   /* closing lead */
  --maxw-content-col: 640px; /* hero column, footer copy */
  --maxw-value-grid: 800px;  /* closing value cards */
}

/* --------------------------------------------------------------------------
   Effects: radii, shadows, glows, motion
   -------------------------------------------------------------------------- */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-light-card: 0 12px 32px rgba(0, 12, 14, 0.14);

  --glow-cyan-sm: 0 0 16px rgba(var(--glow-rgb), 0.45);
  --glow-cyan-md: 0 0 32px rgba(var(--glow-rgb), 0.5);
  --glow-cyan-ring: 0 0 0 1px rgba(var(--glow-rgb), 0.5),
                    0 0 40px rgba(var(--glow-rgb), 0.35),
                    inset 0 0 24px rgba(var(--glow-rgb), 0.18);
  --glow-gold-sm: 0 0 14px rgba(233, 180, 76, 0.4);

  --panel-border: 1px solid var(--border-hairline);
  --panel-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.28s;
  --dur-slow: 0.5s;
}

/* Glow atmosphere dial */
[data-glow="muted"] {
  --glow-cyan-sm: none;
  --glow-cyan-md: none;
  --glow-cyan-ring: 0 0 0 1px rgba(var(--glow-rgb), 0.45), inset 0 0 12px rgba(var(--glow-rgb), 0.08);
  --glow-gold-sm: none;
}
[data-glow="luminous"] {
  --glow-cyan-sm: 0 0 24px rgba(var(--glow-rgb), 0.6);
  --glow-cyan-md: 0 0 48px rgba(var(--glow-rgb), 0.7);
  --glow-cyan-ring: 0 0 0 1px rgba(var(--glow-rgb), 0.7),
                    0 0 70px rgba(var(--glow-rgb), 0.55),
                    inset 0 0 34px rgba(var(--glow-rgb), 0.3);
  --glow-gold-sm: 0 0 24px rgba(233, 180, 76, 0.6);
}

/* --------------------------------------------------------------------------
   Light theme (opt-in via [data-theme="light"])
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg-page: radial-gradient(120% 90% at 80% 0%, #f2f8f8 0%, #dfeaeb 60%);
  --bg-surface: #ffffff;
  --bg-panel: #eef4f4;

  --text-primary: #072027;
  --text-secondary: rgba(7, 32, 39, 0.72);
  --text-muted: rgba(7, 32, 39, 0.52);

  --accent: var(--cyan-600);
  --accent-strong: var(--cyan-700);
  --accent-soft: rgba(0, 171, 184, 0.12);
  --value: var(--gold-600);
  --link: var(--cyan-700);
  --link-hover: var(--cyan-600);

  --border-hairline: rgba(1, 126, 136, 0.32);
  --border-soft: rgba(7, 32, 39, 0.12);

  --surface-panel: linear-gradient(180deg, #ffffff 0%, #f0f6f6 100%);
  --surface-card-glass: linear-gradient(180deg, #ffffff 0%, #eaf3f3 100%);
  --surface-input: #ffffff;
  --surface-header: rgba(255, 255, 255, 0.82);
  --surface-header-solid: rgba(255, 255, 255, 0.92);
  --surface-tile: #ffffff;
  --surface-ring: radial-gradient(circle at 50% 45%, #ffffff 0%, #e8f4f5 72%);
  --surface-icon-center: radial-gradient(circle at 50% 40%, #ffffff, #eaf3f3);
  --surface-band: linear-gradient(180deg, transparent, rgba(0,171,184,0.08), transparent);
  --panel-lift: inset 0 1px 0 rgba(255,255,255,0.8);

  --shadow-panel: 0 16px 40px rgba(7, 32, 39, 0.12);
  --shadow-light-card: 0 12px 32px rgba(7, 32, 39, 0.1);
  --panel-inner: var(--panel-lift);
}

/* ==========================================================================
   Base element styles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-primary);
  background: var(--bg-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }

p { margin: 0 0 var(--space-4); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

::selection { background: rgba(20, 196, 208, 0.3); color: #fff; }

/* Utilities */
.ff-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.ff-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.ff-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--value);
}
.ff-value { color: var(--value); font-weight: var(--fw-bold); }
.ff-key { color: var(--accent); font-weight: var(--fw-bold); }
.ff-muted { color: var(--text-secondary); }

/* Inline SVG icons inherit color via currentColor */
.ico {
  width: 1.5em; height: 1.5em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: block;
}
/* Fixed icon sizes (replace one-off inline width/height styles) */
.ico--18 { width: 18px; height: 18px; }
.ico--20 { width: 20px; height: 20px; }
.ico--28 { width: 28px; height: 28px; }
.ico--30 { width: 30px; height: 30px; }
.ico--32 { width: 32px; height: 32px; }
.ico--accent { color: var(--accent); }

/* ==========================================================================
   Layout
   ========================================================================== */
.ff-section { padding: 72px 24px; }
.ff-section__inner { max-width: var(--container); margin: 0 auto; }
.ff-section--wide .ff-section__inner { max-width: var(--container-wide); }
.ff-section--narrow .ff-section__inner { max-width: var(--container-narrow); }
.ff-section--band { background: var(--surface-band); }
.ff-center { text-align: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.ff-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  backdrop-filter: blur(12px);
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-soft);
}
.ff-nav { display: flex; gap: 8px; align-items: center; }
.ff-header-cta { margin-left: 8px; }

/* Logo lockup */
.ff-logo { display: inline-flex; align-items: center; gap: 12px; }
.ff-logo img { height: 34px; width: auto; }
.ff-logo__text { display: flex; flex-direction: column; line-height: 1; }
.ff-logo__word {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-logo);
  font-size: 15px;
  color: var(--text-primary);
}
.ff-logo__tag {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tagline);
  font-size: 8.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Language pills */
.ff-lang {
  font: var(--fw-bold) 13px var(--font-display);
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ff-lang[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Language dropdown (flag picker) */
.ff-langpick { position: relative; display: inline-flex; }
.ff-langpick__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-bold) 13px var(--font-display);
  letter-spacing: 0.08em;
  padding: 6px 10px 6px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ff-langpick__trigger:hover { border-color: var(--accent); }
.ff-langpick__code { line-height: 1; }
.ff-langpick__chev {
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ff-langpick__trigger[aria-expanded="true"] .ff-langpick__chev { transform: rotate(180deg); }
.ff-flag { font-size: 16px; line-height: 1; }

.ff-langpick__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 116px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-header-solid);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.ff-langpick__menu[hidden] { display: none; }
.ff-langpick__menu .ff-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
}
.ff-langpick__menu .ff-lang:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}
.ff-langpick__menu .ff-lang[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

/* ==========================================================================
   Buttons  (.cta-primary kept as the canonical primary CTA)
   ========================================================================== */
.ff-btn, .cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: var(--fw-bold) 17px var(--font-display);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ff-btn--sm { padding: 8px 16px; font-size: 14px; }
.ff-btn--lg { padding: 15px 30px; font-size: 18px; }
.ff-btn--block, .cta-primary--block { width: 100%; }

.ff-btn--primary, .cta-primary {
  background: var(--grad-cyan);
  color: #04191c;
}
.ff-btn--gold { background: var(--grad-gold); color: #2a1c02; }
.ff-btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-soft);
}
.ff-btn--ghost { background: transparent; color: var(--text-secondary); }

.ff-btn:not([disabled]):not([aria-disabled="true"]):hover,
.cta-primary:not([disabled]):hover { transform: translateY(-1px); }
.ff-btn:not([disabled]):not([aria-disabled="true"]):active,
.cta-primary:not([disabled]):active { transform: translateY(1px); }
.ff-btn--primary:not([disabled]):hover,
.cta-primary:not([disabled]):hover { box-shadow: var(--glow-cyan-md); }
.ff-btn--gold:not([disabled]):hover { box-shadow: 0 0 20px rgba(233,180,76,0.55); }
.ff-btn--outline:not([disabled]):hover { background: var(--accent-soft); border-color: var(--accent); }
.ff-btn--ghost:not([disabled]):hover { color: var(--text-primary); }
.ff-btn:focus-visible, .cta-primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cta-primary:disabled,
.cta-primary[disabled],
.ff-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Submit "fire" loading state ---------- */
@keyframes ff-fire-pulse {
  0%   { box-shadow: 0 0 12px rgba(20,196,208,0.5), 0 0 30px rgba(20,196,208,0.25); }
  50%  { box-shadow: 0 0 24px rgba(20,196,208,0.8), 0 0 60px rgba(20,196,208,0.45),
                     0 0 90px rgba(245,201,91,0.25); }
  100% { box-shadow: 0 0 12px rgba(20,196,208,0.5), 0 0 30px rgba(20,196,208,0.25); }
}
@keyframes ff-fire-spin {
  to { transform: rotate(360deg); }
}
@keyframes ff-fire-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.cta-primary.is-submitting {
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(
    90deg,
    #017e88 0%, #16c6d4 25%, #f5c95b 50%, #16c6d4 75%, #017e88 100%
  );
  background-size: 200% 100%;
  animation: ff-fire-pulse 1.4s ease-in-out infinite,
             ff-fire-shimmer 2s linear infinite;
  color: #04191c;
}
.cta-primary.is-submitting::after {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 3px solid rgba(4,25,28,0.25);
  border-top-color: #04191c;
  border-radius: 50%;
  animation: ff-fire-spin 0.7s linear infinite;
}

.ff-cta-row { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ==========================================================================
   Hero
   ========================================================================== */
.ff-hero { position: relative; overflow: hidden; }
.ff-hero__photo {
  position: absolute;
  inset: 0;
  width: 38%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent);
  mask-image: linear-gradient(90deg, #000 45%, transparent);
  opacity: 0.7;
}
.ff-hero__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 96px 24px 80px;
  position: relative;
}
.ff-hero__col { max-width: var(--maxw-content-col); margin-left: auto; }
.ff-hero__title { font-size: clamp(44px, 7vw, 72px); margin: 0; }
.ff-hero__subtitle {
  font: var(--fw-bold) var(--fs-2xl) var(--font-display);
  color: var(--value);
  margin: 14px 0 18px;
}
.ff-hero__lead { color: var(--text-secondary); font-size: var(--fs-lg); max-width: var(--maxw-lead); }

/* ==========================================================================
   Offer band — stats + price badge
   ========================================================================== */
.ff-offer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.ff-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; margin-top: 8px; }
.ff-stat { display: flex; flex-direction: column; gap: 6px; }
.ff-stat__top { display: flex; align-items: center; gap: 10px; }
.ff-stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
  background: var(--surface-icon-center);
}
.ff-stat__value {
  font: var(--fw-extrabold) var(--fs-2xl) var(--font-display);
  color: var(--value);
  line-height: 1;
  white-space: nowrap;
}
.ff-stat--cyan .ff-stat__icon { border-color: var(--accent); color: var(--accent); }
.ff-stat--cyan .ff-stat__value { color: var(--accent); }
.ff-stat__caption { color: var(--text-secondary); font-size: var(--fs-sm); }

.ff-price-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ff-price {
  width: 240px; height: 240px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  background: var(--surface-ring);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--glow-cyan-ring);
}
.ff-price__prefix {
  font: var(--fw-bold) var(--fs-sm) var(--font-display);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.ff-price__amount {
  font: var(--fw-extrabold) 64px var(--font-display);
  color: var(--text-primary);
  line-height: 1.05;
}
.ff-price__suffix {
  font: var(--fw-bold) var(--fs-lg) var(--font-display);
  color: var(--value);
}

.ff-price-deal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: rgba(233,180,76,0.10);
  border: 1px solid rgba(233,180,76,0.5);
  color: var(--value);
  font: var(--fw-bold) var(--fs-lg) var(--font-display);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Tags (value / discount pills)
   ========================================================================== */
.ff-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.1;
  background: transparent;
}
.ff-tag__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ff-tag__value { font-weight: var(--fw-bold); color: var(--value); }
.ff-tag--cyan { background: var(--accent-soft); border-color: var(--border-hairline); color: var(--accent); }
.ff-tag--cyan .ff-tag__value { color: var(--accent); }
.ff-tag--gold { background: rgba(233,180,76,0.14); border-color: rgba(233,180,76,0.4); color: var(--value); }
.ff-tag--outline { background: transparent; border-color: var(--border-soft); color: var(--text-secondary); }
.ff-tag--reverse { flex-direction: column; gap: 2px; align-items: center; text-align: center; padding: 12px 18px; }
.ff-tag--reverse .ff-tag__value { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
.ff-tag--lg { padding: 12px 20px; font-size: var(--fs-base); }
.ff-tag--lg .ff-tag__value { font-size: var(--fs-2xl); }

/* ==========================================================================
   Icon circles
   ========================================================================== */
.ff-ic {
  --ic-size: 72px;
  width: var(--ic-size);
  height: var(--ic-size);
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
  background: var(--surface-icon-center);
}
.ff-ic--cyan { border-color: var(--accent); color: var(--accent); }
.ff-ic--sm { --ic-size: 64px; }
.ff-ic--gold-filled { border-color: transparent; color: #2a1c02; background: var(--grad-gold); box-shadow: var(--glow-gold-sm); }
.ff-ic--cyan-filled { border-color: transparent; color: #04191c; background: var(--grad-cyan); box-shadow: var(--glow-cyan-sm); }
.ff-ic__pct { font: var(--fw-extrabold) 22px var(--font-display); }

/* ==========================================================================
   Glass panels & cards
   ========================================================================== */
.ff-panel {
  background: var(--surface-card-glass);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--panel-inner);
  padding: 28px;
}
.ff-panel--glow { box-shadow: var(--glow-cyan-ring), var(--shadow-panel); }
.ff-panel h3 { margin: 14px 0 8px; }

.ff-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.ff-package-grid > * { min-width: 0; }
.ff-card {
  background: var(--surface-card-glass);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--panel-inner);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.ff-card__title { margin: 4px 0 0; font: var(--text-h3); }
.ff-card__note { color: var(--text-secondary); margin: 0; font-size: 15px; }
.ff-card__price { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.ff-card__price s { text-decoration: line-through; opacity: 0.55; }
.ff-card__price b { color: var(--text-primary); }
.ff-card__ext { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-style: italic; }
.ff-card__footer { margin-top: auto; padding-top: 8px; }

/* Choose-extra row */
.ff-extra-row { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.ff-extra-row .ff-panel { flex: 1; min-width: 260px; }
.ff-or {
  display: flex; align-items: center; justify-content: center;
  font: var(--fw-extrabold) var(--fs-xl) var(--font-display);
  color: var(--accent);
}

/* Bonus grid */
.ff-bonus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ff-bonus-item { display: flex; gap: 18px; align-items: center; }
.ff-bonus-item p { margin: 0; color: var(--text-secondary); }

/* ==========================================================================
   Contest
   ========================================================================== */
.ff-contest { position: relative; }
#contest .ff-section__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
.ff-contest__photo {
  display: block;
  position: static;
  width: 100%;
  height: auto;
  opacity: 1;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.ff-contest__body { position: relative; }
.ff-contest__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ff-contest__head h2 { margin: 0; }

/* Early access teaser (text + portrait phone mockup) */
#earlyaccess .ff-section__inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: center;
}
.ff-earlyaccess__subtitle { margin: 0 0 16px; }
.ff-earlyaccess__text { font-size: var(--fs-lg); }
.ff-earlyaccess__phone {
  display: block;
  justify-self: center;
  max-height: 520px;
  width: auto;
  height: auto;
  max-width: 100%;
}
.ff-tag-row { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

/* ==========================================================================
   Closing
   ========================================================================== */
.ff-closing__title { font-size: clamp(32px, 5vw, 52px); }
.ff-closing__script { font-size: clamp(40px, 7vw, 64px); margin: 4px 0 24px; line-height: 1; }

/* ==========================================================================
   Form
   ========================================================================== */
.ff-form-head p { color: var(--text-secondary); margin-bottom: 28px; }
.ff-elig { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ff-elig h3 { margin: 0; }
.ff-elig-list { color: var(--text-secondary); margin: 0 0 24px; padding-left: 20px; font-size: 15px; }

.ff-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.form-group { margin-bottom: var(--space-5); }
.form-group > label,
.ff-field-label {
  display: block;
  font: var(--text-label);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
/* Anti-FOUC: a body rejtve, amíg az i18n első futása le nem cseréli a szövegeket.
   Az osztályt a <head> inline szkriptje teszi fel, a script.js (vagy 3 mp-es
   biztonsági határidő) veszi le — JS nélkül sosem kerül fel, tehát nem vakít. */
.ff-i18n-pending body { visibility: hidden; }

/* Honeypot: off-screen (nem display:none, hogy a botok kitöltsék), embernek rejtve. */
.ff-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ff-input {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text-primary);
  font: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ff-input::placeholder { color: var(--text-muted); }
/* Autofill: a böngésző saját hátteret kényszerít a mezőkre (Chrome: fehér/kék,
   Firefox: világossárga) — Firefoxban a fehér szövegünkkel olvashatatlan lenne,
   Chrome-ban töri a sötét témát. Az 1000px-es inset árnyék visszafesti a sötét
   felületet, a text-fill-color pedig rögzíti a szövegszínt.
   (Külön szabályokban: ismeretlen pszeudo-osztály az egész listát kidobatná.) */
.ff-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--ink-700) inset;
  box-shadow: 0 0 0 1000px var(--ink-700) inset;
}
.ff-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 3px rgba(20,196,208,0.2), 0 0 0 1000px var(--ink-700) inset;
  box-shadow: 0 0 0 3px rgba(20,196,208,0.2), 0 0 0 1000px var(--ink-700) inset;
}
.ff-input:autofill {
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--ink-700) inset;
}
.ff-input:autofill:focus {
  box-shadow: 0 0 0 3px rgba(20,196,208,0.2), 0 0 0 1000px var(--ink-700) inset;
}
.ff-input:hover { border-color: rgba(20,196,208,0.5); }
.ff-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,196,208,0.2);
}
select.ff-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
/* A natív legördülő lista (pl. Windows) fehér hátterű, de örökli a select fehér
   szövegszínét → az opciók láthatatlanok lennének. Explicit sötét-fehér páros. */
select.ff-input option {
  color: var(--text-on-light);
  background: var(--white);
}
.ff-input--invalid,
.ff-input.is-invalid,
.is-invalid {
  border-color: var(--danger) !important;
  background: rgba(255,90,77,0.08) !important;
}

.field-error {
  display: block;
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: 6px;
}
.field-error[hidden] { display: none; }

/* Per-set option picker */
.ff-optset { margin-bottom: var(--space-5); }
.ff-optset > .ff-field-label { margin-bottom: var(--space-3); }
.ff-optset__blocks { display: flex; flex-direction: column; gap: 14px; }
.ff-optset fieldset {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  margin: 0;
  background: rgba(255,255,255,0.02);
}
.ff-optset legend {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 8px;
  font: var(--fw-bold) var(--fs-sm) var(--font-display);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.ff-optset legend .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--border-hairline);
  font-size: 12px;
}
.ff-optset__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-top: 8px;
}
.ff-opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ff-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-opt__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--border-soft); color: var(--text-muted);
  background: transparent;
}
.ff-opt__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ff-opt__title { font: var(--fw-semibold) var(--fs-sm) var(--font-body); color: var(--text-primary); }
.ff-opt__title b { color: var(--text-secondary); }
.ff-opt__disc {
  font: var(--fw-bold) var(--fs-xs) var(--font-display);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--value);
}
.ff-opt__check { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; color: var(--accent); opacity: 0; }
.ff-opt input:checked ~ .ff-opt__check { opacity: 1; }
.ff-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--glow-cyan-sm);
}
.ff-opt:has(input:checked) .ff-opt__icon {
  border-color: var(--accent); color: var(--accent); background: rgba(20,196,208,0.12);
}
.ff-opt:has(input:checked) .ff-opt__title b { color: var(--accent); }

/* Checkboxes */
.form-group--checkbox { margin-bottom: var(--space-4); }
.form-group--checkbox > label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font: var(--text-body); color: var(--text-secondary);
}
.form-group--checkbox input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--accent); cursor: pointer;
}

/* Status + success */
.form-status { color: var(--danger); font-size: var(--fs-sm); margin-top: 12px; }
.form-status[hidden] { display: none; }

#success { scroll-margin-top: 90px; }
.ff-success { text-align: center; }
.ff-success .ff-ic { margin: 0 auto 18px; }
.ff-success h2 { color: var(--accent); }
.ff-success__summary { color: var(--text-secondary); margin: 10px 0 0; font-size: 15px; }
.ff-success__ts { color: var(--text-muted); font-size: 14px; margin-top: 12px; }
[hidden] { display: none !important; }

/* ==========================================================================
   Compliance / legal ⚠️ notes
   ========================================================================== */
.ff-note {
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding-left: 26px;
  margin: 18px 0 0;
}
.ff-note::before {
  content: '⚠';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--value);
  font-size: 15px;
}
.ff-note.ff-center { padding-left: 0; }
.ff-note.ff-center::before { position: static; margin-right: 6px; }
#preregistration-form .ff-note { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
   Hero: retroactive lead, scarcity badge, progress bar
   ========================================================================== */
.ff-hero__retro { font-size: var(--fs-base); margin-top: 14px; }
.ff-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  background: var(--accent-soft);
  color: var(--accent);
  font: var(--fw-semibold) var(--fs-sm) var(--font-body);
}
.ff-scarcity .ico { color: var(--accent); flex-shrink: 0; }

.ff-progress { margin-top: 18px; max-width: 420px; }
.ff-progress__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.ff-progress__bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-cyan);
  box-shadow: var(--glow-cyan-sm);
  transition: width 1.1s var(--ease-out);
}
.ff-progress__meta {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  /* Fix magasság, hogy a skeleton → szám csere ne ugrassa a layoutot. */
  min-height: 1.45em;
}

/* Betöltési állapot (design_handoff_progress_loading):
   fénypászma a 0%-os sávban + pulzáló skeleton a szám helyén.
   Az elemeket a script.js eltávolítja, amint a valós számláló megérkezik. */
@keyframes ff-progress-sweep { from { transform: translateX(0); } to { transform: translateX(350%); } }
@keyframes ff-skeleton-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes ff-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ff-progress-sweep {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb), 0.45) 50%, transparent);
  animation: ff-progress-sweep 1.5s ease-in-out infinite;
}
.ff-progress__loading { display: inline-flex; align-items: center; gap: 8px; }
.ff-progress-skeleton {
  display: inline-block; width: 72px; height: 11px;
  border-radius: var(--radius-pill); background: var(--accent-soft);
  animation: ff-skeleton-pulse 1.5s ease-in-out infinite;
}
/* A szám a skeleton helyére úszik be, amikor az adat megérkezik. */
.ff-progress__value { animation: ff-fade-in 0.5s var(--ease-out) both; }
.ff-progress__meta b { color: var(--accent); font-weight: var(--fw-bold); }

/* ==========================================================================
   How it works — 3 steps
   ========================================================================== */
.ff-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.ff-step {
  position: relative;
  background: var(--surface-card-glass);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--panel-inner);
  padding: 28px 24px 24px;
  text-align: center;
  height: 100%;
}
.ff-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 16px;
  font: var(--fw-extrabold) var(--fs-lg) var(--font-display);
  color: #04191c;
  background: var(--grad-cyan);
  box-shadow: var(--glow-cyan-sm);
}
.ff-step__title { margin: 0 0 8px; font: var(--text-h3); }

/* ==========================================================================
   Contest: pre-note, prize-distribution rules
   ========================================================================== */
.ff-contest__pre {
  margin: 14px 0 0;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.ff-contest__rules {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ff-contest__rules p {
  margin: 0;
  color: var(--text-secondary);
  border-left: 2px solid var(--border-hairline);
  padding-left: 16px;
}
.ff-contest__rules p:nth-child(1) { border-left-color: var(--accent); }
.ff-contest__rules p:nth-child(2) { border-left-color: var(--value); }

/* ==========================================================================
   Closing: lead + value points
   ========================================================================== */
.ff-closing__lead { max-width: var(--maxw-lead-wide); margin: 0 auto 26px; font-size: var(--fs-lg); }

.ff-value-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 36px;
  max-width: var(--maxw-value-grid);
}
.ff-value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 18px;
  min-width: 130px;
  flex: 0 1 150px;
  background: var(--surface-card-glass);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--panel-inner);
}
.ff-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
  background: var(--surface-icon-center);
  flex-shrink: 0;
}
.ff-value-card__icon .ico { width: 20px; height: 20px; }
.ff-value-card__icon--cyan { border-color: var(--accent); color: var(--accent); }
.ff-value-card__icon--gold { border-color: var(--gold-500); color: var(--gold-500); box-shadow: var(--glow-gold-sm); }
.ff-value-card__label {
  font: var(--fw-semibold) var(--fs-sm) var(--font-body);
  color: var(--text-primary);
  text-align: center;
}

/* ==========================================================================
   Sticky bottom CTA (shown < 860px)
   ========================================================================== */
.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 12px 16px;
  background: var(--surface-header-solid);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-hairline);
  display: none;
}
.cta-sticky .cta-primary { width: 100%; }

/* ==========================================================================
   Legal footer
   ========================================================================== */
footer.legal { padding: 40px 24px; border-top: 1px solid var(--border-soft); text-align: center; }
footer.legal p { color: var(--text-muted); font-size: 13px; max-width: var(--maxw-content-col); margin: 0 auto; }
.ff-footer-compliance { margin-top: 16px !important; }
.ff-footer-links { margin-top: 14px !important; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ff-footer-links a { color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.ff-footer-links a:hover { color: var(--link-hover); }
.ff-footer-sep { color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   Draw milestones + sold-kit progress (contest section) & purchase section
   ========================================================================== */
/* Rejtett horgony: a régi #form linkek a vásárlási szekcióra ugranak. */
.ff-anchor { display: block; height: 0; scroll-margin-top: 90px; }

.ff-milestones {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--accent-soft);
}
.ff-milestones p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}
/* Kártya-fejléc: a következő mérföldkő sora, elválasztóval a törzs felett. */
.ff-milestones__next {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.ff-milestones__next .ico { color: var(--value); flex-shrink: 0; }
/* A hero-ban a sáv szélességéhez igazodik; a fotó felett enyhe blur segíti az
   olvashatóságot (a scarcity-badge-dzsel azonos accent-soft alapon). */
.ff-soldbar .ff-milestones {
  margin-top: 18px;
  max-width: 520px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ff-soldbar .ff-milestones p { color: var(--text-primary); }

.ff-soldbar { margin-top: 24px; }
.ff-soldbar__label {
  margin: 0 0 10px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ff-soldbar .ff-progress { margin-top: 0; max-width: 520px; }
.ff-soldbar__updated { font-style: italic; font-size: var(--fs-xs); }

/* Mérföldkő-jelölő a sávon (bal pozíciót a script.js állítja). */
.ff-progress--marked .ff-progress__track { overflow: visible; }
.ff-progress__mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--value);
  border-radius: var(--radius-pill);
}
.ff-progress__scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
/* A mérföldkő felirata a jelölő alá igazodik (a left%-ot a script.js állítja). */
.ff-progress__scale [data-contest-mark-label] {
  position: absolute;
  transform: translateX(-50%);
  color: var(--value);
  font-weight: var(--fw-semibold);
}

/* Apró betűs kiegészítő megjegyzés (nem figyelmeztetés → nincs ⚠ jel). */
.ff-fineprint {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--text-muted);
}

.ff-closing__urgency {
  margin: 16px 0 0;
  color: var(--value);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Spacing / typography utilities — replace one-off inline styles.
   Kept last (before media queries) so they win over component defaults.
   ========================================================================== */
.ff-m-0 { margin: 0; }
.ff-mb-6 { margin-bottom: 6px; }
.ff-mb-8 { margin-bottom: 8px; }
.ff-mb-16 { margin-bottom: 16px; }
.ff-mb-32 { margin-bottom: 32px; }
.ff-mb-36 { margin-bottom: 36px; }
.ff-mb-40 { margin-bottom: 40px; }
.ff-mt-16 { margin-top: 16px; }
.ff-mt-20 { margin-top: 20px; }
.ff-text-lg { font-size: var(--fs-lg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Desktop-and-up refinements (min-width query = mobile-first evidence) */
@media (min-width: 861px) {
  .ff-header-cta { display: inline-flex; }
}

@media (max-width: 860px) {
  .ff-offer-grid, .ff-bonus-grid, .ff-form-grid { grid-template-columns: 1fr; }
  .ff-offer-grid .ff-price-col { margin: 0 auto; }
  .ff-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #contest .ff-section__inner { grid-template-columns: 1fr; }
  .ff-contest__photo { width: 100%; max-width: none; }
  #earlyaccess .ff-section__inner { grid-template-columns: 1fr; text-align: center; }
  .ff-earlyaccess__body { display: flex; flex-direction: column; align-items: center; }
  .ff-earlyaccess__phone { max-height: 480px; margin: 0 auto; }
  .cta-sticky { display: block; }
  /* A fix alsó CTA sáv (~70px) eltakarná az oldal alját (jogi linkek),
     ezért annál valamivel magasabb üres hely kell a lap aljára. */
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .ff-header-cta { display: none !important; }
  .ff-nav { gap: 6px; }
  .ff-section { padding-left: 20px; padding-right: 20px; }
  .ff-hero__col { margin-left: 0; }
}

@media (max-width: 560px) {
  .ff-section { padding-top: 48px; padding-bottom: 48px; }
  .ff-hero__inner { padding: 64px 20px 56px; }
  .ff-stats { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* Betöltési animációk kikapcsolása: a sweep így láthatatlan (a sávon kívül áll),
     a skeleton statikus pill marad, a szám azonnal jelenik meg. */
  .ff-progress-sweep, .ff-progress-skeleton, .ff-progress__value { animation: none !important; }
}