/*
  Edit Bay page treatment for the AI Filmmaking and Workflow bridge pages.
  This file intentionally wraps existing markup instead of replacing page logic.
*/

body.eb-page {
  --eb-black: #010204;
  --eb-panel: rgba(20, 20, 20, .78);
  --eb-line: rgba(255, 255, 255, .12);
  --eb-text: #f7efe1;
  --eb-muted: #b9aa91;
  --eb-gold: #d7a945;
  --eb-copper: #ff6b35;
  --eb-cyan: #39f5d4;
  --eb-magenta: #ff4fa0;
  --eb-violet: #7c5cff;
  --eb-display: Cinzel, Georgia, serif;
  background:
    radial-gradient(ellipse 46% 26% at 84% 18%, rgba(57, 245, 212, .12), transparent 68%),
    radial-gradient(ellipse 44% 30% at 20% 10%, rgba(215, 169, 69, .16), transparent 68%),
    linear-gradient(180deg, #010204, #07080b 48%, #010204) !important;
  color: var(--eb-text);
}

body.eb-film-page {
  --eb-accent: var(--eb-magenta);
  --eb-accent-2: var(--eb-gold);
  --eb-glow: rgba(255, 79, 160, .16);
}

body.eb-workflow-page {
  --eb-accent: var(--eb-gold);
  --eb-accent-2: var(--eb-cyan);
  --eb-glow: rgba(215, 169, 69, .17);
}

body.eb-eval-page {
  --eb-accent: var(--eb-cyan);
  --eb-accent-2: var(--eb-copper);
  --eb-glow: rgba(57, 245, 212, .15);
  background:
    radial-gradient(ellipse 46% 30% at 78% 24%, rgba(57, 245, 212, .12), transparent 68%),
    radial-gradient(ellipse 42% 28% at 16% 18%, rgba(255, 107, 53, .12), transparent 68%),
    linear-gradient(180deg, #010204, #071016 50%, #010204) !important;
}

body.eb-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 58px);
  opacity: .58;
}

body.eb-page .grain-overlay {
  opacity: .06;
  mix-blend-mode: screen;
}

body.eb-page #dvp-stars {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.eb-page .container {
  width: min(1220px, calc(100% - 36px));
  max-width: 1220px !important;
}

body.eb-page header,
body.eb-page > nav {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 68px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(1,2,4,.9), rgba(1,2,4,.62));
  backdrop-filter: blur(18px);
}

body.eb-page .header-inner,
body.eb-page .nav-inner {
  min-height: 68px;
}

