:root{
    --bg:#121212;
    --bg-alt:#0d0d0d;
    --surface:#1e1e1e;
    --surface-light:#2a2a2a;
    --surface-lighter:#363636;
    --primary:#33ff00;
    --primary-600:#2eeb00;
    --primary-700:#26c700;
    --text:#f5f5f5;
    --muted:#a3a3a3;
    --muted-2:#7a7a7a;
    --border:rgba(255,255,255,.09);
    --border-strong:rgba(255,255,255,.16);
    --radius:14px;
    --maxw:1180px;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Segoe UI",Inter,Roboto,Arial,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }
  a{color:inherit; text-decoration:none;}
  img,svg{display:block;}
  .container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  section{padding:96px 0;}
  h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em;}
  h2.section-title{font-size:clamp(28px,4vw,42px); text-align:center; margin-bottom:12px;}
  .section-kicker{
    text-align:center; text-transform:uppercase; letter-spacing:.18em;
    font-size:12px; font-weight:700; color:var(--primary); margin-bottom:14px;
  }
  .section-sub{text-align:center; color:var(--muted); max-width:640px; margin:0 auto 56px; font-size:17px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 32px; border-radius:10px; font-weight:700; font-size:15px;
    cursor:pointer; border:2px solid transparent; transition:.2s transform ease,.2s opacity ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--primary); color:#08130a;}
  .btn-primary:hover{opacity:.92;}
  .btn-outline{border-color:var(--border-strong); color:var(--text); background:transparent;}
  .btn-outline:hover{border-color:var(--primary); color:var(--primary);}

  /* ===== Top utility bar ===== */
  .topbar{
    background:var(--bg-alt); border-bottom:1px solid var(--border);
    font-size:13px; color:var(--muted);
  }
  .topbar .container{display:flex; justify-content:space-between; align-items:center; padding:9px 24px;}
  .topbar .contacts{display:flex; gap:22px; flex-wrap:wrap;}
  .topbar .contacts span{display:flex; align-items:center; gap:6px;}
  .topbar .contacts svg{width:14px; height:14px; stroke:var(--primary);}

  /* ===== Header / Nav ===== */
  header.main{
    position:sticky; top:0; z-index:50;
    background:rgba(18,18,18,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
  .logo{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800;}
  .logo-mark{
    width:38px; height:38px; border-radius:9px; background:var(--primary);
    display:flex; align-items:center; justify-content:center;
    color:#08130a; font-weight:900; font-size:19px;
  }
  nav.links{display:flex; gap:34px; font-weight:600; font-size:14.5px;}
  nav.links a{color:var(--muted); transition:.2s color ease; position:relative;}
  nav.links a:hover, nav.links a.active{color:var(--text);}
  nav.links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-20px; height:2px; background:var(--primary);
  }
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px;}
  .burger span{width:24px; height:2px; background:var(--text);}

  /* ===== Side dot nav ===== */
  .dotnav{
    position:fixed; right:26px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:16px; z-index:40;
  }
  .dotnav a{
    width:10px; height:10px; border-radius:50%; border:2px solid var(--border-strong);
    display:block; transition:.2s all ease;
  }
  .dotnav a.active{background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 4px rgba(51,255,0,.15);}

  /* ===== Hero ===== */
  .hero{
    position:relative; padding:120px 0 100px;
    background:
      radial-gradient(circle at 15% 20%, rgba(51,255,0,.10), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(51,255,0,.07), transparent 45%),
      var(--bg);
  }
  .hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; background:var(--surface);
    border:1px solid var(--border-strong); padding:7px 14px; border-radius:999px;
    font-size:13px; color:var(--primary); font-weight:700; margin-bottom:22px;
  }
  .hero h1{font-size:clamp(34px,5vw,54px); line-height:1.12; margin-bottom:20px;}
  .hero h1 span{color:var(--primary);}
  .hero p.lead{font-size:19px; color:var(--muted); margin-bottom:32px; max-width:520px;}
  .hero .cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px;}
  .trust-row{display:flex; gap:28px; flex-wrap:wrap;}
  .trust-row div{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted);}
  .trust-row svg{width:16px; height:16px; stroke:var(--primary); flex-shrink:0;}

  .hero-card{
    position:relative; background:linear-gradient(160deg,var(--surface),#141414);
    border:1px solid var(--border-strong); border-radius:20px; padding:34px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  }
  .hero-card .stat-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
  .hero-card .stat-top .label{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2);}
  .hero-card .stat-top .value{font-size:30px; font-weight:800; color:var(--primary);}
  .mini-bars{display:flex; align-items:flex-end; gap:8px; height:110px; margin-bottom:22px;}
  .mini-bars div{flex:1; border-radius:6px 6px 0 0; background:var(--surface-light);}
  .mini-bars div.hi{background:var(--primary);}
  .hero-card .rows div{
    display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--border);
    font-size:14px; color:var(--muted);
  }
  .hero-card .rows div b{color:var(--text); font-weight:600;}
  .float-badge{
    position:absolute; bottom:-30px; right:-30px; background:var(--primary); color:#08130a;
    border-radius:14px; padding:14px 20px; font-weight:800; box-shadow:0 14px 30px -8px rgba(51,255,0,.4);
    text-align:center; line-height:1.15;
  }
  .float-badge .num{font-size:22px;}
  .float-badge .txt{font-size:11px; font-weight:700; opacity:.8;}

  /* ===== Logos strip ===== */
  .strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); padding:26px 0;}
  .strip .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; color:var(--muted-2); font-size:13px; letter-spacing:.06em;}

  /* ===== Empresa ===== */
  .about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
  .about-visual{
    aspect-ratio:1/1; border-radius:20px; background:linear-gradient(160deg,var(--surface),#141414);
    border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .about-visual .big-mark{font-size:96px; font-weight:900; color:var(--primary); opacity:.9;}
  .about-visual::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(51,255,0,.14), transparent 55%);
  }
  .about-text p{color:var(--muted); font-size:16.5px; margin:0 0 16px;}
  .mission-box{
    background:var(--surface); border-left:4px solid var(--primary); border-radius:10px; padding:20px 22px; margin-top:14px;
  }
  .mission-box .k{text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; color:var(--muted-2); margin-bottom:6px; font-weight:700;}
  .mission-box .v{font-size:16px; font-weight:600;}

  /* ===== Serviços ===== */
  .services-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:22px;}
  .svc-card{
    flex:1 1 320px; max-width:360px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:30px 26px; transition:.2s border-color ease,.2s transform ease;
    display:flex; flex-direction:column;
  }
  .svc-card:hover{border-color:var(--primary); transform:translateY(-4px);}
  .svc-icon{
    width:52px; height:52px; border-radius:12px; background:rgba(51,255,0,.12);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .svc-icon svg{width:26px; height:26px; stroke:var(--primary);}
  .svc-card h3{font-size:18.5px; margin-bottom:10px;}
  .svc-card p{color:var(--muted); font-size:14.5px; margin:0 0 18px; flex:1;}
  .svc-link{
    display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700;
    color:var(--primary); margin-top:auto;
  }

  /* ===== Redes Sociais ===== */
  .social-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto;}
  .social-card{
    display:flex; align-items:center; gap:20px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px; transition:.2s border-color ease,.2s transform ease;
  }
  .social-card:hover{border-color:var(--primary); transform:translateY(-4px);}
  .social-icon{
    width:56px; height:56px; border-radius:14px; background:rgba(51,255,0,.12); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .social-icon svg{width:28px; height:28px; stroke:var(--primary);}
  .social-card h3{font-size:18px; margin-bottom:6px;}
  .social-card p{color:var(--muted); font-size:14px; margin:0;}

  /* ===== Contato ===== */
  .contact-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px;}
  .contact-info .item{display:flex; gap:16px; margin-bottom:26px;}
  .contact-info .ic{
    width:44px; height:44px; border-radius:11px; background:rgba(51,255,0,.12); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .contact-info .ic svg{width:20px; height:20px; stroke:var(--primary);}
  .contact-info .t{font-weight:700; font-size:14.5px; margin-bottom:3px;}
  .contact-info .d{color:var(--muted); font-size:14px;}
  .contact-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  .field{display:flex; flex-direction:column; gap:7px;}
  .field label{font-size:13px; font-weight:600; color:var(--muted);}
  .field label .opt{font-weight:400; color:var(--muted-2);}
  .field input, .field textarea{
    background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:9px; padding:12px 14px;
    color:var(--text); font-size:14.5px; font-family:inherit; resize:vertical;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--primary);}
  .full{grid-column:1/-1;}

  /* ===== Modal: aviso de área em desenvolvimento ===== */
  .dev-modal{
    position:fixed; inset:0; z-index:100; padding:24px;
    display:flex; align-items:center; justify-content:center;
  }
  .dev-modal[hidden]{display:none;}
  .dev-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px);}
  .dev-modal__box{
    position:relative; z-index:1; width:100%; max-width:420px; text-align:center;
    background:linear-gradient(160deg,var(--surface),#0e0e0e); border:1px solid var(--border-strong);
    border-radius:20px; padding:40px 32px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  }
  .dev-modal__mark{
    width:52px; height:52px; margin:0 auto 18px; border-radius:12px; background:var(--primary);
    display:flex; align-items:center; justify-content:center; color:#08130a; font-weight:900; font-size:24px;
  }
  .dev-modal__box h3{font-size:20px; margin-bottom:10px;}
  .dev-modal__box p{color:var(--muted); font-size:15px; margin:0;}
  .dev-modal__box p:empty{display:none;}
  .dev-modal__close{
    position:absolute; top:12px; right:16px; background:none; border:none; padding:4px;
    color:var(--muted); font-size:24px; line-height:1; cursor:pointer;
  }
  .dev-modal__close:hover{color:var(--text);}

  /* ===== Footer ===== */
  footer{background:var(--bg-alt); border-top:1px solid var(--border); padding:56px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:40px;}
  footer .desc{color:var(--muted); font-size:14px; margin-top:14px; max-width:280px;}
  footer h4{font-size:14.5px; margin-bottom:16px; color:#d8d8d8;}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  footer ul a{color:var(--muted); font-size:14px;}
  footer ul a:hover{color:var(--primary);}
  .socials{display:flex; gap:10px;}
  .socials a{
    width:38px; height:38px; border-radius:9px; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .socials a:hover{border-color:var(--primary);}
  .socials svg{width:17px; height:17px; stroke:var(--muted);}
  .footer-bottom{border-top:1px solid var(--border); padding-top:22px; text-align:center; color:var(--muted-2); font-size:13px;}

  /* ===== Contact form feedback (added for real submission) ===== */
  .form-msg{
    display:none; border-radius:9px; padding:12px 14px; font-size:14px; margin-bottom:16px;
  }
  .form-msg.show{display:block;}
  .form-msg.ok{background:rgba(51,255,0,.12); border:1px solid rgba(51,255,0,.35); color:#c8ffb8;}
  .form-msg.err{background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.35); color:#ffb8b8;}
  .field-validation-error{display:block; color:#ff8a8a; font-size:12.5px; margin-top:4px;}
  .btn[disabled]{opacity:.6; cursor:not-allowed; transform:none;}
  .hp-field{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; overflow:hidden;}

  /* ===== Botão flutuante do WhatsApp ===== */
  .wa-fab{
    position:fixed; right:24px; bottom:24px; z-index:95;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#25D366; color:#fff;
    box-shadow:0 12px 28px -6px rgba(37,211,102,.55);
    transition:.2s transform ease,.2s bottom ease;
  }
  .wa-fab:hover{transform:translateY(-3px);}
  .wa-fab svg{width:32px; height:32px;}
  body.cookie-open .wa-fab{bottom:104px;}

  /* ===== Aceite de cookies ===== */
  .cookie-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px;
    padding:16px 24px; background:var(--surface); border-top:1px solid var(--border-strong);
    box-shadow:0 -12px 30px -18px rgba(0,0,0,.7);
  }
  .cookie-bar[hidden]{display:none;}
  .cookie-bar p{margin:0; max-width:640px; color:var(--muted); font-size:13.5px;}
  .cookie-bar p a{color:var(--primary); font-weight:600;}
  .cookie-bar__actions{display:flex; gap:12px; flex-shrink:0;}
  .cookie-bar__actions .btn{padding:10px 22px; font-size:13.5px;}

  /* ===== Páginas institucionais (Termos / Privacidade / Cookies) ===== */
  .legal-header{background:var(--bg-alt); border-bottom:1px solid var(--border);}
  .legal-header .container{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
  .legal-header .back{color:var(--muted); font-size:14px;}
  .legal-header .back:hover{color:var(--primary);}
  .legal{max-width:820px; margin:0 auto; padding:64px 24px 120px;}
  .legal h1{font-size:clamp(28px,4vw,40px); margin-bottom:8px;}
  .legal .updated{color:var(--muted-2); font-size:13px; margin-bottom:40px;}
  .legal h2{font-size:19px; margin:36px 0 12px;}
  .legal p{color:var(--muted); font-size:15px; line-height:1.75; margin:0 0 16px;}
  .legal ul{margin:0 0 16px; padding-left:22px;}
  .legal li{color:var(--muted); font-size:15px; line-height:1.75; margin-bottom:8px;}
  .legal a{color:var(--primary);}
  .legal b{color:var(--text); font-weight:600;}

  @media (max-width:960px){
    section{padding:80px 0;}
    .hero .container, .about-grid, .contact-wrap{grid-template-columns:1fr;}
    .social-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .about-visual{order:-1; aspect-ratio:16/9;}
    .about-visual .big-mark{font-size:72px;}
    .dotnav{display:none;}
    nav.links{
      position:fixed; top:71px; left:0; right:0; background:var(--bg);
      flex-direction:column; padding:22px 24px; gap:18px; border-bottom:1px solid var(--border);
      box-shadow:0 20px 30px -18px rgba(0,0,0,.7);
      transform:translateY(-130%); transition:.25s transform ease; z-index:49;
    }
    nav.links a.active::after{display:none;}
    nav.links.open{transform:translateY(0);}
    .burger{display:flex;}
    .nav-cta .btn-primary{display:none;}
    .hero{padding:96px 0 80px;}
    .hero .container{gap:44px;}
    .hero p.lead{max-width:none;}
    /* Badge fica pendurado centralizado abaixo do card (evita cortar texto/tela) */
    .float-badge{left:50%; right:auto; bottom:-24px; transform:translateX(-50%);}
  }
  @media (max-width:640px){
    .container{padding:0 18px;}
    section{padding:56px 0;}
    h2.section-title{font-size:25px;}
    .section-sub{font-size:15px; margin-bottom:34px;}

    /* Topbar / Header */
    .topbar .container{flex-wrap:wrap; justify-content:center; gap:2px 16px; padding:8px 18px; text-align:center;}
    .topbar .contacts{gap:6px 16px; justify-content:center;}
    .nav-row{padding:13px 18px;}
    .logo{font-size:19px;}
    .logo-mark{width:34px; height:34px; font-size:17px;}
    nav.links{top:61px;}

    /* Hero */
    .hero{padding:60px 0 56px;}
    .hero .eyebrow{margin-bottom:16px;}
    .hero h1{font-size:28px; line-height:1.2;}
    .hero p.lead{font-size:16px; margin-bottom:24px;}
    .hero .cta-row{flex-direction:column; gap:12px; margin-bottom:26px;}
    .hero .cta-row .btn{width:100%;}
    .trust-row{gap:10px 20px;}
    .hero-card{padding:24px; border-radius:16px;}
    .hero-card .stat-top .value{font-size:25px;}
    .float-badge{bottom:-20px; padding:12px 16px;}
    .float-badge .num{font-size:19px;}

    /* Strip de setores */
    .strip{padding:20px 0;}
    .strip .container{justify-content:center; gap:8px 16px; font-size:11.5px;}

    /* Serviços */
    .svc-card{padding:26px 22px;}

    /* Contato */
    .contact-wrap{gap:32px;}
    .contact-form{padding:22px;}
    .form-row{grid-template-columns:1fr;}
    /* evita o zoom automático do iOS ao focar um campo */
    .field input, .field textarea{font-size:16px;}

    /* Footer */
    .footer-grid{grid-template-columns:1fr; gap:30px; text-align:center;}
    footer .desc{max-width:none;}
    .socials{justify-content:center;}

    /* Modal / Cookies / FAB */
    .dev-modal__box{padding:36px 24px;}
    .wa-fab{right:16px; bottom:16px; width:52px; height:52px;}
    .wa-fab svg{width:29px; height:29px;}
    .cookie-bar{flex-direction:column; align-items:stretch; text-align:left; gap:12px; padding:14px 18px;}
    .cookie-bar p{max-width:none; font-size:13px;}
    .cookie-bar__actions{justify-content:stretch;}
    .cookie-bar__actions .btn{flex:1;}
    body.cookie-open .wa-fab{bottom:150px;}

    /* Páginas institucionais */
    .legal{padding:44px 18px 90px;}
    .legal-header .container{padding:14px 18px;}
  }
  @media (max-width:400px){
    .hero h1{font-size:26px;}
    .topbar .contacts span:nth-child(2){display:none;}
    .btn{padding:14px 24px;}
    .hero-card{padding:20px;}
  }