:root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F3F4F1; --surface-sunken:#EBEDE8;
    --ink:#0E1826; --ink-soft:#525C6B; --ink-faint:#7C8593;
    --border:#DEE0D9; --border-strong:#C3C6BD;
    --navy:#0B1420; --navy-soft:#16223A; --navy-line:#28374F;
    --on-navy:#F1F3EF; --on-navy-soft:#93A0B4; --on-navy-faint:#5E6C81;
    --accent:#178C97; --accent-strong:#0F6B74; --on-accent:#F4FBFB;
    --success:#25824C; --warning:#9A6A12; --danger:#B23B3B;
    --font-head:'Oswald',"Arial Narrow",sans-serif;
    --font-body:'Inter',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
    --radius:3px; --radius-lg:6px;
    --shadow-card:0 1px 2px rgba(14,24,38,.06);
  }
  /* Total Performance commits to a single light/white brand theme (navy + off-white + cyan
     accent are the brand identity, not a "light mode" state), so the page does not switch
     to a dark palette with the visitor's OS setting. */

  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  #app{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
  img{max-width:100%}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  [hidden]{display:none!important}
  h1,h2,h3,h4{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.02em;text-wrap:balance;margin:0;color:var(--ink)}
  h1{font-size:clamp(30px,5vw,46px);line-height:1.08}
  h2{font-size:clamp(22px,3.2vw,30px);line-height:1.15}
  h3{font-size:18px;line-height:1.25}
  p{margin:0}
  .mono{font-family:var(--font-mono)}
  .wrap{max-width:1180px;margin:0 auto}
  .eyebrow{font-family:var(--font-body);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-strong);font-weight:700}
  .lede{color:var(--ink-soft);font-size:16px;max-width:60ch}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius);font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .18s,border-color .18s,color .18s,transform .08s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--accent);color:var(--on-accent)}
  .btn-primary:hover{background:var(--accent-strong)}
  .btn-outline-light{background:transparent;border-color:var(--navy-line);color:var(--on-navy)}
  .btn-outline-light:hover{border-color:var(--on-navy-soft)}
  .btn-outline{background:transparent;border-color:var(--border-strong);color:var(--ink)}
  .btn-outline:hover{border-color:var(--ink-faint)}
  .btn-ghost{background:transparent;color:var(--ink-soft);padding:8px 4px}
  .btn-ghost:hover{color:var(--ink)}
  .btn-sm{padding:8px 14px;font-size:13px}
  .btn-block{width:100%}
  .btn:disabled{opacity:.5;cursor:not-allowed}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* ---------- header ---------- */
  .prefs{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-left:6px;margin-left:2px;border-left:1px solid var(--border)}
  .lang-toggle{display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden}
  .lang-toggle button{background:none;border:none;color:var(--ink-soft);font-size:11.5px;font-weight:700;padding:6px 11px;cursor:pointer;font-family:var(--font-body)}
  .lang-toggle button.active{background:var(--navy);color:var(--on-navy)}
  select.currency-select{background:none;border:1px solid var(--border-strong);color:var(--ink-soft);border-radius:999px;font-size:11.5px;font-weight:700;padding:6px 22px 6px 12px;font-family:var(--font-body);cursor:pointer}
  select.currency-select:hover{color:var(--ink)}

  header.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--surface);border-bottom:1px solid var(--border)}
  .nav-row{display:flex;align-items:center;gap:22px;height:76px}
  .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .logo-mark{width:30px;height:30px;flex-shrink:0}
  .logo-img{height:32px;width:auto;max-width:220px;object-fit:contain;flex-shrink:0}
  .logo-word{font-family:var(--font-head);font-size:17px;letter-spacing:.03em;line-height:1;text-transform:uppercase;color:var(--navy)}
  .logo-word small{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;margin-top:3px;font-weight:600}
  nav.main-nav{display:flex;align-items:center;gap:4px;flex:1}
  nav.main-nav > .nav-item{position:relative}
  nav.main-nav a.nav-link, nav.main-nav button.nav-link{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:10px 12px;cursor:pointer;border-radius:var(--radius)}
  nav.main-nav a.nav-link:hover, nav.main-nav button.nav-link:hover{color:var(--ink);background:var(--surface-alt)}
  nav.main-nav a.nav-link.is-active{color:var(--ink)}
  .caret{width:8px;height:8px;flex-shrink:0}
  .dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 12px 28px rgba(14,24,38,.14);min-width:220px;padding:6px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s,transform .14s}
  .nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  .dropdown a{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:var(--radius);font-size:13.5px;font-weight:500;color:var(--ink)}
  .dropdown a:hover{background:var(--surface-alt)}
  .dropdown a .tag{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)}
  .header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
  .icon-btn{background:none;border:none;padding:9px;border-radius:var(--radius);cursor:pointer;color:var(--ink-soft);display:flex;position:relative}
  .icon-btn:hover{background:var(--surface-alt);color:var(--ink)}
  .icon-btn svg{width:19px;height:19px}
  .cart-count{position:absolute;top:2px;right:2px;background:var(--accent);color:var(--on-accent);font-family:var(--font-body);font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px}
  .search-panel{border-top:1px solid var(--border);padding:12px 0;display:flex;gap:10px}
  .search-panel input{flex:1;border:1px solid var(--border-strong);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:inherit;background:var(--surface)}
  .search-panel input:focus-visible{outline:2px solid var(--accent)}
  .hamburger{display:none;align-items:center;justify-content:center;background:none;border:none;padding:9px;cursor:pointer;color:var(--ink)}
  .hamburger svg{width:20px;height:20px;flex-shrink:0}
  .mobile-drawer{display:none}

  @media (max-width:480px){
    .logo-word small{display:none}
    .logo-word{font-size:14.5px}
    .nav-row{gap:8px}
    .header-actions{gap:0}
    .icon-btn,.hamburger{padding:7px}
  }
  @media (max-width:900px){
    nav.main-nav{display:none}
    .nav-row{justify-content:space-between}
    .prefs{display:none}
    .hamburger{display:flex}
    .mobile-drawer.open{display:block;position:fixed;inset:0;background:var(--bg);z-index:60;overflow-y:auto;padding:16px}
    .mobile-drawer .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
    .mobile-drawer a, .mobile-drawer button.mnav{display:block;width:100%;text-align:left;background:none;border:none;padding:14px 4px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);font-family:inherit;cursor:pointer}
    .mobile-drawer .msub a{padding-left:16px;font-weight:500;font-size:14.5px;color:var(--ink-soft)}
    .mobile-drawer .prefs-row{display:flex;gap:10px;margin-top:20px}
  }

  /* ---------- generic layout ---------- */
  main{display:block}
  section.pad{padding-block:64px}
  section.pad-sm{padding-block:40px}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
  .surface-alt{background:var(--surface-alt)}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media (max-width:940px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.grid-4{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

  /* hero — full-bleed background photo with a left-to-right dark overlay;
     the photo IS the section's background (no card/frame/column), content
     is plain HTML overlaid in the left third. See hero-bg/.hero-overlay
     below for the responsive gradient + background-position tuning.
     2026-09-22 correction: height reduced to ~400-450px on desktop (was up
     to 660px) and the content column moved off-center into the left third
     — it was landing on top of the laptop before. See CHANGELOG.md. */
  .hero{position:relative;color:var(--on-navy);display:flex;align-items:center;min-height:clamp(400px,30vw,450px);padding-block:32px;overflow:hidden}
  .hero-bg{position:absolute;inset:0;background-image:var(--hero-jpg);background-size:cover;background-position:center 42%;background-repeat:no-repeat;z-index:0}
  .hero-bg{background-image:image-set(var(--hero-webp) type("image/webp"),var(--hero-jpg) type("image/jpeg"));background-size:cover;background-position:center 42%;background-repeat:no-repeat}
  .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,20,34,.95) 0%,rgba(4,20,34,.90) 18%,rgba(4,20,34,.68) 34%,rgba(4,20,34,.32) 48%,rgba(4,20,34,.08) 62%,rgba(4,20,34,0) 74%)}
  /* .wrap's default max-width:1180/margin:auto centers it as a flex item
     (auto margins absorb the hero's leftover width) — inside the hero we
     let it span the full section instead, so hero-content can be pinned to
     the left third via its own margin, independent of the 1180px wrap. */
  .hero .wrap{margin:0;max-width:none;width:100%}
  .hero-content{position:relative;z-index:2;margin-left:9%;max-width:510px}
  .hero-content .eyebrow{font-size:12px}
  .hero h1{color:var(--on-navy);max-width:22ch;font-size:clamp(24px,3vw,34px);margin-top:8px!important}
  .hero .lede{color:var(--on-navy-soft);font-size:15.5px;max-width:38ch;margin-top:10px!important}
  .hero-ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
  .hero-ctas .btn{padding:10px 18px;font-size:13.5px}
  /* fallback device mockup (only rendered if no hero image is configured) */
  .device{position:relative;border-radius:10px;background:linear-gradient(180deg,#1B2C46,#0F1B2E);padding:14px 14px 26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
  .device-screen{aspect-ratio:16/10.2;background:var(--surface-alt);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .device-screen .ph{color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:0 14px}
  .device-screen .ph svg{width:30px;height:30px}
  .device-stand{width:70px;height:8px;background:#0B1420;margin:8px auto 0;border-radius:0 0 4px 4px}
  .device-caption{margin-top:18px;font-size:12px;color:var(--on-navy-faint);text-align:center}
  /* Tablet (covers the 768-1024px range QA'd for this hero, extended to
     1100px): a taller, fixed min-height (460px) crops horizontally, so
     background-position-x is tuned to fully crop the "Da analise a acao."
     tagline out (a clean edge beats a mid-word cut) while keeping the whole
     laptop in frame. The upper bound is 1100, not 1024: the base/desktop
     rule below only stops cropping the tagline cleanly past ~1100px
     (verified 768/820/1024/1090px here, 1100-1920px on the base rule). */
  @media (max-width:1100px){
    .hero{min-height:460px;padding-block:32px}
    .hero-bg{background-position:38% 38%}
    .hero-content{margin-left:7%;max-width:min(56%,480px)}
    .hero-overlay{background:linear-gradient(100deg,rgba(4,20,34,.94) 0%,rgba(4,20,34,.88) 34%,rgba(4,20,34,.58) 58%,rgba(4,20,34,.22) 76%,rgba(4,20,34,.06) 92%)}
  }
  @media (max-width:600px){
    .hero{min-height:480px;padding-block:32px}
    .hero-bg{background-position:55% 30%}
    .hero-content{margin-left:6%;max-width:88%}
    .hero-overlay{background:linear-gradient(170deg,rgba(4,20,34,.90) 0%,rgba(4,20,34,.85) 46%,rgba(4,20,34,.62) 78%,rgba(4,20,34,.42) 100%)}
  }

  /* trust bar */
  .trust-bar{border-bottom:1px solid var(--border);background:var(--surface-alt)}
  .trust-row{display:flex;justify-content:space-between;padding-block:18px;flex-wrap:wrap;gap:14px 28px}
  .trust-row span{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
  .trust-row span svg{width:15px;height:15px;color:var(--accent-strong);flex-shrink:0}

  /* area cards */
  .area-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease}
  .area-card:hover{border-color:var(--ink-faint);box-shadow:0 12px 28px -16px rgba(15,26,43,.2)}
  .area-card:hover .area-link{gap:9px}
  .area-visual{aspect-ratio:5/3;position:relative;overflow:hidden;background:var(--surface-alt)}
  .area-visual svg{position:absolute;inset:0;width:100%;height:100%}
  .area-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .area-visual .area-tag{position:absolute;left:16px;bottom:14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy)}
  .area-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
  .area-body p{color:var(--ink-soft);font-size:14px}
  .area-body .area-link{margin-top:auto;padding-top:6px;font-weight:600;font-size:13.5px;color:var(--accent-strong);display:flex;align-items:center;gap:6px;transition:gap .18s ease}

  /* product / bundle cards */
  .card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  a.card:hover,a.card:focus-visible{border-color:var(--ink-faint);box-shadow:0 12px 28px -14px rgba(15,26,43,.22);transform:translateY(-2px)}
  .card-media{aspect-ratio:4/3;background:var(--surface-alt);position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}
  .card-media .ph{color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:0 10px}
  .card-media .ph svg{width:22px;height:22px}
  .card-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
  .card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .code{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);letter-spacing:.03em}
  .badge{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 7px;border-radius:999px}
  .badge-popular{background:var(--accent);color:var(--on-accent)}
  .badge-promo{background:var(--danger);color:#fff}
  .badge-free{background:var(--success);color:#fff}
  .badge-ribbon{background:var(--navy);color:var(--on-navy)}
  .badge-discount{background:var(--danger);color:#fff}
  .card-media-img{padding:0;overflow:hidden}
  .card-media-img img{width:100%;height:100%;object-fit:cover}
  .card-title{font-size:14.5px;font-weight:700;line-height:1.3}
  .card-desc{color:var(--ink-soft);font-size:12.5px;line-height:1.45;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card-caps{display:flex;gap:6px;flex-wrap:wrap}
  .cap-chip{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);border:1px solid var(--border-strong);border-radius:999px;padding:2px 8px}
  .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:10px}
  .price{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px}
  .price-was{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-faint);text-decoration:line-through;margin-right:6px}
  .cat-pill{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--ink-faint)}
  .demo-note{font-size:12px;color:var(--ink-faint);margin-top:6px}

  /* how it works */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  @media (max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.steps{grid-template-columns:1fr}}
  .step{padding:18px 4px;border-top:2px solid var(--accent)}
  .step .n{font-family:var(--font-body);color:var(--accent-strong);font-weight:700;font-size:13px}
  .step h4{margin-top:8px;font-size:14px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:700}
  .step p{color:var(--ink-soft);font-size:13px;margin-top:6px}

  /* product in action — real client screenshots (Painel OEE / SPC /
     Criticidade). object-fit:contain on a neutral, padded surface so no
     table/chart content is ever cropped; the caption is real body text
     below the panel, never overlaid on top of the screenshot. */
  .action-item{display:flex;flex-direction:column;gap:10px}
  .action-panel{aspect-ratio:4/3;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px}
  .action-panel picture{display:flex;max-width:100%;max-height:100%;overflow:hidden}
  .action-panel-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
  .action-panel .ph{color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:center;padding:0 16px}
  .action-panel .ph svg{width:26px;height:26px}
  .action-caption{color:var(--ink-soft);font-family:var(--font-body);font-size:13px;font-weight:600;padding:0 2px}

  /* personas */
  .persona-list{display:flex;flex-wrap:wrap;gap:10px}
  .persona-chip{border:1px solid var(--border-strong);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}

  /* faq */
  .faq-item{border-bottom:1px solid var(--border)}
  .faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink)}
  .faq-q svg{width:16px;height:16px;flex-shrink:0;transition:transform .15s;color:var(--ink-faint)}
  .faq-item[open] .faq-q svg{transform:rotate(45deg)}
  .faq-a{padding:0 4px 18px;color:var(--ink-soft);font-size:14px;max-width:70ch}

  /* footer — white trust bar, then a 4-column dark footer (Brand /
     Ferramentas / Empresa / Insights), then a bottom bar with the legal
     links. See the consolidated rules further down (search "footer redesign")
     for the definitive spacing/typography — this base block only sets the
     structural grid and generic link styling. */
  /* 2026-09-23: this band now reads as its own transition section between
     the page content and the footer, instead of being glued to both —
     margin-top/margin-bottom on the outer .footer-trust give it ~48px of
     breathing room on each side (was 0 either side: <main> and this div,
     then this div and <footer>, were flush against each other), and
     padding-block on .footer-trust-row was raised from 28px to 40px so the
     band itself doesn't feel cramped. The existing border-bottom is kept
     as the "very subtle divider" — no shadows/gradients/new colors added. */
  .footer-trust{border-bottom:1px solid var(--border);background:#fff;margin-top:48px;margin-bottom:48px}
  .footer-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:40px}
  .footer-trust-item{display:flex;align-items:flex-start;gap:12px}
  .footer-trust-item svg{width:22px;height:22px;color:var(--accent-strong);flex-shrink:0;margin-top:2px}
  .footer-trust-item strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
  .footer-trust-item span{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
  @media (max-width:900px){.footer-trust-row{grid-template-columns:1fr 1fr;row-gap:24px}}
  @media (max-width:560px){.footer-trust-row{grid-template-columns:1fr;padding-block:28px}}

  footer.site-footer{background:var(--navy);color:var(--on-navy-soft)}
  .footer-top{padding-block:48px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px}
  @media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.footer-top{grid-template-columns:1fr}}
  .footer-top h5{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-faint);margin-bottom:14px}
  .footer-top a{display:block;font-size:13.5px;color:var(--on-navy-soft);padding-block:3px}
  .footer-top a:hover{color:var(--on-navy)}
  .footer-brand p{color:var(--on-navy-faint);font-size:13px;margin-top:10px;max-width:32ch}
  .footer-bottom{border-top:1px solid var(--navy-line);padding-block:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--on-navy-faint)}
  .footer-legal-links{display:flex;gap:20px;flex-wrap:wrap}
  .footer-legal-links a{color:var(--on-navy-faint);font-size:12px}
  .footer-legal-links a:hover{color:var(--on-navy)}

  /* generic page bits */
  .breadcrumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap;padding-top:22px}
  .breadcrumb a{color:var(--ink-soft)}
  .breadcrumb a:hover{color:var(--ink)}
  .filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .filter-pill{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .filter-pill.active{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
  .toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin:26px 0}
  .result-count{font-family:var(--font-body);font-weight:600;font-size:12.5px;color:var(--ink-faint)}
  .empty-state{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:56px 20px;text-align:center;color:var(--ink-soft)}
  .empty-state svg{width:30px;height:30px;color:var(--ink-faint);margin-bottom:12px}

  .pdp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px}
  @media (max-width:900px){.pdp-grid{grid-template-columns:1fr}}
  .gallery-main{aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-sunken);display:flex;align-items:center;justify-content:center}
  .gallery-thumbs{display:flex;gap:8px;margin-top:8px}
  .gallery-thumbs div{width:64px;height:48px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-sunken)}
  .gallery-thumb{transition:border-color .15s}
  .gallery-thumb.active{border-color:var(--accent);border-width:2px}
  .gallery-main img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}

  /* sanitized Hostinger description (allowlisted HTML only, see sanitizeAllowlist()) */
  .prose{color:var(--ink-soft);font-size:14px;line-height:1.7}
  .prose p{margin:0 0 12px}
  .prose ul,.prose ol{margin:0 0 12px;padding-left:20px}
  .prose li{margin-bottom:6px}
  .prose strong,.prose b{color:var(--ink);font-weight:700}
  .prose:last-child{margin-bottom:0}
  .spec-table{width:100%;border-collapse:collapse;margin-top:10px}
  .spec-table tr{border-bottom:1px solid var(--border)}
  .spec-table td{padding:10px 0;font-size:13.5px}
  .spec-table td:first-child{color:var(--ink-faint);width:42%;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
  .feature-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .feature-list li{display:flex;gap:10px;align-items:flex-start;list-style:none;font-size:14px;color:var(--ink-soft)}
  .feature-list svg{width:16px;height:16px;color:var(--success);flex-shrink:0;margin-top:2px}
  .pdp-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface)}
  .qty-row{display:flex;align-items:center;gap:12px}

  .tab-strip{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:36px 0 24px;flex-wrap:wrap}
  .tab-btn{background:none;border:none;padding:12px 6px;margin-right:20px;font-weight:600;font-size:13.5px;color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
  .tab-btn.active{color:var(--ink);border-color:var(--accent)}
  .tab-panel{display:none}
  .tab-panel.active{display:block}

  .cart-line{display:grid;grid-template-columns:72px 1fr auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
  .cart-thumb{width:72px;height:54px;border-radius:var(--radius);background:var(--surface-sunken);border:1px solid var(--border)}
  .qty-stepper{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius)}
  .qty-stepper button{background:none;border:none;width:28px;height:28px;cursor:pointer;font-size:15px;color:var(--ink-soft)}
  .qty-stepper span{width:24px;text-align:center;font-family:var(--font-mono);font-size:13px}
  .summary-box{border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;background:var(--surface)}
  .summary-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;color:var(--ink-soft)}
  .summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:14px;font-weight:700;color:var(--ink);font-size:16px}

  form .field{margin-bottom:16px}
  form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
  form label .req{color:var(--danger)}
  form input, form select, form textarea{width:100%;border:1px solid var(--border-strong);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink)}
  form input:focus-visible, form select:focus-visible, form textarea:focus-visible{outline:2px solid var(--accent)}
  .field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media (max-width:560px){.field-2{grid-template-columns:1fr}}
  .consent-row{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft)}
  .consent-row input{width:auto;margin-top:3px}
  .form-msg{border-radius:var(--radius);padding:14px 16px;font-size:13.5px;margin-top:14px}
  .form-msg.ok{background:rgba(37,130,76,.12);color:var(--success);border:1px solid var(--success)}
  .form-msg.err{background:rgba(178,59,59,.1);color:var(--danger);border:1px solid var(--danger)}

  .modal-backdrop{position:fixed;inset:0;background:rgba(6,10,16,.55);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
  .modal{background:var(--surface);border-radius:var(--radius-lg);max-width:480px;width:100%;padding:28px;position:relative}
  .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;color:var(--ink-faint);padding:6px}

  .stat-row{display:flex;gap:32px;flex-wrap:wrap;margin-top:28px}
  .stat-row div strong{display:block;font-family:var(--font-mono);font-size:26px;color:var(--ink)}
  .stat-row div span{font-size:12px;color:var(--ink-faint)}

  .not-found{padding-block:110px;text-align:center}
  .not-found .code-big{font-family:var(--font-mono);font-size:64px;color:var(--border-strong);font-weight:700}


