:root{
  --primary:#F2B705;  /* gold for accents on dark */
  --accent:#1e90ff;   /* blue accent if needed */
  --text:#EAEAEA;
  --muted:#ADB0B6;
  --bg:#0E0F13;       /* dark background */
  --card:#14161C;     /* card background */
  --border:#24262D;   /* subtle border */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:var(--primary);text-decoration:none}
a.button{display:inline-block;padding:.75rem 1rem;border-radius:.5rem;background:var(--primary);color:#111;font-weight:700}
a.button.secondary{background:transparent;border:2px solid var(--primary);color:var(--primary)}
header{position:sticky;top:0;background:#0B0C10;border-bottom:1px solid var(--border);z-index:10}
.container{max-width:1080px;margin:0 auto;padding:0 16px}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .left{display:flex;align-items:center;gap:12px}
.nav img.logo{height:36px;width:auto}
.nav .brand{font-weight:800;letter-spacing:.3px}
.nav ul{display:flex;list-style:none;gap:20px;margin:0;padding:0}
.nav ul li a{font-weight:600}
.hero{padding:72px 0;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.hero p{font-size:18px;color:var(--muted);margin:0 0 24px}
.badge{display:inline-block;background:var(--primary);color:#111;font-weight:800;padding:.25rem .5rem;border-radius:.3rem;margin-bottom:8px}
.section{padding:56px 0;border-top:1px solid var(--border)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid var(--border);border-radius:12px;padding:18px;background:var(--card)}
.card h3{margin:.25rem 0}
.icon{font-weight:900;color:var(--primary)}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.kpi{border:1px dashed var(--border);border-radius:12px;padding:18px}
.cta{background:#111318;border:1px solid var(--border);padding:36px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:16px}
footer{padding:32px 0;border-top:1px solid var(--border);color:var(--muted);font-size:14px;margin-top:56px;background:#0B0C10}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footer-title{font-weight:700;color:var(--text);margin-bottom:8px}
.form{display:grid;gap:12px}
input,textarea,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;font-size:16px;background:#0B0C10;color:var(--text)}
textarea{min-height:120px}
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .grid-3, .proof, .footer-grid{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
}
/* Mobile header + CTA button fix */
@media (max-width: 768px) {
  header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* keep logo + brand together */
  header .nav .left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* nav links on their own row */
  header .nav nav {
    order: 2;
    width: 100%;
  }

  header .nav nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* WhatsApp / Start Your Campaign button row */
  header .nav > div:last-child {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  header .nav > div:last-child .button {
    padding: 6px 12px;
    font-size: 13px;
    width: auto;         /* not full width */
    border-radius: 12px; /* smaller pill */
  }
}