/* =========================================================
   GA-Soft — foglio di stile (versione produzione)
   I colori dei prodotti (Solar, Audia, Editoria) sono fissi: vedi "Prodotti".
   ========================================================= */

/* ---------- Palette "Ghiaccio" ---------- */
:root {
  --bg:#EEF5FA; --bg-2:#E2EDF5; --surface:#FFFFFF;
  --ink:#0C1F2E; --ink-2:#2F4A5E; --muted:#617B8E; --line:#D3E2EE;
  --primary:#0B5CAD; --primary-2:#4BA3E3; --on-primary:#FFFFFF;
  --accent:#13B5A6; --on-accent:#FFFFFF;
  --deep:#0A2A47; --on-deep:#EAF4FB; --deep-muted:#9DBBD2;
  --glow:rgba(75,163,227,.22); --sh:12,31,46;
}

/* ---------- Colori dei prodotti (indipendenti dalla palette del sito) ---------- */
:root {
  --solar-1:#2E7A3F; --solar-2:#5FA35A; --solar-acc:#E7B23A; --solar-bg:#F3FAF1; --solar-deep:#1F5C34;
  --audia-1:#4361EE; --audia-2:#8B5CF6; --audia-acc:#EC4899; --audia-bg:#F6F8FE; --audia-deep:#2E1065;
  --news-1:#C62828; --news-2:#EF5350; --news-acc:#FF8A00; --news-bg:#FFF6F3; --news-deep:#3A0D0D;
}
.theme-solar { --primary:var(--solar-1); --primary-2:var(--solar-2); --accent:var(--solar-acc); --on-primary:#fff; --tint:var(--solar-bg); --tdeep:var(--solar-deep); }
.theme-audia { --primary:var(--audia-1); --primary-2:var(--audia-2); --accent:var(--audia-acc); --on-primary:#fff; --tint:var(--audia-bg); --tdeep:var(--audia-deep); }
.theme-news  { --primary:var(--news-1);  --primary-2:var(--news-2);  --accent:var(--news-acc);  --on-primary:#fff; --tint:var(--news-bg);  --tdeep:var(--news-deep); }

/* ---------- Caratteri e forme ---------- */
:root {
  --f-head:"Manrope","Inter",system-ui,sans-serif;
  --f-body:"Manrope","Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --head-w:800; --head-track:-0.03em;
  --r:16px; --r-lg:26px; --pill:999px;
}

/* ---------- Ombre ---------- */
:root {
  --sh-s:0 1px 2px rgba(var(--sh),.06), 0 2px 6px rgba(var(--sh),.05);
  --sh-m:0 10px 30px -8px rgba(var(--sh),.14), 0 3px 8px rgba(var(--sh),.06);
  --sh-l:0 30px 70px -20px rgba(var(--sh),.28), 0 10px 24px -8px rgba(var(--sh),.10);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--f-body); color:var(--ink); background:var(--bg); 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:var(--head-w); letter-spacing:var(--head-track); line-height:1.12; color:var(--ink); }
h1 { font-size:clamp(2.4rem,5.2vw,4.1rem); }
h2 { font-size:clamp(1.85rem,3.4vw,2.7rem); }
h3 { font-size:1.22rem; }
p { color:var(--ink-2); }
::selection { background:var(--accent); color:var(--on-accent); }
:focus-visible { outline:2px solid var(--primary-2); outline-offset:3px; }
.container { width:min(1200px, 100% - 40px); margin-inline:auto; }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--primary); color:var(--on-primary); padding:8px 14px; border-radius:var(--r); z-index:100; }
.skip-link:focus { left:12px; }

.kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-2); }
.kicker::before { content:""; width:22px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--primary-2),var(--accent)); }
.lead { font-size:1.12rem; color:var(--ink-2); max-width:58ch; }
.section { padding-block:clamp(70px,9vw,116px); position:relative; }
.section--alt { background:var(--bg-2); }
.section--tint { background:
  radial-gradient(640px 340px at 90% 0%, var(--glow), transparent 65%),
  radial-gradient(520px 300px at 0% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
  var(--bg-2); }
.section-head { max-width:720px; margin-bottom:48px; }
.section-head h2 { margin:14px 0 14px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.center .lead { margin-inline:auto; }

/* ---------- Pulsanti e link ---------- */
.btn { --b:var(--primary); --c:var(--on-primary); display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--pill); background:var(--b); color:var(--c); border:1px solid var(--b); font-weight:700; font-size:.97rem; text-decoration:none; cursor:pointer; box-shadow:0 8px 20px -8px var(--glow); transition:transform .2s ease, box-shadow .2s ease; }
.btn svg { width:18px; height:18px; transition:transform .25s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--glow), var(--sh-m); }
.btn:hover svg { transform:translateX(4px); }
.btn--line { --b:var(--surface); --c:var(--ink); border-color:var(--line); box-shadow:var(--sh-s); }
.btn--accent { --b:var(--accent); --c:var(--on-accent); }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.link { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--primary); text-decoration:none; transition:gap .2s ease; }
.link:hover { gap:13px; }
.link svg { width:16px; height:16px; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); transition:box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow:0 1px 0 var(--line), 0 8px 24px -16px rgba(var(--sh),.3); }
.nav { display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { width:36px; height:36px; filter:drop-shadow(0 4px 8px rgba(var(--sh),.18)); }
.brand b { font-family:var(--f-head); font-weight:800; font-size:1.22rem; letter-spacing:-0.02em; color:var(--ink); }
.brand b span { color:var(--accent); }
.nav__links { display:flex; align-items:center; gap:4px; list-style:none; padding:0; }
.nav__links a { display:block; padding:9px 16px; border-radius:var(--pill); font-size:.95rem; font-weight:600; text-decoration:none; color:var(--ink-2); transition:background .2s ease, color .2s ease; }
.nav__links a:hover { background:var(--bg-2); color:var(--ink); }
.nav__links a[aria-current="page"] { background:var(--surface); color:var(--ink); box-shadow:var(--sh-s); }
.nav__cta { margin-left:10px; }
.nav__cta .btn { padding:10px 20px; font-size:.92rem; }
.nav__toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; position:relative; box-shadow:var(--sh-s); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { position:absolute; left:12px; right:12px; height:2px; background:var(--ink); content:""; transition:transform .25s ease; }
.nav__toggle span { top:21px; }
.nav__toggle span::before { top:-6px; left:0; right:0; }
.nav__toggle span::after { top:6px; left:0; right:0; }
.nav__toggle[aria-expanded="true"] span { background:transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
.nav__menu { display:flex; align-items:center; }
@media (max-width:860px) {
  .nav__toggle { display:block; }
  .nav__menu { position:absolute; top:74px; left:12px; right:12px; flex-direction:column; align-items:stretch; gap:10px; padding:14px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-l); display:none; }
  .nav__menu.is-open { display:flex; }
  .nav__links { flex-direction:column; align-items:stretch; }
  .nav__links a { padding:12px 14px; }
  .nav__cta { margin:4px 0 0; } .nav__cta .btn { width:100%; justify-content:center; }
}

/* ---------- Sfondi decorativi ---------- */
.decor { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.decor i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.85; }
.decor i:nth-child(1) { width:520px; height:520px; right:-120px; top:-140px; background:var(--glow); animation:blob 20s ease-in-out infinite alternate; }
.decor i:nth-child(2) { width:420px; height:420px; left:-160px; top:30%; background:color-mix(in srgb, var(--accent) 22%, transparent); animation:blob 24s ease-in-out infinite alternate-reverse; }
.decor i:nth-child(3) { width:360px; height:360px; right:25%; bottom:-200px; background:color-mix(in srgb, var(--primary-2) 18%, transparent); animation:blob 28s ease-in-out infinite alternate; }
@keyframes blob { to { transform:translate(-50px,40px) scale(1.12); } }
.decor__grid { position:absolute; inset:0; opacity: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 70% 70% at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%); animation:grid-drift 30s linear infinite; }
@keyframes grid-drift { to { background-position:56px 56px; } }

