:root{
  --forest-700:#11553f;--forest-800:#0b3d2e;--forest-900:#082c21;
  --em-50:#ecfdf5;--em-100:#d1fae5;--em-200:#a7f3d0;--em-300:#6ee7b7;--em-400:#34d399;--em-500:#10b981;--em-600:#059669;--em-700:#047857;
  --s-50:#f8fafc;--s-100:#f1f5f9;--s-200:#e2e8f0;--s-300:#cbd5e1;--s-400:#94a3b8;--s-500:#64748b;--s-600:#475569;--s-700:#334155;--s-800:#1e293b;--s-900:#0f172a;--s-950:#020617;
  --chat-canvas:#0b141a;--chat-panel:#111b21;--chat-inset:#1f2c33;--chat-in:#202c33;--chat-out:#0b5c45;
  --radius:18px;--container:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--s-800);background:#fff;line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--em-700);background:var(--em-50);border:1px solid var(--em-100);padding:6px 12px;border-radius:999px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--em-500)}
.dark .eyebrow{color:var(--em-200);background:rgba(16,185,129,.12);border-color:rgba(110,231,183,.35)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;color:var(--s-900)}
.dark h1,.dark h2,.dark h3{color:#f8fafc}
h2{font-size:clamp(28px,4vw,42px);font-weight:800;margin-top:16px;max-width:820px}
.sub{font-size:18px;color:var(--s-600);max-width:640px;margin-top:14px}
.dark .sub{color:var(--s-300)}
section{padding:96px 0}
section[id]{scroll-margin-top:84px}
.dark{background:linear-gradient(155deg,var(--forest-700) 0%,var(--forest-800) 45%,var(--forest-900) 100%);color:#f8fafc}
.light-alt{background:var(--s-50)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--em-300);outline-offset:2px}
.btn-primary{background:var(--em-500);color:var(--forest-900)}
.btn-primary:hover{background:var(--em-400)}
.btn-ghost{background:transparent;color:#f8fafc;border-color:rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:rgba(255,255,255,.6)}
.btn svg{width:18px;height:18px}
.nx-fade-up{animation:nxFadeUp .6s ease-out both}
@keyframes nxFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nx-fade-up{animation:none}html{scroll-behavior:auto}.btn:hover{transform:none}}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(8,44,33,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;color:#f8fafc}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;min-height:44px}
.logo svg{width:30px;height:30px;color:var(--em-400)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500;color:var(--s-300)}
.nav-links a{padding:10px 0}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:10px 16px;font-size:14px}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:#fff;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;gap:6px;padding:12px 24px 20px;max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;background:rgba(8,44,33,.98);border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu a{padding:12px 6px;font-weight:500;color:var(--s-200);border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu.open{display:flex}

/* hero */
.hero{padding:96px 0 88px;position:relative;overflow:hidden}
.hero .grid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 30%,#000 100%);pointer-events:none}
.hero .iris-bg{position:absolute;right:-220px;top:-140px;width:760px;height:760px;color:var(--em-400);opacity:.09;pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,4.3vw,52px);font-weight:800;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--em-300)}
.hero .sub{font-size:19px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font-size:14px;color:var(--s-300)}
.trust b{color:#fff;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:9px;padding:0 18px 0 0}
.trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(110,231,183,.75);flex:none}

