/* ================= ROOT VARIABLES ================= */
:root{
  --primary:#5a3fb7;
  --primary-dark:#452f9a;
  --text:#1f2430;
  --muted:#6c7280;
  --bg:#f7f8fc;
  --card:#ffffff;
  --line:#e7e9f1;
  --shadow:0 12px 30px rgba(17,24,39,0.08);
}

/* ================= GLOBAL ================= */
*{box-sizing:border-box;}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f8fbfd 0%,#ffffff 25%,#f7f9fc 100%);
  margin:0;
}

/* ================= NAVBAR ================= */
.navbar{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,0.05);
}

.navbar-brand{
  font-weight:800;
  color:#141824 !important;
}

.brand-mark{
  width:10px;height:22px;
  border-radius:6px;
  background:linear-gradient(180deg,#7ef2db,#4c6fff);
  display:inline-block;
  margin-right:8px;
}

.nav-link{
  color:#424a5a !important;
  font-size:14px;
}

.nav-link:hover{
  color:var(--primary) !important;
}

/* ================= BUTTONS ================= */
.btn-primary-custom{
  background:var(--primary);
  border:none;
  color:#fff;
  border-radius:10px;
  padding:10px 18px;
  font-weight:600;
  box-shadow:0 8px 20px rgba(90,63,183,0.2);
}

.btn-primary-custom:hover{
  background:var(--primary-dark);
}

.btn-outline-custom{
  border:1px solid #cfd5e3;
  border-radius:10px;
  padding:10px 18px;
}

/* ================= HERO ================= */
.hero{
  padding:90px 0;
}

.hero h1{
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800;
}

.hero p{
  color:var(--muted);
}

/* ================= IMAGE ================= */
.hero-img{
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ================= STATS ================= */
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
}

.stat-number{
  font-weight:800;
  font-size:1.3rem;
}

.stat-label{
  color:var(--muted);
  font-size:13px;
}

/* ================= SERVICES ================= */
.services{
  padding:80px 0;
}

.service-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:25px;
  transition:.3s;
  height:100%;
}

.service-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}

.service-icon{
  width:45px;height:45px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#6d57d8,#7ab6ff);
  color:#fff;
  margin-bottom:15px;
}

/* ================= PROCESS ================= */
.process{
  padding:80px 0;
  background:#eef4f8;
}

.step-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  text-align:center;
  box-shadow:var(--shadow);
}

.step-circle{
  width:40px;height:40px;
  border-radius:50%;
  margin:auto;
  background:linear-gradient(135deg,#6d57d8,#8fb4ff);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

/* ================= CTA ================= */
.cta{
  padding:80px 0;
  text-align:center;
  background:linear-gradient(90deg,#7d8fb3,#8ec2c6,#a8e2a3);
  color:#fff;
}

/* ================= FOOTER ================= */
.footer{
  background:linear-gradient(180deg,#4a1584,#6a75ae);
  color:#fff;
  padding:60px 0;
}

.footer a{
  color:#fff;
  text-decoration:none;
  opacity:.8;
}

.footer a:hover{
  opacity:1;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:20px;
  padding-top:15px;
  font-size:14px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .hero{
    padding:60px 0;
  }

  .hero h1{
    font-size:2rem;
  }
}

  #RadDockZone1{max-width: 100%;}