:root{
  --bg:#FAF7F2;          /* creme, base */
  --fg:#0f2f25;          /* texto escuro */
  --primary:#245646;     /* verde Tech Sisters */
  --primary-ink:#1e4639; /* variação para hover */
  --muted:#f0ebe2;       /* seção alternada */
  --card:#ffffff;
  --ring: #9fd3c1;       /* foco/acessibilidade */
  --shadow: 0 8px 24px rgba(16,36,30,.12);
  --radius: 18px;
}

*{ box-sizing:border-box }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
}

h1,h2,h3{ font-family:Poppins, Inter, system-ui, sans-serif; line-height:1.2; margin:0 0 .5rem }
h1{ font-size: clamp(2rem, 4.5vw, 3.25rem) }
h2{ font-size: clamp(1.5rem, 3vw, 2.25rem) }
h3{ font-size: clamp(1.1rem, 2.2vw, 1.35rem) }
p{ margin:.5rem 0 1rem }

.container{ width:min(1100px, 92%); margin-inline:auto }

.section{ padding:72px 0 }
.section.muted{ background:var(--muted) }

.grid{ display:grid; gap:24px }
.grid.two{ grid-template-columns: 1fr; }
.grid.three{ grid-template-columns: 1fr; }
@media (min-width: 768px){
  .grid.two{ grid-template-columns: 1.3fr .7fr }
  .grid.three{ grid-template-columns: repeat(3, 1fr) }
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(250,247,242,.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e9e2d6;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg) }
.brand-logo{ width:40px; height:40px; object-fit:contain }
.brand-name{ font-weight:700; font-family:Poppins, sans-serif; font-size:1.25rem }

.nav{ display:flex; gap:1rem; align-items:center }
.nav a{ text-decoration:none; color:var(--fg); font-weight:600 }
.nav a:hover{ color:var(--primary) }

/* Hero */
.hero{ position:relative; overflow:hidden; padding:64px 0 48px }
.hero-inner{ display:grid; gap:28px; align-items:center; grid-template-columns: 1fr }
.hero-copy .lead{ font-size: clamp(1rem, 1.8vw, 1.15rem) }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px }
.hero-art{ display:flex; justify-content:center }
.hero-art img{ width:min(320px, 70vw); filter: drop-shadow(var(--shadow)) }

@media (min-width: 900px){
  .hero-inner{ grid-template-columns: 1.1fr .9fr }
  .hero{ padding:88px 0 64px }
}

/* Decorative underline */
.underline{
  background: linear-gradient(180deg, transparent 70%, #d9efe7 0);
  border-radius: 6px;
  padding: 0 .2rem;
}

/* Cards */
.cards .card{
  background:var(--card);
  padding:20px;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  border:1px solid #e9e2d6;
}
.card.emphasis{
  background: linear-gradient(180deg, #ffffff 0, #f6faf7 100%);
}

/* Bullets */
.bullets{ padding-left:1.1rem; margin: .5rem 0 0 }
.bullets li{ margin:.35rem 0 }

/* CTA */
.cta{
  background: linear-gradient(180deg, #ecf6f2 0, #f8faf9 100%);
  border-top: 1px solid #e4eee9;
  border-bottom: 1px solid hsl(150, 23%, 91%);
}
.cta-inner{ text-align:center }
.form{ display:flex; gap:10px; justify-content:center; margin:18px 0 12px; flex-wrap:wrap }
.form input{
  min-width:260px; padding:12px 14px; border-radius:12px; border:1.5px solid #c1d9cf; outline:none;
}
.form input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }
.socials{ display:flex; gap:10px; justify-content:center; align-items:center; opacity:.9 }
.socials a{ color:var(--primary); font-weight:600; text-decoration:none }
.socials a:hover{ color:var(--primary-ink) }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 18px; border-radius:14px; border:2px solid var(--primary);
  background:var(--primary); color:#fff; font-weight:700; text-decoration:none;
  transition: transform .04s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--primary-ink); border-color:var(--primary-ink); transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn.btn-ghost{ background:transparent; color:var(--primary); }
.btn.btn-ghost:hover{ background:#e2f0ea }
.btn.btn-small{ padding:8px 12px;color: var(--card); font-size:.95rem }
.btn.btn-small:hover{ background: var(--bg);}

/* Footer */
.site-footer{ padding:28px 0; text-align:center; font-size:.95rem; color:#2b3b35 }

/* Acessibilidade extra */
.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;
}

/* Simple wave at hero bottom */
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:24px;
  background:
    radial-gradient(50px 12px at 25px 0, var(--bg) 98%, transparent 100%),
    radial-gradient(50px 12px at 75px 0, var(--bg) 98%, transparent 100%),
    linear-gradient(var(--bg), var(--bg));
  background-size:100px 12px, 100px 12px, 100% 12px;
  background-repeat:repeat-x;
  opacity:.8;
}