/* ============================================================
   Nexo Agency — styles
   Design: Editorial Tech / Local Studio
   Tipografia: Newsreader (display) + DM Sans (testo e dati)
   ============================================================ */

:root{
  /* ---- font ----
     Due famiglie: Newsreader per i titoli, DM Sans per tutto il resto.
     --font-data è il ruolo "etichette e numeri": usa DM Sans con le
     cifre tabulari (vedi .num-tabular più sotto). Niente monospace:
     lo zero col puntino al centro era illeggibile nei numeri grandi.
     Per cambiare coppia si toccano queste righe più il <link> dei
     Google Fonts in index.html e grazie.html. */
  --font-display:'Newsreader',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-data:'DM Sans',system-ui,sans-serif;

  /* surfaces */
  --paper:#f4f7fc;
  --card:#ffffff;

  /* ink */
  --ink:#0b1526;
  --ink-soft:#556579;   /* 5.9:1 su --paper */
  --ink-faint:#5f6f83;  /* 4.8:1 su --paper — il precedente #8a99ab era 2.9:1, sotto AA */

  /* brand blue */
  --blue:#2f5fe0;
  --blue-deep:#12296b;
  --blue-bright:#4d8dff;
  --blue-wash:rgba(47,95,224,0.07);

  /* accento dati — era ambra, ora resta dentro la famiglia del blu:
     i numeri prendono peso dal corpo e dalla dimensione, non dal colore */
  --accent:var(--blue);
  --accent-on-dark:#7fb0ff;   /* 6.1:1 su --blue-deep */

  /* lines */
  --rule:rgba(11,21,38,0.11);
  --rule-soft:rgba(11,21,38,0.06);

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(11,21,38,0.04), 0 4px 14px rgba(18,41,107,0.05);
  --shadow-md:0 2px 4px rgba(11,21,38,0.04), 0 14px 40px rgba(18,41,107,0.10);
  --shadow-lg:0 30px 70px rgba(18,41,107,0.16), 0 4px 12px rgba(18,41,107,0.08);

  /* section rhythm — one number, overridden only where a section
     sits flush against the next (hero, about, contact) */
  --pad:84px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; }

:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 10px;
  font-size:.88rem; font-weight:600; text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{ top:0; }

/* ---------- display type ---------- */
h1,h2,h3{ font-weight:600; letter-spacing:-0.015em; line-height:1.15; }
h1,
.section-head h2,
.contact-copy h2{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.02em;
}
h1 em,
.section-head h2 em,
.contact-copy h2 em{
  font-style:italic; font-weight:500; color:var(--blue);
}

/* ---------- utility ---------- */
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 28px; }
section{ padding-block:var(--pad); }

.kicker{
  font-family:var(--font-data);
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}

/* cifre tabulari ovunque ci siano numeri: stessa larghezza per ogni
   cifra, così le colonne si allineano e i valori non "ballano" */
.promise dt,
.metrics dt,
.service-price,
.step-n,
.serp-pos{ font-variant-numeric:tabular-nums; }

.section-head{ max-width:660px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); }
.section-sub{ color:var(--ink-soft); font-size:1rem; margin-top:16px; max-width:52ch; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.98rem; line-height:1;
  padding:16px 28px; border-radius:999px;
  text-decoration:none; white-space:nowrap;
  position:relative;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--blue) 0%, #204ec4 100%);
  color:#fff;
  box-shadow:0 8px 24px -4px rgba(47,95,224,0.36);
}
.btn-primary:hover{
  background:linear-gradient(135deg, var(--blue-deep) 0%, #153892 100%);
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 14px 32px -4px rgba(47,95,224,0.46), 0 0 20px rgba(95,212,255,0.3);
}
.btn-ghost{
  background:var(--card); color:var(--blue-deep);
  border:1px solid var(--rule); box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{
  border-color:rgba(47,95,224,0.4);
  color:var(--blue);
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-md);
}
.btn-sm{ padding:11px 20px; font-size:.86rem; }
.btn-block{ width:100%; padding-block:18px; }

/* CTA Button & Kicker Glow */
.cta-kicker-pulse{
  display:inline-flex; align-items:center; gap:8px;
}
.cta-kicker-pulse .pulse-dot{
  width:7px; height:7px; border-radius:50%; background:#28b45a;
  box-shadow:0 0 0 0 rgba(40, 180, 90, 0.7);
  animation:ctaDotPulse 2s infinite;
}
@keyframes ctaDotPulse{
  0%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(40, 180, 90, 0.7); }
  70%{ transform:scale(1); box-shadow:0 0 0 7px rgba(40, 180, 90, 0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(40, 180, 90, 0); }
}
.btn-cta-glow{
  box-shadow:0 10px 28px -4px rgba(47, 95, 224, 0.42), 0 0 20px rgba(95, 212, 255, 0.22);
}
.btn-cta-glow .btn-arrow{
  display:inline-block;
  transition:transform .25s ease;
}
.btn-cta-glow:hover .btn-arrow{
  transform:translateX(4px);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn:hover{ transform:none; }
  .cta-kicker-pulse .pulse-dot{ animation:none; }
  .btn-cta-glow:hover .btn-arrow{ transform:none; }
}

/* ---------- background ---------- */
.bg-scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:linear-gradient(180deg,#eaf1fe 0%, var(--paper) 46%, #fbfcfe 100%);
  pointer-events:none;
}
.blob{
  position:absolute; border-radius:50%; filter:blur(90px);
  will-change:transform;
  transition:transform 0.18s ease-out;
}
.blob-1{
  width:620px; height:620px; top:-260px; left:-180px; opacity:.5;
  background:radial-gradient(circle,var(--blue-bright),transparent 70%);
}
.blob-2{
  width:520px; height:520px; top:14%; right:-220px; opacity:.34;
  background:radial-gradient(circle,#5fd4ff,transparent 70%);
}

/* ============ HEADER ============ */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(244,247,252,0.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule-soft);
}
.head-inner{
  max-width:1160px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; gap:24px;
}
.logo{
  font-weight:700; font-size:1.06rem; letter-spacing:-0.02em;
  display:inline-flex; align-items:center; gap:0;
  text-decoration:none; flex-shrink:0;
}
/* niente gap qui: "nexo" e <span>agency</span> sono due flex item e il gap
   li separava con uno spazio visibile — il wordmark deve leggersi unito */
.logo span{ color:var(--blue); }
.logo-mark{
  width:26px; height:26px; border-radius:8px; flex-shrink:0; margin-right:9px;
  background:var(--blue) url("images/logo-mark.png") center/cover no-repeat;
  box-shadow:0 2px 6px rgba(21,63,168,0.26);
}
.nav-links{ margin-left:auto; font-size:.92rem; font-weight:500; color:var(--ink-soft); }
.nav-links-inner{ display:flex; gap:30px; }
.nav-links a{ text-decoration:none; padding-block:4px; transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink); }
.head-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }

.nav-toggle{ display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--rule); background:var(--card); }
.nav-toggle span{ display:block; width:17px; height:1.8px; margin:3.6px auto; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.4px) rotate(-45deg); }

