/* Page sections — hero, comparison, solutions, roadmap, trust, CTA, footer */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--spacing-64) 0 var(--spacing-80);
  background:
    radial-gradient(1000px 460px at 82% 12%, var(--blue-100), transparent 70%),
    linear-gradient(180deg, var(--blue-50), var(--white) 78%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-48);
  align-items: center;
}
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.hero__title {
  font-size: clamp(34px, 4.2vw, var(--text-display));
  line-height: var(--leading-display);
  font-weight: var(--weight-bold);
  color: var(--blue-900);
  margin-top: var(--spacing-24);
  letter-spacing: -0.01em;
}
.hero__title em { font-style: normal; color: var(--green-600); white-space: nowrap; }
.hero__lead { color: var(--ink-500); margin-top: var(--spacing-20); max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-32); }

.hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin-top: var(--spacing-40);
  padding: var(--spacing-16) var(--spacing-20);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.trust-item { display: flex; align-items: flex-start; gap: var(--spacing-8); }
.trust-item__check { flex: none; color: var(--green-600); margin-top: 2px; }
.trust-item__title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--blue-900); }
.trust-item__text { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-400); }

/* Hero visual — archive console mock, built from markup (no image assets).
   One self-contained card; only two small chips float over its corners. */
.hero-visual { position: relative; }
.console { padding: var(--spacing-20); box-shadow: var(--shadow-lift); border-radius: var(--radius-lg); }
.console__bar { display: flex; align-items: center; gap: 6px; margin-bottom: var(--spacing-16); }
.console__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line); }
.console__label {
  margin-left: var(--spacing-8);
  font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400);
}

.console__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-8); }
.stat {
  background: var(--accent-soft, var(--blue-50));
  border-radius: var(--radius-md);
  padding: var(--spacing-12);
}
.stat__value { font-size: 20px; font-weight: var(--weight-bold); color: var(--blue-900); }
.stat__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); }

.console__panels {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);
}
.panel { background: var(--surface-soft); border-radius: var(--radius-md); padding: var(--spacing-16); }
.panel__title {
  font-size: 11px; font-weight: var(--weight-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: var(--spacing-16);
}
.chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.chart__bar { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--blue-200); }
.chart__bar--lead { background: var(--blue-600); }

/* Progress meters — reads more clearly at this size than a pie */
.meter { display: grid; gap: var(--spacing-16); }
.meter__head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11.5px; }
.meter__name { color: var(--ink-500); }
.meter__value { font-weight: var(--weight-semibold); color: var(--blue-900); }
.meter__track { height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent, var(--blue-600)); }

/* Archive record block, inside the card — no overlap, nothing clipped */
.record {
  margin-top: var(--spacing-12);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--spacing-16);
}
.record__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.record__title { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.record__status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--green-100); color: var(--green-700);
  font-size: 11px; font-weight: var(--weight-semibold);
}
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-8) var(--spacing-24); }
.spec-row { display: flex; justify-content: space-between; gap: var(--spacing-12); font-size: 12.5px; }
.spec-row dt { color: var(--ink-500); }
.spec-row dd { margin: 0; font-weight: var(--weight-semibold); color: var(--blue-900); }

