/* flowdsk — landing. Tokens do "Design System.dc.html" (Claude Design). */
:root {
  --navy: #0f1b2d; --navy-2: #172538; --navy-3: #22324a; --navy-4: #34465f;
  --lime: #c6f432; --lime-h: #a9d619; --lime-soft: #f1fccf;
  --green: #5f8a00; --green-h: #466600;
  --bg: #f4f6f9; --line: #d3dae3; --line-2: #e8ecf1; --line-3: #f0f2f5;
  --tx: #0f1b2d; --tx-2: #34465f; --tx-3: #52647d; --tx-4: #7a8aa0; --tx-dark: #a7b3c3;
  --red: #c23a26;
  --r: 14px; --r-sm: 10px;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 76px }
body { margin: 0; background: var(--bg); font-family: Sora, system-ui, sans-serif; color: var(--tx); -webkit-font-smoothing: antialiased }
a { color: var(--green); text-decoration: none }
a:hover { color: var(--green-h) }
h1, h2, h3, p { margin: 0 }
img { display: block }
.mono { font-family: 'JetBrains Mono', monospace }
.lime { color: var(--lime) }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px }
.section { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px }
.dark { background: var(--navy); color: #fff; overflow: hidden }
.band-white { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.eyebrow { font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--green) }
.eyebrow.lime { color: var(--lime) }
h1 { font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance }
h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance }
.h2-big { font-size: clamp(32px, 4vw, 52px); letter-spacing: -.035em; line-height: 1.04 }
.lead { font-size: 18px; line-height: 1.55; color: var(--tx-dark); max-width: 520px; text-wrap: pretty }
.lead-sm { font-size: 16px; line-height: 1.55; color: var(--tx-dark); max-width: 460px }
.muted { font-size: 16px; line-height: 1.55; color: var(--tx-3) }
.muted-sm { font-size: 11px; font-weight: 600; color: var(--tx-4); letter-spacing: .08em }
.stack-12, .stack-20, .stack-22, .stack-28 { display: flex; flex-direction: column }
.stack-12 { gap: 12px } .stack-20 { gap: 20px } .stack-22 { gap: 22px } .stack-28 { gap: 28px }
.row-10, .row-12 { display: flex; align-items: center; flex-wrap: wrap }
.row-10 { gap: 10px } .row-12 { gap: 12px }
.sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 680px }
.sec-head p { font-size: 16px; line-height: 1.55; color: var(--tx-3) }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r) }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: var(--r-sm); font: 700 14px Sora; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s }
.btn-sm { height: 40px; padding: 0 16px; font-weight: 600 }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px }
.btn-lime { background: var(--lime); color: var(--navy) }
.btn-lime:hover { background: var(--lime-h); color: var(--navy) }
.btn-navy { background: var(--navy); color: #fff }
.btn-navy:hover { background: var(--navy-2); color: #fff }
.btn-ghost-dark { border-color: var(--navy-4); color: #fff; font-weight: 600 }
.btn-ghost-dark:hover { background: var(--navy-2); color: #fff }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px }
.pill-navy { font-size: 11px; font-weight: 600; background: var(--navy); color: var(--lime); padding: 2px 8px; border-radius: 999px }
.pill-navy.strong { font: 700 12px Sora; padding: 4px 10px }
.pill-lime { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--lime); color: var(--navy) }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--line-2); color: var(--navy-3); font-weight: 600 }

/* topo */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(15, 27, 45, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--navy-3) }
.topbar-in { height: 68px; display: flex; align-items: center; gap: 32px }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: Sora; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1 }
.topnav { display: flex; gap: 24px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap }
.topnav a { color: var(--line); font-size: 14px; font-weight: 500 }
.topnav a:hover { color: #fff }
.topbar-cta { display: flex; gap: 10px; margin-left: auto }

/* herói */
.hero { padding-top: 88px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: center }
.queue { background: #fff; color: var(--tx); border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); overflow: hidden; min-width: 0 }
.queue-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2); gap: 12px; flex-wrap: wrap }
.queue-head strong { font-size: 15px }
.queue-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-3) }
.q-p { font-size: 12px; font-weight: 500; color: var(--tx-3) }
.q-main { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.q-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.q-m { font-size: 11px; color: var(--tx-4) }
.status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.marquee { border-top: 1px solid var(--navy-3); padding: 18px 0; overflow: hidden }
.marquee-track { display: flex; gap: 28px; width: max-content; animation: fdmarq 40s linear infinite }
.marquee-track span { display: inline-flex; align-items: center; gap: 28px; font: 500 15px Sora; color: var(--tx-dark); white-space: nowrap }
.marquee-track i { width: 6px; height: 6px; border-radius: 2px; background: var(--lime) }
@keyframes fdmarq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none } html { scroll-behavior: auto } }

