:root{
        --bg:#0b0c0d;
        --card:#101214;
        --muted:#bfc8cc;
        --accent:#22d4fd;
        --accent-600:#16a6c0;
        --glass: rgba(255,255,255,0.03);
        --radius:12px;
        --gap:1.25rem;
        --container:1200px; /* aumentado para dar mais largura geral */
      }

      *{box-sizing:border-box}
      html,body{height:100%}
      body{
        margin:0;
        font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: linear-gradient(180deg,#060607 0%, #0e1011 60%);
        color:var(--muted);
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        line-height:1.5;
      }

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

      /* Header */
      header.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
      .brand{display:flex;align-items:center;gap:12px}
      .logo{display:inline-block;background:var(--glass);padding:10px;border-radius:10px}
      .site-title{font-family:'Krona One';color:var(--accent);font-size:1.45rem}

      nav.main-nav{display:flex;align-items:center;gap:8px}
      .lang-switch{display:flex;gap:6px}
      /* botões e links principais */
      .btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600;text-decoration:none}
      .btn.ghost{border-color:transparent}
      .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-600));color:#081014;border:0}
      /* hover: apenas realce de cor (leve brilho) e sem sublinhado */
      .btn.primary:hover, .btn.primary:focus{
        filter:brightness(1.06);
        box-shadow:0 8px 24px rgba(34,212,253,0.12);
        text-decoration:none;
        outline: none;
      }
      .btn:hover, .btn:focus{ text-decoration:none }

      /* Hero */
      .hero{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;margin:26px 0;}
      .hero .eyebrow{color:#7fbfd7;font-weight:700;font-size:0.9rem}
      .hero h1{font-family:'Krona One';font-size:2.1rem;margin:6px 0;color:white}
      .hero p{color:var(--muted);font-size:1.05rem}
      .logo-figure{background:linear-gradient(180deg,rgba(34,212,253,0.06),transparent);padding:18px;border-radius:16px;display:flex;align-items:center;justify-content:center}
      .logo-figure img{max-width:100%;height:auto;display:block}

      

      /* Sections */
      section.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:var(--radius);box-shadow:0 6px 24px rgba(2,6,9,0.6);margin-bottom:18px; margin-top: 36px;}
      .section-header{display:flex;align-items:center;gap:12px;}
      .section-title{color:var(--accent);font-weight:700}

  /* grid usada em várias seções; por padrão 3 colunas, usa 4 colunas em telas grandes */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
      @media (min-width:1200px){
        .grid-3.grid-4-desktop{grid-template-columns:repeat(4,1fr)}
      }
      .service{background:linear-gradient(180deg,#09090a,#0f1112);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
      .service h3{margin:0 0 6px;color:#dff8ff}
      .service p{margin:0;color:var(--muted)}

  /* Ajustes específicos para a seção 'Sobre' - mais espaçamento e empilhamento precoce em telas menores */
  /* Espaçamento especial para 'Sobre' — mais arejamento e simetria */
  /* Forçar colunas mais largas usando min-width; cada bloco ocupará mais espaço horizontal
    e em telas menores a grade cai para menos colunas automaticamente. */
  #about .grid-3{gap:48px;grid-template-columns:repeat(4,minmax(240px,1fr))}
  #about .service{padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-start}
  #about .service h3{margin:0 0 12px}

  /* layout da área about: coluna principal + aside */
  /* reduzir um pouco o aside para ampliar a coluna principal onde estão os blocos */
  .about-grid{margin-top:22px;display:grid;grid-template-columns:1fr 260px;gap:32px;align-items:start}
  /* dar mais espaço vertical à seção about para harmonia com outras sections */
  #about{padding-top:48px;padding-bottom:48px}


      /* Contact */
      .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:20px}
      form{display:flex;flex-direction:column;gap:10px}
      input,textarea,select{background:#0b0c0d;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:10px;border-radius:8px}
      input::placeholder,textarea::placeholder{color:#7d8f94}

      footer.site-footer{margin-top:26px;padding:18px 0;text-align:center;color:#0b0c0d;background:linear-gradient(90deg,var(--accent),var(--accent-600));border-radius:10px}

      /* Responsive */
      @media (max-width:980px){
        .hero{grid-template-columns:1fr}
        .contact-grid{grid-template-columns:1fr}
        .grid-3{grid-template-columns:repeat(2,1fr)}
        /* empilha os blocos da seção sobre antes (melhor leitura em mobile) */
        #about .grid-3{grid-template-columns:1fr}
        .about-grid{grid-template-columns:1fr}
      }
      @media (max-width:560px){
        .grid-3{grid-template-columns:1fr}
        header.site-header{flex-direction:column;align-items:flex-start}
        
      }