/* V5 — compact technical library: codes are the navigation key; no fake image slots. */
.technical-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.tech-tool-row{display:grid;grid-template-columns:48px 1fr 20px;align-items:center;gap:10px;min-height:58px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .16s ease,background .16s ease,transform .16s ease}
.tech-tool-row:hover,.tech-tool-row:focus-visible{border-color:var(--accent);background:var(--surface-alt);transform:translateY(-1px)}
.tech-code{font-size:11px;font-weight:700;color:var(--accent-strong)}
.tech-title{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.3}
.tech-arrow{color:var(--ink-faint);font-size:16px;text-align:right}
@media (max-width:900px){.technical-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.technical-index{grid-template-columns:1fr}}
/* Official brand asset */
.logo-img{height:44px;max-width:260px}

/* ===== V8 brand + homepage polish ===== */
.logo-img{height:48px;width:auto;max-width:230px;object-fit:contain;display:block}
.drawer-logo{height:42px;width:auto;max-width:190px;object-fit:contain}
@media (max-width:700px){.logo-img{height:38px;max-width:170px}}

/* (full-bleed hero background/overlay rules now live in the main .hero
   block above — this section previously redefined .hero as a split
   text+photo-card layout; superseded by the 2026-09-22 full-bleed redesign) */
.area-card{overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.area-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(7,24,40,.10);border-color:rgba(15,107,116,.28)}
.area-visual{aspect-ratio:16/7}
.area-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,18,31,.25),transparent 55%);pointer-events:none}
.area-visual img{transition:transform .45s ease;filter:saturate(.92) contrast(1.04)}
.area-card:hover .area-visual img{transform:scale(1.025)}
.area-visual .area-tag{z-index:2;box-shadow:0 5px 16px rgba(0,0,0,.12)}