/* hero visual: janela do app (lista + conversa) */
.hero-visual{position:relative}
.app{background:var(--chat-panel);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;display:grid;grid-template-columns:196px 1fr;font-size:14px}
.list{background:var(--chat-canvas);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;min-width:0}
.list .hd{padding:15px 14px;background:var(--chat-inset);display:flex;align-items:center;justify-content:space-between}
.list .hd b{font-size:12.5px;color:#f8fafc}
.list .hd span{font-size:11px;color:var(--s-400);font-weight:600}
.list ul{list-style:none}
.list li{display:flex;gap:9px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);min-width:0}
.list li.active{background:rgba(16,185,129,.10);box-shadow:inset 3px 0 0 var(--em-400)}
.list .ch{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:var(--em-300);flex:none}
.list .ch svg{width:15px;height:15px}
.list .who{font-size:12px;font-weight:600;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .meta{min-width:0}
.list .ft{margin-top:auto;padding:12px 14px;font-size:11px;color:var(--s-400);border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:6px}
.list .ft i{width:7px;height:7px;border-radius:50%;background:var(--em-400)}
.st{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;white-space:nowrap;display:inline-block;margin-top:3px}
.st-bot{color:var(--em-200);background:rgba(16,185,129,.16)}
.st-queue{color:var(--s-300);background:rgba(255,255,255,.08)}
.st-att{color:#fff;background:var(--em-600)}
.chat{display:flex;flex-direction:column;min-width:0}
.chat .hd{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--chat-inset)}
.chat .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#10b981,#0d9488);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;font-weight:700;font-size:13px}
.chat .t{font-size:14.5px;font-weight:700;color:#f8fafc}
.chat .s{font-size:11.5px;color:var(--s-400);margin-top:2px;display:flex;align-items:center;gap:6px}
.chat .s i{width:7px;height:7px;border-radius:50%;background:var(--em-400)}
.chat .body{padding:16px 16px 30px;display:flex;flex-direction:column;gap:9px;background:var(--chat-canvas);flex:1}
.m{max-width:88%;line-height:1.4;padding:10px 13px;border-radius:14px;color:#e9edef}
.m.in{align-self:flex-start;background:var(--chat-in);border-top-left-radius:4px}
.m.out{align-self:flex-end;background:var(--chat-out);border-top-right-radius:4px}
.m .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--em-300);margin-bottom:4px;display:block}
.m .n{color:var(--em-300);font-weight:700}
.sys{align-self:center;font-size:12px;font-weight:600;color:#a7f3d0;background:rgba(16,185,129,.14);border:1px solid rgba(110,231,183,.3);padding:6px 12px;border-radius:999px;margin-top:4px}
.stars{color:#fbbf24;letter-spacing:2px}
.float{position:absolute;right:-18px;bottom:-50px;z-index:3;background:#fff;color:var(--s-900);border-radius:14px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.35);display:flex;align-items:center;gap:12px;font-size:13px}
.float .ic{width:36px;height:36px;border-radius:10px;background:var(--em-50);color:var(--em-700);display:flex;align-items:center;justify-content:center;flex:none}
.float .ic svg{width:18px;height:18px}
.float b{display:block;font-size:13.5px}
.float span{color:var(--s-500);font-size:12px}

/* channel strip */
.strip{background:var(--forest-900);border-top:1px solid rgba(255,255,255,.06);padding:22px 0}
.strip .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.strip .lbl{font-size:13px;color:var(--s-400);font-weight:500;margin-right:6px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--s-200);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);padding:8px 13px;border-radius:10px}
.chip svg{width:16px;height:16px;color:var(--em-400)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px}
.card{background:#fff;border:1px solid var(--s-200);border-radius:var(--radius);padding:26px;transition:border-color .15s ease,box-shadow .15s ease}
.card:hover{border-color:var(--em-300);box-shadow:0 10px 30px rgba(15,23,42,.06)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--em-50);color:var(--em-700);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:18px;font-weight:700}
.card p{margin-top:8px;color:var(--s-600);font-size:15px}
.pain .card{border-left:3px solid var(--em-500)}
.pain .card h3{font-size:17px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.bento .card{display:flex;flex-direction:column}
.span2{grid-column:span 2}
.mock{margin-top:22px;border-radius:14px;background:var(--chat-canvas);border:1px solid rgba(15,23,42,.08);padding:14px;flex:1;min-height:150px}
.mock-inbox li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.06);list-style:none}
.mock-inbox li:last-child{border-bottom:0}
.mock-inbox .ch{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:var(--em-300)}
.mock-inbox .ch svg{width:15px;height:15px}
.mock-inbox .who{font-size:12.5px;font-weight:600;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-inbox .prev{font-size:11.5px;color:var(--s-400);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-inbox .st{margin-top:0}
.mock-flow{display:flex;flex-direction:column;gap:8px;justify-content:center;height:100%}
.node{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600;color:#e9edef}
.node i{width:8px;height:8px;border-radius:50%;background:var(--em-400);flex:none}
.node.alt i{background:var(--s-400)}
.node .k{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--em-300)}
.edge{width:2px;height:10px;background:rgba(255,255,255,.18);margin-left:22px}
.mock-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px}
.tile b{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--s-400)}
.tile .bar{margin-top:12px;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.tile .bar i{display:block;height:100%;background:var(--em-400);border-radius:999px}
.tile .lg{margin-top:8px;font-size:12.5px;color:#e9edef;font-weight:600}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;position:relative}
.pnode:not(:last-child)::before{content:"";position:absolute;top:35px;left:calc(50% + 44px);right:calc(-50% + 44px);height:2px;background:repeating-linear-gradient(90deg,rgba(110,231,183,.5) 0 8px,transparent 8px 16px)}
.pnode{position:relative;padding:0 18px;text-align:center}
.pnode .dot{width:72px;height:72px;margin:0 auto;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(110,231,183,.35);display:flex;align-items:center;justify-content:center;color:var(--em-300);position:relative;z-index:1}
.pnode .dot svg{width:30px;height:30px}
.pnode .num{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--em-300)}
.pnode h3{font-size:19px;margin-top:6px;color:#fff}
.pnode p{margin-top:8px;color:var(--s-300);font-size:15px}

/* segments */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.seg .card{display:flex;gap:16px;align-items:flex-start;padding:22px}
.seg .ic{margin:0;flex:none}
.seg h3{font-size:17px}
.seg p{font-size:14.5px}

/* case */
.case-head{display:flex;align-items:center;gap:22px}
.case-logo{height:88px;width:auto;max-width:220px;object-fit:contain;background:#fff;border:1px solid var(--s-200);border-radius:16px;padding:14px 18px;flex:none}
.case-head .who{min-width:0}
.case-head .who .eyebrow{margin-bottom:11px}
.case-head .who b{display:block;font-size:21px;font-weight:800;color:var(--s-900);letter-spacing:-.01em}
.case-head .who > span:not(.eyebrow){display:block;margin-top:5px;color:var(--s-500);font-size:14.5px;max-width:620px}
.case-title{margin-top:30px;padding-top:28px;border-top:1px solid var(--s-200);max-width:760px}
.case-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:36px;counter-reset:caso}
.case-full{grid-column:1/-1}
.case-full p{max-width:900px}
.case-box{background:#fff;border:1px solid var(--s-200);border-radius:var(--radius);padding:30px}
.case-box h3{display:flex;align-items:baseline;gap:13px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--s-900)}
.case-box h3::before{counter-increment:caso;content:counter(caso,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--em-600);flex:none}
.case-box h3 + h3,.case-box ul + h3,.case-box p + h3{margin-top:26px}
.case-box p{margin-top:10px;color:var(--s-700);font-size:16px}
.case-box ul{margin-top:12px;list-style:none;display:flex;flex-direction:column;gap:10px}
.case-box li{display:flex;gap:10px;color:var(--s-700);font-size:15.5px}
.case-box li svg{width:20px;height:20px;color:var(--em-600);flex:none;margin-top:2px}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:20px}
.result{background:var(--forest-800);color:#fff;border-radius:14px;padding:22px 20px}
.result b{display:block;font-size:18px;font-weight:700;line-height:1.3}
.result span{display:block;margin-top:6px;font-size:14px;color:var(--s-300)}

/* integrations */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.int-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.int{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--s-200);border-radius:10px;padding:10px 14px;font-weight:600;font-size:14.5px;color:var(--s-800)}
.int i{width:8px;height:8px;border-radius:50%;background:var(--em-500)}

/* faq */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--s-200)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-size:17px;font-weight:700;color:var(--s-900);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--em-600);flex:none;transition:transform .2s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--em-300);outline-offset:2px;border-radius:8px}
.faq .a{padding:0 4px 22px;color:var(--s-600);font-size:15.5px;max-width:720px}

