:root {

  --bg: #f5f6fa;
  --bg-soft: #edf1f8;

  --surface: #ffffff;
  --surface-soft: #f1f4fb;

  --line: #dce2ed;
  --line-strong: #c8d0df;

  --text: #17191c;
  --muted: #6f7580;
  --ink: #111318;

  --charcoal: #14171d;
  --charcoal-soft: #1b1f27;

  --accent: #7c5cff;
  --accent-mid: #5c70f5;
  --accent-blue: #3f8cff;
  --accent-cyan: #5fc7ec;
  --accent-light: #eef2ff;

  --success: #2ead77;
  --warning: #d99b32;

  --max: 1180px;

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  background: var(--bg);

}


body {

  margin: 0;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  background: var(--bg);

  line-height: 1.5;

  overflow-x: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  font: inherit;

}



/* =========================================================
   BACKGROUND
   ========================================================= */

.site-bg {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: .42;

  background:

    radial-gradient(
      circle at 8% 6%,
      rgba(124, 92, 255, .10),
      transparent 24%
    ),

    radial-gradient(
      circle at 95% 18%,
      rgba(63, 140, 255, .08),
      transparent 22%
    ),

    linear-gradient(
      rgba(0, 0, 0, .022) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0, 0, 0, .022) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    78px 78px,
    78px 78px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 75%
    );

}



/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  width:
    min(
      calc(100% - 40px),
      var(--max)
    );

  height: 76px;

  margin: 14px auto 0;

  padding:
    0 18px
    0 22px;

  position: sticky;

  top: 14px;

  z-index: 30;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border:
    1px solid
    rgba(17, 19, 24, .08);

  border-radius: 18px;

  background:
    rgba(250, 251, 254, .88);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 12px 35px
    rgba(17, 19, 24, .07);

}



.brand {

  display: inline-flex;

  align-items: center;

}



.brand-logo {

  width: auto;

  display: block;

  object-fit: contain;

}


.brand-logo-header {

  height: 36px;

}


.brand-logo-footer {

  height: 42px;

}



.desktop-nav {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 13px;

  color: #4e535d;

}



.desktop-nav a,
.text-link,
.footer-links a {

  transition:
    color .2s ease,
    opacity .2s ease;

}


.desktop-nav a:hover,
.text-link:hover,
.footer-links a:hover {

  color: var(--ink);

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 16px;

}


.text-link {

  font-size: 13px;

  color: #545a65;

}



/* =========================================================
   BUTTONS
   ========================================================= */

.button {

  min-height: 48px;

  padding:
    0 21px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border:
    1px solid
    #6570f5;

  border-radius: 12px;

  background:

    linear-gradient(
      135deg,
      var(--accent) 0%,
      var(--accent-mid) 52%,
      var(--accent-blue) 100%
    );

  color: white;

  font-weight: 650;

  font-size: 14px;

  box-shadow:
    0 8px 22px
    rgba(91, 104, 245, .20);

  transition:
    transform .2s ease,
    box-shadow .2s ease;

}


.button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 13px 30px
    rgba(91, 104, 245, .28);

}



.button-small {

  min-height: 40px;

  padding-inline: 16px;

  font-size: 12px;

  border-radius: 10px;

}



.button-secondary {

  background: transparent;

  border-color: #bdc4d0;

  color: var(--ink);

  box-shadow: none;

}


.button-secondary:hover {

  background: #ffffff;

  border-color: #aab3c2;

  box-shadow: none;

}



/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu-button {

  display: none;

  width: 40px;

  height: 40px;

  border: 0;

  background: transparent;

}


.menu-button span {

  display: block;

  width: 18px;

  height: 1px;

  margin: 5px auto;

  background: var(--ink);

}



/* =========================================================
   GLOBAL SECTIONS
   ========================================================= */

.section {

  width:
    min(
      calc(100% - 40px),
      var(--max)
    );

  margin:
    0 auto;

  padding:
    126px 0;

}



.section-heading {

  max-width: 760px;

  margin-bottom: 52px;

}


