/* =========================================================
   CONTATTI — two-column hero with interactive WhatsApp phone
   ========================================================= */
.c-hero{padding:calc(var(--header-h) + 70px) 0 90px;text-align:left;overflow:hidden}
.c-hero .c-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.c-hero .g1{width:520px;height:520px;right:2%;top:12%;background:rgba(37,211,102,.16)}
.c-hero .g2{width:460px;height:460px;right:22%;bottom:-160px;background:rgba(58,112,168,.18)}
.c-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center}
.c-copy h1{font-size:clamp(40px,4.8vw,76px);max-width:11em;margin:0}
.c-copy .lead{max-width:560px;margin:26px 0 34px}
.c-copy .lead p{margin-bottom:.7em}
.c-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;max-width:600px}
.c-quick a{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.c-quick a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#C9DAEC}
.c-quick a > span{grid-row:1/3;width:42px;height:42px;border-radius:13px;background:var(--ice);color:var(--blue);display:grid;place-items:center}
.c-quick svg{width:19px;height:19px}
.c-quick b{font-family:var(--ff-head);font-size:14px;font-weight:600;color:var(--ink);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-quick small{font-size:12.5px;color:var(--muted)}

/* ---------- phone stage ---------- */
.c-phone-wrap{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1400px}
.c-float{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid rgba(220,230,241,.9);box-shadow:0 26px 50px -24px rgba(15,42,70,.45);animation:cfloat 6s ease-in-out infinite}
.c-float small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.c-float b{font-family:var(--ff-head);font-size:15px;font-weight:600;color:var(--ink)}
.c-float .fi{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--wa);color:#fff}
.c-float .fi--blue{background:var(--blue)}
.c-float .fi svg{width:20px;height:20px}
.c-float.f1{left:-4%;top:6%}
.c-float.f2{right:-4%;bottom:30%;animation-delay:-3s}
@keyframes cfloat{50%{transform:translateY(-12px)}}

.wa-phone{--pw:min(282px,68vw);position:relative;width:var(--pw);height:calc(var(--pw) * 2.02);border-radius:46px;padding:10px;background:linear-gradient(145deg,#2A3140,#0E1116 45%,#1D232D);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),inset 0 0 0 7px #0A0D12,0 60px 110px -40px rgba(15,42,70,.65),0 30px 50px -30px rgba(0,0,0,.45);transform-style:preserve-3d;transition:transform .6s var(--ease);will-change:transform}
.wp-btn{position:absolute;width:4px;border-radius:3px;background:#1A1F27}
.wp-btn.a{left:-3px;top:22%;height:28px}
.wp-btn.b{left:-3px;top:30%;height:48px}
.wp-btn.c{right:-3px;top:27%;height:72px}
.wa-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#EFE7DD;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",var(--ff-body),sans-serif}
.wa-status{position:relative;height:38px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;background:#F6F6F6;color:#111;font-size:12.5px}
.wa-status b{font-weight:600;letter-spacing:.02em}
.wa-island{position:absolute;left:50%;top:8px;width:78px;height:23px;margin-left:-39px;border-radius:20px;background:#000}
.wa-sys{display:flex;gap:5px;align-items:center}
.wa-sys svg{height:11px;width:auto;fill:currentColor}
.wa-head{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 8px 6px;background:#F6F6F6;border-bottom:1px solid #E2E2E2}
.wa-back{width:24px;height:24px;fill:none;stroke:#0A7CFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wa-av{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #E4E4E4;overflow:hidden;display:grid;place-items:center;flex:none}
.wa-av img{width:86%;height:auto}
.wa-who{flex:1;min-width:0;line-height:1.2}
.wa-who b{display:block;font-size:13.5px;font-weight:600;color:#111}
.wa-who small{font-size:11px;color:#667781;transition:color .3s}
.wa-who small.typing{color:#1FA855}
.wa-tools{display:flex;gap:12px}
.wa-tools svg{width:19px;height:19px;fill:none;stroke:#0A7CFF;stroke-width:1.8;stroke-linejoin:round}
.wa-body{position:relative;flex:1;min-height:0;overflow:hidden;background-color:#EFE7DD;background-size:230px}
.wa-msgs{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px 10px 8px}
.wa-pill{align-self:center;padding:4px 10px;border-radius:7px;font-size:10.5px;color:#54656F;background:#FFF5C4;box-shadow:0 1px .5px rgba(11,20,26,.13);text-align:center}
.wa-pill.day{background:#fff;font-weight:500}
.wa-b{position:relative;max-width:84%;padding:6px 9px 16px;border-radius:11px;font-size:12.5px;line-height:1.36;color:#111B21;box-shadow:0 1px .5px rgba(11,20,26,.13);word-wrap:break-word}
.wa-b time{position:absolute;right:8px;bottom:3px;font-size:9.5px;color:#667781;display:flex;align-items:center;gap:3px}
.wa-b.in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.wa-b.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:4px}
.wa-b .tick{width:16px;height:11px;fill:none;stroke:#8696A0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.wa-b .tick.read{stroke:#53BDEB}
.wa-b.in b{display:block;font-size:11px;color:#3A70A8;margin-bottom:2px}
.wa-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:12px;border-top-left-radius:4px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:watyp 1.2s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}
.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes watyp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-chips{flex:none;display:flex;gap:5px;overflow-x:auto;padding:6px 8px 5px;background:#EFE7DD;scrollbar-width:none}
.wa-chips::-webkit-scrollbar{display:none}
.wa-chips button{flex:none;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #DADADA;font:500 11px/1 inherit;font-size:11px;font-family:inherit;color:#0B6E3C;transition:background .3s,color .3s,transform .3s,border-color .3s}
.wa-chips button:hover,.wa-chips button.tap{background:#25D366;border-color:#25D366;color:#fff}
.wa-chips button.tap{transform:scale(.94)}
.wa-input{flex:none;display:flex;align-items:center;gap:6px;padding:6px 8px 14px;background:#F6F6F6}
.wa-field{flex:1;display:flex;align-items:center;gap:6px;padding:0 10px;height:36px;border-radius:22px;background:#fff;border:1px solid #E4E4E4}
.wa-field svg{width:17px;height:17px;flex:none;fill:none;stroke:#8696A0;stroke-width:1.6;stroke-linecap:round}
.wa-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 13px/1.2 inherit;font-size:13px;font-family:inherit;color:#111}
.wa-field:focus-within{border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.wa-send{width:36px;height:36px;flex:none;border-radius:50%;background:#25D366;display:grid;place-items:center;transition:transform .3s,background .3s}
.wa-send svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.wa-send:hover{background:#1DAE55;transform:scale(1.06)}
.wa-note{display:flex;align-items:center;justify-content:center;gap:8px;max-width:340px;margin:22px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.wa-note svg{width:16px;height:16px;color:#1FA855;flex:none}

@media (max-width:960px){
  .c-grid{grid-template-columns:1fr}
  .c-phone-wrap{margin-top:20px}
  .c-float.f1{left:2%}
  .c-float.f2{right:2%}
}
@media (max-width:640px){
  .c-hero{padding-top:calc(var(--header-h) + 50px)}
  .c-quick{grid-template-columns:1fr}
  .c-float{display:none}
  .wa-phone{--pw:min(250px,66vw);border-radius:40px;padding:8px}
  .wa-screen{border-radius:32px}
}