:root{
  --ink:#0c0f14; --ink-2:#0f131a; --surface:#151a21; --surface-2:#1b222c;
  --line:#232c38; --line-soft:#1a212b;
  --tx:#f2f5f8; --tx-2:#a9b6c4; --tx-3:#7d8b9a;
  --brand:#7c6bff; --brand-lt:#9b8dff; --pos:#3ddc97; --neg:#ff6b6b; --gold:#ffc145;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--tx); font-family:var(--font);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-lt)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.narrow{max-width:780px}
section{padding:78px 0}
@media (max-width:760px){ section{padding:54px 0} }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20; background:rgba(12,15,20,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex; align-items:center; gap:26px; height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tx); font-weight:700; letter-spacing:-.2px}
.logo svg{display:block}
.nav nav{margin-left:auto; display:flex; gap:24px; font-size:15px}
.nav nav a{color:var(--tx-2); text-decoration:none}
.nav nav a:hover{color:var(--tx)}
@media (max-width:700px){ .nav nav{gap:16px; font-size:14px} .nav nav .hide-sm{display:none} }

/* ---------- hero ---------- */
.hero{
  padding:74px 0 40px;
  background:radial-gradient(78% 46% at 22% 0%, rgba(124,107,255,.20), transparent 68%);
}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.eyebrow{font-size:12.5px; letter-spacing:2.6px; color:var(--brand-lt); font-weight:700}
h1{font-size:53px; line-height:1.06; letter-spacing:-1.6px; margin:16px 0 0; font-weight:800}
h1 .grad{background:linear-gradient(100deg,#9b8dff,#3ddc97); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:19.5px; color:var(--tx-2); margin-top:20px; max-width:30em}
.badges{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.badge{
  display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); color:var(--tx-2); font-size:14.5px;
}
.badge b{display:block; color:var(--tx); font-size:15.5px; font-weight:600; line-height:1.25}
.badge small{font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--tx-3)}
.hero-note{margin-top:18px; color:var(--tx-3); font-size:14.5px}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:38px}
  h1{font-size:40px; letter-spacing:-1px}
  .hero{padding-top:48px}
}

/* ---------- phone frame ---------- */
.phone{
  --frame:8px; --r:45px;
  border-radius:var(--r); padding:var(--frame); background:linear-gradient(160deg,#2a3342,#141922);
  box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  width:100%; max-width:330px; margin:0 auto;
}
/* il PNG è 620×1343 (390×844 del design): width 100% + height auto tiene il rapporto esatto */
.phone img{width:100%; height:auto; border-radius:calc(var(--r) - var(--frame))}
.phone.sm{max-width:290px; --r:40px}

/* ---------- sections ---------- */
h2{font-size:35px; line-height:1.15; letter-spacing:-.9px; font-weight:800}
h3{font-size:20px; letter-spacing:-.2px; margin-bottom:6px}
.sub{color:var(--tx-2); margin-top:14px; font-size:18px}
p{color:var(--tx-2); margin:12px 0}
p strong, li strong{color:var(--tx); font-weight:600}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split.rev .txt{order:2}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:34px} .split.rev .txt{order:0} }
.tag{
  display:inline-block; font-size:12px; letter-spacing:1.8px; font-weight:700;
  color:var(--brand-lt); margin-bottom:12px;
}
.tag.pos{color:var(--pos)} .tag.gold{color:var(--gold)}
.alt{background:var(--ink-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:24px 22px;
}
.card .ic{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(124,107,255,.14); margin-bottom:14px;
}
.card p{margin:0; font-size:15.5px}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
@media (max-width:760px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 28px}
.plan.hi{border:2px solid var(--brand); background:linear-gradient(168deg,#1b2130 0%,#151a21 62%)}
.plan .pname{font-size:14px; letter-spacing:1.6px; text-transform:uppercase; color:var(--tx-3); font-weight:700}
.plan.hi .pname{color:var(--brand-lt)}
.price{font-size:41px; font-weight:800; letter-spacing:-1.4px; margin:12px 0 2px}
.price span{font-size:16px; font-weight:500; color:var(--tx-3); letter-spacing:0}
.peryear{color:var(--gold); font-size:14.5px; font-weight:600}
.plan ul{list-style:none; margin-top:20px}
.plan li{display:flex; gap:11px; align-items:flex-start; margin:11px 0; color:var(--tx-2); font-size:15.5px}
.plan li svg{flex:none; margin-top:5px}
.fineprint{color:var(--tx-3); font-size:14px; margin-top:26px; text-align:center}

/* ---------- faq ---------- */
.faq{margin-top:34px}
details{border-bottom:1px solid var(--line); padding:18px 0}
summary{cursor:pointer; font-weight:600; font-size:17.5px; list-style:none; display:flex; gap:14px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--brand-lt); font-weight:700; font-size:21px; line-height:1}
details[open] summary::before{content:"–"}
details p{margin:12px 0 2px 28px; font-size:16px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:44px 0 60px; margin-top:20px}
.fgrid{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--tx-2); text-decoration:none; display:block; margin:7px 0; font-size:15px}
footer a:hover{color:var(--tx)}
.fcol h4{font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--tx-3); margin-bottom:10px}
.copy{color:var(--tx-3); font-size:14px; margin-top:34px}

/* ---------- legal pages ---------- */
.legal{padding:52px 0 30px}
.legal h1{font-size:34px; letter-spacing:-.8px}
.legal .updated{color:var(--tx-3); font-size:14.5px; margin-top:12px}
.legal h2{font-size:21px; margin:38px 0 10px; scroll-margin-top:80px}
.legal h2 .num{color:var(--brand-lt); margin-right:8px}
.legal ul{margin:12px 0 12px 22px; color:var(--tx-2)}
.legal li{margin:7px 0}
.tldr{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--pos);
  border-radius:14px; padding:20px 22px; margin:26px 0 10px}
.tldr b{color:var(--pos)}
.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:14px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
th,td{text-align:left; padding:12px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--surface-2); color:var(--tx); font-weight:600; font-size:13px; letter-spacing:.4px; text-transform:uppercase}
tr:last-child td{border-bottom:none}
td{color:var(--tx-2)} td:first-child{color:var(--tx); font-weight:500}
hr.sep{border:none; border-top:1px solid var(--line); margin:58px 0 40px}
.callout{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:24px; margin:24px 0}
.callout.warn{border-left:3px solid var(--gold)}
.callout.act{border-left:3px solid var(--brand)}
.btn{
  display:inline-block; margin-top:8px; padding:14px 26px; border-radius:16px; text-decoration:none;
  background:linear-gradient(145deg,#8b7bff,#5b49e8); color:#fff; font-weight:700; font-size:16px;
  box-shadow:0 12px 28px rgba(124,107,255,.28);
}
.steps{counter-reset:s; list-style:none; margin:18px 0 0}
.steps li{counter-increment:s; position:relative; padding-left:44px; margin:16px 0; color:var(--tx-2)}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-1px; width:29px; height:29px; border-radius:50%;
  background:rgba(124,107,255,.16); color:var(--brand-lt); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:520px){ body{font-size:16px} h1{font-size:34px} h2{font-size:27px} }