/* ============================================================
   Self-hosted fonts (privacy-first, no third-party CDN)
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/InterVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/InterVariable-Italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

/* ============================================================
   AdOff — Global Styles · v3 (Brand-faithful Shield Purple)
   Authority: sviluppo/marketing/brand/brand-bible.json + DESIGN.md
   ============================================================ */

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

:root {
  /* === Brand palette (canonical from brand-bible.json) === */
  --deep-space:     #0a0a1a;
  --midnight-blue:  #12122a;
  --shield-purple:  #7c5cfc;
  --shield-purple-light: #b8a9ff;
  --shield-purple-dark:  #4c3ad4;
  --soft-purple:    #b8a9ff;
  --pure-white:     #ffffff;
  --steel-gray:     #8a8aaa;
  --success-green:  #4ade80;
  --alert-red:      #f43f5e;

  /* === Semantic tokens === */
  --bg:           var(--deep-space);
  --surface:      var(--midnight-blue);
  --surface-2:    #1a1a36;
  --surface-warm: #15152e;

  --text:         #e2e2f0;
  --text-muted:   var(--steel-gray);
  --text-dim:     #80809a; /* a11y: ~4.8:1 su --bg e --surface (era #5a5a72 ~2.5:1, sotto WCAG AA) */

  --accent:       var(--shield-purple);
  --accent-btn:   #7252f8; /* a11y: 4.91:1 con testo bianco (Shield Purple 4.38:1, sotto WCAG AA) — solo fill con testo bianco */
  --accent-light: var(--shield-purple-light);
  --accent-dim:   var(--shield-purple-dark);
  --accent-soft:  rgba(124, 92, 252, 0.12);
  --accent-line:  rgba(124, 92, 252, 0.34);

  --success:      var(--success-green);
  --success-bg:   rgba(74, 222, 128, 0.10);
  --danger:       var(--alert-red);
  --danger-bg:    rgba(244, 63, 94, 0.08);

  --border:        rgba(124, 92, 252, 0.18);
  --border-strong: rgba(124, 92, 252, 0.48);
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* Shape */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-pill: 999px;

  /* Motion */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:     150ms var(--ease);
  --t:          220ms var(--ease);
  --t-slow:     420ms var(--ease);

  /* Layout */
  --container:        min(64rem, 92vw);
  --container-wide:   min(72rem, 94vw);

  /* Legacy alias (do not remove, used by inline styles & legacy pages) */
  --primary:        var(--accent);
  --primary-light:  var(--accent-light);
  --primary-dark:   var(--accent-dim);
  --card:           var(--surface);
  --card-hover:     var(--surface-2);
  --error:          var(--danger);
  --warning:        var(--accent);
  --shadow:         0 1px 0 var(--border-strong);
  --shadow-glow:    0 0 40px rgba(124, 92, 252, 0.18);
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
  --transition:     var(--t);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--t);
}
a:hover { color: var(--pure-white); }

img { max-width: 100%; display: block; }
strong, b { color: var(--text); font-weight: 700; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.8rem); }
h3 { font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -0.005em; }
h4 { font-weight: 700; font-size: 1rem; }

/* Italic emphasis in headlines: shield purple */
h1 em, h2 em, h3 em,
.hero__headline em,
.solution__reveal em,
.final-cta__headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 800;
}

/* Numbers tabular */
.tabular, .price-card__amount, .pain-card__number, .social-proof__stat strong,
.plan-price__amount, .plan-price__currency, table td, table th {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Layout ---------- */
.container, .container--wide {
  margin: 0 auto;
  padding: 0 24px;
}
.container       { max-width: var(--container); }
.container--wide { max-width: var(--container-wide); }

section { padding: clamp(72px, 9vw, 116px) 0; }

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-error  { color: var(--danger); }

/* ---------- Section labels ---------- */
.section-label {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 22px;
  background: transparent;
  border: none;
  padding: 0;
}

.section-title {
  margin: 0 0 18px 0;
  color: var(--text);
}

.section-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto 56px;
  line-height: 1.7;
}

