/* ============================================================================
   site.css — foglio di stile condiviso di tutte le pagine del sito VyperBooster.
   Estratto dal <style> unico che prima viveva solo in index.html (490 righe,
   tutto su una pagina) quando il sito e' stato espanso in piu' pagine reali
   (Home, Funzionalita', Giochi supportati, Come funziona, Prezzi, FAQ) — un
   solo file cosi' ogni pagina resta visivamente identica senza duplicare le
   stesse centinaia di righe di CSS in ognuna.

   Note performance (invariate dalla versione originale): niente filter:blur()
   ne' backdrop-filter — sono gli effetti piu' pesanti da ricalcolare ad ogni
   frame. Il glow dei blob viene da radial-gradient morbidi (stesso risultato
   visivo, zero ricalcolo), le card usano sfondo solido, e le uniche animazioni
   continue sono su transform/opacity/background-position (le 3 proprieta' che
   il browser anima via GPU senza rifare layout/repaint pesanti).
   ============================================================================ */

:root {
  --bg: #09060a;
  --text: #fdf6ee;
  --text-dim: #c9b6a3;
  --text-dim2: #90806f;
  --border: #3a2412;
  --accent: #ff7a1a;
  --accent2: #ff9500;
  --accent-deep: #d94a00;
  --accent-soft: #ffcf8a;
  --card-bg: rgba(255,140,40,0.035);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
::selection { background: rgba(255,122,26,0.35); color: #fff; }
img { max-width: 100%; }
a { color: inherit; }

@keyframes blobFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.15); } }
@keyframes blobFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,40px) scale(1.18); } }
@keyframes blobFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,50px) scale(0.92); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes floatIcon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ringPulse { 0% { transform: scale(0.85); opacity: 0.7; } 70% { opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes logoIntro { from { opacity: 0; transform: scale(0.7) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes sweep { from { transform: translateX(-130%) skewX(-15deg); } to { transform: translateX(230%) skewX(-15deg); } }

/* ── Sfondo condiviso (blob + rumore + immagine hero sfumata) ── */
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 920px; pointer-events: none; z-index: 0;
  background-image: url('/assets/bg-viper.jpg'); background-size: cover; background-position: center 15%;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0) 100%);
}
.hero-bg--sm { height: 460px; opacity: 0.4; }

.blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.blob-1 { top: -160px; left: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,122,26,0.24), rgba(255,122,26,0.06) 45%, transparent 72%); animation: blobFloat1 14s ease-in-out infinite; }
.blob-2 { top: 90px; right: -180px; width: 680px; height: 680px; background: radial-gradient(circle, rgba(255,149,0,0.18), rgba(255,149,0,0.04) 45%, transparent 72%); animation: blobFloat2 17s ease-in-out infinite; }
.blob-3 { bottom: -220px; left: 20%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(217,74,0,0.20), rgba(217,74,0,0.05) 45%, transparent 72%); animation: blobFloat3 19s ease-in-out infinite; }

.noise-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ticker ── */
.ticker-wrap {
  position: relative; z-index: 1; overflow: hidden; border-top: 1px solid rgba(255,122,26,0.18);
  border-bottom: 1px solid rgba(255,122,26,0.18); background: rgba(255,122,26,0.045); padding: 11px 0;
}
.ticker-track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.ticker-track span {
  display: flex; align-items: center; gap: 14px; font-family: 'Russo One', sans-serif; font-size: 13px;
  letter-spacing: 0.14em; color: #ffb347; text-transform: uppercase; padding: 0 28px; white-space: nowrap;
}
.ticker-track span::after { content: '◆'; color: rgba(255,122,26,0.5); font-size: 9px; margin-left: 14px; }