body.eb-page .brand,
body.eb-page .nav-brand {
  color: var(--eb-text) !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

body.eb-page .brand span,
body.eb-page .nav-brand span {
  color: var(--eb-copper);
}

body.eb-page .header-nav,
body.eb-page .nav-links {
  gap: clamp(14px, 2vw, 28px);
}

body.eb-page .nav-link,
body.eb-page .nav-links a {
  color: rgba(247,239,225,.68) !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.eb-page .nav-link:hover,
body.eb-page .nav-link.active,
body.eb-page .nav-links a:hover {
  color: var(--eb-text) !important;
}

body.eb-page .hero {
  min-height: 0;
  display: grid;
  align-items: center;
  padding-block: clamp(96px, 10vw, 150px) clamp(76px, 8vw, 118px) !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(215,169,69,.2);
  background:
    radial-gradient(ellipse 48% 30% at 50% 36%, var(--eb-glow), transparent 68%),
    linear-gradient(180deg, #020306, #06070a 68%, #020306) !important;
}

body.eb-page .hero::before {
  opacity: .5;
  background:
    radial-gradient(circle at 18% 28%, rgba(215,169,69,.36) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 24%, rgba(57,245,212,.3) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(215,169,69,.12), transparent) !important;
  background-size: 220px 220px, 260px 260px, auto !important;
}

body.eb-page .hero video {
  opacity: .2 !important;
  filter: sepia(.25) saturate(.82) contrast(1.15) brightness(.72);
}

body.eb-page .hero .container {
  position: relative;
  z-index: 4;
}

body.eb-page .hero-eyebrow,
body.eb-page .section-label,
body.eb-page .section-eyebrow,
body.eb-page .pipeline-label {
  color: var(--eb-gold) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
}

body.eb-page .hero h1,
body.eb-page .section h2,
body.eb-page .workflow-intro h3 {
  font-family: var(--eb-display) !important;
  color: #fff5e8 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  line-height: .95 !important;
  text-transform: uppercase;
  text-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 38px var(--eb-glow);
}

body.eb-page .hero h1 {
  max-width: 900px;
  font-size: clamp(3.8rem, 7.8vw, 7.4rem) !important;
}

body.eb-page .hero h1 .accent,
body.eb-page .hero h1 span,
body.eb-page .section h2 span {
  color: #aaffef !important;
}

body.eb-page .hero-desc,
body.eb-page .hero-sub,
body.eb-page .section-intro {
  max-width: 820px;
  color: rgba(247,239,225,.74) !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
  line-height: 1.72 !important;
}

body.eb-page .hero-cta,
body.eb-page .btn-primary,
body.eb-page .btn-outline,
body.eb-page .step-link,
body.eb-page .node-launch,
body.eb-page .tool-launch-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

body.eb-page .stat-row,
body.eb-page .pipeline,
body.eb-page .pipeline-section,
body.eb-page .utility-section,
body.eb-page .section,
body.eb-page .flow-section,
body.eb-page footer {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

body.eb-page .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215,169,69,.42), transparent) !important;
}

body.eb-page .stat,
body.eb-page .pipeline-node,
body.eb-page .utility-card,
body.eb-page .pipeline-step,
body.eb-page .flow-node,
body.eb-page .step-card,
body.eb-page .qs-card,
body.eb-page .faq-item,
body.eb-page .pipeline-caption {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--eb-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 44%, rgba(255,255,255,.06)),
    radial-gradient(circle at 18% 12%, var(--eb-glow), transparent 46%),
    #141414 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 24px 58px rgba(0,0,0,.38) !important;
}

body.eb-page .pipeline-node::after,
body.eb-page .utility-card::after,
body.eb-page .flow-node::after,
body.eb-page .step-card::after,
body.eb-page .qs-card::after,
body.eb-page .faq-item::after {
  content: "";
  position: absolute;
  inset: auto 14px 14px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--eb-accent), transparent);
  opacity: .28;
}

body.eb-page .pipeline-node:hover,
body.eb-page .utility-card:hover,
body.eb-page .pipeline-step:hover,
body.eb-page .flow-node:hover,
body.eb-page .step-card:hover,
body.eb-page .qs-card:hover,
body.eb-page .faq-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22) !important;
}

body.eb-page .pipeline-node {
  padding: clamp(22px, 3vw, 34px);
}

body.eb-page .stat {
  padding: 14px 20px;
  min-width: 80px;
  text-align: center;
}

body.eb-page .stat-value {
  font-size: 1.25rem !important;
  letter-spacing: 0.05em;
}

body.eb-page .stat-label {
  font-size: 0.6rem !important;
  letter-spacing: 0.1em;
}

body.eb-page .node-tool-name,
body.eb-page .tool-card-name,
body.eb-page .utility-name,
body.eb-page .fn-name,
body.eb-page .step-card-title,
body.eb-page .qs-title,
body.eb-page .faq-q,
body.eb-page .step-name {
  font-family: var(--eb-display) !important;
  color: #fff5e8 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  text-transform: none;
  overflow-wrap: normal;
  text-wrap: balance;
}

body.eb-page .node-tool-name,
body.eb-page .tool-card-name,
body.eb-page .step-card-title {
  font-size: clamp(1.45rem, 2.15vw, 2.35rem) !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}

body.eb-page .utility-name,
body.eb-page .fn-name {
  font-size: clamp(1.25rem, 1.6vw, 1.85rem) !important;
}

