:root {
  --motion-blue: #089dd8;
  --motion-green: #72b51b;
  --motion-coral: #ed514d;
  --motion-gold: #efb83d;
  --motion-ink: #162b39;
  --motion-muted: #5d6f7b;
  --motion-surface: #f4f9fa;
  --motion-line: #d9e6ea;
}

.modern-preview {
  color: var(--motion-ink);
  background: #fff;
}

.modern-preview .site-header {
  min-height: 82px;
  padding-block: 12px;
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  transition: min-height 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.modern-preview .site-header.is-scrolled {
  min-height: 70px;
  border-bottom-color: rgba(217, 230, 234, 0.88);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(22, 43, 57, 0.08);
}

.modern-preview .brand__logo {
  width: clamp(170px, 18vw, 276px);
  transition: width 240ms ease;
}

.modern-preview .site-header.is-scrolled .brand__logo {
  width: clamp(156px, 16vw, 244px);
}

.modern-preview .site-nav a {
  color: #304653;
}

.modern-preview .site-nav a::after {
  height: 2px;
  background: var(--motion-blue);
}

.modern-preview .nav-login,
.modern-preview .button {
  border-radius: 6px;
}

.modern-preview .button {
  gap: 9px;
  min-height: 50px;
  padding-inline: 20px;
  box-shadow: none;
}

.modern-preview .button svg {
  width: 18px;
  height: 18px;
}

.modern-preview .button--primary {
  background: var(--motion-blue);
}

.modern-preview .button--secondary {
  border-color: #cbdce3;
  background: rgba(255, 255, 255, 0.92);
}

.modern-preview .button:hover,
.modern-preview .nav-login:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(22, 43, 57, 0.14);
}

.modern-preview .modern-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 120;
  width: 0;
  height: 3px;
  background: var(--motion-coral);
  pointer-events: none;
}

.modern-preview .modern-preview-label {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 18;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid #cce0e7;
  border-radius: 999px;
  color: #31515f;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(22, 43, 57, 0.12);
  font-size: 0.74rem;
  font-weight: 900;
  pointer-events: none;
}

.modern-preview .modern-preview-label svg {
  width: 15px;
  height: 15px;
  color: var(--motion-blue);
}

.modern-preview .hero {
  min-height: min(820px, 100svh);
  padding-top: 145px;
  background: #e9f3f4;
  isolation: isolate;
}

.modern-preview .modern-hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--hero-image);
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  animation: modernHeroPan 18s ease-in-out infinite alternate;
}

.modern-preview .hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 62%;
  background: rgba(255, 255, 255, 0.93);
  clip-path: polygon(0 0, 88% 0, 76% 100%, 0 100%);
  content: "";
}

.modern-preview .hero::after {
  right: auto;
  width: 148px;
  height: 4px;
  margin-left: clamp(20px, 7vw, 96px);
  background: var(--motion-green);
}

.modern-preview .hero__content {
  width: min(700px, 54vw);
}

.modern-preview .hero h1 {
  color: #102836;
  font-size: clamp(3.15rem, 5.25vw, 5.4rem);
  line-height: 1.03;
}

.modern-preview .hero__lead {
  max-width: 580px;
  color: #36505e;
  line-height: 1.75;
}

.modern-preview .hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modern-preview .hero .eyebrow::before {
  width: 30px;
  height: 2px;
  background: var(--motion-coral);
  content: "";
}

.modern-preview .modern-keyword {
  display: inline-flex;
  min-width: 5.4em;
  color: var(--motion-coral);
  transition: opacity 180ms ease, transform 180ms ease;
}

.modern-preview .modern-keyword.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.modern-preview .hero__facts {
  gap: 20px;
  max-width: 620px;
  margin-top: 38px;
}

.modern-preview .hero-fact {
  padding: 15px 0 0;
  border-top: 2px solid var(--motion-line);
  border-left: 0;
  background: transparent;
  box-shadow: none;
}

.modern-preview .hero-fact:nth-child(1) {
  border-color: var(--motion-blue);
}

.modern-preview .hero-fact:nth-child(2) {
  border-color: var(--motion-green);
}

.modern-preview .hero-fact:nth-child(3) {
  border-color: var(--motion-gold);
}

.modern-preview .news-strip {
  width: min(1240px, calc(100% - 48px));
  margin-top: clamp(38px, 5vw, 70px);
}

.modern-preview .news-strip__head {
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: 18px;
  margin-bottom: 20px;
}

.modern-preview .news-strip__head .eyebrow {
  margin-bottom: 5px;
}

.modern-preview .news-strip-card {
  min-height: 430px;
  border-color: transparent;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(22, 43, 57, 0.12);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.modern-preview .news-strip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(22, 43, 57, 0.17);
}