/* ── Navbar ── */
.navbar {
  position: sticky; top: 0; z-index: 50; backdrop-filter: none;
  background: rgba(9,6,10,0.86); border-bottom: 1px solid rgba(255,122,26,0.16);
  background-size: 200% 100%; background-position: 0% 0%;
  background-image: linear-gradient(90deg, rgba(9,6,10,0.86), rgba(9,6,10,0.86));
  box-shadow: 0 1px 0 rgba(255,122,26,0), 0 12px 30px -20px rgba(0,0,0,0);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .25s ease;
}
.navbar::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%; background-position: -50% 0;
  opacity: 0; transition: opacity .4s ease;
  animation: navSheen 7s linear infinite;
  animation-play-state: paused;
}
.navbar--scrolled {
  background: rgba(9,6,10,0.97);
  border-bottom-color: rgba(255,122,26,0.28);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,0.65);
}
.navbar--scrolled::before { opacity: 1; animation-play-state: running; }
.navbar--scrolled .nav-inner { padding-top: 10px; padding-bottom: 10px; }
@keyframes navSheen { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
.nav-inner {
  position: relative; max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; transition: padding .25s ease;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img {
  width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(255,122,26,0.6));
  transition: transform .3s ease, filter .3s ease;
}
.nav-brand:hover img { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 0 16px rgba(255,122,26,0.85)); }
.nav-brand span { font-family: 'Russo One', sans-serif; font-size: 16px; letter-spacing: -0.01em; }
.nav-brand .nb-white { color: #fff; }
.nav-brand .nb-accent { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-cta-mobile { display: none; }
.nav-links a {
  position: relative; display: inline-block; text-decoration: none; color: var(--text-dim); font-size: 13.5px; font-weight: 600;
  padding: 9px 10px; border-radius: 9px; white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.nav-links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,var(--accent-deep),var(--accent2));
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,122,26,0.1); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 9px;
  background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); background-size: 160% 100%; background-position: 0% 0%;
  color: #fff; white-space: nowrap;
  box-shadow: 0 0 20px rgba(255,122,26,0.3); transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255,122,26,0.5); background-position: 100% 0%; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border); color: #fff; width: 40px; height: 40px;
  border-radius: 9px; font-size: 18px; cursor: pointer; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-toggle:hover { background: rgba(255,122,26,0.1); border-color: rgba(255,122,26,0.4); }
.nav-toggle:active { transform: scale(0.92); }
.nav-lang { display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 3px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.nav-lang a {
  text-decoration: none; color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
  padding: 4px 7px; border-radius: 6px; transition: color .2s ease, background .2s ease;
}
.nav-lang a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-lang a.active { color: #fff; background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); }
@media (max-width: 860px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: #0c0810; border-bottom: 0 solid rgba(255,122,26,0.16); padding: 0 18px;
    gap: 2px; max-height: 0; overflow: hidden;
    transition: max-height .25s ease, padding .25s ease, border-width .25s ease; }
  .nav-links.open { max-height: 420px; padding: 10px 18px 18px; border-bottom-width: 1px; }
  .nav-links a { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .nav-links a::after { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav-links .nav-cta-mobile { display: inline-block; text-align: center; margin-top: 8px;
    background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); color: #fff; border-radius: 9px; padding: 12px; }
}

.page { max-width: 980px; margin: 0 auto; padding: 64px 24px 90px; position: relative; z-index: 1; }
.page--narrow { max-width: 820px; }

/* ── Hero (grande, home) ── */
.hero { text-align: center; padding: 20px 0 36px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  background: rgba(255,122,26,0.10); border: 1px solid rgba(255,122,26,0.35);
  font-size: 12.5px; letter-spacing: 0.06em; color: #ffdcb3; text-transform: uppercase; margin-bottom: 26px;
  opacity: 0; animation: fadeUp .7s ease .05s forwards;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff9500; box-shadow: 0 0 10px 2px rgba(255,149,0,0.8); animation: blink 1.8s ease-in-out infinite; }

.hero-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; height: 168px; }
.hero-logo-ring { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid rgba(255,122,26,0.55); animation: ringPulse 2.6s ease-out infinite; }
.hero-logo-ring.d2 { animation-delay: 1.3s; }
.hero-logo { position: relative; width: 132px; height: 132px; filter: drop-shadow(0 0 24px rgba(255,122,26,0.65)); animation: logoIntro .8s cubic-bezier(.2,.9,.3,1.3) forwards, floatIcon 6s ease-in-out .8s infinite; }

h1.title { margin: 0; font-family: 'Russo One', sans-serif; font-size: clamp(38px, 7vw, 68px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; opacity: 0; animation: fadeUp .7s ease .15s forwards; }
.title-white { color: #fff; }
.title-accent {
  background: linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-soft),var(--accent),var(--accent-deep));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,122,26,0.55)); animation: shimmer 5s linear infinite;
}
.subtitle { color: var(--text-dim); font-size: 18px; max-width: 560px; margin: 22px auto 0; line-height: 1.7; opacity: 0; animation: fadeUp .7s ease .25s forwards; }

