:root {
  --bg: #f3f7f8;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --text: #12303a;
  --muted: #5d7480;
  --line: #d7e4e9;
  --primary: #0d8fb5;
  --primary-strong: #0a6e8b;
  --accent: #e6f6f8;
  --warm: #fdf1e5;
  --shadow: 0 18px 40px rgba(14, 43, 55, 0.08);
  --radius: 24px;
  --hero-a: #dff2f6;
  --hero-b: #fff8ee;
  --hero-c: rgba(13, 143, 181, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", "Noto Sans", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 28%),
    radial-gradient(circle at top right, var(--hero-c), transparent 24%),
    linear-gradient(180deg, #edf6f8 0%, var(--bg) 26%, #f7fbfc 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.section-shell {
  width: min(1160px, calc(100vw - 28px));
  margin: 0 auto;
}

.hero,
.section {
  padding: 18px 0;
}

.hero .section-shell,
.section .section-shell {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(180, 212, 220, 0.8);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 24px 18px;
}

.hero h1,
.section h2 {
  margin: 0 0 12px;
  line-height: 1.05;
}

.hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.3rem);
  max-width: 12ch;
  letter-spacing: -0.03em;
}
.section h2 { font-size: clamp(1.45rem, 5vw, 2rem); }
.section h3 { margin: 0 0 10px; font-size: clamp(1.12rem, 3vw, 1.4rem); }

.hero-copy,
.section-lead,
.split-card p,
.info-card p,
.faq-item p,
.form-note,
.prequal-feedback,
.confirmation-list li,
.lead-form label span,
.locale-card p,
.hero-note,
.spotlight-list li,
.focus-list li,
.journey-step p {
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #6f8b97;
  font-weight: 700;
}

.hero-shell,
.hero-badges,
.card-grid,
.grid,
.prequal-actions,
.focus-grid,
.signup-grid,
.journey-strip {
  display: grid;
  gap: 12px;
}

.hero-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, var(--hero-a), rgba(255, 255, 255, 0.9) 42%, var(--hero-b) 100%);
}

.hero-shell::after {
  content: "";
  position: absolute;
  inset: auto -6% -18% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-c) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.hero-copy-panel,
.hero-spotlight,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-actions {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.hero-note {
  font-size: 0.95rem;
  max-width: 42ch;
}

.hero-badges span,
.info-card,
.locale-card,
.prequal-card,
.faq-item,
.lead-form,
.split-card,
.confirmation-list,
.hero-spotlight,
.focus-card,
.signup-aside,
.journey-step {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-strong);
}

.hero-spotlight,
.focus-card,
.signup-aside,
.journey-step,
.info-card,
.locale-card,
.split-card,
.lead-form,
.faq-item,
.prequal-card {
  padding: 18px;
}

.hero-spotlight {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.hero-visual {
  min-height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.2));
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18px 40px rgba(14, 43, 55, 0.12);
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: var(--hero-position, 82% center);
}

.spotlight-list,
.focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.spotlight-list li,
.focus-list li {
  position: relative;
  padding-inline-start: 18px;
}

.spotlight-list li::before,
.focus-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
}

.spotlight-stats,
.aside-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.spotlight-stats span,
.aside-metrics span {
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(13, 143, 181, 0.08);
  color: var(--text);
  font-weight: 700;
}

.hero-badges {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 18px 0 0;
}

.hero-badges span {
  padding: 14px 16px;
  font-weight: 600;
  background: rgba(243, 250, 252, 0.9);
}

.card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.locale-card h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.section-benefits .info-card:nth-child(2n) {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(242,249,251,0.92));
}

.section-benefits .info-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,238,0.92));
}

.requirement-list,
.confirmation-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.requirement-list li,
.confirmation-list li {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(13, 143, 181, 0.06);
}

.journey-strip {
  grid-template-columns: 1fr;
}

.journey-step {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,250,252,0.9));
}

.journey-index {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 10px;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
}

.split-card {
  display: grid;
  gap: 14px;
}

.focus-grid,
.signup-grid {
  grid-template-columns: 1fr;
}

