*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;font-size:16px}

  :root{
    --accent:#0E5ACA;
    --accent-glow:rgba(14,90,202,.4);
    --accent-soft:rgba(14,90,202,.12);
    --accent-fade:rgba(14,90,202,.04);
    --r:8px;
    --r-lg:14px;
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
  }

  :root[data-theme="dark"]{
    --bg:#050507;
    --bg-2:#0B0B10;
    --surface:#0F0F14;
    --surface-2:#16161D;
    --surface-3:#1D1D26;
    --border:rgba(255,255,255,.08);
    --border-2:rgba(255,255,255,.14);
    --border-3:rgba(255,255,255,.22);
    --text:#FAFAFA;
    --text-2:rgba(250,250,250,.72);
    --text-soft:rgba(250,250,250,.48);
    --text-faint:rgba(250,250,250,.22);
    --shadow:0 24px 60px rgba(0,0,0,.6);
    --code-bg:#0B0B10;
  }
  :root[data-theme="light"]{
    --bg:#FAFAFA;
    --bg-2:#F4F4F5;
    --surface:#FFFFFF;
    --surface-2:#F4F4F5;
    --surface-3:#E9E9EC;
    --border:rgba(0,0,0,.08);
    --border-2:rgba(0,0,0,.14);
    --border-3:rgba(0,0,0,.22);
    --text:#09090B;
    --text-2:rgba(9,9,11,.72);
    --text-soft:rgba(9,9,11,.48);
    --text-faint:rgba(9,9,11,.22);
    --shadow:0 24px 60px rgba(0,0,0,.08);
    --code-bg:#F4F4F5;
  }

  body{
    font-family:'Geist',sans-serif;
    font-weight:400;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    overflow-x:hidden;
    transition:background .4s ease,color .4s ease;
  }
  ::selection{background:var(--accent);color:#fff}

  a{color:inherit;text-decoration:none}
  ul{list-style:none}
  button{cursor:pointer;font:inherit;color:inherit;background:none;border:none}
  img{display:block;max-width:100%}

  .mono{font-family:'Geist Mono',monospace;font-weight:400}
  .caps{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}

  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}

  /* ─── SCROLL PROGRESS ─────────────────────────── */
  #prog{
    position:fixed;top:0;left:0;height:2px;width:0%;
    background:var(--accent);
    z-index:200;transition:width .1s linear;
    box-shadow:0 0 12px var(--accent-glow);
  }

  /* ─── NAV ─────────────────────────────────────── */
  .nav{
    position:fixed;top:0;left:0;right:0;
    z-index:100;padding:16px 0;
    transition:background .25s ease,backdrop-filter .25s,border-color .25s;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    background:color-mix(in oklab, var(--bg) 80%, transparent);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-color:var(--border);
  }
  .nav__inner{
    max-width:1280px;margin:0 auto;padding:0 32px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
  }
  .brand-symbol{
    height:26px;width:auto;display:block;
    transition:transform .3s var(--ease-spring);
  }
  .brand:hover .brand-symbol{transform:rotate(-6deg)}
  .brand-text{
    font-size:15px;font-weight:600;
    letter-spacing:-.02em;
    color:var(--text);
    line-height:1;
  }
  .brand-text-dim{
    font-weight:400;color:var(--text-2);
  }
  .brand-symbol--foot{
    height:40px;
  }
  .brand-text--foot{
    font-size:22px;letter-spacing:-.025em;
  }
  @media(max-width:680px){
    .brand-symbol{height:22px}
    .brand-text{font-size:14px}
  }
  @keyframes pulse-dots{
    0%,100%{opacity:1}
    50%{opacity:.5}
  }
  .nav__links{display:flex;gap:4px;align-items:center}
  .nav__links a{
    font-size:13px;color:var(--text-2);
    padding:8px 14px;border-radius:6px;
    transition:color .15s,background .15s;
    letter-spacing:-.005em;
  }
  .nav__links a:hover{color:var(--text);background:var(--surface-2)}

  /* ── DROPDOWN ─────────────────────────────────── */
  .nav__links li.has-dropdown{position:relative}
  .dropdown-trigger{
    font-size:13px;color:var(--text-2);
    padding:8px 12px 8px 14px;border-radius:6px;
    transition:color .15s,background .15s;
    display:inline-flex;align-items:center;gap:6px;
    letter-spacing:-.005em;cursor:pointer;
    font-family:inherit;
  }
  .dropdown-trigger svg{width:10px;height:10px;transition:transform .25s var(--ease)}
  .has-dropdown:hover .dropdown-trigger,
  .has-dropdown:focus-within .dropdown-trigger,
  .dropdown-trigger:hover{color:var(--text);background:var(--surface-2)}
  .has-dropdown:hover .dropdown-trigger svg,
  .has-dropdown:focus-within .dropdown-trigger svg{transform:rotate(180deg)}
  .dropdown-menu{
    position:absolute;top:calc(100% + 6px);left:50%;
    min-width:300px;padding:8px;
    background:var(--surface);
    border:1px solid var(--border-2);border-radius:12px;
    box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;
    transform:translate(-50%, -6px);
    transition:opacity .22s var(--ease),visibility .22s,transform .22s var(--ease);
    z-index:120;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu{
    opacity:1;visibility:visible;transform:translate(-50%, 0);
  }
  .dropdown-menu::before{
    content:"";position:absolute;top:-8px;left:0;right:0;height:8px;
  }
  .dropdown-menu a{
    padding:11px 14px;border-radius:8px;
    display:flex;flex-direction:column;gap:3px;
    transition:background .15s;position:relative;
  }
  .dropdown-menu a:hover{background:var(--surface-2)}
  .dropdown-menu a strong{
    font-size:14px;font-weight:500;color:var(--text);
    letter-spacing:-.01em;
    display:flex;align-items:center;gap:8px;
  }
  .dropdown-menu a span{
    font-size:11px;color:var(--text-soft);
    font-family:'Geist Mono',monospace;letter-spacing:.02em;
  }
  .dropdown-menu a:hover strong{color:var(--accent)}
  .dropdown-menu a:hover strong::after{
    content:"→";color:var(--accent);font-weight:400;margin-left:auto;
  }
  .nav__right{display:flex;align-items:center;gap:8px}
  .theme-btn{
    width:36px;height:36px;border-radius:6px;
    background:var(--surface-2);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,border-color .15s,transform .2s var(--ease-spring);
  }
  .theme-btn:hover{background:var(--surface-3);border-color:var(--border-2);transform:rotate(15deg)}
  .theme-btn svg{width:16px;height:16px;color:var(--text-2);transition:color .15s}
  .theme-btn:hover svg{color:var(--text)}

  .nav-toggle{
    display:none;width:36px;height:36px;border-radius:6px;
    align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--border);
    color:var(--text);transition:background .15s;
  }
  .nav-toggle:hover{background:var(--surface-3)}
  .nav-toggle svg{width:18px;height:18px}

  @media(max-width:880px){
    .nav-toggle{display:flex}
    .nav__links{
      position:absolute;top:100%;left:0;right:0;
      background:var(--surface);border-bottom:1px solid var(--border);
      flex-direction:column;align-items:flex-start;
      padding:24px 32px;gap:12px;
      display:none;
      box-shadow:0 12px 24px rgba(0,0,0,.2);
    }
    .nav.nav--open .nav__links{display:flex}
    .nav__links li.has-dropdown .dropdown-menu{
      position:static;box-shadow:none;border:none;background:transparent;
      opacity:1;visibility:visible;transform:none;padding:12px 0 0 16px;
      display:none;min-width:100%;
    }
    .nav__links li.has-dropdown.is-open .dropdown-menu{display:flex}
    #nav-cta{display:none} /* Hide the CTA inside nav on very small screens if needed, or leave it. Actually let's leave it, but hide it on <=600px */
  }
  @media(max-width:600px){
    #nav-cta{display:none}
  }

  .btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--text);color:var(--bg);
    padding:10px 20px;border-radius:8px;
    font-size:13px;font-weight:500;letter-spacing:-.005em;
    transition:transform .2s var(--ease-spring),box-shadow .25s;
    box-shadow:0 0 0 0 var(--accent-glow), inset 0 0 0 1px var(--text);
  }
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .btn-primary svg{width:13px;height:13px;transition:transform .25s var(--ease)}
  .btn-primary:hover svg{transform:translate(2px,-2px)}

  .btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--surface);color:var(--text);
    padding:10px 20px;border-radius:8px;
    font-size:13px;font-weight:500;letter-spacing:-.005em;
    border:1px solid var(--border-2);
    transition:background .15s,border-color .15s,transform .2s var(--ease-spring);
  }
  .btn-ghost:hover{background:var(--surface-2);border-color:var(--border-3);transform:translateY(-1px)}

  /* ─── HERO ────────────────────────────────────── */
  .hero{
    position:relative;
    padding:140px 0 80px;
    overflow:hidden;
  }
  .halo{
    position:absolute;top:-200px;left:50%;
    width:1100px;height:900px;
    transform:translateX(-50%);
    background:
      radial-gradient(ellipse 60% 50% at 50% 50%, var(--accent-glow), transparent 70%),
      radial-gradient(ellipse 30% 40% at 30% 60%, rgba(120,200,255,.15), transparent 70%);
    filter:blur(60px);
    pointer-events:none;
    z-index:0;
    opacity:.85;
    transition:transform .8s var(--ease);
  }
  :root[data-theme="light"] .halo{opacity:.35;mix-blend-mode:multiply}

  .grid-bg{
    position:absolute;inset:0;z-index:0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 80%);
    opacity:.5;
    pointer-events:none;
  }

  .hero__inner{
    max-width:1280px;margin:0 auto;padding:0 32px;
    position:relative;z-index:1;
  }
  .btn-hero-primary{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--accent);color:#fff;
    padding:12px 24px;border-radius:8px;
    font-size:14px;font-weight:500;letter-spacing:-.005em;
    transition:transform .2s var(--ease-spring),box-shadow .25s;
    box-shadow:0 0 0 0 var(--accent-glow);
  }
  .btn-hero-primary:hover{transform:translateY(-1px);box-shadow:0 8px 32px var(--accent-glow)}
  .btn-hero-primary svg{width:13px;height:13px;transition:transform .25s var(--ease)}
  .btn-hero-primary:hover svg{transform:translate(2px,-2px)}

  .btn-hero-ghost{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;color:var(--text-2);
    padding:10px 18px;border-radius:8px;
    font-size:13px;font-weight:500;letter-spacing:-.005em;
    border:1px solid var(--border-2);
    transition:background .15s,border-color .15s,transform .2s var(--ease-spring);
  }
  .btn-hero-ghost:hover{background:var(--surface);border-color:var(--border-3);transform:translateY(-1px)}

  /* ─── MID CTA ────────────────────────────────── */
  .mid-cta{padding:48px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)}
  .mid-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .mid-cta__text h2{font-size:clamp(22px,2.5vw,30px);font-weight:600;letter-spacing:-.025em;margin-bottom:4px}
  .mid-cta__text p{font-size:15px;color:var(--text-2)}
  .mid-cta__actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}

  .hero__pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px;border-radius:100px;
    background:var(--surface);border:1px solid var(--border-2);
    font-size:12px;color:var(--text-2);
    margin-top:20px;margin-bottom:0;
    box-shadow:var(--shadow);
    animation:pill-in .8s var(--ease) both;
  }
  .hero__pill .dot{
    width:6px;height:6px;border-radius:50%;background:#22C55E;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);
    animation:dot-pulse 2s ease-in-out infinite;
  }
  @keyframes dot-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
    50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
  }
  @keyframes pill-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .hero h1{
    font-size:clamp(48px,8vw,128px);
    font-weight:600;
    line-height:.92;
    letter-spacing:-.045em;
    max-width:1100px;
    margin-bottom:28px;
    text-wrap:balance;
  }
  .hero h1 .row{display:block;overflow:hidden}
  .hero h1 .row span{
    display:inline-block;
    animation:rise 1s var(--ease) both;
  }
  .hero h1 .row:nth-child(2) span{animation-delay:.08s}
  .hero h1 .row:nth-child(3) span{animation-delay:.16s}
  @keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}

  .hero h1 .dots{
    color:var(--accent);
    letter-spacing:-.1em;
    display:inline-block;
    transform:translateY(-.05em);
  }
  .hero h1 .soft{color:var(--text-soft)}

  .hero__sub{
    font-size:19px;color:var(--text-2);
    max-width:580px;line-height:1.55;
    margin-bottom:40px;
    text-wrap:pretty;
    animation:fade-up .9s .35s var(--ease) both;
  }
  @keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .hero__actions{
    display:flex;gap:10px;flex-wrap:wrap;
    animation:fade-up .9s .45s var(--ease) both;
  }

  /* ─── DASHBOARD MOCKUP ────────────────────────── */
  .mockup{
    position:relative;
    border-radius:var(--r-lg);
    background:var(--surface);
    border:1px solid var(--border-2);
    box-shadow:var(--shadow), 0 0 0 0 var(--accent-glow);
    overflow:hidden;
    animation:fade-up 1.2s .6s var(--ease) both;
    transition:transform .5s var(--ease);
  }
  .mockup::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(180deg, transparent 70%, var(--accent-soft));
    opacity:0;transition:opacity .5s;
    pointer-events:none;
  }
  .mockup:hover::before{opacity:.6}
  .mockup__chrome{
    display:flex;align-items:center;gap:8px;
    padding:12px 16px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
  }
  .mockup__dots{display:flex;gap:6px}
  .mockup__dots i{width:10px;height:10px;border-radius:50%;background:var(--border-3);display:block}
  .mockup__url{
    flex:1;margin-left:24px;
    background:var(--surface);border:1px solid var(--border);
    padding:5px 14px;border-radius:6px;
    font-family:'Geist Mono',monospace;font-size:12px;
    color:var(--text-soft);max-width:320px;
    display:flex;align-items:center;gap:8px;
  }
  .mockup__url::before{
    content:"";width:8px;height:8px;border-radius:50%;background:#22C55E;
  }

  .mockup__body{
    display:grid;grid-template-columns:200px 1fr;
    min-height:380px;
  }
  .mockup__side{
    border-right:1px solid var(--border);
    padding:18px 12px;
    display:flex;flex-direction:column;gap:4px;
  }
  .mockup__brand{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px;margin-bottom:14px;
    font-size:13px;font-weight:600;letter-spacing:-.01em;
  }
  .mockup__brand .b-dot{
    width:18px;height:18px;border-radius:5px;
    background:linear-gradient(135deg,var(--accent),color-mix(in oklab,var(--accent) 50%, white));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:11px;font-family:'Geist Mono',monospace;
  }
  .mockup__nav-item{
    display:flex;align-items:center;gap:10px;
    padding:7px 10px;border-radius:6px;
    font-size:12.5px;color:var(--text-2);
    cursor:default;
  }
  .mockup__nav-item.active{background:var(--surface-3);color:var(--text);font-weight:500}
  .mockup__nav-item .ico{width:14px;height:14px;color:var(--text-soft);flex-shrink:0}
  .mockup__nav-item.active .ico{color:var(--accent)}

  .mockup__main{padding:20px 22px;display:flex;flex-direction:column;gap:18px}
  .mockup__head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .mockup__title{
    font-size:18px;font-weight:600;letter-spacing:-.015em;
  }
  .mockup__title-sub{font-size:12px;color:var(--text-soft);margin-top:2px}
  .mockup__pill{
    background:var(--accent-soft);color:var(--accent);
    border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    padding:4px 10px;border-radius:6px;
    font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;
  }

  .mockup__kpis{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  }
  .kpi{
    background:var(--surface-2);border:1px solid var(--border);
    padding:14px 16px;border-radius:8px;
  }
  .kpi__lbl{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);letter-spacing:.04em;text-transform:uppercase;
    margin-bottom:6px;
  }
  .kpi__val{font-size:22px;font-weight:600;letter-spacing:-.025em}
  .kpi__delta{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:#22C55E;margin-left:6px;
  }
  .kpi__delta.neg{color:#F87171}

  .mockup__chart{
    background:var(--surface-2);border:1px solid var(--border);
    padding:14px 16px;border-radius:8px;
    flex:1;min-height:110px;
    position:relative;display:flex;align-items:flex-end;gap:6px;
  }
  .mockup__chart::before{
    content:"Pedidos · últimos 14 dias";position:absolute;
    top:10px;left:16px;
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);letter-spacing:.04em;text-transform:uppercase;
  }
  .bar{
    flex:1;background:var(--accent-soft);border:1px solid color-mix(in oklab, var(--accent) 25%, transparent);
    border-radius:3px 3px 0 0;
    transition:height 1s var(--ease);
    margin-top:32px;
  }
  .bar:nth-child(odd){background:color-mix(in oklab, var(--accent) 28%, transparent)}
  .bar.peak{background:var(--accent)}

  /* ─── LOGOS / TRUST STRIP ─────────────────────── */
  .strip{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:28px 0;
    background:var(--bg-2);
  }
  .strip__inner{
    max-width:1280px;margin:0 auto;padding:0 32px;
    display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  }
  .strip__lbl{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;
  }
  .strip__items{
    display:flex;gap:48px;flex-wrap:wrap;
  }
  .strip__items span{
    font-size:14px;color:var(--text-2);font-weight:500;
    letter-spacing:-.005em;display:flex;align-items:center;gap:8px;
  }
  .strip__items .ico{
    width:14px;height:14px;color:var(--accent);
  }

  .strip--logos{border-bottom:none;background:var(--bg);}
  .strip--logos .strip__inner{
    max-width:1280px;margin:0 auto;padding:0 32px;
    display:flex;align-items:center;gap:0;flex-wrap:nowrap;
  }
  .strip--logos .strip__lbl{
    padding-right:32px;flex-shrink:0;
    border-right:1px solid var(--border);
    white-space:nowrap;
  }
  /* container que recorta o marquee */
  .logos-marquee{
    flex:1;overflow:hidden;min-width:0;
  }

  @keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  .strip__logos{
    display:flex;align-items:center;
    width:max-content;
    animation:marquee 22s linear infinite;
  }
  .strip__logos:hover{animation-play-state:paused;}
  .client-logo{
    display:flex;align-items:center;justify-content:center;
    padding:0 40px;
    flex-shrink:0;
  }
  .client-logo img{
    height:26px;width:auto;max-width:120px;
    display:block;
    filter:brightness(0) invert(1);opacity:.45;
    transition:opacity .2s;
    object-fit:contain;
  }
  .client-logo--sq img{height:auto;width:48px;max-width:48px;}
  .client-logo:hover img{opacity:.85;}

  /* ─── SECTION ─────────────────────────────────── */
  section{position:relative}
  .sec-head{
    display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
    margin-bottom:48px;
  }
  .sec-head__l span.caps{
    color:var(--accent);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;
  }
  .sec-head__l span.caps::before{
    content:"";display:inline-block;width:18px;height:1px;background:var(--accent);
  }
  .sec-head h2{
    font-size:clamp(36px,4.8vw,68px);
    font-weight:600;line-height:1.0;letter-spacing:-.035em;
    text-wrap:balance;
  }
  .sec-head h2 .soft{color:var(--text-soft)}
  .sec-head__r{
    font-size:15px;color:var(--text-2);
    max-width:340px;line-height:1.6;text-align:right;text-wrap:pretty;
  }

  /* ─── SERVICES ────────────────────────────────── */
  .services{padding:140px 0 100px}
  .svc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  }
  .svc{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:0;
    overflow:hidden;
    transition:transform .35s var(--ease),border-color .25s,background .25s;
    display:flex;flex-direction:column;
    min-height:520px;
  }
  .svc:hover{
    transform:translateY(-4px);
    border-color:var(--border-2);
    background:var(--surface-2);
  }
  .svc__visual{
    height:200px;
    position:relative;
    background:var(--bg-2);
    border-bottom:1px solid var(--border);
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .svc:hover .svc__visual{background:var(--surface-3)}

  /* Visual 1: browser mockup */
  .browser-mock{background:#0A0A0E;border:1px solid var(--border-2);border-radius:8px;overflow:hidden;width:100%}
  .browser-mock__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#16161D;border-bottom:1px solid var(--border)}
  .browser-mock__bar i{width:8px;height:8px;border-radius:50%;background:#3a3a44;display:block;flex-shrink:0}
  .browser-mock__bar i:nth-child(1){background:#FF5F57}
  .browser-mock__bar i:nth-child(2){background:#FEBC2E}
  .browser-mock__bar i:nth-child(3){background:#28C840}
  .browser-mock__url{font-family:'Geist Mono',monospace;font-size:10px;color:#666;margin-left:8px}
  .browser-mock__body{padding:16px;display:flex;flex-direction:column;gap:12px}
  .browser-mock__hero{height:48px;border-radius:4px;background:linear-gradient(90deg,var(--accent-soft),var(--surface-2))}
  .browser-mock__metrics{display:flex;gap:8px}
  .bm-metric{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
  .bm-metric__val{font-size:13px;font-weight:700;color:var(--accent);font-family:'Geist Mono',monospace}
  .bm-metric__lbl{font-size:9px;color:var(--text-soft);letter-spacing:.04em;text-transform:uppercase;text-align:center}

  /* Visual 2: window stack */
  .win-stack{
    width:100%;height:100%;
    position:relative;
    padding:24px;
    display:flex;align-items:center;justify-content:center;
  }
  .win{
    position:absolute;
    background:var(--surface-2);
    border:1px solid var(--border-2);
    border-radius:8px;
    box-shadow:var(--shadow);
    transition:transform .4s var(--ease);
  }
  .win-1{
    width:60%;height:65%;
    left:14%;top:18%;
    transform:rotate(-3deg);
  }
  .win-2{
    width:60%;height:65%;
    right:14%;top:12%;
    transform:rotate(4deg);
  }
  .win-3{
    width:50%;height:55%;
    left:25%;top:30%;
    transform:rotate(0deg);
    background:var(--surface-3);z-index:2;
  }
  .svc:hover .win-1{transform:rotate(-6deg) translate(-6px,-2px)}
  .svc:hover .win-2{transform:rotate(7deg) translate(6px,-2px)}
  .svc:hover .win-3{transform:translateY(-4px) scale(1.02)}
  .win__head{
    display:flex;gap:4px;padding:6px;border-bottom:1px solid var(--border);
  }
  .win__head i{width:6px;height:6px;border-radius:50%;background:var(--border-3);display:block}
  .win__body{
    padding:10px;display:flex;flex-direction:column;gap:5px;
  }
  .win__body div{
    height:5px;border-radius:2px;background:var(--border);width:80%;
  }
  .win__body div:nth-child(2){width:60%}
  .win__body div:nth-child(3){width:90%;background:var(--accent-soft)}
  .win__body div:nth-child(4){width:50%}

  /* Visual 3: SaaS multi-tenant grid */
  .saas-grid{
    width:100%;height:100%;padding:20px;
    display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
    gap:8px;
  }
  .saas-grid div{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:6px;
    position:relative;overflow:hidden;
    transition:background .3s,border-color .3s;
  }
  .saas-grid div::before{
    content:"";position:absolute;top:8px;left:8px;right:8px;height:3px;
    background:var(--border-2);border-radius:2px;
  }
  .saas-grid div::after{
    content:"";position:absolute;top:16px;left:8px;width:40%;height:3px;
    background:var(--border);border-radius:2px;
  }
  .saas-grid div:nth-child(2){background:var(--accent-soft);border-color:color-mix(in oklab, var(--accent) 30%, transparent)}
  .saas-grid div:nth-child(2)::before{background:var(--accent)}
  .svc:hover .saas-grid div{transform:scale(.98)}
  .svc:hover .saas-grid div:nth-child(2){transform:scale(1.05);z-index:2;box-shadow:0 8px 24px var(--accent-glow)}

  .svc__body{
    padding:28px 28px 30px;display:flex;flex-direction:column;flex:1;
  }
  .svc__num{
    font-family:'Geist Mono',monospace;font-size:11px;color:var(--text-soft);
    letter-spacing:.04em;margin-bottom:10px;display:flex;justify-content:space-between;
  }
  .svc__num .badge{
    background:var(--surface-2);border:1px solid var(--border);
    padding:2px 8px;border-radius:4px;
    color:var(--text-2);font-size:10px;letter-spacing:.04em;
  }
  .svc h3{
    font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.1;
    margin-bottom:10px;
  }
  .svc p{
    font-size:14.5px;color:var(--text-2);line-height:1.6;
    text-wrap:pretty;
  }
  .svc__link{
    margin-top:auto;padding-top:20px;
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:500;color:var(--accent);
    transition:gap .25s var(--ease);
  }
  .svc:hover .svc__link{gap:12px}
  .svc__link svg{width:13px;height:13px}

  /* ─── CAPACIDADES (também fazemos) ────────────── */
  .caps-sec{padding:80px 0;border-top:1px solid var(--border);background:var(--bg)}
  .caps-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;
  }
  .cap{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:26px 26px 24px;
    display:flex;flex-direction:column;gap:14px;
    transition:transform .35s var(--ease),border-color .25s,background .25s;
    position:relative;overflow:hidden;
  }
  .cap::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--accent);
    transform:scaleY(0);transform-origin:top;
    transition:transform .4s var(--ease);
  }
  .cap:hover{transform:translateY(-3px);border-color:var(--border-2);background:var(--surface-2)}
  .cap:hover::after{transform:scaleY(1)}
  .cap__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .cap__icon{
    width:42px;height:42px;border-radius:9px;
    background:var(--accent-soft);
    border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    transition:transform .3s var(--ease-spring),background .25s;
  }
  .cap:hover .cap__icon{transform:rotate(-6deg) scale(1.06)}
  .cap__icon svg{width:20px;height:20px}
  .cap__tag{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;
    padding:3px 8px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:4px;
  }
  .cap h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
  .cap p{font-size:14px;color:var(--text-2);line-height:1.6;text-wrap:pretty}
  .cap__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
  .cap__list span{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);
    padding:4px 9px;background:var(--bg);
    border:1px solid var(--border);border-radius:5px;
  }
  @media(max-width:880px){
    .caps-grid{grid-template-columns:1fr}
  }

  /* ─── CASES ───────────────────────────────────── */
  .cases{padding:100px 0;border-top:1px solid var(--border)}
  .cases-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
  }
  .case{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:0;
    display:flex;flex-direction:column;
    transition:transform .35s var(--ease),border-color .25s,background .25s;
    position:relative;overflow:hidden;
    text-decoration:none;color:inherit;
  }
  .case::after{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--accent),transparent);
    transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease);
    z-index:3;
  }
  .case:hover{transform:translateY(-3px);border-color:var(--border-2);background:var(--surface-2)}
  .case:hover::after{transform:scaleX(1)}

  .case__shot{
    position:relative;
    aspect-ratio:16/7;
    background:var(--bg-2);
    border-bottom:1px solid var(--border);
    overflow:hidden;
  }
  .case__chrome{
    position:absolute;top:0;left:0;right:0;z-index:2;
    display:flex;align-items:center;gap:6px;
    padding:9px 14px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
    height:36px;
  }
  .case__chrome i{
    width:8px;height:8px;border-radius:50%;background:var(--border-3);
    flex-shrink:0;
  }
  .case__url{
    margin-left:10px;
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);
    background:var(--surface);border:1px solid var(--border);
    padding:3px 10px;border-radius:5px;
    flex:1;max-width:260px;
    display:flex;align-items:center;gap:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .case__url::before{
    content:"";width:6px;height:6px;border-radius:50%;background:#22C55E;flex-shrink:0;
  }
  .case__img{
    position:absolute;left:0;right:0;top:36px;bottom:0;
    width:100%;height:auto;min-height:calc(100% - 36px);
    object-fit:cover;
    object-position:top center;
    transition:transform 6s linear;
  }
  .case:hover .case__img{
    transform:translateY(-40%);
    transition:transform 14s linear;
  }

  .case__body{
    padding:24px 28px 26px;
    display:flex;flex-direction:column;gap:10px;flex:1;
  }
  .case__tags{
    display:flex;gap:6px;flex-wrap:wrap;
    margin-bottom:2px;
  }
  .case__tags span{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em;
    padding:3px 8px;
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:4px;
  }
  .case h3{
    font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
    text-wrap:balance;color:var(--text);
  }
  .case p{
    font-size:14px;color:var(--text-2);line-height:1.6;
    text-wrap:pretty;
  }
  .case__link{
    margin-top:auto;padding-top:12px;
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:500;color:var(--accent);
    transition:gap .25s var(--ease);
  }
  .case:hover .case__link{gap:12px}
  .case__link svg{width:12px;height:12px}

  /* ─── PRIVATE CASES (sistemas) ───────────────── */
  .case--private{cursor:default;pointer-events:auto}
  .case--private .case__shot{position:relative}
  .case--private .case__img{
    filter:none;
    transform:scale(1);
    transition:transform 6s linear;
  }
  .case--private:hover .case__img{
    filter:none;
    transform:translateY(-40%);
    transition:transform 14s linear;
  }
  .case--private .case__shot::after{
    content:"";position:absolute;inset:36px 0 0 0;
    background:linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--bg) 55%, transparent));
    pointer-events:none;
  }
  .case__nda{
    position:absolute;top:48px;right:14px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;
    background:color-mix(in oklab, var(--bg-2) 90%, transparent);
    border:1px solid var(--border-2);
    border-radius:5px;
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-2);
    text-transform:uppercase;letter-spacing:.08em;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .case__nda::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:#F59E0B;
    box-shadow:0 0 8px rgba(245,158,11,.5);
  }
  .case--private .case__url::before{background:#F59E0B}
  .case--private:hover{transform:translateY(-3px);border-color:var(--border-2)}

  /* resultado nos cards de sistema */
  .case__result{
    margin-top:auto;padding-top:12px;
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;font-weight:500;
    color:#22c55e;
    font-family:'Geist Mono',monospace;letter-spacing:.01em;
  }

  /* ─── SITES STRIP ────────────────────────────── */
  .sites-strip{
    padding:36px 0;
    border-top:1px solid var(--border);
    background:var(--bg-2);
  }
  .sites-strip__inner{
    display:flex;align-items:center;gap:32px;
  }
  .sites-strip__meta{
    display:flex;flex-direction:column;gap:10px;flex-shrink:0;
  }
  .sites-strip__label{
    font-family:'Geist Mono',monospace;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-soft);white-space:nowrap;
  }
  .sites-strip__link{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:500;color:var(--text-soft);
    white-space:nowrap;transition:color .15s;
  }
  .sites-strip__link:hover{color:var(--accent)}
  .sites-strip__link svg{width:11px;height:11px}

  /* Cards com screenshot */
  .sites-strip__logos{
    display:flex;align-items:center;gap:10px;flex:1;overflow:hidden;
  }
  .site-sq-card{
    display:flex;flex-direction:column;
    width:140px;flex-shrink:0;
    border:1px solid var(--border);
    border-radius:8px;overflow:hidden;
    text-decoration:none;
    transition:border-color .2s,transform .2s var(--ease-spring),box-shadow .2s;
    background:var(--surface);
  }
  .site-sq-card:hover{
    border-color:var(--border-2);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
  }
  .site-sq-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:transform .4s var(--ease);
  }
  .site-sq-card:hover img{transform:translateY(-6%)}
  .site-sq-card span{
    display:block;
    font-size:10px;font-family:'Geist Mono',monospace;
    color:var(--text-soft);letter-spacing:.01em;
    padding:6px 8px;
    border-top:1px solid var(--border);
    background:var(--surface-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .2s;
  }
  .site-sq-card:hover span{color:var(--text-2)}

  @media(max-width:960px){
    .site-sq-card{width:120px}
  }
  @media(max-width:700px){
    .sites-strip__inner{flex-direction:column;align-items:flex-start;gap:16px}
    .sites-strip__logos{gap:8px;width:100%}
    .site-sq-card{width:calc(25% - 6px);min-width:80px}
  }

  /* ─── BLOG HOME ──────────────────────────────── */
  .blog-home{padding:100px 0;border-top:1px solid var(--border);background:var(--bg)}
  .blog-home__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .blog-home__card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:28px;
    display:flex;flex-direction:column;gap:14px;
    transition:transform .35s var(--ease),border-color .25s;
  }
  .blog-home__card:hover{transform:translateY(-3px);border-color:var(--border-2)}
  .blog-home__cat{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--accent);text-transform:uppercase;letter-spacing:.08em;
  }
  .blog-home__card h3{
    font-size:17px;font-weight:600;letter-spacing:-.015em;
    line-height:1.3;text-wrap:balance;color:var(--text);
  }
  .blog-home__card p{
    font-size:14px;color:var(--text-2);line-height:1.6;
    text-wrap:pretty;flex:1;
  }
  .blog-home__link{
    display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:500;color:var(--accent);
    margin-top:4px;transition:gap .2s var(--ease);
  }
  .blog-home__card:hover .blog-home__link{gap:9px}
  .blog-home__link svg{width:12px;height:12px}
  .blog-home__footer{text-align:center;margin-top:40px}
  .blog-home__all{
    display:inline-flex;align-items:center;gap:6px;
    font-size:14px;color:var(--text-2);
    border:1px solid var(--border-2);padding:10px 20px;border-radius:8px;
    transition:color .2s,border-color .2s;
  }
  .blog-home__all:hover{color:var(--text);border-color:var(--border-3)}
  .blog-home__all svg{width:12px;height:12px}
  @media(max-width:860px){.blog-home__grid{grid-template-columns:1fr}}

  /* ─── METHOD ──────────────────────────────────── */
  .method{
    padding:100px 0;border-top:1px solid var(--border);
    background:var(--bg-2);
  }
  .method__steps{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border:1px solid var(--border);border-radius:var(--r-lg);
    overflow:hidden;background:var(--surface);
  }
  .step{
    padding:28px 24px 32px;
    border-right:1px solid var(--border);
    position:relative;
    transition:background .25s;
  }
  .step:last-child{border-right:none}
  .step:hover{background:var(--surface-2)}
  .step__num{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);letter-spacing:.06em;
    margin-bottom:18px;display:flex;justify-content:space-between;
  }
  .step__num .time{color:var(--accent);font-weight:500}
  .step__dot{
    width:36px;height:36px;border-radius:8px;
    background:var(--surface-2);
    border:1px solid var(--border-2);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;color:var(--accent);
    transition:transform .3s var(--ease-spring),background .25s;
  }
  .step:hover .step__dot{
    transform:rotate(-6deg) scale(1.08);
    background:var(--accent-soft);
  }
  .step__dot svg{width:18px;height:18px}
  .step h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
  .step p{font-size:13.5px;color:var(--text-2);line-height:1.6;text-wrap:pretty}

  /* connector dots between steps */
  .step:not(:last-child)::after{
    content:"";position:absolute;right:-3px;top:50%;
    transform:translateY(-50%);
    width:5px;height:5px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--bg-2);
    opacity:.6;
    z-index:1;
  }

  /* ─── CONTACT ─────────────────────────────────── */
  .contact{
    padding:120px 0;border-top:1px solid var(--border);
    position:relative;overflow:hidden;
  }
  .contact__halo{
    position:absolute;top:50%;left:50%;
    width:700px;height:700px;border-radius:50%;
    background:radial-gradient(circle,var(--accent-glow),transparent 70%);
    transform:translate(-50%,-50%);
    filter:blur(60px);opacity:.5;
    pointer-events:none;
  }
  :root[data-theme="light"] .contact__halo{opacity:.18;mix-blend-mode:multiply}
  .contact__inner{
    max-width:680px;margin:0 auto;text-align:center;
    position:relative;z-index:1;padding:0 32px;
  }
  .contact span.caps{
    color:var(--accent);margin-bottom:16px;display:inline-block;
  }
  .contact h2{
    font-size:clamp(36px,5vw,68px);
    font-weight:600;line-height:1;letter-spacing:-.035em;
    margin-bottom:14px;text-wrap:balance;
  }
  .contact p.lede{
    font-size:18px;color:var(--text-2);line-height:1.55;
    margin-bottom:40px;text-wrap:pretty;
  }

  .form{
    background:var(--surface);
    border:1px solid var(--border-2);
    border-radius:var(--r-lg);
    padding:28px;
    text-align:left;
    box-shadow:var(--shadow);
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
  .form-row--single{grid-template-columns:1fr}
  .form-cell{display:flex;flex-direction:column;gap:6px}
  .form-cell--full{grid-column:span 2}
  .form-cell label{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;
  }
  .form-cell input,.form-cell select,.form-cell textarea{
    background:var(--bg);
    border:1px solid var(--border-2);
    border-radius:6px;
    padding:10px 12px;
    font:inherit;font-size:14px;color:var(--text);
    outline:none;
    transition:border-color .15s,box-shadow .15s;
    width:100%;
    -webkit-appearance:none;appearance:none;
  }
  .form-cell select{cursor:pointer}
  .form-cell select option{background:var(--bg);color:var(--text)}
  .form-cell textarea{resize:vertical;min-height:80px}
  .form-cell input::placeholder,.form-cell textarea::placeholder{color:var(--text-faint)}
  .form-cell input:focus,.form-cell select:focus,.form-cell textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .form-submit{
    width:100%;
    background:var(--accent);color:#fff;
    padding:13px;border-radius:8px;
    font-size:14px;font-weight:500;letter-spacing:-.005em;
    margin-top:14px;
    transition:transform .2s var(--ease-spring),box-shadow .25s,background .15s;
    box-shadow:0 0 0 0 var(--accent-glow);
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .form-submit:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--accent-glow)}
  .form-submit svg{width:14px;height:14px;transition:transform .2s var(--ease)}
  .form-submit:hover svg{transform:translate(2px,-2px)}

  .form-success{
    display:none;
    background:rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.22);
    border-radius:10px;padding:28px 24px;
    font-size:15px;color:#22C55E;
    font-family:'Geist',sans-serif;
    font-weight:500;
    align-items:center;gap:12px;
    text-align:center;flex-direction:column;
    min-height:120px;justify-content:center;
  }
  .form-success.show{display:flex}
  .form-success svg{flex-shrink:0;stroke:#22C55E}
  .form-success--error{
    background:rgba(239,68,68,.08);
    border-color:rgba(239,68,68,.22);
    color:#EF4444;
  }
  .form-success--error svg{stroke:#EF4444}
  .cf-turnstile{
    margin-top:12px;
    min-height:65px;        /* reserva espaço para o widget carregar */
    width:100%;
    max-width:100%;
  }
  /* O iframe do Turnstile não deve exceder o container */
  .cf-turnstile iframe{
    max-width:100% !important;
  }

  /* ─── EXIT INTENT MODAL ───────────────────────── */
  .exit-modal{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    transition:opacity .3s, visibility .3s;
  }
  .exit-modal.is-open{opacity:1;visibility:visible}
  .exit-modal__overlay{
    position:absolute;inset:0;
    background:color-mix(in oklab, var(--bg) 80%, transparent);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .exit-modal__box{
    position:relative;width:90%;max-width:420px;
    background:var(--surface);border:1px solid var(--border-2);
    border-radius:16px;padding:32px;
    box-shadow:var(--shadow);
    transform:translateY(20px) scale(.95);
    transition:transform .4s var(--ease-spring);
    text-align:center;
  }
  .exit-modal.is-open .exit-modal__box{transform:none}
  .exit-modal__close{
    position:absolute;top:12px;right:12px;
    width:32px;height:32px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    color:var(--text-soft);font-size:24px;
    transition:background .2s,color .2s;
  }
  .exit-modal__close:hover{background:var(--surface-2);color:var(--text)}
  .exit-modal__icon{
    width:48px;height:48px;border-radius:12px;
    background:var(--accent-soft);color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 16px;border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  }
  .exit-modal__icon svg{width:24px;height:24px}
  .exit-modal h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:10px}
  .exit-modal p{font-size:14.5px;color:var(--text-2);line-height:1.55;margin-bottom:20px}

  /* ─── COOKIE BANNER ───────────────────────────── */
  .cookie-banner{
    position:fixed;bottom:24px;left:50%;transform:translate(-50%, 20px);
    z-index:9998;opacity:0;visibility:hidden;
    transition:opacity .4s, transform .4s var(--ease-spring), visibility .4s;
    width:90%;max-width:600px;
  }
  .cookie-banner.is-visible{opacity:1;visibility:visible;transform:translate(-50%, 0)}
  .cookie-banner__inner{
    background:var(--surface);border:1px solid var(--border-2);
    border-radius:12px;padding:16px 20px;
    box-shadow:var(--shadow);
    display:flex;align-items:center;gap:20px;
  }
  .cookie-banner__text{font-size:13.5px;color:var(--text-2);line-height:1.5}
  .cookie-banner__text a{color:var(--accent);text-decoration:underline}
  @media(max-width:600px){
    .cookie-banner__inner{flex-direction:column;align-items:flex-start;gap:16px}
    .cookie-banner{bottom:16px}
  }

  .trust-row{
    display:flex;align-items:center;justify-content:center;
    gap:24px;flex-wrap:wrap;margin-top:24px;
  }
  .trust-row span{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em;
    display:inline-flex;align-items:center;gap:6px;
  }
  .trust-row svg{width:13px;height:13px;color:var(--accent)}

  /* ─── FOOTER ──────────────────────────────────── */
  .foot{
    border-top:1px solid var(--border);
    padding:64px 0 32px;background:var(--bg-2);
  }
  .foot__inner{max-width:1280px;margin:0 auto;padding:0 32px}
  .foot__top{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
    padding-bottom:40px;
  }
  .foot__brand{
    font-size:24px;font-weight:600;letter-spacing:-.025em;
    display:flex;align-items:center;gap:10px;
  }
  .foot__brand .dots{color:var(--accent);letter-spacing:-.08em;font-weight:500}
  .foot__about{
    font-size:14px;color:var(--text-2);margin-top:14px;line-height:1.65;max-width:300px;
  }
  .foot__col h4{
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;
    font-weight:400;margin-bottom:18px;
  }
  .foot__col li{margin-bottom:10px}
  .foot__col a{font-size:14px;color:var(--text-2);transition:color .15s}
  .foot__col a:hover{color:var(--text)}
  .foot__bot{
    border-top:1px solid var(--border);
    padding-top:24px;
    display:flex;justify-content:space-between;align-items:center;
    font-family:'Geist Mono',monospace;font-size:11px;
    color:var(--text-soft);
  }

  /* ─── WA FLOAT ────────────────────────────────── */
  .wa-float{
    position:fixed;bottom:24px;right:24px;z-index:50;
    width:52px;height:52px;border-radius:50%;
    background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(37,211,102,.35);
    transition:transform .25s var(--ease-spring),box-shadow .25s;
  }
  .wa-float:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 12px 32px rgba(37,211,102,.5)}
  .wa-float svg{width:24px;height:24px;color:#fff}

  /* ─── REVEAL ──────────────────────────────────── */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:80ms}
  .reveal[data-d="2"]{transition-delay:160ms}
  .reveal[data-d="3"]{transition-delay:240ms}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .hero h1 .row span,.hero__sub,.hero__actions,.mockup{animation:none}
  }

  /* ─── TWEAKS PANEL ────────────────────────────── */
  .tweaks-panel{
    position:fixed;bottom:24px;left:24px;z-index:90;
    width:260px;
    background:var(--surface);
    border:1px solid var(--border-2);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow);
    padding:18px 18px 16px;
    display:none;
    animation:tw-in .3s var(--ease);
  }
  .tweaks-panel.open{display:block}
  @keyframes tw-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .tweaks-panel__head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;padding-bottom:10px;
    border-bottom:1px solid var(--border);
  }
  .tweaks-panel__head h4{
    font-size:13px;font-weight:600;letter-spacing:-.01em;
    display:flex;align-items:center;gap:8px;
  }
  .tweaks-panel__head h4::before{
    content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 0 var(--accent-glow);animation:dot-pulse 2s infinite;
  }
  .tweaks-panel__close{
    width:22px;height:22px;border-radius:5px;
    background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-soft);font-size:14px;line-height:1;
    transition:background .15s,color .15s;
  }
  .tweaks-panel__close:hover{background:var(--surface-3);color:var(--text)}
  .tw-row{margin-bottom:12px}
  .tw-row:last-child{margin-bottom:0}
  .tw-lbl{
    font-family:'Geist Mono',monospace;font-size:10px;
    color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;
    margin-bottom:8px;display:block;
  }
  .tw-swatches{display:flex;gap:6px}
  .tw-sw{
    flex:1;height:32px;border-radius:6px;
    border:1px solid var(--border-2);
    cursor:pointer;
    transition:transform .2s var(--ease-spring),border-color .15s;
    position:relative;
  }
  .tw-sw:hover{transform:translateY(-2px)}
  .tw-sw.active{border-color:var(--text);box-shadow:inset 0 0 0 2px var(--bg)}
  .tw-seg{
    display:flex;gap:0;
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:6px;padding:3px;
  }
  .tw-seg button{
    flex:1;padding:6px;font-size:12px;font-weight:500;
    border-radius:4px;color:var(--text-2);
    transition:background .15s,color .15s;
  }
  .tw-seg button.active{background:var(--surface-3);color:var(--text)}

  /* ─── RESPONSIVE ──────────────────────────────── */
  @media(max-width:1024px){
    .nav__links{display:none}
    .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
    .sec-head__r{text-align:left;max-width:100%}
    .svc-grid{grid-template-columns:1fr 1fr}
    .svc:last-child{grid-column:span 2}
    .cases-grid{grid-template-columns:1fr}
    .method__steps{grid-template-columns:1fr 1fr}
    .step:nth-child(2){border-right:none}
    .step:nth-child(2)::after{display:none}
    .step:nth-child(3),.step:nth-child(4){border-top:1px solid var(--border)}
    .mockup__body{grid-template-columns:1fr}
    .mockup__side{display:none}
    .foot__top{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media(max-width:680px){
    .wrap, .nav__inner, .hero__inner, .strip__inner, .foot__inner{padding-left:20px;padding-right:20px}
    .hero{padding:120px 0 64px}
    .hero h1{font-size:clamp(38px,11vw,64px);letter-spacing:-.035em}
    .hero__sub{font-size:16px}
    .hero__actions{flex-direction:column;align-items:flex-start}
    .svc-grid{grid-template-columns:1fr}
    .svc:last-child{grid-column:span 1}
    .method__steps{grid-template-columns:1fr}
    .step{border-right:none;border-bottom:1px solid var(--border)}
    .step:last-child{border-bottom:none}
    .step::after{display:none !important}
    .form-row{grid-template-columns:1fr}
    .foot__top{grid-template-columns:1fr;gap:32px}
    .foot__bot{flex-direction:column;gap:12px;text-align:center}
    .case h3{font-size:20px}
    .case__result .big{font-size:42px}
    .tweaks-panel{left:16px;right:16px;width:auto;bottom:90px}
    /* mockup mobile */
    .mockup{border-radius:10px}
    .mockup__kpis{grid-template-columns:1fr 1fr 1fr;gap:6px}
    .kpi__val{font-size:18px}
    .kpi__lbl{font-size:9px}
    /* mid-cta mobile */
    .mid-cta__inner{flex-direction:column;align-items:flex-start;gap:20px}
    .mid-cta__actions{width:100%}
    .mid-cta__actions .btn-hero-primary,.mid-cta__actions .btn-hero-ghost{width:100%;justify-content:center}
    /* strip mobile */
    .strip__inner{flex-direction:column;align-items:flex-start;gap:14px}
    .strip__items{gap:14px}
    /* sections padding */
    .services{padding:100px 0 70px}
    .caps-sec{padding:60px 0}
    .cases{padding:70px 0}
    .blog-home{padding:70px 0}
    .method{padding:70px 0}
    /* cases grid mobile */
    .case__body{padding:18px 20px 20px}
    .case h3{font-size:18px}
    /* sites strip — já coberto pelo @media(max-width:700px) acima */
    /* contact */
    .contact{padding:80px 0}
    .contact__inner{padding:0 20px}
  }
/* ── BUTTONS (from site.css) ──────────────────── */
.btn-accent{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:11px 22px;border-radius:8px;
  font-size:13px;font-weight:500;letter-spacing:-.005em;
  transition:transform .2s var(--ease-spring),box-shadow .25s;
  box-shadow:0 0 0 0 var(--accent-glow);
}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--accent-glow)}
.btn-accent svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.btn-accent:hover svg{transform:translate(2px,-2px)}

