:root{
  --blue1:#1e3a8a;
  --blue2:#2563eb;
  --sky:#0ea5e9;
  --green:#22c55e;
  --orange:#f97316;

  --bgA:#eef2ff;
  --bgB:#f0f9ff;
  --bgC:#ecfeff;

  --ink:#0f172a;
  --muted:#475569;
  --card:#ffffff;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',sans-serif;
  background: linear-gradient(135deg, var(--bgA), var(--bgB), var(--bgC));
  line-height: 1.7;
  padding-top: 70px;
  color: var(--ink);
}

/* Navbar */
.navbar{
  background: linear-gradient(90deg, var(--blue2), var(--orange)) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.navbar .nav-link{opacity:.92;}
.navbar .nav-link:hover,
.navbar .nav-link.active{opacity:1;}

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--blue1), var(--blue2), var(--sky), var(--orange));
  color:#fff;
  padding: 90px 0;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(680px 260px at 15% 22%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(600px 240px at 85% 15%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(520px 220px at 70% 90%, rgba(34,197,94,.16), transparent 55%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:2;}

/* Profile */
.profile-pic{
  width:160px;height:160px;
  object-fit:cover;border-radius:50%;
  border:5px solid rgba(255,255,255,0.55);
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}
@media (min-width: 992px){
  .profile-pic{width:190px;height:210px;}
}

/* Section title */
.section-title{
  font-weight:700;
  margin-bottom:25px;
  background: linear-gradient(90deg, var(--blue1), var(--blue2), var(--sky), var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  position: relative;
  display: inline-block;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60%;
  height:3px;
  border-radius:4px;
  background: linear-gradient(90deg, var(--orange), var(--green), var(--sky));
}

/* Highlight */
.highlight{
  background: linear-gradient(120deg, rgba(249,115,22,.22), rgba(14,165,233,.20));
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}

/* Cards */
.card-custom{
  border:none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 12px;
  background: var(--card);
}
.card-custom h5{color:var(--blue1);}
.card-custom ul li::marker{
  color: var(--orange);
  font-weight: 800;
}

/* KPI cards */
.kpi-card{
  background:#fff;
  border-radius:12px;
  border-top:4px solid var(--orange);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.kpi-num{
  font-weight:900;
  font-size: 1.9rem;
  background: linear-gradient(90deg, var(--orange), var(--blue2), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.kpi-label{
  color: var(--muted);
  font-weight: 500;
}

/* Values - NO button/pill */
.value-title{
  background: linear-gradient(90deg, var(--orange), var(--blue2), var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 800;
  letter-spacing:.3px;
}
.value-card{
  border-top:4px solid var(--sky);
  transition:all .3s ease;
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,0.15);
}

/* Footer */
.footer{
  background:#212529;
  color:#fff;
  padding: 25px 0;
}

/* Floating */
.fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1050;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fab a{
  border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  font-weight:700;
}