/* ===== Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: #0d1117;
  color: #e2e8f0;
  overflow-x: hidden;
}

/* ===== Gradient Mesh Background ===== */
.mesh-bg {
  background:
    radial-gradient(
      ellipse 80% 60% at 10% 20%,
      rgba(11, 184, 150, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 70% at 90% 10%,
      rgba(26, 149, 235, 0.15) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 50% at 50% 80%,
      rgba(11, 184, 150, 0.08) 0%,
      transparent 50%
    ),
    #0d1117;
}

/* ===== Glassmorphism ===== */
.glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
}
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(11, 184, 150, 0.35);
  transform: translateY(-6px);
  box-shadow:
    0 24px 60px rgba(11, 184, 150, 0.12),
    0 0 0 1px rgba(11, 184, 150, 0.15);
}

/* ===== Gradient Text ===== */
.gradient-text {
  background: linear-gradient(135deg, #0bb896 0%, #1a95eb 55%, #0bb896 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, #0bb896 0%, #1a95eb 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 24px rgba(11, 184, 150, 0.35);
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}
.btn-primary:hover::before {
  left: 100%;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(11, 184, 150, 0.5);
}
.btn-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.04);
}
.btn-outline:hover {
  border-color: #0bb896;
  background: rgba(11, 184, 150, 0.1);
  transform: translateY(-2px);
}

/* ===== Feature Icon ===== */
.feature-icon {
  background: linear-gradient(
    135deg,
    rgba(11, 184, 150, 0.2),
    rgba(26, 149, 235, 0.2)
  );
  border: 1px solid rgba(11, 184, 150, 0.25);
  transition: all 0.35s ease;
}
.glass-card:hover .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(11, 184, 150, 0.35),
    rgba(26, 149, 235, 0.35)
  );
  transform: scale(1.1) rotate(5deg);
}

/* ===== Navbar ===== */
.navbar {
  transition: all 0.4s ease;
}
.navbar.scrolled {
  background: rgba(13, 17, 23, 0.92) !important;
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ===== Dashboard Mock ===== */
.dashboard-mock {
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(11, 184, 150, 0.1);
}
.mock-bar {
  height: 3px;
  background: linear-gradient(90deg, #0bb896, #1a95eb, #0bb896);
}
.mock-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
@keyframes barGrow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
  }
}

/* ===== Floating animation ===== */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* =============================================
           INPUT FIELDS
        ============================================= */
        .input-field {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #e2e8f0;
            transition: all 0.3s ease;
            outline: none;
            width: 100%;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .input-field::placeholder { color: #475569; }
        .input-field:focus {
            background: rgba(255,255,255,0.07);
            border-color: #0bb896;
            box-shadow: 0 0 0 3px rgba(11,184,150,0.12), 0 0 20px rgba(11,184,150,0.08);
        }
        .input-field:focus + .input-icon { color: #25d2af; }

        /* Input wrapper for icon */
        .input-wrapper { position: relative; }
        .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #475569;
            transition: color 0.3s ease;
            pointer-events: none;
            font-size: 14px;
        }
        .input-has-icon { padding-left: 46px !important; }

        /* Eye toggle */
        .eye-toggle {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #475569;
            cursor: pointer;
            transition: color 0.3s ease;
            padding: 4px;
            background: none;
            border: none;
            font-size: 14px;
        }
        .eye-toggle:hover { color: #25d2af; }


/* ===== Glow Orbs ===== */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

/* ===== Ping ===== */
@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.ping-slow {
  animation: ping-slow 2s ease-out infinite;
}

/* ===== Testimonial ===== */
.testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  transition: all 0.35s ease;
}
.testimonial-card:hover {
  border-color: rgba(11, 184, 150, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(11, 184, 150, 0.1);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0d1117;
}
::-webkit-scrollbar-thumb {
  background: #0bb896;
  border-radius: 3px;
}

/* ===== Mobile Nav ===== */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: block;
}

/* ===== Progress bars in dashboard ===== */
.progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #0bb896, #1a95eb);
}


 /* =============================================
           ROLE SELECTOR TABS
        ============================================= */
        .role-tab {
            flex: 1;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all 0.25s ease;
            color: #64748b;
            border: none;
            background: transparent;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .role-tab.active {
            background: linear-gradient(135deg, #0bb896, #1a95eb);
            color: white;
            box-shadow: 0 2px 12px rgba(11,184,150,0.35);
        }
        .role-tab:not(.active):hover { color: #94a3b8; }

        /* =============================================
           PROGRESS DOTS
        ============================================= */
        .strength-dot {
            width: 24px; height: 4px;
            border-radius: 2px;
            background: rgba(255,255,255,0.1);
            transition: background 0.3s ease;
        }

        /* =============================================
           LOADING STATE
        ============================================= */
        @keyframes spin { to { transform: rotate(360deg); } }
        .spinner {
            width: 18px; height: 18px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            display: none;
        }
        .btn-loading .spinner { display: inline-block; }
        .btn-loading .btn-label { display: none; }

        /* =============================================
           CARD ENTRANCE ANIMATION
        ============================================= */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(32px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-up {
            animation: slideUp 0.65s cubic-bezier(0.23,1,0.32,1) both;
        }
        .delay-100 { animation-delay: 0.10s; }
        .delay-200 { animation-delay: 0.20s; }
        .delay-300 { animation-delay: 0.30s; }
        .delay-400 { animation-delay: 0.40s; }
        .delay-500 { animation-delay: 0.50s; }

        /* =============================================
           LEFT PANEL DECORATIVE ELEMENTS
        ============================================= */
        .grid-pattern {
            background-image:
                linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        /* Mini dashboard card inside left panel */
        .mini-card {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 14px;
            backdrop-filter: blur(12px);
        }
        .mini-bar {
            border-radius: 3px 3px 0 0;
            animation: barGrow 1.2s ease-out both;
        }
        @keyframes barGrow {
            from { transform: scaleY(0); transform-origin: bottom; }
            to   { transform: scaleY(1); }
        }

        /* =============================================
           SOCIAL LOGIN BUTTON
        ============================================= */
        .btn-social {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .btn-social:hover {
            background: rgba(255,255,255,0.08);
            border-color: rgba(11,184,150,0.3);
            transform: translateY(-1px);
        }

        /* =============================================
           CHECKBOX CUSTOM
        ============================================= */
        .custom-checkbox {
            appearance: none;
            width: 18px;
            height: 18px;
            border: 1.5px solid rgba(255,255,255,0.2);
            border-radius: 5px;
            background: rgba(255,255,255,0.04);
            cursor: pointer;
            transition: all 0.25s ease;
            flex-shrink: 0;
            position: relative;
        }
        .custom-checkbox:checked {
            background: linear-gradient(135deg, #0bb896, #1a95eb);
            border-color: transparent;
        }
        .custom-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px; top: 1px;
            width: 6px; height: 10px;
            border: 2px solid white;
            border-top: none; border-left: none;
            transform: rotate(40deg);
        }
        .custom-checkbox:focus { box-shadow: 0 0 0 3px rgba(11,184,150,0.2); }

        /* =============================================
           SCROLLBAR
        ============================================= */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0d1117; }
        ::-webkit-scrollbar-thumb { background: #0bb896; border-radius: 3px; }

        /* =============================================
           ERROR / SUCCESS STATES
        ============================================= */
        .input-error { border-color: #f87171 !important; }
        .input-error:focus { box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important; }
        .error-msg { color: #f87171; font-size: 11px; margin-top: 5px; display: none; }
        .error-msg.show { display: block; }