/* =========================================================
   Audia — foglio di stile del sito (ga-soft.it/audia)
   Palette: [data-palette] su <html>   Forme: [data-stile]
   ========================================================= */

/* ---------- Palette (tutte sul viola) ---------- */
:root, [data-palette="audia"] {
  --bg:#F6F8FE; --bg-2:#EEF0FC; --surface:#FFFFFF;
  --ink:#1A1033; --ink-2:#3F3A5E; --muted:#6E6A8C; --line:#E4E5F5;
  --p:#4361EE; --s:#8B5CF6; --a:#EC4899; --deep:#2E1065; --on-deep:#F3EEFF; --deep-muted:#C3B6EA;
  --glow:rgba(139,92,246,.22); --sh:46,16,101;
}
[data-palette="lavanda"] {
  --bg:#FAF7FF; --bg-2:#F2ECFE; --surface:#FFFFFF;
  --ink:#1E1236; --ink-2:#463A62; --muted:#76698F; --line:#EAE2F8;
  --p:#7C3AED; --s:#A78BFA; --a:#F472B6; --deep:#2E1065; --on-deep:#F5F0FF; --deep-muted:#CDBDF0;
  --glow:rgba(167,139,250,.26); --sh:46,16,101;
}
[data-palette="ametista"] {
  --bg:#F8F5FD; --bg-2:#EFE8FA; --surface:#FFFFFF;
  --ink:#1C1030; --ink-2:#44375C; --muted:#73678A; --line:#E7DFF4;
  --p:#6D28D9; --s:#9333EA; --a:#F59E0B; --deep:#2A0E57; --on-deep:#F6F0FF; --deep-muted:#C9B5EC;
  --glow:rgba(147,51,234,.22); --sh:42,14,87;
}
[data-palette="orchidea"] {
  --bg:#FDF7FC; --bg-2:#F8ECF7; --surface:#FFFFFF;
  --ink:#24102E; --ink-2:#4C3656; --muted:#7D6686; --line:#F1E0EF;
  --p:#9D4EDD; --s:#C77DFF; --a:#FF5D8F; --deep:#3C0D52; --on-deep:#FBF0FF; --deep-muted:#D9B6EA;
  --glow:rgba(199,125,255,.26); --sh:60,13,82;
}
[data-palette="indaco"] {
  --bg:#F5F6FE; --bg-2:#ECEDFC; --surface:#FFFFFF;
  --ink:#141432; --ink-2:#3A3A5E; --muted:#6A6A8C; --line:#E2E3F5;
  --p:#4F46E5; --s:#7C3AED; --a:#06B6D4; --deep:#1E1B4B; --on-deep:#EEF0FF; --deep-muted:#B5B7E6;
  --glow:rgba(79,70,229,.2); --sh:30,27,75;
}
[data-palette="prugna"] {
  --bg:#FBF6FB; --bg-2:#F4EAF4; --surface:#FFFFFF;
  --ink:#22102A; --ink-2:#4A3452; --muted:#7A6381; --line:#EEDFEE;
  --p:#7E22CE; --s:#C026D3; --a:#22D3EE; --deep:#3B0A45; --on-deep:#FCEFFF; --deep-muted:#D8B3DE;
  --glow:rgba(192,38,211,.2); --sh:59,10,69;
}
[data-palette="iris"] {
  --bg:#F7F7FF; --bg-2:#EFEEFE; --surface:#FFFFFF;
  --ink:#171635; --ink-2:#3D3B61; --muted:#6D6B90; --line:#E5E4F7;
  --p:#6366F1; --s:#A855F7; --a:#F43F5E; --deep:#26215C; --on-deep:#F1F0FF; --deep-muted:#BDB9EA;
  --glow:rgba(168,85,247,.22); --sh:38,33,92;
}
[data-palette="notte"] {
  --bg:#1C1533; --bg-2:#241C40; --surface:#2C2350;
  --ink:#F3EEFF; --ink-2:#D2C8F0; --muted:#A79CC9; --line:#3B3166;
  --p:#8B7BFF; --s:#C084FC; --a:#F472B6; --deep:#140E28; --on-deep:#F3EEFF; --deep-muted:#A79CC9;
  --glow:rgba(192,132,252,.25); --sh:0,0,0;
}

/* ---------- Forme ---------- */
:root, [data-stile="morbido"] { --r:18px; --r-lg:28px; --pill:999px; }
[data-stile="netto"] { --r:10px; --r-lg:16px; --pill:12px; }

