:root{
  --accent:#e8432a;
  --accent-dark:#e02b20;
  --muted:#6b7280;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body{font-family:var(--font-family);} 

.hero{
  background: linear-gradient(180deg, var(--accent) 0%, #ff6b5e 100%);
}

.phone-mockup{
  width: 270px;
  height: 520px;
  border-radius: 34px;
  background: linear-gradient(180deg,#fff 0%, rgba(255,255,255,0.95) 100%);
  padding: 12px;
}

.phone-screen{background:#fff; border-radius:22px; height:100%; overflow:hidden}

.stat h3{font-size:1.2rem}
.stat small{opacity:.9}

.icon{font-size:2rem}

.cta{background:linear-gradient(180deg,var(--accent) 0%, #ff6b5e 100%);}

footer{background:#0b0b0b}

@media (max-width:768px){
  .phone-mockup{width:200px;height:400px}
}

/* Mobile tweaks to match the provided mobile layout */
@media (max-width:480px){
  .hero{padding-top:1.5rem;padding-bottom:2.5rem}
  .hero h1{font-size:2.2rem;line-height:1.02;text-align:center}
  .hero .lead{font-size:1rem;text-align:center}

  /* center hero columns and content */
  .hero .col-lg-6{text-align:center}

  /* stack CTA buttons vertically and enlarge touch targets */
  .hero-ctas{flex-direction:column!important;align-items:center}
  .hero-ctas .btn{width:80%;max-width:320px;border-radius:40px;padding:0.9rem 1rem}
  .hero-ctas .btn + .btn{margin-left:0;margin-top:0.6rem}

  /* stats center below with icons and text */
  .hero-stats{flex-direction:row;gap:1.2rem;flex-wrap:wrap;margin-top:1rem;justify-content:center}
  .hero-stats .stat-item{display:flex;align-items:center;gap:0.5rem;justify-content:center}

  /* smaller phone mockup to fit mobile layout */
  .phone-mockup{width:180px;height:340px;margin:0 auto}

  /* navbar compact */
  .navbar-brand span:last-child{font-size:1rem}
  .navbar{padding-top:.5rem;padding-bottom:.5rem}
}

 

/* Ensure footer text is white on dark background */
footer, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer small, footer a, footer li, footer .text-muted, footer .small {
  color: #ffffff !important;
}
footer a { text-decoration: none; }
footer a:hover { color: #ffffff !important; text-decoration: underline; }