:root {
  --story-font: Fraunces, Georgia, serif;
  --story-night: #06153b;
  --story-deep: #030820;
  --story-cream: #fff5df;
  --story-paper: #fff7e8;
  --story-ink: #17203b;
  --story-gold: #ffc84b;
  --story-mint: #9bf2d6;
}

body {
  background:
    radial-gradient(circle at 16% 12%, rgba(78, 138, 255, .24), transparent 25%),
    radial-gradient(circle at 82% 3%, rgba(255, 200, 75, .18), transparent 21%),
    linear-gradient(180deg, var(--story-deep) 0%, var(--story-night) 44%, #07143b 100%);
}

body::before {
  background-image:
    radial-gradient(circle, rgba(255, 210, 93, .98) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(124, 219, 255, .72) 0 .95px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, .72) 0 .8px, transparent 1.6px);
  background-position: 8px 4px, 74px 86px, 146px 24px;
  background-size: 152px 152px, 236px 236px, 318px 318px;
  opacity: .72;
}

h1,
h2,
.brand span {
  font-family: var(--story-font);
  font-variation-settings: "SOFT" 80;
}

.brand span {
  font-weight: 800;
  letter-spacing: -.01em;
}

.hero {
  min-height: min(760px, calc(100svh - 66px));
  padding: clamp(30px, 4.4vw, 54px) 20px 0;
  overflow: visible;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 200, 75, .22), transparent 20%),
    radial-gradient(circle at 20% 22%, rgba(89, 154, 255, .22), transparent 26%),
    linear-gradient(180deg, rgba(5, 12, 38, .08), rgba(5, 12, 38, .42));
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(3, 9, 31, .18), transparent 30%, rgba(3, 9, 31, .08)),
    radial-gradient(circle at 78% 34%, rgba(255, 207, 92, .17), transparent 25%);
}

.hero__clouds {
  inset: auto 0 -14px;
  z-index: 0;
  height: clamp(96px, 12vw, 150px);
  background: url("../img/cloud-divider.00e0532212a7.svg") center bottom / 100% 100% no-repeat;
  opacity: 1;
  filter: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 42px, 1320px);
  grid-template-columns: minmax(470px, .94fr) minmax(560px, 1.06fr);
  gap: clamp(28px, 3.4vw, 48px);
  min-height: clamp(560px, 62vw, 650px);
  align-items: start;
}

.hero__copy {
  padding-top: clamp(4px, 2vw, 28px);
}

.trust-badge {
  margin-bottom: 16px;
  border-color: rgba(162, 229, 255, .28);
  background: rgba(14, 40, 89, .58);
  color: #d9fff3;
  font-family: Outfit, sans-serif;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 34px rgba(0, 0, 0, .2);
}

.hero h1 {
  max-width: 650px;
  margin-bottom: 18px;
  color: var(--story-cream);
  font-size: clamp(3.3rem, 4.6vw, 5.3rem);
  font-weight: 800;
  line-height: .96;
  text-wrap: balance;
}

.hero h1 span {
  color: var(--story-gold);
}

.hero__lead {
  max-width: 620px;
  margin-bottom: 24px;
  color: rgba(255, 249, 234, .9);
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  line-height: 1.55;
}

.store-row--badges {
  gap: 18px;
  align-items: center;
}

.store-badge {
  display: inline-flex;
  height: 54px;
  align-items: center;
  transition: transform .2s ease, filter .2s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.store-badge img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.store-badge--play {
  height: 54px;
}

.hero__promise {
  display: inline-flex;
  margin: 18px 0 0;
  color: var(--story-mint);
  font-size: .96rem;
  font-weight: 500;
}

.hero__promise::before {
  content: "";
  width: 18px;
  height: 18px;
  margin: 2px 8px 0 0;
  border: 2px solid var(--story-mint);
  border-radius: 50% 50% 46% 46%;
  box-shadow: inset 0 0 0 4px rgba(155, 242, 214, .14);
}

.hero__visual {
  align-self: stretch;
  width: min(100%, 720px);
  margin-top: -10px;
}

.hero__visual::before {
  inset: 4% 0 5% 14%;
  border-radius: 42% 54% 42% 48%;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 200, 75, .24), transparent 27%),
    radial-gradient(circle at 52% 58%, rgba(42, 98, 190, .2), transparent 48%);
  filter: blur(26px);
}

.hero__scene {
  width: 100%;
  height: min(54vw, 620px);
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, .24));
}

.feature-icons {
  margin-top: 0;
  padding: clamp(56px, 6vw, 78px) 0 clamp(58px, 6vw, 82px);
  background:
    radial-gradient(circle at 9% 4%, rgba(255, 207, 92, .18), transparent 18%),
    radial-gradient(circle at 92% 16%, rgba(255, 207, 92, .12), transparent 20%),
    linear-gradient(180deg, var(--story-paper), #fff2dc);
}

.feature-icons .section-heading {
  margin-bottom: 28px;
}

.feature-icons h2 {
  color: var(--story-ink);
  font-size: clamp(2rem, 2.8vw, 3.1rem);
  font-weight: 760;
  line-height: 1.08;
}

.feature-icons .icon-grid {
  gap: clamp(18px, 4vw, 52px);
}

.feature-icons .icon-grid article {
  padding: 0 4px;
}

.feature-icons .icon-grid img {
  height: clamp(126px, 12vw, 178px);
  margin-bottom: 10px;
  filter: drop-shadow(0 16px 18px rgba(42, 44, 72, .12));
}

.feature-icons .icon-grid h3 {
  margin-bottom: 6px;
  color: #0d2351;
  font-family: var(--story-font);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 760;
}

.feature-icons .icon-grid p {
  max-width: 250px;
  color: #4b536b;
  font-size: clamp(.9rem, .9vw, 1rem);
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__copy {
    max-width: 760px;
    padding-top: 8px;
  }

  .hero__visual {
    justify-self: center;
    margin-top: -6px;
  }

  .hero__scene {
    height: auto;
    max-height: 610px;
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 26px 0 0;
  }

  .hero__clouds {
    height: 84px;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 11.5vw, 3.55rem);
    line-height: .98;
  }

  .hero__lead {
    font-size: .96rem;
    line-height: 1.5;
  }

  .store-row--badges,
  .store-badge {
    width: auto;
  }

  .store-badge {
    height: 42px;
  }

  .store-badge--play {
    height: 42px;
  }

  .hero__scene {
    width: 112%;
    max-width: none;
    margin-left: -6%;
  }

  .feature-icons {
    padding-top: 48px;
  }

  .feature-icons .icon-grid {
    gap: 24px;
  }
}