:root{
  --brand-primary:#0057FF;
  --brand-secondary:#6A1B9A;
  --brand-accent:#1DE9B6;
  --brand-dark:#0E1021;
  --brand-text:#1a1a1a;
  --brand-muted:#6b7280;
  --brand-bg:#ffffff;
  --brand-soft:#F5F7FB;
}

html, body { scroll-behavior:smooth; }
body{
  font-family: 'Inter', 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--brand-text);
  background: var(--brand-bg);
}

h1,h2,h3,h4,h5{
  font-family: 'Poppins', 'Montserrat', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.navbar-brand img{ height: 34px; }

.btn-brand{
  background: var(--brand-primary);
  color:white;
  border:none;
  border-radius: .6rem;
  padding:.7rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 87, 255, .24);
}
.btn-brand:hover{ filter: brightness(1.08); color:white; }

.btn-outline-brand{
  border:2px solid var(--brand-primary);
  color: var(--brand-primary);
  border-radius: .6rem;
}
.btn-outline-brand:hover{
  background: var(--brand-primary);
  color: #fff;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1200px 500px at 10% -10%, rgba(29,233,182,.15), transparent 60%),
              radial-gradient(1000px 400px at 110% 10%, rgba(0,87,255,.12), transparent 60%),
              linear-gradient(180deg, #fff, #f9fbff);
}
.hero .phone{
  width: 320px;
  height: 640px;
  border-radius: 36px;
  padding: 12px;
  background: linear-gradient(160deg, #111, #444);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  margin: 0 auto;
  position:relative;
}
.phone .screen{
  width:100%;
  height:100%;
  border-radius: 28px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone .screen img, .phone .screen svg{
  width:100%; height:100%; object-fit: cover;
}

.badge-chip{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.35rem .7rem; background: #eef3ff; color: var(--brand-primary);
  border-radius: 999px; font-weight: 600;
}

.section-pad{ padding: 5rem 0; }
.card-feature{
  border:1px solid #E7ECF4;
  border-radius: 1rem;
  padding: 1.5rem;
  height:100%;
  background:#fff;
  box-shadow: 0 6px 24px rgba(14,16,33,.04);
}
.card-feature .icon{
  width:48px; height:48px; display:grid; place-items:center;
  border-radius:10px; background: #eef3ff; color:var(--brand-primary);
  font-weight:700;
}

.pricing{
  background: linear-gradient(180deg, #FAFBFF, #FFFFFF);
}
.pricing .plan{
  border:1px solid #E7ECF4;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(14,16,33,.05);
  height:100%;
}
.pricing .popular{
  border-color: var(--brand-primary);
  box-shadow: 0 16px 40px rgba(0,87,255,.12);
}
.price{
  font-size:2.4rem; font-weight:800; letter-spacing:-.02em;
}
.price small{ font-size:.9rem; color: var(--brand-muted); }

.check{ color: #12b76a; }
.cross{ color: #d92d20; }

.footer{
  background:#0E1021; color:#cbd5e1;
}
.footer a{ color:#e2e8f0; text-decoration:none; }
.footer a:hover{ color:#ffffff; text-decoration:underline; }

/* Utilities */
.rounded-2xl{ border-radius: 1rem; }
.shadow-soft{ box-shadow: 0 10px 30px rgba(14,16,33,.08); }
.lead{ color:#334155; }

@media (max-width: 991px){
  .hero .phone{ margin-top:2rem; }
}