/* ===== Áreas de Atuação — card body redesign (2026-09-23; CTA alignment
   corrected same day per follow-up feedback) =====
   The white body previously repeated the same word already shown on the
   badge over the photo (e.g. "QUALIDADE" as both badge and <h3>). The <h3>
   has been removed from the markup (src/app.js) — the badge over the image
   is now the only visible area label, unchanged in style/position. This
   block re-centers the description and rebalances the body's padding now
   that one element is gone. The "Ver ferramentas →" CTA is deliberately
   NOT centered — per explicit follow-up feedback, it stays left-aligned at
   the body's original left padding edge (`align-self:flex-start` opts it
   out of `.area-body`'s own `align-items:center`, which still centers the
   description). Equal card height, description lines starting at the same
   height, and CTAs sitting at the same height across all three cards are
   NOT done with manual per-card margins — they already fall out of the
   existing flex setup: `.grid-3`'s default grid `align-items:stretch`
   gives all three `.area-card`s equal height, `.area-visual`'s fixed
   aspect-ratio keeps the three images the same height, `.area-body{flex:1}`
   fills the remaining height in each card equally, and
   `.area-link{margin-top:auto}` (base rule above) pins the CTA to the
   bottom of that equal-height body in every card — so the description
   naturally starts at the same offset and the CTA naturally lands at the
   same height, whatever each card's description length is. Only the
   description text's alignment and the CTA's horizontal position change
   here; the CTA's own style/color/hover/arrow/link, images, click targets,
   badges and every other section are untouched. */
