/* Claims Saathi — Components
   Buttons, cards, forms, timelines, status, hero visual, etc.
   ----------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  vertical-align: middle;
}

.icon--xs {
  width: 0.875rem;
  height: 0.875rem;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

.icon--xl {
  width: 2.75rem;
  height: 2.75rem;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: rgba(8, 123, 211, 0.08);
  color: var(--blue-700);
}

.icon-wrap--green {
  background: rgba(85, 168, 58, 0.12);
  color: var(--green-700);
}

.icon-wrap--orange {
  background: rgba(242, 138, 23, 0.12);
  color: var(--orange-600);
}

.icon-wrap--navy {
  background: rgba(6, 38, 84, 0.08);
  color: var(--navy-900);
}

.icon-wrap--lg {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius-xl);
}

.icon-wrap svg,
.icon-wrap img {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-wrap--lg svg,
.icon-wrap--lg img {
  width: 1.85rem;
  height: 1.85rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--navy-900);
  --btn-bg-hover: var(--navy-850);
  --btn-color: var(--white);
  --btn-border: transparent;
  --btn-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  will-change: transform;
  transition:
    background var(--duration) var(--ease),
    background-image var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.btn svg,
.btn .icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.btn--primary {
  --btn-bg: var(--navy-900);
  --btn-bg-hover: var(--navy-850);
  --btn-color: var(--white);
  --btn-shadow: var(--shadow-btn);
  min-height: 3rem;
  background-color: var(--navy-900);
  background-image: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 100%);
  color: var(--white);
}

.btn--primary:hover {
  background-color: var(--navy-850);
  background-image: linear-gradient(135deg, var(--navy-850) 0%, var(--blue-600) 100%);
  color: var(--white);
  box-shadow: 0 12px 28px rgba(8, 123, 211, 0.35);
}

.btn--secondary {
  --btn-bg: var(--white);
  --btn-bg-hover: var(--surface-50);
  --btn-color: var(--navy-900);
  --btn-border: var(--border);
  --btn-shadow: var(--shadow-xs);
}

.btn--secondary:hover {
  border-color: var(--blue-500);
  color: var(--blue-700);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(8, 123, 211, 0.08);
  --btn-color: var(--navy-900);
  --btn-border: rgba(6, 38, 84, 0.28);
  color: var(--navy-900);
  border-color: rgba(6, 38, 84, 0.28);
  background: transparent;
}

.btn--outline:hover {
  color: var(--blue-700);
  border-color: var(--blue-600);
  background: rgba(8, 123, 211, 0.08);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(6, 38, 84, 0.06);
  --btn-color: var(--navy-900);
  --btn-border: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  box-shadow: none;
}

.btn--whatsapp {
  --btn-bg: var(--green-600);
  --btn-bg-hover: var(--green-700);
  --btn-color: var(--white);
  --btn-shadow: 0 8px 20px rgba(56, 140, 39, 0.28);
}

.btn--call {
  --btn-bg: var(--navy-800);
  --btn-bg-hover: var(--navy-900);
  --btn-color: var(--white);
  --btn-shadow: 0 8px 20px rgba(6, 38, 84, 0.22);
}

.btn--orange {
  --btn-bg: var(--orange-500);
  --btn-bg-hover: var(--orange-600);
  --btn-color: var(--white);
  --btn-shadow: 0 8px 20px rgba(242, 138, 23, 0.28);
}

.btn--on-dark {
  --btn-bg: var(--white);
  --btn-bg-hover: var(--surface-100);
  --btn-color: var(--navy-900);
  background: var(--white);
  color: var(--navy-900);
}

.btn--on-dark:hover {
  background: var(--surface-100);
  color: var(--navy-900);
}

.btn--on-dark.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
  --btn-color: var(--white);
  --btn-border: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.72);
}

.btn--on-dark.btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: var(--white);
  box-shadow: 0 8px 24px rgba(4, 23, 47, 0.28);
}

.btn--on-dark.btn--ghost {
  --btn-color: var(--white);
  --btn-bg-hover: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  font-size: var(--fs-base);
  border-radius: var(--radius-lg);
}

.btn--primary.btn--lg,
.home-hero__actions .btn--primary,
.cta-banner .btn--primary {
  min-height: 3.25rem;
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
}

.btn--icon.btn--lg {
  width: 3.25rem;
  height: 3.25rem;
  min-height: 3.25rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--blue-700);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.btn-link:hover {
  color: var(--navy-800);
  gap: var(--space-3);
}

.btn-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration) var(--ease);
}

.btn-link:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  min-height: 100%;
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.trust-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(8, 123, 211, 0.22);
}

.trust-item__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(85, 168, 58, 0.16), rgba(8, 123, 211, 0.1));
  color: var(--green-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.trust-item__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.trust-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.trust-item__text {
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: none;
}

@media (max-width: 1023px) {
  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .trust-strip {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.trust-strip--compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) 0;
}

.trust-strip--compact .trust-item {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Feature modules (unique treatments — not identical cards)
   -------------------------------------------------------------------------- */