/* ---------- HERO ---------- */
.hero { position:relative; padding:clamp(36px,6vw,80px) 0 clamp(56px,7vw,90px); overflow:hidden; }
.hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
.hero h1 { margin:18px 0 20px; }
.hero h1 em { font-style:normal; background:linear-gradient(100deg,var(--primary-2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__duo { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hero__duo span { display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:var(--pill); font-size:.88rem; font-weight:600; color:var(--ink-2); background:var(--surface); box-shadow:var(--sh-s); }
.hero__duo i { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero__duo span:first-child i { background:var(--primary-2); }

/* pannello con i punti animati (stile finestra, come nella prima versione) */
.window { position:relative; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; }
.window__bar { display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.window__bar i { width:10px; height:10px; border-radius:50%; background:#FF5F57; }
.window__bar i:nth-child(2) { background:#FEBC2E; } .window__bar i:nth-child(3) { background:#28C840; }
.window__bar b { margin-left:auto; font-weight:500; }
.dots-stage { position:relative; aspect-ratio:1/0.9; background:radial-gradient(circle at 50% 45%, var(--glow), transparent 65%); }
.dots-stage canvas { position:absolute; inset:0; width:100%; height:100%; }
.window__foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--line); }
.window__label { font-weight:700; font-size:.95rem; color:var(--ink); transition:opacity .3s ease; }
.window__label b { color:var(--accent); margin-right:8px; font-family:var(--f-mono); font-size:.8rem; }
.window__steps { display:flex; gap:5px; }
.window__steps i { width:16px; height:4px; border-radius:4px; background:var(--line); transition:background .3s ease, width .3s ease; }
.window__steps i.is-on { width:28px; background:linear-gradient(90deg,var(--primary-2),var(--accent)); }
.float-tag { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-m); font-size:.82rem; font-weight:700; color:var(--ink); animation:bob 6s ease-in-out infinite; }
.float-tag i { width:8px; height:8px; border-radius:50%; background:#28C840; box-shadow:0 0 0 4px rgba(40,200,64,.18); }
.float-tag--a { left:-18px; top:22%; }
.float-tag--b { right:-14px; bottom:18%; animation-delay:-3s; }
.float-tag--b i { background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
@keyframes bob { 50% { transform:translateY(-10px); } }
.hero__visual { position:relative; }
@media (max-width:920px) { .hero__grid { grid-template-columns:1fr; } .hero__visual { max-width:540px; width:100%; margin-inline:auto; } .float-tag--a { left:8px; } .float-tag--b { right:8px; } }

/* ---------- Nastro (scritte piccole, pillole con icona) ---------- */
.ribbon { position:relative; z-index:2; margin-top:-28px; }
.ribbon__box { border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-m); padding:10px 0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ribbon__track { display:flex; align-items:center; gap:10px; width:max-content; will-change:transform; }
.ribbon__item { display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 8px; border-radius:var(--pill); background:var(--bg-2); font-size:.86rem; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.ribbon__item svg { width:24px; height:24px; padding:5px; border-radius:50%; background:var(--surface); color:var(--primary-2); box-shadow:var(--sh-s); }
.ribbon__sep { width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }

/* ---------- Due attività ---------- */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.duo__card { position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); padding:clamp(26px,3.6vw,40px); overflow:hidden; text-decoration:none; box-shadow:var(--sh-m); transition:transform .3s ease, box-shadow .3s ease; }
.duo__card:hover { transform:translateY(-6px); box-shadow:var(--sh-l); }
.duo__card--a { background:linear-gradient(160deg, var(--deep), color-mix(in srgb, var(--deep) 75%, var(--primary-2))); }
.duo__card--a h3 { color:var(--on-deep); } .duo__card--a p { color:var(--deep-muted); }
.duo__card--a .link { color:var(--accent); }
.duo__card--b { background:var(--surface); }
.duo__tag { font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.duo__card--b .duo__tag { color:var(--primary-2); }
.duo__art { position:relative; height:230px; margin:14px -12px 10px; }
.duo__art canvas, .duo__art svg { position:absolute; inset:0; width:100%; height:100%; }
.duo__card h3 { font-size:clamp(1.5rem,2.4vw,1.9rem); margin-bottom:10px; }
.duo__card p { max-width:44ch; }
.duo__list { list-style:none; padding:0; margin:18px 0 20px; display:flex; flex-wrap:wrap; gap:8px; }
.duo__list li { font-size:.82rem; font-weight:600; padding:6px 12px; border-radius:var(--pill); }
.duo__card--a .duo__list li { color:var(--on-deep); background:rgba(255,255,255,.08); }
.duo__card--b .duo__list li { color:var(--ink-2); background:var(--bg-2); }
.duo__card .link { margin-top:auto; }
.codeline { animation:typeline 6s ease-in-out infinite; transform-box:fill-box; transform-origin:left; }
@keyframes typeline { 0% { transform:scaleX(0); } 30%,80% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
.cursor { animation:blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } }
@media (max-width:860px) { .duo { grid-template-columns:1fr; } }

/* ---------- Servizi (bento) ---------- */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.tile { position:relative; grid-column:span 2; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-m); overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.tile--wide { grid-column:span 3; }
.tile:hover { transform:translateY(-5px); box-shadow:var(--sh-l); }
.tile__art { height:150px; background:linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 40%, var(--surface))); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.tile--wide .tile__art { height:170px; }
.tile__art svg { position:absolute; inset:0; width:100%; height:100%; }
.tile__body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.tile h3 { margin-bottom:6px; }
.tile p { font-size:.95rem; }
.tile .link { margin-top:auto; padding-top:16px; font-size:.92rem; }
@media (max-width:960px) { .bento { grid-template-columns:repeat(2,1fr); } .tile, .tile--wide { grid-column:span 1; } .tile:last-child { grid-column:span 2; } }
@media (max-width:600px) { .bento { grid-template-columns:1fr; } .tile:last-child { grid-column:span 1; } }
/* animazioni delle illustrazioni dei servizi */
.a-load { transform-box:fill-box; transform-origin:left; animation:load 3.2s ease-in-out infinite; }
@keyframes load { 0% { transform:scaleX(.05); } 60%,100% { transform:scaleX(1); } }
.a-scroll { animation:scrolly 5s ease-in-out infinite; }
@keyframes scrolly { 0%,15% { transform:translateY(0); } 45%,60% { transform:translateY(-38px); } 90%,100% { transform:translateY(0); } }
.a-bar { transform-box:fill-box; transform-origin:bottom; animation:bar 2.8s ease-in-out infinite; }
@keyframes bar { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
.a-trace { stroke-dasharray:6 8; animation:trace 1.4s linear infinite; }
@keyframes trace { to { stroke-dashoffset:-28; } }
.a-blink { animation:blinkled 1.6s ease-in-out infinite; }
@keyframes blinkled { 50% { opacity:.25; } }
.a-draw { stroke-dasharray:300; stroke-dashoffset:300; animation:drawline 4s ease-in-out infinite; }
@keyframes drawline { 40%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-300; } }
.a-pop { transform-box:fill-box; transform-origin:center; animation:pop 4s ease-in-out infinite; }
@keyframes pop { 0%,35% { transform:scale(0); } 45%,85% { transform:scale(1); } 100% { transform:scale(0); } }

/* ---------- Prodotti (ognuno con i suoi colori) ---------- */
.products { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; }
.product { position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; }
.product:hover { transform:translateY(-6px); box-shadow:var(--sh-l); }
.product__stage { position:relative; height:250px; background:
  radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
  radial-gradient(circle at 20% 90%, color-mix(in srgb, var(--primary-2) 35%, transparent), transparent 60%),
  linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--tint) 55%, var(--primary-2))); overflow:hidden; }
.product__stage canvas { position:absolute; inset:0; width:100%; height:100%; }
.product__badge { position:absolute; left:18px; top:18px; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--pill); background:rgba(255,255,255,.85); backdrop-filter:blur(6px); box-shadow:var(--sh-s); font-size:.78rem; font-weight:700; color:var(--tdeep); }
.product__badge i { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.product__body { padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; border-top:4px solid; border-image:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent)) 1; }
.product h3 { font-size:1.5rem; margin-bottom:8px; color:var(--tdeep); }
.product p { font-size:.96rem; }
.product .link { margin-top:auto; padding-top:18px; color:var(--primary); }

/* ---------- Metodo ---------- */
.method { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-m); padding:clamp(28px,4vw,48px); }
.steps { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-top:34px; }
.steps__line { position:absolute; top:6px; left:0; right:0; height:3px; border-radius:3px; background:var(--line); }
.steps__line i { position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg,var(--primary-2),var(--accent)); transform-origin:left; transform:scaleX(var(--p,0)); transition:transform .15s linear; }
.step { position:relative; }
.step::before { content:""; position:absolute; top:-35px; left:0; width:16px; height:16px; border-radius:50%; background:var(--surface); border:3px solid var(--line); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.step.is-on::before { background:var(--accent); border-color:var(--surface); box-shadow:0 0 0 3px var(--accent), 0 4px 12px var(--glow); }
.step em { font-style:normal; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.step h3 { margin:6px 0 6px; }
.step p { font-size:.95rem; }
@media (max-width:860px) {
  .steps { grid-template-columns:1fr; padding-top:0; padding-left:36px; }
  .steps__line { top:0; bottom:0; left:6px; right:auto; width:3px; height:auto; }
  .steps__line i { transform-origin:top; transform:scaleY(var(--p,0)); }
  .step::before { top:6px; left:-36px; }
}

/* ---------- Team + tecnologie ---------- */
.team { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.team__visual { position:relative; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; aspect-ratio:4/3; }
.team__visual canvas { position:absolute; inset:0; width:100%; height:100%; }
.roles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.role { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-s); font-weight:700; font-size:.94rem; color:var(--ink); }
.role svg { width:34px; height:34px; padding:7px; border-radius:var(--r); background:var(--bg-2); color:var(--primary-2); flex:none; }
@media (max-width:860px) { .team { grid-template-columns:1fr; } }
@media (max-width:460px) { .roles { grid-template-columns:1fr; } }
.tech { overflow:hidden; display:grid; gap:12px; margin-top:64px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tech__track { display:flex; gap:10px; width:max-content; animation:marquee 50s linear infinite; padding:4px 0 8px; }
.tech__track--rev { animation-direction:reverse; animation-duration:58s; }
.tech:hover .tech__track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-s); white-space:nowrap; font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2); }
.chip i { width:6px; height:6px; background:var(--primary-2); border-radius:50%; }
.chip--a i { background:var(--accent); }