/* Floating chips — the only elements that break the card outline */
.chip-float {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.chip-float__title { font-size: 12.5px; font-weight: var(--weight-bold); color: var(--blue-900); line-height: 1.3; }
.chip-float__text { font-size: 11px; color: var(--ink-400); }
.chip-float .icon-circle { background: var(--accent-soft); color: var(--accent); }

.chip-float--seal { top: -20px; right: -16px; }
.chip-float--backup { left: -24px; bottom: -44px; }

@media (max-width: 1100px) {
  .chip-float--seal { right: 0; }
  .chip-float--backup { left: 0; }
}

/* ---------- Comparison ---------- */
.compare__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--spacing-48);
  align-items: start;
}
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: var(--spacing-16);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.compare-table thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  background: var(--surface-soft);
  color: var(--ink-500);
}
.compare-table thead .col-old { color: var(--red-600); background: #fff7f7; }
.compare-table thead .col-new { color: var(--green-700); background: #f4fdf7; }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td { font-size: 13.5px; color: var(--ink-500); }
.compare-table .col-new { background: #fbfefc; }

.cell-req { display: flex; align-items: center; gap: var(--spacing-12); font-weight: var(--weight-semibold); color: var(--blue-900); }

.mark { display: flex; gap: var(--spacing-8); }
.mark__glyph {
  flex: none;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
}
.mark__glyph--off { background: var(--red-100); color: var(--red-600); }
.mark__glyph--on { background: var(--green-100); color: var(--green-700); }

/* ---------- Solution modules ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20);
  margin-top: var(--spacing-48);
}
.module-card {
  display: flex; flex-direction: column;
  padding: var(--spacing-28) var(--card-padding);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.module-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.module-card .icon-circle { margin-bottom: var(--spacing-20); }
.module-card__link {
  margin-top: auto;
  padding-top: var(--spacing-20);
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--weight-semibold);
}
.module-card:hover .module-card__link .btn__arrow { transform: translateX(3px); }

/* ---------- Roadmap ---------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-20);
  margin-top: var(--spacing-48);
}
.step { position: relative; }
.step__head { display: flex; align-items: center; gap: var(--spacing-12); }
.step__num {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white);
  font-weight: var(--weight-bold);
  font-size: 14px;
}
.step .icon-circle { background: var(--white); box-shadow: var(--shadow-card); }
/* Dashed connector between consecutive steps */
.step::after {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(100% - var(--spacing-16));
  width: calc(var(--spacing-20) + var(--spacing-32));
  border-top: 2px dashed var(--line);
}
.step:last-child::after { display: none; }
.step__title { margin-top: var(--spacing-20); font-weight: var(--weight-bold); color: var(--blue-900); font-size: 15px; }
.step__text { margin-top: 6px; font-size: 13px; color: var(--ink-500); }

/* ---------- Why us ---------- */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--spacing-48);
  align-items: center;
}
.why__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-20); }
.why__cards .icon-circle { margin-bottom: var(--spacing-16); }

/* ---------- CTA ---------- */
.cta {
  border-radius: var(--radius-xl);
  padding: var(--spacing-48);
  color: var(--white);
  background:
    radial-gradient(700px 320px at 88% 0%, rgba(59, 130, 246, 0.55), transparent 70%),
    linear-gradient(135deg, var(--blue-800), var(--blue-950));
  box-shadow: var(--shadow-lift);
}
.cta .eyebrow { color: var(--blue-200); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-48); align-items: center; }
.cta__title { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--weight-bold); margin-top: var(--spacing-12); }
.cta__text { color: var(--blue-200); margin-top: var(--spacing-16); max-width: 46ch; font-size: 14px; }
.cta__perks { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-32); }
.perk {
  display: flex; align-items: center; gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}
.perk__title { font-size: 13px; font-weight: var(--weight-semibold); }
.perk__text { font-size: var(--text-caption); color: var(--blue-200); }
.perk .icon-circle { background: rgba(255, 255, 255, 0.14); color: var(--white); }

.cta__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); }
.cta__form .form-footer { grid-column: 1 / -1; }
.form-status { margin-top: var(--spacing-12); font-size: 13px; color: var(--white); }
.form-status[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: var(--spacing-32) 0; margin-top: var(--spacing-64); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-16); align-items: center; }
.site-footer__meta { font-size: var(--text-caption); color: var(--ink-400); }
.site-footer__links { display: flex; gap: var(--spacing-24); font-size: 13px; color: var(--ink-700); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid, .compare__grid, .why__grid, .cta__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
}

@media (max-width: 720px) {
  .hero__trust, .module-grid, .why__cards, .cta__form, .why__cards { grid-template-columns: minmax(0, 1fr); }
  .roadmap { grid-template-columns: minmax(0, 1fr); }
  .console__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console__panels { grid-template-columns: minmax(0, 1fr); }
  .cta { padding: var(--spacing-28); }
  .chip-float { position: static; margin-top: var(--spacing-12); }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .compare-table th, .compare-table td { padding: var(--spacing-12); }
  .compare-table { min-width: 620px; }
  .hero__actions .btn { width: 100%; }
}