.feature-module {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-7, 1.75rem);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.feature-module:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(8, 123, 211, 0.28);
}

.feature-module__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(8, 123, 211, 0.14), rgba(85, 168, 58, 0.1));
  color: var(--navy-800);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 12px rgba(6, 38, 84, 0.06);
}

.feature-module__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.feature-module__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
}

.feature-module__text {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: none;
}

.feature-module--accent-left {
  border-left: 4px solid var(--blue-600);
  padding-left: calc(var(--space-6) - 3px);
}

.feature-module--soft {
  background: var(--surface-50);
  border-color: transparent;
}

.feature-module--soft:hover {
  border-color: var(--border);
  background: var(--white);
}

.feature-module--glow {
  background:
    radial-gradient(ellipse at top left, rgba(10, 156, 222, 0.1), transparent 55%),
    var(--white);
}

.feature-module--trust {
  background:
    radial-gradient(ellipse at bottom right, rgba(85, 168, 58, 0.1), transparent 50%),
    var(--white);
  border-color: rgba(85, 168, 58, 0.2);
}

.feature-module--outline {
  background: transparent;
  border-style: dashed;
}

.feature-module--dark {
  background: var(--gradient-dark);
  border-color: transparent;
  color: var(--white);
}

.feature-module--dark .feature-module__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.feature-module--dark .feature-module__title {
  color: var(--white);
}

.feature-module--dark .feature-module__text {
  color: rgba(255, 255, 255, 0.82);
}

.feature-module--numbered::before {
  content: attr(data-number);
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: rgba(8, 123, 211, 0.08);
  line-height: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Panels & content blocks
   -------------------------------------------------------------------------- */

.panel {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.panel--soft {
  background: var(--surface-50);
  box-shadow: none;
}

.panel--dark {
  background: var(--gradient-dark);
  border-color: transparent;
  color: var(--white);
}

.panel--dark p {
  color: rgba(255, 255, 255, 0.8);
}

.panel--flush {
  padding: 0;
  overflow: hidden;
}

.panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.panel__title {
  font-size: var(--fs-xl);
}

.panel__body > * + * {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Quote / promise blocks
   -------------------------------------------------------------------------- */

.promise-block,
.quote-block {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-2xl);
  background: var(--gradient-dark);
  color: var(--white);
  overflow: hidden;
}

.promise-block::before,
.quote-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
  opacity: 0.7;
  pointer-events: none;
}

.promise-block > *,
.quote-block > * {
  position: relative;
  z-index: 1;
}

.promise-block__eyebrow,
.quote-block__eyebrow {
  display: inline-flex;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cyan-400);
}

.promise-block__quote,
.quote-block__quote {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 28ch;
}

.promise-block__support,
.quote-block__support {
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.78);
  max-width: 36rem;
}

