/* ───────────────────────────────────────────────
   Check-Up ETS — Capital Advisory
   Brand: crema · blu · oro · titoli serif (Playfair)
   ─────────────────────────────────────────────── */
:root {
  --cream: #fdf8f0;
  --cream-2: #f6f2eb;
  --paper: #ffffff;
  --ink: #1a1a1a;
  --gray: #6b6660;
  --line: #e7e0d4;
  --blue: #3978d3;
  --blue-dark: #2a5fb0;
  --blue-light: #6ca0ff;
  --blue-pale: #eaf1fb;
  --orange: #ff9900;
  --gold: #c9b174;
  --gold-soft: #e6d8b9;
  --radius: 16px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

body {
  font-family: var(--sans);
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, #dfeafb 0%, rgba(223,234,251,0) 55%),
    linear-gradient(180deg, #fbf6ee 0%, #f3ece0 100%);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
}
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
body::before { top: -90px; right: -70px; width: 260px; height: 260px; background: rgba(57,120,211,0.12); }
body::after  { bottom: -70px; left: -70px; width: 220px; height: 220px; background: rgba(255,153,0,0.08); }

#app { width: 100%; max-width: 440px; position: relative; z-index: 1; }

/* ── Card ── */
.q-card {
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(40,30,15,0.18), 0 0 0 1px rgba(201,177,116,0.18);
}

/* ── Intro / hero (schermata iniziale IG) ── */
.intro { position: relative; }
.intro-hero {
  display: block;
  width: 100%;
  height: auto;
  background: var(--cream);
}
.intro-cta-wrap { padding: 20px 22px 24px; background: var(--paper); }
.intro-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.intro-sub {
  font-size: 15px; color: var(--gray); line-height: 1.6; margin-bottom: 18px;
}
.intro-meta {
  display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.intro-meta span { font-size: 13px; color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.intro-meta .dot { color: var(--blue); font-size: 15px; }

/* ── Header ── */
.q-header { padding: 18px 22px 14px; background: var(--cream); border-bottom: 1px solid var(--line); }
.q-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.q-back { background: none; border: none; cursor: pointer; color: var(--gray); font-size: 13px; font-weight: 600; font-family: inherit; padding: 0; }
.q-back:hover { color: var(--ink); }
.q-brand { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: 2px; text-transform: uppercase; }
.q-counter { font-size: 12px; color: var(--gray); font-weight: 700; background: var(--paper); border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px; }
.q-progress { height: 5px; background: #ece5d8; border-radius: 3px; overflow: hidden; }
.q-progress-bar { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); border-radius: 3px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }

/* ── Body ── */
.q-body { padding: 26px 22px 24px; }
.eyebrow { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.q-title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.3px; }
.q-title.sm { font-size: 23px; }
.q-sub { font-size: 14px; color: var(--gray); line-height: 1.55; }
.step-intro { margin-bottom: 22px; }

/* ── Selezione tipo ── */
.type-list { display: flex; flex-direction: column; gap: 10px; }
.type-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--paper); cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; transition: all 0.2s ease;
}
.type-card:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 8px 22px rgba(57,120,211,0.14); }
.type-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.type-text { flex: 1; display: flex; flex-direction: column; }
.type-label { font-weight: 700; color: var(--ink); font-size: 15px; }
.type-full { font-size: 12px; color: var(--gray); font-weight: 500; margin-top: 2px; }
.type-arrow { color: var(--gold); font-size: 20px; font-weight: 400; }

/* ── Domande ── */
.q-questions { display: flex; flex-direction: column; gap: 20px; min-height: 220px; }
.q-question-text { font-size: 15px; font-weight: 600; color: #2a2a2a; margin-bottom: 12px; line-height: 1.5; padding-left: 12px; border-left: 3px solid var(--gold); }
.yn-group { display: flex; gap: 10px; }
.yn-btn {
  flex: 1; padding: 13px 0; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--cream); color: var(--gray); font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit; letter-spacing: 0.3px; transition: all 0.15s ease;
}
.yn-btn:hover { transform: scale(1.03); border-color: var(--blue-light); }
.yn-btn.yes-active { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(57,120,211,0.3); }
.yn-btn.no-active { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ── CTA ── */
.q-cta {
  margin-top: 24px; width: 100%; padding: 16px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; letter-spacing: 0.3px;
  box-shadow: 0 10px 26px rgba(57,120,211,0.32); transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.q-cta:hover:not(.disabled):not(.loading) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(57,120,211,0.45); }
.q-cta.disabled { background: #ece5d8; color: #b3aa99; cursor: not-allowed; box-shadow: none; }
.q-cta.loading { background: #ddd5c6; color: #8a8275; cursor: not-allowed; box-shadow: none; }
.q-cta.big { font-size: 16px; padding: 17px; }

/* ── Form ── */
.q-fields { display: flex; flex-direction: column; gap: 14px; }
.field label { font-size: 12px; font-weight: 700; color: #4a443c; letter-spacing: 0.5px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.field label span { color: var(--blue); }
.field input {
  width: 100%; padding: 13px 14px; font-size: 15px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--cream); color: var(--ink); font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(57,120,211,0.16); background: #fff; }
.field input.input-error { border-color: #d4564b; }
.field-err { color: #d4564b; font-size: 12px; margin-top: 5px; font-weight: 500; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* GDPR */
.gdpr { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.gdpr-box {
  width: 20px; height: 20px; min-width: 20px; border: 1.5px solid #c9c0b0; border-radius: 5px;
  cursor: pointer; margin-top: 1px; background: #fff; display: flex; align-items: center;
  justify-content: center; transition: all 0.15s;
}
.gdpr-box.checked { background: var(--blue); border-color: var(--blue); }
.gdpr-box:focus { outline: none; box-shadow: 0 0 0 3px rgba(57,120,211,0.22); }
.gdpr-text { font-size: 12px; color: var(--gray); line-height: 1.6; }
.gdpr-text a { color: var(--blue); font-weight: 600; }

/* ── Conferma ── */
.confirm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 8px; }
.confirm-icon {
  width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 22px;
  box-shadow: 0 0 0 12px rgba(57,120,211,0.12), 0 16px 40px rgba(57,120,211,0.32);
  animation: popIn 0.5s cubic-bezier(0.4,0,0.2,1) both, float 3s ease-in-out 0.5s infinite;
}
.confirm-title { font-family: var(--serif); font-size: 27px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 10px; }
.confirm-text { font-size: 15px; color: var(--gray); line-height: 1.7; margin-bottom: 22px; }
.confirm-text strong { color: #2a2a2a; }
.confirm-box { width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-align: left; display: flex; gap: 10px; align-items: flex-start; }
.confirm-box-icon { font-size: 20px; margin-top: 1px; }
.confirm-box-title { font-size: 13px; font-weight: 700; color: #2a2a2a; margin-bottom: 4px; }
.confirm-box-sub { font-size: 13px; color: var(--gray); line-height: 1.6; }

/* spinner */
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }

/* ── Animazioni ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.anim-in { animation: fadeIn 0.32s cubic-bezier(0.4,0,0.2,1); }
.anim-back { animation: fadeBack 0.32s cubic-bezier(0.4,0,0.2,1); }
.anim-up { animation: fadeUp 0.4s cubic-bezier(0.4,0,0.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}