/* provas */
.proofs { background: #fff; border-bottom: 1px solid var(--line) }
.proofs-in { padding-top: 32px; padding-bottom: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px }
.proof { display: flex; gap: 12px; align-items: center }
.proof strong { display: block; font-size: 15px }
.proof span { font-size: 13px; color: var(--tx-3) }

/* como funciona */
.grid-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px }
.step { padding: 28px; display: flex; flex-direction: column; gap: 14px }
.step h3 { font-size: 20px }
.step p { font-size: 14px; line-height: 1.55; color: var(--tx-3) }
.step-n { font-size: 13px; font-weight: 600; color: var(--green) }
.bar { height: 6px; background: var(--navy); border-radius: 3px }
.bar-lime { background: var(--lime) }
.step-dark { background: var(--navy); color: #fff; border-color: var(--navy) }
.step-dark p { color: var(--tx-dark) }

/* recursos */
.grid-520 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 20px }
.feat { background: var(--bg); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; gap: 16px }
.feat h3 { font-size: 22px; letter-spacing: -.01em }
.feat p { font-size: 15px; line-height: 1.55; color: var(--tx-2) }
.feat-ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--navy); display: inline-flex; align-items: center; justify-content: center }
.feat-ic img { filter: invert(88%) sepia(60%) saturate(600%) hue-rotate(20deg) }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.tags span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy-3) }
.grid-260 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px }
.mod { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: transparent }
.mod-top { display: flex; align-items: center; justify-content: space-between }
.mod h3 { font-size: 17px }
.mod p { font-size: 14px; line-height: 1.55; color: var(--tx-3) }

/* atlas */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 64px; align-items: center }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--line-2) }
.bullets li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); margin-top: 7px; flex-shrink: 0 }
.phone-chat { background: #0b2a22; border-radius: 24px; overflow: hidden; border: 1px solid var(--navy-3); max-width: 460px; width: 100%; justify-self: center }
.chat-head { background: var(--navy-2); padding: 14px 18px; display: flex; align-items: center; gap: 12px }
.chat-head strong { display: block; font-size: 15px }
.chat-head span { font-size: 12px; color: var(--tx-dark) }
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #0e1f2b }
.msg { max-width: 84%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-line }
.msg small { display: block; text-align: right; font-size: 10px; opacity: .6; margin-top: 3px }
.msg.me { align-self: flex-end; background: var(--lime); color: var(--navy) }
.msg.bot { align-self: flex-start; background: var(--navy-2); color: var(--line-2) }
.msg-file { margin-top: 8px; display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .18); border-radius: 8px; padding: 8px 10px; font-size: 12px }
.msg-file img { filter: invert(1) }

/* ponto */
.phone { justify-self: center; width: 300px; max-width: 100%; background: var(--navy); border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px rgba(15, 27, 45, .25) }
.phone-screen { background: #fff; border-radius: 30px; overflow: hidden }
.notch { height: 28px; display: flex; justify-content: center; align-items: center }
.notch i { width: 90px; height: 6px; border-radius: 3px; background: var(--line-2) }
.ponto-body { padding: 12px 22px 24px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center }
.ponto-top { display: flex; justify-content: space-between; width: 100%; align-items: center; font-size: 13px }
.ponto-top span { font-size: 11px; color: var(--tx-3) }
.ponto-hora { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1 }
.ponto-hora small { font-size: 22px; color: var(--tx-4) }
.ponto-local { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #dcf5e4; color: #1b7d43; font-size: 12px; font-weight: 600 }
.ponto-btn { width: 150px; height: 150px; border-radius: 50%; background: var(--lime); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 0 0 10px var(--lime-soft) }
.ponto-btn span { font-weight: 700; font-size: 16px; color: var(--navy) }
.comprovante { width: 100%; border: 1px dashed var(--tx-dark); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left }
.comprovante > div:first-child { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700 }
.comprovante > div:first-child span { color: #1b7d43 }
.comprovante .mono { font-size: 11px; color: var(--tx-3); line-height: 1.6 }
.wrap-row { flex-wrap: wrap }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px }
.checks > div { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; font-weight: 500 }
.check { width: 22px; height: 22px; border-radius: 6px; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }

/* para quem */
.aud { padding: 28px; display: flex; flex-direction: column; gap: 18px }
.aud h3 { font-size: 19px; letter-spacing: -.01em }
.aud > div { display: flex; flex-direction: column; gap: 6px }
.aud p { font-size: 14px; line-height: 1.5; color: var(--tx-3) }
.aud p.strong { color: var(--tx); font-weight: 500 }
.tag-red, .tag-green { font-size: 11px; font-weight: 600; letter-spacing: .08em }
.tag-red { color: var(--red) } .tag-green { color: var(--green) }

/* origem */
.origem-wrap { padding-bottom: 96px }
.origem { background: var(--line-2); border-radius: 20px; padding: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 40px; align-items: center }
.origem-t { font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.12; text-wrap: balance }
.origem p { font-size: 16px; line-height: 1.6; color: var(--tx-2) }

/* planos */
.plans-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap }
.strong-navy { color: var(--navy); font-weight: 600 }
.tabs { display: flex; background: var(--line-2); border-radius: var(--r-sm); padding: 4px; gap: 4px }
.tabs button { height: 36px; padding: 0 16px; border: none; border-radius: 8px; font: 600 13px Sora; cursor: pointer; background: transparent; color: var(--tx-3) }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff }
.grid-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px }
.plan { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; gap: 20px }
.plan-hl { background: var(--navy); color: #fff; border-color: var(--navy) }
.plan-top { display: flex; justify-content: space-between; align-items: center }
.plan-name { font-weight: 700; font-size: 20px }
.plan-price { display: flex; align-items: baseline; gap: 6px }
.plan-price span { font-weight: 800; font-size: 40px; letter-spacing: -.03em }
.plan-price small { font-size: 14px; opacity: .7 }
.plan-setup { font-size: 12px; font-weight: 500; opacity: .7 }
.plan p { font-size: 14px; line-height: 1.55; opacity: .85 }
.plan .btn { margin-top: auto }
.regional { background: var(--navy); color: #fff; border-radius: var(--r); padding: 28px 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center }
.regional strong { display: block; font-size: 18px; margin-bottom: 6px }
.regional p { font-size: 14px; line-height: 1.5; color: var(--tx-dark) }
.reg-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--lime); display: inline-flex; align-items: center; justify-content: center }
[hidden] { display: none !important }

