/* Filippo Serpelloni — sito */
@font-face { font-family:"Inter"; src:url(/assets/fonts/inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url(/assets/fonts/space-grotesk.woff2) format("woff2"); font-weight:300 700; font-display:swap; }

:root {
  --bg:#0b0d14; --bg2:#10131d; --card:#141826; --card2:#191e2e; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --fg:#eef1f8; --soft:#b9c0d4; --muted:#8a93ab;
  --v:#7c5cff; --c:#22d3ee; --grad:linear-gradient(120deg,#7c5cff 0%,#4f8bff 50%,#22d3ee 100%);
  --ok:#34d399; --err:#fb7185;
  --r:18px; --wrap:1180px;
  --head:"Space Grotesk", "Inter", system-ui, sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16.5px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--c); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:#fff; color:#000; padding:8px 14px; border-radius:8px; }
.skip:focus { left:8px; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.narrow { max-width:800px; }
.center { text-align:center; }
.muted { color:var(--muted); }
.ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }

h1, h2, h3 { font-family:var(--head); line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; }
h1 { font-size:clamp(2.3rem, 5.6vw, 4.2rem); font-weight:700; }
h2 { font-size:clamp(1.8rem, 3.6vw, 2.7rem); font-weight:700; }
h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.01em; }
p { margin:0 0 1em; }
.lead { font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--soft); max-width:640px; }
.center .lead { margin-left:auto; margin-right:auto; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kicker { font-family:var(--head); font-weight:600; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.8em; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--line2); border-radius:99px; background:rgba(255,255,255,.04); color:var(--soft); font-size:.9rem; font-weight:500; margin-bottom:22px; }
.eyebrow .ico { width:16px; height:16px; color:var(--c); }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2s infinite; display:inline-block; }
@keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow:0 0 0 0 rgba(52,211,153,0); } }