@media (max-width:880px){
  .nav-toggle{ display:block; }
  /* logo e azioni devono stare su una riga sola: stringi padding e gap,
     altrimenti a 390px il totale sfora e la barra va a capo */
  .head-inner{ flex-wrap:wrap; gap:12px; padding-inline:20px; }
  /* apertura animata con grid-template-rows invece che con max-height:
     non serve un'altezza fissa da indovinare (il menu si adatta al numero
     di voci) e il browser non ricalcola il layout a ogni frame */
  .nav-links{
    order:3; width:100%; margin-left:0;
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .28s ease;
  }
  .nav-links.open{ grid-template-rows:1fr; }
  .nav-links-inner{ flex-direction:column; gap:0; min-height:0; overflow:hidden; }
  .nav-links a{ padding:15px 2px; border-top:1px solid var(--rule-soft); font-size:1rem; }
  .head-actions{ margin-left:auto; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
}
@media (max-width:430px){
  .head-actions .btn-sm{ padding:11px 13px; font-size:.79rem; }
  .logo{ font-size:.98rem; }
}

/* ============ HERO ============ */
.hero{ --pad:0; padding-top:72px; padding-bottom:88px; }
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  align-items:center; gap:60px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-data); font-size:.73rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep);
  background:var(--blue-wash); border:1px solid rgba(47,95,224,0.18);
  padding:8px 16px; border-radius:999px; margin-bottom:26px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-bright); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media (prefers-reduced-motion:reduce){ .eyebrow .dot{ animation:none; } }

/* le interruzioni di riga sono volute (<br> nel markup):
   tre righe brevi, con "in 30." isolata come chiusa */
.hero h1{ font-size:clamp(2.1rem,4.3vw,3.25rem); margin-bottom:26px; }
.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin-bottom:34px; }
.lede strong{ color:var(--ink); font-weight:600; }
.hero-ctas{ display:flex; gap:13px; flex-wrap:wrap; }

.hero-visual{ position:relative; }

/* ============ HOLOGRAPHIC HERO VISUAL ============ */
.holo-stack{
  position:relative; width:100%; max-width:620px; margin:0 auto;
  perspective:1200px;
}
.holo-card{
  border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, rgba(18,41,107,0.7), rgba(47,95,224,0.45));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 22px 45px -10px rgba(18,41,107,0.32), 0 0 35px rgba(77,141,255,0.18);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.holo-card img{ display:block; width:100%; height:auto; object-fit:cover; }

.holo-main{
  transform:rotateY(-3deg) rotateX(2deg) rotateZ(-0.8deg);
  position:relative; z-index:1;
}
.holo-main:hover{
  transform:rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:0 28px 55px -10px rgba(18,41,107,0.4), 0 0 45px rgba(77,141,255,0.28);
}

.holo-sub{
  position:absolute; bottom:-28px; right:-20px; width:54%;
  z-index:2;
  border:1px solid rgba(255,255,255,0.32);
  box-shadow:0 18px 40px -8px rgba(18,41,107,0.38), 0 0 30px rgba(95,212,255,0.25);
  transform:rotateY(-1deg) rotateX(3deg) translateY(0);
}
.holo-sub:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 24px 48px -8px rgba(18,41,107,0.45), 0 0 40px rgba(95,212,255,0.35);
}

@media (max-width:880px){
  .holo-stack{ max-width:520px; }
  .holo-sub{ bottom:-20px; right:-12px; width:52%; }
}
@media (max-width:560px){
  .holo-stack{ max-width:100%; margin-bottom:18px; }
  .holo-main{ transform:none; }
  .holo-sub{ bottom:-16px; right:-6px; width:56%; }
}

.device{
  border-radius:13px; overflow:hidden; background:var(--card);
  border:1px solid var(--rule-soft); box-shadow:var(--shadow-lg);
}
.hero-visual .device{ transform:rotate(-1.4deg); }
.device-cap{
  font-family:var(--font-data); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-faint); text-align:right; margin-top:36px;
}

