/* =========================================================================
   FantaMANTRA — vetrina pubblica
   Stesso sistema visivo dell'app, respiro da pagina web.
   ========================================================================= */
:root{
  --bg:#080B12;--bg-2:#0E1320;--surface:#141B2C;--surface-2:#1B2437;
  --line:#26314A;--line-soft:#1C2438;
  --text:#EEF2FA;--text-2:#9AA7C0;--text-3:#63708C;
  --accent:#4F8CFF;--accent-2:#7FB0FF;--accent-soft:#16294A;
  --ok:#34D399;--warn:#FBBF24;--bad:#FB7185;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
  --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(900px 520px at 15% -8%, #17264a 0%, transparent 62%),
    radial-gradient(760px 460px at 88% 4%, #14203a 0%, transparent 58%),
    var(--bg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ------------------------------------------------------------- topbar */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(8,11,18,.78);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{font-weight:800;letter-spacing:-.03em;font-size:19px}
.logo span{color:var(--accent)}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav nav a{color:var(--text-2);font-size:14px;padding:8px 12px;border-radius:9px}
.nav nav a:hover{color:var(--text);background:var(--surface);text-decoration:none}
.nav .cta{background:var(--accent);color:#04142F;font-weight:700;padding:9px 16px}
.nav .cta:hover{background:var(--accent-2);text-decoration:none}
@media(max-width:640px){ .nav nav a.hide-s{display:none} }

/* --------------------------------------------------------------- hero */
.hero{padding:72px 0 40px;text-align:center}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid #2C4B80;
  padding:6px 14px;border-radius:999px;margin-bottom:22px;
}
h1{
  font-size:clamp(34px,6.2vw,60px);line-height:1.04;letter-spacing:-.04em;
  margin:0 0 20px;font-weight:800;
}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),#9B7BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(16px,2.1vw,20px);color:var(--text-2);max-width:640px;margin:0 auto 30px;line-height:1.55}
.azioni{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 26px;border-radius:13px;font-weight:700;font-size:15px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  transition:transform .08s,filter .15s,border-color .15s;
}
.btn:hover{text-decoration:none;border-color:var(--accent);filter:brightness(1.12)}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04142F}
.btn.primary:hover{background:var(--accent-2)}
.micro{font-size:13px;color:var(--text-3)}

/* ------------------------------------------------------------ schermo */
.vetrina{margin:46px auto 0;max-width:940px;position:relative}
.vetrina img{
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;
  display:block;
}
.vetrina::after{
  content:'';position:absolute;inset:auto 0 -1px 0;height:120px;
  background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;
}

/* ------------------------------------------------------------ sezioni */
section{padding:60px 0}
h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.03em;margin:0 0 12px;font-weight:750}
.occhiello{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.intro{color:var(--text-2);max-width:660px;margin:0 0 34px;font-size:17px}

.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.carta{
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-soft);border-radius:var(--r);padding:22px;
}
.carta h3{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.carta p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.6}
.carta .n{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);
  border:1px solid #2C4B80;background:var(--accent-soft);
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-bottom:14px;
}

.confronto{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:680px){.confronto{grid-template-columns:1fr}}
.col{border:1px solid var(--line-soft);border-radius:var(--r);padding:20px;background:var(--bg-2)}
.col h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.col ul{margin:0;padding-left:18px;color:var(--text-2);font-size:14.5px}
.col li{margin-bottom:8px}
.col.si{border-color:#1B6B4F}
.col.si h4{color:var(--ok)}

.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.num{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:14px;padding:18px;text-align:center}
.num b{display:block;font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.04em;color:var(--accent-2)}
.num span{font-size:12.5px;color:var(--text-3);line-height:1.4;display:block;margin-top:6px}

/* ------------------------------------------------------------ modulo */
.modulo{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--r);padding:26px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;color:var(--text);font:inherit;outline:none;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.campo .aiuto{font-size:12.5px;color:var(--text-3);margin-top:5px}
.hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------- footer */
footer.sito{border-top:1px solid var(--line-soft);margin-top:40px;padding:34px 0 46px;font-size:13px;color:var(--text-3);line-height:1.75}
footer.sito .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
@media(max-width:680px){footer.sito .wrap{grid-template-columns:1fr}}
footer.sito img{height:26px;margin-bottom:12px;opacity:.9}
footer.sito a{color:var(--text-2)}
.disclaimer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12px;opacity:.85}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}