:root {
  --black: #1d1d1f;
  --gray: #6e6e73;
  --light: #f5f5f7;
  --line: #e5e5ea;
  --blue: #0071e3;
  --blue-dark: #0062c4;
  --white: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1120px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

/* BUTTONS */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  padding: 14px 26px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.05s ease;
}
.btn:hover { background: var(--blue-dark); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn-ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn-ghost:hover { background: rgba(0, 113, 227, 0.06); }
.btn-small { padding: 9px 18px; font-size: 15px; }
.btn-block { width: 100%; padding: 16px; font-size: 18px; }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--black); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 42px; width: auto; }
.brand-name { font-size: 16px; letter-spacing: 0.2px; }
.brand-code { color: var(--gray); font-weight: 400; font-size: 12px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--black); font-size: 15px; }
.nav a:hover { color: var(--blue); text-decoration: none; }
.nav a.btn { color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--black); border-radius: 2px; transition: 0.25s; }

/* HERO */
.hero { position: relative; padding: 120px 0 104px; text-align: center; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.72)); }
.hero-inner { position: relative; z-index: 1; }
.eyebrow { color: #7db8ff; font-weight: 600; font-size: 14px; letter-spacing: 0.4px; margin-bottom: 14px; text-transform: none; }
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; color: #fff; }
.lead { max-width: 660px; margin: 22px auto 0; font-size: clamp(17px, 2.4vw, 21px); color: rgba(255,255,255,0.86); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero-badges { list-style: none; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 34px; color: rgba(255,255,255,0.82); font-size: 15px; }
.btn-ghost-light { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); text-decoration: none; }

/* SECTIONS */
.section { padding: 84px 0; }
.section-alt { background: var(--light); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head h2 { font-size: clamp(28px, 4.5vw, 42px); letter-spacing: -0.02em; font-weight: 700; }
.section-head p { margin-top: 14px; color: var(--gray); font-size: 19px; }

/* GRID */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-icon { font-size: 34px; margin-bottom: 14px; }
.card h3 { font-size: 21px; margin-bottom: 8px; }
.card p { color: var(--gray); font-size: 15px; }

.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { color: var(--gray); font-size: 15px; }

/* STEPS */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 600; font-size: 18px; margin-bottom: 16px;
}
.steps h3 { font-size: 18px; margin-bottom: 6px; }
.steps p { color: var(--gray); font-size: 15px; }

/* FORM */
.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; display: flex; flex-direction: column; }
.field label { font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--black); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.field textarea { resize: vertical; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gray); margin-bottom: 22px; cursor: pointer; }
.checkbox input { margin-top: 3px; }
.form-note { margin-top: 16px; text-align: center; font-size: 15px; min-height: 22px; }
.form-note.ok { color: #1d8a3a; }
.form-note.err { color: #d70015; }
input.invalid, select.invalid, textarea.invalid { border-color: #d70015; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* CONTATTI */
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-card h3 { font-size: 18px; margin-bottom: 10px; }
.contact-card p { color: var(--gray); }
.contact-card a { color: var(--blue); }

/* FOOTER */
.site-footer { background: var(--black); color: #d2d2d7; padding: 48px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-code { color: #86868b; }
.footer-small { font-size: 12px; color: #86868b; margin-top: 8px; line-height: 1.6; max-width: 560px; }

/* SERVICE CARDS WITH PHOTO */
.card.service { padding: 0; overflow: hidden; }
.card-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--light); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.card.service:hover .card-photo img { transform: scale(1.05); }
.card-body { padding: 22px 24px 26px; }
.card-body h3 { font-size: 20px; margin-bottom: 6px; }
.card-body p { color: var(--gray); font-size: 15px; }

/* SPLIT (immagine + testo) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.split-text h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.muted { color: var(--gray); font-size: 18px; margin: 12px 0 24px; }
.check-list { list-style: none; margin-bottom: 28px; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--gray); font-size: 16px; }
.check-list li strong { color: var(--black); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }
.contact-list p { margin-bottom: 16px; color: var(--gray); }
.contact-list strong { color: var(--black); }

/* VETRINA PRODOTTI */
.product { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product .card-photo { aspect-ratio: 16 / 10; }
.product-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.product-body h3 { font-size: 18px; margin-bottom: 4px; }
.product-cat { font-size: 12px; color: var(--blue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.product-body p { color: var(--gray); font-size: 14px; margin-bottom: 14px; }
.product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.product-price { font-size: 19px; font-weight: 600; }
.vetrina-note { text-align: center; color: var(--gray); font-size: 14px; margin-top: 28px; }

/* RISORSE */
.resource { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; color: var(--black); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue); text-decoration: none; }
.resource h3 { font-size: 18px; margin-bottom: 8px; }
.resource p { color: var(--gray); font-size: 14px; margin-bottom: 14px; }
.resource-link { color: var(--blue); font-weight: 500; font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-media { order: -1; }
}
@media (max-width: 760px) {
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line); padding: 8px 24px 20px;
    transform: translateY(-120%); transition: transform 0.28s ease; visibility: hidden;
  }
  .nav.open { transform: translateY(0); visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a.btn { margin-top: 12px; text-align: center; border-bottom: none; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 560px) {
  .grid-4, .grid-3, .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form { padding: 24px; }
  .hero { padding: 60px 0 50px; }
  .section { padding: 60px 0; }
}

/* ===== POLISH & ANIMAZIONI ===== */
.opt { color: var(--gray); font-weight: 400; font-size: 12px; }

/* Header: ombra allo scroll */
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,0.07); }

/* Hero: entrata morbida + lento zoom dello sfondo */
.hero-inner > * { animation: heroIn 0.7s ease both; }
.hero-inner > *:nth-child(2){ animation-delay:.08s }
.hero-inner > *:nth-child(3){ animation-delay:.16s }
.hero-inner > *:nth-child(4){ animation-delay:.24s }
.hero-inner > *:nth-child(5){ animation-delay:.32s }
@keyframes heroIn { from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
.hero-bg { animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from{ transform:scale(1.14) } to{ transform:scale(1.03) } }

/* Reveal allo scroll (attivo solo con JS) */
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal { transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Bottoni: micro-interazioni */
.btn { box-shadow: 0 8px 20px rgba(0,113,227,0.28); }
.btn-ghost, .btn-ghost-light { box-shadow: none; }
.btn:active { transform: translateY(1px) scale(.99); }

/* Overlay di conferma invio */
.success-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,20,25,0.55); backdrop-filter: blur(6px);
  padding: 24px; opacity: 0; transition: opacity .25s ease;
}
.success-overlay.show { display: flex; opacity: 1; }
.success-card {
  background: #fff; border-radius: 24px; padding: 42px 36px; text-align: center;
  max-width: 420px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.32);
  transform: translateY(14px) scale(.95); opacity: 0;
}
.success-overlay.show .success-card { animation: cardIn .38s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cardIn { to { transform: none; opacity: 1; } }
.success-card h3 { font-size: 24px; margin: 20px 0 8px; }
.success-card p { color: var(--gray); margin-bottom: 24px; }

/* Animazione: lettera che fluttua + badge con il tic */
.success-anim { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.env { width: 100px; height: 100px; }
.env-body { fill: #eef4ff; stroke: var(--blue); stroke-width: 3; }
.env-flap { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.success-overlay.show .env { animation: envFloat 2.6s ease-in-out .6s infinite; }
.success-overlay.show .env-flap { animation: drawFlap .5s ease forwards .15s; }
@keyframes drawFlap { to { stroke-dashoffset: 0; } }
@keyframes envFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
.check-badge { position: absolute; right: -4px; bottom: -4px; width: 46px; height: 46px; transform: scale(0); }
.success-overlay.show .check-badge { animation: badgePop .42s cubic-bezier(.2,.9,.3,1.4) forwards .5s; }
@keyframes badgePop { to { transform: scale(1); } }
.cb-ring { fill: #1d8a3a; }
.cb-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 42; stroke-dashoffset: 42; }
.success-overlay.show .cb-tick { animation: drawTick .35s ease forwards .78s; }
@keyframes drawTick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .hero-bg, .reveal, .env, .env-flap, .check-badge, .cb-tick {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
  }
}

/* ===== RISOLUZIONE GUIDATA (WIZARD) ===== */
.wizard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.wiz-step-label { font-size: 13px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.wiz-q { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 22px; }
.wiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.wiz-option { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 14px; font: inherit; font-size: 15px; font-weight: 500; color: var(--black);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wiz-option:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow); }
.wiz-option .emoji { font-size: 30px; }
.wiz-problems { display: grid; gap: 10px; }
.wiz-problem { text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 18px; font: inherit; font-size: 16px; color: var(--black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: border-color .15s ease, background .15s ease; }
.wiz-problem:hover { border-color: var(--blue); background: rgba(0,113,227,0.04); }
.wiz-problem::after { content: "→"; color: var(--blue); font-weight: 700; }
.wiz-tips { list-style: none; counter-reset: tip; margin: 4px 0 24px; }
.wiz-tip { position: relative; padding: 14px 16px 14px 52px; background: var(--light); border-radius: var(--radius-sm); margin-bottom: 10px; color: var(--black); font-size: 15px; line-height: 1.55; }
.wiz-tip::before { counter-increment: tip; content: counter(tip); position: absolute; left: 14px; top: 13px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.wiz-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wiz-back { background: none; border: none; color: var(--gray); font: inherit; font-size: 15px; cursor: pointer; padding: 8px 0; }
.wiz-back:hover { color: var(--black); }
.btn-ok { background: #1d8a3a; }
.btn-ok:hover { background: #176e2e; }
.wiz-done { text-align: center; padding: 16px 0; }
.wiz-done .big { font-size: 40px; }
.wiz-done h3 { font-size: 22px; margin: 8px 0 6px; }
.wiz-done p { color: var(--gray); margin-bottom: 18px; }

/* ===== FAQ ACCORDION ===== */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 20px 22px; font-size: 17px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .15s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--blue); transition: transform .2s ease; line-height: 1; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--blue); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { color: var(--gray); font-size: 15px; line-height: 1.6; }
.faq-body strong { color: var(--black); }

/* Link guida ufficiale Apple nel wizard */
.wiz-applelink { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 22px;
  padding: 10px 14px; background: var(--light); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--blue); }
.wiz-applelink:hover { background: rgba(0,113,227,0.08); text-decoration: none; }

/* ===== FASCE FOTOGRAFICHE ===== */
.photo-band { position: relative; padding: 110px 0; text-align: center; color: #fff; overflow: hidden; background: #1d1d1f; }
.photo-band .pb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.photo-band .pb-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.68)); }
.photo-band .container { position: relative; z-index: 1; }
.photo-band h2 { color: #fff; font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.02em; font-weight: 700; }
.photo-band p { color: rgba(255,255,255,0.86); font-size: 19px; margin: 14px auto 0; max-width: 640px; }
.photo-band .btn { margin-top: 28px; }
@media (max-width: 560px) { .photo-band { padding: 72px 0; } }


/* ===== DARK MODE AUTOMATICA (segue il dispositivo) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --black: #f5f5f7;
    --gray: #a1a1a6;
    --light: #161617;
    --line: #2a2a2c;
    --white: #1c1c1e;
    --blue: #2997ff;
    --blue-dark: #0a84ff;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  }
  body { background: #000000; }
  .site-header { background: rgba(0, 0, 0, 0.7); }
  .site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, 0.5); }
  .site-footer { background: #000000; }
  .site-footer .brand-name { color: #f5f5f7; }
  .success-card { background: #1c1c1e; }
  .nav.open { background: rgba(10, 10, 12, 0.98); }
}


/* ===== RIFINITURE ESTETICHE ===== */
.btn:not(.btn-ghost):not(.btn-ghost-light):not(.btn-ok) {
  background-image: linear-gradient(180deg, var(--blue), var(--blue-dark));
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(1100px 560px at 50% -8%, rgba(41, 151, 255, 0.12), transparent 60%),
      radial-gradient(820px 480px at 92% 4%, rgba(150, 110, 255, 0.08), transparent 55%),
      #000000;
    background-attachment: fixed;
  }
  .section-alt { background: #0b0b0d; }
  .card, .product, .resource, .faq-item, .wizard, .form, .contact-card,
  .steps li, .wiz-option, .wiz-problem {
    background-image: linear-gradient(180deg, #1e1e22, #161619);
    border-color: #2c2c30;
  }
  .card:hover, .product:hover, .resource:hover, .wiz-option:hover {
    border-color: rgba(41, 151, 255, 0.55);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(41, 151, 255, 0.18), 0 0 30px rgba(41, 151, 255, 0.10);
  }
  .field input, .field select, .field textarea { background: #141417; }
  .btn:not(.btn-ghost):not(.btn-ghost-light):not(.btn-ok) {
    background-image: linear-gradient(180deg, #2da3ff, #0a84ff);
    box-shadow: 0 10px 28px rgba(10, 132, 255, 0.40);
  }
  .step-num { box-shadow: 0 0 22px rgba(41, 151, 255, 0.35); }
  .product-cat, .wiz-step-label, .faq-item summary::after { color: #5fb0ff; }
}


/* ===== SCROLLY: MAC CHE SI APRE -> DENTRO LA SCHEDA ===== */
.scrolly { position: relative; height: 260vh; background: #000; }
.scrolly-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; perspective: 1600px; }
.chip-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(2.3); will-change: transform, opacity; }
.scrolly-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 38%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.9) 100%); }
.mac { position: relative; z-index: 2; width: min(540px, 80vw); transform-style: preserve-3d; will-change: transform, opacity; }
.mac-lid { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px 16px 5px 5px; background: #1a1a1c; border: 2px solid #313135; border-bottom: none; transform-origin: 50% 100%; transform: rotateX(-92deg); box-shadow: 0 30px 70px rgba(0,0,0,0.6); will-change: transform; }
.mac-screen { position: absolute; inset: 9px; border-radius: 8px; overflow: hidden; background: radial-gradient(130% 130% at 50% 25%, #1d4a72, #05080c 72%); display: grid; place-items: center; box-shadow: inset 0 0 50px rgba(0,0,0,0.65); }
.mac-wall { width: 100%; height: 100%; object-fit: cover; display: block; }
.mac-base { position: relative; width: 113%; left: -6.5%; height: 15px; margin-top: -1px; background: linear-gradient(180deg, #dadadd 0%, #b6b6ba 55%, #97979c 100%); border-radius: 4px 4px 11px 11px; box-shadow: 0 22px 34px rgba(0,0,0,0.55); }
.mac-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 6px; background: #8c8c91; border-radius: 0 0 7px 7px; }
.scrolly-caption { position: absolute; z-index: 4; max-width: 660px; text-align: center; padding: 0 24px; opacity: 0; transform: translateY(26px); will-change: opacity, transform; color: #fff; }
.scrolly-caption h2 { color: #fff; font-size: clamp(28px, 5vw, 50px); letter-spacing: -0.02em; font-weight: 700; margin-top: 6px; }
.scrolly-caption p { color: rgba(255,255,255,0.86); font-size: clamp(16px, 2.2vw, 20px); margin: 14px auto 0; }
.scrolly-caption .btn { margin-top: 28px; }
.scrolly-hint { position: absolute; z-index: 4; bottom: 30px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 1px; animation: hintBob 1.8s ease-in-out infinite; }
@keyframes hintBob { 0%,100%{ transform: translate(-50%,0) } 50%{ transform: translate(-50%,6px) } }
@media (prefers-reduced-motion: reduce) {
  .scrolly { height: auto; }
  .scrolly-sticky { position: static; height: auto; padding: 96px 0; perspective: none; }
  .mac, .scrolly-hint { display: none; }
  .chip-bg { opacity: 0.45; transform: none; }
  .scrolly-caption { opacity: 1; transform: none; position: relative; margin: 0 auto; }
}


/* ===== AURORA ANIMATA (sfondo riutilizzabile) ===== */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #05060c; }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.aurora i.b1 { width: 46vw; height: 46vw; left: -8%; top: -20%; background: #2b6bff; animation: au1 20s ease-in-out infinite; }
.aurora i.b2 { width: 42vw; height: 42vw; right: -10%; top: -4%; background: #7b3bff; animation: au2 26s ease-in-out infinite; }
.aurora i.b3 { width: 40vw; height: 40vw; left: 24%; bottom: -24%; background: #12b6ff; animation: au3 30s ease-in-out infinite; }
.aurora i.b4 { width: 30vw; height: 30vw; right: 14%; bottom: -12%; background: #b455ff; animation: au2 24s ease-in-out infinite reverse; }
@keyframes au1 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(18%,12%) scale(1.18) } }
@keyframes au2 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(-15%,14%) scale(1.12) } }
@keyframes au3 { 0%,100%{ transform: translate(0,0) scale(1) } 50%{ transform: translate(10%,-12%) scale(1.22) } }

/* ===== MOCKUP DISPOSITIVI ===== */
.dev { position: relative; flex: none; }
.dev .scr { position: absolute; overflow: hidden; }
.dev .scr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-phone { width: 200px; aspect-ratio: 9 / 19.5; border-radius: 34px; background: #0b0b0d; border: 3px solid #303035; box-shadow: 0 36px 70px rgba(0,0,0,0.55); }
.dev-phone .scr { inset: 6px; border-radius: 28px; }
.dev-phone::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 78px; height: 22px; background: #000; border-radius: 12px; z-index: 2; }
.dev-tablet { width: 300px; aspect-ratio: 3 / 4; border-radius: 28px; background: #0b0b0d; border: 9px solid #232327; box-shadow: 0 36px 70px rgba(0,0,0,0.55); }
.dev-tablet .scr { inset: 0; border-radius: 18px; }

/* ===== SEZIONE ECOSISTEMA ===== */
.eco { position: relative; overflow: hidden; color: #fff; padding: 110px 0; }
.eco .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.eco-stage { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.eco-stage .dev-tablet { position: relative; z-index: 1; animation: floatA 7s ease-in-out infinite; }
.eco-stage .dev-phone { position: absolute; right: 8%; bottom: 6%; z-index: 2; animation: floatB 6s ease-in-out infinite; }
@keyframes floatA { 0%,100%{ transform: translateY(0) rotate(-3deg) } 50%{ transform: translateY(-16px) rotate(-1deg) } }
@keyframes floatB { 0%,100%{ transform: translateY(0) rotate(6deg) } 50%{ transform: translateY(-22px) rotate(4deg) } }
.eco-text h2 { color: #fff; font-size: clamp(28px, 4.5vw, 46px); letter-spacing: -0.02em; font-weight: 700; }
.eco-text p { color: rgba(255,255,255,0.85); font-size: clamp(16px, 2.2vw, 20px); margin: 16px 0 26px; }
.eco-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.eco-badges li { font-size: 14px; padding: 7px 14px; border-radius: 980px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }

@media (max-width: 860px) {
  .eco .container { grid-template-columns: 1fr; text-align: center; }
  .eco-stage { min-height: 380px; }
  .eco-text .eco-badges { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .eco-stage .dev-tablet, .eco-stage .dev-phone { animation: none !important; }
}

/* overlay scuro sull'aurora dell'hero per leggibilita testo */
.hero-aurora::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,12,0.28), rgba(5,6,12,0.66)); }

/* ===== MOCKUP AGGIUNTIVI: MacBook, Apple Watch, AirPods ===== */
.dev-mac { width: 400px; max-width: 78vw; }
.dev-mac .lid { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; background: #0b0b0d; border: 11px solid #232327; border-bottom-width: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.dev-mac .lid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-mac .base { position: relative; width: 116%; height: 13px; margin: -2px 0 0 -8%; background: linear-gradient(#d4d5d8, #9a9ba0); border-radius: 0 0 13px 13px; box-shadow: 0 12px 22px rgba(0,0,0,0.4); }
.dev-mac .base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 6px; background: #75767b; border-radius: 0 0 9px 9px; }

.dev-watch { position: relative; width: 158px; }
.dev-watch .case { position: relative; width: 158px; height: 188px; border-radius: 46px; background: #0b0b0d; border: 6px solid #2a2a2c; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.5); z-index: 1; }
.dev-watch .case img { position: absolute; inset: 13px; width: calc(100% - 26px); height: calc(100% - 26px); border-radius: 32px; object-fit: cover; }
.dev-watch .crown { position: absolute; right: -8px; top: 64px; width: 9px; height: 34px; background: #3a3a3c; border-radius: 4px; z-index: 2; }
.dev-watch::before, .dev-watch::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 104px; background: linear-gradient(#3a3a3c, #1c1c1e); z-index: 0; }
.dev-watch::before { top: -46px; height: 60px; border-radius: 16px 16px 6px 6px; }
.dev-watch::after { bottom: -46px; height: 60px; border-radius: 6px 6px 16px 16px; }

.dev-pods { position: relative; width: 178px; height: 224px; }
.dev-pods .bud { position: absolute; top: 8px; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.dev-pods .bud.l { left: 30px; transform: rotate(-4deg); }
.dev-pods .bud.r { right: 30px; transform: rotate(4deg); }
.dev-pods .bud .head { width: 46px; height: 52px; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: radial-gradient(120% 90% at 35% 25%, #ffffff, #e4e4ea 80%); box-shadow: 0 12px 22px rgba(0,0,0,0.18); }
.dev-pods .bud .stem { width: 18px; height: 70px; margin-top: -10px; border-radius: 9px; background: linear-gradient(90deg, #e6e6ec, #ffffff 45%, #dedee5); box-shadow: 0 8px 16px rgba(0,0,0,0.12); }
.dev-pods .case { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 146px; height: 118px; border-radius: 18px 18px 32px 32px; background: linear-gradient(160deg, #fbfbfd, #e2e2e8); box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.7); z-index: 2; }
.dev-pods .case::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 120px; height: 24px; border-radius: 50%; background: linear-gradient(#cfcfd6, #ededf2); box-shadow: inset 0 4px 9px rgba(0,0,0,0.22); }
.dev-pods .led { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #34c759; box-shadow: 0 0 12px #34c759; z-index: 3; }

/* ===== SHOWCASE A SCORRIMENTO (passa da un prodotto all'altro) ===== */
.showcase { position: relative; height: 560vh; background: #05060c; }
.showcase-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.show-item { position: absolute; top: 50%; left: 50%; width: min(1080px, 92vw); transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; color: #fff; will-change: transform, opacity; }
.show-stage { display: flex; align-items: center; justify-content: center; min-height: 420px; }
.show-cap h3 { color: #fff; font-size: clamp(30px, 5vw, 56px); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 14px; }
.show-cap p { color: rgba(255,255,255,0.82); font-size: clamp(16px, 2.2vw, 21px); line-height: 1.5; margin: 0 0 26px; max-width: 30ch; }
.show-kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6cb4ff; margin-bottom: 14px; }
.show-dots { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); display: flex; gap: 11px; z-index: 200; }
.show-dots b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.28); transition: background 0.25s, transform 0.25s; }
.show-dots b.on { background: #fff; transform: scale(1.35); }
.show-hint { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 13px; z-index: 200; letter-spacing: 0.04em; }
@media (max-width: 820px) {
  .show-item { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .show-cap p { margin-left: auto; margin-right: auto; }
  .show-stage { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase { height: auto; }
  .showcase-sticky { position: relative; height: auto; flex-direction: column; gap: 80px; padding: 80px 0; }
  .show-item { position: relative; top: auto; left: auto; transform: none; opacity: 1 !important; }
  .show-hint { display: none; }
}

/* ===== CARRELLO ===== */
.btn-add { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(180deg, #2b8bff, #0a66e0); padding: 9px 16px; border-radius: 980px; box-shadow: 0 6px 16px rgba(10,102,224,0.32); transition: transform 0.15s, box-shadow 0.15s; }
.btn-add:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10,102,224,0.42); }
.btn-add:active { transform: translateY(0); }

.cart-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1200; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(180deg, #2b8bff, #0a66e0); color: #fff; box-shadow: 0 14px 30px rgba(10,102,224,0.45); display: flex; align-items: center; justify-content: center; transition: transform 0.18s; }
.cart-fab:hover { transform: scale(1.06); }
.cart-fab svg { width: 26px; height: 26px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

.cart-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.cart-drawer { position: fixed; top: 0; right: 0; z-index: 1400; width: min(420px, 92vw); height: 100%; background: #fff; color: #1d1d1f; box-shadow: -20px 0 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.cart-head h3 { margin: 0; font-size: 20px; font-weight: 700; }
.cart-close { border: 0; background: rgba(0,0,0,0.05); width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #1d1d1f; }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: #86868b; padding: 40px 22px; line-height: 1.6; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.cart-row-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-row-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #6cb4ff; font-weight: 600; }
.cart-row-info strong { font-size: 15px; font-weight: 600; }
.cart-row-price { font-size: 13px; color: #86868b; }
.cart-qty { display: flex; align-items: center; gap: 6px; }
.qbtn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.12); background: #f5f5f7; cursor: pointer; font-size: 16px; line-height: 1; color: #1d1d1f; display: flex; align-items: center; justify-content: center; }
.qbtn:hover { background: #ececef; }
.cart-qty span { min-width: 20px; text-align: center; font-weight: 600; font-size: 14px; }
.qbtn.qrm { margin-left: 4px; color: #ff3b30; border-color: rgba(255,59,48,0.3); }
.cart-foot { padding: 18px 22px 22px; border-top: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.015); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 15px; }
.cart-total strong { font-size: 22px; font-weight: 700; }
.cart-form { display: flex; flex-direction: column; gap: 9px; }
.cart-form input, .cart-form textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(0,0,0,0.16); background: #fff; color: #1d1d1f; font: inherit; font-size: 14px; }
.cart-form input.invalid, .cart-form textarea.invalid { border-color: #ff3b30; }
.cart-form textarea { resize: vertical; }
.cart-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cart-note { font-size: 12px; color: #86868b; line-height: 1.45; margin: 2px 0 4px; }
.cart-submit { width: 100%; text-align: center; }
.cart-form .form-note { font-size: 13px; margin: 4px 0 0; }
.cart-form .form-note.ok { color: #1a8f3c; }
.cart-form .form-note.err { color: #d4291f; }

@media (prefers-color-scheme: dark) {
  .cart-drawer { background: #1c1c1e; color: #f5f5f7; box-shadow: -20px 0 50px rgba(0,0,0,0.6); }
  .cart-head { border-color: rgba(255,255,255,0.1); }
  .cart-close { background: rgba(255,255,255,0.1); color: #f5f5f7; }
  .cart-row { border-color: rgba(255,255,255,0.09); }
  .qbtn { background: #2c2c2e; border-color: rgba(255,255,255,0.14); color: #f5f5f7; }
  .qbtn:hover { background: #3a3a3c; }
  .cart-foot { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
  .cart-form input, .cart-form textarea { background: #2c2c2e; border-color: rgba(255,255,255,0.16); color: #f5f5f7; }
  .cart-row-price, .cart-empty, .cart-note { color: #98989d; }
  .cart-form .form-note.ok { color: #34c759; }
  .cart-form .form-note.err { color: #ff6961; }
}

/* fix: l'attributo hidden deve avere la precedenza sui display delle classi carrello */
.cart-count[hidden], .cart-empty[hidden], .cart-foot[hidden] { display: none !important; }