.section-heading.centered {

  margin-inline: auto;

  text-align: center;

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: #6658e8;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: .13em;

  text-transform: uppercase;

}


.eyebrow::before {

  content: "";

  width: 19px;

  height: 1px;

  background: currentColor;

  opacity: .75;

}


.eyebrow.light {

  color: #9f8cff;

}



.section-heading h2,
.human-ai-copy h2,
.contact-inner h2 {

  margin:
    15px 0 0;

  font-size:
    clamp(
      40px,
      5vw,
      64px
    );

  line-height: 1.02;

  letter-spacing: -.052em;

  color: var(--ink);

}



.section-heading p,
.human-ai-copy > p,
.contact-inner > p {

  margin:
    22px 0 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.7;

}



/* =========================================================
   HERO
   ========================================================= */

.hero {

  width:
    min(
      calc(100% - 40px),
      1260px
    );

  padding-top: 112px;

  position: relative;

  isolation: isolate;

  text-align: center;

}


.hero-brand-logo {

  width:
    clamp(160px, 13vw, 200px);

  height: auto;

  margin:
    0 auto 26px;

  display: block;

  object-fit: contain;

}


.hero::before {

  content: "";

  position: absolute;

  top: -90px;

  bottom: 0;

  left: 50%;

  z-index: -1;

  width: 100vw;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      #f2f4fa 0%,
      #f3f3fa calc(100% - 160px),
      #ffffff 100%
    );

  pointer-events: none;

}



.hero-title {

  max-width: 980px;

  margin:
    22px auto 0;

  font-size:
    clamp(
      56px,
      7vw,
      96px
    );

  line-height: .97;

  letter-spacing: -.066em;

  font-weight: 760;

  color: var(--ink);

}



.gradient-text {

  color: transparent;

  background:

    linear-gradient(
      90deg,
      #795cff 0%,
      #596ff5 48%,
      #3f9cff 100%
    );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.hero-copy {

  max-width: 730px;

  margin:
    30px auto 0;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.65;

}



.hero-actions {

  margin-top: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

}



.trust-line {

  margin:
    30px 0 0;

  color: #767c86;

  font-size: 11px;

  letter-spacing: .08em;

  text-transform: uppercase;

}



/* =========================================================
   HUB PRODUCT PREVIEW
   ========================================================= */

.hub-window {

  max-width: 1160px;

  margin:
    80px auto 0;

  overflow: hidden;

  border:
    1px solid #dce2ed;

  border-radius: 22px;

  background: white;

  box-shadow:
    0 18px 45px
    rgba(17, 19, 24, .08);

}


.hub-window img {

  width: 100%;

  height: auto;

  display: block;

}


/* =========================================================
   4 STAGES
   ========================================================= */

.intro-section {

  padding-top: 110px;

  position: relative;

  isolation: isolate;

}


.intro-section::before {

  content: "";

  position: absolute;

  inset: 0 50%;

  z-index: -1;

  width: 100vw;

  transform:
    translateX(-50%);

  background: #ffffff;

}



.four-stage {

  position: relative;

  isolation: isolate;

  display: flex;

  align-items: center;

  justify-content: center;

}


.workflow-wave {

  height: 180px;

  position: absolute;

  top: 50%;

  left: -5%;

  right: -5%;

  z-index: 0;

  overflow: visible;

  transform:
    translateY(-50%);

  pointer-events: none;

}


.workflow-wave svg {

  width: 100%;

  height: 100%;

  display: block;

  overflow: visible;

}



.stage-card {

  width: 220px;

  min-height: 155px;

  padding: 24px;

  position: relative;

  z-index: 2;

  isolation: isolate;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  border:
    1px solid var(--line);

  border-radius: 18px;

  background: white;

  box-shadow:
    0 8px 22px
    rgba(17, 19, 24, .04);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}


.stage-card::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  background-image:
    var(--stage-image);

  background-repeat: no-repeat;

  background-position:
    calc(100% + 36px) calc(50% - 9px);

  background-size:
    auto 90%;

  opacity: 1;

  transform:
    scale(1.01);

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.stage-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .88) 0%,
      rgba(255, 255, 255, .68) 36%,
      rgba(255, 255, 255, 0) 68%
    );

  pointer-events: none;

}