.promise-block--light,
.quote-block--light {
  background: var(--surface-100);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.promise-block--light::before,
.quote-block--light::before {
  display: none;
}

.promise-block--light .promise-block__quote,
.quote-block--light .quote-block__quote {
  color: var(--navy-900);
}

.promise-block--light .promise-block__eyebrow,
.quote-block--light .quote-block__eyebrow {
  color: var(--blue-700);
}

.promise-block--light .promise-block__support,
.quote-block--light .quote-block__support {
  color: var(--text-secondary);
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.8;
  color: var(--orange-500);
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Service explorer
   -------------------------------------------------------------------------- */

.service-explorer {
  display: grid;
  gap: var(--space-6);
}

.service-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.service-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 16rem;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.service-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  color: var(--white);
}

.service-panel--health {
  background: linear-gradient(145deg, #062654 0%, #075db7 60%, #0a9cde 100%);
}

.service-panel--motor {
  background: linear-gradient(145deg, #04172f 0%, #083b7a 50%, #3870a8 100%);
}

.service-panel--process {
  background: linear-gradient(145deg, #246b1d 0%, #388c27 55%, #55a83a 100%);
}

.service-panel__category {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-panel__title {
  font-size: var(--fs-2xl);
  color: var(--white);
  margin-bottom: var(--space-3);
}

.service-panel__text {
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: none;
  flex: 1;
}

.service-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

.service-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition:
    border-color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.service-link:hover {
  border-color: rgba(8, 123, 211, 0.35);
  background: var(--surface-50);
  color: var(--blue-700);
  box-shadow: var(--shadow-sm);
}

.service-link svg {
  width: 1rem;
  height: 1rem;
  opacity: 0.55;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .service-featured {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Resource cards
   -------------------------------------------------------------------------- */

.resource-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.resource-card__category {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(8, 123, 211, 0.08);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.resource-card__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
}

.resource-card__title a {
  color: inherit;
}

.resource-card__title a:hover {
  color: var(--blue-700);
}

.resource-card__text {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: none;
}

.resource-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.resource-card__actions {
  margin-top: auto;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 1023px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Tabs / filters
   -------------------------------------------------------------------------- */

.tabs,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  background: var(--surface-100);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.tab,
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.tab:hover,
.filter-btn:hover {
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.7);
}

.tab.is-active,
.tab[aria-selected="true"],
.filter-btn.is-active,
.filter-btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--blue-700);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.tab-panel[hidden],
.filter-panel[hidden] {
  display: none;
}

.tab-panel:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Accordions / FAQ
   -------------------------------------------------------------------------- */

.accordion,
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion-item,
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition:
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.accordion-item[open],
.faq-item[open],
.accordion-item.is-open,
.faq-item.is-open {
  box-shadow: var(--shadow-sm);
  border-color: rgba(8, 123, 211, 0.25);
}

.accordion-trigger,
.faq-item summary,
.accordion-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 3.25rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  transition: color var(--duration-fast) var(--ease);
}

.accordion-trigger::-webkit-details-marker,
.faq-item summary::-webkit-details-marker,
.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-trigger:hover,
.faq-item summary:hover,
.accordion-item summary:hover {
  color: var(--blue-700);
}

.accordion-icon,
.faq-item summary::after,
.accordion-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  background:
    linear-gradient(var(--navy-800), var(--navy-800)) center / 12px 2px no-repeat,
    linear-gradient(var(--navy-800), var(--navy-800)) center / 2px 12px no-repeat;
  transition: transform var(--duration) var(--ease);
}

.faq-item[open] summary::after,
.accordion-item[open] summary::after,
.accordion-item.is-open .accordion-icon,
.faq-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel,
.faq-item__body,
.accordion-item__body {
  padding: 0 1.15rem 1.15rem;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.accordion-panel p,
.faq-item__body p,
.accordion-item__body p {
  max-width: none;
}

.faq-toolbar,
.faq-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.faq-search {
  flex: 1 1 16rem;
}

.faq-group {
  margin-bottom: var(--space-10);
}

.faq-group__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-xl);
  color: var(--navy-900);
}

.faq-empty {
  display: none;
  padding: var(--space-8);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-50);
  color: var(--text-secondary);
}

.faq-empty.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 639px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label,
.form-field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.form-error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--error);
}

.form-field.is-invalid .form-error,
.form-field[aria-invalid="true"] .form-error {
  display: block;
}

.form-field.is-invalid .form-input,
.form-field.is-invalid .form-select,
.form-field.is-invalid .form-textarea,
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-50);
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(4, 23, 47, 0.03);
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease);
}

.form-textarea,
textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-normal);
}

.form-select,
select {
  appearance: none;
  background-color: var(--surface-50);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% - 0.15rem),
    calc(100% - 0.85rem) calc(50% - 0.15rem);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.form-input:hover,
