/* =========================================================
   CONTATTI · Richiedi demo
   Design system: eredita home.css + prodotto.css (navy + cyan)
   Namespace: .ct-*  (contatti)   .df-*  (demo form)
   ========================================================= */

/* ---------- HERO (sobrio, testuale) ---------- */
.ct-hero{
  position:relative;
  padding:clamp(80px,9vw,128px) 0 clamp(40px,5vw,64px);
  border-bottom:1px solid var(--bd-2);
  overflow:hidden;
}
.ct-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(0,180,216,.10), transparent 60%),
    radial-gradient(1000px 500px at 88% 30%, rgba(0,119,182,.08), transparent 70%);
  pointer-events:none;
}
.ct-hero .wrap{position:relative;z-index:1}

.ct-hero-grid{
  display:grid;grid-template-columns:1.55fr .8fr;gap:clamp(32px,5vw,80px);
  align-items:end;margin-top:24px;
}
.ct-hero-grid h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,4.6vw,58px);line-height:1.08;
  letter-spacing:-.02em;margin:10px 0 16px;
}
.ct-hero-grid .lead{max-width:60ch;margin-bottom:22px}

.ct-hero-chips{display:flex;gap:10px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--bd-2);margin-top:8px}

/* numero/glyph a destra */
.ct-hero-side{
  position:relative;text-align:right;
  font-family:var(--serif);color:var(--muted-3);
  padding-right:4px;
}
.ct-hero-side .glyph{
  display:block;font-size:clamp(96px,12vw,180px);line-height:.9;
  background:linear-gradient(180deg, rgba(0,180,216,.28), rgba(0,119,182,.04));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:500;letter-spacing:-.04em;
}
.ct-hero-side .gl-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;margin-top:6px;
}

@media (max-width:900px){
  .ct-hero-grid{grid-template-columns:1fr;gap:32px}
  .ct-hero-side{text-align:left}
}

/* ---------- BODY · 2 colonne ---------- */
.ct-body{
  position:relative;
  padding:clamp(48px,6vw,88px) 0 clamp(56px,6vw,96px);
}
.ct-body::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 300px at 80% 0%, rgba(0,180,216,.05), transparent 70%);
  pointer-events:none;
}
.ct-body .wrap{position:relative;z-index:1}

.ct-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media (max-width:980px){
  .ct-grid{grid-template-columns:1fr;gap:48px}
}

/* ---------- FORM CARD ---------- */
.ct-form-col .sec-num{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--cyan-400);text-transform:uppercase;margin-bottom:10px;
}
.ct-form-col h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,2.8vw,36px);line-height:1.14;letter-spacing:-.015em;
  margin-bottom:12px;
}
.ct-form-col > .lead{margin-bottom:32px}

.demo-form{
  background:linear-gradient(180deg, rgba(16,24,39,.55), rgba(16,24,39,.25));
  border:1px solid var(--bd);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,36px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
  position:relative;
}
.demo-form::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(0,180,216,.18), transparent 40%);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:1px;pointer-events:none;
}

/* honeypot — invisibile per umani, visibile ai bot */
.hp-wrap{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* rows di 2 colonne */
.df-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-bottom:16px;
}
@media (max-width:640px){
  .df-row{grid-template-columns:1fr}
}

.df-field{display:flex;flex-direction:column;gap:6px;position:relative}

.df-field label,
.df-fieldset legend{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-2);text-transform:uppercase;font-weight:500;
}
.df-opt{font-family:var(--mono);font-size:9.5px;color:var(--muted);text-transform:none;letter-spacing:.04em;font-weight:400;margin-left:4px}
.req-star{color:var(--cyan-400);font-weight:600;margin-left:2px}

/* input base */
.df-field input[type="text"],
.df-field input[type="email"],
.df-field input[type="tel"],
.df-field textarea,
.df-select select{
  width:100%;
  background:rgba(6,11,22,.55);
  border:1px solid var(--bd);
  border-radius:3px;
  color:var(--ink);
  font-family:var(--sans);font-size:14px;
  padding:11px 13px;
  line-height:1.4;
  transition:border-color .15s, background .15s, box-shadow .15s;
  outline:none;
  appearance:none;-webkit-appearance:none;
}
.df-field textarea{resize:vertical;min-height:120px;font-family:var(--sans)}
.df-field input::placeholder,
.df-field textarea::placeholder{color:var(--muted-2)}

.df-field input:hover,
.df-field textarea:hover,
.df-select select:hover{border-color:var(--bd-strong)}

.df-field input:focus-visible,
.df-field textarea:focus-visible,
.df-select select:focus-visible{
  border-color:var(--cyan-500);
  background:rgba(0,180,216,.04);
  box-shadow:0 0 0 3px rgba(0,180,216,.14);
}

