/* ================================
   Wabe — Visual Refresh (clean/dark)
   --------------------------------
   classes esperadas no HTML:
   .site-header .brand .main-nav a
   .hero .hero-card
   .section .card
   .glass
   .container
   .btn(.primary|.ghost)
   .site-footer
   ================================ */

/* ---------- Base / tokens ---------- */
:root{
  /* Brand blues / roxos */
  --indigo-700: #302a75;        /* roxo */
  --indigo-650: #3a33a7;        /* logo topo blue */
  --indigo-800: #262254;        /* logo bottom blue */

  /* Rosa (CTA) */
  --rose: #f11251;

  /* Fundos claros (bg) */
  --bg-0: #f6f7f9;              /* geral */
  --bg-1: #f5f5f5;              /* alternância / seções */

  /* Texto */
  --text: #111217;              /* corpo (melhor contraste) */
  --muted: #aaa9ab;             /* texto secundário */

  /* Derivados / efeitos */
  --glass: rgba(255,255,255,.7);
  --glass-strong: rgba(255,255,255,.85);
  --stroke: rgba(48,42,117,.18); /* leve tom do roxo na borda */
  --shadow: 0 10px 30px rgba(38,34,84,.12);
  --radius: 18px;
  --radius-lg: 26px;
  --max: 1080px;
}

/* Google fonts se quiser (opcional)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Lora:wght@600;700&display=swap');
*/

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(58,51,167,.06) 0, transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(241,18,81,.05) 0, transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--max); padding:0 24px; margin:0 auto}
.section{padding:80px 0}
.section.alt{background: linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent)}
.card{border-radius:var(--radius); padding:32px; background:transparent}
.card.wide{padding:40px}

/* ---------- Glass effect ---------- */
.glass{
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(58,51,167,.92), rgba(48,42,117,.92));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand{ color:#fff; }
.main-nav a{ color: #e9e9ef; }
.main-nav a:hover{ background: rgba(255,255,255,.14); color:#fff; }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text);
  padding:8px 12px; border-radius:12px;
}
.main-nav a{
  color:var(--muted); text-decoration:none; margin-left:22px; font-weight:600;
  padding:8px 10px; border-radius:10px; transition:.2s ease;
}
.main-nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}

/* ---------- Hero ---------- */
.hero{
  padding:120px 0 80px;
  position:relative;
  overflow:hidden;
  background: red !important;

}

.hero:before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:
    radial-gradient(1200px 500px at 60% 30%, rgba(58,51,167,.20) 0, transparent 60%),
    radial-gradient(900px 400px at 40% 20%, rgba(241,18,81,.18) 0, transparent 60%);
  filter: blur(28px);
  z-index:-1;
}
.glass{
  background: linear-gradient(180deg, var(--glass), var(--glass-strong));
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.hero-card h1{ color: var(--indigo-800); }
.hero-card p{ color: var(--muted); }

/* ---------- Typography ---------- */
h1,h2,h3{margin:0 0 12px}
h2{font-size:clamp(26px, 3.5vw, 34px); font-weight:800}
h3{font-size:clamp(20px, 2.6vw, 24px); font-weight:700}
p{margin:0 0 12px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:14px; text-decoration:none;
  font-weight:700; border:1px solid transparent; transition:.2s ease;
}
.btn.primary{
  background: var(--rose); color:#fff; border-color:transparent;
  box-shadow: 0 8px 20px rgba(241,18,81,.25);
}
.btn.primary:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(241,18,81,.32) }
.btn.ghost{
  background: transparent; color: var(--indigo-800);
  border:1px solid rgba(48,42,117,.35);
}
.btn.ghost:hover{ background: rgba(58,51,167,.08) }


/* ---------- Lists / bullets ---------- */
.section.alt{ background: linear-gradient(180deg, var(--bg-1), var(--bg-0)) }

ul.bullets li{
  border:1px solid rgba(48,42,117,.18);
  background: #fff;
}
ul.bullets li:before{
  background: conic-gradient(from 180deg, var(--indigo-650), var(--indigo-700));
  box-shadow:0 0 0 2px rgba(58,51,167,.18) inset;
}


/* ---------- Services grid (cards) ---------- */
.services{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.service{
  grid-column: span 12; padding:22px;
}
@media (min-width:720px){
  .service{grid-column: span 6}
}
@media (min-width:1024px){
  .service{grid-column: span 3}
}
.service .title{font-weight:700; margin-bottom:6px}
.service p{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:40px; padding:28px 0;
  background: linear-gradient(180deg, var(--indigo-700), var(--indigo-800));
  color:#e9e9ef; border-top:1px solid rgba(255,255,255,.14);
}

/* ---------- Small tweaks ---------- */
a{color:var(--brand)}
a:hover{opacity:.9}
img{max-width:100%; height:auto; border-radius:12px}