.stage-card-manage {

  --stage-image:
    url("../pictures/home/2-Manage.png");

}


.stage-card-prepare {

  --stage-image:
    url("../pictures/home/3-Prepare.png");

}


.stage-card-create {

  --stage-image:
    url("../pictures/home/4-Create.png");

}


.stage-card-deliver {

  --stage-image:
    url("../pictures/home/5-Deliver.png");

}


.stage-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(92, 112, 245, .48);

  box-shadow:
    0 14px 30px
    rgba(63, 140, 255, .12);

}


.stage-card:hover::before {

  opacity: 1;

  transform:
    scale(1.05);

}


.stage-card strong,
.stage-card small {

  position: relative;

  z-index: 1;

}


.stage-card strong {

  margin-top: 0;

  color: #6658e8;

  font-size: 21px;

  font-weight: 750;

  letter-spacing: -.035em;

  text-shadow:
    0 1px 8px rgba(255, 255, 255, .82);

}


.stage-card small {

  min-height: 44px;

  margin-top: auto;

  display: flex;

  align-items: flex-end;

  color: #252a31;

  font-size: 10px;

  font-weight: 600;

  line-height: 1.45;

  text-shadow:
    0 1px 7px rgba(255, 255, 255, .92);

}


.stage-card small::before {

  content: "";

  position: absolute;

  inset:
    -14px -18px -12px -16px;

  z-index: -1;

  background:
    radial-gradient(
      ellipse at left center,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .72) 42%,
      rgba(255, 255, 255, 0) 76%
    );

  filter:
    blur(5px);

  pointer-events: none;

}


.stage-card.active {

  border-color:
    rgba(92, 112, 245, .78);

  box-shadow:
    0 0 0 2px
    rgba(124, 92, 255, .10),

    0 14px 32px
    rgba(63, 140, 255, .13);

}


.stage-card.active::before {

  opacity: 1;

}


.stage-card:focus-visible {

  outline:
    2px solid var(--accent-blue);

  outline-offset: 3px;

}


.four-stage > i {

  width: 34px;

  height: 1px;

  position: relative;

  z-index: 1;

  background: transparent;

}



/* =========================================================
   MANAGE
   ========================================================= */

.manage-section {

  position: relative;

  isolation: isolate;

}


.manage-section::before {

  content: "";

  position: absolute;

  inset: 0 50%;

  z-index: -1;

  width: 100vw;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      circle at 18% 35%,
      rgba(124, 92, 255, .16) 0%,
      rgba(124, 92, 255, 0) 42%
    ),

    radial-gradient(
      circle at 82% 38%,
      rgba(63, 140, 255, .14) 0%,
      rgba(63, 140, 255, 0) 44%
    ),

    linear-gradient(
      135deg,
      #e2e8fb 0%,
      #e8e5fa 48%,
      #dce9fb 100%
    );

}


.manage-section::after {

  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  z-index: -1;

  width: 100vw;

  height: 150px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, .72) 34%,
      rgba(255, 255, 255, 0) 100%
    );

  pointer-events: none;

}


.manage-content {

  display: grid;

  grid-template-columns:
    minmax(0, .58fr)
    minmax(0, 1fr);

  align-items: center;

  gap: 30px;

  margin-top: 54px;

}


.manage-heading {

  max-width: 920px;

  margin-inline: auto;

}


.manage-heading h2 {

  font-size:
    clamp(
      42px,
      4.5vw,
      66px
    );

}


.manage-heading > p {

  max-width: 650px;

  margin-inline: auto;

}


.manage-benefits {

  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  align-self: stretch;

  align-content: center;

}


.manage-benefits li {

  position: relative;

  padding:
    25px 0 25px 30px;

  border-top:
    1px solid var(--line);

  color: #303640;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: -.015em;

}


