:root{
  --bg:#f5f7ff;
  --text:#0b1220;
  --muted:#445468;

  --card:#ffffff;
  --border: rgba(15,23,42,0.12);
  --shadow: 0 22px 55px rgba(2,6,23,0.14);

  /* VIBRANT BRAND */
  --amber:#fbbf24;
  --amber2:#f97316;
  --blue:#2563eb;
  --purple:#7c3aed;
  --pink:#ec4899;
  --teal:#06b6d4;
  --green:#22c55e;

  --radius:24px;
  --max:1200px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1100px 800px at 15% -10%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(1100px 820px at 85% -5%, rgba(124,58,237,.24), transparent 55%),
    radial-gradient(950px 760px at 60% 10%, rgba(251,191,36,.22), transparent 60%),
    radial-gradient(900px 700px at 35% 35%, rgba(236,72,153,.14), transparent 55%),
    var(--bg);
  line-height:1.55;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
a{ color:inherit; }
.muted{ color:var(--muted); }
.small{ font-size:.92rem; }
.right{ display:flex; justify-content:flex-end; margin-top:14px; }
.center{ display:flex; justify-content:center; margin-top:18px; }
.link{ color:#1d4ed8; text-decoration:none; font-weight:800; }
.link:hover{ text-decoration:underline; }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(90deg, var(--amber), var(--amber2), var(--pink));
  box-shadow: 0 14px 34px rgba(2,6,23,.18);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; font-weight:950; letter-spacing:.2px;
}
.brand__logo{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 28px rgba(2,6,23,.16);
}
.brand__name{ white-space:nowrap; }

.nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.nav__link{
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  color: rgba(11,18,32,.92);
}
.nav__link:hover{ background: rgba(255,255,255,.28); }
.nav__link.is-active{ background: rgba(255,255,255,.40); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:900;
  border: 1px solid rgba(15,23,42,.14);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(2,6,23,.14); filter: saturate(1.15); }
.btn--block{ width:100%; }

.btn--primary{
  background: linear-gradient(90deg, var(--amber), var(--amber2));
}
.btn--dark{
  background:#0b1220;
  color:#fff;
  border-color: rgba(255,255,255,.12);
}
.btn--soft{
  background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(124,58,237,.12));
  border-color: rgba(37,99,235,.22);
}

/* hero */
.hero{ padding: 34px 0 10px; }
.hero__inner{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 26px;
  align-items:center;
}
.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,.16), rgba(236,72,153,.14));
  border: 1px solid rgba(37,99,235,.26);
  font-weight:900;
}
.hero__title{
  margin: 14px 0 10px;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height:1.02;
  letter-spacing:-.8px;
}
.hero__grad{
  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{ margin:0; max-width: 60ch; font-size:1.05rem; }
.hero__buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.stat{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}
.stat__num{ font-size:1.55rem; font-weight:950; }
.stat__label{ color:var(--muted); font-weight:800; }

.hero__right{ display:flex; justify-content:flex-end; }
.heroCard{
  width: min(420px, 100%);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 18px;
}
.heroCard__badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251,191,36,.28), rgba(249,115,22,.22));
  border: 1px solid rgba(249,115,22,.30);
  font-weight:900;
}
.heroCard__img{
  height: 220px;
  border-radius: 18px;
  margin-top: 14px;
  background:
    radial-gradient(520px 260px at 30% 20%, rgba(37,99,235,.42), transparent 60%),
    radial-gradient(520px 280px at 70% 70%, rgba(249,115,22,.40), transparent 60%),
    radial-gradient(520px 280px at 40% 80%, rgba(236,72,153,.26), transparent 65%),
    linear-gradient(135deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
  border: 1px solid rgba(15,23,42,.10);
}
.heroCard__foot{ margin-top: 12px; display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:800; }
.dot{ width:10px; height:10px; border-radius:999px; background: var(--blue); display:inline-block; }

/* sections */
.section{ padding: 34px 0; }
.section--tint{
  background: linear-gradient(180deg, rgba(37,99,235,.085), rgba(124,58,237,.070));
  border-top: 1px solid rgba(15,23,42,.05);
  border-bottom: 1px solid rgba(15,23,42,.05);
}
.section__head h2{ margin:0; font-size: 2rem; }
.section__head p{ margin: 6px 0 0; color: var(--muted); }

.grid{
  display:grid;
  gap: 14px;
  margin-top: 18px;
}
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

.card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 16px 36px rgba(2,6,23,.11);
}
.card h3{ margin:0 0 10px; }
.card__top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tag{
  font-weight:950;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(6,182,212,.16));
  border: 1px solid rgba(34,197,94,.22);
}
.meta{ margin: 12px 0 6px; color: rgba(11,18,32,.84); font-weight:800; }

.card--cta{
  background: linear-gradient(135deg, rgba(251,191,36,.26), rgba(37,99,235,.16), rgba(236,72,153,.10));
}

.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 8px 0; }

/* split / quote */
.split{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 18px;
  align-items:start;
}
.big{ margin: 6px 0 12px; font-size:1.2rem; }
.quote{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 16px 36px rgba(2,6,23,.11);
}
.quote__text{ margin:0 0 14px; font-size:1.05rem; }
.quote__by{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:44px; height:44px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight:950;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(236,72,153,.14));
  border: 2px solid rgba(37,99,235,.26);
}
.quote__name{ font-weight:950; }

/* steps + alert */
.steps{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.step{ display:flex; gap: 14px; align-items:flex-start; }
.step__num{
  width:46px; height:46px; border-radius: 16px;
  display:grid; place-items:center;
  font-weight:950;
  background: linear-gradient(135deg, rgba(37,99,235,.20), rgba(124,58,237,.18));
  border: 1px solid rgba(37,99,235,.24);
}
.alert{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(251,191,36,.26), rgba(249,115,22,.18));
  border: 1px solid rgba(249,115,22,.28);
  font-weight:800;
}

/* chips + voice */
.chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(124,58,237,.16), rgba(37,99,235,.14));
  border: 1px solid rgba(124,58,237,.22);
  font-weight:950;
  margin-bottom: 10px;
}
.voiceTop{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
.voiceName{ font-weight:950; }

/* CTA */
.cta{
  padding: 34px 0;
  background: linear-gradient(135deg, rgba(251,191,36,.26), rgba(37,99,235,.18), rgba(236,72,153,.12));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; }
.cta__buttons{ display:flex; gap: 12px; flex-wrap:wrap; }

/* footer */
.footer{
  background:#0b1220;
  color: rgba(255,255,255,.88);
  padding: 34px 0 24px;
}
.footer__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.footer h3, .footer h4{ margin:0 0 10px; }
.footer__links{ display:grid; gap: 8px; }
.footer__links a{ color: rgba(255,255,255,.86); text-decoration:none; font-weight:800; }
.footer__links a:hover{ text-decoration:underline; }

.newsletter{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.newsletter input{
  flex: 1 1 180px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  outline:none;
}
.newsletter input::placeholder{ color: rgba(255,255,255,.70); }

.footer__bottom{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap: 10px;
}
.banner{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251,191,36,.22), rgba(236,72,153,.14));
  border: 1px solid rgba(251,191,36,.28);
  width: fit-content;
  font-weight: 1000;
}
.footer__bottom a{ color: rgba(255,255,255,.90); }

/* responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__right{ justify-content:flex-start; }
  .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .nav{ display:none; } /* keep simple on mobile */
  .stats{ grid-template-columns: 1fr; }
  .grid--3, .grid--2{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
}