/* cta */
.cta-center{text-align:center;max-width:780px}
.cta-center .sub{margin-left:auto;margin-right:auto}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.btn-lg{padding:16px 26px;font-size:16px}
.btn-lg svg{width:20px;height:20px}
.cta-note{margin-top:18px;font-size:14px;color:var(--s-300)}

footer{background:var(--s-950);color:var(--s-400);padding:36px 0;font-size:14px}
footer .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
footer .logo{color:#fff;font-size:18px}
footer .links{display:flex;flex-wrap:wrap;gap:20px}
footer .links a{display:inline-flex;align-items:center;min-height:44px}
footer .links a:hover{color:#fff}

/* sticky CTA (celular) */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,44,33,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
.sticky-cta{transition:transform .25s ease,opacity .25s ease}
.sticky-cta.hide{transform:translateY(115%);opacity:0;pointer-events:none}
.sticky-cta .btn{width:100%}

@media (max-width:1100px){
  .app{grid-template-columns:176px 1fr}
}
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .app{grid-template-columns:1fr;max-width:460px}
  .list,.float{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .span2{grid-column:span 2}
  .pipe{grid-template-columns:1fr 1fr;row-gap:36px}
  .pnode::before{display:none}
  .seg,.case-wrap,.two{grid-template-columns:1fr}
}
@media (max-width:800px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .menu-btn{display:inline-flex}
  section{padding:64px 0}
  .hero{padding:64px 0 56px}
  .sticky-cta{display:block}
  footer{padding-bottom:110px}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .mock-metrics{grid-template-columns:1fr 1fr}

  /* cards com icone ao lado do titulo, como ja acontece em "Para quem e" */
  .bento .card,#integracoes .cards .card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
  .bento .card .ic,#integracoes .cards .card .ic{grid-column:1;grid-row:1;margin-bottom:0}
  .bento .card h3,#integracoes .cards .card h3{grid-column:2;grid-row:1;align-self:center}
  .bento .card p,#integracoes .cards .card p{grid-column:1/-1;grid-row:2;margin-top:10px}
  .bento .card .mock{grid-column:1/-1;grid-row:3}

  /* fluxo vira linha do tempo vertical: a sequencia volta a ser visivel */
  .pipe{grid-template-columns:1fr;row-gap:0;margin-top:36px}
  .pnode{display:grid;grid-template-columns:54px 1fr;column-gap:16px;text-align:left;padding:0 0 34px}
  .pnode:last-child{padding-bottom:0}
  .pnode::after{content:"";position:absolute;left:26px;top:62px;bottom:2px;width:2px;background:repeating-linear-gradient(180deg,rgba(110,231,183,.45) 0 6px,transparent 6px 12px)}
  .pnode:last-child::after{display:none}
  .pnode .dot{grid-column:1;grid-row:1/span 3;align-self:start;width:54px;height:54px;margin:0;border-radius:16px;box-shadow:none}
  .pnode .dot svg{width:24px;height:24px}
  .pnode .num{grid-column:2;grid-row:1;margin-top:0;align-self:center}
  .pnode h3{grid-column:2;grid-row:2;font-size:18px;margin-top:2px}
  .pnode p{grid-column:2;grid-row:3;margin-top:6px}
}
@media (max-width:600px){
  .trust{flex-direction:column;align-items:flex-start;gap:8px}
  .trust span{padding:0}
  .case-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .container{padding:0 18px}
  section{padding:56px 0}
  .hero{padding:52px 0 48px}
  .hero .iris-bg{width:420px;height:420px;right:-150px;top:-90px}
  .card{padding:22px}
  .case-box{padding:22px}
  .seg .card{padding:18px;gap:13px}
  .result{padding:18px 16px}
  .pnode{padding:0}
  .cards,.bento,.seg{margin-top:32px}
  .faq{margin-top:28px}
}
@media (max-width:480px){
  .nav-cta .btn-primary{display:none}
  .hero-ctas .btn,.cta-actions .btn{width:100%;white-space:normal}
  .hero h1{font-size:31px}
  .sub,.hero .sub{font-size:16.5px}
  .mock-metrics{grid-template-columns:1fr}
  .int{padding:9px 12px;font-size:13.5px}
  footer .row{flex-direction:column;align-items:flex-start;gap:10px}
  footer .links{gap:14px}
}
@media (max-width:380px){
  .container{padding:0 15px}
  .nav{height:60px}
  .logo{font-size:18px}
  .logo svg{width:26px;height:26px}
  .hero h1{font-size:28px}
  h2{font-size:25px}
  .eyebrow{font-size:12px;padding:5px 10px}
  .chip{font-size:13px;padding:7px 11px}
  .case-logo{height:64px}
  .results{grid-template-columns:1fr}
  .sticky-cta .btn{font-size:14px;padding:12px 14px;white-space:normal}
}
@media (max-height:520px) and (orientation:landscape){
  .sticky-cta{display:none}
  footer{padding-bottom:36px}
  header{position:static}
  section[id]{scroll-margin-top:12px}
}

/* ============================================================
   Tom das faixas claras: chip invertido forest.
   Motivo: #produto, #case e #faq nao tinham classe de fundo e
   herdavam #fff do body, com card branco tambem #fff -> o card
   nao separava da pagina (1,00:1). Chao com pigmento forest +
   chip escuro resolvem o aspecto lavado.
   ============================================================ */
/* ==========================================================================
   NEXIRIS - CHIP INVERTIDO FOREST (v2)
   Tese: o quadrado do icone deixa de ser mint lavado e vira bloco forest com
   glifo em verde claro; para esse bloco ter onde pousar, TODA secao clara
   ganha um chao com pigmento forest e o card branco vira a superficie que
   sobe. Emerald continua vivo como acento (pontos, checks, seta, hover).
   Anexar ao FIM de styles.css. Nao toca .dark, nem o app do hero (.app/.chat/
   .list), nem os fundos do mock. Nao altera nenhuma medida de layout.
   ========================================================================== */

:root{
  --nx-ink:#0b3d2e;        /* forest-800 - fundo do chip                      */
  --nx-ink-deep:#082c21;   /* forest-900 - chip no hover                      */
  --nx-glyph:#6ee7b7;      /* em-300 - glifo sobre o chip          8.07:1     */
  --nx-glyph-hi:#a7f3d0;   /* em-200 - glifo no hover             11.76:1     */
  --nx-ground:#e5ece8;     /* chao das secoes claras, lavado com forest       */
  --nx-line:#b0c2ba;       /* aresta unica das superficies claras             */
  --nx-line-hover:#059669; /* em-600 - aresta do card no hover     3.14:1     */
  --nx-body:#334155;       /* s-700 - unico cinza de corpo da pagina clara    */
  --nx-meta:#475569;       /* s-600 - linhas secundarias                      */
}

/* 1 - O CHAO CHEGA EM TODAS AS SECOES CLARAS -------------------------------
   #produto, #case e #faq nao tem .light-alt no HTML (sao <section> sem
   classe, sobre body{background:#fff}). Era exatamente onde o dono apontou.
   section:not(.dark) pega as seis de uma vez e exclui hero, como-funciona e
   contato. Especificidade 0-1-1, acima de .light-alt, entao vale nas duas. */
section:not(.dark),
.light-alt{background:var(--nx-ground)}

/* Com um chao so, a alternancia claro/claro sumiu: a regua devolve o ritmo
   entre secoes claras vizinhas (produto, case, integracoes, faq).           */
section:not(.dark) + section:not(.dark){border-top:1px solid var(--nx-line)}

/* 2 - ARESTA UNICA EM TODA SUPERFICIE CLARA --------------------------------
   1.86:1 contra o branco de dentro e 1.55:1 contra o chao (era 1.23 e 1.36). */
.card,
.case-box,
.int,
.case-logo{border-color:var(--nx-line)}
.case-title{border-top-color:var(--nx-line)}
.faq details{border-bottom-color:var(--nx-line)}
/* ultima linha lavada que sobrava dentro do card do bento: so a cor da       */
/* moldura de 1px do painel muda - fundo, conteudo e raio ficam intactos.     */
.mock{border-color:var(--nx-line)}

/* 3 - O CHIP INVERTIDO -----------------------------------------------------
   Atinge o bento (#produto), .seg (Para quem e) e #integracoes de uma vez.
   44x44 e radius 12 preservados: o grid de 44px do breakpoint 640 continua. */
.card .ic{
  background:var(--nx-ink);
  color:var(--nx-glyph);
  transition:background-color .15s ease,color .15s ease;
}

/* 4 - O ULTIMO CHIP PASTEL DA PAGINA: o card branco flutuante do hero.
   .float e superficie CLARA dentro de uma secao escura - o bloco escuro nao
   toca em nada de .dark, so no card branco.                                 */
.float .ic{background:var(--nx-ink);color:var(--nx-glyph)}
.float span{color:var(--nx-meta)}

/* 5 - Hover: a ancora aprofunda, a aresta acende em verde -------------------
   box-shadow NAO e redeclarado: fica o 0 10px 30px rgba(15,23,42,.06) do
   arquivo, que ja e a sombra leve pedida no brief.                          */
.card:hover{border-color:var(--nx-line-hover)}
.card:hover .ic{background:var(--nx-ink-deep);color:var(--nx-glyph-hi)}

/* 6 - .pain nao tem icone: o trilho esquerdo e a ancora dele ----------------
   Largura mantida em 3px (a do arquivo): nenhum deslocamento de conteudo.
   .pain .card e .card:hover empatam em 0-2-0; por vir depois, este bloco
   segura a borda esquerda tambem no hover - que e o efeito desejado.        */
.pain .card{border-left:3px solid var(--nx-ink)}

/* 7 - EYEBROW: densidade sem inversao --------------------------------------
   Rotulo e o item mais baixo da hierarquia: nao pode virar o objeto mais
   escuro do bloco nem competir com o h2. Sai do mint lavado, entra a mesma
   materia dos cards - pilula branca, aresta --nx-line, texto forest-700
   (8.91:1) e ponto emerald. Escopo section:not(.dark) para o eyebrow das
   secoes escuras nao ser tocado (e .dark .eyebrow, 0-2-0, ja o protege).    */
section:not(.dark) .eyebrow{
  color:var(--forest-700);
  background:#fff;
  border-color:var(--nx-line);
}
section:not(.dark) .eyebrow i{background:var(--nx-line-hover)}

/* 8 - UM CINZA DE CORPO SO: s-700, alinhado ao que .case-box ja usava ------- */
.card p{color:var(--nx-body)}
.sub{color:var(--nx-body)}                  /* .dark .sub (0-2-0) preservado */
.faq .a{color:var(--nx-body)}
/* margem mais fina da pagina: era s-500 e, sobre o chao novo, cairia para    */
/* 3.96:1. Vai para s-600 = 6.40:1.                                          */
.case-head .who > span:not(.eyebrow){color:var(--nx-meta)}

/* 9 - Acentos verdes calibrados para a funcao que exercem ------------------- */
.case-box h3::before{color:var(--forest-700)}  /* numeral e TEXTO: 3.77 reprovava */
.case-box li svg{color:var(--em-700)}          /* check no card branco   5.49:1  */
.faq summary svg{color:var(--em-700)}          /* seta sobre o chao      4.57:1  */
.faq summary:focus-visible{outline-color:var(--nx-ink)}      /* foco   10.25:1  */
.int i{background:var(--nx-line-hover)}        /* ponto no chip branco   3.77:1  */

/* ============================================================
   Navbar: tres capitulos, uma acao.
   Corrige D1 (logo volta ao topo), D2 (foco visivel), D3 (nav
   e menu com os mesmos itens), D4 (tira o "Ver o case"
   duplicado), D5 (alvos de 44px) e D7 (secao atual escrita).
   ============================================================ */
/* ============================================================
   NAVBAR "Tres capitulos, uma acao" — VERSAO FINAL
   Anexar ao fim de styles.css. Tudo aqui vence por ordem de
   cascata as regras equivalentes das linhas 39-52 / 243 / 293 / 315-320.
   ============================================================ */

/* D1 — #top e o <main>, que comeca em y=68 logo abaixo do header.
   Ancorar nele parava em scrollY=69, com o hero atras da barra.
   scroll-margin maior que qualquer header joga o alvo para antes do
   inicio do documento: nao existe scroll negativo, o navegador para em 0.
   Vale para o logo do header E o do rodape (mesmo href). O JS reforca. */
#top{scroll-margin-top:200px}

/* --- a barra ---------------------------------------------------
   A regra header.at-top foi DELETADA de propósito: o hero e um
   linear-gradient(155deg) e no topo a projecao ja anda ~46% do eixo,
   entao um header chapado de forest-700 nao dissolve, cria uma emenda
   em cunha na metade direita. A barra fica sempre em vidro. */
header{transition:background-color .2s ease}
header.menu-open{background:rgba(8,44,33,.98)}

/* logo+lugar | capitulos | acao — colunas fixas, para o CTA continuar
   na direita quando os links somem (com flex ele escorregaria) */
.nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:20px}
.nav-id{display:flex;align-items:center;gap:12px;min-width:0;justify-self:start}
.nav-id .logo{flex:none;border-radius:10px}
.nav-links{justify-self:center;gap:4px}
.nav-cta{justify-self:end}

/* D7 no celular — o nome da secao atual, com a barra FECHADA.
   Os .nav-links somem abaixo de 800px; sem isto o indicador de capitulo
   so existiria depois de abrir o menu. Aqui ele existe sempre, e nomeia
   a secao REAL (inclusive "Integracoes"), nao o capitulo que a contem.
   Vazio (topo da pagina, ou sem JS) = nao ocupa nada. */
.nav-here{font-size:13px;font-weight:600;color:var(--em-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(34vw,230px);padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.nav-here:empty{display:none}

/* D5 — alvo de toque real: 44px (era 43) */
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;transition:color .15s ease,background-color .15s ease}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta .btn{min-height:44px;padding:0 18px}

/* D7 — capitulo atual no desktop. O anel de 1px a .28 media 2.34:1 e o
   preenchimento 1.32:1: dependia so de cor, e de cor fraca (WCAG 1.4.11).
   Agora repete o que funciona no mobile — um fio de 2px em em-400,
   6.2:1 contra o header composto — e o anel sobe para .55 (3.56:1). */
.nav-links a.is-active{color:#fff;background:rgba(16,185,129,.14);box-shadow:inset 0 0 0 1px rgba(110,231,183,.55)}
.nav-links a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--em-400)}

/* D7 — progresso de leitura: 2px em cima da borda que ja existia.
   Zero altura de layout. Precisa ficar FORA do .container. */
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--em-400);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* D2 — foco visivel. Antes: outline auto 1px rgb(16,16,16) do Chrome —
   1.06:1 no rodape (#020617) e ilegivel no header verde. Resolvido nos
   tres contextos: escuro (em-300), claro (em-600) e rodape. */
a:focus-visible{outline:3px solid var(--em-600);outline-offset:3px;border-radius:8px}
.faq summary:focus-visible{outline-color:var(--em-600)}
.dark a:focus-visible,
footer a:focus-visible,
footer .logo:focus-visible,
.nav-id .logo:focus-visible,
.nav-links a:focus-visible,
.menu-btn:focus-visible,
.mobile-menu a:focus-visible,
.sticky-cta a:focus-visible{outline:3px solid var(--em-300);outline-offset:3px;border-radius:10px}

/* botao do menu: estado aberto sem JS extra */
.menu-btn:hover{border-color:rgba(255,255,255,.55)}
.menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45)}
.menu-btn .ic-close{display:none}
.menu-btn[aria-expanded="true"] .ic-open{display:none}
.menu-btn[aria-expanded="true"] .ic-close{display:block}

