@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

:root{
  /* New brand gradient tuned to the provided image */
  --brand-teal: #2EC4B6; /* soft teal/cyan */
  --brand-purple: #8A3BD8; /* vivid purple */
  --brand-teal-2: #3adcc8; /* lighter highlight */
  --text-white: #ffffff;
}
body{font-family: 'Cairo', "Segoe UI", Tahoma, Arial, sans-serif;background:#f4f6f8}
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,0.06);}
.site-brand{display:flex;align-items:center;gap:.75rem}
.site-brand img{height:44px}

.hero-card{
  display:block;
  width:100%;
  border-radius:14px;
  padding:28px 20px;
  color:var(--text-white);
  background: linear-gradient(120deg, var(--brand-teal) 0%, var(--brand-teal-2) 30%, rgba(122,56,216,0.95) 70%, var(--brand-purple) 100%);
  box-shadow:0 10px 30px rgba(0,0,0,0.14);
  position:relative;
  border: 3px solid rgba(255,255,255,0.12);
}
.hero-card .small-label{opacity:.9;font-weight:600}
.hero-card .big-number{font-size:48px;font-weight:700;margin:18px 0}
.hero-card .cta{background:#ffffff;color:#2b2b2b;border-radius:10px;padding:10px 16px;font-weight:800;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.hero-card .footer-note{position:absolute;bottom:12px;left:16px;opacity:.95}

/* make cards align nicely on small screens */
.stats-grid .card{border-radius:10px}

/* small responsive tweaks */
@media (max-width:576px){
  .hero-card .big-number{font-size:36px}
  .site-brand img{height:36px}
}