.cta-row { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp .7s ease .35s forwards; }
.btn { position: relative; overflow: hidden; text-decoration: none; font-weight: 700; font-size: 16px; padding: 16px 34px; border-radius: 12px; display: inline-block; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.btn-primary { background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); color: #fff; box-shadow: 0 0 40px rgba(255,122,26,0.4), 0 10px 30px rgba(0,0,0,0.4); }
.btn-primary::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; z-index: -1; background: conic-gradient(from 0deg,var(--accent-deep),var(--accent-soft),var(--accent),var(--accent-deep)); filter: blur(6px); opacity: 0.75; animation: spinRing 5s linear infinite; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); animation: sweep 3.2s ease-in-out infinite; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(255,122,26,0.6), 0 14px 34px rgba(0,0,0,0.45); }
.btn-secondary { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); transform: translateY(-2px); background: rgba(255,122,26,0.1); }
.btn-sm { padding: 11px 22px; font-size: 14px; border-radius: 10px; }

.version-meta { margin-top: 20px; font-size: 13px; color: var(--text-dim2); letter-spacing: 0.02em; opacity: 0; animation: fadeUp .7s ease .45s forwards; }

/* ── Hero piccolo (pagine interne) ── */
.page-hero { text-align: center; padding: 10px 0 30px; }
.page-hero h1 { font-family: 'Russo One', sans-serif; font-size: clamp(30px,5.4vw,46px); margin: 0 0 14px; color: #fff; line-height: 1.15; opacity: 0; animation: fadeUp .7s ease .05s forwards; }
.page-hero h1 .accent { color: var(--accent); }
.page-hero p { color: var(--text-dim); font-size: 16.5px; max-width: 620px; margin: 0 auto; line-height: 1.75; opacity: 0; animation: fadeUp .7s ease .15s forwards; }

/* ── Stat cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; margin: 60px 0; }
.stat-card { background: linear-gradient(180deg, rgba(255,140,40,0.09), rgba(255,255,255,0.02)); border: 1px solid rgba(255,122,26,0.22); border-radius: 16px; padding: 22px; text-align: center; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.stat-card:hover { transform: translateY(-5px) scale(1.02); border-color: rgba(255,122,26,0.6); background: linear-gradient(180deg, rgba(255,140,40,0.14), rgba(255,255,255,0.02)); }
.stat-value { font-family: 'Russo One', sans-serif; font-size: 28px; font-weight: 800; color: #ffb347; text-shadow: 0 0 20px rgba(255,122,26,0.6); }
.stat-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; }

.section-label { font-family: 'Russo One', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: #ffb347; text-align: center; margin: 0 0 30px; }
.section-label--left { text-align: left; }
.eyebrow { font-family: 'Russo One', sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); text-align: center; margin: 0 0 10px; }

/* ── Feature highlight cards (home + intro di altre pagine) ── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; }
.feature-card { text-decoration: none; display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 26px; transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease; }
.feature-card:hover { border-color: var(--accent); transform: translateY(-5px); background: rgba(255,122,26,0.07); box-shadow: 0 12px 28px rgba(255,100,0,0.15); }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,122,26,0.28), rgba(255,149,0,0.15)); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; animation: floatIcon 5s ease-in-out infinite; color: var(--accent2); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #fff; }
.feature-card p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.65; }
.feature-card .fc-link { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--accent2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.features-intro { text-align: center; color: var(--text-dim); font-size: 15.5px; max-width: 640px; margin: 0 auto 44px; line-height: 1.75; }

/* ── Categorie/mini-card (pagina Funzionalita') ── */
.category-block { margin-bottom: 46px; }
.category-block:last-child { margin-bottom: 0; }
.category-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.category-icon { width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.category-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,122,26,0.45)); }
.category-title { font-family: 'Russo One', sans-serif; font-size: 17.5px; color: #fff; margin: 0; }
.category-sub { color: var(--text-dim); font-size: 14px; margin: -10px 0 16px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 12px; }
.mini-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-size: 14px; color: var(--text-dim); line-height: 1.65; transition: border-color .2s ease, background .2s ease; }
.mini-card:hover { border-color: var(--accent); background: rgba(255,122,26,0.06); }
.mini-card strong { color: var(--text); }