.modern-preview .news-strip-card__media img,
.modern-preview .intro__image-wrap img,
.modern-preview .ingredients-promise__media img,
.modern-preview .moving-theater__media video,
.modern-preview .program-card::before {
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.modern-preview .news-strip-card:hover .news-strip-card__media img,
.modern-preview .intro__image-wrap:hover img,
.modern-preview .ingredients-promise__media:hover img,
.modern-preview .moving-theater__media:hover video {
  transform: scale(1.055);
}

.modern-preview .section {
  padding-block: clamp(82px, 8vw, 132px);
}

.modern-preview .section--tint {
  background: var(--motion-surface);
}

.modern-preview .section__heading {
  max-width: 820px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.modern-preview .section__heading h2,
.modern-preview .contact h2,
.modern-preview .moving-theater__heading h2 {
  color: var(--motion-ink);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.12;
}

.modern-preview .section__heading p:not(.eyebrow) {
  max-width: 760px;
  color: var(--motion-muted);
  line-height: 1.75;
}

.modern-preview .eyebrow {
  letter-spacing: 0;
}

.modern-preview .intro {
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100vw - 1240px) / 2));
  background: #fff;
}

.modern-preview .intro::before,
.modern-preview .intro::after {
  display: none;
}

.modern-preview .intro__layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

.modern-preview .intro__image-wrap {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: 22px 24px 0 #e7f2f4;
}

.modern-preview .intro__text {
  border-top: 1px solid var(--motion-line);
}

.modern-preview .intro-point {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 18px;
  padding: 25px 0;
  border-bottom: 1px solid var(--motion-line);
}

.modern-preview .intro-point .modern-line-icon {
  grid-row: 1 / span 2;
}

.modern-preview .intro-point h3,
.modern-preview .intro-point p {
  grid-column: 2;
}

.modern-preview .intro-point h3 {
  margin-top: 0;
}

.modern-preview .modern-line-icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #cbe2e8;
  border-radius: 50%;
  color: var(--motion-blue);
  background: #f7fbfc;
}

.modern-preview .modern-line-icon svg {
  width: 24px;
  height: 24px;
}

.modern-preview .modern-line-icon svg path,
.modern-preview .modern-line-icon svg line,
.modern-preview .modern-line-icon svg polyline,
.modern-preview .modern-line-icon svg circle {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 1000ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-preview .is-visible .modern-line-icon svg path,
.modern-preview .is-visible .modern-line-icon svg line,
.modern-preview .is-visible .modern-line-icon svg polyline,
.modern-preview .is-visible .modern-line-icon svg circle {
  stroke-dashoffset: 0;
}

.modern-preview .ingredients,
.modern-preview .moving-theater,
.modern-preview .bluespoon-gift {
  max-width: none;
  padding-inline: max(24px, calc((100vw - 1240px) / 2));
}

.modern-preview .ingredients {
  background: #f8fbf7;
}

.modern-preview .ingredients__panel,
.modern-preview .ingredients-promise,
.modern-preview .moving-theater__stage {
  border-radius: 8px;
}

.modern-preview .ingredients__card,
.modern-preview .ingredients-promise {
  box-shadow: 0 18px 48px rgba(37, 76, 56, 0.09);
}

.modern-preview .bluespoon-gift__description {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.modern-preview .moving-theater {
  background: #fff;
}

.modern-preview .moving-theater__stage {
  border: 1px solid var(--motion-line);
  box-shadow: none;
}

.modern-preview .moving-theater__content {
  text-align: center;
}

.modern-preview .moving-theater__content > p:not(.eyebrow) {
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.modern-preview .moving-theater__points {
  text-align: left;
}

.modern-preview .moving-theater__content .button-row {
  justify-content: center;
}

.modern-preview .program-grid {
  gap: 20px;
}

.modern-preview .program-card,
.modern-preview .strength-item,
.modern-preview .news-card {
  border-radius: 8px;
  box-shadow: none;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.modern-preview .program-card:hover,
.modern-preview .strength-item:hover,
.modern-preview .news-card:hover {
  transform: translateY(-7px);
  border-color: #bad7df;
  box-shadow: 0 18px 38px rgba(22, 43, 57, 0.11);
}

.modern-preview .program-card:hover::before {
  transform: scale(1.04);
}

.modern-preview #strengths {
  position: relative;
  width: 100%;
  max-width: none;
  padding-right: max(24px, calc((100vw - 1240px) / 2));
  padding-left: max(24px, calc((100vw - 1240px) / 2));
  background: #f3f8f9;
}

.modern-preview #strengths .section__heading {
  margin-bottom: clamp(34px, 4vw, 52px);
}

.modern-preview .strength-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  border: 0;
}

.modern-preview .strength-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 30px 26px 26px;
  overflow: hidden;
  border: 1px solid #d7e4e8;
  border-top: 4px solid var(--motion-blue);
  border-radius: 8px;
  background: #fff;
}

.modern-preview .strength-item:nth-child(2) {
  border-top-color: var(--motion-green);
}

.modern-preview .strength-item:nth-child(3) {
  border-top-color: var(--motion-gold);
}

.modern-preview .strength-item:nth-child(4) {
  border-top-color: var(--motion-coral);
}