:root {
  --f-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grad:linear-gradient(120deg,var(--p),var(--s) 55%,var(--a));
  --sh-s:0 1px 2px rgba(var(--sh),.06),0 2px 8px rgba(var(--sh),.05);
  --sh-m:0 14px 34px -12px rgba(var(--sh),.22),0 4px 10px rgba(var(--sh),.06);
  --sh-l:0 40px 80px -28px rgba(var(--sh),.40),0 12px 28px -10px rgba(var(--sh),.14);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--f-body); background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .4s ease, color .4s ease; }
img,svg { display:block; max-width:100%; }
a { color:inherit; }
button,input,select,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--f-head); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink); }
h1 { font-size:clamp(2.4rem,5.2vw,4.2rem); }
h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); }
h3 { font-size:1.2rem; }
p { color:var(--ink-2); }
::selection { background:var(--s); color:#fff; }
:focus-visible { outline:3px solid var(--s); outline-offset:3px; }
.wrap { width:min(1200px, 100% - 40px); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; padding:8px 14px; border-radius:var(--r); background:var(--p); color:#fff; }
.skip:focus { left:12px; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pill); background:color-mix(in srgb, var(--s) 12%, var(--surface)); color:var(--p); font-size:.82rem; font-weight:700; letter-spacing:.02em; }
.kicker i { width:8px; height:8px; border-radius:50%; background:var(--a); box-shadow:0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); }
.lead { font-size:1.15rem; max-width:56ch; }
.section { position:relative; padding-block:clamp(72px,9vw,120px); }
.section--alt { background:var(--bg-2); }
.head { max-width:720px; margin-bottom:48px; }
.head.center { text-align:center; margin-inline:auto; }
.head.center .lead { margin-inline:auto; }
.head h2 { margin:16px 0 14px; }

/* ---------- Pulsanti ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:var(--pill); border:0; cursor:pointer; text-decoration:none; font-weight:700; font-size:1rem; color:#fff; background:var(--grad); background-size:150% 100%; box-shadow:0 14px 30px -12px color-mix(in srgb, var(--s) 70%, transparent); transition:transform .2s ease, box-shadow .2s ease, background-position .5s ease; }
.btn:hover { transform:translateY(-2px); background-position:100% 0; box-shadow:0 20px 40px -14px color-mix(in srgb, var(--s) 80%, transparent); }
.btn svg { width:18px; height:18px; transition:transform .2s ease; }
.btn:hover svg { transform:translateX(4px); }
.btn--ghost { background:var(--surface); color:var(--ink); box-shadow:var(--sh-s); border:1px solid var(--line); }
.btn--ghost:hover { box-shadow:var(--sh-m); }
.btn--white { background:#fff; color:var(--deep); }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.link { display:inline-flex; align-items:center; gap:8px; color:var(--p); font-weight:700; text-decoration:none; }
.link svg { width:16px; height:16px; transition:transform .2s ease; }
.link:hover svg { transform:translateX(4px); }

/* ---------- Header ---------- */
.top { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); transition:box-shadow .3s ease; }
.top.is-scrolled { box-shadow:0 1px 0 var(--line), 0 10px 30px -20px rgba(var(--sh),.4); }
.top__in { display:flex; align-items:center; justify-content:space-between; gap:20px; height:76px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.logo svg { width:46px; height:36px; }
.logo b { font-family:var(--f-head); font-weight:800; font-size:1.55rem; letter-spacing:-.03em; color:#2E1065; line-height:1; }
[data-palette="notte"] .logo b { color:#fff; }
.nav { display:flex; align-items:center; gap:6px; }
.nav ul { display:flex; gap:2px; list-style:none; padding:0; }
.nav ul a { display:block; padding:9px 15px; border-radius:var(--pill); text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink-2); transition:background .2s ease, color .2s ease; }
.nav ul a:hover { background:var(--bg-2); color:var(--ink); }
.nav ul a[aria-current="page"] { background:var(--surface); color:var(--p); box-shadow:var(--sh-s); }
.nav .btn { padding:11px 20px; font-size:.92rem; margin-left:8px; }
.burger { display:none; width:46px; height:46px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; position:relative; box-shadow:var(--sh-s); }
.burger span, .burger span::before, .burger span::after { position:absolute; left:12px; right:12px; height:2px; background:var(--ink); content:""; transition:transform .25s ease; }
.burger span { top:22px; } .burger span::before { top:-6px; left:0; right:0; } .burger span::after { top:6px; left:0; right:0; }
.burger[aria-expanded="true"] span { background:transparent; }
.burger[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:940px) {
  .burger { display:block; }
  .nav { position:absolute; top:76px; left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; padding:14px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); }
  .nav.is-open { display:flex; }
  .nav ul { flex-direction:column; }
  .nav ul a { padding:13px 14px; }
  .nav .btn { margin:8px 0 0; justify-content:center; }
}

/* ---------- Sfondo animato ---------- */
.aura { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aura i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; }
.aura i:nth-child(1) { width:560px; height:560px; right:-140px; top:-160px; background:color-mix(in srgb, var(--s) 40%, transparent); animation:drift 18s ease-in-out infinite alternate; }
.aura i:nth-child(2) { width:420px; height:420px; left:-160px; top:25%; background:color-mix(in srgb, var(--p) 28%, transparent); animation:drift 22s ease-in-out infinite alternate-reverse; }
.aura i:nth-child(3) { width:340px; height:340px; right:30%; bottom:-180px; background:color-mix(in srgb, var(--a) 22%, transparent); animation:drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate(-60px,50px) scale(1.15); } }
.wave-lines { position:absolute; left:0; right:0; bottom:0; height:140px; opacity:.5; pointer-events:none; }
.wave-lines path { fill:none; stroke-width:2; }
.wave-lines .w1 { stroke:color-mix(in srgb, var(--s) 50%, transparent); animation:wave 9s linear infinite; }
.wave-lines .w2 { stroke:color-mix(in srgb, var(--a) 40%, transparent); animation:wave 13s linear infinite reverse; }
@keyframes wave { to { transform:translateX(-50%); } }