.manage-benefits li::before {

  content: "";

  width: 16px;

  height: 2px;

  position: absolute;

  left: 0;

  top: 50%;

  border-radius: 2px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-blue)
    );

  transform:
    translateY(-50%);

}


.manage-benefits li:last-child {

  border-bottom:
    1px solid var(--line);

}


.premium-video-frame {

  padding: 10px;

  overflow: hidden;

  border:
    1px solid #dce3f7;

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      #f8f7ff,
      #eef5ff
    );

  box-shadow:
    0 18px 46px
    rgba(17, 19, 24, .09),

    0 0 32px
    rgba(92, 112, 245, .07);

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.premium-video-frame:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 24px 54px
    rgba(17, 19, 24, .12),

    0 0 36px
    rgba(92, 112, 245, .09);

}


.premium-video-frame video {

  width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

  border-radius: 16px;

  background: var(--surface-soft);

}


@media (min-width: 1001px) {

  .manage-video-frame {

    position: relative;

    left: -200px;

  }

}



/* =========================================================
   PREPARE
   ========================================================= */

.prepare-section {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  color: white;

  background:
    radial-gradient(
      circle at 16% 28%,
      rgba(124, 92, 255, .055) 0%,
      rgba(124, 92, 255, 0) 42%
    ),

    radial-gradient(
      circle at 84% 68%,
      rgba(63, 140, 255, .09) 0%,
      rgba(63, 140, 255, 0) 46%
    ),

    linear-gradient(
      135deg,
      #f8faff 0%,
      #f4f7fc 48%,
      #eef8fb 100%
    );

}


.prepare-section::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  z-index: 0;

  width: 100%;

  height: 190px;

  background:
    linear-gradient(
      180deg,
      #dfe7fa 0%,
      rgba(229, 234, 249, .92) 24%,
      rgba(237, 241, 251, .72) 52%,
      rgba(244, 247, 252, .34) 76%,
      rgba(248, 250, 255, 0) 100%
    );

  pointer-events: none;

}


.prepare-shell {

  position: relative;

  z-index: 1;

}


.prepare-heading {

  max-width: 920px;

  margin-inline: auto;

}


.prepare-heading h2 {

  color: var(--ink);

  font-size:
    clamp(
      42px,
      4.5vw,
      66px
    );

}


.prepare-heading > p {

  max-width: 650px;

  margin-inline: auto;

  color: #626b78;

}


.prepare-heading .eyebrow {

  color: #6658e8;

}


.prepare-content {

  margin-top: 54px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, .58fr);

  align-items: center;

  gap: 30px;

}


.manage-video-frame.prepare-video-frame {

  left: 0;

}


.prepare-benefits li {

  border-color:
    rgba(92, 112, 245, .16);

  color: #303640;

}


.prepare-benefits li:last-child {

  border-bottom-color:
    rgba(92, 112, 245, .16);

}



/* =========================================================
   CREATE
   ========================================================= */

.workflow-products {

  display: block;

}


.create-section {

  position: relative;

  isolation: isolate;

}


.create-section::before {

  content: "";

  position: absolute;

  inset-block: 0;

  left: calc(50% - 50vw - 1px);

  right: calc(50% - 50vw - 1px);

  z-index: -1;

  background:
    radial-gradient(
      circle at 18% 35%,
      rgba(124, 92, 255, .16) 0%,
      rgba(124, 92, 255, 0) 42%
    ),

    radial-gradient(
      circle at 82% 38%,
      rgba(63, 140, 255, .14) 0%,
      rgba(63, 140, 255, 0) 44%
    ),

    linear-gradient(
      135deg,
      #e2e8fb 0%,
      #e8e5fa 48%,
      #dce9fb 100%
    );

}


.create-section::after {

  content: "";

  position: absolute;

  top: 0;

  left: calc(50% - 50vw - 1px);

  right: calc(50% - 50vw - 1px);

  z-index: -1;

  height: 180px;

  background:
    linear-gradient(
      180deg,
      #eef8fb 0%,
      rgba(237, 244, 251, .92) 28%,
      rgba(232, 236, 250, .68) 58%,
      rgba(226, 232, 251, 0) 100%
    );

  pointer-events: none;

}