.form-textarea:hover,
input:hover,
textarea:hover {
  border-color: #b7c8d8;
  background: var(--white);
}

.form-select:hover,
select:hover {
  border-color: #b7c8d8;
  background-color: var(--white);
}

.form-input:focus,
.form-textarea:focus,
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  background: var(--white);
  box-shadow: var(--shadow-focus);
}

.form-select:focus,
select:focus {
  outline: none;
  border-color: var(--blue-600);
  background-color: var(--white);
  box-shadow: var(--shadow-focus);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--blue-600);
  cursor: pointer;
}

.form-check label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  cursor: pointer;
}

.form-honeypot,
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}

.form-notice {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: #fff8ef;
  border: 1px solid rgba(242, 138, 23, 0.35);
  border-left: 4px solid var(--orange-500);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: none;
}

.form-status {
  display: none;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.form-status.is-visible {
  display: block;
}

.form-status--success {
  background: rgba(85, 168, 58, 0.1);
  border: 1px solid rgba(85, 168, 58, 0.3);
  color: var(--green-700);
}

.form-status--error {
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.25);
  color: var(--error);
}

.form-status--info {
  background: rgba(11, 109, 168, 0.08);
  border: 1px solid rgba(11, 109, 168, 0.22);
  color: var(--info);
}

.required {
  color: var(--orange-600);
}

/* --------------------------------------------------------------------------
   Alerts & toasts
   -------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-50);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__body p {
  max-width: none;
  margin: 0;
}

.alert__title {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.alert--info {
  background: rgba(11, 109, 168, 0.08);
  border-color: rgba(11, 109, 168, 0.22);
  color: var(--info);
}

.alert--info .alert__title {
  color: var(--info);
}

.alert--success {
  background: rgba(47, 129, 40, 0.08);
  border-color: rgba(47, 129, 40, 0.25);
  color: var(--success);
}

.alert--success .alert__title {
  color: var(--success);
}

.alert--warning {
  background: #fff8ef;
  border-color: rgba(181, 104, 0, 0.28);
  color: var(--warning);
}

.alert--warning .alert__title {
  color: var(--warning);
}

.alert--error {
  background: rgba(180, 35, 24, 0.06);
  border-color: rgba(180, 35, 24, 0.22);
  color: var(--error);
}

.alert--error .alert__title {
  color: var(--error);
}

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateY(0.75rem);
  opacity: 0;
  transition:
    opacity var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast__message {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  max-width: none;
}

.toast__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.toast__close:hover {
  background: var(--surface-100);
  color: var(--text-primary);
}

@media (max-width: 1023px) {
  .toast-region {
    bottom: calc(var(--mobile-bar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Timelines
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
}

.timeline--horizontal {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}

.timeline--horizontal::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400), var(--green-500));
  opacity: 0.35;
  z-index: 0;
}

.timeline__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.timeline__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--white);
  border: 2px solid var(--blue-600);
  color: var(--blue-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}

.timeline__item.is-active .timeline__marker,
.timeline__item.is-complete .timeline__marker {
  background: var(--gradient-primary);
  border-color: transparent;
  color: var(--white);
}

.timeline__item.is-complete .timeline__marker {
  background: var(--gradient-trust);
}

.timeline__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.timeline__text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: 12rem;
  margin-inline: auto;
}

.timeline--vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0;
}

.timeline--vertical::before {
  display: none;
}

.timeline--vertical .timeline__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-4);
  align-items: start;
  text-align: left;
  padding-bottom: var(--space-6);
  position: relative;
}

.timeline--vertical .timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 2.75rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-500), rgba(8, 123, 211, 0.1));
}

.timeline--vertical .timeline__marker {
  grid-row: 1 / span 2;
}

.timeline--vertical .timeline__text {
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 1023px) {
  .timeline--horizontal {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .timeline--horizontal::before {
    display: none;
  }

  .timeline--horizontal .timeline__item {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-4);
    align-items: start;
    text-align: left;
    padding-bottom: var(--space-6);
  }

  .timeline--horizontal .timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 2.75rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--blue-500), rgba(8, 123, 211, 0.1));
  }

  .timeline--horizontal .timeline__text {
    max-width: none;
    margin-inline: 0;
  }
}

.timeline-detail {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-50);
  border: 1px solid var(--border);
}

.timeline-detail[hidden] {
  display: none;
}

.timeline-detail__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   Status badges, stages and cards
   Used for illustrative process visuals — never for live claim data.
   -------------------------------------------------------------------------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-200);
  color: var(--text-secondary);
}

.status-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.status-badge--received,
.status-badge--info {
  background: rgba(11, 109, 168, 0.12);
  color: var(--info);
}

.status-badge--progress,
.status-badge--review {
  background: rgba(8, 123, 211, 0.12);
  color: var(--blue-700);
}

.status-badge--action,
.status-badge--pending {
  background: rgba(242, 138, 23, 0.14);
  color: var(--orange-600);
}

.status-badge--complete,
.status-badge--success {
  background: rgba(85, 168, 58, 0.14);
  color: var(--green-700);
}

.status-badge--closed {
  background: rgba(6, 38, 84, 0.1);
  color: var(--navy-800);
}

.status-stages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.status-stage {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-5);
}

.status-stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.status-stage.is-complete:not(:last-child)::before {
  background: var(--green-500);
}

.status-stage.is-current:not(:last-child)::before {
  background: linear-gradient(180deg, var(--blue-600), var(--border));
}

.status-stage__dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  z-index: 1;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.status-stage.is-complete .status-stage__dot {
  background: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
}

.status-stage.is-current .status-stage__dot {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(8, 123, 211, 0.18);
}

.status-stage__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.status-stage__meta {
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.status-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.status-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.status-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.status-meta {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-50);
  border: 1px solid var(--border);
}

.status-meta__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.status-meta__value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Ecosystem nodes (SVG containers)
   -------------------------------------------------------------------------- */

