/* Identidade Logos (azul): carregado por último. Tokens da marca, hero em vídeo,
   cortinas, CTA com luz orbitante, fotos tratadas na paleta e efeitos ligados à rolagem/cursor. */
:root {
  --ink-950: #050b16;
  --navy-900: #0a1830;
  --navy: #0f2547;
  --violet: #1f5bc0;
  --violet-dark: #17489c;
  --sky: #a9c8f2;
  --sky-soft: #d5e4f8;
  --ink: #14253f;
  --muted: #4e5e78;
  --line: #dde5f0;
  --lavender: #edf3fc;
  --soft: #f5f8fc;
  --brand-blue: #1f5bc0;
  --brand-blue-deep: #184c9f;
  --sun: #ffd84d;
}
.landing-modern {
  --page-dark: var(--navy-900);
  --page-lilac: var(--sky-soft);
  --page-shadow: 0 24px 64px #0a183014;
  background: var(--white);
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a, button, summary, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-color: var(--violet); }

/* ---------- Cortina de entrada (só CSS, sai sozinha) e de transição ---------- */
.intro-curtain, .page-curtain {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 68% 62%, #1d3d6c 0%, var(--navy-900) 48%, var(--ink-950) 100%);
}
.curtain-logo { width: min(210px, 46vw); height: auto; color: #fff; }
.intro-curtain { animation: curtain-leave .7s cubic-bezier(.7, 0, .2, 1) .85s forwards; }
.intro-curtain .curtain-logo { animation: curtain-logo-in .5s ease-out both; }
@keyframes curtain-leave { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes curtain-logo-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.page-curtain { transform: translateY(100%); visibility: hidden; transition: transform .48s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .48s; }
.page-curtain.is-covering { transform: none; visibility: visible; transition: transform .48s cubic-bezier(.7, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .intro-curtain, .page-curtain { display: none; } }

/* ---------- Cabeçalho sobre o vídeo ---------- */
.landing-modern .header {
  position: fixed; inset: 0 0 auto; z-index: 40; background: linear-gradient(180deg, #184c9fcc, #184c9f00); border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.landing-modern .header, .landing-modern .header.is-scrolled { border-bottom: 0; box-shadow: none; }
.landing-modern .header.is-scrolled { background: #050b16f2; }
.landing-modern .brand { color: #fff; gap: 10px; font-size: inherit; }
.brand .brand-mark { width: 44px; height: 24px; }
.brand .brand-word { width: 74px; height: 31px; }
.landing-modern .brand .brand-detail { color: var(--sky); border-color: #ffffff33; font-size: 11px; padding-left: 10px; margin-left: 2px; }
.landing-modern nav > a { color: #dce6f5; }
.landing-modern #navigation > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.landing-modern #navigation > a:is(:hover, [aria-current=location]) { color: #fff; }
.landing-modern #navigation > a:not(.button)::after { background: var(--sun); bottom: 6px; }
.landing-modern .menu-button { color: #fff; }
.landing-modern .header :focus-visible { outline-color: var(--sky); }
.landing-modern nav .button { background: #fff; color: var(--navy); }
.landing-modern nav .button:hover { background: var(--sky-soft); }
html { scroll-padding-top: 96px; scroll-padding-bottom: 24px; }

/* ---------- Hero em vídeo, tela cheia ---------- */
.video-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; min-height: max(100svh, 620px); padding-block: 132px 112px; background: var(--brand-blue-deep); color: #fff; overflow: hidden; }
.video-hero-media { position: absolute; inset: 0; z-index: -1; }
.video-hero-media img, .video-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 40%; filter: saturate(.8); }
.video-hero-video { opacity: 0; transition: opacity .9s ease; }
.video-hero-video.is-playing { opacity: 1; }
.video-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #184c9ff2 0%, #1f5bc0e0 36%, #1f5bc04d 66%, #1f5bc014 100%),
    linear-gradient(0deg, #184c9fd9 0%, #184c9f00 42%);
}
.video-hero-content { position: relative; }
.video-hero-content > * { max-width: 640px; }
.video-hero .hero-keyword {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 24px; padding: 8px 13px; border: 1px solid #ffffff2b; border-radius: 999px; background: #184c9fb3;
  font-family: var(--font-body); font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; color: #fff;
}
.video-hero .hero-keyword .icon { width: 15px; height: 15px; color: var(--sun); }
.video-hero-content > .hero-display { max-width: 960px; }
.hero-display { margin: 0 0 24px; font-family: var(--font-display); font-size: clamp(40px, 4.7vw, 66px); font-weight: 780; line-height: 1.06; letter-spacing: -.045em; color: #fff; }
.hero-display > span[aria-hidden] { display: block; text-wrap: balance; }
.hero-display .hero-title-next { margin-top: 6px; }
.hero-display em { color: var(--sun); }
.hero-display .hero-type-line { position: relative; white-space: nowrap; min-height: 1.06em; }
.video-hero .hero-type-cursor { color: var(--sun); }
.video-hero .hero-description { color: #eaf1fc; font-size: 18px; line-height: 1.7; max-width: 540px; margin: 0 0 32px; }
.video-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.video-hero .text-link { color: #fff; font-size: 14px; min-height: 54px; padding: 0 22px; border: 1.5px solid #ffffffb3; border-radius: 9px; transition: background-color .2s ease, border-color .2s ease; }
.video-hero .text-link:hover { color: #fff; background: #ffffff1f; border-color: #fff; }
.video-hero .hero-reassurance { margin-top: 30px; }
.landing-modern .video-hero .hero-reassurance > span { color: #fff; background: #184c9fb3; border-color: #ffffff33; }
.landing-modern .video-hero .hero-reassurance .icon { color: var(--sun); }
.video-hero :focus-visible { outline-color: #fff; }
.stock-note { position: absolute; left: max(24px, calc((100% - 1200px) / 2)); bottom: 36px; margin: 0; font-size: 11px; color: #eaf1fc; }

/* ---------- CTA principal com luz orbitante ---------- */
@property --orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.landing-modern .button.orbit-cta {
  --cta-fill: linear-gradient(180deg, #ffe27a, var(--sun));
  position: relative; isolation: isolate; overflow: visible; background: transparent; color: var(--navy); border: 0; box-shadow: none;
  transition: transform .22s ease;
}
.landing-modern .button.orbit-cta::after {
  content: ''; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: none; border-radius: inherit; border: 3px solid transparent;
  /* Um cometa de luz (cabeça branca, cauda dourada) percorre o contorno; a base do anel é o próprio amarelo,
     sem borda escura. O gradiente fica no pseudo-elemento: é nele que --orbit anima (a propriedade não herda). */
  background: var(--cta-fill) padding-box, conic-gradient(from var(--orbit), #f5c42c 0deg 150deg, #ffd84d 200deg, #ffeb99 270deg, #fff8dc 320deg, #ffffff 340deg, #f5c42c 352deg) border-box;
  animation: orbit-spin 3s linear infinite;
}
.landing-modern .button.orbit-cta::before {
  content: ''; display: block; position: absolute; inset: -9px; z-index: -2; pointer-events: none; border-radius: 18px; background: conic-gradient(from var(--orbit), transparent 0deg 170deg, #ffd84d99 240deg, #ffe98f 300deg, #fffbea 340deg, transparent 356deg);
  filter: blur(10px); opacity: 1; animation: orbit-spin 3s linear infinite;
  transition: opacity .22s ease, filter .22s ease, inset .22s ease;
}
.landing-modern .button.orbit-cta:hover { background: transparent; transform: translateY(-2px); box-shadow: none; }
.landing-modern .button.orbit-cta:hover::before { opacity: 1; filter: blur(18px); inset: -12px; }
.landing-modern .button.orbit-cta:active { transform: translateY(0); }
.landing-modern .button.orbit-cta:focus-visible { outline: 3px solid var(--sky); outline-offset: 5px; }
.landing-modern .button.orbit-cta:hover { --cta-fill: linear-gradient(180deg, #ffe58a, #ffd02e); }
.landing-modern .final-cta .button.light.orbit-cta { color: var(--navy); }
@keyframes orbit-spin { to { --orbit: 360deg; } }
.landing-modern .button.orbit-cta:disabled::before, .landing-modern .button.orbit-cta:disabled::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .landing-modern .button.orbit-cta::before, .landing-modern .button.orbit-cta::after { animation: none; } }

/* ---------- Seção de demonstração logo após o hero (clara, contraste com o hero escuro) ---------- */
.landing-modern .showcase .hero { grid-template-columns: .9fr 1.1fr; padding-block: 96px; }
.showcase-copy { max-width: 470px; }
.showcase-copy h2 { font-size: clamp(30px, 3.2vw, 44px); }
.showcase-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }
.landing-modern .showcase .hero-connection-note { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--sun); border-radius: 0 10px 10px 0; background: var(--lavender); font-size: 14px; color: var(--ink); }
.landing-modern .showcase .eyebrow { color: var(--brand-blue); }
/* Painel azul atrás da demonstração; fonte e conversa em branco, com amarelo nos detalhes. */
.landing-modern .showcase .hero-visual { padding: 0 0 28px; }
.landing-modern .showcase .hero-visual::after {
  content: ''; display: block; position: absolute; inset: 88px -28px -8px 44px; z-index: -1; border-radius: 28px;
  background: radial-gradient(ellipse 80% 70% at 75% 25%, #2c6fd8 0%, var(--brand-blue) 55%, var(--brand-blue-deep) 100%);
}
.landing-modern .showcase .hero .source-card { background: #fff; border: 0; box-shadow: 0 18px 40px #0f254724; }
.landing-modern .showcase .source-heading { color: var(--brand-blue); }
.landing-modern .showcase .source-ai-tag { background: var(--sun); color: var(--navy); border-color: var(--sun); font-weight: 700; }
.landing-modern .showcase .source-card strong { color: var(--navy); }
.landing-modern .showcase .hero .source-card p { color: var(--ink); }
.landing-modern .showcase .source-foot { color: var(--muted); }
.landing-modern .showcase .hero .source-connector, .landing-modern .showcase .energy-connector { color: var(--sun); stroke: var(--sun); }
.landing-modern .showcase .energy-track { stroke: var(--sun); opacity: .7; }
.landing-modern .showcase .hero .chat-window { border: 0; box-shadow: 0 24px 60px #0a183040; }
.landing-modern .showcase .hero .window-top { background: var(--soft); }
.landing-modern .showcase .hero .agent-head .hero-ai-avatar { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); box-shadow: none; }
.landing-modern .showcase .agent-head .hero-agent-identity > .agent-kind { color: var(--brand-blue); }
.landing-modern .showcase .hero-ai-badge { background: var(--sun); color: var(--navy); font-weight: 700; }
.landing-modern .showcase .hero .bubble.user { background: var(--brand-blue); color: #fff; }
.landing-modern .showcase .hero .bubble.user small { color: #eaf1fc; }
.landing-modern .showcase .hero .bubble.assistant { background: var(--lavender); border: 1px solid #d5e4f8; color: var(--ink); }
.landing-modern .showcase .hero .bubble.assistant small { color: var(--muted); }
.landing-modern .showcase .hero .chat-bottom .icon { color: var(--brand-blue); }
.landing-modern .showcase .typing-indicator > span { background: var(--brand-blue); }
.landing-modern .showcase .visual-endnote { color: #fff; position: relative; }
.landing-modern .showcase .visual-endnote .icon { color: var(--sun); }
.landing-modern .showcase .hero-channels { padding-left: 64px; gap: 8px; }
.landing-modern .showcase .hero-channels > span { min-height: 34px; padding: 6px 12px; gap: 7px; border: 1px solid #ffffff40; border-radius: 999px; color: #fff; background: #ffffff1f; font-size: 11px; line-height: 1.4; white-space: nowrap; }
.landing-modern .showcase .hero-channels > span .icon { flex-shrink: 0; }
.landing-modern .showcase .hero-channels > span:not(:first-child) .icon { color: var(--sun); }

/* ---------- Elemento ligado à rolagem: a marca se monta ---------- */
.connect-band { --p: 1; position: relative; background: radial-gradient(ellipse 70% 60% at 50% 55%, #2c6fd8 0%, var(--brand-blue) 52%, var(--brand-blue-deep) 100%); color: #fff; }
.connect-band.connect-live { --p: 0; height: 210vh; }
.connect-sticky { padding-block: 96px; }
.connect-live .connect-sticky { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 72px; }
.connect-inner { text-align: center; }
.connect-band .eyebrow { color: var(--sun); }
.connect-band h2 { color: #fff; max-width: 720px; margin-inline: auto; }
.connect-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; margin: 56px auto 40px; height: clamp(170px, 24vw, 270px); }
.connect-piece, .connect-star { position: relative; display: flex; flex-direction: column; align-items: center; }
.connect-piece svg { width: clamp(110px, 17vw, 200px); height: auto; color: #fff; }
.connect-left { transform: translateX(calc((1 - var(--p)) * -24vw)); opacity: calc(.45 + var(--p) * .55); }
.connect-right { transform: translateX(calc((1 - var(--p)) * 24vw)); opacity: calc(.45 + var(--p) * .55); }
.connect-star { position: absolute; left: 50%; top: 0; width: clamp(220px, 34vw, 400px); transform: translateX(-50%); opacity: clamp(0, (var(--p) - .78) * 5, 1); pointer-events: none; }
.connect-star svg { width: 100%; height: auto; color: var(--sun); filter: drop-shadow(0 0 22px #ffd84daa); }
.connect-piece span { display: block; margin-top: 18px; font-size: 13px; font-weight: 650; color: #fff; white-space: nowrap; }
.connect-left span { transform: translateX(-30%); }
.connect-right span { transform: translateX(30%); }
.connect-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.connect-steps li { counter-increment: step; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; }
.connect-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ffd84d99; color: var(--sun); font-size: 13px; font-weight: 700; }

/* ---------- Fotos com cores naturais suaves ---------- */
.photo-frame { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: var(--navy-900); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.problem-visual { position: relative; isolation: isolate; min-width: 0; }
/* Bloco amarelo deslocado atrás da foto, como na assinatura da marca. */
.problem-visual::before { content: ''; position: absolute; top: -20px; right: -20px; z-index: -1; width: 48%; height: 42%; border-radius: 20px; background: var(--sun); }
.problem-photo { width: 78%; margin-left: auto; aspect-ratio: 4 / 5; }
.landing-modern .problem-visual .question-list { position: absolute; left: 0; bottom: 6%; width: min(360px, 74%); padding: 0; }
.landing-modern .problem-visual .question-list .queue-caption { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--sun); color: var(--navy); font-weight: 700; }
.landing-modern .problem-visual .question-list .queue-caption .icon { color: var(--navy); }
.landing-modern .problem-visual .question-list blockquote { background: #fff; border-left: 4px solid var(--brand-blue); box-shadow: 0 16px 40px #0a183033; }
.landing-modern .problem-visual .question-list blockquote .icon { color: var(--brand-blue); }
.landing-modern .problem-visual .question-list blockquote:nth-of-type(2) { background: var(--brand-blue); border-left-color: var(--sun); }
.landing-modern .problem-visual .question-list blockquote:nth-of-type(2) p { color: #fff; }
.landing-modern .problem-visual .question-list blockquote:nth-of-type(2) .icon { color: var(--sun); }
.benefits-intro { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.landing-modern .benefits-intro .center-intro { margin: 0; }
.benefits-photo { aspect-ratio: 5 / 4; }
.benefits-photo img { object-position: 50% 28%; }
.faq-photo { max-width: 340px; aspect-ratio: 4 / 5; margin-top: 32px; }

/* ---------- Chamada final: luz que segue o cursor ---------- */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
.landing-modern .final-cta { isolation: isolate; background: radial-gradient(ellipse 90% 80% at 85% 20%, #2c6fd8 0%, var(--brand-blue) 55%, var(--brand-blue-deep) 100%); }
.final-cta > *:not(.cursor-light) { position: relative; z-index: 1; }
.cursor-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(460px circle at var(--mx) var(--my), #ffffff2e, transparent 62%); animation: ambient-drift 16s ease-in-out infinite alternate; }
.final-cta.cursor-live .cursor-light { animation: none; transition: --mx .35s ease-out, --my .35s ease-out; }
@keyframes ambient-drift { 0% { --mx: 70%; --my: 25%; } 50% { --mx: 35%; --my: 70%; } 100% { --mx: 82%; --my: 60%; } }
.landing-modern .final-cta .eyebrow { color: var(--sun); }
.landing-modern .final-cta p:not(.eyebrow) { color: #eaf1fc; }
.landing-modern .final-symbol { color: var(--sun); border-color: #ffffff4d; }
.landing-modern .final-orb { background: var(--navy); border-color: #ffffff40; color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .cursor-light { animation: none; } }

/* ---------- Seção de benefícios no azul da marca ---------- */
.landing-modern .benefits { background: var(--brand-blue); }
.landing-modern .benefits .eyebrow { color: var(--sun); }
.landing-modern .benefits .benefit-label { color: var(--sun) !important; }
.landing-modern .benefit-grid .benefit-conversion { background: var(--navy) !important; border-color: #ffffff26 !important; }
.landing-modern .benefit-productivity > p, .landing-modern .benefit-relationship > p { color: #eaf1fc; }
.landing-modern .benefit-productivity .benefit-label, .landing-modern .benefit-relationship .benefit-label { color: #fff; }
.landing-modern .benefit-grid .benefit-relationship { border-top-color: #ffffff40; }
.landing-modern .benefits .question-stack b, .landing-modern .benefits .honest-note, .landing-modern .benefits .honest-note .icon { color: #fff; }
.landing-modern .benefits .care-note strong { color: #fff; }
.landing-modern .benefits .care-note div > span { color: #eaf1fc; }
.landing-modern .benefits :focus-visible { outline-color: #fff; }

/* ---------- Os três pilares: gavetas que se empilham na rolagem ---------- */
.landing-modern .benefit-grid { --stack-top: 112px; --stack-step: 56px; display: block; position: relative; isolation: isolate; }
.landing-modern .benefit-grid.is-stacking::after { content: ''; display: block; height: clamp(96px, 18vh, 180px); }
.landing-modern .benefit-grid > article { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 56px; row-gap: 20px; min-height: 400px; margin: 0 0 32px; padding: 32px 40px 40px; border: 1px solid #ffffff26; border-radius: 22px; box-shadow: 0 -8px 32px #0a18302b; }
.landing-modern .benefit-grid > article:last-child { margin-bottom: 0; }
.landing-modern .benefit-grid.is-stacking > article { position: sticky; top: calc(var(--stack-top) + var(--pillar-index) * var(--stack-step)); }
.landing-modern .benefit-grid .benefit-conversion { --pillar-index: 0; z-index: 1; grid-row: auto; padding: 32px 40px 40px; border-radius: 22px; }
.landing-modern .benefit-grid .benefit-productivity { --pillar-index: 1; z-index: 2; padding: 32px 40px 40px; border-radius: 22px; background: var(--brand-blue-deep) !important; }
.landing-modern .benefit-grid .benefit-relationship { --pillar-index: 2; z-index: 3; padding: 32px 40px 40px; border-radius: 22px; background: #13345c !important; border-top: 1px solid #ffffff40; }
.landing-modern .benefit-grid article > .benefit-label { grid-column: 1 / -1; margin: 0; min-height: 18px; }
.landing-modern .benefit-grid article > h3 { grid-column: 1; margin: 0; max-width: 18ch; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; color: #fff; text-wrap: balance; }
.landing-modern .benefit-grid article > p { grid-column: 1; margin: 0; max-width: 50ch; font-size: 15px; line-height: 1.8; color: #eaf1fc; }
.landing-modern .benefit-grid article > :is(.conversation-path, .question-stack, .care-note) { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; }
.landing-modern .benefit-grid .question-stack { gap: 12px; }
.landing-modern .benefit-grid .question-stack > span { padding: 12px 16px; font-size: 13px; border-radius: 10px; background: #ffffff12; }
.landing-modern .benefit-grid .care-note { padding: 24px; border: 1px solid #ffffff33; border-radius: 16px; background: #ffffff0d; }
@media (max-width: 850px) {
  .landing-modern .benefit-grid { --stack-top: 94px; --stack-step: 48px; }
  .landing-modern .benefit-grid > article { column-gap: 28px; }
}
@media (max-width: 620px) {
  .landing-modern .benefit-grid > article { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 18px; min-height: 480px; }
  .landing-modern .benefit-grid :is(.benefit-conversion, .benefit-productivity, .benefit-relationship) { padding: 22px 22px 28px; border-radius: 18px; }
  .landing-modern .benefit-grid article > h3 { font-size: 28px; max-width: 21ch; }
  .landing-modern .benefit-grid article > p { font-size: 14px; line-height: 1.7; }
  .landing-modern .benefit-grid article > :is(.conversation-path, .question-stack, .care-note) { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .landing-modern .benefit-grid .conversation-path > :is(span, div) { padding: 12px 14px; }
  .landing-modern .benefit-grid .conversation-path > i { height: 16px; }
  .landing-modern .benefit-grid .care-note { padding: 18px; }
}
@media (min-width: 621px) and (max-height: 750px) {
  .landing-modern .benefit-grid { --stack-top: 96px; --stack-step: 44px; }
  .landing-modern .benefit-grid > article { min-height: 340px; }
  .landing-modern .benefit-grid :is(.benefit-conversion, .benefit-productivity, .benefit-relationship) { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-modern .benefit-grid.is-stacking::after { display: none; }
  .landing-modern .benefit-grid.is-stacking > article { position: relative; top: auto; }
}
@media (forced-colors: active) {
  .landing-modern .benefit-grid :is(.benefit-conversion, .benefit-productivity, .benefit-relationship) { background: Canvas !important; border: 1px solid CanvasText !important; }
}

/* ---------- Faixa de frases: amarela, logo após o topo azul ---------- */
.landing-modern .principle-strip { background: var(--sun); }
.landing-modern .principle-strip .marquee-item > span { color: var(--navy); }
.landing-modern .principle-strip .icon { color: var(--brand-blue); }
.landing-modern .principle-strip :focus-visible { outline-color: var(--navy); }

/* ---------- Como funciona ---------- */
.landing-modern .step-select:hover { background: var(--lavender); }
.landing-modern .step-select[aria-pressed=true] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.landing-modern .step-select .step-number { background: var(--lavender); color: var(--brand-blue); }
.landing-modern .step-select[aria-pressed=true] .step-number { background: var(--sun); color: var(--navy); }
/* Linha do percurso (inspirada no "Como funciona" da Leader): pontilhado de fundo, linha azul desenhada
   pela rolagem e ponta amarela; cada número acende quando a linha chega nele. Só aparece com JavaScript. */
.landing-modern .steps { position: relative; }
.landing-modern .steps article { position: relative; z-index: 1; }
.landing-modern .step-select .step-number { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid #b9cff0; background: #fff; transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.steps-line { display: none; }
.steps-live .steps-line { display: block; position: absolute; z-index: 0; left: var(--line-x, 33px); top: var(--line-top, 0); height: var(--line-height, 0); width: 4px; margin-left: -2px; pointer-events: none;
  background-image: radial-gradient(circle, #1f5bc059 1.4px, transparent 1.9px); background-size: 4px 11px; background-repeat: repeat-y; }
.steps-line-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--brand-blue); box-shadow: 0 0 10px #1f5bc080; transform-origin: top; transform: scaleY(var(--line, 1)); }
.steps-line-tip { position: absolute; left: 50%; top: calc(var(--line, 1) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--sun); border: 3px solid var(--brand-blue); box-shadow: 0 0 14px #ffd84dcc; opacity: var(--tip, 0); transition: opacity .3s ease; }
.steps-live article:not(.is-reached) .step-select:not([aria-pressed=true]) .step-number { background: #fff; color: var(--brand-blue); border-color: #b9cff0; }
.landing-modern .steps article.is-reached .step-select:not([aria-pressed=true]) .step-number { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); box-shadow: 0 0 0 5px #1f5bc01f; }
.landing-modern .step-select[aria-pressed=true] .step-number { border-color: var(--sun); }
.landing-modern .setup-preview { background: #fff; border-top: 5px solid var(--sun); box-shadow: 14px 14px 0 var(--brand-blue), 0 24px 50px #0a183024; }
.landing-modern .setup-preview .eyebrow { color: var(--brand-blue); }
.landing-modern .preview-content .source-row { background: var(--lavender); border-color: #d5e4f8; }
.landing-modern .preview-content .source-row .icon { color: var(--brand-blue); }
.landing-modern .channel-note { background: var(--navy); border-left: 4px solid var(--sun); border-radius: 12px; }
.landing-modern .channel-note strong { color: #fff; }
.landing-modern .channel-note div > span, .landing-modern .channel-note span { color: #eaf1fc; }

/* ---------- Demonstração interativa em azul ---------- */
.landing-modern .demo-section { background: var(--brand-blue); }
.landing-modern .demo-copy .eyebrow { color: var(--sun); }
.landing-modern .demo-copy h2 { color: #fff; }
.landing-modern .demo-copy h2 span { color: var(--sun); }
.landing-modern .demo-copy > p:not(.eyebrow), .landing-modern .demo-copy .demo-disclaimer { color: #eaf1fc; }
.landing-modern .scenario-picker button { background: #ffffff1f; color: #fff; }
.landing-modern .scenario-picker button .icon { color: var(--sun); }
.landing-modern .scenario-picker button:hover { background: #ffffff33; }
.landing-modern .scenario-picker button[aria-pressed=true] { background: var(--sun); color: var(--navy); }
.landing-modern .scenario-picker button[aria-pressed=true] .icon, .landing-modern .scenario-picker button[aria-pressed=true]::after { color: var(--navy); }
.landing-modern .demo-source { border-top-color: #ffffff40; }
.landing-modern .demo-source .source-heading { color: var(--sun); }
.landing-modern .demo-source strong { color: #fff; }
.landing-modern .demo-source p { color: #eaf1fc; }
.landing-modern .demo-section :focus-visible { outline-color: #fff; }
.landing-modern .demo-card { box-shadow: 0 30px 70px #0a183059; }
.landing-modern .demo-card-head .agent-avatar { background: var(--brand-blue); color: #fff; }
.landing-modern .demo-card .ai-badge { background: var(--sun); color: var(--navy); font-weight: 700; }
.landing-modern .channel-picker button[aria-pressed=true] { background: var(--brand-blue); border-color: var(--brand-blue); }
.landing-modern .quick-area button { color: var(--brand-blue); }
.landing-modern .quick-area button[aria-pressed=true] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.landing-modern .demo-messages .bubble.user { background: var(--brand-blue); }
.landing-modern .demo-next-step { border-bottom: 0; }
.landing-modern .demo-next-step strong { color: var(--brand-blue); }

/* ---------- Planos ---------- */
.landing-modern .pricing-preview-label { background: var(--sun); border-color: var(--sun); color: var(--navy); font-weight: 650; }
.landing-modern .pricing-card { border: 1px solid var(--line); border-top: 4px solid var(--brand-blue); }
.landing-modern .pricing-card .plan-symbol { color: var(--brand-blue); }
.landing-modern .plan-button { background: #fff; border: 1.5px solid var(--brand-blue); color: var(--brand-blue); }
.landing-modern .plan-button:hover { background: var(--lavender); color: var(--brand-blue); }
.landing-modern .pricing-featured { background: var(--brand-blue); border-color: var(--brand-blue); border-top-color: var(--sun); }
.landing-modern .pricing-featured .plan-symbol { color: var(--sun); }
.landing-modern .pricing-featured :is(.plan-caption, .plan-description, .plan-availability p) { color: #eaf1fc; }
.landing-modern .pricing-featured .plan-availability { border-color: #ffffff40; }
.landing-modern .plan-featured-label { background: var(--sun); color: var(--navy); font-weight: 700; }
.landing-modern .pricing-featured .plan-button { background: var(--sun); border-color: var(--sun); color: var(--navy); }
.landing-modern .pricing-featured .plan-button:hover { background: #ffe27a; border-color: #ffe27a; color: var(--navy); }

/* ---------- Dúvidas ---------- */
.landing-modern .faq-list summary:hover { color: var(--brand-blue); }
.landing-modern .faq-list summary span { background: var(--sun); color: var(--navy); }
.landing-modern .faq-list details[open] { border-color: var(--brand-blue); box-shadow: inset 4px 0 0 var(--brand-blue); }
.landing-modern .faq-list details[open] summary { color: var(--brand-blue); }

/* ---------- Rodapé ---------- */
.landing-modern .footer { border-top: 4px solid var(--sun); padding-top: 32px; }
.landing-modern .footer-links a:hover { color: var(--brand-blue); }

/* ---------- Redes sociais (aparecem quando os links reais forem configurados) ---------- */
.social-links { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.social-links > span { font-size: 13px; color: #c9d6ea; }
.social-button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; transition: transform .2s ease; }
.social-button:hover { transform: translateY(-2px); }
.social-button .icon { width: 22px; height: 22px; }
.social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-facebook { background: #1877f2; }
.social-whatsapp { background: #25d366; }
.hero-social-links { position: absolute; right: max(100px, calc((100% - 1200px) / 2)); bottom: 28px; z-index: 1; margin: 0; }
.hero-social-links .social-button { width: 44px; height: 44px; flex-shrink: 0; }
.hero-social-links .social-instagram { border-radius: 13px; }
.hero-social-links .social-whatsapp .icon { width: 26px; height: 26px; }
.hero-social-links [aria-disabled=true] { cursor: default; }
.hero-social-links [aria-disabled=true]:hover { transform: none; }
.social-button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.footer .social-links { margin: 0; }
.footer .social-button:focus-visible { outline-color: var(--violet); }

/* ---------- Contato sempre à mão ---------- */
.whatsapp-float { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 45; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 6px 22px #0a183033; }
.whatsapp-float .icon { width: 36px; height: 36px; }
.whatsapp-float:hover { background: #1eb85a; }
.whatsapp-float:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 4px; }
.whatsapp-float-label { position: absolute; right: 68px; width: max-content; max-width: calc(100vw - 112px); padding: 9px 12px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; opacity: 0; pointer-events: none; }
.whatsapp-float:hover .whatsapp-float-label, .whatsapp-float:focus-visible .whatsapp-float-label { opacity: 1; }

/* ---------- Rodapé ---------- */
.landing-modern .footer .brand { color: var(--navy); }
.landing-modern .footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
.landing-modern .footer .brand-detail { color: var(--muted); border-color: var(--line); }

/* ---------- Pausar animações: congela loops contínuos do conteúdo ---------- */
.motion-paused main *, .motion-paused main *::before, .motion-paused main *::after { animation-play-state: paused !important; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .landing-modern .showcase .hero { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 850px) {
  .landing-modern nav { background: var(--ink-950); border-color: #ffffff1a; overscroll-behavior: contain; }
  .landing-modern nav > a { color: #dce6f5; }
  .video-hero { align-items: flex-end; padding-block: 120px 132px; }
  .video-hero-media::after { background: linear-gradient(0deg, #184c9ff2 0%, #1f5bc0e0 48%, #1f5bc0a6 100%); }
  .video-hero .hero-description { font-size: 16px; }
  .landing-modern .showcase .hero { grid-template-columns: 1fr; padding-block: 64px; }
  .showcase-copy { max-width: 640px; }
  .connect-band.connect-live { height: 180vh; }
  .connect-left { transform: translateX(calc((1 - var(--p)) * -18vw)); }
  .connect-right { transform: translateX(calc((1 - var(--p)) * 18vw)); }
  .connect-steps { flex-direction: column; align-items: center; }
  .landing-modern .showcase .hero-visual::after { inset: 88px -12px -8px -12px; border-radius: 22px; }
  .landing-modern .showcase .hero-channels { padding-left: 4px; }
  .landing-modern .showcase .visual-endnote { justify-content: flex-start; padding-left: 4px; }
  .problem-photo { width: 86%; }
  .landing-modern .problem-visual .question-list { position: relative; width: 92%; margin: -96px 0 0; bottom: auto; }
  .benefits-intro { grid-template-columns: 1fr; gap: 28px; }
  .benefits-photo { max-width: 560px; }
}
@media (max-width: 620px) {
  .video-hero { padding-block: 112px 156px; }
  .video-hero-media img, .video-hero-media video { object-position: 68% 50%; }
  .video-hero .hero-keyword { font-size: 12px; border-radius: 12px; }
  .hero-display { font-size: clamp(34px, 9.6vw, 44px); }
  /* A expressão mais longa quebra em duas linhas; a reserva segura a altura e o texto digitado quebra igual. */
  .hero-display .hero-type-line { white-space: normal; }
  .hero-display .hero-type-slot, .hero-display .hero-type-reserve { display: block; padding-right: 0; }
  .hero-display .hero-type-content { display: block; right: 0; white-space: normal; }
  .video-hero .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .video-hero .hero-actions .button { width: 100%; }
  .video-hero .text-link { align-self: stretch; justify-content: center; }
  .hero-social-links { right: 92px; bottom: 20px; gap: 10px; }
  .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .stock-note { left: 16px; bottom: 80px; max-width: calc(100% - 32px); font-size: 10px; }
  .brand .brand-mark { width: 38px; height: 21px; }
  .brand .brand-word { width: 62px; height: 26px; }
  .connect-band.connect-live { height: 170vh; }
  .connect-stage { margin-top: 40px; }
  .connect-piece span { font-size: 11px; white-space: normal; max-width: 120px; text-align: center; }
  .connect-left span, .connect-right span { transform: none; }
  .faq-photo { max-width: 280px; }
}
@media (forced-colors: active) {
  .video-hero-media::after, .cursor-light { display: none; }
  .landing-modern .button.orbit-cta::before, .landing-modern .button.orbit-cta::after { display: none; }
  .landing-modern .button.orbit-cta { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}