/* Pulsanti */
.btn { --bh:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--bh); padding:0 22px; border:0; border-radius:12px; background:var(--grad); background-size:150% 100%; color:#fff; font:600 1rem/1 "Inter",sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .2s, box-shadow .25s, background-position .4s; box-shadow:0 8px 28px -10px rgba(124,92,255,.75); }
.btn:hover { transform:translateY(-2px); background-position:100% 0; box-shadow:0 14px 34px -10px rgba(34,211,238,.6); }
.btn .ico { width:18px; height:18px; transition:transform .2s; }
.btn:hover .ico { transform:translateX(3px); }
.btn-lg { --bh:56px; padding:0 28px; font-size:1.05rem; border-radius:14px; }
.btn-sm { --bh:40px; padding:0 16px; font-size:.92rem; border-radius:10px; }
.btn-block { width:100%; }
.btn-ghost { background:rgba(255,255,255,.05); border:1px solid var(--line2); box-shadow:none; }
.btn-ghost:hover { background:rgba(255,255,255,.09); box-shadow:none; }
.btn-light { background:#fff; color:#11131c; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.btn-light:hover { background:#fff; }
.btn-ghost-light { background:transparent; border:1px solid rgba(255,255,255,.5); box-shadow:none; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }
.cta-row.center { justify-content:center; }

/* Header */
.header { position:fixed; inset:0 0 auto; z-index:50; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.header.scrolled { background:rgba(11,13,20,.86); backdrop-filter:blur(10px); border-color:var(--line); }
.header-in { display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--head); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; text-decoration:none; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:4px; }
.nav a:not(.btn) { padding:8px 12px; border-radius:9px; color:var(--soft); text-decoration:none; font-size:.95rem; font-weight:500; transition:color .2s, background .2s; }
.nav a:not(.btn):hover, .nav a[aria-current] { color:#fff; background:rgba(255,255,255,.06); }
.nav-cta { margin-left:8px; }
.menu-btn { display:none; width:44px; height:44px; border:1px solid var(--line2); border-radius:12px; background:rgba(255,255,255,.04); color:#fff; align-items:center; justify-content:center; cursor:pointer; }
@media (max-width: 1020px) {
  .menu-btn { display:inline-flex; }
  .nav { position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch; gap:2px; padding:14px 20px 22px; background:rgba(11,13,20,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; visibility:hidden; transition:.25s; }
  .nav.open { transform:none; opacity:1; visibility:visible; }
  .nav a:not(.btn) { padding:13px 12px; font-size:1.05rem; }
  .nav-cta { margin:10px 0 0; --bh:52px; }
}

/* Hero */
.hero { position:relative; padding:150px 0 90px; overflow:hidden; }
.hero-sm { padding:140px 0 60px; }
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.blob { position:absolute; border-radius:50%; animation:float 16s ease-in-out infinite; will-change:transform; }
.b1 { width:900px; height:900px; background:radial-gradient(circle, rgba(91,61,255,.5) 0%, rgba(91,61,255,.18) 35%, transparent 68%); top:-450px; right:-300px; }
.b2 { width:760px; height:760px; background:radial-gradient(circle, rgba(14,165,198,.32) 0%, rgba(14,165,198,.1) 38%, transparent 68%); bottom:-420px; left:-330px; animation-delay:-6s; }
@keyframes float { 50% { transform:translate(-40px, 40px) scale(1.08); } }
.grid-bg { position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 60% 20%, #000 10%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 60% 20%, #000 10%, transparent 70%); }
.hero-in { display:grid; gap:56px; align-items:center; }
@media (min-width: 980px) { .hero-in { grid-template-columns:1.08fr .92fr; } }
.ticks { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--soft); font-size:.95rem; }
.ticks li { display:flex; align-items:center; gap:7px; }
.ticks .ico { width:17px; height:17px; color:var(--ok); }
.crumbs { font-size:.88rem; color:var(--muted); margin-bottom:18px; }
.crumbs a { color:var(--soft); text-decoration:none; }
.crumbs span { margin:0 4px; }

/* Illustrazione hero */
.hero-visual { position:relative; min-height:400px; }
.browser { position:relative; margin:30px 20px 0 40px; border-radius:16px; background:linear-gradient(180deg, #171b2b, #11141f); border:1px solid var(--line2); box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(124,92,255,.1), 0 0 80px -20px rgba(124,92,255,.35); overflow:hidden; transform:perspective(1200px) rotateY(-8deg) rotateX(4deg); }
.browser-bar { display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); }
.browser-bar i { width:10px; height:10px; border-radius:50%; background:#2b3045; }
.browser-bar i:nth-child(1) { background:#ff5f57; } .browser-bar i:nth-child(2) { background:#febc2e; } .browser-bar i:nth-child(3) { background:#28c840; }
.browser-bar span { margin-left:10px; flex:1; padding:4px 12px; border-radius:7px; background:rgba(255,255,255,.05); font-size:.78rem; color:var(--muted); }
.browser-body { padding:28px 26px 30px; }
.sk { height:12px; border-radius:6px; background:rgba(255,255,255,.08); margin-bottom:12px; }
.sk-title { height:26px; width:78%; background:linear-gradient(90deg, rgba(124,92,255,.7), rgba(34,211,238,.7)); margin-bottom:18px; }
.sk-line { width:92%; } .sk-line.short { width:60%; }
.sk-btn { width:150px; height:38px; border-radius:10px; background:var(--grad); margin:22px 0 26px; animation:glow 3s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow:0 0 28px rgba(124,92,255,.7); } }
.sk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sk-cards span { height:70px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.float-card { position:absolute; display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:14px; background:rgba(22,26,40,.94); border:1px solid var(--line2); box-shadow:0 20px 40px -18px rgba(0,0,0,.8); font-size:.9rem; animation:bob 6s ease-in-out infinite; }
.float-card strong { display:block; font-size:.92rem; }
.float-card small { color:var(--muted); }
.fc-ico { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(124,92,255,.18); color:#b4a4ff; }
.fc-ico.ok { background:rgba(52,211,153,.16); color:var(--ok); }
.fc-1 { top:0; right:0; }
.fc-2 { bottom:40px; left:0; animation-delay:-2s; }
.fc-3 { bottom:-6px; right:30px; animation-delay:-4s; }
.spark { width:100px; height:30px; margin-top:3px; }
.spark path { fill:none; stroke:var(--c); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:140; stroke-dashoffset:140; animation:draw 2.4s .6s forwards ease-out; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes bob { 50% { transform:translateY(-10px); } }
@media (max-width: 979px) { .hero-visual { min-height:340px; max-width:520px; } .browser { margin:30px 10px 0 10px; } }
@media (max-width: 520px) { .fc-3 { display:none; } .float-card { font-size:.82rem; padding:10px 12px; } }

/* Fascia */
.strip { border-block:1px solid var(--line); background:rgba(255,255,255,.015); }
.strip-in { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; padding:22px 20px; color:var(--soft); font-weight:500; font-size:.95rem; }
.strip-in span { display:flex; align-items:center; gap:9px; }
.strip-in .ico { color:var(--c); }

/* Sezioni */
.section { padding:clamp(70px, 9vw, 120px) 0; position:relative; }
.section.alt { background:linear-gradient(180deg, transparent, rgba(124,92,255,.04) 30%, rgba(34,211,238,.03) 70%, transparent); }
.pt0 { padding-top:0; }
.section-head { max-width:720px; margin:0 auto 48px; text-align:center; }
.section-head .muted { font-size:1.08rem; }
.cards { display:grid; gap:18px; }
@media (min-width: 720px) { .cards.c2 { grid-template-columns:1fr 1fr; } .cards.c3 { grid-template-columns:repeat(3, 1fr); } }
@media (min-width: 720px) and (max-width: 980px) { .cards.c3 { grid-template-columns:1fr 1fr; } }
.card { position:relative; padding:28px; border-radius:var(--r); background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--line); }
.card p { color:var(--soft); margin:0; }
.card h3 { margin-bottom:.45em; }
.card-link { text-decoration:none; transition:transform .25s, border-color .25s, box-shadow .25s; overflow:hidden; }
.card-link::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
.card-link:hover { transform:translateY(-4px); box-shadow:0 24px 50px -25px rgba(124,92,255,.5); }
.card-link:hover::before { opacity:1; }
.card-ico { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.14)); color:#c3b7ff; margin-bottom:18px; border:1px solid rgba(124,92,255,.25); }
.card-ico .ico { width:23px; height:23px; }
.more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:600; color:#a9b8ff; }
.more .ico { width:17px; height:17px; transition:transform .2s; }
.card-link:hover .more .ico { transform:translateX(4px); }
.num { font-family:var(--head); font-weight:700; font-size:.95rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:12px; }
.section > .wrap > p.center { margin-top:36px; color:var(--soft); font-size:1.08rem; }

.split { display:grid; gap:48px; align-items:center; }
.split.top { align-items:start; }
@media (min-width: 900px) { .split { grid-template-columns:1fr 1fr; gap:70px; } }
.features { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.features li { display:flex; gap:16px; padding:20px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02); transition:background .25s, border-color .25s; }
.features li:hover { background:rgba(255,255,255,.04); border-color:var(--line2); }
.features li > span { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:rgba(124,92,255,.16); color:#c3b7ff; }
.features h3 { font-size:1.06rem; margin-bottom:.25em; }
.features p { color:var(--soft); margin:0; font-size:.97rem; }

.steps { list-style:none; padding:0; margin:0; display:grid; gap:18px; counter-reset:s; }
@media (min-width: 720px) { .steps { grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns:repeat(4, 1fr); } }
.steps li { position:relative; padding:26px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.02); }
.steps p { color:var(--soft); margin:0; font-size:.97rem; }
.step-n { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--grad); font-family:var(--head); font-weight:700; margin-bottom:18px; box-shadow:0 0 0 6px rgba(124,92,255,.12); }

/* Pacchetti */
.pricing { align-items:stretch; }
.price { display:flex; flex-direction:column; }
.price .muted { margin-bottom:14px; }
.price .btn { margin-top:auto; }
.amount { font-family:var(--head); font-size:2rem; font-weight:700; margin:6px 0 18px !important; color:var(--fg) !important; }
.amount small { font-size:.95rem; color:var(--muted); font-weight:500; }
.featured { background:linear-gradient(180deg, #1d1940, #141826 60%); border-color:rgba(124,92,255,.5); box-shadow:0 30px 70px -35px rgba(124,92,255,.7); }
@media (min-width: 980px) { .featured { transform:scale(1.035); } }
.badge { position:absolute; top:-13px; left:28px; padding:5px 12px; border-radius:99px; background:var(--grad); font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.list-check { list-style:none; padding:0; margin:0 0 26px; display:grid; gap:10px; }
.list-check li { display:flex; gap:10px; align-items:flex-start; color:var(--soft); }
.list-check .ico { width:19px; height:19px; color:var(--ok); margin-top:3px; }
.list-check.big { gap:14px; font-size:1.04rem; }
@media (min-width: 600px) { .list-check.big { grid-template-columns:1fr 1fr; } }
.care { display:flex; flex-wrap:wrap; align-items:center; gap:18px 22px; margin-top:22px; padding:24px 28px; border-radius:var(--r); border:1px dashed var(--line2); }
.care .card-ico { margin:0; }
.care > div { flex:1; min-width:220px; }
.care h3 { margin-bottom:.2em; }
.care p { margin:0; }

/* FAQ */
.faq { display:grid; gap:12px; }
.faq details { border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .2s, background .2s; }
.faq details[open] { border-color:rgba(124,92,255,.4); background:rgba(124,92,255,.05); }
.faq summary { list-style:none; cursor:pointer; padding:20px 56px 20px 22px; font-weight:600; font-size:1.05rem; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; border-right:2px solid var(--soft); border-bottom:2px solid var(--soft); transform:translateY(-70%) rotate(45deg); transition:transform .25s; }
.faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.faq details p { padding:0 22px 20px; margin:0; color:var(--soft); }

/* CTA finale */
.cta-box { position:relative; overflow:hidden; text-align:center; padding:clamp(48px, 7vw, 80px) 24px; border-radius:28px; background:linear-gradient(130deg, #5b3dff 0%, #3a6cf0 50%, #0aa5c4 100%); }
.cta-box h2 { max-width:720px; margin:0 auto .4em; }
.cta-box p { max-width:600px; margin:0 auto; color:rgba(255,255,255,.88); font-size:1.1rem; }
.cta-glow { position:absolute; inset:-40%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 40%); animation:float 14s ease-in-out infinite; pointer-events:none; }
.cta-box > *:not(.cta-glow) { position:relative; }

/* Moduli */
.form { padding:clamp(22px, 4vw, 38px); }
.form label { display:block; font-weight:600; font-size:.95rem; margin:0 0 18px; }
.form label small, .label small { font-weight:400; color:var(--muted); }
.label { font-weight:600; font-size:.95rem; margin:6px 0 10px; }
.form input:not([type=radio]):not([type=checkbox]), .form select, .form textarea { display:block; width:100%; margin-top:8px; padding:14px 16px; font:inherit; font-size:16px; color:var(--fg); background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:12px; transition:border-color .2s, background .2s, box-shadow .2s; }
.form select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%); background-position:calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size:6px 6px; background-repeat:no-repeat; }
.form select option { background:var(--bg2); }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--v); background:rgba(124,92,255,.06); box-shadow:0 0 0 4px rgba(124,92,255,.18); }
.form ::placeholder { color:#5f6781; }
.grid2 { display:grid; gap:0 16px; }
@media (min-width: 620px) { .grid2 { grid-template-columns:1fr 1fr; } }
.form .check { display:flex; gap:12px; align-items:flex-start; font-weight:400; color:var(--soft); font-size:.93rem; }
.form .check input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--v); flex:none; }
.form .check a { color:#a9b8ff; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.hint { color:var(--muted); font-size:.88rem; margin:6px 0 0; display:flex; gap:7px; align-items:center; justify-content:center; }
.hint .ico { width:15px; height:15px; }
.alert { padding:14px 18px; border-radius:12px; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.35); color:#ffc2cc; margin-bottom:22px; }
.alert p { margin:0; }
fieldset.step { border:0; padding:0; margin:0 0 30px; min-width:0; }
fieldset.step legend { font-family:var(--head); font-size:1.35rem; font-weight:700; margin-bottom:20px; padding:0; }
.choices { display:grid; gap:12px; }
@media (min-width: 560px) { .choices { grid-template-columns:1fr 1fr; } }
.form label.choice { margin:0; cursor:pointer; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice > span { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:center; padding:16px 18px; border-radius:14px; border:1px solid var(--line2); background:rgba(255,255,255,.03); transition:.2s; height:100%; }
.choice .ico { grid-row:span 2; width:26px; height:26px; color:#b4a4ff; }
.choice strong { font-size:1rem; }
.choice small { color:var(--muted); font-weight:400; font-size:.86rem; }
.choice:hover > span { border-color:rgba(124,92,255,.5); }
.choice input:checked + span { border-color:var(--v); background:rgba(124,92,255,.12); box-shadow:0 0 0 3px rgba(124,92,255,.2); }
.choice input:focus-visible + span { outline:2px solid var(--c); outline-offset:2px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.form label.chip-opt { margin:0; cursor:pointer; font-weight:500; }
.chip-opt input { position:absolute; opacity:0; pointer-events:none; }
.chip-opt span { display:inline-block; padding:10px 16px; border-radius:99px; border:1px solid var(--line2); background:rgba(255,255,255,.03); font-size:.94rem; transition:.2s; }
.chip-opt:hover span { border-color:rgba(124,92,255,.5); }
.chip-opt input:checked + span { background:var(--grad); border-color:transparent; color:#fff; }
.chip-opt input:focus-visible + span { outline:2px solid var(--c); outline-offset:2px; }
.wizard-nav { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-top:10px; }
.wizard-nav [data-submit], .wizard-nav [data-next] { margin-left:auto; }
.wizard { scroll-margin-top:96px; }
.progress { height:6px; border-radius:99px; background:rgba(255,255,255,.07); margin-bottom:30px; overflow:hidden; }
.progress span { display:block; height:100%; width:25%; background:var(--grad); border-radius:inherit; transition:width .35s ease; }
.wizard.js fieldset.step { display:none; }
.wizard.js fieldset.step.on { display:block; animation:stepIn .35s ease; }
@keyframes stepIn { from { opacity:0; transform:translateX(16px); } }
.contact-side { display:grid; gap:14px; }
.contact-item { display:flex; gap:16px; align-items:center; padding:20px 22px; text-decoration:none; transition:border-color .2s; }
a.contact-item:hover { border-color:var(--line2); }
.contact-item .card-ico { margin:0; }
.contact-item strong { display:block; }
.contact-item span:not(.card-ico) { color:var(--soft); font-size:.95rem; word-break:break-word; }
.contact-item.highlight { border-color:rgba(124,92,255,.45); background:linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,238,.06)); }
.big-check { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 26px; border-radius:50%; background:var(--grad); box-shadow:0 0 0 10px rgba(124,92,255,.15); }
.big-check .ico { width:38px; height:38px; stroke-width:2.6; }
.legal h1 { font-size:2.4rem; }
.legal h2 { font-size:1.3rem; margin-top:1.8em; }
.legal p { color:var(--soft); }
.legal a { color:#a9b8ff; }
.legal { padding-top:130px; }

/* Footer */
.footer { border-top:1px solid var(--line); padding:64px 0 24px; background:var(--bg2); }
.footer-grid { display:grid; gap:36px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer-grid > div { display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.footer-grid a:not(.btn):not(.brand) { color:var(--soft); text-decoration:none; font-size:.95rem; }
.footer-grid a:not(.btn):not(.brand):hover { color:#fff; }
.footer .muted { max-width:320px; font-size:.95rem; margin:6px 0 10px; }
.footer-h { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; font-family:"Inter",sans-serif; font-weight:600; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:48px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }

/* WhatsApp */
.wa-fab { position:fixed; left:18px; bottom:18px; z-index:40; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#25d366; color:#fff; box-shadow:0 10px 30px -8px rgba(37,211,102,.7); }
.wa-fab .ico { width:28px; height:28px; }

/* Chatbot */
.bot { position:fixed; right:18px; bottom:18px; z-index:60; }
.bot-fab { display:flex; align-items:center; gap:10px; height:56px; padding:0 22px 0 18px; border:0; border-radius:99px; background:var(--grad); color:#fff; font:600 1rem "Inter",sans-serif; cursor:pointer; box-shadow:0 14px 40px -10px rgba(124,92,255,.9); transition:transform .2s; animation:fabIn .5s 1.5s both; }
.bot-fab:hover { transform:translateY(-2px) scale(1.02); }
.bot-fab .ico { width:22px; height:22px; }
@keyframes fabIn { from { opacity:0; transform:translateY(20px); } }
@media (max-width: 520px) { .bot-fab span { display:none; } .bot-fab { width:58px; padding:0; justify-content:center; } }
.bot.is-open .bot-fab { display:none; }
.bot-panel { position:fixed; right:18px; bottom:18px; width:min(390px, calc(100vw - 24px)); height:min(620px, calc(100dvh - 36px)); display:flex; flex-direction:column; border-radius:22px; background:#11141f; border:1px solid var(--line2); box-shadow:0 30px 80px -20px rgba(0,0,0,.85), 0 0 60px -20px rgba(124,92,255,.5); overflow:hidden; animation:panelIn .3s ease; }
@media (max-width: 520px) { .bot-panel { right:0; bottom:0; width:100vw; height:100dvh; border-radius:0; } }
@keyframes panelIn { from { opacity:0; transform:translateY(16px) scale(.98); } }
.bot-head { display:flex; align-items:center; gap:12px; padding:16px 18px; background:linear-gradient(135deg, rgba(124,92,255,.25), rgba(34,211,238,.1)); border-bottom:1px solid var(--line); }
.bot-head img { border-radius:10px; }
.bot-head div { flex:1; line-height:1.3; }
.bot-head small { display:flex; align-items:center; gap:7px; color:var(--soft); font-size:.82rem; }
.bot-x { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:10px; background:rgba(255,255,255,.07); color:#fff; cursor:pointer; }
.bot-log { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.msg { max-width:85%; padding:11px 15px; border-radius:16px; font-size:.95rem; line-height:1.5; animation:msgIn .25s ease; white-space:pre-line; }
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } }
.msg.bot-m { align-self:flex-start; background:var(--card2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg.me { align-self:flex-end; background:var(--grad); border-bottom-right-radius:5px; }
.typing { align-self:flex-start; display:flex; gap:4px; padding:14px 16px; border-radius:16px; background:var(--card2); border:1px solid var(--line); }
.typing i { width:7px; height:7px; border-radius:50%; background:var(--soft); animation:dot 1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 50% { opacity:.3; transform:translateY(-3px); } }
.bot-input { max-height:46%; overflow-y:auto; padding:14px 16px 16px; border-top:1px solid var(--line); background:#0e111a; }
.bot-opts { display:flex; flex-wrap:wrap; gap:8px; }
.bot-opts button { padding:10px 14px; border-radius:99px; border:1px solid rgba(124,92,255,.5); background:rgba(124,92,255,.1); color:#fff; font:500 .9rem "Inter",sans-serif; cursor:pointer; transition:.15s; text-align:left; }
.bot-opts button:hover { background:rgba(124,92,255,.25); }
.bot-form { display:grid; gap:8px; }
.bot-form input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line2); background:rgba(255,255,255,.05); color:#fff; font:inherit; font-size:16px; }
.bot-form input:focus { outline:none; border-color:var(--v); }
.bot-form label { display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--soft); }
.bot-form label input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--v); }
.bot-form label a { color:#a9b8ff; }
.bot-form .row { display:flex; gap:8px; }
.bot-form .row input { flex:1; }
.bot-send { flex:none; width:48px; border:0; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; cursor:pointer; }
.bot-err { color:#ffb3c0; font-size:.85rem; margin:0; }

/* Menu a tendina Servizi */
.nav a { white-space:nowrap; }
.dd { position:relative; }
.dd-btn { display:inline-flex !important; align-items:center; gap:4px; }
.caret { width:15px; height:15px; transition:transform .2s; }
.dd-menu { position:absolute; top:calc(100% + 8px); left:-14px; width:340px; padding:8px; border-radius:16px; background:#141826; border:1px solid var(--line2); box-shadow:0 30px 60px -20px rgba(0,0,0,.85); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s; }
.dd-menu::before { content:""; position:absolute; inset:-10px 0 auto; height:10px; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity:1; visibility:visible; transform:none; }
.dd:hover .caret, .dd:focus-within .caret { transform:rotate(180deg); }
.nav .dd-menu a { display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:11px; }
.dd-menu .ico { width:20px; height:20px; color:#b4a4ff; margin-top:2px; }
.dd-menu strong { display:block; color:var(--fg); font-weight:600; }
.dd-menu small { display:block; color:var(--muted); font-size:.82rem; white-space:normal; line-height:1.4; }
@media (max-width: 1020px) {
  .dd-btn { display:none !important; }
  .dd-menu { position:static; width:auto; padding:0; border:0; background:none; box-shadow:none; opacity:1; visibility:visible; transform:none; }
  .dd-menu small { display:none; }
  .nav .dd-menu a { padding:13px 12px; align-items:center; }
}

/* Accesso area clienti nel menu */
.nav a.nav-login { display:inline-flex; align-items:center; gap:7px; }
.nav-login .ico { width:17px; height:17px; }
@media (min-width: 1021px) and (max-width: 1140px) { .nav-login span { display:none; } }

/* Barra fissa su telefono */
.mbar { display:none; }
@media (max-width: 720px) {
  .mbar { position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(11,13,20,.96); border-top:1px solid var(--line); }
  .mbar .btn { --bh:50px; }
  .mbar-chat { flex:none; width:54px; padding:0; }
  .bot-fab { display:none; }
  .wa-fab { bottom:84px; }
  body { padding-bottom:76px; }
}

/* Anteprima area clienti in home */
.mock { border-radius:20px; padding:22px; background:linear-gradient(180deg, #171b2b, #11141f); border:1px solid var(--line2); box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 60px -25px rgba(34,211,238,.35); }
.mock-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.mock-head img { border-radius:8px; }
.mock-head span { margin-left:auto; color:var(--muted); font-size:.9rem; }
.mock-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.mock-grid div, .mock-row { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.mock-grid small { display:block; color:var(--muted); font-size:.78rem; }
.mock-grid b { font-family:var(--head); font-size:1.1rem; }
.mock-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; font-size:.92rem; }
.mock-row em { font-style:normal; font-weight:600; font-size:.82rem; padding:5px 12px; border-radius:99px; background:var(--grad); }
.ok { color:var(--ok); }

/* Guide */
.post-meta { display:block; color:var(--muted); font-size:.85rem; margin-bottom:10px; }
.post-title { font-size:1.25rem; }
.article h1 { font-size:clamp(2rem, 4.4vw, 3rem); }
.article { padding-top:130px; }
.prose { font-size:1.08rem; color:#d5dbea; margin-top:30px; }
.prose h2 { font-size:1.55rem; margin:1.8em 0 .6em; }
.prose p, .prose li { color:#cdd3e3; }
.prose ul, .prose ol { padding-left:1.3em; margin:0 0 1.2em; }
.prose li { margin:.35em 0; }
.prose strong { color:#fff; }
.article-cta { display:grid; gap:10px; margin:48px 0; border-color:rgba(124,92,255,.45); background:linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,238,.06)); }
.article-cta h2 { font-size:1.4rem; }
.article-cta .cta-row { margin-top:6px; }
.more-h { font-size:1.3rem; margin:20px 0 16px; }

/* Area clienti */
.portal { padding-top:110px; }
.portal-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px; }
.portal-top h1 { font-size:clamp(1.8rem, 4vw, 2.5rem); margin:0; }
.portal-top .kicker { margin:0 0 4px; }
.portal-nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.portal-nav a, .linkish { padding:8px 14px; border-radius:10px; color:var(--soft); text-decoration:none; font:500 .95rem "Inter",sans-serif; background:none; border:0; cursor:pointer; }
.portal-nav a:hover, .linkish:hover, .portal-nav a[aria-current] { background:rgba(255,255,255,.06); color:#fff; }
.portal-nav form { margin:0; }
.notice { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px; border-radius:14px; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.3); color:#c9f5e3; margin:14px 0; text-decoration:none; }
.notice.bad { background:rgba(251,113,133,.08); border-color:rgba(251,113,133,.35); color:#ffd1d9; }
.notice.action { background:rgba(124,92,255,.1); border-color:rgba(124,92,255,.45); color:var(--fg); }
.p-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:20px 0 6px; }
@media (min-width: 820px) { .p-grid { grid-template-columns:repeat(4, 1fr); } }
.p-stat { padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg, var(--card2), var(--card)); }
.p-stat span { display:block; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.p-stat strong { display:block; font-family:var(--head); font-size:1.5rem; margin:4px 0 2px; }
.p-stat small { color:var(--soft); }
.p-h { font-size:1.2rem; margin:0 0 14px; }
section.portal h2.p-h:not(.card *) { margin:32px 0 14px; }
.p-site { margin:12px 0; }
.p-site-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.p-site-head h3, .p-site-head h2 { margin:0; }
.p-facts { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin:0; }
@media (min-width: 820px) { .p-facts { grid-template-columns:repeat(4, 1fr); } }
.p-facts div { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.p-facts dt { color:var(--muted); font-size:.8rem; }
.p-facts dd { margin:2px 0 0; font-weight:600; }
.p-site .cta-row { margin-top:16px; }
.p-cols { display:grid; gap:14px; margin:14px 0; }
@media (min-width: 820px) { .p-cols { grid-template-columns:1fr 1fr; } }
.p-cols .card, .portal > .wrap > .card { margin:0 0 14px; }
.p-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); color:var(--fg); text-decoration:none; }
.p-row:last-of-type { border-bottom:0; }
a.p-row.link:hover strong { color:#a9b8ff; }
.p-row.total { font-size:1.15rem; border-top:1px solid var(--line2); }
.right { text-align:right; }
.nowrap { white-space:nowrap; }
.small { font-size:.88rem; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; word-break:break-all; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:99px; font-size:.82rem; font-weight:600; background:rgba(255,255,255,.07); color:var(--soft); white-space:nowrap; }
.tag .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.tag.ok { background:rgba(52,211,153,.12); color:var(--ok); }
.tag.warn { background:rgba(251,191,36,.12); color:#fbbf24; }
.tag.bad { background:rgba(251,113,133,.12); color:var(--err); }
.table-wrap { overflow-x:auto; }
.p-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.p-table th { text-align:left; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--line2); }
.p-table td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.p-table tr:last-child td { border-bottom:0; }
.p-help { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; border-color:rgba(124,92,255,.45); background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(34,211,238,.05)); }
.p-help p { margin:0; }
.totals { margin:16px 0 0 auto; max-width:320px; }
.notes { margin-top:18px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); color:var(--soft); }
.auth-wrap { display:grid; place-items:center; }
.auth-card { width:100%; max-width:440px; }
.auth-card img { margin-bottom:16px; border-radius:12px; }
.auth-card h1 { font-size:2rem; }
.auth-card .center a { color:#a9b8ff; }
.portal-auth { min-height:calc(100dvh - 200px); }

/* Recensioni */
.review { margin:0; display:flex; flex-direction:column; gap:14px; }
.review blockquote { margin:0; color:var(--soft); font-size:1.02rem; line-height:1.6; }
.review figcaption strong { display:block; }
.review figcaption span { color:var(--muted); font-size:.9rem; }
.stars { color:#fbbf24; letter-spacing:2px; font-size:1.05rem; }
.stars .off { color:rgba(255,255,255,.18); }
.rate { display:inline-flex; flex-direction:row-reverse; gap:4px; margin-bottom:18px; }
.rate input { position:absolute; opacity:0; pointer-events:none; }
.form .rate label { margin:0; font-size:2.1rem; line-height:1; color:rgba(255,255,255,.18); cursor:pointer; transition:color .15s; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color:#fbbf24; }
.rate input:focus-visible + label { outline:2px solid var(--c); border-radius:4px; }

/* Lavori */
.work { padding:0; overflow:hidden; }
.work > *:not(.work-img) { margin-left:24px; margin-right:24px; }
.work .post-meta { margin-top:20px; }
.work .more { margin-bottom:24px; }
.work-img { display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:#0f121b; }
.work-img img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease; }
.work:hover .work-img img { transform:scale(1.04); }
.work-hero { margin:36px 0; border-radius:20px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 40px 90px -45px rgba(124,92,255,.6); }
.work-hero img { width:100%; height:auto; }
.narrow-in { max-width:800px; margin:0 auto; }
.chips-row { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:6px 13px; border-radius:99px; border:1px solid var(--line2); font-size:.88rem; color:var(--soft); }

/* Chi sono */
.about-photo { display:grid; place-items:center; }
.about-photo img { border-radius:24px; border:1px solid var(--line2); box-shadow:0 40px 90px -45px rgba(124,92,255,.7); max-height:520px; width:auto; object-fit:cover; }
.about-photo img.about-mark { border:0; box-shadow:0 0 120px -10px rgba(124,92,255,.6); border-radius:48px; }

/* Stima preventivo */
.estimate { margin:6px 0 4px; padding:18px 20px; border-radius:14px; border:1px solid rgba(124,92,255,.45); background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(34,211,238,.05)); }
.estimate span { display:block; color:var(--soft); font-size:.9rem; }
.estimate strong { display:block; font-family:var(--head); font-size:1.7rem; margin:4px 0; }
.estimate small { color:var(--muted); }
.p-review { border-style:dashed; background:none; }

/* Preventivo per il cliente */
.doc-card { margin-bottom:16px; }
.doc-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-bottom:14px; }
.doc-top h2 { font-size:1.6rem; margin:0 0 4px; }
.doc-top .kicker { margin-bottom:4px; }
.doc-total { text-align:right; padding:14px 18px; border-radius:14px; background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,238,.07)); border:1px solid rgba(124,92,255,.4); }
.doc-total span { display:block; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.doc-total strong { display:block; font-family:var(--head); font-size:1.9rem; }
.doc-total small { color:var(--soft); }
.doc-h { font-size:1.05rem; margin:22px 0 8px; }
.conds { margin-top:18px; }
.conds summary { cursor:pointer; font-weight:600; color:#a9b8ff; }
.accept-form { border-color:rgba(52,211,153,.4); }

/* Animazioni all'ingresso */
.reveal { opacity:1; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}