.ecosystem-visual {
  position: relative;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  aspect-ratio: 1;
}

.ecosystem-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ecosystem-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration) var(--ease);
}

.ecosystem-node:hover,
.ecosystem-node:focus,
.ecosystem-node.is-active {
  transform: scale(1.05);
}

.ecosystem-node:focus {
  outline: none;
}

.ecosystem-node:focus-visible .ecosystem-node__ring {
  stroke: var(--cyan-400);
  stroke-width: 3;
}

.ecosystem-node__ring {
  fill: var(--white);
  stroke: var(--border);
  stroke-width: 1.5;
  filter: drop-shadow(0 8px 18px rgba(4, 23, 47, 0.1));
  transition:
    fill var(--duration) var(--ease),
    stroke var(--duration) var(--ease);
}

.ecosystem-node.is-active .ecosystem-node__ring,
.ecosystem-node:hover .ecosystem-node__ring {
  stroke: var(--blue-500);
  fill: var(--surface-50);
}

.ecosystem-node--center .ecosystem-node__ring {
  fill: url(#ecosystemCenterGrad);
  stroke: transparent;
}

.ecosystem-path {
  fill: none;
  stroke: rgba(8, 123, 211, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
}

.ecosystem-pulse {
  fill: var(--cyan-400);
  opacity: 0.85;
}

.ecosystem-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.ecosystem-legend__item {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
}

.ecosystem-legend__item.is-active {
  border-color: rgba(8, 123, 211, 0.35);
  box-shadow: var(--shadow-sm);
}

.ecosystem-legend__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

.ecosystem-legend__text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: none;
  margin: 0;
}

.ecosystem-visual--mobile {
  display: none;
  aspect-ratio: auto;
  max-width: none;
}

@media (max-width: 767px) {
  .ecosystem-visual--desktop {
    display: none;
  }

  .ecosystem-visual--mobile {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Hero visual 3D stage
   -------------------------------------------------------------------------- */

.hero-visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1.05;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.hero-visual__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transition: transform 120ms linear;
}

.hero-visual__glow {
  position: absolute;
  inset: 8% 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(10, 156, 222, 0.35), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(85, 168, 58, 0.2), transparent 50%);
  filter: blur(8px);
  transform: translateZ(-60px);
  pointer-events: none;
}

.hero-visual__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-visual__layer {
  position: absolute;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(216, 227, 236, 0.9);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform-style: preserve-3d;
  padding: var(--space-4);
}

.hero-visual__layer--back {
  inset: 12% 10% 18% 10%;
  background: linear-gradient(160deg, rgba(6, 38, 84, 0.95), rgba(8, 123, 211, 0.9));
  border-color: transparent;
  color: var(--white);
  transform: translateZ(-40px) rotateY(-8deg) rotateX(4deg);
  z-index: 2;
}

.hero-visual__layer--mid {
  width: 58%;
  top: 18%;
  right: 4%;
  transform: translateZ(20px) rotateY(10deg);
  z-index: 3;
}

.hero-visual__layer--front {
  width: 52%;
  left: 6%;
  bottom: 10%;
  transform: translateZ(55px) rotateY(-6deg) rotateX(2deg);
  z-index: 4;
}

.hero-visual__layer--float {
  width: 42%;
  top: 8%;
  left: 8%;
  transform: translateZ(80px) rotateY(4deg);
  z-index: 5;
  padding: var(--space-3);
}

.hero-visual__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.hero-visual__shield {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--white);
}