.browser-bar{
  display:flex; align-items:center; gap:11px;
  padding:9px 13px; background:#eef2f8; border-bottom:1px solid var(--rule-soft);
}
.browser-dots{ display:flex; gap:6px; flex-shrink:0; }
.browser-dots i{ width:8px; height:8px; border-radius:50%; }
.browser-dots i:nth-child(1){ background:#f0625a; }
.browser-dots i:nth-child(2){ background:#f5bd4f; }
.browser-dots i:nth-child(3){ background:#4bc45f; }
.browser-url{
  flex:1;
  font-family:var(--font-data); font-size:.68rem; letter-spacing:.01em;
  color:var(--ink-soft); background:#fff; border:1px solid var(--rule-soft);
  border-radius:7px; padding:5px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* the promise: three facts on a rule */
.promise{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:88px; border-top:1px solid var(--rule);
}
.promise-item{ padding:30px 34px 0 0; }
.promise-item + .promise-item{ border-left:1px solid var(--rule); padding-left:34px; }
.promise dt{
  font-family:var(--font-data); font-weight:700;
  display:flex; align-items:baseline; gap:6px;
  color:var(--ink); margin-bottom:8px;
}
.promise .num{ font-size:2.5rem; line-height:1; letter-spacing:-0.04em; }
.promise .unit{ font-size:.95rem; font-weight:500; color:var(--ink-faint); }
.promise .unit.pre{ font-size:.85rem; }
.promise dd{ font-size:.92rem; color:var(--ink-soft); max-width:24ch; }

@media (max-width:920px){
  .hero{ padding-top:56px; padding-bottom:76px; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .lede{ max-width:56ch; }
  .hero-visual .device{ transform:none; }
  .device-cap{ text-align:left; }
  .promise{ margin-top:64px; }
}
@media (max-width:680px){
  .promise{
    grid-template-columns:1fr;
    gap:12px; border-top:none; margin-top:36px;
    width:100%; max-width:440px; margin-inline:auto;
  }
  .promise-item{
    height:114px; min-height:114px;
    padding:16px 20px;
    border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; box-sizing:border-box;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .promise-item + .promise-item{
    border-left:none; border-top:none; padding-left:20px;
  }
  .promise dt{
    height:36px; line-height:1;
    margin:0 0 4px 0;
    display:flex; align-items:baseline; justify-content:center; gap:6px;
  }
  .promise .num{
    font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-0.03em;
    font-variant-numeric:tabular-nums;
  }
  .promise .unit, .promise .unit.pre{
    font-size:.95rem; font-weight:600; line-height:1;
  }
  .promise dd{
    height:34px;
    display:flex; align-items:center; justify-content:center;
    font-size:.88rem; text-align:center; max-width:28ch; line-height:1.28;
    margin:0;
  }

  /* Card 1: 7 giorni - Soft Blue Glow Card */
  .promise-item:nth-child(1){
    background:linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(235, 245, 255, 0.9));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(47, 95, 224, 0.2);
    box-shadow:0 8px 22px -4px rgba(47, 95, 224, 0.1);
  }
  .promise-item:nth-child(1) .num{ color:var(--blue-deep); }
  .promise-item:nth-child(1) .unit{ color:var(--blue); }
  .promise-item:nth-child(1) dd{ color:var(--ink-soft); }

  /* Card 2: 30 giorni - Refined Frosted Card */
  .promise-item:nth-child(2){
    background:linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(243, 246, 255, 0.9));
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(18, 41, 107, 0.16);
    box-shadow:0 8px 22px -4px rgba(18, 41, 107, 0.08);
  }
  .promise-item:nth-child(2) .num{ color:var(--ink); }
  .promise-item:nth-child(2) .unit{ color:var(--ink-faint); }
  .promise-item:nth-child(2) dd{ color:var(--ink-soft); }

  /* Card 3: da 399 € - Hero Highlight Accent Card */
  .promise-item:nth-child(3){
    background:linear-gradient(135deg, #0d1b42 0%, #15358a 100%);
    border:1px solid rgba(95, 212, 255, 0.45);
    box-shadow:0 12px 28px -4px rgba(18, 41, 107, 0.35), 0 0 20px rgba(95, 212, 255, 0.2);
  }
  .promise-item:nth-child(3) .num{ color:#ffffff; }
  .promise-item:nth-child(3) .unit,
  .promise-item:nth-child(3) .unit.pre{ color:#5fd4ff; }
  .promise-item:nth-child(3) dd{ color:rgba(255, 255, 255, 0.9); }
}

/* ============ PROBLEM ============ */
.problem{ }
.problem-layout{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  border-top:1px solid var(--rule); padding-top:40px;
}
.problem-grid{ display:flex; flex-direction:column; gap:26px; }
.problem-item{ padding:0; }
.problem-item h3{ font-size:1.12rem; margin-bottom:8px; letter-spacing:-0.01em; color:var(--ink); }
.problem-item p{ font-size:.95rem; color:var(--ink-soft); line-height:1.55; }

.problem-visual{ position:relative; }
.holo-map-card{
  border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, rgba(18,41,107,0.75), rgba(47,95,224,0.4));
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 20px 45px -10px rgba(18,41,107,0.32), 0 0 35px rgba(95,212,255,0.2);
  transition:transform .4s ease, box-shadow .4s ease;
}
.holo-map-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 55px -10px rgba(18,41,107,0.42), 0 0 45px rgba(95,212,255,0.3);
}
.holo-map-card img{ display:block; width:100%; height:auto; }
.holo-map-badge{
  position:absolute; bottom:16px; left:16px; right:16px;
  display:flex; align-items:center; gap:8px;
  background:rgba(255, 255, 255, 0.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:9px 14px; border-radius:999px;
  font-family:var(--font-data); font-size:.75rem; font-weight:600;
  color:var(--blue-deep); border:1px solid rgba(47,95,224,0.2);
  box-shadow:0 6px 16px rgba(18,41,107,0.15);
}
.holo-map-badge .dot-live{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}

@media (max-width:920px){
  .problem-layout{ grid-template-columns:1fr; gap:36px; }
  .problem-visual{ max-width:540px; margin:0 auto; width:100%; }
}

/* ============ CASES ============ */
.cases{ }

.case{
  background:var(--card); border:1px solid var(--rule-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden;
  margin-bottom:34px;
}
.case-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:28px 34px; border-bottom:1px solid var(--rule-soft);
}
.case-head h3{ font-size:1.32rem; letter-spacing:-0.02em; }
.case-head .place{ font-size:.9rem; color:var(--ink-soft); margin-top:4px; }
.tag-live{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:var(--font-data); font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#1c7a3e;
  background:rgba(40,180,90,0.1); border:1px solid rgba(40,180,90,0.24);
  padding:6px 13px; border-radius:999px;
}
.tag-live .dot{ width:6px; height:6px; border-radius:50%; background:#28b45a; }

.case-body{ display:grid; grid-template-columns:1.18fr .82fr; gap:0; }
.case-shot{
  padding:34px; background:linear-gradient(160deg,#f2f6fd,#e9f0fb);
  display:flex; flex-direction:column; gap:20px; justify-content:center;
  border-right:1px solid var(--rule-soft);
}
.case-shot .device{ box-shadow:var(--shadow-md); }
/* gli screenshot sorgente (1000×619) hanno una fascia vuota in basso:
   tieni la parte alta, quella che conta */
.case-shot .device img{ aspect-ratio:2/1; object-fit:cover; object-position:top center; }
.case-visit{ align-self:flex-start; }

.case-data{
  padding:34px; display:flex; flex-direction:column; justify-content:center; gap:26px;
}

/* --- SIGNATURE: the search result --- */
.serp{
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:16px 18px 18px; background:#fcfdff;
}
.serp-label{
  font-family:var(--font-data); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:11px;
}
.serp-field{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--rule); border-radius:999px;
  padding:10px 16px; background:#fff; margin-bottom:16px;
}
.serp-field svg{ width:15px; height:15px; flex-shrink:0; fill:none; stroke:var(--ink-faint); stroke-width:2; stroke-linecap:round; }
.serp-field span{ font-size:.9rem; color:var(--ink); }

.serp-hit{ display:flex; align-items:flex-start; gap:13px; }
.serp-pos{
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  font-family:var(--font-data); font-weight:700; font-size:.86rem;
  color:#fff; background:var(--accent);
  box-shadow:0 3px 9px rgba(164,98,13,0.28);
}
.serp-title{ font-size:.98rem; font-weight:600; color:var(--blue-deep); line-height:1.35; }
.serp-url{ font-family:var(--font-data); font-size:.72rem; color:var(--ink-faint); margin-top:4px; }

/* --- metrics --- */
.metrics{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.metrics dt{
  font-family:var(--font-data); font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:2.15rem; line-height:1; letter-spacing:-0.035em;
  color:var(--ink); margin-bottom:8px;
}
.metrics dd{ font-size:.82rem; color:var(--ink-soft); line-height:1.4; }

/* etichetta usata dove non ci sono dati di ricerca da mostrare (case editoriali):
   stessa voce tipografica di .serp-label, ma fuori dal box SERP */
.case-spec{ display:flex; flex-direction:column; gap:14px; }
/* finestra temporale dei dati Search Console, sotto le metriche dei case */
.metrics-note{
  font-family:var(--font-data); font-size:.68rem; font-weight:500;
  letter-spacing:.06em; color:var(--ink-faint); margin-top:-10px;
}
.case-label{
  font-family:var(--font-data); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}

.case-note{
  font-family:var(--font-display); font-style:italic; font-size:1.04rem;
  line-height:1.5; color:var(--ink);
  padding-left:16px; border-left:2px solid var(--accent);
}

.case-flip .case-shot{ order:2; border-right:none; border-left:1px solid var(--rule-soft); }
.case-flip .case-data{ order:1; }

@media (max-width:900px){
  .case-body,
  .case-flip .case-body{ grid-template-columns:1fr; }
  /* in colonna sempre lo stesso ordine: prima il sito, poi le prove */
  .case-shot,
  .case-flip .case-shot{ order:1; border-right:none; border-left:none; border-bottom:1px solid var(--rule-soft); padding:26px; }
  .case-data,
  .case-flip .case-data{ order:2; padding:26px; }
}
@media (max-width:560px){
  .case-head{ padding:22px 24px; flex-direction:column; align-items:flex-start; gap:12px; }
  .case-shot,
  .case-flip .case-shot{ padding:20px; }
  .case-data{ padding:24px; gap:22px; }
  .metrics{ gap:18px; }
  .metrics dt{ font-size:1.7rem; }
}

/* --- gallery / card stack --- */
.gallery{ margin-top:64px; }
.gallery-head{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-bottom:16px; border-bottom:1px solid var(--rule); margin-bottom:32px;
}
.gallery-title{
  font-family:var(--font-data); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.gallery-hint{
  font-family:var(--font-data); font-size:.74rem; color:var(--ink-faint);
}

/* ============ ANIMATED CARD STACK ============ */
.card-stack-wrapper{
  display:flex; flex-direction:column; align-items:center; width:100%;
}
.card-stack-stage{
  position:relative; width:100%; max-width:640px; height:410px;
  margin:0 auto; perspective:1000px;
}
.stack-card{
  position:absolute; bottom:0; left:50%; width:100%; max-width:580px; height:360px;
  background:var(--card); border:1px solid var(--rule); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column;
  cursor:pointer; user-select:none;
  transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.45s ease;
  will-change:transform, opacity;
}

/* Positions in the 3D stack */
.stack-card[data-pos="0"]{
  transform:translateX(-50%) translateY(12px) scale(1);
  z-index:4; opacity:1; pointer-events:auto;
  box-shadow:0 24px 50px -12px rgba(18,41,107,0.22), 0 0 0 1px rgba(47,95,224,0.15);
}
.stack-card[data-pos="1"]{
  transform:translateX(-50%) translateY(-16px) scale(0.95);
  z-index:3; opacity:0.95; pointer-events:none;
  box-shadow:0 18px 40px -10px rgba(18,41,107,0.18);
}
.stack-card[data-pos="2"]{
  transform:translateX(-50%) translateY(-44px) scale(0.9);
  z-index:2; opacity:0.85; pointer-events:none;
  box-shadow:0 12px 30px -8px rgba(18,41,107,0.14);
}
.stack-card[data-pos="3"]{
  transform:translateX(-50%) translateY(-68px) scale(0.85);
  z-index:1; opacity:0; pointer-events:none;
}
.stack-card[data-pos="4"],
.stack-card[data-pos="5"]{
  transform:translateX(-50%) translateY(-68px) scale(0.85);
  z-index:0; opacity:0; pointer-events:none;
}

/* Exiting card animation (slides down out of view smoothly) */
.stack-card.is-exiting{
  transform:translateX(-50%) translateY(280px) scale(0.96) !important;
  opacity:0 !important; z-index:10 !important;
  transition:transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
}

.stack-card-media{
  position:relative; width:100%; height:230px; overflow:hidden; background:#0e1526;
}
.stack-card-media img,
.stack-card-media video{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .4s ease;
}
.stack-card:hover .stack-card-media img,
.stack-card:hover .stack-card-media video{ transform:scale(1.03); }
.stack-card-badge{
  position:absolute; top:12px; left:12px;
  background:rgba(18,41,107,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; font-family:var(--font-data); font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

.stack-card-body{
  padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:1; background:var(--card); border-top:1px solid var(--rule-soft);
}
.stack-card-info h4{ font-size:1.1rem; font-weight:600; color:var(--ink); margin-bottom:4px; letter-spacing:-0.01em; }
.stack-card-info p{ font-size:.85rem; color:var(--ink-soft); line-height:1.35; margin:0; }

.btn-stack-open{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px;
  background:var(--blue-wash); border:1px solid rgba(47,95,224,0.2);
  color:var(--blue-deep); font-size:.82rem; font-weight:600;
  font-family:var(--font-body); cursor:pointer; flex-shrink:0;
  transition:all .2s ease;
}
.btn-stack-open:hover{
  background:var(--blue); color:#fff; border-color:var(--blue);
  transform:scale(1.04);
}

.stack-controls{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:28px; width:100%;
}
.btn-stack-prev, .btn-stack-next{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; border-radius:999px;
  background:var(--card); border:1px solid var(--rule);
  color:var(--ink); font-size:.88rem; font-weight:600;
  font-family:var(--font-body); cursor:pointer;
  transition:all .2s ease; box-shadow:var(--shadow-sm);
}
.btn-stack-prev{ padding:10px 14px; }
.btn-stack-prev:hover, .btn-stack-next:hover{
  border-color:var(--blue); color:var(--blue);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.stack-dots{ display:flex; gap:7px; align-items:center; }
.stack-dot{
  width:8px; height:8px; border-radius:50%; background:var(--rule);
  transition:all .3s ease; cursor:pointer;
}
.stack-dot.is-active{ background:var(--blue); width:22px; border-radius:999px; }

@media (max-width:640px){
  .card-stack-stage{ height:380px; }
  .stack-card{ height:330px; border-radius:14px; }
  .stack-card-media{ height:200px; }
  .stack-card-body{ padding:12px 16px; }
  .stack-card-info h4{ font-size:1rem; }
  .stack-card-info p{ font-size:.78rem; }
  .btn-stack-open span{ display:none; }
  .btn-stack-open{ padding:8px 10px; }
}

/* ============ LIGHTBOX MODAL ============ */
.lightbox-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.lightbox-modal.is-open{ opacity:1; pointer-events:auto; }
.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(12, 22, 50, 0.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.lightbox-dialog{
  position:relative; z-index:2; width:100%; max-width:960px;
  background:var(--card); border:1px solid rgba(255,255,255,0.25);
  border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,0.45);
  overflow:hidden; transform:scale(0.92);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; max-height:90vh;
}
.lightbox-modal.is-open .lightbox-dialog{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:16px; right:16px; z-index:10;
  width:40px; height:40px; border-radius:50%;
  background:rgba(18,41,107,0.85); color:#fff; border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s ease, background .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
}
.lightbox-close:hover{ transform:rotate(90deg) scale(1.08); background:var(--blue); }
.lightbox-img-wrap{
  width:100%; max-height:calc(90vh - 120px); overflow-y:auto;
  background:#0b1120; display:flex; justify-content:center;
  overscroll-behavior:contain;
}
.lightbox-img-wrap img,
.lightbox-img-wrap video{
  width:100%; height:auto; display:block; object-fit:contain;
}
.lightbox-img-wrap img[hidden],
.lightbox-img-wrap video[hidden]{ display:none; }
.lightbox-footer{
  padding:18px 26px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; background:var(--card); border-top:1px solid var(--rule-soft);
}
.lightbox-meta h3{ font-size:1.15rem; font-weight:600; color:var(--ink); margin-bottom:3px; }
.lightbox-meta p{ font-size:.86rem; color:var(--ink-soft); margin:0; }
@media (max-width:640px){
  .lightbox-modal{ padding:12px; }
  .lightbox-footer{ flex-direction:column; align-items:stretch; gap:12px; padding:14px 18px; }
  .lightbox-meta h3{ font-size:1rem; }
}

/* ============ PRICING / SERVICES ============ */
.services{ }
.pricing-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
  margin-top:48px; perspective:1200px; align-items:stretch;
}
.pricing-card{
  background:var(--card); border:1px solid var(--rule); border-radius:20px;
  padding:32px 28px; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-sm); transition:transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.pricing-card.is-popular{
  border:2px solid var(--blue);
  box-shadow:0 20px 45px -10px rgba(47,95,224,0.22), 0 0 0 1px rgba(47,95,224,0.2);
  z-index:3;
}
@media (min-width:980px){
  .pricing-card:nth-child(1){
    transform:rotateY(3deg) scale(0.97);
    transform-origin:right center;
    z-index:1;
  }
  .pricing-card:nth-child(2){
    transform:translateY(-10px) scale(1.03);
    z-index:3;
  }
  .pricing-card:nth-child(3){
    transform:rotateY(-3deg) scale(0.97);
    transform-origin:left center;
    z-index:1;
  }
  .pricing-card.is-popular:hover{
    transform:rotateY(0) translateY(-14px) scale(1.05) !important;
    box-shadow:0 28px 60px -10px rgba(47,95,224,0.35);
    z-index:5;
  }
  .pricing-card:not(.is-popular):hover{
    transform:rotateY(0) translateY(-8px) scale(1.01) !important;
    box-shadow:var(--shadow-lg); border-color:rgba(47,95,224,0.3);
    z-index:4;
  }
}
.pricing-popular-badge{
  position:absolute; top:0; right:0;
  background:var(--blue); color:#fff;
  font-family:var(--font-data); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:6px 14px; border-radius:0 18px 0 14px;
  display:inline-flex; align-items:center; gap:5px;
}
.pricing-header{ margin-bottom:14px; }
.pricing-name{
  font-family:var(--font-data); font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:12px;
}
.pricing-price-wrap{
  display:flex; align-items:baseline; gap:5px;
  color:var(--ink); line-height:1;
}
.pricing-from{ font-family:var(--font-data); font-size:.85rem; font-weight:500; color:var(--ink-faint); text-transform:uppercase; }
.pricing-price{
  font-family:var(--font-data); font-weight:700; font-size:2.85rem;
  letter-spacing:-0.04em; font-variant-numeric:tabular-nums;
}
.pricing-cur{ font-family:var(--font-data); font-size:1.05rem; font-weight:600; color:var(--ink-soft); }
.pricing-quote{ font-family:var(--font-display); font-style:italic; font-size:2rem; font-weight:500; color:var(--ink); }
.pricing-period{ font-size:.82rem; color:var(--ink-faint); margin-top:6px; }
.pricing-desc{
  font-size:.92rem; color:var(--ink-soft); line-height:1.45;
  margin-bottom:20px; min-height:42px;
}
.pricing-features{
  list-style:none; padding:0; margin:0 0 24px 0;
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid var(--rule-soft); padding-top:20px;
  flex:1;
}
.pricing-features li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.88rem; color:var(--ink); line-height:1.4;
}
.check-icon{
  width:17px; height:17px; color:var(--blue); flex-shrink:0; margin-top:2px;
  stroke:var(--blue); stroke-width:2.5; fill:none;
}
.pricing-footer{ margin-top:auto; }
.pricing-note{
  font-family:var(--font-data); font-size:.73rem; color:var(--ink-faint);
  text-align:center; margin-top:10px; margin-bottom:0;
}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--rule);
  color:var(--ink); font-weight:600; border-radius:10px;
  padding:12px 18px; text-decoration:none; font-size:.92rem;
  transition:all .2s ease;
}
.btn-outline:hover{
  border-color:var(--blue); color:var(--blue); background:var(--blue-wash);
}
@media (max-width:980px){
  .pricing-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; gap:28px; }
  .pricing-desc{ min-height:auto; }
}

/* ============ METHOD ============ */
.method{ }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:26px 24px 24px;
  border-radius:var(--radius);
  border:1px solid var(--rule-soft);
  background:var(--card);
  overflow:hidden;
}
/* Lo sfondo (--bg, impostato nell'HTML) sta sotto un velo bianco che
   parte leggero in alto e si chiude verso il basso, dove c'è il testo:
   l'immagine resta visibile ma il contrasto non scende mai sotto AA. */
.step::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.80) 34%,
      rgba(255,255,255,0.90) 58%,
      rgba(255,255,255,0.93) 100%),
    var(--bg) center/cover no-repeat;
}
.step-n{
  font-family:var(--font-data); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; color:var(--blue-deep); margin-bottom:16px;
}
/* min-height su due righe: un solo titolo va a capo, e senza questo
   il corpo del testo partirebbe più in basso solo in quella card */
.step h3{ font-size:1.02rem; margin-bottom:10px; letter-spacing:-0.01em; min-height:2.3em; }
/* solo i paragrafi senza classe: .step-n e .step-when hanno il loro stile
   e un ".step p" generico li sovrascriverebbe per specificità */
.step p:not([class]){ font-size:.92rem; color:var(--ink-soft); }
/* margin-top:auto allinea i giorni al fondo di tutte le colonne,
   qualunque sia la lunghezza del testo sopra */
.step-when{
  font-family:var(--font-data); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:auto; padding-top:18px;
}

@media (max-width:920px){
  .steps{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; gap:14px; }
  .step{ padding:24px 22px 22px; }
  /* in colonna singola i titoli stanno su una riga: niente riserva di spazio */
  .step h3{ min-height:0; }
  /* card bassa e larga: mostra la parte alta dell'immagine invece del centro */
  .step::before{ background-position:center top; }
}

/* ============ ABOUT ============ */
.about{ --pad:0; padding-bottom:96px; }
.about-card{
  background:var(--blue-deep); color:#fff;
  border-radius:var(--radius); padding:60px 64px;
  box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.about-card::after{
  content:''; position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(93,163,255,0.34),transparent 68%);
  pointer-events:none;
}
.about-card .kicker{ color:var(--accent-on-dark); }
.about-lede{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.28rem,2.5vw,1.72rem); line-height:1.34;
  letter-spacing:-0.02em; max-width:34ch; margin-bottom:22px;
  position:relative;
}
.about-lede em{ font-style:italic; color:#a8c8ff; }
.about-body{
  font-size:1.01rem; color:rgba(255,255,255,0.76); max-width:56ch;
  position:relative;
}
.about-facts{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; position:relative;
}
.about-facts li{
  font-family:var(--font-data); font-size:.71rem; font-weight:500;
  letter-spacing:.04em;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.17);
  padding:8px 15px; border-radius:999px;
}

@media (max-width:760px){
  .about-card{ padding:42px 28px; }
  .about-lede{ max-width:none; }
}

/* ============ CONTACT ============ */
.contact{ --pad:0; padding-bottom:104px; }
.contact-grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:60px; align-items:start; }
.contact-copy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:18px; }
.contact-copy p:not([class]){ color:var(--ink-soft); max-width:40ch; }
.contact-direct{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--rule);
  font-size:.94rem;
}
.contact-direct a{ color:var(--blue); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(47,95,224,0.3); }
.contact-direct a:hover{ border-bottom-color:var(--blue); }