.create-section > .section-heading {

  margin-bottom: 12px;

}



.product-card-primary {

  padding: 30px;

  display: grid;

  grid-template-columns:
    .82fr
    1.18fr;

  gap: 50px;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

}



.product-card-primary .product-copy {

  padding-top: 20px;

  align-self: end;

}



.product-card-primary p {

  margin:
    16px 0 0;

  color: #747a84;

  font-size: 13px;

  line-height: 1.7;

}



.product-feature-list {

  margin:
    30px 0 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 11px;

}


.product-feature-list li {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #505761;

  font-size: 11px;

}


.product-feature-list li::before {

  content: "✓";

  width: 19px;

  height: 19px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(124, 92, 255, .10);

  color: #6658e8;

  font-size: 8px;

}



.create-workflow-benefits {

  margin: 0;

}


.create-workflow-benefits li {

  padding-block: 10px;

  display: grid;

  gap: 2px;

}


.create-workflow-benefits li::before {

  top: 17px;

  transform: none;

}


.create-workflow-benefits span {

  color: #6658e8;

  font-size: 9px;

  font-weight: 750;

  letter-spacing: .12em;

}


.create-workflow-benefits strong,
.create-workflow-benefits small {

  color: #505761;

  font-size: 10px;

  line-height: 1.3;

}


.create-workflow-benefits small {

  font-weight: 500;

}


.ai-dubbing-details {

  margin-left: 24px;

  padding-left: 10px;

  border-left:
    1px solid rgba(92, 112, 245, .18);

}


.ai-dubbing-details p {

  margin-top: 10px;

  line-height: 1.5;

}


.ai-dubbing-details .product-feature-list {

  margin-top: 14px;

  gap: 6px;

}


.ai-dubbing-details .product-feature-list li {

  font-size: 10px;

}


.ai-dubbing-details .product-feature-list li::before {

  width: 16px;

  height: 16px;

  font-size: 7px;

}



/* =========================================================
   DUBBING PREVIEW
   ========================================================= */

.dubbing-preview {

  align-self: end;

  margin-top: 72px;

  position: relative;

}


.product-card-primary .dubbing-preview {

  margin-top: 20px;

}


.dubbing-preview video {

  width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

  object-position: center;

}






/* =========================================================
   HUMAN + AI
   ========================================================= */

.human-ai-section {

  background:
    radial-gradient(
      circle at 18% 35%,
      rgba(124, 92, 255, .16) 0%,
      rgba(124, 92, 255, 0) 42%
    ),

    radial-gradient(
      circle at 82% 38%,
      rgba(63, 140, 255, .14) 0%,
      rgba(63, 140, 255, 0) 44%
    ),

    linear-gradient(
      135deg,
      #e2e8fb 0%,
      #e8e5fa 48%,
      #dce9fb 100%
    );

}



.human-ai-inner {

  display: grid;

  grid-template-columns:
    1fr;

  gap: 48px;

}


.human-ai-copy {

  width: 100%;

  max-width: 1050px;

  margin-inline: auto;

  text-align: center;

}


.human-ai-copy h2 {

  color: var(--ink);

}


.human-ai-copy > p {

  max-width: 650px;

  margin-inline: auto;

  color: var(--muted);

}



/* HUMAN WORKFLOW VIDEO */

.human-video {

  width: 90%;

  max-width: 1160px;

  min-width: 0;

  justify-self: center;

}


/* Legacy hybrid timeline styles */

.hybrid-timeline {

  min-height: 440px;

  padding: 25px;

  position: relative;

  overflow: hidden;

  border:
    1px solid #303640;

  border-radius: 22px;

  background:

    linear-gradient(
      rgba(255, 255, 255, .022) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, .022) 1px,
      transparent 1px
    ),

    #101419;

  background-size:
    32px 32px;

}