/* ---------- Wordmark (brand mark) ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--pure-white);
}
.wordmark__off  { color: var(--accent); }
.wordmark__dot  { color: var(--accent); }

.wordmark--hero {
  font-size: clamp(2.8rem, 7vw, 5rem);
  margin-bottom: 24px;
  display: flex;
  width: fit-content;
}
.wordmark--nav  { font-size: 1.3rem; }
.wordmark--foot { font-size: 1.5rem; }

.wordmark-tagline {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 14px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.btn--primary {
  background: var(--accent-btn);
  color: var(--pure-white);
  border-color: var(--accent-btn);
  box-shadow: 0 0 0 0 var(--accent-line);
}
.btn--primary:hover {
  background: var(--accent-light);
  color: var(--deep-space);
  border-color: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--accent-soft);
  text-decoration: none;
}
.btn--primary:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: transparent;
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 12px 14px;
}
.btn--ghost:hover { color: var(--accent-light); text-decoration: none; }

.btn--lg {
  padding: 18px 34px;
  font-size: 1.05rem;
}
/* legacy compat — kill xl, treat as lg */
.btn--xl { padding: 18px 34px; font-size: 1.05rem; border-radius: var(--radius); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}
.badge--popular {
  border-color: var(--accent-line);
  color: var(--accent-light);
  background: var(--accent-soft);
}
.badge--save {
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--success);
  background: var(--success-bg);
}

/* ---------- Nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 24px;
}
.nav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--pure-white);
  text-decoration: none;
}
.nav__logo:hover { color: var(--accent-light); }
.nav__logo img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav__links a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t);
}
.nav__links a:hover { color: var(--pure-white); }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(72px, 11vw, 140px) 0 clamp(48px, 7vw, 80px);
  position: relative;
  overflow: hidden;
}
/* Subtle radial accent — quiet, not metric-cliché */
.hero::before {
  content: '';
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(124, 92, 252, 0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* Product screenshots below the hero copy — layered showcase, dark captures */
.hero__media {
  position: relative;
  margin: clamp(36px, 6vw, 64px) auto 0;
  max-width: 700px;
}
.hero__shots {
  display: flex;
  align-items: center; /* photos vertically centered to each other */
  justify-content: center;
  gap: 20px;
}
.hero__shots-main,
.hero__shots-pop {
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.hero__shots-main { width: 60%; }
.hero__shots-pop { width: 27%; border-color: var(--border-strong); }
@media (max-width: 620px) {
  .hero__shots { flex-direction: column; align-items: center; gap: 16px; }
  .hero__shots-main,
  .hero__shots-pop { width: 100%; max-width: 380px; }
}

.hero__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

.hero__headline, .hero__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: var(--text);
  /* kill any inherited gradient text */
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: unset;
  -webkit-background-clip: unset;
  max-width: 22ch;
}
.hero__headline em {
  font-style: italic;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.hero__tagline {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 600;
  color: var(--accent-light);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hero__sub {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 36px;
  line-height: 1.65;
}
.hero__sub strong { color: var(--text); font-weight: 600; }

.hero__cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero__trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}
.hero__trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust-strip .dot-sep { color: var(--border-strong); }

.hero__note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---------- Social Proof ---------- */
.social-proof {
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  text-align: center;
}
.social-proof__inner {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 28px 64px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.social-proof__stat {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
  flex: 0 1 auto;
}
.social-proof__stat strong {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--pure-white);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.social-proof__stat span {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  line-height: 1.3;
}
.social-proof__divider {
  width: 1px;
  height: 36px;
  background: var(--border-subtle);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .social-proof__divider { display: none; }
  .social-proof__inner { gap: 20px 40px; }
}
.stars { color: #fbbf24; letter-spacing: 2px; }

/* ---------- Problem ---------- */
.problem { background: transparent; }
.problem__inner { max-width: 64ch; margin: 0 auto; text-align: center; }
.problem__lead { font-size: 1.15rem; color: var(--text-muted); line-height: 1.7; }
.problem__lead strong { color: var(--danger); }

.problem__header { text-align: center; margin-bottom: 56px; }
.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}
.pain-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  position: relative;
  transition: border-color var(--t);
}
.pain-card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--danger);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.55;
}
.pain-card:hover { border-color: rgba(244, 63, 94, 0.36); }
.pain-card__number {
  font-family: "Inter", sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--danger);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.pain-card__title {
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: 8px;
}
.pain-card__desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.problem__twist {
  background: var(--danger-bg);
  border: 1px solid rgba(244, 63, 94, 0.32);
  border-radius: var(--radius);
  padding: 32px 36px;
  text-align: center;
}
.problem__twist h3 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--pure-white);
  margin-bottom: 12px;
}
.problem__twist p {
  font-size: 1.02rem;
  color: var(--text-muted);
  max-width: 54ch;
  margin: 0 auto;
}