.form-card{
  background:var(--card); border:1px solid var(--rule-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:38px;
}
.hp{ position:absolute; left:-9999px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:7px; }
.field select,
.field input{
  width:100%; padding:14px 15px;
  font-family:inherit; font-size:.96rem; color:var(--ink);
  background:#fbfcfe; border:1px solid var(--rule); border-radius:var(--radius-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%235f6f83' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:11px;
  padding-right:40px;
}
.field select:focus,
.field input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,95,224,0.13); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.field-consent{ margin-top:22px; }
.consent-check{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font-weight:400; font-size:.86rem; color:var(--ink-soft);
}
.consent-check input{ width:auto; margin-top:3px; flex-shrink:0; accent-color:var(--blue); }
.consent-check a{ color:var(--blue); text-decoration:underline; text-decoration-color:rgba(47,95,224,0.35); }
.consent-check a:hover{ text-decoration-color:var(--blue); }

.form-foot{ font-size:.8rem; color:var(--ink-faint); text-align:center; margin-top:14px; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; gap:38px; }
  .contact-copy p{ max-width:56ch; }
}
@media (max-width:560px){
  .form-card{ padding:26px 22px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
}

/* ============ PAGINA GRAZIE ============ */
.thanks{ padding-block:96px 104px; }
.thanks-inner{ max-width:800px; }
.thanks h1{
  font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em;
  font-size:clamp(2rem,4vw,3rem); margin-bottom:22px;
}
.thanks h1 em{ font-style:italic; font-weight:500; color:var(--blue); }
.thanks-lede{ font-size:1.08rem; color:var(--ink-soft); max-width:48ch; }
.thanks-next{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:52px; border-top:1px solid var(--rule);
}
.thanks-next li{ padding:30px 28px 0 0; }
.thanks-next li + li{ border-left:1px solid var(--rule); padding-left:28px; }
.thanks-next h2{ font-size:1.02rem; margin-bottom:10px; letter-spacing:-0.01em; }
.thanks-next p:not([class]){ font-size:.92rem; color:var(--ink-soft); }
.thanks-direct{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--rule);
  font-size:.96rem; color:var(--ink-soft);
}
.thanks-direct a{ color:var(--blue); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(47,95,224,0.3); }
.thanks-direct a:hover{ border-bottom-color:var(--blue); }