.modern-preview .strength-item > span:not(.modern-line-icon) {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #8a9aa3;
  font-size: 0.78rem;
  font-weight: 900;
}

.modern-preview .strength-item .modern-line-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
  border-color: #c5e2eb;
  color: var(--motion-blue);
  transition: color 260ms ease, background-color 260ms ease, transform 260ms ease;
}

.modern-preview .strength-item:nth-child(2) .modern-line-icon {
  border-color: #d5e8b8;
  color: var(--motion-green);
  background: #f8fbf3;
}

.modern-preview .strength-item:nth-child(3) .modern-line-icon {
  border-color: #f0ddad;
  color: #c58a12;
  background: #fffaf0;
}

.modern-preview .strength-item:nth-child(4) .modern-line-icon {
  border-color: #f0c8c6;
  color: var(--motion-coral);
  background: #fff7f6;
}

.modern-preview .strength-item:hover .modern-line-icon {
  transform: translateY(-3px) rotate(-4deg);
}

.modern-preview .strength-item h3 {
  margin: 0 0 12px;
  color: var(--motion-ink);
  font-size: 1.18rem;
  line-height: 1.4;
}

.modern-preview .strength-item p {
  margin: 0;
  color: var(--motion-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.modern-preview .strength-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #e4ecef;
}

.modern-preview .strength-item__meta span {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid #d7e4e8;
  border-radius: 999px;
  color: #45606d;
  background: #f7fafb;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.modern-preview .contact {
  background: #135b61;
}

.modern-preview .contact__content {
  width: min(1240px, calc(100% - 48px));
}

.modern-preview .contact .eyebrow {
  color: #bce46c;
}

.modern-preview .contact h2,
.modern-preview .contact p,
.modern-preview .contact__details span,
.modern-preview .contact__details strong {
  color: #fff;
}

.modern-preview .motion-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.modern-preview .motion-reveal.motion-from-left {
  transform: translateX(-36px);
}

.modern-preview .motion-reveal.motion-from-right {
  transform: translateX(36px);
}

.modern-preview .motion-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes modernHeroPan {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(-1.2%, -0.6%, 0);
  }
}

@media (max-width: 980px) {
  .modern-preview .site-header {
    min-height: 72px;
  }

  .modern-preview .hero {
    align-items: flex-end;
    min-height: 760px;
    padding: 120px 24px 70px;
  }

  .modern-preview .hero::before {
    width: 100%;
    height: 64%;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.94);
    clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  }

  .modern-preview .hero__content {
    width: 100%;
  }

  .modern-preview .hero h1 {
    font-size: clamp(2.65rem, 9vw, 4.3rem);
  }

  .modern-preview .news-strip__head {
    grid-template-columns: 1fr;
  }

  .modern-preview .intro__layout {
    grid-template-columns: 1fr;
  }

  .modern-preview .intro__image-wrap {
    box-shadow: 12px 14px 0 #e7f2f4;
  }

  .modern-preview .strength-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modern-preview .strength-item {
    min-height: 280px;
  }
}

@media (max-width: 620px) {
  .modern-preview .modern-preview-label {
    right: 10px;
    bottom: 10px;
    padding: 7px 9px;
    font-size: 0.68rem;
  }

  .modern-preview .hero {
    min-height: 720px;
    padding-inline: 20px;
  }

  .modern-preview .hero::before {
    height: 68%;
  }

  .modern-preview .hero h1 {
    font-size: clamp(2.25rem, 10vw, 2.8rem);
  }

  .modern-preview .hero__lead {
    margin-top: 18px;
    font-size: 1rem;
  }

  .modern-preview .hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }

  .modern-preview .hero-fact {
    padding-top: 10px;
  }

  .modern-preview .hero-fact strong {
    font-size: 0.82rem;
  }

  .modern-preview .hero-fact span {
    font-size: 0.72rem;
  }

  .modern-preview .news-strip {
    width: min(100% - 28px, 1240px);
  }

  .modern-preview .news-strip-card {
    min-height: 510px;
  }

  .modern-preview .section {
    padding-block: 76px;
  }

  .modern-preview .intro,
  .modern-preview .ingredients,
  .modern-preview .moving-theater,
  .modern-preview .bluespoon-gift {
    padding-inline: 18px;
  }

  .modern-preview .intro-point {
    grid-template-columns: 44px 1fr;
    column-gap: 13px;
  }

  .modern-preview .modern-line-icon {
    width: 42px;
    height: 42px;
  }

  .modern-preview .strength-grid {
    grid-template-columns: 1fr;
  }

  .modern-preview .strength-item,
  .modern-preview .strength-item:nth-child(2) {
    min-height: 270px;
  }

  .modern-preview .motion-reveal,
  .modern-preview .motion-reveal.motion-from-left,
  .modern-preview .motion-reveal.motion-from-right {
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modern-preview *,
  .modern-preview *::before,
  .modern-preview *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .modern-preview .motion-reveal {
    opacity: 1;
    transform: none;
  }
}