.hybrid-ruler {

  height: 44px;

  padding-left: 75px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  color: #5f6772;

  font-size: 7px;

}



.hybrid-row {

  height: 110px;

  position: relative;

  border-top:
    1px solid
    rgba(255, 255, 255, .05);

}


.hybrid-row b {

  width: 68px;

  height: 100%;

  display: flex;

  align-items: center;

  color: #747c88;

  font-size: 7px;

}



.hybrid-clip {

  position: absolute;

  top: 30px;

  left:
    calc(
      70px +
      (100% - 70px) *
      var(--x)
    );

  width:
    calc(
      (100% - 70px) *
      var(--w)
    );

  height: 50px;

  display: grid;

  place-items: center;

  border:
    1px solid;

  border-radius: 7px;

  font-size: 7px;

  font-style: normal;

  font-weight: 700;

}



.hybrid-clip.ai {

  border-color:
    rgba(124, 92, 255, .43);

  background:
    rgba(124, 92, 255, .15);

  color: #a798ff;

}


.hybrid-clip.rec {

  border-color:
    rgba(95, 199, 236, .34);

  background:
    rgba(95, 199, 236, .11);

  color: #80d6f2;

}


.hybrid-clip.alt {

  border-color:
    rgba(63, 140, 255, .38);

  background:
    rgba(63, 140, 255, .13);

  color: #72adff;

}



/* =========================================================
   DELIVER
   ========================================================= */

.deliver-section {

  padding-top: 110px;

  position: relative;

  isolation: isolate;

}


.deliver-section::before {

  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  z-index: -1;

  width: 100vw;

  height: 220px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      180deg,
      #dfe8fb 0%,
      var(--bg) 100%
    );

  pointer-events: none;

}



.deliver-heading {

  max-width: 900px;

}


.deliver-heading p {

  max-width: 690px;

  margin-inline: auto;

}


.deliver-exports {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

}



.deliver-export {

  min-height: 122px;

  padding: 22px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border:
    1px solid
    rgba(92, 112, 245, .16);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .78),
      rgba(246, 248, 255, .58)
    );

  box-shadow:
    0 10px 28px
    rgba(63, 91, 180, .06);

}



.deliver-export strong {

  color: #5d57dd;

  font-size: 13px;

  font-weight: 750;

  letter-spacing: .02em;

}


.deliver-export p {

  margin: 18px 0 0;

  color: #68707c;

  font-size: 12px;

  line-height: 1.45;

}



/* =========================================================
   ECOSYSTEM
   ========================================================= */

.ecosystem-heading {

  max-width: 850px;

  margin-bottom: 38px;

}


.ecosystem-heading p {

  max-width: 680px;

  margin-inline: auto;

}


.ecosystem-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

}


.ecosystem-grid span {

  padding:
    15px 20px;

  border:
    1px solid
    rgba(124, 92, 255, .16);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, .88);

  color: #565d67;

  font-size: 11px;

  box-shadow:
    0 8px 24px
    rgba(92, 112, 245, .08),

    0 0 22px
    rgba(124, 92, 255, .08);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;

}


@media (hover: hover) and (pointer: fine) {

  .ecosystem-grid span:hover {

    transform:
      translateY(-2px);

    border-color:
      rgba(124, 92, 255, .28);

    box-shadow:
      0 11px 28px
      rgba(92, 112, 245, .11),

      0 0 26px
      rgba(124, 92, 255, .12);

  }

}



/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {

  padding-top: 110px;

  padding-bottom: 155px;

  text-align: center;

}


.contact-inner {

  max-width: 840px;

  margin:
    0 auto;

}


.contact-inner h2 {

  font-size:
    clamp(
      48px,
      6vw,
      78px
    );

}


.contact-inner p {

  max-width: 600px;

  margin-inline: auto;

}


.contact-inner .button {

  margin-top: 28px;

}



/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  width:
    min(
      calc(100% - 40px),
      var(--max)
    );

  margin:
    0 auto;

  padding:
    30px 0 45px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    auto
    auto;

  align-items: center;

  gap: 34px;

  border-top:
    1px solid var(--line);

  color: #747b86;

  font-size: 11px;

}