@media (max-width:760px){
  .thanks{ padding-block:64px 76px; }
  .thanks-next{ grid-template-columns:1fr; }
  .thanks-next li{ padding:24px 0; }
  .thanks-next li + li{ border-left:none; border-top:1px solid var(--rule-soft); padding-left:0; }
}

/* ============ PAGINE LEGALI (privacy/cookie) ============ */
.legal{ padding-block:96px 104px; }
.legal-inner{ max-width:760px; }
.legal h1{
  font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em;
  font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:8px;
}
.legal .legal-updated{ color:var(--ink-faint); font-size:.9rem; margin-bottom:44px; }
.legal h2{ font-size:1.15rem; letter-spacing:-0.01em; margin:40px 0 12px; }
.legal p:not([class]){ color:var(--ink-soft); font-size:.98rem; max-width:66ch; }
.legal table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:.9rem; }
.legal th,.legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); color:var(--ink-soft); }
.legal th{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--blue); }

@media (max-width:760px){
  .legal{ padding-block:64px 76px; }
}

/* ============ FOOTER ============ */
.site-foot{
  border-top:1px solid var(--rule);
  background:rgba(255,255,255,0.5);
  padding-top:52px;
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px;
  padding-bottom:44px;
}
.foot-brand .logo{ margin-bottom:12px; }
.foot-brand p:not([class]){ font-size:.9rem; color:var(--ink-soft); max-width:34ch; }
.foot-col h2{
  font-family:var(--font-data); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:14px;
}
.foot-col li + li{ margin-top:9px; }
.foot-col a{ font-size:.92rem; color:var(--ink-soft); text-decoration:none; }
.foot-col a:hover{ color:var(--blue); }