/* ---------- FAQ ---------- */
.faq-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,6vw,72px); align-items:start; }
.faq { display:grid; gap:10px; }
.faq details { background:var(--surface); border-radius:var(--r); box-shadow:var(--sh-s); transition:box-shadow .25s ease; }
.faq details[open] { box-shadow:var(--sh-m); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 20px; font-family:var(--f-head); font-weight:var(--head-w); font-size:1.04rem; color:var(--ink); }
.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); transition:background .3s ease; }
.faq summary i::before, .faq summary i::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; border-radius: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(--accent); }
.faq details[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.faq details p { padding:0 20px 20px; font-size:.97rem; }
@media (max-width:860px) { .faq-wrap { grid-template-columns:1fr; } }

/* ---------- Riquadro finale ---------- */
.finale-box { position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:24px; border-radius:calc(var(--r-lg) + 8px); padding:clamp(32px,5vw,64px); background:linear-gradient(140deg, var(--deep), color-mix(in srgb, var(--deep) 70%, var(--primary-2))); box-shadow:var(--sh-l); }
.finale-box h2 { color:var(--on-deep); font-size:clamp(2rem,4vw,3.1rem); max-width:16ch; }
.finale-box p { color:var(--deep-muted); margin-top:14px; max-width:46ch; }
.finale-box .kicker { color:var(--accent); }
.finale-box .btn--line { --b:transparent; --c:var(--on-deep); border-color:rgba(255,255,255,.25); box-shadow:none; }
.finale__dots { position:relative; height:280px; }
.finale__dots canvas { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:860px) { .finale-box { grid-template-columns:1fr; } .finale__dots { height:200px; order:-1; } }

/* ---------- Footer ---------- */
.site-footer { background:var(--deep); color:var(--deep-muted); padding:64px 0 30px; font-size:.94rem; }
.site-footer .brand b { color:var(--on-deep); }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.footer__grid p { color:var(--deep-muted); margin-top:16px; max-width:36ch; }
.site-footer h4 { font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep); margin-bottom:14px; }
.site-footer ul { list-style:none; padding:0; display:grid; gap:8px; }
.site-footer a { text-decoration:none; color:var(--deep-muted); transition:color .2s ease; }
.site-footer a:hover { color:var(--on-deep); }
.footer__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; }
@media (max-width:860px) { .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .footer__grid { grid-template-columns:1fr; } }