/* --- menu mobile: painel modal ---------------------------------
   Sobrepoe em vez de empurrar (antes, abrir o menu descia a pagina
   inteira ~240px). Como sobrepoe, e modal de verdade: inert atras,
   foco preso e rolagem travada — nao meio-termo. */
.mobile-menu{position:absolute;left:0;right:0;top:100%;padding:14px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.mobile-menu a{display:flex;align-items:center;min-height:48px;padding:12px 6px}
.mobile-menu a.is-active{color:#fff;padding-left:14px;box-shadow:inset 2px 0 0 var(--em-400)}
html.nx-menu-open,html.nx-menu-open body{overflow:hidden}

/* D6 — o WhatsApp deixa de ser mais uma linha da lista e vira o botao */
.mobile-menu .btn{width:100%;margin-top:16px;min-height:54px;padding:14px 18px;font-size:16px;border-bottom-color:transparent}
.mobile-menu .btn-primary{color:var(--forest-900)}
.mobile-menu .btn svg{width:20px;height:20px}

/* D8 — com o menu aberto o CTA fixo sai de cena: uma acao por tela.
   Classe no <html>, independente do .hide do IntersectionObserver. */
.nx-menu-open .sticky-cta{transform:translateY(115%);opacity:0;pointer-events:none}

@media (max-width:800px){
  /* no celular em pe quem converte e o CTA fixo do rodape; a barra
     identifica, situa e abre o menu. Especificidade acima da regra
     .nav-cta .btn-primary da linha 293 (que fica redundante). */
  header .nav-cta .btn{display:none}
}
@media (max-width:800px) and (max-height:520px) and (orientation:landscape){
  /* EXCECAO: em paisagem curta a linha 316 ja esconde o .sticky-cta.
     Sem isto, um 667x375 ficaria com ZERO WhatsApp permanente na tela. */
  header .nav-cta .btn{display:inline-flex}
}
@media (min-width:801px){
  /* se a janela crescer com o menu aberto, ele nao vaza para o desktop */
  .mobile-menu,.mobile-menu.open{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  /* a linha 318 poe header{position:static}; o menu absoluto perderia a
     ancora e cairia fora da viewport. Continua nao-sticky, mas posicionado. */
  header{position:relative}
}
@media (prefers-reduced-motion:reduce){
  header,.nav-links a,.mobile-menu a,.menu-btn{transition:none}
  /* o fio de progresso e movimento atrelado ao scroll: sai de cena.
     A informacao de lugar nao se perde — o .nav-here continua escrito. */
  .nav-progress{display:none}
}

/* ------------------------------------------------------------
   Slot do logo do case: a marca institucional OAB|CASAG|ESA e
   5:1, contra 1,9:1 da anterior. Com a caixa antiga (88px de
   altura, max-width 220px) ela renderizava 184x37 dentro de 88px
   -> sobrava altura morta. A caixa passa a acompanhar a marca.
   ------------------------------------------------------------ */
.case-logo{width:272px;height:78px;max-width:100%;padding:13px 16px}
@media (max-width:560px){.case-logo{width:246px;height:72px}}
@media (max-width:380px){.case-logo{width:100%;height:auto;aspect-ratio:272/78}}

/* ------------------------------------------------------------
   Correcao: colisao do .nav-here com o .menu-btn no celular.
   1) .nav e grid de 3 colunas, mas .nav-links vira display:none
      em <=800px. Item oculto sai do grid, entao o .nav-cta caia
      na coluna 2 (auto) em vez da 3, indo parar no meio da barra.
      Fixar a coluna de cada item torna o layout independente
      de quais itens estao visiveis.
   2) .nav-here tem white-space:nowrap sem min-width:0, entao nao
      encolhia: o .nav-id estourava a coluna em 81px e derramava
      sobre o botao. Medido: 44px de sobreposicao em 320px.
   ------------------------------------------------------------ */
.nav-id{grid-column:1}
.nav-links{grid-column:2}
.nav-cta{grid-column:3}
.nav-here{min-width:0}

/* No celular o .nav-links esta oculto, mas a coluna 3 continuava
   reservando 1fr (157px em 390) para um botao de 44px. Sobravam
   so ~71px para o rotulo, que truncava em "Case O...". Com as
   colunas 2 e 3 em auto, a 1 fica com todo o resto. */
@media (max-width:800px){.nav{grid-template-columns:minmax(0,1fr) auto auto}}