/*
 * SerasMac V5 — Art Direction Polish
 *
 * Final non-destructive refinement layer for the Premium V4 homepage.
 * It does not change content, routes, forms, analytics or business logic.
 */

:root {
  --sm-v5-focus: #0a7d72;
  --sm-v5-focus-ring: rgba(10, 125, 114, .24);
  --sm-v5-ease: cubic-bezier(.22, 1, .36, 1);
  --sm-v5-shadow-raised: 0 24px 70px rgba(9, 32, 29, .16);
  --sm-v5-shadow-hover: 0 32px 86px rgba(9, 32, 29, .22);
}

.sm-v4-home {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sm-v4-home :where(h1, h2, h3, p) {
  text-wrap: pretty;
}

.sm-v4-home :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sm-v5-focus);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--sm-v5-focus-ring);
}

.sm-v4-home .sm-v4-button {
  box-shadow: 0 10px 28px rgba(16, 39, 36, .14);
  transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    transform .25s var(--sm-v5-ease),
    box-shadow .25s var(--sm-v5-ease);
}

.sm-v4-home .sm-v4-button:hover,
.sm-v4-home .sm-v4-button:focus-visible {
  box-shadow: 0 18px 42px rgba(16, 39, 36, .22);
}

.sm-v4-home .sm-v4-button:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 8px 20px rgba(16, 39, 36, .16);
}

.sm-v4-hero {
  min-height: calc(100svh - 86px);
}

.sm-v4-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -24% 38%;
  z-index: -1;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 110, 102, .12), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}

.sm-v4-hero__copy {
  max-width: 780px;
}

.sm-v4-hero__lead {
  max-width: 62ch;
}

.sm-v4-route-card {
  box-shadow: var(--sm-v5-shadow-raised);
  transition:
    transform .35s ease-out,
    box-shadow .35s var(--sm-v5-ease),
    border-color .35s ease;
}

.sm-v4-hero__stage:hover .sm-v4-route-card {
  border-color: rgba(23, 110, 102, .24);
  box-shadow: var(--sm-v5-shadow-hover);
}

.sm-v4-dossier {
  border-color: rgba(16, 39, 36, .17);
  box-shadow: 0 30px 76px rgba(5, 20, 18, .3);
}

.sm-v4-dossier__score > div i {
  box-shadow: 0 0 18px rgba(23, 110, 102, .28);
}

.sm-v4-service-row,
.sm-v4-note {
  transition:
    color .3s ease,
    background-color .3s ease,
    transform .3s var(--sm-v5-ease),
    box-shadow .3s var(--sm-v5-ease),
    padding .3s var(--sm-v5-ease);
}

.sm-v4-service-row:hover,
.sm-v4-service-row:focus-visible {
  box-shadow:
    inset 4px 0 0 var(--sm-v4-brass),
    0 22px 52px rgba(16, 39, 36, .14);
}

.sm-v4-note:hover,
.sm-v4-note:focus-visible {
  box-shadow: 0 26px 64px rgba(15, 87, 79, .2);
}

.sm-v4-process__steps li {
  transition: background-color .3s ease, border-color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sm-v4-process__steps li:hover {
    background: rgba(255, 255, 255, .035);
  }
}

.sm-v4-final__panel {
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 38px 100px rgba(5, 20, 18, .3);
}

@media (max-width: 780px) {
  .sm-v4-hero {
    min-height: auto;
  }

  .sm-v4-hero__copy {
    max-width: none;
  }

  .sm-v4-hero__stage {
    min-height: 540px;
  }

  .sm-v4-route-card {
    box-shadow: 0 18px 48px rgba(9, 32, 29, .14);
  }

  .sm-v4-service-row:hover,
  .sm-v4-service-row:focus-visible,
  .sm-v4-note:hover,
  .sm-v4-note:focus-visible {
    transform: none;
  }
}

@media (max-width: 520px) {
  .sm-v4-hero__stage {
    min-height: 500px;
  }

  .sm-v4-route {
    width: 118%;
    margin-left: -9%;
  }

  .sm-v4-route-card {
    inset-inline: .25rem;
  }

  .sm-v4-dossier {
    right: 0;
    width: 92%;
  }

  .sm-v4-final__content {
    padding-inline: 1.35rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .sm-v4-home .sm-v4-button:hover,
  .sm-v4-service-row:hover,
  .sm-v4-note:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --sm-v4-line: rgba(16, 39, 36, .28);
    --sm-v4-line-strong: rgba(16, 39, 36, .48);
  }

  .sm-v4-home :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-width: 3px;
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .sm-v4-home :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .sm-v4-button,
  .sm-v4-route-card,
  .sm-v4-dossier,
  .sm-v4-final__panel {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-v4-hero::after {
    filter: none;
  }

  .sm-v4-home .sm-v4-button:active,
  .sm-v4-service-row:hover,
  .sm-v4-service-row:focus-visible,
  .sm-v4-note:hover,
  .sm-v4-note:focus-visible {
    transform: none;
  }
}