/* VintPro landing — stesso design system dell'estensione */
:root { --blu:#0bbbef; --blu2:#07a2d0; --ink:#0f172a; --grigio:#64748b; --bg:#f8fafc; --bordo:#e2e8f0; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:130px; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; }

/* Tappo opaco fino a METÀ toolbar (come nell'estensione): copre il contenuto che scorre dietro gli angoli tondi */
body::before { content:''; position:fixed; top:0; left:0; right:0; height:calc(8px + var(--vp-toolbar-h, 116px) / 2); background:var(--bg); z-index:99; pointer-events:none; }

/* i18n: default IT; body.lang-en mostra EN */
.en { display:none; }
body.lang-en .en { display:revert; }
body.lang-en .it { display:none; }

/* === Toolbar card (header blu + action bar bianca) === */
.vp-toolbar-card { position:sticky; top:8px; z-index:100; margin:8px 12px 20px; border-radius:18px; box-shadow:0 8px 24px rgba(15,23,42,0.10); background:white; border:1px solid var(--bordo); }
.vp-brand-header { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--blu),var(--blu2)); padding:10px 24px; color:white; border-radius:18px 18px 0 0; }
/* Logo: bobbing continuo + scale+rotate al hover — identico a vp-anim.css dell'estensione */
@keyframes vp-logo-bob { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-2px) rotate(2deg); } }
.vp-brand-header img { width:32px; height:32px; border-radius:6px; background:white; padding:2px; animation:vp-logo-bob 4s ease-in-out infinite; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-origin:center; cursor:pointer; }
.vp-brand-header img:hover { animation:none; transform:scale(1.18) rotate(-8deg); }
.vp-brand-name { font-size:18px; font-weight:700; letter-spacing:0.02em; }
.vp-brand-spacer { flex:1; }
/* 🌐 Globo: rotazione 3D lenta continua, accelera al hover + scale bottone — identico all'estensione */
@keyframes vp-globe-spin { from { transform:rotateY(0deg); } to { transform:rotateY(360deg); } }
.vp-lang-toggle { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.18); color:white; border:1px solid rgba(255,255,255,0.25); padding:6px 12px; border-radius:20px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0.04em; transition:background 0.15s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.vp-lang-toggle .globe { display:inline-block; animation:vp-globe-spin 12s linear infinite; transform-origin:center; }
.vp-lang-toggle:hover { background:rgba(255,255,255,0.32); transform:scale(1.06); }
.vp-lang-toggle:hover .globe { animation:vp-globe-spin 1.2s linear infinite; }
.vp-action-bar { background:white; border-top:1px solid var(--bordo); padding:12px 24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:0 0 18px 18px; }
.vp-action-bar a { display:inline-flex; align-items:center; gap:6px; background:white; color:#334155; border:1px solid var(--bordo); padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; text-decoration:none; box-shadow:0 2px 4px rgba(15,23,42,0.04); transition:transform 0.15s, box-shadow 0.18s, border-color 0.15s, color 0.15s; }
.vp-action-bar a:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(11,187,239,0.18); border-color:var(--blu); color:var(--blu); }
.vp-action-bar a.vp-cta { background:linear-gradient(135deg,var(--blu),var(--blu2)); color:white; border:none; padding:13px 30px; border-radius:12px; font-size:15px; font-weight:700; letter-spacing:0.01em; box-shadow:0 6px 18px rgba(11,187,239,0.40); transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; }
.vp-action-bar a.vp-cta:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 24px rgba(11,187,239,0.55); color:white; }

/* === Container come l'estensione === */
.container { margin:0 12px 24px; background:white; border:1px solid var(--bordo); border-radius:16px; padding:28px; }
section { padding:34px 8px; }
h1 { font-size:clamp(30px,4.6vw,48px); line-height:1.15; letter-spacing:-0.02em; }
h2 { font-size:clamp(24px,3.2vw,32px); letter-spacing:-0.01em; margin-bottom:12px; }
.center { text-align:center; }
.sub { font-size:clamp(15px,2vw,19px); color:var(--grigio); max-width:680px; margin:16px auto 28px; }
.cta { display:inline-block; background:linear-gradient(135deg,var(--blu),var(--blu2)); color:white; padding:15px 32px; border-radius:12px; font-size:16px; font-weight:800; text-decoration:none; box-shadow:0 8px 24px rgba(11,187,239,0.4); transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; }
.cta:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 30px rgba(11,187,239,0.5); }
small.note { display:block; margin-top:14px; color:var(--grigio); font-size:13px; }

