:root{
  --brand-blue-900:#0b1f3a;
  --brand-blue-700:#123e7a;
  --brand-blue-500:#1b6fd1;
  --brand-blue-300:#7ab3ff;
  --brand-ink:#0a0f1a;
  --card-bg: rgba(255,255,255,0.9);
  --stroke: rgba(255,255,255,0.25);
  --shadow: 0 20px 60px rgba(10,15,26,0.35);
  --radius: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(7,13,24,0.85), rgba(7,13,24,0.65)),
    radial-gradient(1200px 800px at 10% 10%, rgba(27,111,209,0.35), transparent 70%),
    radial-gradient(1200px 800px at 90% 90%, rgba(18,62,122,0.45), transparent 70%),
    var(--bg-color, #0b1f3a);
  background-size: cover;
  overflow-x: hidden;
}

/* Fundo com imagem configurável via CSS var */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05) brightness(0.95);
  z-index:-3;
}

/* Textura/grão sutil */
.bg-overlay{
  position:fixed; inset:0; z-index:-2;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: .6;
}

/* Camadas de "pinceladas" (pintura) em SVG */
.paint-layer{
  position:fixed; left:0; right:0; height:28vh; z-index:-1;
  background-repeat: no-repeat;
  background-size: cover;
  opacity:.55;
  mix-blend-mode: screen;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.35));
}
.paint-top{ top:0;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'>\
    <defs>\
      <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
        <stop offset='0%' stop-color='%23123e7a'/>\
        <stop offset='50%' stop-color='%231b6fd1'/>\
        <stop offset='100%' stop-color='%237ab3ff'/>\
      </linearGradient>\
    </defs>\
    <path d='M0,120 C180,90 320,140 500,120 C760,90 880,40 1140,70 C1260,85 1350,110 1440,90 L1440,0 L0,0 Z' fill='url(%23g)'/>\
  </svg>");
}
.paint-bottom{ bottom:0; transform:scaleY(-1);
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'>\
    <defs>\
      <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
        <stop offset='0%' stop-color='%23123e7a'/>\
        <stop offset='50%' stop-color='%231b6fd1'/>\
        <stop offset='100%' stop-color='%237ab3ff'/>\
      </linearGradient>\
    </defs>\
    <path d='M0,120 C180,90 320,140 500,120 C760,90 880,40 1140,70 C1260,85 1350,110 1440,90 L1440,400 L0,400 Z' fill='url(%23g)'/>\
  </svg>");
}

/* Layout principal */
.wrap{
  min-height:100dvh;
  padding: clamp(16px, 3vw, 40px);
  display:grid;
  grid-template-rows: auto 1fr auto;
  place-items:center;
  gap: clamp(16px, 2.5vw, 32px);
}

/* Área da marca (proporção horizontal) */
.brand{ width:min(1100px, 92vw); display:flex; justify-content:center; }
.logo-slot{
  width:min(780px, 88vw);
  aspect-ratio: 4 / 1;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) inset, 0 10px 30px rgba(0,0,0,0.25);
}
.logo-slot img, .logo-slot .logo-svg{
  width:85%; height:auto; display:block;
}

/* Card central elevado */
.card{
  width:min(860px, 92vw);
  background: var(--card-bg);
  color:#0c1220;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
}
.card h1{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  margin:0 0 10px;
  color: var(--brand-blue-900);
  letter-spacing:.2px;
}
.card .muted{
  margin:0 0 20px;
  color:#223;
  line-height:1.6;
  font-size: clamp(15px, 1.2vw, 18px);
}

/* Form */
.cta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 18px 0 8px;
}
.cta input{
  flex:1 1 260px;
  padding:14px 16px;
  border-radius: 14px;
  border:1px solid #dbe6ff;
  font-size:16px;
  outline:none;
}
.cta button{
  flex:0 0 auto;
  padding:14px 18px;
  border-radius: 14px;
  border:0;
  background: linear-gradient(180deg, var(--brand-blue-500), var(--brand-blue-700));
  color:#fff; font-weight:600; cursor:pointer;
  box-shadow: 0 8px 22px rgba(27,111,209,0.35);
  transition: transform .05s ease, filter .2s ease;
}
.cta button:active{ transform: translateY(1px); }
.form-hint{ margin:6px 2px 0; font-size:14px; color:#284; }

/* Contatos */
.contacts{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:10px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:#f2f6ff;
  color:#0b2b57;
  border:1px solid #d7e6ff;
  border-radius: 999px;
  text-decoration:none;
  font-weight:600; font-size:14px;
}
.chip:hover{ background:#e8f1ff; }

/* Rodapé */
.footer{
  opacity:.9; font-size:14px; text-align:center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Acessibilidade util */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsividade extra */
@media (max-width: 420px){
  .logo-slot{ aspect-ratio: 3.4 / 1 }
  .cta button{ width:100% }
}