:root{
  --mint: #BFECE0;
  --mint-dark: #8FD6C3;
  --sun: #F6B73C;
  --sun-dark: #E39B12;
  --ink: #1F2937;
  --slate: #4B5563;
  --white: #FFFFFF;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,0.75); border-bottom:1px solid #e5e7eb; z-index:50;}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:10px 16px}
.nav .spacer{flex:1}
.nav a.btn{padding:10px 14px;border-radius:999px;background:var(--sun);border:1px solid var(--sun-dark); transition:transform .05s ease}
.nav a.btn:active{transform:translateY(1px)}

.hero{background:linear-gradient(180deg, var(--mint), #ffffff 60%)}
.hero .wrap{max-width:1100px;margin:0 auto; padding:64px 16px;display:grid;grid-template-columns:1fr;gap:32px}
.hero h1{font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p.lead{font-size:18px;color:var(--slate);max-width:700px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{background:var(--white);border:1px solid #e5e7eb;border-radius:999px;padding:8px 12px;font-size:14px}

.section{max-width:1100px;margin:0 auto;padding:40px 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0;color:var(--slate)}

.cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;background:var(--sun);border:1px solid var(--sun-dark);padding:12px 16px;border-radius:999px;font-weight:600}
.button.ghost{background:transparent;border-color:#d1d5db}

.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}

.footer{background:#0f172a;color:#e2e8f0}
.footer .inner{max-width:1100px;margin:0 auto;padding:28px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer a{color:#e2e8f0;text-decoration:underline}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}