/*
 * AgentFlow coherent light-field system.
 * Every public section shares one material, one light direction and one line language.
 */

.marketing-page {
  --render-canvas: #f5f6f3;
  --render-canvas-high: #fbfcfa;
  --render-line: rgba(31, 38, 49, .09);
  --render-line-soft: rgba(31, 38, 49, .045);
  --render-cobalt: 61, 88, 205;
  --render-cyan: 61, 158, 171;
  --render-mint: 70, 167, 126;
  --render-warm: 205, 151, 116;
  background: var(--render-canvas);
}

.marketing-page :is(
  .hero-band,
  .proof-band,
  .capabilities-section,
  .usecase-section,
  .security-band,
  .pricing-section,
  .cta-band
) {
  --render-x: 76%;
  --render-y: 24%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.marketing-page :is(
  .proof-band,
  .capabilities-section,
  .usecase-section,
  .security-band,
  .pricing-section,
  .cta-band
) > * {
  position: relative;
  z-index: 2;
}

/* One architectural field, repeated through the whole story. */
.marketing-page :is(
  .proof-band,
  .capabilities-section,
  .usecase-section,
  .pricing-section
) {
  background-color: var(--render-canvas) !important;
  background-image:
    radial-gradient(circle 620px at var(--render-x) var(--render-y), rgba(var(--render-cobalt), .145), transparent 58%),
    radial-gradient(circle 520px at calc(var(--render-x) - 22%) calc(var(--render-y) + 42%), rgba(var(--render-mint), .095), transparent 62%),
    radial-gradient(circle 400px at 8% 12%, rgba(var(--render-warm), .055), transparent 66%),
    linear-gradient(118deg, rgba(255,255,255,.82), rgba(247,249,247,.44) 44%, rgba(237,241,239,.7)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--render-line-soft) 25%, transparent calc(25% + 1px)) !important;
}

.marketing-page :is(
  .proof-band,
  .capabilities-section,
  .usecase-section,
  .pricing-section
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 16%, rgba(255,255,255,.72) 34%, transparent 49%),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(27,34,45,.035) 120px);
  opacity: .78;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.marketing-page :is(
  .proof-band,
  .capabilities-section,
  .usecase-section,
  .pricing-section
)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: max(28px, calc((100vw - 1280px) / 2));
  left: max(28px, calc((100vw - 1280px) / 2));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(35,42,53,.15) 16%, rgba(35,42,53,.15) 84%, transparent);
}

/* Hero uses the same field at a larger scale, with the real-time 3D system as its focal object. */
.marketing-page .hero-band {
  background-color: var(--render-canvas-high);
  background-image:
    radial-gradient(circle 720px at var(--render-x) var(--render-y), rgba(var(--render-cobalt), .19), transparent 58%),
    radial-gradient(circle 540px at 84% 54%, rgba(var(--render-mint), .12), transparent 61%),
    radial-gradient(circle 460px at 12% 84%, rgba(var(--render-warm), .075), transparent 64%),
    linear-gradient(145deg, #fcfcfb 0%, #f6f8f6 48%, #edf1ef 100%);
}

.marketing-page .hero-band::before {
  opacity: .72;
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(25,30,38,.055) 50%, transparent calc(50% + .5px)),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(25,30,38,.035) 120px),
    linear-gradient(116deg, transparent 18%, rgba(255,255,255,.86) 39%, transparent 53%);
  background-size: auto;
  mask-image: linear-gradient(180deg, #000 0 67%, transparent 91%);
}

.marketing-page .hero-band::after {
  height: 220px;
  background:
    linear-gradient(180deg, transparent, rgba(245,246,243,.78) 60%, var(--render-canvas)),
    linear-gradient(90deg, transparent 7%, rgba(var(--render-cobalt), .055) 52%, transparent 92%);
}

.marketing-page .ai-core-scene,
.marketing-page .webgl-ready .ai-core-scene {
  opacity: .64;
  filter: saturate(.86) contrast(.98);
  mix-blend-mode: multiply;
  mask-image:
    linear-gradient(90deg, transparent 45%, #000 64%, #000 92%, transparent),
    linear-gradient(180deg, transparent 5%, #000 20%, #000 79%, transparent 96%);
  mask-composite: intersect;
}

.marketing-page .hero-runtime {
  align-self: center;
  margin: 0;
  padding: 14px 16px 6px;
  border: 1px solid rgba(42, 50, 62, .14);
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.8), rgba(244,248,247,.58));
  box-shadow:
    0 24px 64px rgba(34,43,57,.1),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(1.08);
}

.marketing-page .runtime-head {
  min-height: 34px;
}

.marketing-page .runtime-count {
  padding: 16px 0 20px;
}

.marketing-page .runtime-count strong {
  font-size: 44px;
}

