:root {
  --blue: #307dbf;
  --orange: #eb8034;
  --black: #0f0f0f;
  --pale-blue: #ecf2fe;
  --hero-blue: #f2f9fe;
  --panel-blue: #c5e5ff;
  --shadow: 0 0 40px rgba(143, 141, 141, .2);
  --radius: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--black);
  background: #fff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
}

button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.tracking-pixel { position: absolute; left: -9999px; width: 1px; height: 1px; }

.page-shell {
  width: min(100% - 32px, 1400px);
  margin-inline: auto;
  padding-block: 16px 64px;
}

.hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--hero-blue);
}

.hero__content {
  position: relative;
  z-index: 3;
  width: min(58%, 790px);
}

.hero__wave-frame {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero__wave-frame--right { left: 34.5%; top: -51.2%; width: 93.44%; height: 249.77%; }
.hero__wave-frame--right .hero__wave-turn { width: 77.78%; height: 70.27%; transform: rotate(-27.57deg) scaleY(-1); }
.hero__wave-frame--left { left: -48%; top: -118.6%; width: 92.4%; height: 245.2%; }
.hero__wave-frame--left .hero__wave-turn { width: 78.66%; height: 71.57%; transform: rotate(154.92deg) scaleY(-1); opacity: .4; }
.hero__wave-turn, .hero__wave-crop { position: relative; flex: 0 0 auto; }
.hero__wave-crop { width: 100%; height: 100%; overflow: hidden; }
.hero__wave-crop img { position: absolute; left: 0; top: -17.43%; width: 91.79%; height: 106.44%; max-width: none; }
.hero__orbit { position: absolute; z-index: 1; right: 8%; top: 16%; width: min(43vw, 600px); }
.hero__doctor { position: absolute; z-index: 2; right: 0; bottom: 0; width: min(41%, 569px); height: 100%; object-fit: contain; object-position: right bottom; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #fff;
  background: var(--blue);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

.status-pill img { width: 24px; height: 24px; }

h1 {
  margin: 16px 0;
  font-size: clamp(28px, 2.1vw, 36px);
  font-weight: 600;
  line-height: 1.12;
}

.hero__lead { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; }

.gift-timer {
  position: fixed;
  z-index: 80;
  top: 24px;
  right: max(16px, calc((100vw - 1400px) / 2));
  width: min(320px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(235,128,52,.45);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 28px rgba(15,15,15,.14);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  transition: width .25s ease, padding .25s ease, background-color .25s ease;
}
.gift-timer__label--short { display: none; }
.gift-timer strong { min-width: 82px; color: var(--orange); font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.gift-timer.is-compact { width: auto; padding-inline: 12px; }
.gift-timer.is-compact .gift-timer__label--full { display: none; }
.gift-timer.is-compact .gift-timer__label--short { display: inline; }
.admin-bar .gift-timer { top: 56px; }

.gift-expired[hidden] { display: none; }
.gift-expired { position: fixed; z-index: 99990; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(225,225,225,.78); backdrop-filter: grayscale(1) blur(2px); }
.gift-expired__message { width: min(100%, 560px); padding: clamp(28px, 5vw, 56px); border-radius: var(--radius); background: #f3f3f3; box-shadow: 0 16px 60px rgba(0,0,0,.18); text-align: center; }
.gift-expired__message h2 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.25; }
.gift-expired__message p { margin: 12px 0 0; color: #666; }
body.is-gift-expired { overflow: hidden; }
body.is-gift-expired .page-shell, body.is-gift-expired .modal { filter: grayscale(1); pointer-events: none; user-select: none; }

.audience-filters, .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.audience-filters { margin-top: 16px; }
.filters { margin-top: 8px; }
.filter-button {
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: #151515;
  background: transparent;
}
.filter-button.is-active { color: #fff; background: var(--orange); }
.audience-filter { border-color: var(--blue); }
.audience-filter.is-active { background: var(--blue); }
.filter-button:focus-visible, .gift-button:focus-visible, .submit-button:focus-visible, .modal__close:focus-visible { outline: 3px solid rgba(48,125,191,.35); outline-offset: 3px; }

.offers { margin-top: 80px; }
.offers h2 { margin: 0 0 32px; font-size: 16px; font-weight: 400; text-align: left; }
.cards { display: grid; gap: 16px; }

.card {
  min-width: 0;
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(280px, 32.2%) 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

@media (min-width: 641px) {
  .card { height: 260px; }
  .card__content { overflow: hidden; }
}

.card[hidden] { display: none; }

.card__media { position: relative; min-width: 0; min-height: 260px; overflow: hidden; background: var(--blue); }
.card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(46deg, rgba(48,125,191,.45), transparent 45%); pointer-events: none; }
.card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--image-position, center); }
.card--focus-center { --image-position: center; }
.card--focus-top { --image-position: center top; }
.card--focus-bottom { --image-position: center bottom; }
.card--focus-left { --image-position: left center; }
.card--focus-right { --image-position: right center; }
.card--tag-orange { --tag-color: #eb8034; }
.card--tag-green { --tag-color: #2ab709; }
.card__tag { position: absolute; z-index: 2; left: 20px; top: 20px; padding: 6px 12px; border-radius: 999px; background: var(--pale-blue); color: var(--tag-color, var(--blue)); font-size: 14px; line-height: 1.3; }

.card__content { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 20px; }
.card__text { min-width: 0; display: grid; gap: 6px; }
.card__clinic { margin: 0; color: var(--blue); font-size: 12px; line-height: 1.3; }
.card h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: 32px; font-weight: 600; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.gift-button, .submit-button {
  min-height: 48px;
  padding: 12px 32px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-weight: 600;
  line-height: 1.3;
  transition: filter .2s ease, transform .2s ease;
}
.gift-button:hover, .submit-button:hover { filter: brightness(.96); transform: translateY(-1px); }

.legal { margin: 16px 0 0; font-size: 10px; line-height: 1.4; }
.legal__license { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal__license:hover { color: var(--blue); }

.content-page {
  padding-block: clamp(24px, 5vw, 72px);
}

.content-page__article {
  width: min(100%, 920px);
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.content-page__title {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
}

.content-page__content {
  color: #292929;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.content-page__content > :first-child { margin-top: 0; }
.content-page__content > :last-child { margin-bottom: 0; }
.content-page__content p { margin: 0 0 1em; }
.content-page__content h2,
.content-page__content h3,
.content-page__content h4 { margin: 1.5em 0 .6em; line-height: 1.3; }
.content-page__content h2 { font-size: clamp(22px, 3vw, 30px); }
.content-page__content h3 { font-size: clamp(19px, 2.5vw, 24px); }
.content-page__content ul,
.content-page__content ol { margin: 0 0 1em; padding-left: 1.5em; }
.content-page__content li + li { margin-top: .35em; }
.content-page__content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.content-page__content img { height: auto; margin-block: 1.5em; border-radius: 12px; }
.content-page__content blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--blue); background: var(--hero-blue); }
.content-page__content .wp-block-table { max-width: 100%; overflow-x: auto; }
.content-page__content table { width: 100%; border-collapse: collapse; }
.content-page__content th,
.content-page__content td { padding: 10px; border: 1px solid #d9d9d9; text-align: left; vertical-align: top; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 100; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 32px; }
.modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); }
.modal__dialog {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, 720px);
  margin-block: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: 40px;
  border-radius: var(--radius);
  background: #fff;
}
.modal__scroll { position: relative; z-index: 1; }
.modal__wave-frame { position: absolute; z-index: 0; right: -53.71%; bottom: -54.2%; width: 112.6%; height: 118%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.modal__wave-turn { position: relative; flex: 0 0 auto; width: 78.22%; height: 68.1%; transform: rotate(-29.76deg) scaleY(-1); opacity: .6; }
.modal__wave-crop { position: relative; width: 100%; height: 100%; overflow: hidden; }
.modal__wave-crop picture { display: contents; }
.modal__wave-crop img { position: absolute; left: 0; top: -17.43%; width: 91.79%; height: 106.44%; max-width: none; }
.modal__close { position: absolute; z-index: 3; right: 40px; top: 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.modal__close img { width: 100%; height: 100%; transform: rotate(-45deg); }
.modal__heading { position: relative; z-index: 1; display: grid; grid-template-columns: 174px 1fr; align-items: center; gap: 16px; padding-right: 46px; }
.modal__thumb { width: 174px; height: 100px; object-fit: cover; border-radius: 12px; }
.modal__heading h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.5; font-weight: 600; }
.modal__success { position: relative; z-index: 1; display: grid; place-items: center; min-height: 240px; padding: 40px 24px; text-align: center; }
.modal__success h2 { max-width: 520px; margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.35; font-weight: 600; }
.gift-form, .modal__form { position: relative; z-index: 1; margin-top: 32px; }
.form-panel { display: grid; gap: 20px; padding: 24px; border-radius: var(--radius); background: var(--panel-blue); }
.form-panel .wpcf7-form, .gift-form--demo { display: grid; gap: 20px; margin: 0; }
.form-panel .wpcf7-form p { margin: 0; }
.form-panel .wpcf7-form-control-wrap { display: block; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-row > p { display: contents; }
.form-row br { display: none; }
.form-row label { display: block; min-width: 0; }
.form-row input { width: 100%; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; color: var(--black); background: #fff; outline: none; }
.form-panel input[type="text"], .form-panel input[type="tel"], .form-panel input[type="email"] { width: 100%; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; color: var(--black); background: #fff; outline: none; }
.form-row input::placeholder { color: #bcbcbc; }
.form-row input:focus { box-shadow: 0 0 0 3px rgba(48,125,191,.25); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; font-size: 12px; line-height: 1.4; }
.consent > .wpcf7-form-control-wrap { grid-column: 1 / -1; }
.consent .wpcf7-list-item { margin: 0; }
.consent .wpcf7-list-item > label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--blue); }
.consent a { color: var(--blue); }
.submit-button { width: 100%; }
.form-panel input[type="submit"] { width: 100%; min-height: 48px; padding: 12px 32px; border: 0; border-radius: 999px; color: #fff; background: var(--orange); font-weight: 600; cursor: pointer; }
.form-panel .wpcf7-not-valid-tip, .form-panel .wpcf7-response-output { font-size: 12px; }
.form-panel input.phone-mask-invalid { box-shadow: 0 0 0 2px #dc3232; }
.phone-mask-error { display: block; margin: 5px 12px 0; color: #dc3232; font-size: 12px; line-height: 1.3; }
.form-panel .wpcf7-spinner { position: absolute; right: 24px; bottom: 36px; }
.form-admin-note { margin: 0; color: #6d6c6c; font-size: 12px; }
.modal__details { position: relative; z-index: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; margin-top: 32px; }
.stats { display: grid; gap: 10px; align-content: center; padding: 14px; border-radius: var(--radius); background: var(--panel-blue); }
.stat { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; }
.stat img { width: 28px; height: 28px; }
.stat strong, .stat span { display: block; }
.stat strong { font-size: 14px; font-weight: 600; }
.stat span { color: #777; font-size: 12px; }
.modal__offer-description { min-width: 0; overflow: visible; padding: 8px 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.modal__offer-description > :first-child { margin-top: 0; }
.modal__offer-description > :last-child { margin-bottom: 0; }
.modal__offer-description p { margin: 0 0 6px; }
.modal__offer-description strong, .modal__offer-description b { font-weight: 600; }
.modal__offer-description ul { display: grid; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; }
.modal__offer-description .wp-block-list { gap: 0; }
.modal__offer-description ul li { position: relative; min-height: 24px; padding-left: 32px; }
.modal__offer-description ul li::before { content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 24px; background: url("../images/check.svg") center / contain no-repeat; }
.modal__offer-description li > p { margin: 0; }
.modal__offer-description ol { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.is-modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .hero__content { width: 68%; }
  .hero__doctor { width: 47%; }
  .card { grid-template-columns: minmax(250px, 40%) 1fr; }
  .card h3 { font-size: 24px; }
  .modal__details { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 641px) and (max-height: 900px) {
  .modal { padding: 16px; }
  .modal__dialog { padding: 24px; }
  .modal__close { right: 24px; top: 24px; width: 36px; height: 36px; }
  .modal__heading { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
  .modal__thumb { width: 140px; height: 80px; }
  .modal__heading h2 { font-size: 21px; line-height: 1.3; }
  .gift-form, .modal__form { margin-top: 16px; }
  .form-panel, .form-panel .wpcf7-form, .gift-form--demo { gap: 12px; }
  .form-panel { padding: 16px; }
  .modal__details { margin-top: 16px; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .card h3 { font-size: 28px; }
}

@media (max-width: 640px) {
  .page-shell { width: min(100% - 32px, 480px); padding-block: 16px 40px; }
  .hero { min-height: 0; align-items: flex-start; padding: 20px 16px; border-radius: 20px; }
  .hero__content { width: 100%; }
  .hero__doctor, .hero__orbit, .hero__wave-frame--left { display: none; }
  .hero__wave-frame--right { left: 30%; top: 48%; width: 95%; height: 44%; }
  .hero__wave-frame--right .hero__wave-turn { width: 77.78%; height: 70.27%; }
  .status-pill { padding: 6px 10px; font-size: 9px; }
  .status-pill img { width: 18px; height: 18px; }
  h1 { max-width: none; margin: 12px 0; font-size: 22px; line-height: 1.5; }
  .hero__lead { font-size: 16px; line-height: 1.5; }
  .gift-timer { top: 12px; right: 12px; width: min(272px, calc(100vw - 24px)); justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: 12px; }
  .gift-timer strong { font-size: 18px; }
  .gift-timer.is-compact { width: auto; }
  .audience-filters { margin-top: 20px; }
  .filters { margin-top: 8px; }
  .filter-button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
  .offers { margin-top: 40px; }
  .offers h2 { margin-bottom: 24px; font-size: 14px; }
  .cards { gap: 16px; }
  .card { min-height: 0; display: block; border-radius: 12px; }
  .card__media { min-height: 0; aspect-ratio: 348 / 200; }
  .card__tag { left: 12px; top: 12px; padding: 5px 10px; font-size: 12px; }
  .card__content { gap: 14px; padding: 16px; }
  .card__content { height: 230px; overflow: hidden; }
  .card h3 { font-size: 20px; }
  .gift-button { min-height: 44px; padding: 10px 24px; font-size: 14px; }
  .legal { font-size: 8px; }
  .content-page { width: min(100% - 24px, 480px); padding-block: 12px 32px; }
  .content-page__article { padding: 22px 18px; border-radius: 14px; }
  .content-page__title { margin-bottom: 24px; font-size: 26px; }
  .content-page__content { font-size: 15px; }

  .modal { align-items: center; overflow-y: hidden; padding: 20px; }
  .modal__dialog {
    width: min(100%, 380px);
    margin-block: 0;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
  }
  .modal__scroll {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 16px;
  }
  .modal__close { right: 16px; top: 16px; width: 36px; height: 36px; }
  .modal__heading { display: block; padding-right: 40px; }
  .modal__thumb { display: none; }
  .modal__heading h2 { margin-bottom: 4px; font-size: 20px; line-height: 1.3; }
  .modal__success { min-height: 220px; padding: 48px 20px 32px; }
  .modal__success h2 { font-size: 24px; }
  .gift-form, .modal__form { margin-top: 12px; }
  .form-panel { gap: 8px; padding: 16px; border-radius: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 8px; }
  .form-row input { height: 56px; padding-inline: 16px; }
  .consent { margin-block: 8px; }
  .submit-button { min-height: 50px; font-size: 18px; }
  .modal__details { gap: 12px; margin-top: 12px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 0; padding: 12px 16px; border-radius: 16px; }
  .stat { grid-template-columns: 1fr; gap: 6px; }
  .stat + .stat { padding-left: 12px; border-left: 2px solid rgba(255,255,255,.8); }
  .stat img { width: 28px; height: 28px; }
  .modal__offer-description { padding-block: 0; font-size: 12px; }
  .modal__offer-description ul { gap: 0; }
  .modal__offer-description ul li { min-height: 20px; padding-left: 28px; }
  .modal__offer-description ul li::before { width: 20px; height: 20px; }
  .modal__wave-frame { right: -66.17%; bottom: -25.28%; width: 130.81%; height: 58.74%; }
}

@media (max-width: 782px) {
  .admin-bar .gift-timer { top: 58px; }
}

@media (max-width: 370px) {
  .page-shell { width: min(100% - 20px, 480px); }
  .hero { padding: 16px; }
  .modal { padding: 10px; }
  .modal__dialog,
  .modal__scroll { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
