:root{
  --brand:#0d6efd;
  --dark:#0b1220;
  --soft:#f5f7fb;
  --muted:#6c757d;
}

*{ box-sizing:border-box; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111827;
  background:#fff;
}

/* Navbar */
.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar .nav-link{
  font-weight: 600;
  color:#111827;
}
.navbar .nav-link:hover{ color: var(--brand); }
.navbar .nav-link.active{
  color: var(--brand) !important;
}
.brand-badge{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  color:#fff;
  font-weight: 900;
  letter-spacing: .6px;
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg, #06b6d4, #6366f1, #f43f5e);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 22px rgba(99,102,241,.35),
    0 0 26px rgba(6,182,212,.18);
}

.brand-badge::before{
  content:"";
  position:absolute;
  inset: -30%;
  background: conic-gradient(from 180deg,
    rgba(255,255,255,.22),
    transparent 20%,
    rgba(255,255,255,.10),
    transparent 55%,
    rgba(255,255,255,.22)
  );
  animation: badgeSpin 4.5s linear infinite;
  opacity:.75;
}

@keyframes badgeSpin{
  to{ transform: rotate(360deg); }
}

.brand-badge::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border:1px solid rgba(255,255,255,.22);
}

.brand-badge:hover{
  filter: saturate(1.2) brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 14px 28px rgba(99,102,241,.42),
    0 0 36px rgba(6,182,212,.22);
}


/* Hero (Home) */
.hero{
  background:
    linear-gradient(180deg, rgba(11,18,32,0.78), rgba(11,18,32,0.45)),
    url("../images/mainpage2.png") center/cover no-repeat;

  background-attachment: fixed, fixed; /* ✅ parallax-ish */
  min-height: 78vh;
  display:flex;
  align-items:center;
  padding: 110px 0 70px;
  color:#fff;
}
.hero p{
  color: rgba(255,255,255,.88);
  max-width: 60ch;
}

/* ✅ FIX: cards inside hero should not inherit white text */
/* ✅ FIX: cards inside hero should not inherit white text */
.hero .card-soft{
  color:#111827;

  /* ✅ Transparent card background */
  background: rgba(255, 255, 255, 0.75);  /* adjust 0.75 → 0.6 for more transparency */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
}

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

/* Page header (Inner pages) - default for all pages */
.page-hero{
  background: var(--soft);
  padding: 60px 0;
}

/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-profile .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/profile.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Optional: make header text nicer on profile */
.page-profile .page-hero .muted{
  color: rgba(255,255,255,.88);
}




/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-services .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/serv.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* Optional: make header text nicer on profile */
.page-services .page-hero .muted{
  color: rgba(255,255,255,.88);
}




/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-compliance .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/comp.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}




/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-risk .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/risk.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


/* Optional: make header text nicer on profile */
.page-risk .page-hero .muted{
  color: rgba(255,255,255,.88);
}




/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-contact .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/contact.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


/* Optional: make header text nicer on profile */
.page-contact .page-hero .muted{
  color: rgba(255,255,255,.88);
}



/* ✅ Profile page hero parallax (only when body has .page-profile) */
.page-operation .page-hero{
  position: relative;
  padding: 80px 0;
  color:#fff;

  background:
    linear-gradient(180deg, rgba(11,18,32,.78), rgba(11,18,32,.45)),
    url("../images/mainpage1.png") center/cover no-repeat;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}


/* Optional: make header text nicer on profile */
.page-operation .page-hero .muted{
  color: rgba(255,255,255,.88);
}




/* Mobile fix (optional) */
@media (max-width: 991.98px){
  .page-profile .page-hero{ background-attachment: scroll; }
}












.section{
  padding: 70px 0;
}
.bg-soft{ background: var(--soft); }
.muted{ color: var(--muted); }

/* Cards + Features */
.card-soft{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 25px rgba(10, 20, 40, .06);
  border-radius: 18px;
}
.feature{
  height: 100%;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 8px 25px rgba(10, 20, 40, .05);
}
.feature h5{
  font-weight: 800;
  margin-bottom: 8px;
}

/* Buttons */
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-brand:hover{
  filter: brightness(.15);
}

/* BIG FOOTER */
.footer{
  background: var(--dark);
  color: rgba(255,255,255,.86);
  padding: 70px 0 25px;
}
.footer a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.footer a:hover{ text-decoration: underline; color:#fff; }

.footer-title{
  font-weight: 800;
  margin-bottom: 14px;
}
.footer-text{
  color: rgba(255,255,255,.70);
  margin-bottom: 0;
}
.footer-link{
  display:block;
  padding: 6px 0;
  color: rgba(255,255,255,.78);
}
.footer-link:hover{ color:#fff; }

.footer-bottom{
  margin-top: 35px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.60);
  font-size: .95rem;
}

section{ scroll-margin-top: 90px; }