.marketing-page .runtime-steps > div {
  min-height: 34px;
}

.marketing-page .runtime-foot {
  min-height: 38px;
}

.marketing-page .hero-task-entry {
  border-color: rgba(44,52,65,.16);
  background:
    linear-gradient(150deg, rgba(255,255,255,.94), rgba(248,250,248,.8));
  box-shadow:
    0 24px 70px rgba(31,39,52,.1),
    0 1px 0 rgba(255,255,255,.96) inset,
    0 0 0 1px rgba(255,255,255,.45);
}

.marketing-page .product-window {
  background: rgba(255,255,255,.94);
  box-shadow:
    0 44px 110px rgba(27,35,48,.16),
    0 1px 0 #fff inset,
    0 0 0 1px rgba(255,255,255,.55);
}

.marketing-page .product-scene::before {
  top: 12%;
  right: 13%;
  bottom: -8%;
  left: 13%;
  background:
    linear-gradient(110deg, rgba(var(--render-cobalt), .15), rgba(var(--render-cyan), .11) 52%, rgba(var(--render-warm), .07));
  filter: blur(82px);
}

/* Structured content keeps the same translucent paper treatment. */
.marketing-page :is(.capability-grid, .usecase-list, .pricing-grid) {
  position: relative;
  z-index: 2;
}

.marketing-page .capability-grid article,
.marketing-page .usecase-list article {
  transition: padding .28s cubic-bezier(.2,.8,.2,1), background-color .24s ease, border-color .24s ease;
}

.marketing-page .capability-grid article:hover,
.marketing-page .usecase-list article:hover {
  background: rgba(255,255,255,.48);
}

.marketing-page .pricing-card,
.marketing-page .pricing-card.featured {
  border-color: rgba(40,47,58,.13);
  background:
    linear-gradient(148deg, rgba(255,255,255,.84), rgba(244,247,244,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.marketing-page .pricing-card.featured {
  color: #f3f5f2;
  background:
    radial-gradient(circle at 88% 8%, rgba(var(--render-cobalt), .28), transparent 33%),
    linear-gradient(145deg, #171b22, #20262e);
}

/* Dark sections preserve the same field and grid instead of introducing a new visual language. */
.marketing-page .security-band,
.marketing-page .cta-band {
  --render-x: 72%;
  --render-y: 30%;
  color: #f4f6f3;
  background-color: #15191f;
  background-image:
    radial-gradient(circle 650px at var(--render-x) var(--render-y), rgba(81,111,217,.22), transparent 62%),
    radial-gradient(circle 520px at 18% 92%, rgba(55,153,126,.15), transparent 65%),
    linear-gradient(140deg, #12161b, #1b2027 62%, #151a20) !important;
}

.marketing-page .security-band::before,
.marketing-page .cta-band::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.045) 25%, transparent calc(25% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,255,255,.035) 120px),
    linear-gradient(112deg, transparent 22%, rgba(255,255,255,.055) 42%, transparent 58%);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.marketing-page .security-band::after,
.marketing-page .cta-band::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: max(28px, calc((100vw - 1280px) / 2));
  bottom: 0;
  left: max(28px, calc((100vw - 1280px) / 2));
  height: 1px;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

.marketing-page .cta-band {
  min-height: 330px;
}

.marketing-page .cta-band > div > span,
.marketing-page .cta-band p {
  color: rgba(232,237,234,.58);
}

.marketing-page .cta-band .button {
  border-color: rgba(255,255,255,.82);
  color: #171b20;
  background: #f5f7f4;
}

.marketing-page .cta-band .button:hover {
  color: #111419;
  background: #fff;
}

.marketing-page .proof-band {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.marketing-page .proof-band div {
  background: rgba(255,255,255,.16);
}

.marketing-page .site-footer {
  background:
    radial-gradient(circle 380px at 82% 20%, rgba(var(--render-cobalt), .07), transparent 62%),
    linear-gradient(145deg, #f7f8f5, #eef1ee);
}

@media (max-width: 820px) {
  .marketing-page :is(
    .proof-band,
    .capabilities-section,
    .usecase-section,
    .pricing-section
  ) {
    background-image:
      radial-gradient(circle 420px at 86% 12%, rgba(var(--render-cobalt), .12), transparent 64%),
      linear-gradient(145deg, #fafbf9, #eff2ef) !important;
  }

  .marketing-page :is(
    .proof-band,
    .capabilities-section,
    .usecase-section,
    .pricing-section
  )::before {
    opacity: .36;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page :is(
    .hero-band,
    .proof-band,
    .capabilities-section,
    .usecase-section,
    .security-band,
    .pricing-section,
    .cta-band
  ) {
    --render-x: 76% !important;
    --render-y: 24% !important;
  }
}