/* ---------- Platforms (super-USP coverage) ---------- */
.platforms { padding: 96px 0 64px; background: transparent; }
.platforms__header { text-align: center; margin-bottom: 56px; }
.platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.platforms-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  position: relative;
  transition: border-color var(--t), transform var(--t);
}
.platforms-card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0.6;
}
.platforms-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.platforms-card__cat {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-light);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.platforms-card__title {
  font-family: "Inter", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--pure-white);
  line-height: 1.3;
  margin: 0 0 12px;
}
.platforms-card__brands {
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pure-white);
  line-height: 1.55;
  margin: 0 0 14px;
  word-spacing: 0.04em;
}
.platforms-card__note {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.platforms__footnote {
  max-width: 60ch;
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.platforms__footnote strong { color: var(--pure-white); }

/* ---------- Solution ---------- */
.solution { padding: 96px 0 56px; }
.solution__reveal {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  letter-spacing: -0.025em;
  /* kill gradient text */
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.solution__intro {
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 auto 16px;
  text-align: center;
  line-height: 1.7;
}

/* ---------- Features ---------- */
.features { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 112px); }
.features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 56px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: border-color var(--t), background var(--t);
  position: relative;
}
.feature-card:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.feature-card--stealth {
  border-color: var(--accent-line);
}
.feature-card--stealth:hover { border-color: var(--accent); }
/* Inline PRO chip used INSIDE feature-card__title */
.feature-card__pro-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.feature-card__icon {
  font-size: 1.6rem;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
  opacity: 0.95;
}
.feature-card__title {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.feature-card__benefit {
  color: var(--accent-light);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.45;
}
.feature-card__desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.feature-card__pro {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* ---------- How / Steps ---------- */
.how { background: transparent; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 36px;
  position: relative;
}
.step { text-align: left; padding: 0; }
.step__num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 18px;
  box-shadow: none;
}
.step__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pure-white);
  margin-bottom: 8px;
}
.step__desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

/* ---------- Stealth deep dive ---------- */
.stealth { background: transparent; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.stealth__header { text-align: center; margin-bottom: 56px; }
.stealth__visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 48px;
}
.stealth__col {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border);
}
.stealth__col--bad  { border-color: rgba(244, 63, 94, 0.32); }
.stealth__col--good { border-color: var(--accent-line); background: linear-gradient(135deg, var(--surface) 60%, var(--accent-soft) 100%); }
.stealth__col-title {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.stealth__col--bad .stealth__col-title  { color: var(--danger); }
.stealth__col--good .stealth__col-title { color: var(--accent-light); }
.stealth__arrow {
  font-family: "Inter", sans-serif;
  align-self: center;
  font-size: 1.8rem;
  color: var(--accent);
  padding: 0 6px;
}
.stealth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  font-size: 0.92rem;
}
.stealth__row:last-child { border-bottom: none; }
.stealth__row-label { flex: 1; color: var(--text); text-align: left; }
.stealth__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.stealth__badge--detected {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: rgba(244, 63, 94, 0.32);
}
.stealth__badge--hidden {
  color: var(--success);
  background: var(--success-bg);
  border-color: rgba(74, 222, 128, 0.32);
}

.stealth__how {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.stealth__how-item { text-align: left; }
.stealth__how-icon { font-size: 1.5rem; display: block; margin-bottom: 12px; opacity: 0.95; }
.stealth__how-title {
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: 6px;
}
.stealth__how-desc { font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.65; }
.stealth__callout {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 22px 26px;
  font-size: 0.98rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 32px;
  line-height: 1.7;
}
.stealth__callout strong { color: var(--accent-light); }

/* ---------- Before / After ---------- */
.before-after { text-align: center; }
.before-after__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}
.ba-col { border-radius: var(--radius-lg); padding: 32px 28px; border: 1px solid var(--border); }
.ba-col--before { background: var(--danger-bg); border-color: rgba(244, 63, 94, 0.28); }
.ba-col--after  { background: var(--accent-soft); border-color: var(--accent-line); }
.ba-col__label {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ba-col--before .ba-col__label { color: var(--danger); }
.ba-col--after  .ba-col__label { color: var(--accent-light); }
.ba-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ba-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.6; }
.ba-list .ba-icon { flex-shrink: 0; margin-top: 2px; font-size: 0.9rem; font-weight: 700; }
.ba-col--before .ba-list li { color: var(--text-muted); }
.ba-col--before .ba-list .ba-icon { color: var(--danger); }
.ba-col--after  .ba-list li { color: var(--text); }
.ba-col--after  .ba-list .ba-icon { color: var(--success); }