.warm-card {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.97), rgba(255, 246, 232, 0.94));
}

.section-highlight .section-shell { background: linear-gradient(180deg, #fffdf7 0%, #fff8ee 100%); }
.section-muted .section-shell { background: linear-gradient(180deg, #f8fcfd 0%, #f5fafb 100%); }

.button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(90deg, var(--primary-strong), var(--primary)); color: white; }
.button-secondary { background: white; border-color: var(--line); color: var(--text); }
.button.is-active { box-shadow: inset 0 0 0 2px rgba(13, 143, 181, 0.28); }

.lead-form { display: grid; gap: 18px; }
.prequal-card { background: var(--warm); }
.prequal-actions { grid-template-columns: 1fr; }
.form-grid { display: grid; gap: 14px; }

.form-grid label,
.checks label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

.form-grid input {
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 0 14px;
  background: white;
  color: var(--text);
}

.form-grid .full { grid-column: 1 / -1; }

.checks {
  display: grid;
  gap: 12px;
}

.checks label {
  grid-template-columns: 18px 1fr;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfdfe;
}

.checks input { margin-top: 2px; }

.form-status {
  min-height: 20px;
  font-size: 0.95rem;
  font-weight: 600;
}

.form-status.is-error { color: #a22a2a; }
.form-status.is-success { color: #1a7f55; }

.faq-list { display: grid; gap: 12px; }
.faq-item summary { cursor: pointer; font-weight: 700; }
.faq-item p { margin: 12px 0 0; }

.home-page .hero h1 { max-width: 18ch; }
.confirmation-page .hero h1 { max-width: 16ch; }

.accent-terracotta {
  --hero-a: #fff1e7;
  --hero-b: #fdf7f0;
  --hero-c: rgba(190, 104, 54, 0.18);
  --primary: #bf6845;
  --primary-strong: #9f4c2b;
}

.accent-sunrise {
  --hero-a: #fff4df;
  --hero-b: #fffaf0;
  --hero-c: rgba(207, 122, 39, 0.18);
  --primary: #cb7a3b;
  --primary-strong: #9c5920;
}

.accent-lagoon {
  --hero-a: #eaf9fb;
  --hero-b: #f4fbff;
  --hero-c: rgba(14, 140, 173, 0.18);
}

.accent-sky {
  --hero-a: #edf6ff;
  --hero-b: #f7fbff;
  --hero-c: rgba(59, 136, 220, 0.18);
  --primary: #2f82d3;
  --primary-strong: #1d64a6;
}

.accent-saffron {
  --hero-a: #fff6e3;
  --hero-b: #fffaf2;
  --hero-c: rgba(212, 155, 33, 0.18);
  --primary: #c9951e;
  --primary-strong: #9d7213;
}

.accent-mediterranean {
  --hero-a: #ebf8f4;
  --hero-b: #f8fffb;
  --hero-c: rgba(48, 136, 114, 0.18);
  --primary: #2f917b;
  --primary-strong: #1f6b59;
}

.accent-adriatic {
  --hero-a: #eef5ff;
  --hero-b: #f8fbff;
  --hero-c: rgba(79, 108, 183, 0.18);
  --primary: #5875cb;
  --primary-strong: #3d55a4;
}

@media (min-width: 780px) {
  .hero, .section { padding: 26px 0; }
  .hero .section-shell, .section .section-shell { padding: 34px 32px; }
  .hero-shell { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.95fr) minmax(260px, 0.8fr); gap: 20px; }
  .prequal-actions { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signup-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); align-items: start; }
  .signup-aside { position: sticky; top: 24px; }
}

.legal-footer {
  padding: 0 0 28px;
}

.legal-footer__shell {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.legal-footer__shell a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font-weight: 700;
}

.hero-legal .section-shell,
.legal-page .section-shell {
  background: var(--surface);
}

.legal-stack {
  display: grid;
  gap: 14px;
}

.legal-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

.legal-card h2 {
  margin: 0 0 10px;
}

.legal-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.72;
}

.legal-card p:last-child {
  margin-bottom: 0;
}