/* invalid */
.df-field input.is-invalid,
.df-field textarea.is-invalid,
.df-select select.is-invalid{
  border-color:#f87171;
  background:rgba(248,113,113,.05);
  box-shadow:0 0 0 3px rgba(248,113,113,.1);
}

/* select + caret */
.df-select{position:relative;display:block}
.df-select select{padding-right:36px;cursor:pointer}
.df-select select option{background:var(--navy-900);color:var(--ink)}
.df-select-caret{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;transition:color .15s;
}
.df-select:hover .df-select-caret,
.df-select select:focus-visible + .df-select-caret{color:var(--cyan-400)}

/* fieldset radios */
.df-fieldset{
  border:0;padding:0;margin:0;
  display:flex;flex-direction:column;gap:6px;
}
.df-fieldset.is-invalid .rdot{border-color:#f87171}

.df-radios{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
@media (max-width:720px){.df-radios{grid-template-columns:1fr}}

.df-radio{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:9px 12px;
  background:rgba(6,11,22,.35);
  border:1px solid var(--bd);border-radius:3px;
  transition:all .15s;
  font-size:13px;color:var(--ink-2);
  min-height:44px; /* tap target */
}
.df-radio:hover{border-color:var(--bd-strong);background:rgba(0,180,216,.04)}
.df-radio input{position:absolute;opacity:0;pointer-events:none}
.df-radio .rdot{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--bd-strong);
  flex:none;position:relative;transition:all .15s;
  background:rgba(6,11,22,.6);
}
.df-radio .rdot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--cyan-400);transform:scale(0);transition:transform .18s;
}
.df-radio input:checked + .rdot{border-color:var(--cyan-400)}
.df-radio input:checked + .rdot::after{transform:scale(1)}
.df-radio input:focus-visible + .rdot{box-shadow:0 0 0 3px rgba(0,180,216,.2)}
.df-radio:has(input:checked){
  border-color:rgba(0,180,216,.4);
  background:rgba(0,180,216,.06);
  color:var(--ink);
}

/* hints + errors */
.df-hint{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em}
.df-hint-counter{display:block;margin-top:4px;text-align:right}
.df-err{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  color:#fca5a5;min-height:14px;
  display:block;
}
.df-err:not(:empty)::before{
  content:"⚠ ";margin-right:3px;
}

/* consents */
.df-consents{
  display:flex;flex-direction:column;gap:12px;
  padding:16px 0;margin:12px 0 4px;
  border-top:1px solid var(--bd-2);border-bottom:1px solid var(--bd-2);
}
.df-check{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;font-size:13px;color:var(--ink-2);line-height:1.5;
  min-height:44px;padding:4px 0;
}
.df-check input{position:absolute;opacity:0;pointer-events:none}
.df-check .cbox{
  width:18px;height:18px;border-radius:3px;flex:none;
  border:1.5px solid var(--bd-strong);
  background:rgba(6,11,22,.6);
  display:flex;align-items:center;justify-content:center;
  color:transparent;transition:all .15s;
  margin-top:1px;
}
.df-check input:checked + .cbox{
  background:var(--cyan-500);border-color:var(--cyan-500);
  color:var(--navy-900);
}
.df-check input:focus-visible + .cbox{box-shadow:0 0 0 3px rgba(0,180,216,.22)}
.df-check .clbl a{color:var(--cyan-400);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px}
.df-check .clbl a:hover{color:var(--cyan-300)}
.df-check input.is-invalid + .cbox{border-color:#f87171}

/* submit row */
.df-submit-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;
}
.df-submit{
  min-height:48px;padding:14px 22px;font-size:13.5px;
  position:relative;
}
.df-submit .df-spinner{
  display:none;
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:dfspin .7s linear infinite;
}
.df-submit.is-loading .df-spinner{display:inline-block}
.df-submit.is-loading .arr{display:none}
.df-submit.is-loading{opacity:.8;cursor:wait}
@keyframes dfspin{to{transform:rotate(360deg)}}

.df-secure{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--muted);
}
.df-secure svg{color:var(--cyan-500)}

/* status (ARIA live) */
.df-status{
  display:none;
  margin-top:18px;padding:14px 16px;
  border-radius:3px;
  font-size:13.5px;line-height:1.5;
  border:1px solid var(--bd);
  background:rgba(6,11,22,.4);
}
.df-status:not(:empty){display:block}
.df-status.is-pending{border-color:rgba(148,163,184,.3);color:var(--ink-2)}
.df-status.is-success{
  border-color:rgba(16,185,129,.4);
  background:rgba(16,185,129,.08);
  color:#a7f3d0;
}
.df-status.is-error{
  border-color:rgba(248,113,113,.4);
  background:rgba(248,113,113,.06);
  color:#fecaca;
}
.df-status strong{color:inherit;font-weight:600}