.area-body{align-items:center;text-align:center;padding:26px 24px 24px;gap:14px}
.area-body p{max-width:36ch;margin:0}
.area-body .area-link{align-self:flex-start}

/* About page: supporting editorial photo alongside the text column. */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.about-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 48px -20px rgba(15,26,43,.28);aspect-ratio:3/4;max-height:520px}
.about-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.03)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.about-visual{order:-1;max-width:360px;margin:0 auto;aspect-ratio:4/3;max-height:none}}

/* ===== Footer redesign (2026-09-22) — trust bar + 4-column dark footer =====
   Deep navy, cyan used only as an accent, generous spacing, discreet
   dividers, outline icons. Deliberately NO gradients, glassmorphism, cards
   or shadows here — the previous version's diagonal gradient background and
   the white "card" behind the logo are both removed: the official footer
   logo file already ships with its own light background baked in for
   dark-bg use, so no extra card is needed around it. */
footer.site-footer{position:relative;background:var(--navy);border-top:1px solid var(--navy-line)}
.footer-accent{display:none} /* superseded by the plain border-top above */
/* 2026-09-23: footer compaction — padding-top/bottom, the bottom bar's
   padding, and the internal vertical rhythm of the tallest column
   (Insights: h5-to-paragraph gap, newsletter input padding, consent-row
   gap, and the reserved height of the empty status message) were all
   trimmed moderately. Measured effect: rendered footer height on desktop
   (1280px) went from 431.7px to 321.7px, a ~25% reduction — inside the
   requested 20-30% range. Column layout (grid-template-columns), column
   gap, logo size, colors and content are all unchanged. */