.site-footer .brand {

  color: var(--ink);

}


.site-footer p {

  margin: 0;

}


.footer-links {

  display: flex;

  gap: 18px;

}


.copyright {

  white-space: nowrap;

}



/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {


  .desktop-nav {

    display: none;

  }


  .header-actions .text-link,
  .header-actions .button {

    display: none;

  }


  .menu-button {

    display: block;

  }


  .site-header.mobile-open {

    height: auto;

    min-height: 76px;

    flex-wrap: wrap;

    padding-block: 18px;

  }


  .site-header.mobile-open .desktop-nav {

    order: 3;

    width: 100%;

    padding:
      22px 0 5px;

    display: grid;

    gap: 18px;

    border-top:
      1px solid
      var(--line);

    margin-top: 16px;

  }



  .four-stage {

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 10px;

  }


  .workflow-wave {

    display: none;

  }


  .stage-card {

    min-width: 210px;

  }


  .stage-card::before {

    background-position:
      calc(100% + 30px) calc(50% - 7px);

    background-size:
      auto 86%;

    opacity: 1;

  }


  .stage-card:hover::before,
  .stage-card.active::before {

    opacity: 1;

  }



  .manage-content {

    grid-template-columns:
      1fr;

    gap: 40px;

    margin-top: 44px;

  }


  .prepare-content {

    grid-template-columns:
      1fr;

    gap: 40px;

    margin-top: 44px;

  }


  .human-ai-inner {

    grid-template-columns:
      1fr;

  }


  .deliver-exports {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }


  .human-video {

    width: 100%;

  }



  .product-card-primary {

    grid-template-columns:
      1fr;

  }


  .dubbing-preview {

    margin-top: 0;

  }



  .site-footer {

    grid-template-columns:
      1fr 1fr;

  }


  .site-footer p {

    text-align: right;

  }


  .footer-links {

    order: 3;

  }


  .copyright {

    order: 4;

    text-align: right;

  }


}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {


  .brand-logo-header {

    height: 32px;

  }


  .brand-logo-footer {

    height: 38px;

  }


  .site-header {

    width:
      calc(100% - 24px);

  }


  .section,
  .hero {

    width:
      calc(100% - 28px);

    padding-block: 90px;

  }


  .hero {

    padding-top: 90px;

  }


  .hero-brand-logo {

    width:
      clamp(130px, 38vw, 160px);

  }


  .hero-title {

    font-size:
      clamp(
        48px,
        14vw,
        70px
      );

  }


  .hero-copy {

    font-size: 16px;

  }


  .hero-actions {

    max-width: 330px;

    margin-inline: auto;

    flex-direction: column;

    align-items: stretch;

  }



  .hub-window {

    margin-top: 55px;

    border-radius: 16px;

  }



  .four-stage > i {

    min-width: 20px;

  }



  .manage-content {

    gap: 32px;

    margin-top: 38px;

  }


  .prepare-content {

    gap: 32px;

    margin-top: 38px;

  }


  .manage-heading h2 {

    font-size: 40px;

  }


  .prepare-heading h2 {

    font-size: 40px;

  }


  .manage-benefits {

    margin: 0;

  }


  .premium-video-frame {

    padding: 6px;

    border-radius: 18px;

  }


  .premium-video-frame video {

    border-radius: 13px;

  }

  .product-card-primary {

    padding: 24px;

  }


  .human-ai-inner {

    gap: 36px;

  }


  .hybrid-timeline {

    min-height: 390px;

    padding: 16px;

  }



  .deliver-exports {

    grid-template-columns:
      1fr;

  }


  .deliver-export {

    min-height: 104px;

  }



  .site-footer {

    grid-template-columns:
      1fr;

    gap: 18px;

  }


  .site-footer p,
  .copyright {

    text-align: left;

  }


  .footer-links {

    order: auto;

    flex-wrap: wrap;

  }


  .copyright {

    order: auto;

  }


}