.foot-legal{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:34px; border-top:1px solid var(--rule-soft);
  font-size:.8rem; color:var(--ink-faint);
}
.foot-note{ font-family:var(--font-data); font-size:.7rem; letter-spacing:.02em; }

@media (max-width:700px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:1 / -1; }
  .foot-brand p{ max-width:none; }
}

/* ============ ENTRATE & SEQUENZA EROICA ============
   Movimento contenuto: 14px di risalita e una dissolvenza, nessun
   rimbalzo, nessuna scala. Gli elementi partono nascosti SOLO se
   .js-anim è sul <html> (la mette uno script inline nel <head>):
   senza JavaScript la pagina è visibile e statica. */
.js-anim .hero-copy > *,
.js-anim .hero-visual,
.js-anim .promise-item,
.js-anim .section-head,
.js-anim .problem-item,
.js-anim .problem-visual,
.js-anim .case,
.js-anim .gallery-head,
.js-anim .card-stack-wrapper,
.js-anim .pricing-card,
.js-anim .step,
.js-anim .about-card,
.js-anim .contact-copy > *,
.js-anim .form-card{
  opacity:0; transform:translateY(14px);
}
/* stessa specificità della regola sopra, ma dopo: vince questa */
.js-anim .is-in{
  opacity:1; transform:none;
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}

/* Sequenza all'apertura della Hero:
   1. Copy principale (subito)
   2. I tre contatori numerici (ritardo 180ms)
   3. Visual olografico (ritardo 380ms con posa 3D) */
.js-anim .promise-item.is-in{
  transition-delay:180ms;
}
.js-anim .hero-visual{
  transform:translateY(16px) scale(0.98) rotate(1deg);
}
.js-anim .hero-visual.is-in{
  transform:none;
  transition:opacity .85s ease 380ms, transform .9s cubic-bezier(.22,.61,.36,1) 380ms;
}

@media (prefers-reduced-motion:reduce){
  .js-anim .hero-copy > *,
  .js-anim .hero-visual,
  .js-anim .promise-item,
  .js-anim .section-head,
  .js-anim .problem-item,
  .js-anim .problem-visual,
  .js-anim .case,
  .js-anim .gallery-head,
  .js-anim .card-stack-wrapper,
  .js-anim .pricing-card,
  .js-anim .step,
  .js-anim .about-card,
  .js-anim .contact-copy > *,
  .js-anim .form-card{ opacity:1; transform:none; }
  .js-anim .is-in{ transition:none; }
  .js-anim .hero-visual{ transform:none; }
}

