/* =========================
   HOMEPAGE SECTIONS
========================= */

.video-demo {
  --video-demo-top-cut: clamp(42px, 4.2vw, 74px);
  --hero-noise-opacity: 0.7;
  --hero-noise-size: 500px;

  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--video-demo-top-cut));
  padding:
    calc(clamp(var(--space-12), 7vw, var(--space-24)) + var(--video-demo-top-cut))
    0
    var(--space-24);
  overflow: hidden;
  background: var(--surface-page);

  clip-path: polygon(
    0 var(--video-demo-top-cut),
    100% 0,
    100% 100%,
    0 100%
  );
}

.video-demo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--video-demo-top-cut));
  bottom: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 88% 62% at 50% 0%,
      rgba(255, 190, 96, 0.52) 0%,
      rgba(255, 154, 96, 0.42) 16%,
      rgba(255, 116, 102, 0.28) 32%,
      rgba(218, 96, 168, 0.18) 48%,
      rgba(108, 92, 228, 0.11) 64%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 74% 42% at 50% 0%,
      rgba(118, 108, 255, 0.12) 0%,
      rgba(88, 92, 196, 0.07) 28%,
      rgba(54, 58, 118, 0.03) 50%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #131521 0%,
      #10121d 18%,
      #0c0d15 42%,
      var(--surface-page) 76%
    );
}

.video-demo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--video-demo-top-cut));
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--hero-noise-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 256 256%22%3E%3Cfilter id%3D%22n%22%3E%3CfeTurbulence type%3D%22fractalNoise%22 baseFrequency%3D%220.82%22 numOctaves%3D%223%22 stitchTiles%3D%22stitch%22/%3E%3C/filter%3E%3Crect width%3D%22100%25%22 height%3D%22100%25%22 filter%3D%22url(%23n)%22 opacity%3D%220.72%22/%3E%3C/svg%3E");
  background-size: var(--hero-noise-size) var(--hero-noise-size);
}

.video-demo .container {
  position: relative;
  z-index: 1;
}

.video-demo__media {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.video-demo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.video-demo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-panel);
}

.video-demo__workflow {
  width: min(100%, 980px);
  margin: var(--space-7) auto 0;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-10));
  user-select: none;
  -webkit-user-select: none;
}

.video-demo__workflow-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 18%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.12) 82%,
    transparent 100%
  );
}

.video-demo__workflow-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  cursor: default;
}

.video-demo__workflow-items span {
  display: flex;
  justify-content: center;
  color: var(--color-gray-300);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.045em;
  cursor: default;
  transition: color var(--transition-fast);
}

.video-demo__workflow-items span:hover {
  color: var(--color-white);
}

/* =========================
   SECTION SPACING
========================= */

.product-section,
.optimize-score-demo {
  position: relative;
  z-index: 1;
  padding: clamp(var(--space-24), 10vw, var(--space-32)) 0;
}



/* =========================
   SECTION HEADS
========================= */

.product-section__head,
#pricing .section-head,
.optimize-score-demo__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto var(--space-20);
  text-align: center;
}



h2,
.section-title{
  margin: 0;
  max-width: none;
  color: var(--color-white);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.055em;
}

.product-section__head p,
#pricing .section-copy,
.optimize-score-demo__head p {
  max-width: 660px;
  margin: var(--space-5) auto 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: 1.62;
  text-align: center;
}

/* =========================
   SPLIT SECTIONS
========================= */

.split-section__stack {
  display: grid;
  gap: var(--space-20);
}

.split-section__row {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(var(--space-8), 6vw, var(--space-20));
  align-items: end;
}

.split-section__row--reverse {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}

.split-section__row--reverse .split-section__visual {
  order: -1;
}

.split-section__copy {
  align-self: end;
  max-width: 520px;
}

.split-section__copy h2,
.split-section__copy h3 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(var(--font-size-2xl), 3.4vw, var(--font-size-4xl));
  line-height: var(--line-height-heading);
  letter-spacing: -0.045em;
}

.split-section__copy p {
  margin: var(--space-5) 0 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: 1.6;
}

.split-section__copy .btn {
  width: fit-content;
  margin-top: var(--space-7);
}

.section-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.split-section__copy .section-eyebrow {
  margin-top: 0;
}

.split-section__visual {
  position: relative;
  min-height: clamp(300px, 32vw, 420px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow: var(--shadow-btn-rest);
}

.split-section__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-persona-section {
  padding: var(--space-24) 0;
}

.brand-persona-section__head {
  max-width: 760px;
  margin: 0 auto var(--space-14);
  text-align: center;
}

.brand-persona-section__head h2 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  line-height: var(--line-height-heading);
  letter-spacing: -0.055em;
}

.brand-persona-section__head p {
  max-width: 660px;
  margin: var(--space-5) auto 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: 1.62;
}

.brand-persona-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-14);
}

.brand-persona-section__item {
  display: grid;
  gap: var(--space-6);
  width: 100%;
}

.brand-persona-section__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow: var(--shadow-btn-rest);
}

.brand-persona-section__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-persona-section__copy {
  max-width: none;
}