/* ---------- Pricing ---------- */
.pricing { text-align: center; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
  align-items: stretch;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* legacy alias */
.price-card, .plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}
.price-card:hover, .plan-card:hover {
  border-color: var(--border-strong);
}
.price-card--popular, .plan-card--popular {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 60%, var(--accent-soft) 100%);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 40px rgba(124, 92, 252, 0.2);
}
.price-card--popular:hover, .plan-card--popular:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 48px rgba(124, 92, 252, 0.3);
}

.plan-badge {
  position: absolute;
  top: 0;
  right: 24px;
  background: var(--accent-btn);
  color: var(--pure-white);
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  white-space: nowrap;
}

.plan-name, .price-card__name {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.price-card__badges { min-height: 0; margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.plan-price__currency {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
}
.plan-price__amount, .price-card__amount {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--pure-white);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan-price__period, .price-card__period {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.plan-micro {
  font-size: 0.85rem;
  color: var(--accent-light);
  margin-bottom: 22px;
  font-style: italic;
}

.plan-features, .price-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  flex: 1;
  padding: 18px 0 0 0;
  border-top: 1px solid var(--border-subtle);
}
.plan-features li, .price-card__features li {
  font-size: 0.92rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.plan-features li .check {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
}
.price-card__features li::before {
  color: var(--success);
  flex-shrink: 0;
  margin-top: 2px;
  content: "✓";
  font-weight: 700;
}
.plan-features li .x-mark { color: var(--text-dim); flex-shrink: 0; margin-top: 2px; }

.price-card__features li.feature-missing { color: var(--text-dim); text-decoration: line-through; }
.price-card__features li.feature-missing::before { content: "—"; color: var(--text-dim); }

.plan-card .btn, .price-card__btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: auto;
  min-height: 44px;
  font-size: 0.94rem;
}

.plan-card--free .plan-price__amount, .price-card--free .price-card__amount { font-size: 2rem; }

.plan-note { font-size: 0.78rem; color: var(--text-dim); text-align: center; margin-top: 12px; }

.device-tier {
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.device-tier:hover {
  border-color: var(--accent-line);
  color: var(--pure-white);
}
.device-tier.active {
  background: var(--accent);
  color: var(--pure-white);
  border-color: var(--accent);
}

/* ---------- Trust & Security ---------- */
.trust {
  background: transparent;
  padding-top: 88px;
  padding-bottom: 60px;
  border-top: 1px solid var(--border-subtle);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
@media (max-width: 768px) { .trust__grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .platforms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .platforms__grid,
  .features__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  text-align: left;
  position: relative;
  transition: border-color var(--t);
}
.trust-card::before { content: none; }
.trust-card:hover { border-color: var(--border-strong); }
.trust-card--secure:hover    { border-color: rgba(74, 222, 128, 0.55); }
.trust-card--private:hover   { border-color: var(--accent); }
.trust-card--guarantee:hover { border-color: var(--accent); }

.trust-card__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  border: 1px solid var(--border);
}
.trust-card--secure .trust-card__icon    { color: var(--success); border-color: rgba(74, 222, 128, 0.4); }
.trust-card--private .trust-card__icon   { color: var(--accent-light); border-color: var(--accent-line); }
.trust-card--guarantee .trust-card__icon { color: var(--accent-light); border-color: var(--accent-line); }

.trust-card__title {
  font-family: "Inter", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: 8px;
}
.trust-card__desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; }

.trust__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  transition: border-color var(--t), color var(--t);
}
.trust-badge:hover { border-color: var(--accent); color: var(--accent-light); }
.trust-badge svg { flex-shrink: 0; opacity: 0.8; }

.trust__seal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 36px;
  padding: 24px 28px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}
.trust__seal-icon { flex-shrink: 0; color: var(--accent-light); }
.trust__seal-text { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; }
.trust__seal-text strong { color: var(--accent-light); }
.trust__note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 20px;
  line-height: 1.6;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Comparison Table ---------- */
