/* Warm, consistent service-page layout for AI video production. */
body.ai-service-page { overflow-x: clip !important; background: #faf9f6 !important; }
body.ai-service-page > main {
  width: min(1280px,calc(100% - 24px)) !important;
  max-width: 1280px !important;
  gap: 42px !important;
}
body.ai-service-page > main > section { margin-top: 0 !important; }
body.ai-service-page > main > .ai-main-hero:first-child { margin-top: 0 !important; }
body.ai-service-page > main > :is(.ai-main-hero,.ai-production-section,.ai-workflow-section,.ai-benefits-section) {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc((100% - 100vw)/2) !important;
  margin-right: calc((100% - 100vw)/2) !important;
  padding-left: max(24px,calc((100vw - 1280px)/2)) !important;
  padding-right: max(24px,calc((100vw - 1280px)/2)) !important;
  border-radius: 0 !important;
}
body.ai-service-page > main > .ai-main-hero {
  position: relative !important;
  overflow: hidden !important;
  background: #111827 !important;
  box-shadow: none !important;
}
body.ai-service-page > main > .ai-main-hero {
  background: radial-gradient(circle at 88% 18%,rgba(255,112,0,.13),transparent 28%),radial-gradient(circle at 12% 92%,rgba(255,190,120,.16),transparent 30%),linear-gradient(135deg,#fff 0%,#fffaf5 56%,#fff1df 100%) !important;
}
body.ai-service-page .ai-main-hero .grid-layer {
  opacity: .3 !important;
  background-image: linear-gradient(rgba(217,138,75,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(217,138,75,.09) 1px,transparent 1px) !important;
}
body.ai-service-page .ai-main-hero .ai-orb { opacity: .18 !important; }
body.ai-service-page > main > .ai-main-hero { padding-top: 40px !important; padding-bottom: 40px !important; }
body.ai-service-page > main > .ai-production-section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  border: 0 !important;
  background: linear-gradient(135deg,#fff7ed,#fff 58%,#fff1df) !important;
  box-shadow: none !important;
}
body.ai-service-page > main > .ai-workflow-section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.ai-service-page > main > .ai-benefits-section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  background: #fff !important;
}
body.ai-service-page .ai-main-hero > .relative.z-10,
body.ai-service-page .ai-production-section > .grid,
body.ai-service-page .ai-workflow-section > :is(div:first-child,.ai-flow),
body.ai-service-page .ai-benefits-section > :is(div:first-child,.grid),
body.ai-service-page .ai-closing-section > .relative.z-10 {
  width: min(1280px,100%) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}
body.ai-service-page .ai-main-hero > .grid-layer { pointer-events: none !important; }
body.ai-service-page .ai-main-hero h2 {
  max-width: 720px !important;
  color: #172033 !important;
  font-size: clamp(28px,3.3vw,44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}
body.ai-service-page .ai-main-hero .ai-type {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  border-right: 0 !important;
  animation: none !important;
  color: #d96a1c !important;
}
body.ai-service-page .ai-main-hero p.text-slate-300 { color: #617086 !important; }
body.ai-service-page .ai-main-hero .ai-console {
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 22px !important;
  background: #111827 !important;
  backdrop-filter: none !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.24) !important;
}
body.ai-service-page .ai-main-hero .ai-console .ai-prompt {
  border-color: rgba(255,145,61,.42) !important;
  background: #0b1220 !important;
  color: #e5e7eb !important;
}
body.ai-service-page .ai-main-hero .ai-console > div:nth-of-type(4) {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: #0b1220 !important;
}
body.ai-service-page .ai-main-hero .ai-console > div:nth-of-type(5) > div {
  border-color: rgba(255,255,255,.12) !important;
  background: #202b3b !important;
}
body.ai-service-page .ai-main-hero .ai-console .text-slate-400 { color: #aab6c7 !important; }
body.ai-service-page .ai-main-hero .ai-console .text-slate-300 { color: #d4dbe5 !important; }
body.ai-service-page .ai-main-hero .ai-console .text-orange-300 { color: #ffb36f !important; }
body.ai-service-page .ai-main-hero .ai-console .text-orange-200 { color: #ffd0a0 !important; }
body.ai-service-page .ai-main-hero .ai-eyebrow { border-color: #f4d4b4 !important; background: #fff3e5 !important; color: #bd6423 !important; }
body.ai-service-page .ai-btn { background: #f47721 !important; box-shadow: 0 10px 24px rgba(244,119,33,.22) !important; }
body.ai-service-page .ai-btn:hover { background: #df6517 !important; }
body.ai-service-page :is(.ai-capabilities-section,.ai-services-section,.ai-voice-section,.ai-benefits-section) > div:first-child h2,
body.ai-service-page .ai-workflow-section > div:first-child h2,
body.ai-service-page .ai-production-section h2 {
  color: #172033 !important;
  font-size: clamp(20px,2vw,27px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}
body.ai-service-page .ai-section-tag { color: #e87922 !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
body.ai-service-page :is(.ai-chip,.ai-card,.ai-reason) {
  border: 1px solid #f0e5da !important;
  border-bottom: 3px solid #f5c89f !important;
  border-radius: 17px !important;
  background: linear-gradient(150deg,#fffdfa 0%,#fff8f0 100%) !important;
  box-shadow: 0 8px 22px rgba(108,65,30,.055) !important;
  transition: transform .23s ease,box-shadow .23s ease,border-color .23s ease !important;
}
body.ai-service-page :is(.ai-chip,.ai-card,.ai-reason):hover {
  transform: translateY(-4px) !important;
  border-color: #efc89f !important;
  box-shadow: 0 15px 28px rgba(126,76,33,.11) !important;
}
body.ai-service-page .ai-chip {
  min-height: 82px !important;
  justify-content: center !important;
  color: #39475a !important;
  font-size: 12px !important;
}
body.ai-service-page .ai-chip > i { color: #d98a4b !important; }
body.ai-service-page .ai-chip .chip-dot { display: none !important; }
body.ai-service-page .ai-services-section .ai-card,
body.ai-service-page .ai-benefits-section .ai-reason {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 176px !important;
  padding: 20px 17px !important;
  text-align: center !important;
}
body.ai-service-page .ai-services-section .ai-card > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
body.ai-service-page .ai-card .icon-tile,
body.ai-service-page .ai-reason > div:first-child {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 auto 10px !important;
  border: 1px solid #f6e3d1 !important;
  border-radius: 13px !important;
  background: #fff1e2 !important;
  color: #d98a4b !important;
  font-size: 17px !important;
}
body.ai-service-page :is(.ai-card,.ai-reason) h3 {
  width: 100% !important;
  margin: 0 !important;
  color: #293548 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  text-align: center !important;
}
body.ai-service-page :is(.ai-card,.ai-reason) p {
  width: 100% !important;
  margin: 8px 0 0 !important;
  color: #6b7789 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}
body.ai-service-page .ai-flow { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 14px !important; margin-top: 28px !important; }
body.ai-service-page .ai-flow .flow-line { display: none !important; }
body.ai-service-page .ai-node {
  min-height: 168px !important;
  padding: 18px 14px !important;
  border: 1px solid #f0e5da !important;
  border-bottom: 3px solid #f5c89f !important;
  border-radius: 17px !important;
  background: linear-gradient(150deg,#fffdfa 0%,#fff8f0 100%) !important;
  box-shadow: 0 8px 22px rgba(108,65,30,.055) !important;
  text-align: center !important;
}
body.ai-service-page .ai-node-dot {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto !important;
  border: 1px solid #f6e3d1 !important;
  border-radius: 13px !important;
  background: #fff1e2 !important;
  color: #d98a4b !important;
  box-shadow: none !important;
}
body.ai-service-page .ai-node h3 { margin: 10px 0 0 !important; color: #293548 !important; font-size: 14px !important; text-align: center !important; }
body.ai-service-page .ai-node p { margin: 6px 0 0 !important; color: #6b7789 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; }
@media (max-width: 900px) {
  body.ai-service-page .ai-flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  body.ai-service-page > main { width: calc(100% - 8px) !important; gap: 30px !important; }
  body.ai-service-page > main > :is(.ai-main-hero,.ai-production-section,.ai-workflow-section,.ai-benefits-section) { padding-left: 18px !important; padding-right: 18px !important; }
  body.ai-service-page > main > :is(.ai-main-hero,.ai-production-section,.ai-workflow-section,.ai-benefits-section) { padding-top: 30px !important; padding-bottom: 30px !important; }
  body.ai-service-page .ai-flow { grid-template-columns: 1fr !important; }
  body.ai-service-page :is(.ai-services-section .ai-card,.ai-benefits-section .ai-reason,.ai-node) { min-height: 0 !important; }
}