/*
  ServiClien - Landing Page
  Arquivo principal de estilos.
  Estrutura sugerida para manutenção:
  1. Variáveis globais
  2. Base / reset
  3. Componentes reutilizáveis
  4. Seções da página
  5. Animações
  6. Responsividade
*/
    :root{
      --bg:#f6f9fc;
      --surface:#ffffff;
      --surface-2:#eef4f9;
      --navy:#101a2e;
      --navy-2:#17243b;
      --text:#24324a;
      --muted:#63738a;
      --brand:#15938f;
      --brand-2:#21b5a7;
      --blue:#2e9cdf;
      --line:#dfe7f0;
      --warning:#fff2bd;
      --shadow:0 24px 60px rgba(15, 26, 46, .12);
      --shadow-soft:0 12px 35px rgba(15, 26, 46, .08);
      --radius:24px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 100% 0%, rgba(33,181,167,.16), transparent 28rem),
        radial-gradient(circle at 0% 55%, rgba(46,156,223,.08), transparent 26rem),
        var(--bg);
      line-height:1.65;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:min(var(--max), calc(100% - 40px));margin-inline:auto}

    .header{
      position:sticky;
      top:0;
      z-index:30;
      backdrop-filter:blur(18px);
      background:rgba(246,249,252,.82);
      border-bottom:1px solid rgba(223,231,240,.75);
    }
    .nav{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:210px;
    }
    .brand img{width:210px;height:auto}
    .menu{
      display:flex;
      align-items:center;
      gap:24px;
      color:var(--muted);
      font-weight:700;
      font-size:.92rem;
    }
    .menu a:hover{color:var(--brand)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:13px 20px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:800;
      cursor:pointer;
      transition:.25s ease;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      color:white;
      box-shadow:0 14px 30px rgba(21,147,143,.25);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(21,147,143,.31)}
    .btn-secondary{
      border-color:rgba(255,255,255,.18);
      color:white;
      background:rgba(255,255,255,.08);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
    .hamburger{display:none;border:0;background:transparent;color:var(--navy);font-size:1.8rem}

    .hero{
      min-height:760px;
      display:grid;
      align-items:center;
      color:white;
      background:
        linear-gradient(115deg, rgba(16,26,46,.96), rgba(16,26,46,.91) 48%, rgba(11,55,69,.86)),
        radial-gradient(circle at 80% 20%, rgba(33,181,167,.28), transparent 24rem);
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:auto -120px -170px auto;
      width:520px;
      height:520px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(46,156,223,.25), rgba(33,181,167,.18));
      filter:blur(8px);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:58px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 13px;
      border-radius:999px;
      color:#aaf8ee;
      background:rgba(33,181,167,.11);
      border:1px solid rgba(33,181,167,.25);
      font-size:.84rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .hero h1{
      margin:24px 0 18px;
      font-size:clamp(2.7rem, 6vw, 5.8rem);
      line-height:.98;
      letter-spacing:-.07em;
      font-weight:900;
    }
    .hero h1 span{color:#7fe7df}
    .hero p{
      color:#c3d1e3;
      font-size:clamp(1.05rem, 1.7vw, 1.32rem);
      max-width:690px;
      margin:0 0 32px;
    }
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
    .hero-card{
      background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
      border:1px solid rgba(255,255,255,.16);
      border-radius:32px;
      padding:28px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
    }
    .hero-card img{width:100%;margin-bottom:24px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
    .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .stat{
      padding:18px 14px;
      border-radius:20px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      text-align:center;
    }
    .stat strong{display:block;color:white;font-size:1.55rem;line-height:1;font-weight:900}
    .stat span{color:#b6c9dd;font-size:.78rem;font-weight:700}

    section{padding:92px 0}
    .section-head{max-width:780px;margin-bottom:46px}
    .section-head.center{text-align:center;margin-inline:auto}
    .bar{width:70px;height:5px;background:var(--brand);border-radius:999px;margin-bottom:18px}
    .section-head.center .bar{margin-inline:auto}
    h2{
      margin:0;
      color:var(--navy);
      font-size:clamp(2rem, 4vw, 3.55rem);
      line-height:1.05;
      letter-spacing:-.055em;
      font-weight:900;
    }
    .section-head p{font-size:1.1rem;color:var(--muted);margin:18px 0 0}

    .split{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:54px;
      align-items:center;
    }
    .lead-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:38px;
      box-shadow:var(--shadow-soft);
    }
    .lead-card h3{margin:0 0 14px;color:var(--brand);font-size:1.55rem;line-height:1.25}
    .visual-panel{
      min-height:360px;
      border-radius:34px;
      background:
        linear-gradient(135deg, rgba(46,156,223,.18), rgba(33,181,167,.22)),
        url('https://images.unsplash.com/photo-1581092334651-ddf26d9a09d0?auto=format&fit=crop&w=1200&q=80') center/cover;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .visual-panel::after{
      content:"Laboratórios escolares prontos para uso";
      position:absolute;
      left:24px;right:24px;bottom:24px;
      padding:18px 20px;
      border-radius:20px;
      color:white;
      background:rgba(16,26,46,.76);
      backdrop-filter:blur(12px);
      font-weight:800;
    }

    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .card{
      background:rgba(255,255,255,.78);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:30px;
      box-shadow:0 10px 30px rgba(15,26,46,.06);
      transition:.25s ease;
    }
    .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
    .icon{
      width:54px;height:54px;border-radius:16px;
      display:grid;place-items:center;
      background:rgba(33,181,167,.13);
      color:var(--brand);
      margin-bottom:22px;
    }
    .icon svg{width:27px;height:27px;stroke-width:2.2}
    .card h3{margin:0 0 12px;color:var(--navy);font-size:1.28rem;line-height:1.25}
    .card p{margin:0;color:var(--muted)}

    .coverage{
      background:linear-gradient(180deg, #ffffff, #f4f8fb);
    }
    .area-table{
      overflow:hidden;
      border-radius:22px;
      border:1px solid var(--line);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
    }
    .area-row{
      display:grid;
      grid-template-columns:300px 1fr;
      border-bottom:1px solid var(--line);
    }
    .area-row:last-child{border-bottom:0}
    .area-row > div{padding:22px 26px}
    .area-row.head{background:var(--brand);color:white;font-weight:900}
    .area-row:not(.head) .area-title{font-weight:900;color:var(--navy)}
    .area-desc{color:var(--muted)}
    .area-row.head .area-desc{color:white}

    .presence-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
    .states{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
    .state{
      display:grid;place-items:center;
      height:38px;
      border-radius:10px;
      background:#d7fff7;
      color:var(--brand);
      font-weight:900;
      font-size:.88rem;
    }

    .economy{
      display:grid;
      grid-template-columns:360px 1fr;
      gap:54px;
      align-items:center;
    }
    .percent{
      background:var(--warning);
      border-radius:28px;
      padding:40px 28px;
      text-align:center;
      box-shadow:var(--shadow-soft);
    }
    .percent strong{display:block;color:#e68b00;font-size:6.8rem;line-height:.95;font-weight:900;letter-spacing:-.08em}
    .percent span{display:block;color:#d87a00;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
    .economy-text h3{margin:0 0 12px;color:var(--navy);font-size:2rem;line-height:1.15}
    .economy-text p{margin:0;color:var(--muted);font-size:1.08rem}
    .economy-text b{color:var(--navy)}

    .differentials{display:grid;gap:18px}
    .feature{
      display:grid;
      grid-template-columns:44px 1fr;
      gap:18px;
      align-items:flex-start;
      background:var(--surface);
      border:1px solid var(--line);
      border-left:5px solid var(--brand);
      border-radius:18px;
      padding:22px;
      box-shadow:0 10px 28px rgba(15,26,46,.05);
    }
    .feature h3{margin:0 0 4px;color:var(--navy);font-size:1.14rem}
    .feature p{margin:0;color:var(--muted)}

    .mission{
      color:white;
      background:linear-gradient(115deg, #101a2e, #112339 55%, #063d43);
      position:relative;
      overflow:hidden;
    }
    .mission::before,.mission::after{
      content:'“';
      position:absolute;
      font-size:12rem;
      color:rgba(33,181,167,.2);
      font-weight:900;
      line-height:1;
    }
    .mission::before{left:7%;top:28%}
    .mission::after{content:'”';right:8%;bottom:10%}
    .mission h2{color:white}
    .mission .section-head p{color:#b9c9dd}
    .quote{max-width:880px;margin:0 auto;text-align:center;font-size:clamp(1.55rem, 3vw, 2.6rem);line-height:1.3;font-weight:900;color:#dce9f6}
    .signature{margin-top:28px;text-align:center;color:#37d8ca;font-weight:900;letter-spacing:.14em;text-transform:uppercase}

    .cta{
      padding:86px 0 72px;
    }
    .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
    .contact-card{
      text-align:center;
      padding:26px 18px;
      border-radius:20px;
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:0 10px 26px rgba(15,26,46,.05);
    }
    .contact-card .icon{margin:0 auto 14px;background:transparent;color:var(--brand)}
    .contact-card h3{margin:0 0 4px;color:var(--navy);font-size:1rem}
    .contact-card p{margin:0;color:var(--muted);font-size:.93rem}

    footer{
      padding:30px 0;
      background:#0b1220;
      color:#aab8c9;
      font-size:.92rem;
    }
    .footer-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
    .footer-inner img{width:180px;filter:brightness(0) invert(1);opacity:.9}

    [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
    [data-reveal].show{opacity:1;transform:none}

    @media (max-width: 980px){
      .hamburger{display:block}
      .menu{
        position:fixed;
        inset:78px 18px auto;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
        border-radius:20px;
        background:white;
        box-shadow:var(--shadow-soft);
        border:1px solid var(--line);
      }
      .menu.open{display:flex}
      .nav-actions .btn{display:none}
      .hero{min-height:auto;padding:86px 0}
      .hero-grid,.split,.presence-grid,.economy{grid-template-columns:1fr}
      .cards,.contact-grid{grid-template-columns:repeat(2,1fr)}
      .area-row{grid-template-columns:1fr}
      .area-row > div{padding:18px 22px}
      .area-row.head .area-desc{display:none}
    }
    @media (max-width: 620px){
      .container{width:min(100% - 28px, var(--max))}
      .brand img{width:172px}
      section{padding:70px 0}
      .cards,.contact-grid,.stat-grid{grid-template-columns:1fr}
      .states{grid-template-columns:repeat(2,1fr)}
      .lead-card,.card{padding:24px}
      .percent strong{font-size:5rem}
      .hero-actions .btn{width:100%}
    }