.comparison { background: transparent; }
.table-wrap {
  overflow-x: auto;
  margin-top: 48px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  min-width: 540px;
}
thead th {
  padding: 16px 20px;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th:first-child  { color: var(--pure-white); }
thead th.col-adoff    { color: var(--accent-light); }
tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background var(--t); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
tbody td { padding: 16px 20px; font-size: 0.95rem; color: var(--text-muted); }
tbody td:first-child { color: var(--text); font-weight: 500; }
.check   { color: var(--success); font-weight: 700; }
.cross   { color: var(--text-dim); }
.partial { color: var(--accent-light); font-size: 0.82rem; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { background: transparent; border-top: 1px solid var(--border-subtle); }
.faq__list {
  max-width: 68ch;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}
.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  overflow: hidden;
  transition: background var(--t);
}
.faq-item:hover, .faq-item.open { background: var(--surface); }
.faq-item.open { border-bottom-color: var(--accent-line); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  cursor: pointer;
  color: var(--pure-white);
  font-family: "Inter", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: left;
  gap: 12px;
}
.faq-question:hover { color: var(--accent-light); }
.faq-question svg, .faq-chevron {
  flex-shrink: 0;
  transition: transform var(--t);
  color: var(--accent-light);
  width: 18px;
  height: 18px;
}
.faq-item.open .faq-question svg, .faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--t-slow); }
.faq-item.open .faq-answer { max-height: 320px; }
.faq-answer p, .faq-answer-inner {
  padding: 0 20px 22px;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.75;
  border-top: none;
}
.faq-answer-inner { padding-top: 0; }
.faq-answer code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.88rem;
  color: var(--accent-light);
}

/* ---------- CTA Finale ---------- */
.cta-final, .final-cta {
  text-align: center;
  padding: clamp(80px, 11vw, 130px) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
}
.final-cta::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(124, 92, 252, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
.cta-final h2, .final-cta__headline {
  font-family: "Inter", sans-serif;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  font-weight: 800;
  letter-spacing: -0.03em;
  /* kill gradient text */
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: unset;
  -webkit-background-clip: unset;
}
.cta-final p, .final-cta__sub {
  color: var(--text-muted);
  margin-bottom: 36px;
  font-size: 1.05rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.final-cta__urgency {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.final-cta__micro {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.final-cta__micro span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Testimonials ---------- */
.testimonials { background: transparent; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1024px) {
  .testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .testimonials__grid { grid-template-columns: 1fr; gap: 16px; }
}
.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: border-color var(--t);
}
.testi-card:hover { border-color: var(--accent); }
.testi-card__stars { color: #fbbf24; font-size: 0.98rem; margin-bottom: 14px; letter-spacing: 2px; }
.testi-card__quote {
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 22px;
  position: relative;
  font-weight: 400;
}
.testi-card__quote::before {
  content: '"';
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 3.2rem;
  color: var(--accent);
  opacity: 0.4;
  position: absolute;
  top: -16px;
  left: -8px;
  line-height: 1;
  font-weight: 700;
}
.testi-card__author { display: flex; align-items: center; gap: 12px; }
.testi-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.testi-card__name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--pure-white);
  font-size: 0.95rem;
}
.testi-card__role { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Guarantee ---------- */
.guarantee { text-align: center; background: transparent; border-top: 1px solid var(--border-subtle); }
.guarantee__box {
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: 56px 44px;
  max-width: 64ch;
  margin: 0 auto;
  text-align: left;
}
.guarantee__icon {
  font-size: 1rem;
  margin-bottom: 18px;
  display: inline-block;
  color: var(--accent-light);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.guarantee__title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--pure-white);
  margin-bottom: 14px;
  max-width: 22ch;
  letter-spacing: -0.025em;
}
.guarantee__sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 50ch;
  line-height: 1.7;
}
.guarantee__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  margin: 0 0 32px;
}
.guarantee__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.65;
}
.guarantee__list .g-check {
  color: var(--success);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 4px;
  font-weight: 700;
}

/* ---------- Footer ---------- */
footer {
  background: transparent;
  border-top: 1px solid var(--border-subtle);
  padding: 60px 24px 28px;
}
.footer__inner { max-width: var(--container-wide); margin: 0 auto; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__brand-name {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pure-white);
  letter-spacing: -0.025em;
}
.footer__brand-name span { color: var(--accent); }
.footer__brand-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 36ch;
}
.footer__col-title {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.footer__links {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links li { list-style: none; margin: 0; padding: 0; }
.footer__links li::before { display: none !important; }
.footer__links a {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t);
  display: block;
}
.footer__links a:hover { color: var(--accent-light); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__copy { font-size: 0.8rem; color: var(--text-dim); }
.footer__bottom-links {
  display: flex;
  gap: 24px;
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.footer__bottom-links li { list-style: none; margin: 0; padding: 0; }
.footer__bottom-links li::before { display: none !important; }
.footer__bottom-links a {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t);
}
.footer__bottom-links a:hover { color: var(--text-muted); }

/* ---------- Misc ---------- */
.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-light);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.highlight-pill em { color: var(--pure-white); font-style: normal; font-weight: 800; }

.section-divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 24px;
  border-radius: 0;
}

.glow-text { color: var(--accent-light); }
.gradient-text {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: currentColor;
  background-clip: unset;
  color: var(--text);
}
.gradient-text em { color: var(--accent); }