/* ---------- Pagine interne ---------- */
.page-head { position:relative; padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,64px); overflow:hidden; }
.page-head .container { position:relative; z-index:1; }
.page-head h1 { font-size:clamp(2.2rem,4.4vw,3.4rem); margin:16px 0 14px; max-width:20ch; }
.crumbs { font-family:var(--f-mono); font-size:.78rem; color:var(--muted); letter-spacing:.06em; }
.crumbs a { text-decoration:none; } .crumbs a:hover { color:var(--ink); }
.svc-list { display:grid; gap:20px; }
.svc { display:grid; grid-template-columns:280px 1fr; gap:clamp(24px,4vw,56px); padding:clamp(24px,3.5vw,40px); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-m); scroll-margin-top:96px; }
.svc__icon { width:52px; height:52px; display:grid; place-items:center; border-radius:var(--r); background:linear-gradient(140deg,var(--primary),var(--primary-2)); color:var(--on-primary); box-shadow:0 10px 20px -8px var(--glow); margin-bottom:16px; }
.svc__icon svg { width:24px; height:24px; }
.svc__aside h2 { font-size:clamp(1.45rem,2.3vw,1.85rem); margin-bottom:8px; }
.svc__aside p { font-size:.95rem; color:var(--muted); }
.svc__cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
.svc__cols h4 { font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.ticks { list-style:none; padding:0; display:grid; gap:8px; }
.ticks li { position:relative; padding-left:26px; color:var(--ink-2); font-size:.95rem; }
.ticks li::before { content:""; position:absolute; left:0; top:.38em; width:16px; height:16px; border-radius:50%; background:color-mix(in srgb, var(--primary-2) 16%, transparent); }
.ticks li::after { content:""; position:absolute; left:5px; top:calc(.38em + 4px); width:5px; height:8px; border:solid var(--primary-2); border-width:0 2px 2px 0; transform:rotate(45deg); }
@media (max-width:860px) { .svc { grid-template-columns:1fr; } }
@media (max-width:560px) { .svc__cols { grid-template-columns:1fr; } }

.pdetail { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(24px,3.5vw,44px); border-radius:var(--r-lg); background:linear-gradient(160deg, var(--tint), var(--surface) 70%); box-shadow:var(--sh-m); scroll-margin-top:96px; }
.pdetail + .pdetail { margin-top:22px; }
.pdetail--flip > :first-child { order:2; }
.pdetail h2 { margin:10px 0 12px; color:var(--tdeep); }
.pdetail .kicker { color:var(--primary); }
.pdetail .kicker::before { background:linear-gradient(90deg,var(--primary),var(--accent)); }
.pdetail .ticks { margin-top:18px; }
.pdetail__scene { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); aspect-ratio:4/3; overflow:hidden; --bg-2:var(--tint); --line:color-mix(in srgb, var(--primary-2) 22%, #fff); }
.pdetail__scene svg { width:100%; height:100%; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
@media (max-width:860px) { .pdetail { grid-template-columns:1fr; } .pdetail--flip > :first-child { order:0; } }

.contact-grid { display:grid; grid-template-columns:1.3fr .9fr; gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; } }
.form { display:grid; gap:16px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-l); padding:clamp(22px,4vw,38px); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px) { .field-row { grid-template-columns:1fr; } }
.field { display:grid; gap:6px; }
.field label { font-size:.86rem; font-weight:700; color:var(--ink); }
.req { color:var(--accent); }
.field input, .field select, .field textarea { width:100%; padding:13px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height:140px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--primary-2); box-shadow:0 0 0 4px var(--glow); }
.field__err { display:none; font-size:.82rem; color:#D64545; }
.field.has-error input, .field.has-error textarea { border-color:#D64545; }
.field.has-error .field__err { display:block; }
.consent { display:flex; gap:12px; align-items:flex-start; font-size:.88rem; color:var(--ink-2); }
.consent input { margin-top:5px; accent-color:var(--primary); }
.form__ok { display:none; padding:14px 16px; border-radius:var(--r); background:var(--bg-2); border-left:3px solid var(--accent); font-size:.94rem; }
.form__ok.is-visible { display:block; }
.form__note { font-size:.82rem; color:var(--muted); }
.info { display:grid; gap:10px; }
.info div { padding:16px 18px; border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-s); display:grid; gap:2px; }
.info b { font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.info a, .info span { font-size:1.04rem; font-weight:600; color:var(--ink); text-decoration:none; }
.note-card { margin-top:16px; padding:22px; border-radius:var(--r-lg); background:var(--bg-2); }
.note-card h3 { font-size:1.06rem; margin-bottom:6px; }
.note-card p { font-size:.93rem; }
.prose { max-width:780px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-m); padding:clamp(24px,4vw,48px); }
.prose h2 { font-size:1.3rem; margin:30px 0 8px; } .prose h2:first-child { margin-top:0; }

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

/* ---------- Torna su ---------- */
.to-top { position:fixed; right:18px; bottom:18px; z-index:70; width:46px; height:46px; 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; }
.to-top.is-visible { opacity:1; pointer-events:auto; }
.to-top:hover { transform:translateY(-3px); }
.to-top svg { width:18px; height:18px; }

/* scene SVG dei prodotti (pagina prodotti) */
.sun-arc { animation:sun 10s linear infinite; }
@keyframes sun { 0% { transform:translate(-120px,80px); opacity:0; } 6% { opacity:1; } 25% { transform:translate(-60px,16px); } 50% { transform:translate(0,-5px); } 75% { transform:translate(60px,16px); } 94% { opacity:1; } 100% { transform:translate(120px,80px); opacity:0; } }
.panel-tilt { transform-box:fill-box; transform-origin:50% 100%; animation:tilt 10s linear infinite; }
@keyframes tilt { 0% { transform:rotate(-38deg); } 50% { transform:rotate(0); } 94% { transform:rotate(36deg); } 100% { transform:rotate(-38deg); } }
.ray { animation:ray 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes ray { 50% { opacity:.35; transform:scale(.85); } }
.audio-curve { stroke-dasharray:420; stroke-dashoffset:420; animation:draw 5s ease-in-out infinite; }
@keyframes draw { 40%,75% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-420; } }
.eq rect { transform-box:fill-box; transform-origin:bottom; animation:eq 1.4s ease-in-out infinite; }
.eq rect:nth-child(2) { animation-delay:-.3s; } .eq rect:nth-child(3) { animation-delay:-.7s; } .eq rect:nth-child(4) { animation-delay:-.2s; }
.eq rect:nth-child(5) { animation-delay:-1s; } .eq rect:nth-child(6) { animation-delay:-.5s; } .eq rect:nth-child(7) { animation-delay:-.9s; }
@keyframes eq { 50% { transform:scaleY(.3); } }
.notif { animation:notif 6s ease-in-out infinite; opacity:0; }
.notif--2 { animation-delay:2s; } .notif--3 { animation-delay:4s; }
@keyframes notif { 0% { opacity:0; transform:translateY(-16px); } 8%,30% { opacity:1; transform:translateY(0); } 40%,100% { opacity:0; transform:translateY(10px); } }
.pulse { transform-box:fill-box; transform-origin:center; animation:pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.2); opacity:0; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
  .notif { opacity:1; }
}