/* faq */
.faq-wrap { max-width: 880px; margin: 0 auto; padding-left: 24px; padding-right: 24px; gap: 32px }
.faq { border-top: 1px solid var(--line) }
.faq-item { border-bottom: 1px solid var(--line) }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; font: 600 17px Sora; color: var(--navy) }
.faq-sign { width: 28px; height: 28px; border-radius: 8px; background: var(--line-2); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0 }
.faq-item button[aria-expanded="true"] .faq-sign { background: var(--navy); color: var(--lime) }
.faq-item p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--tx-3); max-width: 720px }

/* contato */
.contato { align-items: start; gap: 56px }
.form-card { background: #fff; color: var(--navy); border-radius: 20px; padding: 32px }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600 }
.form .full { grid-column: 1 / -1 }
.form input, .form textarea { height: 44px; padding: 0 12px; border: 1px solid var(--tx-dark); border-radius: var(--r-sm); font: 400 14px Sora; color: var(--navy); outline: none; background: #fff }
.form textarea { height: auto; padding: 10px 12px; resize: vertical }
.form input:focus, .form textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(198, 244, 50, .55) }
.form button[disabled] { opacity: .6; cursor: wait }
.form-erro { font-size: 13px; color: var(--red); font-weight: 600 }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.form-ok { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 24px 0 }
.form-ok strong { font-size: 22px }
.form-ok p { font-size: 15px; line-height: 1.55; color: var(--tx-3) }
.subfoot { border-top: 1px solid var(--navy-3) }
.subfoot-in { padding-top: 28px; padding-bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap }
.subfoot nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px }
.subfoot nav a { color: var(--tx-dark) }
.subfoot nav a:hover { color: #fff }

/* rodapé Ires Labs */
.ires { background: #0e1116; color: #fff }
.ires-in { padding-top: 24px; padding-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap }
.ires a { display: flex; align-items: baseline; gap: 8px; color: #c9ced6; font: 500 14px 'DM Sans', sans-serif }
.ires a:hover { color: #fff }
.ires b { font: 700 16px 'DM Sans', sans-serif; color: #fff; display: inline-flex; align-items: baseline; gap: 2px }
.ires b i { width: 6px; height: 6px; border-radius: 50%; background: #ff6b2c; display: inline-block }
.ires .mono { font-size: 13px; color: #8b93a1 }
.ires em { font-style: normal; color: #ff6b2c }

/* celular */
@media (max-width: 860px) { .topnav { display: none } }
@media (max-width: 560px) {
  .hide-xs { display: none }
  .section { padding-top: 64px; padding-bottom: 64px; gap: 36px }
  .hero { padding-top: 56px }
  .queue-row { grid-template-columns: minmax(0, 1fr) auto }
  .q-p { display: none }
  .origem, .feat { padding: 28px }
  .regional { grid-template-columns: 1fr; padding: 24px }
  .split { gap: 40px }
  .form-card { padding: 24px }
}