.press-badge {
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: "Inter", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.social-proof__press { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.social-proof__press-label {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ---------- Scroll Reveal ---------- */
/* Always-visible: opacity gate disabled to prevent below-fold sections from
   staying invisible when IntersectionObserver doesn't trigger (e.g. screenshot
   capture, slow main thread, observer race conditions). The .visible class is
   still applied for any future entrance-animation hook, but no longer required
   to render content. */
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
.reveal-delay-4 { transition-delay: 0.24s; }
.reveal-delay-5 { transition-delay: 0.30s; }

/* ============================================================
   "Works everywhere" — compatibility list rows
   Semantic, responsive grid that replaces inline-styled flex blocks.
   ============================================================ */
.works__list {
  display: grid;
  gap: 12px;
  max-width: 880px;
  margin: 36px auto 0;
}
.works-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.works-row:hover { border-color: var(--accent); }
.works-row__cat {
  font-weight: 700;
  color: var(--accent-light);
}
.works-row__list {
  color: var(--text-muted);
  font-size: 0.96em;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .works-row {
    grid-template-columns: 1fr;
    padding: 16px 18px;
    gap: 4px;
  }
  .works-row__cat {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .works-row__list { font-size: 0.92rem; }
}

/* ============================================================
   Pricing "compare badge" — subtle pill above pricing grid
   ============================================================ */
.compare-badge-wrap {
  text-align: center;
  margin: 8px auto 24px;
  max-width: 720px;
}
.compare-badge {
  display: inline-block;
  padding: 8px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  color: var(--accent-light);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .compare-badge { font-size: 0.86rem; padding: 8px 14px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .stealth__visual { grid-template-columns: 1fr; gap: 20px; }
  .stealth__arrow { display: none; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  section { padding: 60px 0; }
  .hero { padding: 60px 0 48px; }

  .nav__links { display: none; }

  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; }
  .price-card--popular, .plan-card--popular { transform: none; }

  .before-after__grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand-desc { max-width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  .hero__headline { max-width: 100%; }
  .hero__cta-group { width: 100%; }
  .hero__cta-group .btn { flex: 1; min-width: 0; }

  .wordmark--hero { font-size: clamp(2.2rem, 11vw, 3.6rem); }

  /* Comparison table: stacked cards */
  .table-wrap { overflow-x: visible; border: none; background: none; }
  table { min-width: 0; background: none; border-collapse: separate; border-spacing: 0 12px; }
  thead { display: none; }
  tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 4px;
    overflow: hidden;
  }
  tbody tr:hover { background: var(--surface-2); }
  tbody td:first-child {
    grid-column: 1 / -1;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--pure-white);
  }
  tbody td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    font-size: 0.88rem;
    border-bottom: none;
  }
  tbody td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 8px;
    flex-shrink: 0;
  }
  tbody td:nth-child(2) { background: var(--accent-soft); }
  tbody td:nth-child(2)::before { color: var(--accent-light); }
  tbody td:nth-child(2), tbody td:nth-child(4) { border-right: 1px solid var(--border-subtle); }
  tbody td:nth-child(2), tbody td:nth-child(3) { border-bottom: 1px solid var(--border-subtle); }

  /* Compare table (Free vs Pro) = solo 3 colonne → resta tabella normale, NON stacked-card.
     La regola stacked generica sopra (per le tabelle vs/ multi-colonna con data-label) le
     toglieva l'header Free/Pro lasciando ✓/✗ orfani su mobile. Qui la si ripristina compatta. */
  .compare-table { display: table; border-spacing: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .compare-table thead { display: table-header-group; }
  .compare-table thead th { padding: 11px 8px; font-size: 0.8rem; }
  .compare-table tbody tr { display: table-row; background: none; border: none;
    border-radius: 0; margin: 0; overflow: visible; }
  .compare-table tbody td { display: table-cell; border-bottom: 1px solid var(--border-subtle);
    padding: 11px 8px; font-size: 0.82rem; text-align: center; }
  .compare-table tbody td:first-child { grid-column: auto; background: none; color: var(--text);
    text-align: left; font-weight: 500; font-size: 0.82rem; line-height: 1.3; }
  .compare-table tr.is-pro td:first-child { background: var(--surface-2); }
  .compare-table tbody td:not(:first-child)::before { content: none; }
  .compare-table tbody td:nth-child(2), .compare-table tbody td:nth-child(3) { border-right: none; }
}

@media (max-width: 480px) {
  /* mobile stretto: colonna funzionalità più larga, Free/Pro strette */
  .compare-table thead th:first-child, .compare-table tbody td:first-child { font-size: 0.78rem; }
  .compare-table th:not(:first-child), .compare-table td:not(:first-child) { width: 56px; }
  .hero__cta-group { flex-direction: column; }
  .btn--lg, .btn--xl { width: 100%; }
  .guarantee__box { padding: 40px 24px; }
  .stealth__how { padding: 24px; }
}

/* ---------- Selection ---------- */
/* ---------- Compare table (Free vs Pro) ---------- */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.92rem;
}
.compare-table th {
  padding: 16px 20px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.compare-table th:first-child { text-align: left; }
.compare-table th.compare-table__pro { color: var(--accent-light); } /* a11y: --accent 4.18:1 a 12.5px su card */
.compare-table td {
  padding: 14px 20px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.compare-table td:first-child { color: var(--text); text-align: left; }
.compare-table tr.is-pro td:first-child { background: var(--surface-2); font-weight: 500; }
.compare-table tbody tr:last-child td { border-bottom: none; }
/* Specificità .compare-table .compare-* (0,2,0) per battere .compare-table td (0,1,1),
   altrimenti il colore var(--text-muted) di .compare-table td vinceva e ✓/✗ restavano grigi. */
.compare-table .compare-yes { color: var(--success); font-size: 1.15rem; font-weight: 700; }
.compare-table .compare-no  { color: var(--danger);  font-size: 1.15rem; font-weight: 700; }

::selection { background: var(--accent); color: var(--pure-white); }

/* ---------- Focus visible (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--pure-white);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ==================================================================
   Title alignment uniform — center (utente request 2026-05-29)
   Tutti i titoli e contenuti delle card grid SONO centrati per
   evitare il mix center/left precedente.
   ================================================================== */

.platforms-card,
.feature-card,
.pain-card,
.trust-card,
.testi-card,
.plan-card,
.guarantee__box,
.problem__twist,
.stealth__how .how-step {
  text-align: center;
}

.platforms-card__title,
.platforms-card__cat,
.platforms-card__brands,
.platforms-card__note,
.feature-card__title,
.feature-card__desc,
.feature-card__benefit,
.pain-card__title,
.pain-card__desc,
.pain-card__number,
.trust-card__title,
.trust-card__desc,
.testi-card__name,
.testi-card__role,
.testi-card__quote,
.plan-name,
.plan-note,
.step__title,
.step__desc,
.how-step__title,
.how-step__desc,
.section-title,
.section-sub,
.section-label {
  text-align: center;
}

.testi-card__quote::before { left: 50%; transform: translateX(-50%); }

/* Liste interne alle card (features pricing, plan-features) restano left per leggibilità */
.plan-features,
.guarantee__list,
.compare__table {
  text-align: left;
}

/* ==================================================================
   Universal center alignment for body text (utente 2026-05-29)
   Tutto il testo fuori dalle tabelle/liste pricing è centrato.
   ================================================================== */

body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body div, body section, body article,
body blockquote, body figcaption,
body ul, body ol, body li,
body label, body small,
body .article-page,
body .article-page h1, body .article-page h2, body .article-page h3,
body .article-page p, body .article-page li,
body .legal-page, body .legal-page p, body .legal-page h2,
body .tech-card, body .tech-card p,
body .step-list, body .step-list li,
body .cta-box, body .cta-box p {
  text-align: center;
}

/* Eccezioni esplicite — restano LEFT per leggibilità tabellare/liste */
table, table *,
.compare__table, .compare__table *,
.plan-features, .plan-features *,
.guarantee__list, .guarantee__list *,
pre, code, .tech-card pre, .tech-card code,
.faq-item__panel, .faq-item__panel *,
.testi-card__quote,
form, form *, .form-grid, .form-grid *,
input, textarea, select, .ticket-form, .ticket-form * {
  text-align: left;
}

/* Form labels al centro però (sono titoli di campo, non long-form) */
form label, form .form-label { text-align: center; }

/* RTL: l'arabo mantiene direction RTL, ma con text-align center comunque */
html[dir="rtl"] body,
html[dir="rtl"] body * { text-align: center; }
html[dir="rtl"] table,
html[dir="rtl"] table *,
html[dir="rtl"] .compare__table,
html[dir="rtl"] .compare__table *,
html[dir="rtl"] .plan-features,
html[dir="rtl"] .plan-features *,
html[dir="rtl"] pre,
html[dir="rtl"] code { text-align: right; }

/* ==================================================================
   NUCLEAR CENTER (utente 2026-05-29) — !important override
   Tutto centrato eccetto tabelle/code/form/lista features.
   ================================================================== */

body *:not(table):not(tr):not(td):not(th):not(thead):not(tbody):not(tfoot):not(pre):not(code):not(.plan-features):not(.plan-features *):not(.guarantee__list):not(.guarantee__list *):not(.compare__table):not(.compare__table *):not(.faq-item__panel):not(.faq-item__panel *):not(input):not(textarea):not(select):not(.ticket-form):not(.ticket-form *):not(form):not(form *):not(.ba-col__list):not(.ba-col__list *) {
  text-align: center !important;
}

/* RTL Arabic: tutto centrato comunque */
html[dir="rtl"] body *:not(table):not(tr):not(td):not(th):not(pre):not(code):not(.plan-features *):not(.compare__table *) {
  text-align: center !important;
}

/* ==================================================================
   FIX 2026-05-29: block-level centering for section titles & labels
   text-align:center centra il testo DENTRO il box, ma il box stesso
   resta left-aligned se ha max-width. Forziamo margin auto.
   ================================================================== */

body .section-title,
body .section-label,
body .section-sub,
body .hero__headline,
body .hero__sub,
body .hero__tagline,
body .hero__eyebrow,
body .hero__note,
body .guarantee__title,
body .guarantee__sub,
body .problem__twist h3,
body .problem__twist p,
body .solution__reveal,
body .final-cta__headline,
body .platforms__footnote,
body .stealth__how h2,
body .stealth__callout,
body .platforms-card__title,
body .platforms-card__cat,
body .platforms-card__brands,
body .platforms-card__note,
body .feature-card__title,
body .feature-card__desc,
body .feature-card__benefit,
body .pain-card__title,
body .pain-card__desc,
body .pain-card__number,
body .trust-card__title,
body .trust-card__desc,
body .testi-card__name,
body .testi-card__role,
body .testi-card__quote,
body .plan-name,
body .plan-note,
body .plan-features,
body .step__title,
body .step__desc,
body .how-step__title,
body .how-step__desc,
body .compare-badge-wrap,
body .compare-badge,
body article.article-page > *,
body .legal-page > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Article body content: keep paragraphs centered as blocks */
body article.article-page p,
body article.article-page h1,
body article.article-page h2,
body article.article-page h3,
body article.article-page ul,
body article.article-page ol {
  max-width: 70ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================================================
   FIX 2026-05-29 v2: liste con check/bullet/icon vanno LEFT
   La regola center le scomponeva con grossi spazi tra icon e text.
   ================================================================== */

body .solution__points,
body .solution__points li,
body .solution__points li *,
body .ba-col__list,
body .ba-col__list li,
body .ba-col__list li *,
body ul li:has(> .g-check),
body ul li:has(> svg),
body ul li:has(> .check),
body .feature-card__benefit,
body .feature-card__benefit *,
body .stealth-tech__list,
body .stealth-tech__list li,
body .stealth-tech__list li *,
body .compare__row,
body .compare__row *,
body .compare__cell,
body ul[class*="__list"],
body ul[class*="__list"] li,
body ul[class*="__list"] li *,
body ol[class*="__list"],
body ol[class*="__list"] li,
body ol[class*="__list"] li * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Container delle liste (ul) resta center per centrare il blocco intero, 
   ma i li interni sono LEFT */
body .solution__points,
body .ba-col__list,
body .stealth-tech__list,
body ul[class*="__list"] {
  display: inline-block;
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==================================================================
   FIX 2026-05-29 v3: bottoni .btn e wordmark badge centrati
   Inline-flex/inline-block element non si centrano con text-align:center
   sul wrapper; servono margin auto + parent display block centered.
   ================================================================== */

body .btn,
body a.btn,
body button.btn,
body .wordmark,
body .wordmark--inline,
body .wordmark-tagline,
body .solution__brand,
body .hero__cta-group,
body .hero__cta-group > *,
body .cta-group,
body .cta-group > *,
body .final-cta,
body .final-cta > *,
body .install-cta,
body .install-cta > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .hero__cta-group,
body .cta-group {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px;
}

/* Inline badge wrapper (es. "AdOff. Ads? Off." pill in solution section) */
body .solution__brand,
body p:has(> .wordmark),
body div:has(> a.btn:only-child) {
  text-align: center !important;
  display: block;
}

/* ── A11y: link nella prosa legale distinguibili senza colore (WCAG 1.4.1) ── */
.privacy-section p a,
.privacy-section li a {
  text-decoration: underline;
  text-underline-offset: 2px;
}