:root{
    --bg:#FFFFFF;
    --bg-alt:#F7F8FA;
    --card:#F5F6F8;
    --card-hover:#ECEEF2;
    --text:#0B0D0F;
    --text-secondary:#1C2126;
    --text-auxiliary:#525A64;
    --text-disabled:#656C76;
    --accent:#B8D94A;
    --accent-hover:#A7C63E;
    --accent-ink:#54700E;
    --silver:#5E6773;
    --gray-metallic:#6B7480;
    --border:#E4E7EB;
    --border-secondary:#EDF0F3;
    --hairline:#D8DDE3;
    --max-width:1140px;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* escala tipografica fluida */
    --t-display: clamp(2.4rem, 6.2vw, 4.6rem);
    --t-h2:      clamp(1.85rem, 3.6vw, 3rem);
    --t-h3:      clamp(1.15rem, 1.5vw, 1.4rem);
    --t-lead:    clamp(1rem, 1.25vw, 1.18rem);

    /* ritmo vertical */
    --s-section: clamp(72px, 9vw, 128px);
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Sora',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;text-decoration:none;}

  img,svg{display:block;}

  .wrap{
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 24px;
  }

  main{ counter-reset:secao; }

  section{
    padding:var(--s-section) 0;
    border-bottom:1px solid var(--border-secondary);
  }

  h1,h2,h3{
    font-weight:700;
    letter-spacing:-0.032em;
  }

  h2{
    font-size:var(--t-h2);
    line-height:1.08;
    color:var(--text);
  }

  /* label tecnico com numeracao editorial: 01 / O CENARIO */
  .eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--mono);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-auxiliary);
    margin-bottom:22px;
  }

  main > section:not(.hero) .eyebrow::before{
    counter-increment:secao;
    content:counter(secao, decimal-leading-zero);
    font-size:11.5px;
    color:var(--accent-ink);
    padding-right:12px;
    border-right:1px solid var(--hairline);
  }

  /* ---------- Header / Logo ---------- */
  header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border-secondary);
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--max-width);
    margin:0 auto;
    padding:16px 24px;
  }

  .logo{
    display:flex;
    align-items:center;
  }

  .logo-img{
    height:28px;
    width:auto;
    display:block;
  }

  .header-cta{
    display:none;
  }

  @media(min-width:768px){
    .header-cta{
      display:inline-flex;
    }
  }

  /* ---------- Buttons ---------- */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--text);
    color:#FFFFFF;
    font-family:inherit;
    font-weight:600;
    font-size:15.5px;
    letter-spacing:-0.01em;
    padding:15px 28px;
    border-radius:6px;
    border:1px solid var(--text);
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    transition:color .3s cubic-bezier(.4,0,.2,1), border-color .3s ease;
  }

  /* camada que sobe preenchendo o botao */
  .btn::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--accent);
    transform:translateY(101%);
    transition:transform .42s cubic-bezier(.65,0,.35,1);
  }

  .btn:hover{
    color:#161A0B;
    border-color:var(--accent);
  }

  .btn:hover::before{ transform:translateY(0); }

  .btn:focus-visible{
    outline:2px solid var(--accent-ink);
    outline-offset:3px;
  }

  .btn-small{
    padding:10px 18px;
    font-size:13.5px;
  }

  /* secundario: contorno, mesmo preenchimento no hover */
  .btn-outline{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
  }

  .btn-outline:hover{
    color:#161A0B;
    border-color:var(--accent);
  }

  @media(prefers-reduced-motion:reduce){
    .btn::before{ transition:none; }
  }

  /* ---------- Hero ---------- */
  .hero{
    padding-top:32px;
    padding-bottom:96px;
  }

  .hero-inner{
    max-width:640px;
  }

  .hero-preheader{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:var(--mono);
    font-size:11.5px;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-auxiliary);
    margin-bottom:26px;
  }

  .hero-preheader::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px rgba(184,217,74,.28);
  }

  .hero h1{
    font-size:var(--t-display);
    font-weight:700;
    line-height:0.98;
    letter-spacing:-0.042em;
    color:var(--text);
    margin-bottom:28px;
  }

  .hero h1 .accent{
    color:var(--accent-ink);
  }

  /* entrada do titulo: cada linha sobe de tras da mascara */
  .hero-titulo .linha{
    display:block;
    overflow:hidden;
  }

  .hero-titulo .linha > span{
    display:block;
    transform:translateY(105%);
    animation:subirLinha .95s cubic-bezier(.22,1,.36,1) forwards;
  }

  .hero-titulo .linha:nth-child(1) > span{ animation-delay:.06s; }
  .hero-titulo .linha:nth-child(2) > span{ animation-delay:.17s; }

  @keyframes subirLinha{
    to{ transform:translateY(0); }
  }

  /* o resto do hero entra logo atras */
  .hero-preheader,
  .hero-inner > p,
  .hero-inner > .btn,
  .hero-visual{
    opacity:0;
    animation:surgir .8s cubic-bezier(.22,1,.36,1) forwards;
  }

  .hero-preheader{ animation-delay:.02s; }
  .hero-inner > p:not(.hero-differentiator){ animation-delay:.34s; }
  .hero-inner > p.hero-differentiator{ animation-delay:.42s; }
  .hero-inner > .btn{ animation-delay:.5s; }
  .hero-inner > p.hero-note{ animation-delay:.56s; }
  .hero-visual{ animation-delay:.3s; }

  @keyframes surgir{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media(prefers-reduced-motion:reduce){
    .hero-titulo .linha > span{ transform:none; animation:none; }
    .hero-preheader,
    .hero-inner > p,
    .hero-inner > .btn,
    .hero-visual{ opacity:1; animation:none; }
  }

  .hero p{
    font-size:var(--t-lead);
    font-weight:400;
    line-height:1.6;
    color:var(--text-auxiliary);
    max-width:490px;
    margin-bottom:34px;
  }

  p.hero-differentiator{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:470px;
    margin-top:-18px;
    margin-bottom:34px;
    padding-left:16px;
    border-left:1px solid var(--hairline);
    font-size:14.5px;
    line-height:1.6;
    color:var(--text-secondary);
  }

  p.hero-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:24px;
    max-width:440px;
    font-size:12px;
    color:var(--text-disabled);
  }

  .hero-note .icon{
    width:15px;
    height:15px;
    flex-shrink:0;
    margin-top:1px;
    color:var(--text-disabled);
  }

  /* ---------- Ruler accent strip ---------- */
  .ruler-strip{
    height:26px;
    margin-bottom:36px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='32' viewBox='0 0 200 32'%3E%3Cline x1='0' y1='31' x2='200' y2='31' stroke='%23A9B0B8' stroke-width='1'/%3E%3Cg stroke='%23A9B0B8' stroke-width='1'%3E%3Cline x1='0' y1='31' x2='0' y2='9'/%3E%3Cline x1='10' y1='31' x2='10' y2='23'/%3E%3Cline x1='20' y1='31' x2='20' y2='19'/%3E%3Cline x1='30' y1='31' x2='30' y2='23'/%3E%3Cline x1='40' y1='31' x2='40' y2='15'/%3E%3Cline x1='50' y1='31' x2='50' y2='23'/%3E%3Cline x1='60' y1='31' x2='60' y2='19'/%3E%3Cline x1='70' y1='31' x2='70' y2='23'/%3E%3Cline x1='80' y1='31' x2='80' y2='15'/%3E%3Cline x1='90' y1='31' x2='90' y2='23'/%3E%3Cline x1='100' y1='31' x2='100' y2='9'/%3E%3Cline x1='110' y1='31' x2='110' y2='23'/%3E%3Cline x1='120' y1='31' x2='120' y2='19'/%3E%3Cline x1='130' y1='31' x2='130' y2='23'/%3E%3Cline x1='140' y1='31' x2='140' y2='15'/%3E%3Cline x1='150' y1='31' x2='150' y2='23'/%3E%3Cline x1='160' y1='31' x2='160' y2='19'/%3E%3Cline x1='170' y1='31' x2='170' y2='23'/%3E%3Cline x1='180' y1='31' x2='180' y2='15'/%3E%3Cline x1='190' y1='31' x2='190' y2='23'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:200px 26px;
    opacity:.85;
  }

  /* ---------- Hero visual: robot + automation panel ---------- */
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
  }

  @media(min-width:768px){
    .hero-grid{ grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:24px; }
  }

  @media(min-width:1024px){
    .hero-grid{ grid-template-columns:minmax(0,60fr) minmax(0,40fr); gap:32px; }
  }

  .hero-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  @media(min-width:768px){
    .hero-visual{
      flex-direction:row;
      flex-wrap:wrap;
      align-items:flex-start;
      gap:20px;
    }
  }

  .hero-video{
    display:block;
    width:100%;
    max-width:560px;
    height:auto;
    border-radius:12px;
    margin:0 auto;
  }

  /* ---------- Scroll reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  }

  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  @media(prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  .problem-grid .reveal:nth-child(2){ transition-delay:.08s; }
  .problem-grid .reveal:nth-child(3){ transition-delay:.16s; }
  .problem-grid .reveal:nth-child(4){ transition-delay:.24s; }

  .about-grid .reveal:nth-child(2){ transition-delay:.12s; }

  .steps .reveal:nth-child(2){ transition-delay:.1s; }
  .steps .reveal:nth-child(3){ transition-delay:.2s; }

  .benefits-grid .reveal:nth-child(2){ transition-delay:.08s; }
  .benefits-grid .reveal:nth-child(3){ transition-delay:.16s; }
  .benefits-grid .reveal:nth-child(4){ transition-delay:.24s; }

  .modalidades-grid .reveal:nth-child(2){ transition-delay:.1s; }

  /* ---------- Nossas modalidades ---------- */
  .modalidades-subtitle{
    font-size:18px;
    color:var(--text-secondary);
    max-width:640px;
    margin-bottom:20px;
  }

  .modalidades-context{
    font-size:15.5px;
    line-height:1.7;
    color:var(--text-auxiliary);
    max-width:720px;
    margin-bottom:48px;
  }

  .modalidades-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:48px;
  }

  @media(min-width:768px){
    .modalidades-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  }

  .modality-card{
    display:flex;
    flex-direction:column;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:34px 30px;
    transition:border-color .25s ease;
  }

  .modality-card:hover{ border-color:var(--hairline); }

  .modality-icon{
    width:46px;
    height:46px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--card);
    border:1px solid var(--border);
    margin-bottom:22px;
  }

  .modality-icon svg{
    width:24px;
    height:24px;
    stroke-width:1.6;
  }

  .modality-card--gold .modality-icon svg{ color:#8A6D18; }
  .modality-card--silver .modality-icon svg{ color:#5E6773; }

  .modality-card h3{
    font-size:clamp(1.25rem, 1.7vw, 1.55rem);
    letter-spacing:-0.028em;
    color:var(--text);
    margin-bottom:14px;
  }

  .modality-image{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:400px;
    object-fit:contain;
    margin:0 auto 24px;
    border-radius:8px;
  }

  .modality-desc{
    font-size:15.5px;
    line-height:1.65;
    color:var(--text-auxiliary);
    margin-bottom:16px;
  }

  .modality-usage{
    font-size:14.5px;
    line-height:1.65;
    color:var(--text-auxiliary);
    margin-bottom:28px;
  }

  .modality-label{
    display:block;
    font-family:var(--mono);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-disabled);
    padding-bottom:12px;
    border-bottom:1px solid var(--border-secondary);
    margin-bottom:16px;
  }

  .modality-block + .modality-block{
    margin-top:28px;
  }

  .modality-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .modality-list li{
    position:relative;
    padding-left:24px;
    font-size:14.5px;
    line-height:1.5;
    color:var(--text-auxiliary);
  }

  .modality-list--check li::before{
    content:'';
    position:absolute;
    left:0;
    top:6px;
    width:14px;
    height:14px;
    border-radius:50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size:9px 9px;
    background-repeat:no-repeat;
    background-position:center;
  }

  .modality-card--gold .modality-list--check li::before{ background-color:#8A6D18; }
  .modality-card--silver .modality-list--check li::before{ background-color:#5E6773; }

  .modality-list--use li::before{
    content:'';
    position:absolute;
    left:2px;
    top:9px;
    width:6px;
    height:6px;
    border-radius:50%;
  }

  .modality-card--gold .modality-list--use li::before{ background:#8A6D18; opacity:.6; }
  .modality-card--silver .modality-list--use li::before{ background:#5E6773; opacity:.6; }

  .modality-cta{
    margin-top:auto;
    align-self:flex-start;
    background:transparent;
    padding:12px 22px;
    font-size:14.5px;
    border-radius:6px;
  }

  .modality-block:last-of-type{ margin-bottom:30px; }

  .modality-card--gold .modality-cta{ color:#8A6D18; border:1px solid #8A6D18; }
  .modality-card--gold .modality-cta:hover{ background:#8A6D18; color:#FFFFFF; }

  .modality-card--silver .modality-cta{ color:#5E6773; border:1px solid #5E6773; }
  .modality-card--silver .modality-cta:hover{ background:#5E6773; color:#FFFFFF; }

  .modalidades-combo{
    border:1px solid var(--border);
    border-radius:10px;
    padding:clamp(30px, 4vw, 46px);
    text-align:center;
    background:var(--card);
  }

  .modalidades-combo h3{
    font-size:20px;
    color:var(--text-secondary);
    margin-bottom:14px;
  }

  .modalidades-combo p{
    font-size:15px;
    line-height:1.7;
    color:var(--text-auxiliary);
    max-width:640px;
    margin:0 auto;
  }

  .modalidades-combo-benefit{
    margin-top:18px !important;
    font-size:15.5px !important;
    font-weight:600;
    color:var(--text-secondary) !important;
  }

  /* ---------- Problem section ---------- */
  .section-head{
    max-width:680px;
    margin-bottom:clamp(44px, 5vw, 72px);
  }

  .section-head h2{
    font-size:var(--t-h2);
    line-height:1.08;
    letter-spacing:-0.035em;
    color:var(--text);
  }

  .problem-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border-top:1px solid var(--hairline);
    counter-reset:sinal;
  }

  @media(min-width:768px){
    .problem-grid{
      grid-template-columns:1fr 1fr;
      column-gap:64px;
    }
  }

  .problem-card{
    position:relative;
    padding:30px 0 30px 46px;
    border-bottom:1px solid var(--hairline);
  }

  /* numeracao no lugar do icone generico */
  .problem-card::before{
    counter-increment:sinal;
    content:counter(sinal, decimal-leading-zero);
    position:absolute;
    left:0;
    top:32px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--text-disabled);
    transition:color .25s ease;
  }

  .problem-card::after{
    content:'';
    position:absolute;
    left:0;
    top:-1px;
    width:0;
    height:1px;
    background:var(--accent-ink);
    transition:width .5s cubic-bezier(.4,0,.2,1);
  }

  .problem-card:hover::after{ width:100%; }
  .problem-card:hover::before{ color:var(--accent-ink); }

  .problem-card .icon{ display:none; }

  .problem-card h3{
    font-size:17.5px;
    line-height:1.3;
    letter-spacing:-0.02em;
    color:var(--text);
    margin-bottom:10px;
  }

  .problem-card p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--text-auxiliary);
    font-weight:400;
    max-width:44ch;
  }

  .problem-intro{
    margin-top:18px;
    max-width:620px;
    font-size:16px;
    line-height:1.65;
    color:var(--text-auxiliary);
  }

  .problem-close{
    margin-top:28px;
    max-width:680px;
    font-size:15.5px;
    line-height:1.6;
    font-weight:600;
    color:var(--text-secondary);
    padding-left:14px;
    border-left:2px solid var(--accent);
  }

  /* ---------- How it works ---------- */
  .steps{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    counter-reset:step;
  }

  @media(min-width:768px){
    .steps{ grid-template-columns:repeat(3,1fr); gap:32px; }
  }

  .step{
    position:relative;
    padding-top:8px;
  }

  .step{
    position:relative;
    padding-top:26px;
    border-top:1px solid var(--hairline);
  }

  .step-number{
    display:block;
    font-family:var(--mono);
    font-size:13px;
    font-weight:500;
    color:var(--accent-ink);
    margin-bottom:18px;
  }

  .step-number::before{ content:'0'; }

  .step h3{
    font-size:var(--t-h3);
    letter-spacing:-0.025em;
    margin-bottom:12px;
    color:var(--text);
  }

  .step p{
    color:var(--text-auxiliary);
    font-size:15px;
    line-height:1.65;
    max-width:38ch;
  }

  /* ---------- Quem somos ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
  }

  @media(min-width:900px){
    .about-grid{ grid-template-columns:1fr 1fr; gap:64px; }
  }

  .about-text h2{
    font-size:28px;
    line-height:1.2;
    margin-bottom:20px;
    color:var(--text-secondary);
  }

  @media(min-width:768px){
    .about-text h2{ font-size:34px; }
  }

  .about-text p{
    color:var(--text-auxiliary);
    font-size:16px;
    margin-bottom:16px;
  }

  .about-points{
    display:flex;
    flex-direction:column;
    gap:28px;
  }

  .about-point{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }

  .about-point .icon{
    box-sizing:content-box;
    width:18px;
    height:18px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:50%;
    color:var(--text);
    background:var(--bg);
    flex-shrink:0;
    margin-top:0;
    stroke-width:1.6;
  }

  .about-point:hover .icon{
    color:#161A0B;
    background:var(--accent);
    border-color:var(--accent);
  }

  .about-point h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
    color:var(--text-secondary);
  }

  .about-point p{
    color:var(--text-auxiliary);
    font-size:14.5px;
  }

  /* ---------- Benefícios ---------- */
  .benefits-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border-top:1px solid var(--hairline);
  }

  @media(min-width:768px){
    .benefits-grid{ grid-template-columns:1fr 1fr; column-gap:64px; }
  }

  .benefit-card{
    position:relative;
    background:transparent;
    padding:30px 0;
    border-bottom:1px solid var(--hairline);
    border-left:0;
    transition:none;
  }

  .benefit-card:hover{
    background:transparent;
    border-left:0;
  }

  .benefit-card .icon{
    box-sizing:content-box;
    width:20px;
    height:20px;
    padding:11px;
    border:1px solid var(--border);
    border-radius:9px;
    color:var(--text);
    background:var(--bg);
    margin-bottom:20px;
    stroke-width:1.6;
  }

  .benefit-card:hover .icon{
    color:#161A0B;
    background:var(--accent);
    border-color:var(--accent);
  }

  .benefit-card h3{
    font-size:17.5px;
    letter-spacing:-0.02em;
    margin-bottom:9px;
    color:var(--text);
  }

  .benefit-card p{
    color:var(--text-auxiliary);
    font-size:14.5px;
    line-height:1.65;
    max-width:44ch;
  }

  /* ---------- Final CTA ---------- */
  .cta-final{
    text-align:center;
    border-bottom:none;
  }

  /* frase de urgencia: nao leva numeracao nem virar label tecnico */
  main > section.cta-final .eyebrow{
    display:block;
    max-width:420px;
    margin:0 auto 22px;
    font-family:'Sora', sans-serif;
    font-size:14px;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--text-auxiliary);
  }

  main > section.cta-final .eyebrow::before{
    content:none;
    counter-increment:none;
    padding:0;
    border:0;
  }

  .cta-final h2{
    font-size:var(--t-h2);
    line-height:1.06;
    letter-spacing:-0.038em;
    margin:0 auto 36px;
    max-width:620px;
    color:var(--text);
  }

  .cta-final .tagline{
    margin-top:44px;
    color:var(--text-disabled);
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0;
  }

  .cta-final .tagline .dot{
    color:var(--accent-ink);
  }

  /* ---------- Footer ---------- */
  footer{
    padding:clamp(48px, 6vw, 72px) 0 44px;
    background:var(--bg);
    border-top:1px solid var(--hairline);
  }

  .footer-inner{
    display:flex;
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
  }

  @media(min-width:640px){
    .footer-inner{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
    }
  }

  .footer-logo{
    display:flex;
    align-items:center;
  }

  .footer-logo .logo-img{
    height:20px;
  }

  .footer-links{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-auxiliary);
  }

  .footer-links a{
    padding-bottom:2px;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease, color .2s ease;
  }

  .footer-links a:hover{ border-bottom-color:var(--accent-ink); }

  .footer-links a:hover{
    color:var(--accent-ink);
  }

  .footer-copy{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--text-disabled);
  }

  /* ---------- Escopo ---------- */
  .scope-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    background:transparent;
    border:0;
    border-top:1px solid var(--hairline);
    border-radius:0;
  }

  @media(min-width:768px){
    .scope-grid{ grid-template-columns:1fr 1fr; column-gap:64px; }
  }

  .scope-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:transparent;
    padding:26px 0;
    border-bottom:1px solid var(--hairline);
  }

  .scope-card .icon{
    width:22px;
    height:22px;
    color:var(--text);
    flex-shrink:0;
    margin-top:1px;
    stroke-width:1.7;
  }

  .scope-card:hover .icon{ color:var(--accent-ink); }

  .scope-card p{
    font-size:15px;
    line-height:1.6;
    color:var(--text-secondary);
  }

  .scope-grid .reveal:nth-child(2){ transition-delay:.06s; }
  .scope-grid .reveal:nth-child(3){ transition-delay:.12s; }
  .scope-grid .reveal:nth-child(4){ transition-delay:.18s; }

  /* ---------- FAQ ---------- */
  .faq-list{
    border-top:1px solid var(--hairline);
    max-width:820px;
  }

  .faq-item{
    border-bottom:1px solid var(--hairline);
  }

  .faq-item summary{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:26px 0;
    cursor:pointer;
    list-style:none;
    font-size:16.5px;
    font-weight:600;
    line-height:1.45;
    color:var(--text-secondary);
    transition:color .15s ease;
  }

  .faq-item summary::-webkit-details-marker{ display:none; }

  .faq-item summary:hover{ color:var(--accent-ink); }

  .faq-item summary::after{
    content:'';
    flex-shrink:0;
    width:11px;
    height:11px;
    margin-top:6px;
    border-right:2px solid var(--silver);
    border-bottom:2px solid var(--silver);
    transform:rotate(45deg);
    transition:transform .2s ease, border-color .15s ease;
  }

  .faq-item[open] summary::after{
    transform:rotate(-135deg);
    border-color:var(--accent-ink);
  }

  .faq-item[open] summary{ color:var(--accent-ink); }

  .faq-answer{
    padding:0 0 26px;
    max-width:700px;
  }

  .faq-answer p{
    font-size:15px;
    line-height:1.7;
    color:var(--text-auxiliary);
  }

  @media(min-width:768px){
    .faq-item summary{ font-size:17.5px; }
    .faq-answer p{ font-size:15.5px; }
  }

  .faq-list .reveal:nth-child(2){ transition-delay:.05s; }
  .faq-list .reveal:nth-child(3){ transition-delay:.10s; }
  .faq-list .reveal:nth-child(4){ transition-delay:.15s; }
  .faq-list .reveal:nth-child(5){ transition-delay:.20s; }
  .faq-list .reveal:nth-child(6){ transition-delay:.25s; }

  /* ---------- Feedbacks ---------- */
  #feedbacks{
    background:var(--bg);
  }

  .feedback-head{
    max-width:720px;
  }

  .feedback-eyebrow{
    color:#8A6D18;
  }

  h2.feedback-title{
    font-size:32px;
    line-height:1.2;
    color:var(--text);
    margin-bottom:16px;
  }

  @media(min-width:768px){
    h2.feedback-title{ font-size:44px; }
  }

  .feedback-desc{
    font-size:16px;
    line-height:1.6;
    color:var(--text-auxiliary);
  }

  .feedback-figure{
    margin:0;
  }

  .feedback-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
    box-shadow:none;
  }

  .feedback-caption{
    margin-top:12px;
    font-size:11.5px;
    line-height:1.5;
    color:var(--text-disabled);
  }

  /* ---------- Rodapé: mensagem ---------- */
  .footer-message{
    max-width:520px;
    margin-bottom:40px;
    padding-bottom:40px;
    border-bottom:1px solid var(--border-secondary);
    font-size:clamp(1rem, 1.5vw, 1.22rem);
    line-height:1.55;
    letter-spacing:-0.02em;
    color:var(--text-secondary);
  }

  /* ---------- CTA flutuante (mobile) ---------- */
  .mobile-cta-bar{
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    padding:12px 16px;
    background:rgba(255,255,255,0.97);
    border-top:1px solid var(--border);
  }

  .mobile-cta-bar .btn{
    width:100%;
    padding:14px 24px;
  }

  @media(max-width:767px){
    .mobile-cta-bar{ display:block; }
    body{ padding-bottom:76px; }
  }



  /* ---------- Ícones: traço que se desenha + reação ao hover ---------- */
  .icone-anim [data-traco]{
    stroke-dasharray:var(--traco);
    stroke-dashoffset:var(--traco);
  }

  .icone-anim.desenhado [data-traco]{
    stroke-dashoffset:0;
    transition:stroke-dashoffset .9s cubic-bezier(.33,1,.68,1);
  }

  /* pequenos atrasos para o traço correr, nao aparecer tudo junto */
  .icone-anim.desenhado [data-traco]:nth-child(2){ transition-delay:.1s; }
  .icone-anim.desenhado [data-traco]:nth-child(3){ transition-delay:.18s; }
  .icone-anim.desenhado [data-traco]:nth-child(4){ transition-delay:.24s; }
  .icone-anim.desenhado [data-traco]:nth-child(n+5){ transition-delay:.3s; }

  /* reacao ao passar o mouse no bloco */
  .benefit-card .icon,
  .scope-card .icon,
  .about-point .icon{
    transition:transform .45s cubic-bezier(.34,1.56,.64,1),
               color .3s ease, background-color .3s ease, border-color .3s ease;
  }

  .benefit-card:hover .icon,
  .about-point:hover .icon{
    transform:translateY(-3px);
  }

  .scope-card:hover .icon{
    transform:translateX(3px);
  }

  /* icone dentro da caixinha das modalidades */
  .modality-icon{
    transition:border-color .3s ease, background-color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  }

  .modality-card:hover .modality-icon{
    transform:translateY(-3px);
    border-color:var(--hairline);
    background:var(--bg);
  }

  .modality-icon svg{
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  }

  .modality-card--gold:hover .modality-icon svg{ transform:rotate(-6deg); }
  .modality-card--silver:hover .modality-icon svg{ transform:scale(1.1); }

  @media(prefers-reduced-motion:reduce){
    .icone-anim [data-traco]{ stroke-dasharray:none; stroke-dashoffset:0; }
    .benefit-card:hover .icon,
    .scope-card:hover .icon,
    .about-point:hover .icon,
    .modality-card:hover .modality-icon,
    .modality-card:hover .modality-icon svg{ transform:none; }
  }

  /* ---------- Barra de progresso de leitura ---------- */
  .progresso{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    width:100%;
    transform:scaleX(0);
    transform-origin:0 50%;
    background:var(--accent);
    z-index:40;
    will-change:transform;
  }

  /* ---------- FAQ: abertura animada ---------- */
  .faq-answer{
    display:grid;
    grid-template-rows:0fr;
    padding:0;
    max-width:700px;
    transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1);
  }

  .faq-answer > p{ overflow:hidden; }

  .faq-item[open] .faq-answer{
    grid-template-rows:1fr;
    padding-bottom:26px;
  }

  @media(prefers-reduced-motion:reduce){
    .faq-answer{ transition:none; }
    .progresso{ display:none; }
  }

  /* ---------- imagens das modalidades: respiro no hover ---------- */
  .modality-image{
    transition:transform .6s cubic-bezier(.4,0,.2,1);
  }

  .modality-card:hover .modality-image{ transform:scale(1.02); }

  /* ---------- Modal de orçamento ---------- */
  .orc-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(11,13,15,0.75);
    align-items:flex-start;
    justify-content:center;
    padding:24px 20px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .orc-overlay.is-open{
    display:flex;
  }

  .orc-modal{
    position:relative;
    width:100%;
    max-width:440px;
    margin:auto;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:12px;
    padding:32px;
  }

  @media(max-width:480px){
    .orc-modal{ padding:26px 22px; }
    .orc-modal h3{ font-size:23px; }
  }

  .orc-close{
    position:absolute;
    top:16px;
    right:16px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    color:var(--text-auxiliary);
    cursor:pointer;
    border-radius:6px;
    transition:background-color .15s ease, color .15s ease;
  }

  .orc-close:hover{
    background:var(--card);
    color:var(--text);
  }

  .orc-close svg{
    width:18px;
    height:18px;
  }

  .orc-modal h3{
    font-size:26px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
    padding-right:24px;
  }

  .orc-sub{
    font-size:14.5px;
    line-height:1.55;
    color:var(--text-auxiliary);
    margin-bottom:22px;
  }

  .orc-label{
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-disabled);
    margin-bottom:10px;
  }

  .orc-options{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:22px;
  }

  .orc-option{
    display:block;
    width:100%;
    text-align:left;
    background:transparent;
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 18px;
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    color:var(--text);
    cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease;
  }

  .orc-option:hover{
    border-color:var(--accent-ink);
  }

  .orc-option.is-selected{
    border-color:var(--accent-ink);
    background:#F4F8E6;
  }

  .orc-campo{
    margin-bottom:16px;
  }

  .orc-campo label{
    display:block;
    font-size:13.5px;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:7px;
  }

  .orc-campo input{
    width:100%;
    padding:14px 16px;
    font-family:inherit;
    font-size:15.5px;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }

  .orc-opcional{
    display:inline-block;
    margin-left:6px;
    padding:2px 7px;
    border-radius:20px;
    background:var(--card);
    border:1px solid var(--border);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:lowercase;
    color:var(--text-auxiliary);
    vertical-align:middle;
  }

  .orc-campo input::placeholder{ color:var(--text-disabled); }

  .orc-campo input:focus{
    outline:none;
    border-color:var(--accent-ink);
    box-shadow:0 0 0 3px rgba(84,112,14,.12);
  }

  .orc-campo input.tem-erro{
    border-color:#C0392B;
  }

  .orc-erro{
    display:block;
    margin-top:6px;
    font-size:12.5px;
    color:#C0392B;
  }

  .orc-erro-geral{
    margin-top:12px;
    text-align:center;
  }

  .orc-enviar{
    width:100%;
    margin-top:6px;
  }

  .orc-enviar:disabled{
    opacity:.55;
    cursor:default;
  }

  .orc-enviar:disabled::before{ transform:translateY(101%); }

  .orc-privacidade{
    margin-top:14px;
    font-size:11.5px;
    line-height:1.5;
    color:var(--text-disabled);
  }

  .orc-sucesso{
    text-align:center;
    padding:8px 0;
  }

  .orc-sucesso-icone{
    width:52px;
    height:52px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F4F8E6;
    color:var(--accent-ink);
  }

  .orc-sucesso-icone svg{ width:26px; height:26px; }

  .orc-sucesso h3{
    padding-right:0;
    margin-bottom:10px;
  }

  .orc-sucesso p{
    font-size:15px;
    line-height:1.6;
    color:var(--text-auxiliary);
    margin-bottom:22px;
  }

  /* ============================================================
     CAMADA DE MOVIMENTO  --  "precisao em movimento"
     Aditiva: nada acima foi alterado. Tudo aqui degrada com
     seguranca em prefers-reduced-motion e em telas de toque.
     ============================================================ */

  :root{
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-io:cubic-bezier(.65,0,.35,1);
    --glow:rgba(184,217,74,.55);
  }

  /* ---------- 1. Grao de filme: tira o "chapado" do branco ---------- */
  .grain{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27200%27 height=%27200%27 filter=%27url(%23n)%27 opacity=%27.20%27/%3E%3C/svg%3E");
    background-repeat:repeat;
    animation:granular 6s steps(5) infinite;
  }
  @keyframes granular{
    0%,100%{background-position:0 0}
    20%{background-position:-24px 12px}
    40%{background-position:18px -20px}
    60%{background-position:-14px -12px}
    80%{background-position:22px 16px}
  }
  /* ---------- 2. Aurora: profundidade atras do hero ---------- */
  .hero{ position:relative; isolation:isolate; overflow:clip; }

  .aurora{
    position:absolute;
    inset:-10% -4% auto;
    height:660px;
    z-index:-1;
    pointer-events:none;
    filter:blur(64px);
    opacity:.55;
  }
  .aurora span{
    position:absolute;
    display:block;
    border-radius:50%;
    will-change:transform;
  }
  .aurora span:nth-child(1){
    width:520px; height:520px; left:4%; top:-8%;
    background:radial-gradient(circle at 30% 30%, rgba(184,217,74,.42), transparent 68%);
    animation:derivaA 19s var(--ease-io) infinite alternate;
  }
  .aurora span:nth-child(2){
    width:440px; height:440px; right:6%; top:6%;
    background:radial-gradient(circle at 60% 40%, rgba(94,103,115,.30), transparent 66%);
    animation:derivaB 23s var(--ease-io) infinite alternate;
  }
  .aurora span:nth-child(3){
    width:380px; height:380px; left:42%; top:26%;
    background:radial-gradient(circle at 50% 50%, rgba(167,198,62,.26), transparent 70%);
    animation:derivaC 27s var(--ease-io) infinite alternate;
  }
  @keyframes derivaA{ to{ transform:translate3d(70px,44px,0) scale(1.14) } }
  @keyframes derivaB{ to{ transform:translate3d(-64px,54px,0) scale(1.1) } }
  @keyframes derivaC{ to{ transform:translate3d(40px,-46px,0) scale(1.18) } }

  /* malha tecnica discreta, reforca o conceito de "regua" */
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(11,13,15,.038) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(11,13,15,.038) 1px, transparent 1px);
    background-size:72px 72px;
    mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 32%, transparent 76%);
    -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 32%, transparent 76%);
  }

  /* ---------- 3. O robo: reage ao mouse ---------- */
  .hero-visual{
    perspective:1100px;
    perspective-origin:50% 45%;
  }

  .robo-palco{
    position:relative;
    width:100%;
    max-width:560px;
    margin:0 auto;
    transform-style:preserve-3d;
    will-change:transform;
    transform:
      rotateX(var(--rx,0deg))
      rotateY(var(--ry,0deg))
      translate3d(var(--tx,0px), var(--ty,0px), 0);
    transition:transform .5s var(--ease-out);
  }
  .robo-palco.is-live{ transition:transform .12s linear; }

  /* halo que segue o cursor */
  .robo-palco::before{
    content:'';
    position:absolute;
    inset:-14%;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 62%);
    filter:blur(38px);
    opacity:0;
    transition:opacity .6s var(--ease-out);
  }
  .hero-visual:hover .robo-palco::before{ opacity:.85; }

  .robo-palco .hero-video{
    position:relative;
    transform:translateZ(46px);
    border-radius:16px;
    box-shadow:
      0 2px 8px rgba(11,13,15,.05),
      0 22px 56px -20px rgba(11,13,15,.26);
    transition:box-shadow .6s var(--ease-out);
  }
  .hero-visual:hover .robo-palco .hero-video{
    box-shadow:
      0 2px 8px rgba(11,13,15,.05),
      0 34px 78px -22px rgba(11,13,15,.34);
  }

  /* moldura tecnica: cantos de mira */
  .robo-mira{
    position:absolute;
    inset:-16px;
    pointer-events:none;
    transform:translateZ(20px);
    opacity:0;
    transition:opacity .55s var(--ease-out);
  }
  .hero-visual:hover .robo-mira{ opacity:1; }
  .robo-mira i{
    position:absolute;
    width:16px; height:16px;
    border:1.5px solid var(--accent-ink);
    opacity:.5;
  }
  .robo-mira i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
  .robo-mira i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
  .robo-mira i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
  .robo-mira i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

  /* leitura de coordenadas: detalhe tecnico vivo */
  .robo-hud{
    position:absolute;
    left:0; bottom:-30px;
    display:flex;
    gap:14px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.08em;
    color:var(--text-disabled);
    opacity:0;
    transform:translateZ(20px);
    transition:opacity .5s var(--ease-out);
  }
  .hero-visual:hover .robo-hud{ opacity:.9; }
  .robo-hud b{ color:var(--accent-ink); font-weight:500; }

  /* ---------- 4. Botoes magneticos ---------- */
  .btn{
    will-change:transform;
    transform:translate3d(var(--bx,0px), var(--by,0px), 0);
    transition:transform .45s var(--ease-out), color .3s var(--ease-io), border-color .3s ease;
  }
  .btn.is-pulling{ transition:transform .1s linear; }

  /* ---------- 5. Cartoes: inclinacao 3D + brilho que segue o cursor ---------- */
  .problem-card,
  .benefit-card,
  .scope-card,
  .modality-card,
  .about-point{
    position:relative;
  }
  .card-3d{
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s ease;
    transform:
      perspective(900px)
      rotateX(var(--crx,0deg))
      rotateY(var(--cry,0deg))
      translateY(var(--cty,0px));
  }
  .card-3d.is-live{ transition:transform .12s linear, box-shadow .4s var(--ease-out); }

  .card-3d::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(420px circle at var(--cmx,50%) var(--cmy,50%), rgba(184,217,74,.20), transparent 46%);
    opacity:0;
    transition:opacity .45s var(--ease-out);
  }
  .card-3d:hover::after{ opacity:1; }
  .card-3d:hover{
    box-shadow:0 20px 46px -24px rgba(11,13,15,.30);
    border-color:var(--hairline);
  }

  /* ---------- 6. Titulos: revelacao palavra a palavra ---------- */
  .pal{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
  }
  .pal > i{
    display:inline-block;
    font-style:inherit;
    transform:translateY(104%);
    opacity:0;
  }
  .pal.is-in > i{
    transform:translateY(0);
    opacity:1;
    transition:transform .78s var(--ease-out), opacity .6s ease;
    transition-delay:calc(var(--i,0) * 52ms);
  }

  /* ---------- 7. Fita de capacidades ---------- */
  .fita{
    border-top:1px solid var(--border-secondary);
    border-bottom:1px solid var(--border-secondary);
    background:var(--bg-alt);
    padding:17px 0;
    overflow:hidden;
    position:relative;
  }
  .fita::before,
  .fita::after{
    content:'';
    position:absolute;
    top:0; bottom:0;
    width:110px;
    z-index:2;
    pointer-events:none;
  }
  .fita::before{ left:0;  background:linear-gradient(to right, var(--bg-alt), transparent); }
  .fita::after{  right:0; background:linear-gradient(to left,  var(--bg-alt), transparent); }

  .fita-trilho{
    display:flex;
    width:max-content;
    animation:correr 42s linear infinite;
  }
  .fita:hover .fita-trilho{ animation-play-state:paused; }
  @keyframes correr{ to{ transform:translateX(-50%) } }

  .fita-item{
    display:inline-flex;
    align-items:center;
    gap:11px;
    padding:0 26px;
    font-family:var(--mono);
    font-size:12px;
    font-weight:500;
    letter-spacing:.085em;
    text-transform:uppercase;
    color:var(--text-auxiliary);
    white-space:nowrap;
  }
  .fita-item::after{
    content:'';
    width:5px; height:5px;
    border-radius:50%;
    background:var(--accent);
  }

  /* ---------- 8. Cabecalho que encolhe ---------- */
  header{ transition:box-shadow .4s ease, background-color .4s ease; }
  header.is-condensed{
    box-shadow:0 1px 0 var(--border), 0 8px 26px -18px rgba(11,13,15,.34);
    background:rgba(255,255,255,.93);
  }
  header.is-condensed .header-inner{ padding-top:10px; padding-bottom:10px; }
  .header-inner{ transition:padding .4s var(--ease-out); }
  .logo-img{ transition:transform .4s var(--ease-out); transform-origin:left center; }
  header.is-condensed .logo-img{ transform:scale(.92); }

  /* ---------- 9. Regua que mede o scroll ---------- */
  .ruler-strip{
    position:relative;
    transition:opacity .5s ease;
  }
  .ruler-strip::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    height:100%;
    width:var(--medido,0%);
    background:linear-gradient(to right, rgba(184,217,74,.16), rgba(184,217,74,.05));
    border-right:1.5px solid var(--accent-ink);
    transition:width .18s linear;
    pointer-events:none;
  }

  /* ---------- 10. Foco luminoso na chamada final ---------- */
  .cta-final{ position:relative; overflow:hidden; isolation:isolate; }
  .cta-final::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(520px circle at var(--fx,50%) var(--fy,50%), rgba(184,217,74,.16), transparent 62%);
    opacity:0;
    transition:opacity .6s var(--ease-out);
  }
  .cta-final:hover::before{ opacity:1; }

  /* ---------- 11. Divisores que se desenham ---------- */
  main > section{ position:relative; }
  main > section::after{
    content:'';
    position:absolute;
    left:0; bottom:-1px;
    height:1px;
    width:0;
    background:linear-gradient(to right, var(--accent), transparent);
    transition:width 1.4s var(--ease-out);
  }
  main > section.borda-in::after{ width:min(280px, 40%); }

  /* ---------- 12. Contencao responsiva e acessibilidade ---------- */
  @media(max-width:767px){
    .aurora{ opacity:.4; height:420px; }
    .robo-hud{ display:none; }
    .fita-item{ font-size:11px; padding:0 18px; }
  }

  /* sem mouse de precisao: nada de tilt nem magnetismo */
  @media(hover:none), (pointer:coarse){
    .robo-palco, .card-3d, .btn{ transform:none !important; }
    .robo-mira, .robo-hud, .robo-palco::before{ display:none; }
  }

  @media(prefers-reduced-motion:reduce){
    .grain, .aurora span, .fita-trilho{ animation:none !important; }
    .grain{ opacity:.16; }
    .robo-palco, .card-3d, .btn{ transform:none !important; transition:none !important; }
    .robo-mira, .robo-hud, .robo-palco::before, .card-3d::after, .cta-final::before{ display:none; }
    .pal > i{ transform:none; opacity:1; }
    .ruler-strip::after, main > section::after{ transition:none; }
  }

  /* ============================================================
     V2 -- RITMO E PROFUNDIDADE
     1. Secao escura com diagrama de fluxo animado
     3. Bordas de luz conica nos cartoes de modalidade
     4. Refinos tipograficos e de hierarquia
     ============================================================ */

  :root{
    --d-bg:#0B0D0F;
    --d-surface:#15181C;
    --d-surface-2:#1C2126;
    --d-line:rgba(255,255,255,.10);
    --d-line-forte:rgba(255,255,255,.18);
    --d-text:#F4F6F8;
    --d-muted:#8B939D;
  }

  /* ---------- 1. SECAO ESCURA ---------- */
  .fluxo{
    position:relative;
    background:var(--d-bg);
    color:var(--d-text);
    border-bottom:0;
    overflow:clip;
    isolation:isolate;
  }
  /* emenda suave entre o claro e o escuro */
  .fluxo::before{
    content:'';
    position:absolute;
    left:0; right:0; top:-1px;
    height:120px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,.06), transparent);
  }
  /* malha tecnica e brilho de fundo */
  .fluxo-fundo{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  }
  .fluxo-brilho{
    position:absolute;
    left:50%; top:22%;
    width:820px; height:420px;
    margin-left:-410px;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(184,217,74,.16), transparent 68%);
    filter:blur(50px);
  }
  .fluxo .wrap{ position:relative; z-index:1; }

  .fluxo .eyebrow{ color:var(--d-muted); }
  .fluxo h2{ color:var(--d-text); }
  .fluxo .fluxo-intro{
    max-width:620px;
    margin-top:18px;
    font-size:var(--t-lead);
    line-height:1.6;
    color:var(--d-muted);
  }
  main > section.fluxo .eyebrow::before{
    color:var(--accent);
    border-right-color:var(--d-line-forte);
  }

  /* ---------- diagrama ---------- */
  .diagrama{
    margin-top:clamp(38px,5vw,62px);
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .diagrama svg{
    display:block;
    width:100%;
    min-width:760px;
    height:auto;
  }

  .dg-cartao{ fill:var(--d-surface); stroke:var(--d-line); stroke-width:1; }
  .dg-nucleo{ fill:var(--d-surface-2); stroke:var(--d-line-forte); stroke-width:1; }
  .dg-rotulo{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    fill:var(--d-muted);
    text-transform:uppercase;
  }
  .dg-titulo{
    font-family:'Sora',sans-serif;
    font-size:15px;
    font-weight:600;
    fill:var(--d-text);
  }
  .dg-sub{
    font-family:'Sora',sans-serif;
    font-size:12px;
    fill:var(--d-muted);
  }
  .dg-chip{ fill:rgba(255,255,255,.045); stroke:var(--d-line); stroke-width:1; }
  .dg-chip-txt{
    font-family:'Sora',sans-serif;
    font-size:12.5px;
    fill:#C9D0D8;
  }

  /* trilhos e pulsos */
  .dg-trilho{
    fill:none;
    stroke:rgba(255,255,255,.14);
    stroke-width:1.4;
  }
  .dg-pulso{
    fill:none;
    stroke:var(--accent);
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-dasharray:26 340;
    stroke-dashoffset:366;
    filter:drop-shadow(0 0 5px rgba(184,217,74,.75));
    opacity:0;
  }
  .fluxo.is-ativo .dg-pulso{
    opacity:1;
    animation:correnteza 3.4s cubic-bezier(.55,0,.45,1) infinite;
  }
  .fluxo.is-ativo .dg-pulso:nth-of-type(2){ animation-delay:.26s; }
  .fluxo.is-ativo .dg-pulso:nth-of-type(3){ animation-delay:.52s; }
  .fluxo.is-ativo .dg-pulso:nth-of-type(4){ animation-delay:.78s; }
  @keyframes correnteza{
    0%{ stroke-dashoffset:366; }
    62%,100%{ stroke-dashoffset:0; }
  }

  /* nucleos que respiram */
  .dg-halo{
    fill:var(--accent);
    opacity:.10;
  }
  .fluxo.is-ativo .dg-halo{ animation:respirar 3.4s ease-in-out infinite; }
  .fluxo.is-ativo .dg-halo.atraso{ animation-delay:.7s; }
  @keyframes respirar{
    0%,100%{ opacity:.07; transform:scale(1); }
    50%{ opacity:.20; transform:scale(1.045); }
  }
  .dg-halo{ transform-box:fill-box; transform-origin:center; }

  .dg-ponto{ fill:var(--accent); }
  .fluxo.is-ativo .dg-ponto{ animation:piscar 2.2s ease-in-out infinite; }
  .fluxo.is-ativo .dg-ponto:nth-of-type(even){ animation-delay:.55s; }
  @keyframes piscar{ 0%,100%{opacity:.35} 50%{opacity:1} }

  /* legenda do diagrama */
  .fluxo-legenda{
    display:flex;
    flex-wrap:wrap;
    gap:12px 30px;
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid var(--d-line);
  }
  .fluxo-legenda span{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--d-muted);
  }
  .fluxo-legenda span::before{
    content:'';
    width:16px; height:1.5px;
    background:var(--accent);
  }
  .fluxo-legenda span:nth-child(2)::before{ background:var(--d-line-forte); }
  .fluxo-legenda span:nth-child(3)::before{ background:rgba(184,217,74,.35); }

  .fluxo-remate{
    margin-top:30px;
    max-width:640px;
    font-size:15px;
    line-height:1.65;
    color:#AEB6BF;
  }
  .fluxo-remate b{ color:var(--d-text); font-weight:600; }

  /* ---------- 3. BORDA DE LUZ CONICA ---------- */
  .modality-card{ position:relative; }
  .modality-card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    z-index:-1;
    padding:1px;
    background:conic-gradient(from var(--giro,0deg),
      transparent 0deg, transparent 250deg,
      rgba(184,217,74,.85) 300deg, transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;
    transition:opacity .5s ease;
  }
  .modality-card:hover::before{
    opacity:1;
    animation:girar 4.5s linear infinite;
  }
  @keyframes girar{ to{ --giro:360deg } }
  @property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

  /* ---------- 4. REFINOS ---------- */
  /* numeracao das secoes com marca de regua */
  main > section:not(.hero) .eyebrow::after{
    content:'';
    flex:1;
    height:1px;
    max-width:52px;
    background:linear-gradient(to right, var(--hairline), transparent);
  }
  .fluxo .eyebrow::after{
    background:linear-gradient(to right, var(--d-line-forte), transparent) !important;
  }

  /* respiro maior entre secoes, evita a sensacao de "amontoado" */
  main > section:not(.hero):not(.fluxo){ padding-top:calc(var(--s-section) * 1.06); }

  @media(max-width:767px){
    .diagrama{ margin-top:30px; }
    .fluxo-legenda{ gap:10px 18px; }
  }

  @media(hover:none), (pointer:coarse){
    .modality-card::before{ display:none; }
  }

  @media(prefers-reduced-motion:reduce){
    .fluxo.is-ativo .dg-pulso,
    .fluxo.is-ativo .dg-halo,
    .fluxo.is-ativo .dg-ponto{ animation:none !important; }
    .dg-pulso{ opacity:.55; stroke-dashoffset:0; stroke-dasharray:none; }
    .modality-card:hover::before{ animation:none; }
  }

  /* ============================================================
     V3 -- O CAPITULO ESCURO
     Estende a linguagem da secao de fluxo para "Como funciona"
     e para o fechamento, criando um bloco escuro com comeco,
     meio e fim, e devolvendo a pagina ao claro no meio.
     ============================================================ */

  /* ---------- base escura reutilizavel ---------- */
  .escuro{
    position:relative;
    background:var(--d-bg);
    color:var(--d-text);
    overflow:clip;
    isolation:isolate;
    border-bottom:0;
  }
  .escuro h2{ color:var(--d-text); }
  .escuro .eyebrow{ color:var(--d-muted); }
  main > section.escuro .eyebrow::before{
    color:var(--accent);
    border-right-color:var(--d-line-forte);
  }
  main > section.escuro .eyebrow::after{
    background:linear-gradient(to right, var(--d-line-forte), transparent) !important;
  }
  .escuro-malha{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 82% 74% at 50% 45%, #000 18%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 82% 74% at 50% 45%, #000 18%, transparent 80%);
  }
  .escuro .wrap{ position:relative; z-index:1; }

  /* a secao de fluxo agora abre o capitulo; nao repete a emenda */
  .fluxo{ border-bottom:0; }

  /* ---------- COMO FUNCIONA: esteira tecnica ---------- */
  #como-funciona.escuro{ padding-top:clamp(56px,7vw,96px); }

  #como-funciona.escuro .steps{
    position:relative;
    margin-top:clamp(38px,5vw,58px);
  }

  /* trilho que atravessa as tres etapas */
  #como-funciona.escuro .steps::before{
    content:'';
    position:absolute;
    left:0; right:0; top:26px;
    height:1px;
    background:var(--d-line);
  }
  #como-funciona.escuro .steps::after{
    content:'';
    position:absolute;
    left:0; top:26px;
    height:1px;
    width:var(--percorrido,0%);
    background:linear-gradient(to right, var(--accent), rgba(184,217,74,.35));
    box-shadow:0 0 10px rgba(184,217,74,.55);
    transition:width 1.6s cubic-bezier(.16,1,.3,1);
  }
  @media(max-width:767px){
    #como-funciona.escuro .steps::before,
    #como-funciona.escuro .steps::after{ display:none; }
  }

  #como-funciona.escuro .step{
    position:relative;
    padding-top:64px;
    background:transparent;
    border:0;
  }

  /* no da etapa sobre o trilho */
  #como-funciona.escuro .step-number{
    position:absolute;
    top:0; left:0;
    width:53px; height:53px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--d-bg);
    border:1px solid var(--d-line-forte);
    color:var(--d-muted);
    font-family:var(--mono);
    font-size:14px;
    font-weight:500;
    transition:color .55s ease, border-color .55s ease, box-shadow .55s ease, background-color .55s ease;
  }
  #como-funciona.escuro .step.acesa .step-number{
    color:var(--d-bg);
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 0 6px rgba(184,217,74,.12), 0 0 26px rgba(184,217,74,.42);
  }

  #como-funciona.escuro .step h3{
    color:var(--d-text);
    font-size:1.18rem;
    margin-bottom:12px;
  }
  #como-funciona.escuro .step p{ color:var(--d-muted); line-height:1.65; }

  /* rotulo tecnico por etapa */
  #como-funciona.escuro .step::after{
    content:attr(data-fase);
    position:absolute;
    top:19px; left:70px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-disabled);
    white-space:nowrap;
  }

  #como-funciona.escuro .steps-remate{
    margin-top:44px;
    padding-top:24px;
    border-top:1px solid var(--d-line);
    max-width:620px;
    font-size:15px;
    line-height:1.65;
    color:#AEB6BF;
  }
  #como-funciona.escuro .steps-remate b{ color:var(--d-text); font-weight:600; }

  /* emenda de saida: devolve a pagina ao claro sem corte seco */
  .escuro-saida{
    position:relative;
    height:0;
  }
  #como-funciona.escuro::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:150px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.05));
    width:100% !important;
  }

  /* ---------- FECHAMENTO ESCURO ---------- */
  .cta-final.escuro{
    padding-top:clamp(84px,10vw,132px);
    padding-bottom:clamp(84px,10vw,132px);
    text-align:center;
  }
  .cta-final.escuro .ruler-strip{
    opacity:.62;
    filter:none;
    margin-bottom:52px;
  }
  .cta-final.escuro .eyebrow{
    justify-content:center;
    color:var(--accent);
  }
  .cta-final.escuro .eyebrow::after{ display:none; }
  .cta-final.escuro h2{
    font-size:clamp(2.1rem, 4.6vw, 3.5rem);
    line-height:1.04;
    letter-spacing:-0.04em;
    max-width:15ch;
    margin:0 auto 14px;
  }
  .cta-final.escuro .cta-apoio{
    max-width:52ch;
    margin:0 auto 36px;
    font-size:var(--t-lead);
    line-height:1.6;
    color:var(--d-muted);
  }
  /* botao invertido: o unico verde solido do site inteiro */
  .cta-final.escuro .btn{
    background:var(--accent);
    color:#10160A;
    border-color:var(--accent);
    font-weight:600;
  }
  .cta-final.escuro .btn::before{ background:#fff; }
  .cta-final.escuro .btn:hover{ color:#10160A; }

  .cta-final.escuro .tagline{
    margin-top:44px;
    color:var(--d-muted);
  }
  .cta-final.escuro .tagline .dot{ color:var(--accent); }

  /* brilho central que responde ao mouse (ja existia, agora no escuro) */
  .cta-final.escuro::before{
    background:radial-gradient(560px circle at var(--fx,50%) var(--fy,50%), rgba(184,217,74,.20), transparent 64%);
  }
  /* halo permanente por tras do titulo */
  .cta-brilho{
    position:absolute;
    left:50%; top:38%;
    width:720px; height:340px;
    margin-left:-360px;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(184,217,74,.14), transparent 70%);
    filter:blur(56px);
  }

  /* rodape acompanha o fechamento escuro */
  footer{
    background:var(--d-bg);
    color:var(--d-muted);
    border-top:1px solid var(--d-line);
  }
  footer a{ color:#C9D0D8; }
  footer .footer-message{ color:#DDE2E7; }
  footer .footer-copy{ color:#9AA3AD; }
  footer .footer-links a{ color:#C9D0D8; }
  footer .footer-inner{ border-top-color:var(--d-line) !important; }
  footer a:hover{ color:var(--accent); }

  @media(prefers-reduced-motion:reduce){
    #como-funciona.escuro .steps::after{ transition:none; }
    #como-funciona.escuro .step-number{ transition:none; }
  }

  /* ============================================================
     V4 -- ABERTURA ESCURA
     O video ja tem fundo preto: sobre um hero escuro ele deixa
     de ser uma caixa e passa a fazer parte da pagina. A luz
     verde vaza do painel do robo para o fundo, e a secao
     dissolve em branco antes da fita.
     ============================================================ */

  .hero{
    background:var(--d-bg);
    color:var(--d-text);
    padding-top:0;
    padding-bottom:clamp(96px,11vw,150px);
  }

  /* malha tecnica clara sobre o preto */
  .hero::before{
    background-image:
      linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px) !important;
    background-size:70px 70px !important;
    mask-image:radial-gradient(ellipse 76% 66% at 46% 40%, #000 24%, transparent 80%) !important;
    -webkit-mask-image:radial-gradient(ellipse 76% 66% at 46% 40%, #000 24%, transparent 80%) !important;
  }

  /* aurora mais quente e mais presente no escuro */
  .hero .aurora{ opacity:.85; height:760px; }
  .hero .aurora span:nth-child(1){
    background:radial-gradient(circle at 30% 30%, rgba(184,217,74,.34), transparent 66%);
  }
  .hero .aurora span:nth-child(2){
    background:radial-gradient(circle at 60% 40%, rgba(120,170,255,.16), transparent 64%);
  }
  .hero .aurora span:nth-child(3){
    background:radial-gradient(circle at 50% 50%, rgba(167,198,62,.24), transparent 68%);
  }

  /* Regua do topo. NAO inverter: o traco original ja e cinza-claro
     (#A9B0B8), ideal sobre o preto. Invertido virava cinza-escuro
     e sumia. Aqui so aumentamos a presenca. */
  .hero .ruler-strip{
    filter:none;
    opacity:.72;
    margin-top:0;
    margin-bottom:46px;
  }
  /* a margem da regua virou padding do hero: como filho direto,
     ela colapsava para fora e abria uma faixa branca acima */
  .hero{ padding-top:36px; }
  .hero .ruler-strip::after{
    filter:none;
    background:linear-gradient(to right, rgba(184,217,74,.30), rgba(184,217,74,.08));
  }

  /* ---------- tipografia no escuro ---------- */
  .hero-preheader{ color:#9BA4AE; }
  .hero-preheader::before{
    box-shadow:0 0 0 3px rgba(184,217,74,.22), 0 0 14px rgba(184,217,74,.85);
  }

  .hero h1{ color:var(--d-text); }
  /* o gradiente vai no span que realmente contem o texto:
     aplicado no h1, os filhos herdam o preenchimento
     transparente sem herdar o gradiente e somem */
  .hero-titulo .linha > span{
    background:linear-gradient(180deg, #FFFFFF 22%, #C3CAD3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .hero p{ color:#A6AEB8; }

  p.hero-differentiator{
    border-left-color:rgba(255,255,255,.16);
    color:#CBD2DA;
  }

  p.hero-note{ color:#7E8791; }
  .hero-note .icon{ color:#7E8791; }

  /* ---------- botao principal: verde solido ---------- */
  .hero .btn{
    background:var(--accent);
    color:#10160A;
    border-color:var(--accent);
    font-weight:600;
    box-shadow:0 0 0 0 rgba(184,217,74,.45);
    animation:pulsoCta 3.6s ease-out infinite;
  }
  .hero .btn::before{ background:#FFFFFF; }
  .hero .btn:hover{ color:#10160A; animation:none; }
  @keyframes pulsoCta{
    0%{ box-shadow:0 0 0 0 rgba(184,217,74,.34); }
    70%{ box-shadow:0 0 0 16px rgba(184,217,74,0); }
    100%{ box-shadow:0 0 0 0 rgba(184,217,74,0); }
  }

  /* ---------- o video se funde ao fundo ---------- */
  .robo-palco .hero-video{
    border-radius:14px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.07),
      0 30px 80px -30px rgba(0,0,0,.9),
      0 0 70px -12px rgba(184,217,74,.16);
  }
  .hero-visual:hover .robo-palco .hero-video{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12),
      0 36px 92px -30px rgba(0,0,0,.95),
      0 0 96px -10px rgba(184,217,74,.30);
  }
  /* luz que vaza do painel para o fundo */
  .robo-palco::after{
    content:'';
    position:absolute;
    inset:12% -6% -14%;
    z-index:-2;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 60%, rgba(184,217,74,.20), transparent 66%);
    filter:blur(46px);
  }
  .robo-mira i{ border-color:rgba(184,217,74,.75); opacity:.55; }
  .robo-hud{ color:#7E8791; }
  .robo-hud b{ color:var(--accent); }

  /* ---------- cabecalho transparente sobre o hero ---------- */
  /* o cabecalho fica ACIMA do hero, nao sobre ele: precisa
     pintar o proprio fundo escuro, senao mostra o branco do
     body e o logo invertido some */
  header:not(.is-condensed){
    background:var(--d-bg);
    border-bottom-color:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  header:not(.is-condensed) .logo-img{
    filter:brightness(0) invert(1);
  }
  header:not(.is-condensed) .header-cta{
    background:transparent;
    color:#FFFFFF;
    border:1px solid rgba(255,255,255,.34);
  }
  header:not(.is-condensed) .header-cta::before{ background:#FFFFFF; }
  header:not(.is-condensed) .header-cta:hover{ color:#0B0D0F; border-color:#FFFFFF; }

  /* ---------- dissolve para o claro ---------- */
  .hero-emenda{
    position:absolute;
    left:0; right:0; bottom:0;
    height:190px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(11,13,15,0) 0%,
      rgba(11,13,15,.55) 42%,
      rgba(232,235,238,.55) 84%,
      #F7F8FA 100%);
  }
  .hero .wrap{ position:relative; z-index:1; }

  /* ---------- convite para rolar ---------- */
  .hero-rolar{
    position:absolute;
    left:50%;
    bottom:52px;
    z-index:2;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.19em;
    text-transform:uppercase;
    color:#8D959F;
    pointer-events:none;
  }
  .hero-rolar i{
    display:block;
    width:1px;
    height:46px;
    background:linear-gradient(to bottom, rgba(184,217,74,.85), transparent);
    animation:descer 2.4s cubic-bezier(.65,0,.35,1) infinite;
    transform-origin:top;
  }
  @keyframes descer{
    0%{ transform:scaleY(0); opacity:0; }
    35%{ transform:scaleY(1); opacity:1; }
    100%{ transform:scaleY(1) translateY(46px); opacity:0; }
  }

  @media(max-width:900px){
    .hero-rolar{ display:none; }
    .hero-emenda{ height:130px; }
  }

  @media(prefers-reduced-motion:reduce){
    .hero .btn{ animation:none !important; }
    .hero-rolar i{ animation:none; opacity:.6; }
  }

  /* ============================================================
     V5 -- ESCALA PARA TELAS GRANDES
     Ate aqui tudo travava em 1140px de largura e no teto dos
     clamps. Em monitores acima de ~1500px isso lia como
     "site pequeno no meio da tela". Abaixo, a escala volta a
     crescer com o monitor, em dois degraus.
     Nada muda abaixo de 1500px: o desenho atual e preservado.
     ============================================================ */

  @media(min-width:1500px){
    :root{
      --max-width:1300px;
      --t-display: clamp(4.6rem, 4.9vw, 5.5rem);
      --t-h2:      clamp(3rem, 3.15vw, 3.6rem);
      --t-h3:      clamp(1.4rem, 1.3vw, 1.58rem);
      --t-lead:    clamp(1.18rem, 1.08vw, 1.3rem);
      --s-section: clamp(128px, 8.4vw, 172px);
    }
    .wrap{ padding:0 32px; }

    /* corpo de texto acompanha */
    .problem-card p, .benefit-card p, .scope-card p, .step p,
    .modality-desc, .about-point p, .modality-list li,
    .scope-list li, .faq-resposta p, .problem-intro,
    .modalidades-subtitle, .modalidades-context, .problem-close{
      font-size:16.4px;
      line-height:1.66;
    }
    .fluxo-intro, .fluxo-remate, .steps-remate, .cta-apoio{ font-size:16.6px; }
    p.hero-differentiator{ font-size:16px; }
    p.hero-note{ font-size:13.4px; }
    .eyebrow, .hero-preheader{ font-size:12.6px; }
    .fita-item{ font-size:13px; padding:0 32px; }
    .btn{ font-size:15.4px; padding:15px 30px; }
    .step-number{ font-size:15px; }

    /* o robo cresce junto, senao vira selo no canto */
    .hero-video, .robo-palco{ max-width:660px; }
    .hero-visual{ perspective:1300px; }

    /* o diagrama ganha respiro em vez de ficar espremido */
    .diagrama svg{ min-width:880px; }
  }

  @media(min-width:1800px){
    :root{
      --max-width:1460px;
      --t-display: clamp(5.5rem, 4.5vw, 6.3rem);
      --t-h2:      clamp(3.6rem, 2.95vw, 4.1rem);
      --t-h3:      clamp(1.58rem, 1.2vw, 1.74rem);
      --t-lead:    clamp(1.3rem, 1.02vw, 1.44rem);
      --s-section: clamp(150px, 8vw, 196px);
    }
    .wrap{ padding:0 40px; }

    .problem-card p, .benefit-card p, .scope-card p, .step p,
    .modality-desc, .about-point p, .modality-list li,
    .scope-list li, .faq-resposta p, .problem-intro,
    .modalidades-subtitle, .modalidades-context, .problem-close{
      font-size:17.6px;
    }
    .fluxo-intro, .fluxo-remate, .steps-remate, .cta-apoio{ font-size:17.8px; }
    p.hero-differentiator{ font-size:17px; }
    p.hero-note{ font-size:14.4px; }
    .eyebrow, .hero-preheader{ font-size:13.4px; }
    .fita-item{ font-size:14px; padding:0 38px; }
    .btn{ font-size:16.4px; padding:17px 34px; }
    .step-number{ font-size:16px; width:58px; height:58px; }

    .hero-video, .robo-palco{ max-width:760px; }
    .diagrama svg{ min-width:1000px; }

    /* o texto do hero nao deve virar uma linha longa demais */
    .hero-inner{ max-width:760px; }
    .hero p{ max-width:600px; }
    p.hero-differentiator{ max-width:580px; }
  }

  /* telas muito largas: para de crescer, mas centraliza bem */
  @media(min-width:2300px){
    :root{
      --max-width:1560px;
      --t-display: clamp(6.3rem, 3.6vw, 7rem);
      --t-h2:      clamp(4.1rem, 2.4vw, 4.5rem);
    }
    .hero-video, .robo-palco{ max-width:820px; }
  }

  /* ============================================================
     V6 -- ACABAMENTO PROFISSIONAL
     Acessibilidade de teclado, atalho de navegacao e detalhes
     que separam um site bonito de um site terminado.
     ============================================================ */

  /* ---------- 1. Atalho para o conteudo ----------
     Primeiro elemento focavel da pagina. Invisivel ate receber
     foco: quem navega por teclado ou leitor de tela pula o
     cabecalho em vez de tabular por ele em toda visita. */
  .pular{
    position:absolute;
    left:16px; top:-70px;
    z-index:100;
    display:inline-flex;
    align-items:center;
    padding:13px 22px;
    border-radius:8px;
    background:var(--accent);
    color:#10160A;
    font-family:'Sora',sans-serif;
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
    transition:top .22s cubic-bezier(.16,1,.3,1);
  }
  .pular:focus{ top:14px; }

  /* ---------- 2. Foco de teclado visivel ----------
     O site tinha praticamente nenhum indicador de foco: quem
     navega por Tab ficava sem saber onde estava. :focus-visible
     nao aparece no clique de mouse, so na navegacao por teclado. */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
  }
  /* no escuro o verde ja contrasta; no claro reforcamos a borda */
  .escuro a:focus-visible,
  .escuro button:focus-visible,
  .hero a:focus-visible,
  .hero button:focus-visible,
  .cta-final a:focus-visible,
  .cta-final button:focus-visible{
    outline-color:var(--accent);
    box-shadow:0 0 0 5px rgba(184,217,74,.22);
  }
  /* o navegador ja remove o outline no clique; garantimos o padrao */
  :focus:not(:focus-visible){ outline:none; }

  /* summary do FAQ: alvo de foco claro */
  .faq-item summary:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
  }

  /* ---------- 3. Selecao de texto na cor da marca ---------- */
  ::selection{ background:rgba(184,217,74,.28); color:inherit; }

  /* ---------- 4. Reserva de espaco para midia ----------
     Com width/height no HTML o navegador ja reserva a area certa,
     mas a proporcao explicita evita salto se o CSS mudar a largura. */
  .hero-video{ aspect-ratio:1112 / 834; }
  .modality-image{ aspect-ratio:auto; }

  /* ---------- 5. Impressao ----------
     Um orcamento impresso ou salvo em PDF nao deve sair preto. */
  @media print{
    .grain, .aurora, .fita, .hero-rolar, .hero-emenda,
    .mobile-cta-bar, .progresso, .robo-mira, .robo-hud,
    .escuro-malha, .fluxo-brilho, .cta-brilho{ display:none !important; }
    header{ position:static !important; }
    body, .hero, .escuro, .fluxo, .cta-final, footer{
      background:#fff !important;
      color:#000 !important;
    }
    .hero h1, .escuro h2, .hero-titulo .linha > span{
      color:#000 !important;
      -webkit-text-fill-color:#000 !important;
      background:none !important;
    }
    .escuro p, .escuro span, footer *{ color:#222 !important; }
    header .logo-img, footer .logo-img{ filter:none !important; }
    a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; color:#555; }
    section{ break-inside:avoid; }
  }

  /* ============================================================
     V7 -- DIAGNOSTICO INTERATIVO
     Um painel escuro dentro da secao clara: le como uma
     ferramenta embutida na pagina, nao como mais um bloco de
     texto. E o unico lugar do site onde o visitante age.
     ============================================================ */

  #diagnostico{ background:var(--bg-alt); }
  .diag-intro{
    max-width:600px;
    margin-top:16px;
    font-size:var(--t-lead);
    line-height:1.6;
    color:var(--text-auxiliary);
  }

  .diag{
    position:relative;
    margin-top:clamp(34px,4.5vw,52px);
    padding:clamp(26px,3.4vw,42px);
    border-radius:18px;
    background:var(--d-bg);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 30px 70px -34px rgba(11,13,15,.55);
    overflow:hidden;
    isolation:isolate;
  }
  /* malha e brilho, mesma familia da secao de fluxo */
  .diag::before{
    content:'';
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
  }
  .diag::after{
    content:'';
    position:absolute; left:50%; top:-20%; z-index:0; pointer-events:none;
    width:620px; height:320px; margin-left:-310px;
    background:radial-gradient(ellipse at center, rgba(184,217,74,.13), transparent 70%);
    filter:blur(52px);
  }
  .diag > *{ position:relative; z-index:1; }

  /* ---------- topo: passo e barra ---------- */
  .diag-topo{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:28px;
  }
  .diag-passo{
    flex-shrink:0;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--d-muted);
  }
  .diag-barra{
    flex:1;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.10);
    overflow:hidden;
  }
  .diag-barra i{
    display:block;
    height:100%;
    width:0%;
    border-radius:2px;
    background:linear-gradient(to right, rgba(184,217,74,.5), var(--accent));
    box-shadow:0 0 10px rgba(184,217,74,.5);
    transition:width .5s cubic-bezier(.16,1,.3,1);
  }

  /* ---------- pergunta ---------- */
  .diag-palco{ min-height:290px; }

  .diag-pergunta{
    font-size:clamp(1.24rem,2.1vw,1.65rem);
    font-weight:600;
    line-height:1.26;
    letter-spacing:-.02em;
    color:var(--d-text);
    margin-bottom:24px;
    max-width:22ch;
  }

  .diag-opcoes{
    display:grid;
    gap:10px;
  }
  @media(min-width:760px){
    .diag-opcoes{ grid-template-columns:repeat(3,1fr); gap:12px; }
  }

  .diag-op{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:18px 18px 20px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
    color:var(--d-text);
    font-family:inherit;
    font-size:15px;
    font-weight:500;
    line-height:1.4;
    text-align:left;
    cursor:pointer;
    transition:border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .diag-op:hover{
    border-color:rgba(184,217,74,.55);
    background:rgba(184,217,74,.07);
    transform:translateY(-2px);
  }
  .diag-op b{
    font-family:var(--mono);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--accent);
  }

  /* ---------- resultado ---------- */
  .diag-selo{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid rgba(184,217,74,.4);
    background:rgba(184,217,74,.10);
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:18px;
  }
  .diag-titulo{
    font-size:clamp(1.5rem,2.7vw,2.15rem);
    font-weight:700;
    line-height:1.14;
    letter-spacing:-.03em;
    color:var(--d-text);
    margin-bottom:14px;
    max-width:20ch;
  }
  .diag-texto{
    max-width:62ch;
    font-size:15.6px;
    line-height:1.68;
    color:#A8B0BA;
    margin-bottom:22px;
  }
  .diag-texto b{ color:var(--d-text); font-weight:600; }

  .diag-sinais{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:28px;
  }
  .diag-sinais span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.03);
    font-size:13px;
    color:#C2C9D1;
  }
  .diag-sinais span::before{
    content:'';
    width:5px; height:5px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .diag-acoes{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .diag-refazer{
    background:none;
    border:0;
    padding:8px 2px;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--d-muted);
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.2);
    transition:color .25s ease, border-color .25s ease;
  }
  .diag-refazer:hover{ color:var(--d-text); border-color:var(--accent); }

  .diag .btn{
    background:var(--accent);
    color:#10160A;
    border-color:var(--accent);
    font-weight:600;
  }
  .diag .btn::before{ background:#fff; }
  .diag .btn:hover{ color:#10160A; }

  /* ---------- rodape do painel ---------- */
  .diag-rodape{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:26px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .diag-voltar{
    background:none;
    border:0;
    padding:6px 2px;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--d-muted);
    cursor:pointer;
    transition:color .25s ease;
  }
  .diag-voltar:hover{ color:var(--d-text); }
  .diag-nota{
    margin-left:auto;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.06em;
    color:#8D959F;
  }
  .diag-sem-js{ color:#A8B0BA; font-size:15px; }

  /* ---------- entrada suave de cada tela ---------- */
  .diag-tela{ animation:diagEntra .42s cubic-bezier(.16,1,.3,1) both; }
  @keyframes diagEntra{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media(max-width:759px){
    .diag-pergunta{ max-width:none; }
    .diag-nota{ display:none; }
  }

  @media(prefers-reduced-motion:reduce){
    .diag-tela{ animation:none; }
    .diag-op:hover{ transform:none; }
    .diag-barra i{ transition:none; }
  }

  /* ============================================================
     V8 -- PAGINAS INTERNAS DE SERVICO
     O site deixou de ter uma pagina so. Cada servico ganha sua
     propria porta de entrada na busca, reaproveitando o mesmo
     sistema visual.
     ============================================================ */

  .topo-interno{
    position:relative;
    background:var(--d-bg);
    color:var(--d-text);
    padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px);
    overflow:clip;
    isolation:isolate;
    border-bottom:0;
  }
  .topo-interno .escuro-malha{ z-index:0; }
  .topo-interno .wrap{ position:relative; z-index:1; }
  .topo-interno::after{
    content:'';
    position:absolute; left:50%; top:-10%; z-index:0; pointer-events:none;
    width:760px; height:400px; margin-left:-380px;
    background:radial-gradient(ellipse at center, rgba(184,217,74,.15), transparent 70%);
    filter:blur(56px);
  }

  .migalha{
    display:flex; align-items:center; gap:10px;
    margin-bottom:26px;
    font-family:var(--mono); font-size:11.5px;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--d-muted);
  }
  .migalha a{ color:var(--d-muted); border-bottom:1px solid transparent; }
  .migalha a:hover{ color:var(--d-text); border-bottom-color:var(--accent); }
  .migalha span{ color:var(--accent); }

  .topo-interno h1{
    font-size:clamp(2.2rem,5vw,3.7rem);
    line-height:1.04; letter-spacing:-.038em;
    max-width:17ch; margin-bottom:20px;
    background:linear-gradient(180deg,#FFFFFF 24%,#C3CAD3 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .topo-interno .chamada{
    max-width:60ch; font-size:var(--t-lead);
    line-height:1.62; color:#A6AEB8; margin-bottom:32px;
  }
  .topo-interno .btn{
    background:var(--accent); color:#10160A;
    border-color:var(--accent); font-weight:600;
  }
  .topo-interno .btn::before{ background:#fff; }
  .topo-interno .btn:hover{ color:#10160A; }

  /* faixa de itens do servico */
  .itens{ display:grid; gap:16px; margin-top:clamp(30px,4vw,44px); }
  @media(min-width:700px){ .itens{ grid-template-columns:repeat(2,1fr); gap:20px; } }
  @media(min-width:1040px){ .itens--4{ grid-template-columns:repeat(4,1fr); } }

  .item{
    padding:26px 24px 28px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg);
  }
  .item h3{ font-size:1.06rem; margin-bottom:9px; letter-spacing:-.02em; }
  .item p{ font-size:15px; line-height:1.62; color:var(--text-auxiliary); }
  .item .rotulo{
    display:block; margin-bottom:12px;
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent-ink);
  }

  /* lista de ganhos com marca de regua */
  .ganhos{ list-style:none; display:grid; gap:14px; margin-top:26px; }
  @media(min-width:700px){ .ganhos{ grid-template-columns:1fr 1fr; gap:16px 32px; } }
  .ganhos li{
    position:relative; padding-left:26px;
    font-size:15.6px; line-height:1.6; color:var(--text-secondary);
  }
  .ganhos li::before{
    content:''; position:absolute; left:0; top:.62em;
    width:14px; height:2px; background:var(--accent);
  }

  /* bloco de fechamento das paginas internas */
  .fecho{ background:var(--bg-alt); text-align:center; }
  .fecho h2{ max-width:18ch; margin:0 auto 16px; }
  .fecho p{
    max-width:54ch; margin:0 auto 30px;
    font-size:var(--t-lead); line-height:1.6; color:var(--text-auxiliary);
  }
  .fecho .voltar{
    display:inline-block; margin-top:26px;
    font-family:var(--mono); font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-auxiliary);
    border-bottom:1px solid var(--hairline);
  }
  .fecho .voltar:hover{ color:var(--text); border-color:var(--accent); }

  /* ligacao entre paginas, na home */
  .saiba-mais{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:18px;
    font-family:var(--mono); font-size:11.5px;
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--accent-ink);
    border-bottom:1px solid rgba(84,112,14,.35);
    transition:border-color .25s ease, gap .25s ease;
  }
  .saiba-mais:hover{ border-color:var(--accent-ink); gap:12px; }

  /* ============================================================
     V9 -- ATALHO DIRETO NO MODAL
     O formulario continua sendo o caminho principal, porque e
     ele que qualifica o lead. Este bloco e a saida para quem
     tem pressa: secundario na hierarquia, mas facil de achar.
     ============================================================ */
  .orc-atalho{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:11px;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--border);
    text-align:center;
  }
  .orc-ou{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--text-disabled);
  }
  .orc-direto{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:12px 22px;
    border-radius:8px;
    border:1px solid var(--hairline);
    background:var(--bg);
    color:var(--text);
    font-family:'Sora',sans-serif;
    font-size:14.5px;
    font-weight:600;
    text-decoration:none;
    transition:border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
  }
  .orc-direto svg{ color:var(--accent-ink); flex-shrink:0; }
  .orc-direto:hover{
    border-color:var(--accent-ink);
    background:var(--bg-alt);
    transform:translateY(-1px);
  }
  .orc-direto:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }
  .orc-atalho-nota{
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-disabled);
    max-width:34ch;
  }
  @media(prefers-reduced-motion:reduce){
    .orc-direto{ transition:none; }
    .orc-direto:hover{ transform:none; }
  }