body.eb-page .node-step,
body.eb-page .node-number,
body.eb-page .node-byok,
body.eb-page .tool-card-badge,
body.eb-page .tool-byok-note,
body.eb-page .utility-tag,
body.eb-page .step-tool-label,
body.eb-page .step-block-label,
body.eb-page .tip-label,
body.eb-page .fn-num,
body.eb-page .fn-verb,
body.eb-page .step-num,
body.eb-page .qs-num {
  color: var(--eb-gold) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

body.eb-page p,
body.eb-page .node-desc,
body.eb-page .tool-card-desc,
body.eb-page .utility-desc,
body.eb-page .fn-desc,
body.eb-page .step-card-desc,
body.eb-page .qs-text,
body.eb-page .faq-a,
body.eb-page .tip-text,
body.eb-page .pipeline-caption {
  color: rgba(247,239,225,.68) !important;
  line-height: 1.62 !important;
}

body.eb-page li {
  color: rgba(247,239,225,.72);
}

body.eb-page .node-ghost-num,
body.eb-page .step-big-num {
  color: rgba(215,169,69,.11) !important;
  font-family: var(--eb-display) !important;
}

body.eb-page .utility-grid {
  align-items: stretch;
}

body.eb-page .utility-card {
  min-height: 230px;
  align-items: flex-start;
}

body.eb-page .utility-icon {
  border-color: rgba(215,169,69,.22) !important;
  background: rgba(215,169,69,.08) !important;
  color: var(--eb-gold) !important;
}

body.eb-page .pipeline-steps,
body.eb-page .flow-nodes,
body.eb-page .quickstart-grid {
  gap: 14px;
}

body.eb-page .flow-nodes {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(168px, 1fr)) !important;
  align-items: stretch;
  min-width: 0 !important;
}

body.eb-page .flow-node {
  min-width: 0 !important;
}

body.eb-page .flow-connector {
  display: none !important;
}

body.eb-page .flow-connector::before {
  background: linear-gradient(90deg, rgba(215,169,69,.08), rgba(57,245,212,.38), rgba(215,169,69,.08)) !important;
}

body.eb-page .step-illustration,
body.eb-page .tip-box,
body.eb-page .si-body,
body.eb-page .si-bar {
  border-color: rgba(255,255,255,.11) !important;
  background: rgba(255,255,255,.04) !important;
}

body.eb-eval-page .type-display {
  font-family: var(--eb-display) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: #fff4e4 !important;
  text-shadow: 0 18px 55px rgba(0,0,0,.55);
}

body.eb-eval-page .section-label {
  color: var(--eb-accent-2) !important;
  font-family: "DM Mono", monospace;
  letter-spacing: .16em !important;
}

body.eb-eval-page .rv {
  opacity: 1 !important;
  transform: none !important;
}

body.eb-eval-page .card {
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 45%, rgba(255,255,255,.055)),
    radial-gradient(circle at 14% 0%, rgba(57,245,212,.12), transparent 40%),
    rgba(12, 15, 17, .76) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08) !important;
}

body.eb-eval-page .card:hover {
  transform: translateY(-4px);
  border-color: rgba(57,245,212,.3) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 42px rgba(57,245,212,.08) !important;
}

body.eb-page footer {
  border-top: 1px solid rgba(215,169,69,.16) !important;
}

@media (max-width: 980px) {
  body.eb-page .header-nav,
  body.eb-page .nav-links {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.eb-page .hero {
    min-height: 0;
  }

  body.eb-page .hero h1 {
    font-size: clamp(3.4rem, 12vw, 5.8rem) !important;
  }

  body.eb-page .pipeline,
  body.eb-page .utility-grid,
  body.eb-page .flow-nodes,
  body.eb-page .quickstart-grid {
    grid-template-columns: 1fr !important;
  }

  body.eb-page .pipeline-arrow,
  body.eb-page .flow-connector {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body.eb-page .container {
    width: min(100% - 28px, 1220px);
  }

  body.eb-page .hero {
    min-height: 0;
  }

  body.eb-page .hero h1 {
    font-size: clamp(3rem, 16vw, 5rem) !important;
  }

  body.eb-page .header-inner,
  body.eb-page .nav-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 0;
  }

  body.eb-page header,
  body.eb-page > nav {
    min-height: 0;
  }
}