/* ---------- Dispositivi (cornici generiche: telefono "iPhone" e "Android") ---------- */
.device { position:relative; width:var(--w,270px); aspect-ratio:620/1348; border-radius:calc(var(--w,270px) * .16); padding:calc(var(--w,270px) * .035); background:linear-gradient(145deg,#3a3a40,#16161a 40%,#2b2b31); box-shadow:inset 0 0 0 2px #4a4a52, inset 0 0 0 5px #0c0c0e, var(--sh-l); flex:none; }
.device__screen { position:relative; width:100%; height:100%; border-radius:calc(var(--w,270px) * .13); overflow:hidden; background:#fff; }
.device__screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.device--ios .device__notch { position:absolute; z-index:3; top:calc(var(--w,270px) * .055); left:50%; width:30%; height:calc(var(--w,270px) * .085); transform:translateX(-50%); border-radius:999px; background:#000; }
.device--android { border-radius:calc(var(--w,270px) * .12); background:linear-gradient(145deg,#e9e6f2,#b9b4c9 45%,#dcd8e6); box-shadow:inset 0 0 0 2px #cfcadb, inset 0 0 0 5px #111, var(--sh-l); }
.device--android .device__screen { border-radius:calc(var(--w,270px) * .095); }
.device--android .device__notch { position:absolute; z-index:3; top:calc(var(--w,270px) * .06); left:50%; width:calc(var(--w,270px) * .06); height:calc(var(--w,270px) * .06); transform:translateX(-50%); border-radius:50%; background:#000; }
.device::before { content:""; position:absolute; right:-3px; top:24%; width:3px; height:12%; border-radius:0 3px 3px 0; background:#2b2b31; }
.device--android::before { background:#bdb8cb; }
.device__label { position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap; }

/* schermate che si alternano (scene animate) */
.scene img { opacity:0; }
.scene img.is-on { opacity:1; transition:opacity .6s ease; }
.slide-track { position:absolute; inset:0; display:flex; transition:transform .8s cubic-bezier(.6,.05,.3,1); }
.slide-track img { position:relative; flex:none; width:100%; height:100%; opacity:1; }

/* il "dito": un punto che tocca e scorre */
.touch { position:absolute; z-index:5; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(255,255,255,.55); border:2px solid rgba(255,255,255,.95); box-shadow:0 6px 18px rgba(0,0,0,.25); left:var(--tx,50%); top:var(--ty,50%); opacity:0; transition:left .9s cubic-bezier(.5,0,.3,1), top .9s cubic-bezier(.5,0,.3,1), opacity .3s ease, transform .15s ease; pointer-events:none; backdrop-filter:blur(2px); }
.touch.is-on { opacity:1; }
.touch.is-press { transform:scale(.78); }
.touch::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #fff; opacity:0; }
.touch.is-press::after { animation:ripple .6s ease-out; }
@keyframes ripple { from { transform:scale(.6); opacity:.9; } to { transform:scale(2.6); opacity:0; } }

/* ---------- HERO ---------- */
.hero { position:relative; padding:clamp(40px,6vw,90px) 0 clamp(80px,9vw,130px); overflow:hidden; }
.hero__in { position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hero h1 { margin:20px 0 20px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-s); font-size:.86rem; font-weight:600; color:var(--ink-2); }
.chip svg { width:16px; height:16px; color:var(--s); }
.hero__devices { position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:600px; }
.hero__devices .device--ios { --w:280px; z-index:2; transform:rotate(-4deg); animation:floaty 7s ease-in-out infinite; }
.hero__devices .device--android { --w:250px; margin-left:-70px; margin-bottom:60px; transform:rotate(6deg); animation:floaty 8s ease-in-out -3s infinite; }
@keyframes floaty { 50% { translate:0 -14px; } }
.bubble { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:10px; padding:11px 15px; border-radius:16px; background:var(--surface); box-shadow:var(--sh-m); font-size:.85rem; font-weight:700; color:var(--ink); animation:floaty 6s ease-in-out infinite; }
.bubble small { display:block; font-weight:500; color:var(--muted); font-size:.75rem; }
.bubble .ico { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--grad); color:#fff; flex:none; }
.bubble .ico svg { width:18px; height:18px; }
.bubble--1 { left:0; top:14%; animation-delay:-2s; }
.bubble--2 { right:0; bottom:16%; animation-delay:-4s; }
@media (max-width:980px) { .hero__in { grid-template-columns:1fr; } .hero__devices { min-height:520px; } .hero__devices .device--ios { --w:240px; } .hero__devices .device--android { --w:210px; margin-left:-60px; } .bubble--1 { left:2%; } .bubble--2 { right:2%; } }
@media (max-width:480px) { .hero__devices .device--ios { --w:200px; } .hero__devices .device--android { --w:175px; } .bubble { font-size:.75rem; padding:8px 11px; } }

/* ---------- Nastro funzioni ---------- */
.marquee { overflow:hidden; padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track { display:flex; gap:12px; width:max-content; animation:marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.marquee .chip { white-space:nowrap; }

/* ---------- Vetrina white label ---------- */
.brandshow { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.brandtabs { display:grid; gap:10px; margin-top:26px; }
.brandtab { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.brandtab:hover { transform:translateX(4px); }
.brandtab[aria-selected="true"] { border-color:var(--c); box-shadow:0 0 0 2px var(--c), var(--sh-m); }
.brandtab i { width:38px; height:38px; border-radius:12px; background:var(--c); flex:none; display:grid; place-items:center; color:#fff; font-style:normal; font-weight:800; font-family:var(--f-head); }
.brandtab b { display:block; font-family:var(--f-head); }
.brandtab small { color:var(--muted); }
.brandstage { position:relative; min-height:520px; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), #fff 70%); box-shadow:var(--sh-l); transition:background .6s ease; }
.brandstage__shop { position:absolute; left:0; right:0; bottom:0; height:78%; }
.brandstage__shop svg { width:100%; height:100%; }
.brandstage .device { --w:190px; position:absolute; right:7%; bottom:6%; z-index:2; animation:floaty 7s ease-in-out infinite; }
.brandstage .device__screen img { transition:filter .6s ease; }
.brandstage__name { position:absolute; z-index:3; left:7%; top:4.6%; padding:3px 8px 3px 5px; border-radius:6px; background:#F6F8FE; font:800 11px/1.2 var(--f-head); color:var(--c); display:flex; align-items:center; gap:5px; white-space:nowrap; max-width:62%; overflow:hidden; }
.brandstage__name::before { content:""; width:13px; height:13px; border-radius:4px; background:var(--c); flex:none; }
.brandstage__caption { position:absolute; left:20px; top:18px; z-index:3; padding:8px 14px; border-radius:var(--pill); background:rgba(255,255,255,.9); box-shadow:var(--sh-s); font-weight:700; font-size:.85rem; color:#1A1033; }
@media (max-width:900px) { .brandshow { grid-template-columns:1fr; } .brandstage { min-height:440px; } .brandstage .device { --w:160px; } }

/* ---------- Persone (illustrazioni) ---------- */
.people { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.person { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.person:hover { transform:translateY(-6px); box-shadow:var(--sh-l); }
.person__art { aspect-ratio:4/3; background:linear-gradient(160deg, color-mix(in srgb, var(--s) 16%, #fff), color-mix(in srgb, var(--a) 10%, #fff)); }
.person__art svg { width:100%; height:100%; }
.person__body { padding:22px 24px 26px; }
.person__body h3 { margin-bottom:6px; }
.person__body p { font-size:.97rem; }
@media (max-width:900px) { .people { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
/* piccoli movimenti nelle illustrazioni */
.blink { animation:blink 4.5s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes blink { 0%,94%,100% { transform:scaleY(1); } 97% { transform:scaleY(.1); } }
.nod { animation:nod 5s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 90%; }
@keyframes nod { 50% { transform:rotate(-3deg); } }
.tap { animation:tap 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes tap { 0%,60%,100% { transform:translateY(0); } 70% { transform:translateY(3px); } }
.sound { animation:sound 1.8s ease-out infinite; transform-box:fill-box; transform-origin:left center; opacity:0; }
.sound--2 { animation-delay:.6s; } .sound--3 { animation-delay:1.2s; }
@keyframes sound { 0% { opacity:0; transform:scale(.6); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.4); } }
.glow-screen { animation:glowscreen 3s ease-in-out infinite; }
@keyframes glowscreen { 50% { opacity:.6; } }

/* ---------- Percorso in 4 passi ---------- */
.journey { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:passo; }
.step { position:relative; padding:26px 22px 24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); counter-increment:passo; }
.step::before { content:counter(passo,decimal-leading-zero); display:inline-grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--grad); color:#fff; font:800 .95rem var(--f-head); margin-bottom:16px; box-shadow:0 10px 20px -8px var(--glow); }
.step h3 { margin-bottom:6px; }
.step p { font-size:.95rem; }
.step__mini { height:120px; margin:0 -6px 14px; border-radius:var(--r); background:var(--bg-2); position:relative; overflow:hidden; }
.step__mini svg { width:100%; height:100%; }
@media (max-width:980px) { .journey { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .journey { grid-template-columns:1fr; } }

/* ---------- Galleria schermate ---------- */
.gallery { display:flex; gap:34px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px 4px 60px; scrollbar-width:thin; cursor:grab; }
.gallery.is-drag { cursor:grabbing; scroll-snap-type:none; }
.gallery figure { scroll-snap-align:center; flex:none; text-align:center; }
.gallery .device { --w:220px; margin-inline:auto; transition:transform .3s ease; }
.gallery figure:hover .device { transform:translateY(-8px) rotate(-1.5deg); }
.gallery figcaption { margin-top:46px; }
.gallery figcaption b { display:block; font-family:var(--f-head); }
.gallery figcaption small { color:var(--muted); }
.gallery-hint { display:flex; align-items:center; gap:10px; justify-content:center; color:var(--muted); font-size:.88rem; }
.gallery-hint .swipe { width:40px; height:24px; position:relative; }
.gallery-hint .swipe i { position:absolute; top:4px; left:0; width:16px; height:16px; border-radius:50%; background:var(--s); opacity:.8; animation:swipe 2s ease-in-out infinite; }
@keyframes swipe { 0% { transform:translateX(24px); opacity:0; } 20% { opacity:.9; } 80% { transform:translateX(0); opacity:.9; } 100% { opacity:0; } }

/* ---------- App + portale ---------- */
.duo { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,60px); align-items:center; }
.portal { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; border:1px solid var(--line); }
.portal__bar { display:flex; gap:7px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.portal__bar i { width:10px; height:10px; border-radius:50%; background:#FF5F57; }
.portal__bar i:nth-child(2) { background:#FEBC2E; } .portal__bar i:nth-child(3) { background:#28C840; }
.portal__bar span { margin-left:12px; padding:4px 12px; border-radius:8px; background:var(--surface); font-size:.75rem; color:var(--muted); }
.portal__body { display:grid; grid-template-columns:150px 1fr; min-height:330px; }
.portal__side { padding:16px 12px; background:linear-gradient(180deg,var(--deep),color-mix(in srgb, var(--deep) 70%, var(--p))); display:grid; align-content:start; gap:6px; }
.portal__side span { padding:8px 10px; border-radius:8px; font-size:.78rem; font-weight:600; color:var(--deep-muted); }
.portal__side span.on { background:rgba(255,255,255,.14); color:#fff; }
.portal__main { padding:18px; display:grid; gap:10px; align-content:start; }
.portal__main h4 { font-size:.95rem; }
.appt { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; border:1px solid var(--line); font-size:.82rem; background:var(--surface); }
.appt b { display:block; font-size:.86rem; }
.appt small { color:var(--muted); }
.appt .av { width:32px; height:32px; border-radius:50%; background:var(--grad); flex:none; }
.appt .st { margin-left:auto; padding:5px 10px; border-radius:999px; font-weight:700; font-size:.72rem; }
.appt .st--ok { background:#DCFCE7; color:#15803D; } .appt .st--new { background:color-mix(in srgb, var(--a) 16%, #fff); color:var(--a); } .appt .st--wait { background:#FEF3C7; color:#B45309; }
.appt--new { animation:newappt 6s ease-in-out infinite; }
@keyframes newappt { 0%,10% { opacity:0; transform:translateY(-10px); } 18%,85% { opacity:1; transform:none; } 100% { opacity:0; } }
.feature-list { list-style:none; padding:0; display:grid; gap:14px; margin-top:24px; }
.feature-list li { display:flex; gap:14px; align-items:flex-start; }
.feature-list li > i { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--s) 14%, var(--surface)); color:var(--p); flex:none; }
.feature-list li > i svg { width:20px; height:20px; }
.feature-list b { display:block; font-family:var(--f-head); }
.feature-list span { color:var(--ink-2); font-size:.95rem; }
@media (max-width:900px) { .duo { grid-template-columns:1fr; } .portal__body { grid-template-columns:110px 1fr; } }

/* ---------- Carte funzioni ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); transition:transform .3s ease, box-shadow .3s ease; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-l); }
.card .ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--grad); color:#fff; margin-bottom:16px; box-shadow:0 12px 24px -10px var(--glow); }
.card .ic svg { width:24px; height:24px; }
.card h3 { margin-bottom:6px; }
.card p { font-size:.96rem; }
@media (max-width:900px) { .cards { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .cards { grid-template-columns:1fr; } }

/* ---------- Configuratore colori (anteprima app) ---------- */
.config { display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:center; }
.config__controls { display:grid; gap:16px; padding:26px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.config__controls label { display:grid; gap:6px; font-weight:700; font-size:.92rem; }
.config__controls small { font-weight:500; color:var(--muted); }
.config__controls input[type=text] { padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); }
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
.swatches button { width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; background:var(--c); }
.swatches button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--ink); }
.swatches input[type=color] { width:36px; height:36px; border:0; padding:0; border-radius:50%; overflow:hidden; cursor:pointer; background:none; }
.mock { --mp:#4361EE; --ms:#8B5CF6; --ma:#EC4899; }
.mock .device__screen { background:#F6F8FE; padding:22% 7% 0; font-family:var(--f-body); }
.mock__top { display:flex; align-items:center; gap:6px; font:800 13px var(--f-head); color:var(--mp); margin-bottom:10px; }
.mock__top i { width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,var(--mp),var(--ms)); }
.mock__hero { padding:14px; border-radius:16px; background:linear-gradient(135deg,var(--mp),var(--ms)); color:#fff; }
.mock__hero b { display:block; font:800 14px var(--f-head); }
.mock__hero small { font-size:9.5px; opacity:.85; }
.mock__hero span { display:block; margin-top:10px; padding:8px; border-radius:999px; background:#fff; color:var(--mp); font:800 10.5px var(--f-head); text-align:center; }
.mock__row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:9px; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); font:700 10.5px var(--f-head); color:#1A1033; }
.mock__row i { width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--mp),var(--ms)); flex:none; }
.mock__offer { margin-top:8px; padding:10px; border-radius:12px; background:var(--ma); color:#fff; font:800 10.5px var(--f-head); }
@media (max-width:820px) { .config { grid-template-columns:1fr; } .config .device { margin-inline:auto; } }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:10px; max-width:860px; margin-inline:auto; }
.faq details { border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-s); }
.faq details[open] { box-shadow:var(--sh-m); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; font:700 1.04rem var(--f-head); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { position:relative; width:28px; height:28px; flex:none; border-radius:50%; background:var(--bg-2); }
.faq summary i::before, .faq summary i::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--ink); transform:translate(-50%,-50%); }
.faq summary i::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s ease; }
.faq details[open] summary i { background:var(--grad); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background:#fff; }
.faq details[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.faq details p { padding:0 20px 20px; }

/* ---------- Banda finale ---------- */
.cta { position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:24px; padding:clamp(34px,5vw,64px); border-radius:calc(var(--r-lg) + 6px); background:radial-gradient(500px 260px at 90% 0%, color-mix(in srgb, var(--a) 45%, transparent), transparent 60%), linear-gradient(130deg,var(--deep),color-mix(in srgb, var(--deep) 60%, var(--s))); box-shadow:var(--sh-l); }
.cta h2 { color:#fff; max-width:15ch; }
.cta p { color:var(--deep-muted); margin-top:14px; max-width:44ch; }
.cta .btn--ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); box-shadow:none; }
.cta__art { position:relative; height:260px; }
.cta__art .device { --w:150px; position:absolute; right:10%; top:6px; transform:rotate(8deg); animation:floaty 6s ease-in-out infinite; }
.cta__art .device + .device { right:44%; top:40px; transform:rotate(-6deg); animation-delay:-2s; }
@media (max-width:820px) { .cta { grid-template-columns:1fr; } .cta__art { display:none; } }

/* ---------- Pagine interne ---------- */
.page-head { position:relative; overflow:hidden; padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px); }
.page-head .wrap { position:relative; z-index:1; }
.page-head h1 { margin:16px 0 14px; max-width:18ch; }
.prose { max-width:820px; margin-inline:auto; padding:clamp(24px,4vw,48px); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.prose h2 { font-size:1.5rem; margin:34px 0 10px; }
.prose h3 { font-size:1.15rem; margin:26px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose p, .prose li { color:var(--ink-2); }
.prose p + p { margin-top:12px; }
.prose ul, .prose ol { padding-left:22px; margin:12px 0; display:grid; gap:6px; }
.prose a { color:var(--p); }
.prose table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; }
.prose th, .prose td { text-align:left; padding:10px; border-bottom:1px solid var(--line); vertical-align:top; }
.da-compilare { background:#FEF3C7; color:#92400E; padding:1px 6px; border-radius:6px; font-size:.9em; }

/* ---------- Contatti ---------- */
.contact { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,56px); align-items:start; }
.form { display:grid; gap:16px; padding:clamp(22px,4vw,38px); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); border-top:5px solid; border-image:var(--grad) 1; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:6px; }
.field label { font-weight:700; font-size:.88rem; }
.field input, .field textarea { width:100%; padding:13px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); transition:border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--s); box-shadow:0 0 0 4px var(--glow); }
.req { color:var(--a); }
.err { display:none; font-size:.83rem; font-weight:600; color:#DC2626; }
.has-error .err { display:block; }
.has-error input, .has-error textarea { border-color:#DC2626; }
.consent { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r); border:1px solid transparent; font-size:.9rem; color:var(--ink-2); transition:border-color .2s ease, background .2s ease; }
.consent input { width:20px; height:20px; margin-top:2px; accent-color:var(--p); flex:none; }
.consent.has-error { border-color:#DC2626; background:#FEF2F2; animation:shake .4s ease; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.esito { display:none; padding:13px 16px; border-radius:var(--r); font-weight:600; font-size:.94rem; }
.esito.is-on { display:block; }
.esito--errore { background:#FEF2F2; color:#B91C1C; border-left:4px solid #DC2626; }
.esito--attesa { background:var(--bg-2); color:var(--ink-2); border-left:4px solid var(--s); }
.side-card { padding:24px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); }
.side-card + .side-card { margin-top:16px; }
.side-card h3 { margin-bottom:12px; }
.steps-list { list-style:none; padding:0; display:grid; gap:14px; counter-reset:s; }
.steps-list li { display:grid; grid-template-columns:34px 1fr; gap:12px; counter-increment:s; font-size:.95rem; color:var(--ink-2); }
.steps-list li::before { content:counter(s); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font:800 .9rem var(--f-head); }
.steps-list b { display:block; color:var(--ink); }
.contact-visual { position:relative; height:220px; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(140deg,var(--p),var(--s) 60%,var(--a)); box-shadow:var(--sh-l); margin-bottom:16px; }
.contact-visual svg { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:900px) { .contact { grid-template-columns:1fr; } }
@media (max-width:560px) { .form .row { grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.foot { margin-top:clamp(70px,9vw,110px); background:var(--deep); color:var(--deep-muted); padding:60px 0 28px; font-size:.94rem; }
.foot__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; }
.foot .logo b { color:#fff; }
.foot p { color:var(--deep-muted); margin-top:14px; max-width:40ch; }
.foot h4 { font:700 .78rem var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.foot ul { list-style:none; padding:0; display:grid; gap:8px; }
.foot a { color:var(--deep-muted); text-decoration:none; }
.foot a:hover { color:#fff; }
.foot__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.84rem; }
@media (max-width:760px) { .foot__grid { grid-template-columns:1fr; } }

/* ---------- Comparsa allo scroll ---------- */
.rv { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.is-in { opacity:1; transform:none; }

/* ---------- Pannello di prova colori/stile (da togliere dopo la scelta) ---------- */
.prova-fab { position:fixed; left:18px; bottom:18px; z-index:90; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:999px; border:0; background:#111; color:#fff; cursor:pointer; font:600 .86rem/1 Inter,system-ui,sans-serif; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.prova-fab span { display:flex; } .prova-fab span i { width:18px; height:18px; border-radius:50%; border:2px solid #111; margin-left:-6px; }
.prova-fab span i:first-child { margin-left:0; background:var(--p); } .prova-fab span i:nth-child(2) { background:var(--s); } .prova-fab span i:nth-child(3) { background:var(--a); }
.prova { position:fixed; left:18px; bottom:76px; z-index:90; width:min(400px, calc(100vw - 36px)); max-height:calc(100vh - 110px); overflow:auto; padding:20px; border-radius:18px; background:#fff; color:#111; box-shadow:0 30px 70px rgba(0,0,0,.3); font-family:Inter,system-ui,sans-serif; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.prova.is-open { opacity:1; transform:none; pointer-events:auto; }
.prova h4 { font:600 .7rem/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#777; margin:0 0 10px; }
.prova h4 + div { margin-bottom:18px; }
.prova__pal { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.prova__pal button, .prova__sti button { border:1px solid #e3e3e3; background:#fafafa; border-radius:10px; cursor:pointer; padding:7px 5px 6px; display:grid; gap:5px; justify-items:center; font:500 .7rem/1.1 Inter,sans-serif; color:#444; }
.prova__pal button[aria-pressed="true"], .prova__sti button[aria-pressed="true"] { border-color:#111; box-shadow:inset 0 0 0 1px #111; color:#111; background:#fff; }
.prova__pal .sw { display:flex; width:100%; height:20px; border-radius:6px; overflow:hidden; } .prova__pal .sw i { flex:1; }
.prova__sti { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.prova__sti button { padding:12px 6px; font-size:.78rem; }
.prova p { font-size:.75rem; color:#777; }

/* ---------- Torna su ---------- */
.su { position:fixed; right:18px; bottom:18px; z-index:70; width:48px; height:48px; border-radius:50%; border:0; background:var(--surface); color:var(--ink); box-shadow:var(--sh-m); display:grid; place-items:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.su.is-on { opacity:1; pointer-events:auto; }
.su:hover { transform:translateY(-3px); }
.su svg { width:18px; height:18px; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv { opacity:1; transform:none; }
}
.disegna { stroke-dasharray:200; animation:disegna 4s ease-in-out infinite; }
@keyframes disegna { 0% { stroke-dashoffset:200; } 40%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-200; } }
.prose .segnaposto { padding:14px 16px; border-radius:var(--r); background:#FFFBEB; border-left:4px solid #F59E0B; color:#92400E; font-size:.92rem; }
.prose .segnaposto strong { display:block; margin-bottom:4px; }
.prose .indice-pagina { padding:18px 20px; border-radius:var(--r); background:var(--bg-2); margin:18px 0 8px; }
.prose .indice-pagina h2 { font-size:1rem; margin:0 0 8px; }
.prose .aggiornato { font-size:.88rem; color:var(--muted); }
.prose section { padding:0; }
.form input, .form textarea, .consent { scroll-margin-top:110px; }