/* ============ INTERACTIVE CARDS HOVER ============ */
.case{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.case:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 55px -12px rgba(18,41,107,0.18);
  border-color:rgba(47,95,224,0.25);
}
.step{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(47,95,224,0.3);
}
.about-card{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.about-card:hover{
  transform:translateY(-3px);
  box-shadow:0 35px 80px rgba(18,41,107,0.22);
}
@media (prefers-reduced-motion:reduce){
  .case:hover, .step:hover, .about-card:hover{ transform:none; }
}

/* ============ FLOATING WHATSAPP BUTTON (LIQUID METAL & GLASS) ============ */
.whatsapp-float{
  position:fixed; bottom:28px; right:28px; z-index:990;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px 10px 13px;
  background:linear-gradient(180deg, #104222 0%, #071f10 100%);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(37, 211, 102, 0.6);
  border-radius:999px;
  box-shadow:0 12px 28px -6px rgba(18, 41, 107, 0.22), 0 0 24px rgba(37, 211, 102, 0.35);
  color:#ffffff !important; text-decoration:none;
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.whatsapp-float,
.whatsapp-float .whatsapp-float-label,
.whatsapp-float .btn-label-text{
  color:#ffffff !important;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(37, 211, 102, 0.5);
}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.02);
  background:linear-gradient(180deg, #16562d 0%, #0a2b16 100%);
  border-color:rgba(37, 211, 102, 0.9);
  box-shadow:0 16px 36px -6px rgba(18, 41, 107, 0.3), 0 0 32px rgba(37, 211, 102, 0.5);
  color:#ffffff !important;
}
.whatsapp-icon{ width:24px; height:24px; color:#25D366; flex-shrink:0; }
.whatsapp-float-pulse{
  position:absolute; top:7px; left:26px;
  width:7px; height:7px; background:#25D366; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37, 211, 102, 0.7);
  animation:wa-pulse 2.2s infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(37, 211, 102, 0.7); }
  70%{ transform:scale(1); box-shadow:0 0 0 8px rgba(37, 211, 102, 0); }
  100%{ transform:scale(0.95); box-shadow:0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float-pulse{ animation:none; }
}
@media (max-width:560px){
  .whatsapp-float{
    bottom:20px; right:20px;
    padding:12px; border-radius:50%;
  }
  .whatsapp-float-label{ display:none; }
  .whatsapp-float-pulse{ top:5px; left:23px; }
}

/* ============ SERVICE VISUAL (FOR SPLIT LAYOUT) ============ */
.service-with-visual{
  display:grid; grid-template-columns:1fr 280px; gap:28px; align-items:center;
}
.service-visual-card{
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 14px 30px -6px rgba(18,41,107,0.22), 0 0 20px rgba(95,212,255,0.2);
}
.service-visual-card img{ display:block; width:100%; height:auto; }
@media (max-width:880px){
  .service-with-visual{ grid-template-columns:1fr; }
  .service-visual-card{ max-width:320px; margin-top:14px; }
}

/* ============ OPENING INTRO HOOK OVERLAY ============ */
.intro-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; visibility:hidden;
  transition:opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
             visibility 0.85s ease,
             transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
             filter 0.85s ease;
}
.intro-overlay.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
}
.intro-overlay.is-closing{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.02); filter:blur(4px);
}
.intro-backdrop{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(14, 27, 66, 0.97) 0%, rgba(6, 12, 30, 0.98) 100%);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  transition:opacity 0.85s ease;
}
.intro-box{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:36px 24px; max-width:560px; width:90%;
  animation:introBoxIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes introBoxIn{
  0%{ opacity:0; transform:translateY(18px) scale(0.95); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.intro-brand{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  padding:6px 16px; border-radius:999px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.intro-logo-mark{
  width:10px; height:10px; border-radius:50%; background:#5fd4ff;
  box-shadow:0 0 10px #5fd4ff;
}
.intro-logo-text{
  font-family:var(--font-data); font-weight:700; font-size:.84rem;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.intro-logo-text span{ color:#5fd4ff; }
.intro-hook{
  font-family:var(--font-display); font-size:clamp(1.75rem, 5vw, 2.5rem);
  font-weight:400; line-height:1.2; letter-spacing:-0.025em; color:#fff;
  margin:0 0 26px 0; text-shadow:0 4px 20px rgba(0,0,0,0.5);
}
.intro-hook span{ display:block; color:rgba(255,255,255,0.92); font-weight:500; }
.intro-hook em{ font-style:italic; color:#5fd4ff; font-weight:400; }

.intro-bar{
  width:160px; height:3px; background:rgba(255,255,255,0.16);
  border-radius:999px; overflow:hidden; position:relative;
}
.intro-bar-fill{
  position:absolute; top:0; left:0; height:100%; width:0;
  background:linear-gradient(90deg, #2f5fe0, #5fd4ff);
  animation:introBarProgress 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes introBarProgress{
  0%{ width:0%; }
  100%{ width:100%; }
}

/* ============ LIQUID METAL BUTTONS ============ */
.btn-liquid-metal{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #1c3c92 0%, #0c1b42 100%);
  color:#ffffff !important;
  border:1px solid rgba(135, 225, 255, 0.6);
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(18, 41, 107, 0.5),
             0 12px 30px -4px rgba(47, 95, 224, 0.5),
             0 0 26px rgba(95, 212, 255, 0.35);
  transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 0.35s ease,
             border-color 0.35s ease;
  transform-style:preserve-3d;
}

/* Molten Chrome Liquid Perimeter */
.btn-liquid-metal::before{
  content:'';
  position:absolute;
  inset:-140%;
  background:conic-gradient(
    from 0deg,
    rgba(95, 212, 255, 0.1) 0deg,
    rgba(255, 255, 255, 0.95) 70deg,
    rgba(95, 212, 255, 0.2) 140deg,
    rgba(47, 95, 224, 0.8) 210deg,
    rgba(255, 255, 255, 0.95) 280deg,
    rgba(95, 212, 255, 0.1) 360deg
  );
  animation:liquidRotate 5s linear infinite;
  opacity:0.85;
  pointer-events:none;
}

/* Inner Liquid Bevel Core */
.btn-liquid-metal::after{
  content:'';
  position:absolute;
  inset:1.5px;
  background:radial-gradient(ellipse at 50% 0%, #2449a8 0%, #0e1e48 70%, #08122c 100%);
  border-radius:999px;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 1px 1px 0 rgba(255, 255, 255, 0.7),
             inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
             inset 0 0 14px 0 rgba(95, 212, 255, 0.2);
  transition:background 0.35s ease, box-shadow 0.35s ease;
}

.btn-liquid-metal > *{
  position:relative;
  z-index:30;
  color:#ffffff !important;
  font-weight:600;
  font-size:0.96rem;
  letter-spacing:0.01em;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(95, 212, 255, 0.6);
  pointer-events:none;
}
.btn-liquid-metal .btn-label-text{
  color:#ffffff !important;
  display:inline-block;
}
.btn-liquid-metal .liquid-sparkle{
  color:#5fd4ff;
  display:inline-flex;
  align-items:center;
  filter:drop-shadow(0 0 6px #5fd4ff);
}

.btn-liquid-metal:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:rgba(180, 240, 255, 0.95);
  box-shadow:0 0 0 1px rgba(95, 212, 255, 0.7),
             0 18px 40px -4px rgba(47, 95, 224, 0.7),
             0 0 36px rgba(95, 212, 255, 0.5);
}

.btn-liquid-metal:hover::after{
  background:radial-gradient(ellipse at 50% 0%, #2b56c4 0%, #12275e 70%, #0b183a 100%);
  box-shadow:inset 0 1px 2px 0 rgba(255, 255, 255, 0.9),
             inset 0 -2px 4px 0 rgba(0, 0, 0, 0.5),
             inset 0 0 18px 0 rgba(95, 212, 255, 0.4);
}

.btn-liquid-metal:active{
  transform:translateY(1px) scale(0.98);
}

/* Liquid Metal WhatsApp Float */
.btn-liquid-metal-wa{
  border:1px solid rgba(37, 211, 102, 0.7) !important;
  background:linear-gradient(180deg, #104222 0%, #071f10 100%) !important;
  box-shadow:0 0 0 1px rgba(18, 41, 107, 0.3),
             0 14px 34px -6px rgba(18, 41, 107, 0.25),
             0 0 28px rgba(37, 211, 102, 0.4) !important;
}
.btn-liquid-metal-wa::before{
  background:conic-gradient(
    from 0deg,
    rgba(37, 211, 102, 0.1) 0deg,
    rgba(255, 255, 255, 0.95) 70deg,
    rgba(37, 211, 102, 0.3) 140deg,
    rgba(18, 140, 60, 0.8) 210deg,
    rgba(255, 255, 255, 0.95) 280deg,
    rgba(37, 211, 102, 0.1) 360deg
  ) !important;
}
.btn-liquid-metal-wa,
.btn-liquid-metal-wa span,
.btn-liquid-metal-wa .whatsapp-float-label,
.btn-liquid-metal-wa .btn-label-text,
.btn-liquid-metal-wa:hover,
.btn-liquid-metal-wa:hover span,
.btn-liquid-metal-wa:hover .whatsapp-float-label,
.btn-liquid-metal-wa:hover .btn-label-text{
  color:#ffffff !important;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(37, 211, 102, 0.5) !important;
}

/* Metallic Click Ripple */
.liquid-ripple{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(95, 212, 255, 0.4) 45%, transparent 70%);
  pointer-events:none;
  z-index:10;
  transform:translate(-50%, -50%) scale(0);
  animation:liquidRippleAnim 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes liquidRippleAnim{
  0%{ transform:translate(-50%, -50%) scale(0); opacity:0.95; }
  100%{ transform:translate(-50%, -50%) scale(4.8); opacity:0; }
}

@keyframes liquidRotate{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce){
  .btn-liquid-metal::before{ animation:none; }
  .liquid-ripple{ display:none; }
}

/* ============ BLUR REVEAL & VALUE SECTION (LA NOSTRA PROMESSA) ============ */
.blur-reveal-section{
  padding-block:96px;
  background:radial-gradient(ellipse at 50% -10%, #163075 0%, #0b193d 50%, #050d22 100%);
  border-top:1px solid rgba(95, 212, 255, 0.25);
  border-bottom:1px solid rgba(95, 212, 255, 0.25);
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 50px -10px rgba(6,13,34,0.7);
}
.blur-reveal-section .kicker{
  color:#5fd4ff;
  text-shadow:0 0 12px rgba(95, 212, 255, 0.4);
}
.blur-reveal-title{
  font-family:var(--font-display);
  font-size:clamp(2.1rem, 5.2vw, 3.4rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.03em;
  color:#ffffff;
  max-width:860px;
  margin:0 auto 16px auto;
  text-shadow:0 4px 26px rgba(0,0,0,0.6);
}
.blur-reveal-sub{
  font-size:clamp(1.04rem, 2vw, 1.22rem);
  color:rgba(255, 255, 255, 0.86);
  max-width:62ch;
  margin:0 auto;
  line-height:1.55;
  text-shadow:0 2px 14px rgba(0,0,0,0.5);
}
.blur-word{
  display:inline-block;
  white-space:nowrap;
}
.blur-char{
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  transform:translateY(10px);
  transition:opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
             filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
             transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:opacity, filter, transform;
}
.blur-char.is-revealed{
  opacity:1;
  filter:blur(0px);
  transform:translateY(0);
}
@media (max-width:680px){
  .blur-reveal-section{ padding-block:64px; }
}

/* ============ GOOGLE ANIMATED CARD DIAGRAM ============ */
.google-insight-wrap{
  margin-top:46px;
  margin-bottom:12px;
  display:flex;
  justify-content:center;
}
.animated-card{
  position:relative;
  width:100%;
  max-width:490px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(95, 212, 255, 0.35);
  background:rgba(12, 26, 64, 0.75);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -10px rgba(0, 0, 0, 0.5),
             0 0 30px rgba(47, 95, 224, 0.25);
  transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 0.4s ease,
             border-color 0.4s ease;
}
.animated-card:hover, .animated-card.is-active{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(95, 212, 255, 0.7);
  box-shadow:0 28px 60px -10px rgba(0, 0, 0, 0.65),
             0 0 40px rgba(95, 212, 255, 0.35);
}

.card-visual{
  position:relative;
  height:225px;
  width:100%;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%, #152d70 0%, #07122e 100%);
  border-top-left-radius:23px;
  border-top-right-radius:23px;
  border-bottom:1px solid rgba(255, 255, 255, 0.1);
}

.visual2-container{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.visual2-hitbox{
  position:absolute;
  inset:0;
  z-index:30;
  cursor:pointer;
}

/* Grid & Radial Background */
.diagram-grid-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:center center;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
}

.diagram-radial-glow{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(95, 212, 255, 0.28) 0%, rgba(47, 95, 224, 0.18) 45%, transparent 75%);
}

/* Donut Chart (Layer 1) */
.diagram-donut-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:transform 0.5s cubic-bezier(0.6, 0.6, 0, 1);
}
.animated-card.is-active .diagram-donut-wrap{
  transform:translateY(-14px) scale(1.08);
}

.donut-chart-container{
  position:relative;
  width:125px;
  height:125px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.donut-chart-container svg{
  transform:rotate(-90deg);
}
.donut-main, .donut-secondary{
  stroke-dasharray:251.32;
  transition:stroke-dashoffset 0.6s cubic-bezier(0.6, 0.6, 0, 1);
}
.donut-secondary{
  stroke-dashoffset:251.32; /* 0% */
}
.donut-main{
  stroke-dashoffset:218.6; /* 13% default di partenza */
}
.animated-card.is-active .donut-secondary{
  stroke-dashoffset:226.2; /* 10% — CTR medio reale dei siti seguiti */
}
.animated-card.is-active .donut-main{
  stroke-dashoffset:25; /* 90.1% */
}

.donut-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-family:var(--font-data);
  font-size:1.5rem;
  font-weight:700;
  text-shadow:0 0 12px rgba(95,212,255,0.8);
}

/* Default Subcard Overlay (Layer 2) */
.diagram-subcard{
  position:absolute;
  inset-inline:0;
  top:14px;
  z-index:12;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
  padding-inline:16px;
  transition:transform 0.5s cubic-bezier(0.6, 0.6, 0, 1),
             opacity 0.5s cubic-bezier(0.6, 0.6, 0, 1);
}
.animated-card.is-active .diagram-subcard{
  opacity:0;
  transform:translateY(24px);
}
.diagram-subcard-inner{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255, 255, 255, 0.14);
  border:1px solid rgba(255, 255, 255, 0.25);
  padding:5px 14px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.diagram-dot-indicator{
  width:7px; height:7px; border-radius:50%;
  background:#5fd4ff;
  box-shadow:0 0 8px #5fd4ff;
}
.diagram-subcard-title{
  font-size:.78rem;
  font-weight:700;
  color:#ffffff;
  font-family:var(--font-data);
  letter-spacing:0.02em;
  margin:0;
}
.diagram-subcard-desc{
  font-size:.72rem;
  color:rgba(255,255,255,0.8);
  margin:4px 0 0 0;
}

/* Exploding Badges (Layer 4) */
.diagram-badges-layer{
  position:absolute;
  inset:0;
  z-index:15;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.45s ease;
}
.animated-card.is-active .diagram-badges-layer{
  opacity:1;
}
.diagram-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(8, 20, 52, 0.92);
  border:1px solid rgba(95, 212, 255, 0.6);
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(95, 212, 255, 0.3);
  padding:4px 11px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#ffffff;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
  transform:translate(0px, 0px) scale(0.5);
  transition:transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease;
}
.animated-card.is-active .diagram-badge{
  transform:translate(var(--tx), var(--ty)) scale(1);
}
.badge-dot{
  width:6px; height:6px; border-radius:50%;
  flex-shrink:0;
}

/* Card Body */
.card-body{
  padding:22px 26px 24px 26px;
  text-align:left;
}
.card-title{
  font-family:var(--font-body);
  font-size:1.12rem;
  font-weight:700;
  color:#ffffff;
  margin-bottom:6px;
  line-height:1.3;
}
.card-description{
  font-size:.88rem;
  color:rgba(255, 255, 255, 0.78);
  line-height:1.48;
  margin:0;
}

@media (hover: hover) {
  .animated-card:hover{
    transform:translateY(-5px) scale(1.015);
    border-color:rgba(95, 212, 255, 0.7);
    box-shadow:0 28px 60px -10px rgba(0, 0, 0, 0.65), 0 0 40px rgba(95, 212, 255, 0.35);
  }
  .animated-card:hover .diagram-donut-wrap{ transform:translateY(-14px) scale(1.08); }
  .animated-card:hover .donut-secondary{ stroke-dashoffset:226; }
  .animated-card:hover .donut-main{ stroke-dashoffset:25; }
  .animated-card:hover .diagram-subcard{ opacity:0; transform:translateY(24px); }
  .animated-card:hover .diagram-badges-layer{ opacity:1; }
  .animated-card:hover .diagram-badge{ transform:translate(var(--tx), var(--ty)) scale(1); }
}

@media (max-width:560px){
  .google-insight-wrap{ margin-top:32px; padding-inline:6px; }
  .animated-card{ max-width:100%; border-radius:18px; }
  .card-visual{ height:200px; }
  .donut-chart-container{ width:110px; height:110px; }
  .donut-label{ font-size:1.35rem; }
  .diagram-subcard-title{ font-size:.72rem; }
  .diagram-subcard-desc{ font-size:.64rem; }
  .diagram-badge{
    font-size:.62rem;
    padding:3.5px 7.5px;
    gap:4px;
  }
  .animated-card.is-active .diagram-badge{
    transform:translate(calc(var(--tx) * 0.58), calc(var(--ty) * 0.72)) scale(0.92);
  }
  .card-body{ padding:18px 18px 20px 18px; }
  .card-title{ font-size:1.02rem; }
  .card-description{ font-size:.82rem; }
}

/* ============ MULTI-STEP LEAD FORM ============ */
.multistep-card{
  padding:32px 30px;
  border-radius:24px;
}
.ms-progress-wrap{
  margin-bottom:26px;
}
.ms-steps{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.ms-step-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:transform .2s ease;
}
.ms-step-node:hover{
  transform:scale(1.05);
}
.ms-step-dot{
  width:28px; height:28px;
  border-radius:50%;
  background:#e2e8f0;
  color:var(--ink-faint);
  font-family:var(--font-data);
  font-size:.8rem;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s ease;
}
.ms-step-node.is-active .ms-step-dot{
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 4px rgba(47,95,224,0.22);
}
.ms-step-node.is-complete .ms-step-dot{
  background:#10b981;
  color:#fff;
}
.ms-step-label{
  font-family:var(--font-data);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-faint);
  transition:color .3s ease;
}
.ms-step-node.is-active .ms-step-label{
  color:var(--blue-deep);
  font-weight:700;
}
.ms-progress-bar{
  width:100%;
  height:5px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.ms-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--blue), #5fd4ff);
  transition:width .4s cubic-bezier(.22,1,.36,1);
  border-radius:999px;
}

.ms-pane{
  display:none;
  animation:msPaneFadeIn .35s cubic-bezier(.22,1,.36,1) forwards;
}
.ms-pane.is-active{
  display:block;
}
@keyframes msPaneFadeIn{
  0%{ opacity:0; transform:translateX(16px); }
  100%{ opacity:1; transform:translateX(0); }
}
.ms-pane-head{
  margin-bottom:20px;
}
.ms-pane-title{
  font-family:var(--font-body);
  font-size:1.12rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.ms-pane-desc{
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.35;
}

.ms-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
}
.ms-btn-prev{
  min-width:94px;
}
.ms-btn-next, .ms-btn-submit{
  min-width:140px;
}
@media (max-width:560px){
  .multistep-card{ padding:24px 18px; }
  .ms-pane-title{ font-size:1.05rem; }
  .ms-footer{ flex-direction:row; }
  .ms-btn-next, .ms-btn-submit{ flex:1; }
}