/* ---------- INFO COL ---------- */
.ct-info-col{
  position:sticky;top:96px;
  align-self:start;
}
@media (max-width:980px){.ct-info-col{position:static}}

.ct-info-col .sec-num{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--cyan-400);text-transform:uppercase;margin-bottom:10px;
}
.ct-info-col h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.01em;
  margin-bottom:22px;
}

.ct-info-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--bd-2);
  margin-bottom:28px;
}
.ct-info-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--bd-2);
}
.ct-ic{
  width:36px;height:36px;flex:none;border-radius:3px;
  background:linear-gradient(135deg, rgba(0,180,216,.12), rgba(0,119,182,.04));
  border:1px solid rgba(0,180,216,.22);
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan-400);
}
.ct-info-item > div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ct-lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;
}
.ct-val{
  font-family:var(--sans);font-size:14.5px;color:var(--ink);
  text-decoration:none;font-weight:500;word-break:break-word;
}
a.ct-val{color:var(--ink);transition:color .15s}
a.ct-val:hover{color:var(--cyan-400)}
.ct-sub{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.02em;margin-top:2px;
}

/* placeholder mappa */
.ct-map{
  position:relative;margin-bottom:26px;
  border:1px solid var(--bd);border-radius:var(--radius);
  overflow:hidden;background:var(--navy-800);
}
.ct-map-lbl{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase;
  background:rgba(6,11,22,.7);border:1px solid var(--bd);
  padding:3px 8px;border-radius:2px;
}
.ct-map-svg{display:block;width:100%;height:auto}
.ct-map-caption{
  display:block;padding:10px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--muted);
  border-top:1px solid var(--bd-2);
  background:rgba(6,11,22,.4);
}

/* canali */
.ct-channels{
  padding-top:8px;
}
.ct-ch-label{
  display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;margin-bottom:10px;
}
.ct-ch-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.ct-ch{
  display:flex;align-items:center;gap:10px;
  padding:12px;
  background:rgba(6,11,22,.4);
  border:1px solid var(--bd);border-radius:3px;
  text-decoration:none;color:var(--ink-2);
  transition:all .15s;min-height:44px;
}
.ct-ch:hover{border-color:rgba(0,180,216,.35);background:rgba(0,180,216,.04);color:var(--ink)}
.ct-ch-ic{
  width:28px;height:28px;flex:none;border-radius:3px;
  border:1px solid var(--bd);background:rgba(6,11,22,.6);
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan-400);
}
.ct-ch-txt{font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.02em}
.ct-ch-txt em{font-style:normal;color:var(--muted)}

/* ---------- TIMELINE ---------- */
.ct-timeline{
  position:relative;
  padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px);
  border-top:1px solid var(--bd-2);
  background:linear-gradient(180deg, transparent, rgba(6,11,22,.3));
  overflow:hidden;
}
.ct-timeline::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 400px at 20% 100%, rgba(0,180,216,.06), transparent 70%);
  pointer-events:none;
}
.ct-timeline .wrap{position:relative;z-index:1;max-width:920px}

.ct-timeline .sec-num{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--cyan-400);text-transform:uppercase;margin-bottom:10px;
}
.ct-timeline h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(26px,3vw,38px);line-height:1.14;letter-spacing:-.015em;
  margin-bottom:12px;
}
.ct-timeline > .wrap > .lead{margin-bottom:40px;max-width:62ch}

.tl-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  position:relative;
}
@media (max-width:780px){.tl-steps{grid-template-columns:1fr}}

.tl-step{
  position:relative;
  padding:22px 22px 22px 22px;
  background:linear-gradient(180deg, rgba(16,24,39,.55), rgba(16,24,39,.25));
  border:1px solid var(--bd);border-radius:var(--radius);
  display:flex;gap:18px;align-items:flex-start;
  transition:border-color .2s, transform .2s;
}
.tl-step:hover{border-color:rgba(0,180,216,.25);transform:translateY(-2px)}

.tl-num{
  font-family:var(--mono);font-size:22px;font-weight:500;
  color:var(--cyan-400);
  background:linear-gradient(135deg, rgba(0,180,216,.12), rgba(0,119,182,.04));
  border:1px solid rgba(0,180,216,.25);
  border-radius:3px;
  width:48px;height:48px;flex:none;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.02em;
}

.tl-body{flex:1;min-width:0}
.tl-body h3{
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  color:var(--ink);margin:0 0 6px;letter-spacing:-.005em;
}
.tl-body p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.tl-meta{
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--bd);border-radius:2px;
  background:rgba(6,11,22,.4);
}

/* ---------- todo placeholder ---------- */
.todo{
  font-style:italic;color:#fbbf24;letter-spacing:.02em;
  font-size:inherit;
}