.hero-visual__shield svg {
  width: min(46%, 7rem);
  height: auto;
}

.hero-card-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

.hero-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.hero-card-row--ok {
  color: var(--green-700);
}

.hero-card-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(85, 168, 58, 0.12);
  color: var(--green-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.hero-visual__fallback {
  display: none;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}

.hero-visual.is-static .hero-visual__fallback,
.hero-visual[data-tilt="off"] .hero-visual__fallback {
  display: block;
  position: relative;
  z-index: 2;
}

.hero-visual.is-static .hero-visual__stage,
.hero-visual[data-tilt="off"] .hero-visual__stage {
  display: none;
}

@media (max-width: 767px) {
  .hero-visual {
    max-width: 28rem;
    aspect-ratio: auto;
    min-height: 0;
  }

  .hero-visual__layer--float,
  .hero-visual__deco,
  .hero-visual__canvas {
    display: none;
  }

  /* Keep a clear visual on small screens */
  .hero-visual__fallback {
    display: block;
  }

  .hero-visual__stage {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Lists, chips, misc UI
   -------------------------------------------------------------------------- */

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l3 3 6-6' stroke='%23388c27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 0.85rem no-repeat,
    rgba(85, 168, 58, 0.14);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--surface-100);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.chip--blue {
  background: rgba(8, 123, 211, 0.08);
  border-color: rgba(8, 123, 211, 0.18);
  color: var(--blue-700);
}

.chip--green {
  background: rgba(85, 168, 58, 0.12);
  border-color: rgba(85, 168, 58, 0.22);
  color: var(--green-700);
}

.chip--orange {
  background: rgba(242, 138, 23, 0.12);
  border-color: rgba(242, 138, 23, 0.24);
  color: var(--orange-600);
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--space-8) 0;
}

.media-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--surface-100);
}

.media-frame img,
.media-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius-2xl);
  background: var(--gradient-primary);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Full-bleed section CTAs: the section is just a shell; .cta-banner__inner
   owns the flex row so we don't nest two competing flex containers. */
.section.cta-banner {
  display: block;
  background: var(--gradient-primary);
  color: var(--white);
  border-radius: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  box-shadow: none;
}

.cta-banner .eyebrow {
  color: var(--cyan-400);
}

.cta-banner h2,
.cta-banner h3 {
  color: var(--white);
  margin-bottom: var(--space-2);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 36rem;
  margin: 0;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .comparison {
    grid-template-columns: 1fr;
  }
}

.comparison__col {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--white);
}

.comparison__col--accent {
  background: var(--surface-50);
  border-color: rgba(8, 123, 211, 0.25);
}

.comparison__label {
  display: inline-flex;
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-700);
}

/* Modals */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 23, 47, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: min(32rem, 100%);
  max-height: min(90vh, 40rem);
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(0.75rem);
  transition: transform var(--duration) var(--ease);
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal__title {
  font-size: var(--fs-xl);
}

.modal__close {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.modal__close:hover {
  background: var(--surface-100);
  color: var(--text-primary);
}

.loading-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: cs-spin 0.7s linear infinite;
}

.btn .loading-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
}

@keyframes cs-spin {
  to {
    transform: rotate(360deg);
  }
}