/* VolleyVector — stile comune del sito. Colori del logo "Calice". */
:root{
  --navy:#0B2A55; --blue:#0050B5; --yellow:#F5C400;
  --ink:#14213D; --muted:#5A6475; --line:#E3E7EE; --bg:#FFFFFF; --soft:#F4F7FB;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:17px; line-height:1.6;
}
a{ color:var(--blue); }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* Intestazione */
header.top{ border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10; }
header.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
header.top .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); }
header.top .logo img{ height:36px; width:auto; }
header.top .logo span{ font-weight:300; font-size:17px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; }
header.top .logo b{ font-weight:300; color:var(--blue); }
nav.menu{ display:flex; gap:22px; font-size:15px; }
nav.menu a{ color:var(--ink); text-decoration:none; }
nav.menu a:hover{ color:var(--blue); }
nav.menu a.cta{ color:#fff; background:var(--blue); padding:8px 16px; border-radius:8px; }
nav.menu a.cta:hover{ background:var(--navy); color:#fff; }
@media (max-width:720px){
  nav.menu a:not(.cta){ display:none; }
  header.top .logo img{ height:30px; }
  header.top .logo span{ font-size:14px; letter-spacing:.16em; }
}

/* Apertura */
.hero{ background:var(--navy); color:#fff; padding:72px 0 80px; }
.hero .wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.hero .kicker{ color:var(--yellow); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 14px; }
.hero h1{ font-size:clamp(30px, 5vw, 46px); line-height:1.15; margin:0 0 18px; font-weight:700; }
.hero p.lead{ font-size:19px; color:#D6DEEA; margin:0 0 28px; max-width:600px; }
.hero .mark{ justify-self:center; width:min(260px, 70%); background:#fff; border-radius:28px; padding:26px; }
@media (max-width:820px){
  .hero{ padding:48px 0 56px; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero .mark{ display:none; }
}
.btn{ display:inline-block; padding:13px 22px; border-radius:10px; font-weight:600; text-decoration:none; font-size:16px; }
.btn.primary{ background:var(--yellow); color:var(--navy); }
.btn.primary:hover{ background:#FFD633; }
.btn.ghost{ color:#fff; border:1px solid rgba(255,255,255,.45); margin-left:10px; }
.btn.ghost:hover{ border-color:#fff; }
.btn.blue{ background:var(--blue); color:#fff; }
.btn.blue:hover{ background:var(--navy); }

/* Schermate dell'app in una cornice da tablet */
.device{ background:#0E1726; border-radius:22px; padding:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.device img{ border-radius:12px; width:100%; }
.hero.with-shot .wrap{ grid-template-columns:1fr 1.15fr; }
.hero.with-shot .device{ transform:perspective(1400px) rotateY(-8deg); }
.hero .hero-mock{ width:118%; max-width:none; margin:-30px -10% -50px 0; }
@media (max-width:820px){ .hero .hero-mock{ width:100%; margin:8px 0 -20px; } }
@media (max-width:820px){
  .hero.with-shot .wrap{ grid-template-columns:1fr; }
  .hero.with-shot .device{ transform:none; margin-top:8px; }
}
.card .shot{ margin:-24px -24px 18px; border-bottom:1px solid var(--line); background:#0E1726; border-radius:14px 14px 0 0; overflow:hidden; aspect-ratio:4/3; }
.card .shot img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.card .shot.fit{ display:flex; align-items:center; padding:10px; }
.card .shot.fit img{ height:auto; object-fit:contain; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
figure{ margin:0; }
figcaption{ font-size:14px; color:var(--muted); margin-top:10px; text-align:center; }

/* Analisi AI */
section.ai{ background:linear-gradient(180deg, #fff 0%, #EEF4FC 100%); }
section.ai .kicker{ color:var(--blue); font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin:0 0 10px; }
section.ai .split{ grid-template-columns:1fr 1.05fr; align-items:center; }
@media (max-width:820px){ section.ai .split{ grid-template-columns:1fr; } }
ul.ai-list{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px; }
ul.ai-list li{ padding-left:30px; position:relative; }
ul.ai-list li::before{ content:""; position:absolute; left:2px; top:.45em; width:14px; height:14px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 3px #FFF3B8; }
ul.ai-list strong{ display:block; color:var(--navy); }
ul.ai-list em.soon{ font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--yellow); color:var(--navy); padding:2px 8px; border-radius:20px; margin-left:6px; vertical-align:2px; }
ul.ai-list span{ color:var(--muted); font-size:16px; }
p.example{ border-left:4px solid var(--blue); background:#fff; padding:14px 18px; border-radius:0 10px 10px 0; margin:0; font-size:16px; }

/* Maschera tester */
dialog.tester{ border:none; border-radius:16px; padding:0; width:min(560px, calc(100% - 24px)); max-height:calc(100% - 24px); box-shadow:0 30px 80px rgba(11,42,85,.35); color:var(--ink); }
dialog.tester [hidden]{ display:none !important; }
dialog.tester::backdrop{ background:rgba(11,42,85,.55); }
dialog.tester .head{ background:var(--navy); color:#fff; padding:20px 24px; position:sticky; top:0; z-index:1; }
dialog.tester .head h2{ color:#fff; margin:0; font-size:22px; }
dialog.tester .head p{ margin:4px 0 0; color:#D6DEEA; font-size:15px; }
dialog.tester .x{ position:absolute; right:14px; top:14px; background:none; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; }
dialog.tester form{ padding:20px 24px 24px; display:grid; gap:14px; }
dialog.tester label{ display:grid; gap:5px; font-size:15px; font-weight:600; color:var(--navy); }
dialog.tester label small{ font-weight:400; color:var(--muted); }
dialog.tester input, dialog.tester select, dialog.tester textarea{ font:inherit; font-size:16px; padding:10px 12px; border:1px solid #C9D2DF; border-radius:8px; background:#fff; color:var(--ink); width:100%; }
dialog.tester input:focus, dialog.tester select:focus, dialog.tester textarea:focus{ outline:2px solid var(--blue); border-color:var(--blue); }
dialog.tester .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
@media (max-width:520px){ dialog.tester .row{ grid-template-columns:1fr; } }
dialog.tester label.check{ display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--ink); }
dialog.tester label.check input{ width:20px; height:20px; margin-top:2px; flex:none; }
dialog.tester button.send{ border:none; cursor:pointer; margin-top:4px; }
dialog.tester .done{ padding:24px; }
dialog.tester .done p{ margin:0 0 14px; }

/* Sezioni */
section{ padding:64px 0; }
section.soft{ background:var(--soft); }
h2{ font-size:clamp(24px, 3.4vw, 32px); line-height:1.2; margin:0 0 10px; color:var(--navy); }
p.intro{ color:var(--muted); margin:0 0 34px; max-width:700px; }
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; }
.card h3{ margin:0 0 8px; font-size:19px; color:var(--navy); }
.card p{ margin:0; color:var(--muted); font-size:16px; }
.card .tag{ display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); font-weight:700; margin-bottom:10px; }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }

ol.steps{ list-style:none; counter-reset:s; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 28px; }
ol.steps li{ counter-increment:s; position:relative; padding-left:52px; }
ol.steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--yellow); font-weight:700; display:flex; align-items:center; justify-content:center; }
ol.steps li strong{ display:block; color:var(--navy); }
ol.steps li span{ color:var(--muted); font-size:16px; }
@media (max-width:720px){ ol.steps{ grid-template-columns:1fr; } }

.note{ border-left:4px solid var(--yellow); background:#FFFBEA; padding:16px 20px; border-radius:0 10px 10px 0; color:var(--ink); }

ul.specs{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px 28px; }
ul.specs li{ padding-left:28px; position:relative; }
ul.specs li::before{ content:""; position:absolute; left:4px; top:.55em; width:12px; height:7px; border-left:3px solid var(--blue); border-bottom:3px solid var(--blue); transform:rotate(-45deg); }
@media (max-width:720px){ ul.specs{ grid-template-columns:1fr; } }

.price{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; }
.price .card .amount{ font-size:34px; font-weight:700; color:var(--navy); margin:6px 0; }
.price .card .amount small{ font-size:16px; color:var(--muted); font-weight:400; }
@media (max-width:720px){ .price{ grid-template-columns:1fr; } }

.cta-band{ background:var(--navy); color:#fff; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#D6DEEA; margin:0 auto 26px; max-width:620px; }

/* Pagine di testo (privacy, condizioni, tester) */
main.doc{ padding:48px 0 64px; }
main.doc .wrap{ max-width:780px; }
main.doc h1{ color:var(--navy); font-size:clamp(28px, 4vw, 38px); margin:0 0 6px; }
main.doc .updated{ color:var(--muted); font-size:14px; margin:0 0 30px; }
main.doc h2{ font-size:22px; margin:34px 0 8px; }
main.doc li{ margin-bottom:6px; }
.placeholder{ background:#FFF1F0; border:1px dashed #E0645C; padding:2px 6px; border-radius:4px; }

/* Piè di pagina */
footer.bottom{ border-top:1px solid var(--line); padding:28px 0; font-size:14px; color:var(--muted); }
footer.bottom .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
footer.bottom a{ color:var(--muted); margin-left:18px; }
footer.bottom a:first-child{ margin-left:0; }