:root{
  --blue:#002ba0;
  --blue2:#0f72ad;
  --ink:#0a0a0a;
  --muted:#6b6f76;
  --bg:#f6f8ff;
  --card:#ffffff;
  --shadow: 0 20px 45px rgba(0,0,0,.08);
  --grain: radial-gradient(1200px 500px at -10% -20%, rgba(15,114,173,.16), transparent 35%),
           radial-gradient(900px 380px at 120% 10%, rgba(0,43,160,.14), transparent 40%);
}

html,body{scroll-behavior:smooth; color:var(--ink)}
body{background:var(--bg);}

/* Navbar */
.navbar{transition:all .25s ease}
.navbar.scrolled{background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.nav-link{font-weight:600}
.brand-badge{
  font-weight:700; letter-spacing:.04em; font-size:1rem;
  padding:.4rem .85rem; border:1px solid rgba(0,0,0,.14); border-radius:999px;
  background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff;
}

/* Mobile menu dark background + white links */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    background:#000;
    border-radius:14px;
    padding:12px 10px;
    margin-top:10px;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
  }
  .navbar .navbar-collapse .nav-link{
    color:#fff !important;
    padding:10px 12px;
    border-radius:10px;
  }
  .navbar .navbar-collapse .nav-link:hover{
    color:#fff !important;
    background:rgba(255,255,255,.10);
  }
  .navbar .navbar-collapse .nav-link.active{
    color:#fff !important;
    background:rgba(255,255,255,.14);
  }
  .navbar .navbar-collapse .btn-brand{
    width:100%;
    display:block;
    text-align:center;
  }
}

/* Hero */
.hero{
  position:relative; padding-top:7rem; padding-bottom:4rem;
  background:
    radial-gradient(850px 380px at 90% 0%, rgba(15,114,173,.18), transparent 40%),
    radial-gradient(500px 240px at 0% 10%, rgba(0,43,160,.10), transparent 50%);
  overflow:hidden;
}
.hero h1{
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height:1.05; font-weight:800;
  letter-spacing:.2px;
}
.hero .lead{font-size:1.05rem; color:var(--muted)}
.pill{border-radius:999px; padding:.5rem 1rem; border:1px solid rgba(0,0,0,.08); background:#fff;}
.spark{position:absolute; inset:0; background:var(--grain); pointer-events:none;}

/* Stats */
.stat-card{
  background:#fff; border-radius:24px; box-shadow:var(--shadow);
  padding:1.25rem 1rem; text-align:center;
}
.stat-card h3{font-weight:800; margin:0}
.stat-card p{margin:0; color:var(--muted)}

/* Section headings */
.section-heading{font-weight:800; letter-spacing:.2px}
.section-sub{color:var(--muted)}

/* Services */
.service{
  background:linear-gradient(180deg,#ffffff, #f8fbff);
  border-radius:22px; box-shadow:var(--shadow); padding:1.35rem;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.service:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.12)}
.service .icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-size:1.3rem;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff; box-shadow:0 10px 18px rgba(15,114,173,.35);
}

/* Work cards */
.work-card{
  background:#fff; border-radius:22px; box-shadow:var(--shadow);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.12)}
.work-thumb{aspect-ratio:16/10; object-fit:cover; width:100%;}
.tag{font-size:.75rem; background:#eef5ff; color:var(--blue); padding:.3rem .6rem; border-radius:999px; font-weight:600}

/* App cards */
.app-card{
  background:#fff; border-radius:22px; box-shadow:var(--shadow);
  padding:1.5rem 1rem; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.app-card:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.12)}
.app-icon{
  width:96px; height:96px; border-radius:22px; object-fit:cover;
  margin:0 auto 1rem; display:block;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.app-card h5{font-weight:700; margin-bottom:.75rem}

/* Team cards */
.team-card{
  background:#fff; border-radius:22px; box-shadow:var(--shadow);
  padding:1.5rem; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.team-card:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.12)}
.team-photo{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  margin:0 auto 1rem; display:block;
  border:4px solid #eef5ff;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}

/* Testimonials */
.testi{
  background:linear-gradient(180deg, #0f72ad 0%, #002ba0 100%);
  border-radius:26px; color:#fff; padding:2rem; box-shadow:var(--shadow);
}
blockquote{font-size:1.05rem; line-height:1.6}

/* CTA */
.cta{
  background:#fff; border-radius:26px; box-shadow:var(--shadow);
  padding:3rem 1.5rem; text-align:center; position:relative; overflow:hidden;
}
.cta .ring{
  position:absolute; width:180px; height:180px; border-radius:50%;
  border:2px dashed rgba(0,43,160,.25); top:-60px; right:-40px;
}

/* Footer */
footer{color:#334; font-size:.92rem}
.social a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow);margin-right:.4rem;color:var(--blue)}

/* Utilities */
.btn-brand{
  background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; border:0;
  box-shadow:0 12px 24px rgba(0,43,160,.25);
}
.btn-brand:hover{opacity:.95;color:#fff}
.soft{filter:drop-shadow(0 18px 40px rgba(0,0,0,.08))}
.shadow-smx{box-shadow:var(--shadow)}
.rounded-2xl{border-radius:24px}
.avatar-lg{width:320px; max-width:100%}

/* Small tweaks */
@media (min-width:992px){
  .hero{padding-top:9rem; padding-bottom:6rem}
}