/* ── Giochi supportati ── */
.game-toolbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 34px; }
.game-chip { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-dim); }
.game-chip.is-premium { border-color: rgba(255,122,26,0.45); color: #ffdcb3; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.game-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 18px; transition: border-color .2s ease, transform .2s ease, background .2s ease; position: relative; }
.game-card:hover { border-color: var(--accent); transform: translateY(-4px); background: rgba(255,122,26,0.06); }
.game-card-logo { width: 100%; height: 84px; border-radius: 10px; background-color: #0d0d14; background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.06); }
.game-card h3 { margin: 0 0 6px; font-size: 15.5px; color: #fff; }
.game-card p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.game-badge { position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,122,26,0.22); border: 1px solid rgba(255,122,26,0.5); color: #ffdcb3; }

/* ── Prezzi ── */
.price-toggle { display: flex; justify-content: center; gap: 6px; margin: 0 0 40px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px; width: fit-content; margin-left: auto; margin-right: auto; }
.price-toggle button { border: none; background: none; color: var(--text-dim); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13.5px; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.price-toggle button.active { background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); color: #fff; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; }
.price-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px; text-align: center; transition: border-color .2s ease, transform .2s ease; position: relative; }
.price-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.price-card.is-best { border-color: var(--accent); background: linear-gradient(180deg, rgba(255,140,40,0.12), rgba(255,255,255,0.02)); }
.price-best-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: linear-gradient(90deg,var(--accent-deep),var(--accent2)); color: #fff; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.price-plan-name { font-size: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.price-value { font-family: 'Russo One', sans-serif; font-size: 38px; color: #fff; }
.price-value small { font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--text-dim); font-weight: 600; }
.price-period { font-size: 12.5px; color: var(--text-dim2); margin: 4px 0 20px; }
.price-features { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.price-features li { font-size: 13.5px; color: var(--text-dim); padding: 7px 0 7px 24px; position: relative; border-top: 1px solid rgba(255,255,255,0.04); }
.price-features li:first-child { border-top: none; }
.price-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent2); font-weight: 800; }

/* ── FAQ (accordion nativo <details>) ── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s ease; }
.faq-item[open] { border-color: rgba(255,122,26,0.45); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 46px 18px 20px; font-size: 15.5px; font-weight: 700; color: #fff; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--accent2); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-a { padding: 0 20px 20px; color: var(--text-dim); font-size: 14.5px; line-height: 1.75; }

/* ── OS teaser ── */
.os-teaser { margin-top: 76px; text-align: center; background: linear-gradient(180deg, rgba(255,140,40,0.09), rgba(255,255,255,0.02)); border: 1px solid rgba(255,122,26,0.3); border-radius: 22px; padding: 44px 32px; }
.os-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(255,122,26,0.12); border: 1px solid rgba(255,122,26,0.4); font-size: 12px; letter-spacing: 0.08em; color: #ffdcb3; text-transform: uppercase; margin-bottom: 18px; }
.os-teaser h2 { font-family: 'Russo One', sans-serif; font-size: clamp(24px,4vw,34px); margin: 0 0 14px; color: #fff; }
.os-teaser p { color: var(--text-dim); font-size: 15.5px; max-width: 600px; margin: 0 auto; line-height: 1.75; }

/* ── Come funziona / step list ── */
.how-card { margin-top: 70px; background: linear-gradient(180deg, rgba(255,140,40,0.07), rgba(255,255,255,0.015)); border: 1px solid var(--border); border-radius: 22px; padding: 36px; }
.how-card:first-child { margin-top: 0; }
.how-card .section-label { text-align: left; margin: 0 0 26px; }
.steps { display: flex; flex-direction: column; gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(255,122,26,0.7), rgba(255,122,26,0.05)); }
.step { display: flex; gap: 18px; align-items: flex-start; position: relative; padding: 14px 0; }
.step-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; position: relative; z-index: 1; background: linear-gradient(135deg,var(--accent-deep),var(--accent2)); display: flex; align-items: center; justify-content: center; font-family: 'Russo One', sans-serif; font-weight: 700; font-size: 13px; box-shadow: 0 0 16px rgba(255,122,26,0.5); }
.step h4 { margin: 4px 0 4px; font-size: 15.5px; color: #fff; }
.step p { margin: 0; color: var(--text-dim); line-height: 1.7; }

/* ── Footer ── */
footer { margin-top: 76px; padding-top: 40px; border-top: 1px solid rgba(255,122,26,0.15); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 30px; margin-bottom: 34px; }
.footer-col h5 { font-family: 'Russo One', sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb347; margin: 0 0 14px; }
.footer-col a { display: block; text-decoration: none; color: var(--text-dim); font-size: 14px; padding: 5px 0; transition: color .2s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom { text-align: center; font-size: 12px; color: var(--text-dim2); padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.04); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}