/* =========================================================
   Aggiunte versione 2
   ========================================================= */
.grad { background:linear-gradient(100deg,var(--primary) 0%,var(--primary-2) 45%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav__cta .btn[aria-current="page"] { background:var(--deep); border-color:var(--deep); }

/* intestazione con animazione a destra */
.page-head--split .container { display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center; }
.head-visual { position:relative; height:280px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); overflow:hidden; }
.head-visual::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, var(--glow), transparent 70%); }
.head-visual canvas { position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:860px) { .page-head--split .container { grid-template-columns:1fr; } .head-visual { height:220px; } }
.head-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.head-chips a { display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--pill); background:var(--surface); box-shadow:var(--sh-s); font-weight:700; font-size:.9rem; color:var(--ink); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.head-chips a:hover { transform:translateY(-2px); box-shadow:var(--sh-m); }
.head-chips i { width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); }

/* riquadro tratteggiato "e molto altro" */
.more-box { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; margin-top:22px; padding:clamp(24px,3.5vw,40px); border:2px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius:var(--r-lg); background:transparent; }
.more-box__dots { position:relative; width:150px; height:130px; }
.more-box__dots canvas { position:absolute; inset:0; width:100%; height:100%; }
.more-box h2 { font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:8px; }
.more-box p { max-width:56ch; }
@media (max-width:760px) { .more-box { grid-template-columns:1fr; } }

