/* =========================
   SAVIGENIX PREMIUM NAVBAR
========================= */

nav{

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  height: 92px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 42px;

  /* background:
    rgba(7, 27, 52, 0.78); */
   background: #071B34;

  backdrop-filter: blur(18px);

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.18);

  transition: 0.3s ease;
}


/* =========================
   LOGO
========================= */

.logo{
  display:flex;
  align-items:center;
  gap:14px;

  flex-shrink:0;
}

.logo img{

  height:64px;
  width:auto;

  object-fit:contain;

  transition:0.3s ease;
}

.logo img:hover{
  transform:scale(1.03);
}


/* =========================
   NAV LINKS
========================= */

.nav-links{

  list-style:none;

  display:flex;
  align-items:center;

  gap:12px;

  margin-left:auto;
}

.nav-links li{
  display:flex;
  align-items:center;
}


/* =========================
   LINKS
========================= */

.nav-links a{

  position:relative;

  color:
    rgba(255,255,255,0.78);

  text-decoration:none;

  font-size:1rem;
  font-weight:500;

  padding:12px 16px;

  transition:0.3s ease;
}


/* HOVER LINE */

.nav-links a::after{

  content:'';

  position:absolute;

  left:16px;
  bottom:6px;

  width:0%;
  height:2px;

  background:
    var(--teal-primary);

  border-radius:20px;

  transition:0.3s ease;
}

.nav-links a:hover{

  color:white;
}

.nav-links a:hover::after{

  width:55%;
}


/* =========================
   BUTTON
========================= */

.btn-primary{

  background:
    linear-gradient(
      135deg,
      var(--orange-accent),
      var(--orange-soft)
    );

  color:white !important;

  padding:14px 24px !important;

  border-radius:16px;

  font-weight:600;

  box-shadow:
    0 8px 24px rgba(249,115,22,0.22);

  transition:0.3s ease !important;
}

.btn-primary::after{
  display:none;
}

.btn-primary:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px rgba(249,115,22,0.32);
}


/* =========================
   HAMBURGER
========================= */

.hamburger{

  display:none;

  cursor:pointer;

  font-size:1.8rem;

  color:white;
}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  nav{

    height:82px;

    padding:0 18px;
  }

  .logo img{
    height:54px;
  }

  .hamburger{
    display:block;
    z-index:1001;
  }

  .nav-links{

    position:fixed;

    top:82px;
    right:-100%;

    width:78%;
    height:calc(100vh - 82px);

    background:
      rgba(7,27,52,0.96);

    backdrop-filter:blur(18px);

    border-left:
      1px solid rgba(255,255,255,0.08);

    flex-direction:column;

    align-items:flex-start;

    padding:30px 24px;

    gap:12px;

    transition:0.35s ease;
  }

  .nav-links.active{
    right:0;
  }

  .nav-links a{

    width:100%;

    font-size:1.05rem;

    padding:14px 10px;
  }

  .btn-primary{

    width:100%;

    text-align:center;

    margin-top:10px;
  }
}
/* ===================================
   PREMIUM HERO SECTION
=================================== */

.hero-modern{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #061427 0%,
      #081B34 45%,
      #0E2F56 100%
    );

  padding-top:120px;
}

.hamburger{
  display:none;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  color:white;
  cursor:pointer;
}
/* GLOWS */

.hero-bg-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.22;
}

.hero-glow-1{

  width:420px;
  height:420px;

  background:#00B8C4;

  top:-120px;
  left:-120px;
}

.hero-glow-2{

  width:420px;
  height:420px;

  background:#F97316;

  bottom:-160px;
  right:-120px;
}


/* GRID */

.hero-grid{

  display:grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap:80px;

  align-items:center;

  position:relative;
  z-index:2;
}


/* LEFT */

.hero-left h1{

  font-size:5rem;

  line-height:1.05;

  color:white;

  margin-bottom:28px;
}

.hero-left h1 span{

  color:var(--teal-primary);
}

.hero-description{

  color:rgba(255,255,255,0.78);

  font-size:1.2rem;

  line-height:1.9;

  max-width:620px;

  margin-bottom:38px;
}


/* BADGE */

.hero-badge{

  display:inline-flex;

  align-items:center;

  padding:12px 18px;

  border-radius:999px;

  margin-bottom:28px;

  background:
    rgba(249,115,22,0.12);

  border:
    1px solid rgba(249,115,22,0.22);

  color:#FDBA74;

  font-size:0.9rem;

  font-weight:600;

  letter-spacing:1px;
}


/* BUTTONS */

.hero-buttons{

  display:flex;

  gap:18px;

  margin-bottom:36px;
}


/* TRUST */

.hero-trust{

  display:flex;

  gap:16px;

  flex-wrap:wrap;
}

.trust-item{

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  padding:12px 16px;

  border-radius:14px;

  color:rgba(255,255,255,0.82);

  font-size:0.95rem;
}


/* RIGHT SIDE */

.hero-dashboard{

  padding:34px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(18px);
}


/* TOP DOTS */

.dashboard-top{

  display:flex;

  gap:10px;

  margin-bottom:24px;
}

.dashboard-circle{

  width:12px;
  height:12px;

  border-radius:50%;

  background:
    rgba(255,255,255,0.3);
}


/* TITLE */

.hero-dashboard h3{

  color:white;

  font-size:2rem;

  margin-bottom:24px;
}


/* METRIC CARDS */

.metric-card{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:18px 20px;

  border-radius:18px;

  margin-bottom:18px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);
}

.metric-card span{

  color:
    rgba(255,255,255,0.72);
}

.metric-card strong{

  color:white;

  font-size:1.1rem;
}


/* PROGRESS */

.hero-progress{

  width:100%;
  height:12px;

  border-radius:999px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.08);

  margin:28px 0;
}

.hero-progress-fill{

  width:78%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      #00B8C4,
      #7EE7EE
    );
}


/* NOTE */

.dashboard-note{

  color:
    rgba(255,255,255,0.68);

  line-height:1.8;
}


/* MOBILE */

@media(max-width:992px){

  .hero-grid{

    grid-template-columns:1fr;

    gap:60px;
  }

  .hero-left h1{

    font-size:3.8rem;
  }
}

@media(max-width:768px){

  .hero-modern{

    padding-top:110px;
  }

  .hero-left h1{

    font-size:3rem;
  }

  .hero-buttons{

    flex-direction:column;
  }

  .hero-dashboard{

    padding:24px;
  }
}