.footer-pro{grid-template-columns:1.3fr .9fr .9fr 1.3fr;gap:48px;padding-top:32px;padding-bottom:26px}
.footer-logo-link{display:inline-block}
.footer-logo{display:block;width:220px;max-width:100%;height:auto}
.footer-brand p{margin-top:12px;line-height:1.65;max-width:36ch;color:var(--on-navy-soft)}
.footer-top h5{color:#49c6d8;letter-spacing:.1em;margin-bottom:10px}
.footer-top a{transition:color .15s ease}
.footer-top a:hover{color:#fff}
.footer-bottom{padding-block:14px;border-color:var(--navy-line)}

/* Insights / newsletter column */
.footer-insights-title{color:#49c6d8}
.footer-insights p{font-size:13px;line-height:1.6;color:var(--on-navy-soft);max-width:34ch;margin-bottom:12px}
.footer-newsletter-row{display:flex;gap:0;max-width:320px;border:1px solid var(--navy-line);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.03)}
.footer-newsletter-row input[type="email"]{flex:1;min-width:0;background:transparent;border:0;padding:10px 14px;font-size:13.5px;color:var(--on-navy);font-family:var(--font-body)}
.footer-newsletter-row input[type="email"]::placeholder{color:var(--on-navy-faint)}
.footer-newsletter-row input[type="email"]:focus-visible{outline:none}
.footer-newsletter-row button{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);border:0;cursor:pointer;transition:background .15s ease}
.footer-newsletter-row button:hover{background:var(--accent-strong)}
.footer-newsletter-row button svg{width:18px;height:18px}
.footer-newsletter-consent{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--on-navy-faint);max-width:300px;cursor:pointer}
.footer-newsletter-consent input{width:auto;margin-top:2px;flex-shrink:0}
.footer-newsletter-msg{font-size:12px;margin-top:6px;min-height:0}
.footer-newsletter-msg[data-state="ok"]{color:#5fd8c4}
.footer-newsletter-msg[data-state="error"]{color:#e8918a}

@media(max-width:900px){.footer-pro{grid-template-columns:1fr 1fr;row-gap:40px}.footer-brand{grid-column:1/-1}}
@media(max-width:560px){.footer-pro{grid-template-columns:1fr;gap:34px}.footer-logo{width:190px}.footer-newsletter-row{max-width:100%}}

/* ================= Feedback & Testimonials (2026-09-25) =================
   Reuses the site's existing tokens/classes (.card, .field, .field-2,
   .consent-row, .form-msg, .badge, .grid-3, .lede, .eyebrow) — nothing here
   introduces a new visual language, only the few element types those
   existing classes don't already cover (star rating input, testimonial
   card layout). */
.star-picker{display:flex;gap:4px}
.star-btn{background:none;border:0;padding:2px;cursor:pointer;color:var(--border-strong);line-height:0;transition:color .12s ease}
.star-btn svg{width:26px;height:26px}
.star-btn.is-active{color:#E3A008}
.star-btn:hover{color:#E3A008}

.t-card{padding:22px}
.t-card-body{display:flex;flex-direction:column;gap:12px;height:100%}
.t-stars{display:flex;gap:2px;color:#E3A008}
.t-stars svg{width:16px;height:16px}
.t-text{color:var(--ink);font-size:14.5px;line-height:1.6;flex:1}
.t-person{display:flex;align-items:center;gap:12px;margin-top:auto}
.t-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.t-meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.t-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.t-linkedin{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent-strong)}
.t-linkedin svg{width:15px;height:15px}
.t-verified{background:rgba(37,130,76,.12);color:var(--success)}