/* badge degli store (da sostituire con i badge ufficiali, vedi README) */
.stores { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.stores img { height:44px; width:auto; border-radius:9px; box-shadow:var(--sh-s); }

/* animazione a puntini nei servizi */
.svc__dots { position:relative; height:130px; margin-bottom:16px; border-radius:var(--r); background:radial-gradient(circle at 50% 50%, var(--glow), transparent 75%), var(--bg-2); overflow:hidden; }
.svc__dots canvas { position:absolute; inset:0; width:100%; height:100%; }
.svc__body .ticks { margin-top:16px; }
.svc--sym { background:linear-gradient(140deg, var(--surface) 55%, color-mix(in srgb, var(--primary-2) 12%, var(--surface))); }

/* pagina contatti */
.contact-visual { position:relative; height:300px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-l);
  background:radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%),
             linear-gradient(150deg, var(--primary), var(--deep)); }
.contact-visual canvas { position:absolute; inset:0; width:100%; height:100%; }
.contact-visual span { position:absolute; left:20px; bottom:18px; z-index:1; padding:7px 13px; border-radius:var(--pill); background:rgba(255,255,255,.14); color:#fff; font-size:.8rem; font-weight:700; backdrop-filter:blur(6px); }
.info--big { margin-top:16px; }
.info--big div { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:4px 14px; }
.info--big svg { grid-row:span 2; width:44px; height:44px; padding:10px; border-radius:var(--r); background:linear-gradient(140deg,var(--primary),var(--primary-2)); color:#fff; }
.form { border-top:5px solid; border-image:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent)) 1; }