.brand-persona-section__copy h3 {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(var(--font-size-2xl), 3.4vw, var(--font-size-4xl));
  line-height: var(--line-height-heading);
  letter-spacing: -0.045em;
  max-width: none;
}

.brand-persona-section__copy p {
  margin: var(--space-5) 0 0;
  color: var(--color-gray-300);
  font-size: var(--font-size-lg);
  line-height: 1.6;
  max-width: 100%;
}

.product-section .split-section__row {
  --split-visual-height: clamp(460px, 42vw, 560px);

  grid-template-columns: calc(var(--split-visual-height) / 2) minmax(0, 1fr);
}

.product-section .split-section__row--reverse {
  grid-template-columns: minmax(0, 1fr) calc(var(--split-visual-height) / 2);
}

.product-section .split-section__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(var(--split-visual-height) / 2);
  height: calc(var(--split-visual-height) / 2);
  max-width: none;
  padding-bottom: var(--space-1);
}

.product-section .split-section__visual {
  height: var(--split-visual-height);
  min-height: 0;
  aspect-ratio: auto;
}

.product-section .split-section__copy h3 {
  max-width: 11ch;
}

.product-section .split-section__copy p:not(.section-eyebrow) {
  max-width: 38ch;
}

.product-section .split-section__visual img {
  object-fit: cover;
}

/* =========================
   RESPONSIVE
========================= */
/* =========================
   RESPONSIVE
   Single mobile rule only
========================= */

@media (max-width: 720px) {
  .video-demo {
    --video-demo-top-cut: 42px;
    --hero-noise-opacity: 0.52;
    --hero-noise-size: 420px;

    padding:
      calc(var(--space-12) + var(--video-demo-top-cut))
      0
      var(--space-16);
  }

  .video-demo__media {
    border-radius: var(--radius-md);
    box-shadow:
      0 22px 56px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .video-demo__workflow {
    width: 100%;
    margin-top: var(--space-6);
    padding: 0 var(--space-2);
  }

  .video-demo__workflow-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    margin-top: var(--space-4);
  }

  .video-demo__workflow-items span {
    font-size: var(--font-size-2xl);
    line-height: 1.05;
  }

  .product-section,
  .optimize-score-demo {
    padding: var(--space-20) 0;
  }

  .product-section__head,
  #pricing .section-head,
  .optimize-score-demo__head {
    max-width: 100%;
    margin-bottom: var(--space-12);
    text-align: center;
  }

  .product-section__head h2,
  #pricing .section-title,
  .optimize-score-demo__head h2 {
    max-width: 100%;
    font-size: var(--font-size-3xl);
    line-height: 1.02;
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .product-section__head p,
  #pricing .section-copy,
  .optimize-score-demo__head p {
    max-width: 520px;
    margin-top: var(--space-4);
    font-size: var(--font-size-md);
    line-height: 1.62;
    text-align: center;
    text-wrap: balance;
  }

  .split-section__stack {
    gap: var(--space-14);
  }

  .split-section__row,
  .split-section__row--reverse,
  .product-section .split-section__row,
  .product-section .split-section__row--reverse {
    --split-visual-height: auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  .split-section__visual,
  .product-section .split-section__visual {
    order: 1;
  }

  .split-section__copy,
  .product-section .split-section__copy {
    order: 2;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    padding-bottom: 0;
  }
  .split-section__copy h2,
  .split-section__copy h3,
  .product-section .split-section__copy h3 {
    max-width: 100%;
    font-size: var(--font-size-2xl);
    line-height: 1.04;
    letter-spacing: -0.05em;
  }

  .split-section__copy p,
  .product-section .split-section__copy p:not(.section-eyebrow) {
    max-width: 100%;
    margin-top: var(--space-4);
    color: var(--color-gray-300);
    font-size: var(--font-size-md);
    line-height: 1.62;
  }

  .split-section__copy .btn {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-6);
  }

  .split-section__visual,
  .product-section .split-section__visual {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.22),
      var(--shadow-btn-rest);
  }

  .split-section__visual img,
  .product-section .split-section__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .brand-persona-section {
    padding: var(--space-18) 0;
  }

  .brand-persona-section__head {
    margin-bottom: var(--space-10);
  }

  .brand-persona-section__head h2 {
    font-size: var(--font-size-2xl);
    line-height: 1.04;
    letter-spacing: -0.05em;
    text-wrap: balance;
  }

  .brand-persona-section__head p {
    margin-top: var(--space-4);
    font-size: var(--font-size-md);
    line-height: 1.62;
    text-wrap: balance;
  }

  .brand-persona-section__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .brand-persona-section__item {
    gap: var(--space-5);
  }

  .brand-persona-section__visual {
    border-radius: var(--radius-md);
    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.22),
      var(--shadow-btn-rest);
  }

  .brand-persona-section__copy h3 {
    font-size: var(--font-size-2xl);
    line-height: 1.04;
    letter-spacing: -0.05em;
  }

  .brand-persona-section__copy p {
    margin-top: var(--space-4);
    font-size: var(--font-size-md);
    line-height: 1.62;
  }
}