/* KPI-style cards (come dashboard) */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin-top:28px; }
.card { background:var(--bg); border:1px solid var(--bordo); border-radius:14px; padding:22px; transition:transform 0.18s, box-shadow 0.2s, border-color 0.18s; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(11,187,239,0.18); border-color:var(--blu); }
.card .emoji { font-size:26px; }
.card h3 { font-size:16px; margin:8px 0 5px; }
.card p { font-size:13.5px; color:var(--grigio); }

.privacy-box { background:white; color:#334155; border:2px solid var(--ink); border-radius:18px; padding:38px 36px; margin-top:24px; }
.privacy-box h3 { color:var(--ink); font-size:20px; margin:20px 0 8px; }
.privacy-box .stat { color:var(--blu2); font-weight:800; }
.privacy-box ul { margin:14px 0 0 20px; }
.privacy-box li { margin-bottom:9px; font-size:14.5px; }

.manual-banner { border-left:5px solid var(--blu); background:#f0fbff; border-radius:0 14px 14px 0; padding:22px 26px; margin-top:22px; }
.manual-banner p { color:var(--grigio); margin-top:6px; font-size:14.5px; }

.price-card { max-width:430px; margin:30px auto 0; background:white; border:2px solid var(--blu); border-radius:18px; padding:36px 34px; text-align:center; box-shadow:0 16px 44px rgba(11,187,239,0.18); }
.price-card .price { font-size:50px; font-weight:800; }
.price-card .price small { font-size:17px; color:var(--grigio); font-weight:600; }
.price-card ul { list-style:none; margin:20px 0 26px; text-align:left; }
.price-card li { padding:6px 0; font-size:14.5px; }
.price-card li::before { content:"✓ "; color:#16a34a; font-weight:800; }
.price-card .price-alt { margin-top:2px; font-size:14px; color:var(--grigio); }
.price-card .price-alt strong { color:#7c3aed; }
.price-card .cta { display:block; }
.cta.cta-year { background:linear-gradient(135deg,#8b5cf6,#7c3aed); box-shadow:0 8px 24px rgba(124,58,237,0.35); }
.cta.cta-year:hover { box-shadow:0 12px 30px rgba(124,58,237,0.45); }

/* === Toggle Mensile/Annuale (stile segmented con thumb scorrevole) === */
.bill-toggle { position:relative; display:inline-flex; background:#eef2f7; border:1px solid var(--bordo); border-radius:999px; padding:4px; margin-bottom:18px; }
.bill-toggle .bt-opt { position:relative; z-index:1; border:none; background:transparent; padding:9px 22px; border-radius:999px; font-family:inherit; font-size:14px; font-weight:700; color:var(--grigio); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:color 0.25s; }
.bill-toggle .bt-opt.active { color:var(--ink); }
.bill-toggle .bt-badge { font-size:11px; font-weight:800; background:#f3e8ff; color:#7c3aed; padding:2px 7px; border-radius:999px; }
.bill-toggle .bt-thumb { position:absolute; z-index:0; top:4px; left:4px; height:calc(100% - 8px); width:50%; background:white; border-radius:999px; box-shadow:0 3px 10px rgba(15,23,42,0.15); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), width 0.3s cubic-bezier(0.34,1.56,0.64,1); }

/* Piani: month visibile di default, year nascosto; .yearly inverte */
.price-card .plan-year { display:none; }
.price-card.yearly .plan-month { display:none; }
.price-card.yearly .plan-year { display:block; }
/* Animazione d'ingresso al cambio piano */
@keyframes vp-plan-in { from { opacity:0; transform:translateY(10px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.price-card.swapping .plan-month, .price-card.swapping .plan-year { animation:vp-plan-in 0.35s cubic-bezier(0.34,1.56,0.64,1); }

.faq-item { background:var(--bg); border:1px solid var(--bordo); border-radius:12px; padding:18px 22px; margin-top:10px; transition:border-color 0.15s; }
.faq-item:hover { border-color:var(--blu); }
.faq-item strong { display:block; margin-bottom:5px; font-size:15px; }
.faq-item p { color:var(--grigio); font-size:13.5px; }

/* Pagine legali */
.legal h2 { font-size:19px; margin-top:32px; color:var(--blu); }
.legal p, .legal li { font-size:14.5px; color:#334155; }
.legal ul { margin:10px 0 10px 22px; }
.legal table { border-collapse:collapse; width:100%; margin:14px 0; font-size:13.5px; }
.legal th, .legal td { border:1px solid var(--bordo); padding:8px 12px; text-align:left; }
.legal th { background:var(--bg); }
.legal .box { background:#f0fbff; border-left:4px solid var(--blu); padding:14px 18px; border-radius:0 10px 10px 0; margin:18px 0; }
.legal a { color:var(--blu); }

/* Sezione "come funziona" — step numerati */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:28px; }
.step { background:var(--bg); border:1px solid var(--bordo); border-radius:14px; padding:24px; position:relative; transition:transform 0.18s, box-shadow 0.2s, border-color 0.18s; }
.step:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(11,187,239,0.18); border-color:var(--blu); }
.step .n { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--blu),var(--blu2)); color:white; font-weight:800; font-size:16px; box-shadow:0 4px 10px rgba(11,187,239,0.35); }
.step h3 { font-size:16px; margin:10px 0 5px; }
.step p { font-size:13.5px; color:var(--grigio); }

/* Tabella confronto */
.compare { width:100%; border-collapse:separate; border-spacing:0; margin-top:26px; font-size:14px; border:1px solid var(--bordo); border-radius:14px; overflow:hidden; }
.compare th, .compare td { padding:12px 14px; text-align:center; border-bottom:1px solid var(--bordo); }
.compare th { background:var(--bg); font-size:13px; }
.compare td:first-child, .compare th:first-child { text-align:left; font-weight:600; }
.compare tr:last-child td { border-bottom:none; }
.compare .vp-col { background:#f0fbff; font-weight:700; }
.compare th.vp-col { background:linear-gradient(135deg,var(--blu),var(--blu2)); color:white; }

/* Striscia garanzie */
.guarantee { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.guarantee > span { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:700; }
.guarantee > span > span { background:none; border:none; padding:0; border-radius:0; }

footer { margin:0 12px 16px; background:var(--ink); color:#94a3b8; padding:26px 28px; font-size:13px; border-radius:16px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
footer a { color:#cbd5e1; text-decoration:none; margin-right:14px; }
footer a:hover { color:white; }

/* Tabella confronto: scorrimento orizzontale dove non entra */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:26px; }
.table-scroll .compare { margin-top:0; min-width:560px; }

/* === Mobile === */
@media (max-width: 640px) {
  .vp-toolbar-card { margin:8px 8px 16px; }
  .vp-brand-header { padding:9px 16px; }
  .vp-action-bar { padding:9px 10px; gap:6px; }
  .vp-action-bar a { padding:6px 10px; font-size:12px; gap:4px; }
  .vp-action-bar a.vp-cta { flex-basis:100%; justify-content:center; padding:11px 14px; font-size:14px; }
  .container { margin:0 8px 16px; padding:18px 14px; }
  section { padding:26px 2px; }
  .privacy-box { padding:24px 18px; }
  .price-card { padding:28px 20px; }
  .compare th, .compare td { padding:9px 8px; font-size:12.5px; }
  .compare th { font-size:11.5px; }
  footer { margin:0 8px 12px; padding:20px 18px; }
  .legal table { display:block; overflow-x:auto; white-space:nowrap; }
}