/* FAQ con animazione */
.faq-dots { position:relative; height:220px; margin-top:22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-m); overflow:hidden; }
.faq-dots canvas { position:absolute; inset:0; width:100%; height:100%; }

/* banner cookie */
.cookie { position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:560px; margin-left:auto; display:grid; gap:12px; padding:20px 22px; border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-l); border:1px solid var(--line); transform:translateY(20px); opacity:0; transition:opacity .3s ease, transform .3s ease; }
.cookie.is-visible { transform:none; opacity:1; }
.cookie h3 { font-size:1.02rem; }
.cookie p { font-size:.9rem; }
.cookie p a { color:var(--primary); font-weight:700; }
.cookie__btns { display:flex; flex-wrap:wrap; gap:10px; }
.cookie__btns .btn { padding:10px 18px; font-size:.9rem; }
.footer__cookie { background:none; border:0; padding:0; cursor:pointer; color:var(--deep-muted); font-size:.85rem; text-decoration:underline; }
.footer__cookie:hover { color:var(--on-deep); }
.hero h1 { font-size:clamp(2.2rem,4.3vw,3.5rem); }
.svc__dots { height:150px; }
/* banner cookie: nascosto davvero quando non visibile, a sinistra per non coprire il pulsante "torna su" */
.cookie { margin-left:0; margin-right:auto; }
.cookie[hidden] { display:none; }
.cookie:not(.is-visible) { pointer-events:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent.has-error span { color:#D64545; }
/* pagina di conferma del modulo contatti */
.grazie-box h1 { color:var(--on-deep); font-size:clamp(2.2rem,4.4vw,3.4rem); margin-top:18px; }
.grazie-ok { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); animation:pop-ok .6s cubic-bezier(.2,1.4,.4,1) both; }
.grazie-ok svg { width:32px; height:32px; }
@keyframes pop-ok { from { transform:scale(0); } to { transform:scale(1); } }