/* Shared visual refresh for the four professional landing pages.
   The campaign structure and conversion flow stay intact; this layer brings
   the pages into the product site's black, brass, and neutral field system. */
:root {
  --forest: #181511;
}

.btn {
  border-radius: 2px;
}

.hero-grid {
  gap: clamp(34px, 4.4vw, 68px);
}

.hero-film {
  isolation: isolate;
  padding: 34px 14px 14px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 72% 24%, rgba(226, 197, 142, .6), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(126, 57, 32, .66), transparent 42%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .1) 0 1px, transparent 1.4px 100%) 0 0 / 19px 19px,
    linear-gradient(132deg, #0b0b0a 0%, #1a1511 54%, #7a522b 100%);
  box-shadow: 0 30px 80px rgba(23, 18, 14, .22);
}

.hero-film::before {
  content: "Real-world context  /  private memory  /  action";
  position: absolute;
  top: 12px;
  left: 15px;
  z-index: 2;
  color: rgba(255, 255, 255, .7);
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-film video {
  border-radius: 1px;
}

.sec {
  padding-block: clamp(54px, 5vw, 84px);
}

.sec-dark {
  background:
    radial-gradient(circle at 82% 14%, rgba(184, 131, 60, .11), transparent 28%),
    #11110f;
}

.sec-dark.sec-forest {
  background:
    radial-gradient(circle at 74% 18%, rgba(184, 131, 60, .22), transparent 32%),
    radial-gradient(circle at 9% 88%, rgba(118, 49, 29, .22), transparent 36%),
    linear-gradient(138deg, #0d0d0c 0%, #181410 66%, #302015 100%);
}

.shot,
.mosaic img,
.pen-grid figure,
.strip img {
  border-radius: 2px;
}

#app.sec-dark {
  background:
    radial-gradient(circle at 50% 16%, rgba(184, 131, 60, .18), transparent 34%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .04) 0 1px, transparent 1.3px 100%) 0 0 / 22px 22px,
    #10100e;
}

.award-strip {
  padding-block: 22px;
  border-block: 1px solid var(--line);
}

.camp-foot {
  padding-block: clamp(36px, 3.6vw, 52px);
}

.vertical-integrations {
  overflow: hidden;
  padding-block: clamp(62px, 6vw, 94px);
  color: #f5f0e8;
  background:
    radial-gradient(circle at 82% 12%, rgba(205, 157, 83, .22), transparent 30%),
    radial-gradient(circle at 8% 88%, rgba(112, 49, 28, .22), transparent 34%),
    repeating-radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 0 1px, transparent 1.4px 100%) 0 0 / 22px 22px,
    #11100e;
}

.vertical-integrations-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: end;
}

.vertical-integrations .eyebrow {
  color: #d7a75d;
}

.vertical-integrations h2 {
  margin-top: 14px;
  max-width: 880px;
  color: #f7f3ec;
  font-size: clamp(38px, 5vw, 74px);
  line-height: .98;
}

.vertical-integrations h2 em {
  color: #d2a058;
}

.vertical-integrations .lede {
  color: rgba(247, 243, 236, .67);
}

.vertical-integration-marquee {
  display: flex;
  width: calc(100% + 40px);
  margin: clamp(36px, 4vw, 58px) -20px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.vertical-integration-track {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  min-width: max-content;
  padding-right: 10px;
  animation: vertical-integrations-run 28s linear infinite;
}

.vertical-integration-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 142px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .065);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
}

.vertical-integration-logo i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, .96);
}

.vertical-integration-logo svg {
  width: 19px;
  height: 19px;
}

.vertical-integration-rest {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .48);
  font: 600 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vertical-integration-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.vertical-integration-layers article {
  min-width: 0;
  padding: 24px clamp(18px, 2.2vw, 34px) 0 0;
}

.vertical-integration-layers article + article {
  padding-left: clamp(18px, 2.2vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.vertical-integration-layers small {
  display: block;
  margin-bottom: 22px;
  color: #d7a75d;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
}

.vertical-integration-layers strong {
  display: block;
  color: #fff;
  font: 400 clamp(24px, 2.4vw, 35px)/1.04 var(--serif);
}

.vertical-integration-layers p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .57);
  font-size: 14px;
  line-height: 1.65;
}

@keyframes vertical-integrations-run {
  to { transform: translateX(-100%); }
}

@media (max-width: 1000px) {
  .sec {
    padding-block: 58px;
  }

  .vertical-integrations-head {
    grid-template-columns: 1fr;
  }

  .vertical-integrations-head .lede {
    max-width: 680px;
  }
}

@media (max-width: 560px) {
  .hero-grid {
    gap: 28px;
  }

  .hero-film {
    margin-top: 0;
    padding: 28px 8px 8px;
  }

  .hero-film::before {
    top: 10px;
    left: 10px;
    font-size: 7px;
    letter-spacing: .12em;
  }

  .sec {
    padding-block: 50px;
  }

  .award-strip {
    padding-block: 16px;
  }

  .vertical-integrations {
    padding-block: 54px;
  }

  .vertical-integrations h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .vertical-integration-marquee {
    width: calc(100% + 20px);
    margin-inline: -10px;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }

  .vertical-integration-logo {
    min-width: 126px;
    padding: 11px 13px;
  }

  .vertical-integration-layers {
    grid-template-columns: 1fr;
  }

  .vertical-integration-layers article {
    padding: 20px 0;
  }

  .vertical-integration-layers article + article {
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-left: 0;
  }

  .vertical-integration-layers small {
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vertical-integration-marquee {
    width: 100%;
    margin-inline: 0;
    mask-image: none;
  }

  .vertical-integration-track {
    flex-wrap: wrap;
    min-width: 0;
    animation: none;
  }

  .vertical-integration-track + .vertical-integration-track {
    display: none;
  }
}