:root{
  --bg:#0b1220; --card:#0f1a2e; --text:#e6f0ff; --muted:#a7b3c7; --line:#1b2a45; --g1:#00e1ff; --g2:#15ff87;
}

/* Base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(21,255,135,.12), transparent 60%),
    linear-gradient(180deg, #09101e 0%, var(--bg) 40%);
}
a{ color:inherit; text-decoration:none }
.container{ max-width:1120px; margin:auto; padding:0 20px }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(180deg, rgba(9,16,30,.85), rgba(9,16,30,.55));
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px }
.brand{ display:flex; align-items:center; gap:12px }
.logo{ height:42px }
.brand strong{ letter-spacing:.2px; font-weight:800 }
.menu{ display:flex; gap:22px; font-weight:600 }
.menu a{ padding:10px 8px; line-height:1; opacity:.9 } 
.menu a:hover{ opacity:1 }

/* Hero */
.hero{ padding:84px 0 64px; position:relative }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:24px }
.eyebrow{ font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); font-size:.8rem }
.title{ font-size:clamp(36px, 6vw, 60px); line-height:1.05; margin:.35em 0 .35em; font-weight:800 }
.title .grad{ background:linear-gradient(90deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.lead{ color:var(--muted); font-size:1.075rem }
.cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap }
.btn{ padding:14px 18px; border-radius:12px; font-weight:700; border:1px solid rgba(255,255,255,.12); background:transparent; cursor:pointer }
.btn.primary{ border:none; background:linear-gradient(90deg,var(--g1),var(--g2)); color:#07121f; box-shadow:0 10px 35px rgba(0,225,255,.25), 0 10px 35px rgba(21,255,135,.25) }
.btn:hover{ transform:translateY(-1px) }

/* Illus (GIF com fade nas bordas) */
.illus-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.illus{
  width:min(520px, 90%);
  filter:
    drop-shadow(0 16px 60px rgba(0,225,255,.15))
    drop-shadow(0 24px 80px rgba(21,255,135,.12));
  /* Fade total nas bordas */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:cover;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  mask-repeat:no-repeat; mask-position:center; mask-size:cover;
}

/* Sections */
section{ padding:72px 0 }
h2{ font-size:clamp(26px,3.2vw,36px); margin:0 0 14px }
.sub{ color:var(--muted); margin:0 0 28px }

/* Cards genéricos */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:18px; padding:22px; min-height:160px
}
.card h3{ margin:0 0 6px }
.card p{ color:var(--muted) }

/* Painéis */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:18px; padding:24px
}

/* Apps */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.app{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px
}
.badge{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; background:rgba(0,225,255,.14); border:1px solid rgba(0,225,255,.35)
}
.app .meta{ color:var(--muted); font-size:.95rem }

/* Contato */
.contact{ display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center }
.input{
  margin:6px 0 14px; width:100%; padding:14px 12px; border-radius:10px;
  border:1px solid var(--line); background:#0d172a; color:var(--text)
}

/* Footer */
.footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:20px; color:var(--muted) }

/* ===================== */
/*    MENU / BURGER      */
/* ===================== */

/* Burger – 3 linhas via CSS (topo/before, meio/span, base/after) */
.burger{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  position:relative; align-items:center; justify-content:center; border-radius:10px;
  z-index:10001; /* acima do painel */
}
.burger::before,
.burger span,
.burger::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  width:22px; height:2px; background:var(--text);
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.burger::before{ top:14px; }   /* linha de cima   */
.burger span{    top:21px; }   /* linha do meio   */
.burger::after{  bottom:14px; }/* linha de baixo  */

/* estado ABERTO: vira X */
.burger[aria-expanded="true"]::before{
  top:21px; transform:translateX(-50%) rotate(45deg);
}
.burger[aria-expanded="true"] span{ opacity:0; }
.burger[aria-expanded="true"]::after{
  bottom:auto; top:21px; transform:translateX(-50%) rotate(-45deg);
}

/* Bloqueia scroll quando o menu abre (classe aplicada via JS) */
body.menu-open{ overflow:hidden; }

/* --- Valores (texto + imagem lado a lado) --- */
.valores-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr; /* desktop: texto maior, imagem menor */
  grid-template-areas:"texto imagem";
  align-items:center; gap:24px;
}
.valores-texto{ grid-area:texto; max-width:60ch; }
.valores-media{ grid-area:imagem; display:flex; justify-content:center; }
.valores-media img{
  width:min(520px, 100%); height:auto; border-radius:12px;
  box-shadow: 0 16px 60px rgba(0,225,255,.12), 0 24px 80px rgba(21,255,135,.10);
}

/* Responsivo (layouts gerais) */
@media (max-width: 900px){
  .hero-grid, .contact{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .apps{ grid-template-columns:1fr 1fr }

  /* valores: 1 coluna e imagem abaixo do texto */
  .valores-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "texto"
      "imagem";
  }
  .valores-media{ margin-top:20px; }
}
@media (max-width: 560px){
  .apps{ grid-template-columns:1fr }
}

/* Mobile: ativa burger e painel “vidro fosco” full-screen */
@media (max-width: 720px){
  .burger{ display:inline-flex; }

  /* Painel vidro: full-screen + blur */
  .menu{
    position: fixed;
    inset: 0;                     /* cobre a tela inteira */
    padding: 84px 16px 16px;      /* espaço p/ header (64px + respiro) */
    display: grid;
    align-content: start;
    gap: 12px;

    color: #fff; /* letras brancas */
    background: rgba(13, 23, 42, 0.55); /* vidro translúcido */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-top: 1px solid rgba(255,255,255,0.08);

    z-index: 10000;

    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .menu.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .menu a{
    color: #fffafa;
    padding: 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.952);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .menu a:active{ background: rgba(255,255,255,0.10); }
}

/* Acessibilidade visual escondida */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* hero compacto da página de projeto */
.hero--compact{ padding:56px 0 32px; }

/* cartão do formulário */
.form-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

/* grid do form */
.project-form{ width:100%; }
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:700; font-size:.95rem; }
.field input,
.field textarea{
  width:100%;
  padding:14px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0d172a;
  color:var(--text);
}
.field textarea{ resize: vertical; }
.field--full{ grid-column: 1 / -1; }

.check-inline{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; color:var(--muted); margin-top:6px;
}
.check-inline input{ width:18px; height:18px; }

.form-actions{
  margin-top: 16px;
  display:flex; gap:12px; flex-wrap:wrap;
}

/* responsivo do form */
@media (max-width: 720px){
  .form-grid{ grid-template-columns:1fr; }
}