/*
 * Product-first refinement based on current leading AI interfaces.
 * Restraint, hierarchy and a visible task entry replace decorative surface noise.
 */

.marketing-page {
  --reference-paper: #fbfbfa;
  --reference-paper-deep: #f3f4f1;
  --reference-ink: #111318;
  --reference-muted: #666d78;
  background: var(--reference-paper);
}

.marketing-page::before {
  display: none;
}

.marketing-page .site-header,
.marketing-page .site-header:not(.is-scrolled) {
  min-height: 68px;
  border-bottom-color: rgba(20, 24, 31, .1);
  color: var(--reference-ink);
  background: rgba(251, 251, 250, .92);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(1.05);
}

.marketing-page .site-header.is-scrolled {
  min-height: 62px;
  background: rgba(251, 251, 250, .97);
  box-shadow: 0 8px 30px rgba(23, 28, 36, .045);
}

.marketing-page .site-brand-mark {
  border-radius: 7px;
  background: var(--reference-ink);
  box-shadow: none;
}

.marketing-page .button.primary {
  border-color: var(--reference-ink);
  color: #fff;
  background: var(--reference-ink);
  box-shadow: none;
}

.marketing-page .button.primary:hover {
  background: #2a2e36;
}

.marketing-page .hero-band {
  min-height: 1020px;
  padding-top: 124px;
  background:
    radial-gradient(ellipse at 77% 25%, rgba(202, 216, 224, .28), transparent 28%),
    linear-gradient(180deg, #fbfbfa 0%, #f7f8f6 64%, #f1f3f0 100%);
}

.marketing-page .hero-band::before {
  opacity: .58;
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(25, 30, 38, .045) 50%, transparent calc(50% + .5px)),
    linear-gradient(180deg, transparent 67px, rgba(25, 30, 38, .035) 68px, transparent 69px);
  background-size: 100% 100%, 100% 160px;
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 82%);
}

.marketing-page .hero-band::after {
  height: 170px;
  background: linear-gradient(180deg, transparent, var(--reference-paper-deep));
}

.marketing-page .hero-grid,
.marketing-page .hero-light-field,
.marketing-page .hero-network {
  display: none;
}

.marketing-page .ai-core-scene,
.marketing-page .webgl-ready .ai-core-scene {
  opacity: .22;
  filter: saturate(.5) contrast(.88);
  mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent 56%, #000 74%, transparent 100%);
}

.hero-editorial {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 64px;
  margin-bottom: 62px;
}

.hero-overline {
  max-width: 760px;
  border-bottom-color: rgba(17, 19, 24, .13);
  color: #737a85;
}

.hero-overline em {
  color: #9ba1aa;
}

.marketing-page .hero-editorial h1 {
  margin: 32px 0 34px;
  color: var(--reference-ink) !important;
  font-size: clamp(72px, 8.25vw, 124px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.07em;
  text-shadow: none;
}

.marketing-page .hero-title-shift {
  margin-left: clamp(32px, 6vw, 92px);
  color: var(--reference-ink) !important;
  -webkit-text-stroke: 0;
}

.hero-copy-lower {
  grid-template-columns: minmax(210px, .7fr) minmax(330px, 1.3fr);
  gap: clamp(34px, 6vw, 84px);
}

.hero-copy-lower .hero-lead {
  color: #20242b;
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 500;
}

.hero-copy-lower .hero-detail {
  color: var(--reference-muted);
  font-size: 13px;
  line-height: 1.75;
}

.hero-editorial .hero-actions {
  margin-top: 21px;
}

.hero-editorial .hero-actions .button {
  min-height: 46px;
  border-radius: 7px;
}

.marketing-page .hero-editorial .hero-actions .button.secondary {
  border-color: rgba(34, 40, 50, .18);
  background: rgba(255, 255, 255, .58);
  box-shadow: none;
}

.hero-task-entry {
  width: min(760px, 100%);
  margin-top: 34px;
  padding: 15px;
  border: 1px solid rgba(37, 44, 55, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .87);
  box-shadow: 0 20px 55px rgba(28, 35, 46, .08), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}

.hero-task-entry > label {
  display: block;
  padding: 0 4px 11px;
  color: #747b86;
  font-size: 10px;
  font-weight: 700;
}

.hero-task-field {
  display: grid;
  grid-template-columns: 1fr 34px 38px;
  gap: 8px;
  align-items: center;
}

.hero-task-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 6px;
  border: 0;
  outline: 0;
  color: #171a20;
  background: transparent;
  font-size: 14px;
}

.hero-task-field input::placeholder {
  color: #9ba1aa;
}

.hero-task-field a,
.hero-task-field button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(35, 41, 51, .14);
  border-radius: 8px;
  color: #4d5562;
  background: #f7f8f6;
  cursor: pointer;
}

.hero-task-field button {
  width: 38px;
  border-color: #16191f;
  color: #fff;
  background: #16191f;
  font-size: 16px;
}

.hero-task-field a:hover {
  background: #eef0ed;
}

.hero-task-field button:hover {
  background: #2b3038;
}

.hero-task-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid rgba(35, 41, 51, .08);
}

.hero-task-presets button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(35, 41, 51, .11);
  border-radius: 7px;
  color: #646b76;
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}

.hero-task-presets button:hover {
  color: #1d2128;
  border-color: rgba(35, 41, 51, .23);
  background: #f5f6f3;
}

.hero-editorial .hero-assurance {
  margin-top: 18px;
  color: #878e98;
}

.hero-runtime {
  align-self: center;
  border-color: rgba(28, 33, 41, .13);
}

.runtime-count strong {
  color: #247b59;
}

.runtime-head i {
  background: #41a979;
  box-shadow: 0 0 0 4px rgba(65, 169, 121, .12);
}

.marketing-page .product-scene {
  width: min(1160px, 100%);
}

.marketing-page .product-scene::before {
  right: 18%;
  left: 18%;
  background: rgba(77, 91, 111, .11);
  filter: blur(80px);
}

.marketing-page .product-window {
  border-color: rgba(44, 52, 64, .18);
  border-radius: 10px;
  box-shadow: 0 40px 100px rgba(26, 33, 44, .14), 0 1px 0 #fff inset;
}

.marketing-page .scene-signal {
  border-color: rgba(39, 46, 57, .14);
  color: #626a75;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(26, 33, 44, .07);
}

.marketing-page .proof-band,
.marketing-page .capabilities-section,
.marketing-page .usecase-section,
.marketing-page .pricing-section {
  background: var(--reference-paper-deep) !important;
}

.marketing-page .capability-grid article:hover,
.marketing-page .usecase-list article:hover {
  background: #eceeea;
}

@media (max-width: 1080px) {
  .hero-editorial {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 36px;
  }

  .hero-task-entry {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .marketing-page .hero-band {
    padding-top: 104px;
  }

  .marketing-page .hero-editorial h1 {
    font-size: clamp(58px, 15vw, 82px);
  }

  .marketing-page .hero-title-shift {
    margin-left: 0;
  }

  .marketing-page .ai-core-scene {
    display: none;
  }

  .hero-task-field input {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .hero-task-entry {
    margin-top: 28px;
    padding: 12px;
    border-radius: 12px;
  }

  .hero-task-entry > label {
    font-size: 9px;
  }

  .hero-task-field {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .hero-task-attach {
    display: none !important;
  }

  .hero-task-presets {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-task-field button,
  .hero-task-presets button {
    transition: none;
  }
}