/* ── UTILITY ───────────────────────────────── */
.accent-text{color:var(--accent)}
.hero__pill--below{margin-top:28px;margin-bottom:48px}
.hero__pill-text{font-size:11px}

/* ── FOOTER EXTRAS ─────────────────────────── */
.foot__legal-link{color:inherit;text-decoration:none}
.foot__legal-link--spaced{margin-right:14px}
.btn-accent--modal{width:100%;justify-content:center;margin-top:10px}
.btn-primary--cookie{padding:10px 18px;font-size:14px}

/* ── 404 ───────────────────────────────────── */
.not-found-hero{padding:6rem 1.5rem 4rem;text-align:center}
.not-found-hero__inner{max-width:560px;margin:0 auto}
.not-found__label{font-size:11px;letter-spacing:.1em;opacity:.4;margin-bottom:1.5rem}
.not-found-hero h1{font-size:clamp(2.5rem,8vw,4.5rem);line-height:1.1;margin-bottom:1rem}
.not-found__sub{opacity:.6;max-width:38ch;margin:0 auto 2.5rem}
.not-found__btn{margin-bottom:3.5rem}
.not-found-links{padding:0 1.5rem 6rem}
.not-found-links__inner{max-width:900px;margin:0 auto}
.not-found__links-label{font-size:11px;letter-spacing:.1em;opacity:.4;margin-bottom:2rem;text-align:center}
.not-found-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.not-found-card{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.25rem 1.5rem;
  border:1px solid var(--border-2);border-radius:10px;
  text-decoration:none;color:inherit;
  transition:border-color .2s;
}
.not-found-card:hover{border-color:var(--border-3)}
.not-found-card__tag{font-size:.7rem;opacity:.4;letter-spacing:.08em}
.not-found-card__title{font-weight:600}
.not-found-card__desc{font-size:.85rem;opacity:.55}

/* ── PRIVACIDADE ───────────────────────────── */
.prose__update{margin-top:40px;color:var(--text-soft)}