/* AnimatedWebs' Iridescent Voice Orb direction, adapted to QAgent's brand.
   Local CSS only: no external fonts, render loop or animation dependency. */
.marketing-mode { background:#f8f5ef }
.marketing-mode main { width:100%; margin:0; min-height:0 }
.marketing-mode a { text-underline-offset:4px }
.marketing-header { max-width:1440px; margin:auto; padding:26px 5%; border:0; gap:20px; color:var(--ink) }
.marketing-header .brand { gap:9px; font-size:25px; letter-spacing:-.055em }
.brand-dot { color:var(--green); margin-left:-9px }
.marketing-header nav { display:flex; flex-wrap:wrap; gap:24px; align-items:center; font-size:.84rem }
.marketing-header nav a { display:inline-flex; align-items:center; gap:7px; min-height:44px; text-decoration:none; color:var(--muted) }
.marketing-header nav a:hover { color:var(--plum); text-decoration:underline }
.marketing-header .marketing-support { padding-left:24px; border-left:1px solid var(--line); gap:20px }
#marketing-view h1,#marketing-view h2 { letter-spacing:-.045em }
#marketing-view h2 { font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.09 }
#marketing-view h3 { letter-spacing:-.025em; font-weight:600 }
.marketing-eyebrow { text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; font-weight:650; color:var(--green); margin:0 0 22px }
.marketing-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5%; max-width:1440px; margin:auto; padding:30px 5% 80px }
.hero-copy { padding:30px 0 }
.hero-copy .marketing-eyebrow { display:flex; align-items:center; gap:10px }
.hero-copy .marketing-eyebrow > span { width:6px; height:6px; border-radius:50%; background:var(--green) }
#marketing-title { font-size:clamp(3.1rem,5.8vw,5.7rem); line-height:1.02; margin:0 0 25px; font-weight:400 }
#marketing-title em { color:var(--plum); font-weight:400 }
.marketing-lede { font-size:1.04rem; color:var(--muted); max-width:460px; line-height:1.8; margin:0 0 30px }
.marketing-cta { display:inline-flex; gap:32px; align-items:center; justify-content:space-between; background:var(--plum); color:#fff9ef; border-radius:999px; font-size:.9rem; font-weight:600; text-decoration:none; padding:17px 24px; min-height:54px; transition:background .2s,transform .2s }
.marketing-cta:hover { background:#603763; transform:translateY(-2px) }
.marketing-cta > span { font-size:1.15rem; line-height:1 }
.cta-note { font-size:.73rem; color:var(--muted); margin:12px 0 0 5px }
.hero-scene { position:relative; min-height:590px; border-radius:150px 150px 26px 26px; padding:45px 32px 40px; display:flex; flex-direction:column; align-items:center; isolation:isolate; overflow:hidden; color:#f8eee5; background:radial-gradient(ellipse at 12% 10%,#70527355,transparent 50%),radial-gradient(ellipse at 85% 80%,#35656866,transparent 50%),#2f2036; border:1px solid #7b61753d }
.hero-scene::before { content:''; position:absolute; inset:13px; border:1px solid #e5d6bf1c; border-radius:138px 138px 17px 17px; z-index:-1; pointer-events:none }
.scene-topline { display:flex; align-items:center; gap:12px; font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:#dfcedc; margin-top:10px }
.scene-spark { color:var(--brass); font-size:1.7rem }
.marketing-orb { width:min(100%,310px); aspect-ratio:1; position:relative; margin:24px 0 10px; display:grid; place-items:center; flex-shrink:0 }
.orb-core { position:absolute; inset:8%; border-radius:50%; box-shadow:inset -25px -32px 40px #37213a88,inset 14px 14px 28px #fff0d363,0 0 80px #c48fc035,0 0 15px #cfbbaa55; background:radial-gradient(ellipse at 24% 22%,#f8dec0 1%,transparent 44%),radial-gradient(ellipse at 78% 48%,#5f9393 4%,transparent 52%),radial-gradient(ellipse at 42% 85%,#c8b8d2 0%,transparent 55%),linear-gradient(150deg,#92729b,#b889a1 45%,#3f7176) }
.marketing-enhanced .orb-core { animation:marketing-breathe 6s ease-in-out infinite }
.orb-core::after { content:''; position:absolute; inset:7%; border:1px solid #ffedd842; border-radius:48% 52% 61% 39%; transform:rotate(-30deg); box-shadow:inset 9px 8px 20px #fff5e720 }
.orb-ring { position:absolute; inset:0; border:1px solid #e9d7c42b; border-radius:50%; transform:rotate(-25deg) scaleY(.85) }
.orb-ring::before,.orb-ring::after { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--brass); top:40%; left:-1px }
.orb-ring::after { top:auto; left:auto; right:22%; bottom:5%; width:3px; height:3px; background:#c1d2d1 }
.orb-wave { position:relative; display:flex; gap:5px; align-items:center; height:50px; opacity:.87 }
.orb-wave i { display:block; width:3px; height:12px; background:#fff8e8; border-radius:4px; box-shadow:0 0 12px #fff8e855 }
.marketing-enhanced .orb-wave i { animation:marketing-wave 2.5s ease-in-out infinite alternate }
.orb-wave i:nth-child(2n) { height:28px; animation-delay:-.6s }
.orb-wave i:nth-child(3n) { height:39px; animation-delay:-1.5s }
.orb-wave i:nth-child(5) { height:48px; animation-delay:-.9s }
.scene-caption { text-align:center }
.scene-label { display:block; text-transform:uppercase; letter-spacing:.09em; font-size:.58rem; color:#e4cfae; line-height:1.6 }
.scene-caption p { font:1.5rem/1.3 Georgia,serif; letter-spacing:-.02em; margin:10px 0 22px }
.scene-result { display:flex; align-items:center; gap:12px; width:100%; padding:17px; border:1px solid #e4d6c232; border-radius:12px; background:#ffffff09 }
.scene-result .scene-label { color:#d6c7d6; font-size:.54rem }
.scene-result strong { display:block; font-size:.75rem; font-weight:500; margin-top:4px }
.result-check { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:50%; color:#d3e3d3; background:#92b9a62b }
.scene-example { font-size:.58rem; color:#cebecb; margin-top:12px }
.scene-motion { background:transparent; border:0; color:#cebecb; font:inherit; font-size:.62rem; padding:12px 8px; min-height:36px; position:absolute; right:21px; bottom:5px; text-decoration:underline; text-underline-offset:3px }
.scene-motion:hover { color:white }
.scene-offscreen .orb-core,.scene-offscreen .orb-wave i { animation-play-state:paused }
.marketing-intro,.marketing-section { width:min(1200px,90%); margin:0 auto; padding:85px 0 }
.marketing-intro { border-block:1px solid var(--line) }
.marketing-intro > div:not(.use-cases) { display:grid; grid-template-columns:1.2fr 1fr; align-items:start; gap:8% }
.marketing-intro h2 { margin:0 }
.marketing-intro p:not(.marketing-eyebrow) { font-size:1rem; line-height:1.8; color:var(--muted); margin:0 }
.use-cases { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.use-cases span { font-size:.75rem; color:var(--muted); padding:8px 14px; border:1px solid var(--line); border-radius:999px }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; margin-bottom:42px }
.section-heading h2 { margin:0 }
.section-heading > p { max-width:280px; color:var(--muted); font-size:.9rem; line-height:1.8; margin:0 }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px }
.how-grid article { border-top:1px solid var(--line); padding-top:22px }
.step-number { color:var(--green); font-size:.7rem; letter-spacing:.06em }
.how-grid h3 { font-size:1.13rem; margin:22px 0 12px }
.how-grid p { font-size:.88rem; line-height:1.8; color:var(--muted); margin:0 }
.step-illustration { background:#eee8df; border-radius:12px; min-height:155px; margin-top:22px; padding:24px; display:flex; flex-direction:column; justify-content:center; gap:10px; color:var(--plum); font-size:.72rem }
.question-illustration span { margin-bottom:3px }
.question-illustration i { display:block; height:6px; width:88%; border-radius:3px; background:#49264b25 }
.question-illustration i:nth-last-child(1) { width:56% }
.conversation-illustration { background:#eee4ed; align-items:start }
.conversation-illustration span { border-radius:10px 10px 10px 2px; background:#fff9f6; padding:9px 15px; max-width:100% }
.conversation-illustration span+span { align-self:end; background:var(--plum); color:#fff9ef; border-radius:10px 10px 2px 10px }
.answer-illustration { background:#e4ece5; color:#23575a; gap:12px }
.marketing-demo { padding-top:40px }
.demo-shell { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface) }
.demo-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 30px; color:var(--muted); font-size:.7rem; border-bottom:1px solid var(--line) }
.demo-toolbar > span:first-child { display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:600 }
.demo-dot { width:6px; height:6px; background:var(--green); border-radius:50% }
.demo-controls { display:grid; grid-template-columns:repeat(3,1fr); padding:8px; gap:8px; background:#eee9e2; border-bottom:1px solid var(--line) }
.demo-controls button { display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:9px; background:transparent; padding:16px 10px; min-height:52px; color:var(--muted); font-size:.8rem; font-weight:500 }
.demo-controls button span { font-size:.65rem; opacity:.8 }
.demo-controls button[aria-pressed="true"] { color:var(--plum); background:var(--surface); box-shadow:0 1px 4px #3c273311 }
.demo-controls button:hover { color:var(--plum); background:#ffffff80 }
.demo-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:9%; padding:48px; min-height:480px; align-items:center }
.demo-panel+.demo-panel { border-top:1px solid var(--line) }
.demo-panel[hidden]+.demo-panel { border-top:0 }
.demo-explainer h3 { font:2.2rem/1.12 Georgia,serif; font-weight:400!important; margin:0 0 20px }
.demo-explainer > p:not(.marketing-eyebrow) { color:var(--muted); font-size:.94rem; line-height:1.8 }
.demo-explainer > .demo-footnote { font-size:.76rem!important; margin-top:30px; border-left:2px solid var(--line); padding-left:14px }
.sample-card { border:1px solid var(--line); border-radius:12px; background:#f8f5ef; padding:28px }
.sample-card-label { color:var(--green); font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:22px }
.sample-card h4 { font:1.45rem/1.25 Georgia,serif; letter-spacing:-.02em; margin:0 0 13px }
.sample-card > p { color:var(--muted); font-size:.8rem; margin:0 0 26px }
.sample-guidance { border-top:1px solid var(--line); padding-top:18px; font-size:.8rem }
.sample-guidance > span { font-weight:600 }
.sample-guidance ul { padding-left:18px; margin:10px 0 0; line-height:2; color:var(--muted) }
.sample-conversation { display:flex; flex-direction:column; gap:12px; font-size:.82rem }
.sample-conversation > div { border-radius:12px 12px 12px 2px; background:#eee8e0; padding:14px 18px; width:87%; align-self:start }
.sample-conversation span { display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.sample-conversation p { margin:6px 0 0; line-height:1.6 }
.sample-conversation > .sample-respondent { border-radius:12px 12px 2px 12px; background:var(--plum); color:#fff9ee; align-self:end }
.sample-respondent span { color:#e1cadd }
.sample-fields { margin:20px 0; font-size:.78rem }
.sample-fields > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line) }
.sample-fields dt { color:var(--muted) }
.sample-fields dd { margin:0; text-align:right; font-weight:600 }
.sample-card blockquote { margin:0; padding:13px 16px; background:#e8ece3; color:#244746; font-size:.78rem; border-radius:6px }
.sample-card cite { display:block; font:normal .62rem/1.5 "Segoe UI",sans-serif; margin-top:7px }
.demo-navigation { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--line); padding:18px 30px; font-size:.72rem; color:var(--muted) }
.demo-navigation button { background:transparent; color:var(--plum); border:0; font-size:.8rem; padding:10px 0; min-height:44px; text-align:right }
.marketing-care { display:grid; grid-template-columns:1fr 1fr; gap:10%; border-top:1px solid var(--line) }
.marketing-care > div > p:not(.marketing-eyebrow) { font-size:.95rem; color:var(--muted); line-height:1.8; max-width:360px }
.care-items article { display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line) }
.care-items article:first-child { padding-top:0 }
.care-items article > span { font-size:.7rem; color:var(--green); padding-top:3px }
.care-items h3 { font-size:1rem; margin:0 0 12px }
.care-items p { font-size:.85rem; color:var(--muted); line-height:1.8; margin:0 }
.marketing-faq { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-top:20px }
.marketing-faq details { border-bottom:1px solid var(--line) }
.marketing-faq summary { font-size:.9rem; padding:21px 0; line-height:1.5; font-weight:500 }
.marketing-faq details p { font-size:.85rem; line-height:1.8; color:var(--muted); margin:0 0 22px }
.marketing-closing { text-align:center; padding:75px 20px 80px; background:#eae4da; border-block:1px solid var(--line) }
#marketing-view .marketing-closing h2 { font-size:clamp(3.4rem,7vw,6.5rem); line-height:1.02; margin:0 0 30px }
.marketing-closing h2 em { color:var(--plum); font-weight:400 }
.marketing-closing > p:last-child { margin:24px 0 0; font-size:.78rem; color:var(--muted) }
.marketing-closing > p a { color:var(--plum) }
.marketing-footer { width:min(1200px,90%); margin:0 auto; padding:45px 0 0; border:0; align-items:start }
.marketing-footer p { font-size:.74rem; line-height:1.8 }
.marketing-footer nav { display:flex; flex-wrap:wrap; gap:25px }
.marketing-footer nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:.78rem }
.footer-wordmark { flex-basis:100%; overflow:hidden; font-size:clamp(5rem,22vw,19rem); font-weight:650; line-height:1.15; letter-spacing:-.075em; color:#ded7cd; user-select:none; margin-left:-.01em; margin-top:10px }
@keyframes marketing-breathe { 0%,100% { transform:scale(1) rotate(-3deg) } 50% { transform:scale(1.04) rotate(3deg) } }
@keyframes marketing-wave { to { transform:scaleY(.4) } }
@media (min-width:1450px) { .marketing-hero { gap:6% } }
@media (max-width:1000px) {
  .marketing-header > nav:not(.marketing-support) { display:none }
  .marketing-header .marketing-support { border:0; padding:0 }
  .marketing-hero { gap:4%; padding-top:15px }
  .hero-scene { min-height:550px; padding:32px 23px 40px; border-radius:120px 120px 22px 22px }
  .hero-scene::before { border-radius:108px 108px 13px 13px }
  .scene-topline { letter-spacing:.04em; font-size:.57rem }
  .marketing-orb { width:270px; margin-top:20px }
  .marketing-lede { font-size:.94rem }
  .how-grid { gap:22px }
  .step-illustration { padding:20px }
  .demo-panel { padding:35px; gap:7% }
}
@media (max-width:700px) {
  .marketing-header { padding:15px 5%; gap:8px 18px }
  .marketing-header .brand { font-size:23px }
  .marketing-header .brand img { width:30px; height:30px }
  .marketing-header .marketing-support { gap:15px; font-size:.73rem }
  .marketing-hero { grid-template-columns:1fr; padding:10px 5% 55px; gap:30px }
  .hero-copy { padding:20px 0 0 }
  #marketing-title { font-size:clamp(2.9rem,10.6vw,4.4rem) }
  .marketing-lede { max-width:520px }
  .hero-scene { width:100%; max-width:500px; justify-self:center; min-height:550px; border-radius:110px 110px 22px 22px; padding-inline:28px }
  .hero-scene::before { border-radius:98px 98px 13px 13px }
  .scene-topline { font-size:.6rem; gap:12px }
  .marketing-orb { width:280px; max-width:100% }
  .scene-result { max-width:340px }
  .marketing-intro,.marketing-section { padding:50px 0 }
  .marketing-intro > div:not(.use-cases),.marketing-care,.marketing-faq { grid-template-columns:1fr; gap:26px }
  .marketing-intro p:not(.marketing-eyebrow) { font-size:.9rem }
  .section-heading { display:block; margin-bottom:30px }
  .section-heading > p { max-width:100%; margin-top:20px }
  .how-grid { grid-template-columns:1fr; gap:32px }
  .step-illustration { min-height:135px; max-width:100% }
  .how-grid h3 { margin-top:20px }
  .demo-toolbar { padding:16px 20px; font-size:.65rem }
  .demo-controls { gap:4px; padding:6px }
  .demo-controls button { flex-direction:column; gap:5px; padding:12px 6px; font-size:.72rem; line-height:1.4 }
  .demo-panel { grid-template-columns:1fr; gap:22px; padding:25px 20px; min-height:0 }
  .demo-explainer h3 { font-size:1.8rem }
  .demo-explainer > p:not(.marketing-eyebrow) { font-size:.86rem }
  .demo-explainer > .demo-footnote { margin-top:18px }
  .sample-card { padding:23px }
  .demo-navigation { padding:12px 20px; gap:12px }
  .demo-navigation > span { max-width:42%; font-size:.65rem }
  .demo-navigation button { max-width:55%; font-size:.74rem }
  .marketing-care > div > p:not(.marketing-eyebrow) { max-width:100% }
  .marketing-faq { padding-top:0 }
  .marketing-footer nav { gap:8px 20px }
  .footer-wordmark { font-size:24vw }
}
@media (max-width:380px) {
  .marketing-header { justify-content:center; padding-bottom:0 }
  .marketing-header .marketing-support { width:100%; justify-content:space-between }
  .scene-result { padding:12px; gap:8px }
  .scene-result strong { font-size:.67rem }
  .scene-topline { font-size:.53rem }
  .marketing-eyebrow { font-size:.62rem }
  .sample-card { padding:18px }
}
@media (prefers-reduced-motion:reduce) { .scene-motion { display:none } .orb-core,.orb-wave i { animation:none } }