:root {
     --primary: #2563eb;
     --primary-dark: #1d4ed8;
     --secondary: #0f172a;
     --light-bg: #f8fafc;
     --text-muted: #64748b;
 }

 body {
     font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
         "Segoe UI", sans-serif;
     background: var(--light-bg);
     color: var(--secondary);
 }

 /* =========================
           NAVBAR
        ========================= */

 .navbar {
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid #e2e8f0;
 }

 .navbar-brand {
     font-size: 1.55rem;
     font-weight: 800;
     letter-spacing: -0.8px;
     color: var(--secondary);
 }

 .logo-e {
     color: var(--primary);
 }

 .navbar .nav-link {
     color: #475569;
     font-weight: 500;
     margin: 0 5px;
 }

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

 /* =========================
           HERO
        ========================= */

 .hero {
     min-height: calc(100vh - 72px);
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background:
         radial-gradient(circle at 80% 20%,
             rgba(37, 99, 235, 0.13),
             transparent 30%),
         linear-gradient(135deg,
             #ffffff 0%,
             #f8fafc 55%,
             #eff6ff 100%);
 }

 .hero::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: rgba(37, 99, 235, 0.06);
     right: -180px;
     bottom: -180px;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .badge-modern {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border-radius: 50px;
     background: #dbeafe;
     color: var(--primary-dark);
     font-size: .85rem;
     font-weight: 600;
     margin-bottom: 22px;
 }

 .hero h1 {
     font-size: clamp(2.8rem, 6vw, 5rem);
     font-weight: 800;
     line-height: 1.05;
     letter-spacing: -2.5px;
     margin-bottom: 25px;
 }

 .hero h1 span {
     color: var(--primary);
 }

 .hero-description {
     font-size: 1.15rem;
     line-height: 1.7;
     color: var(--text-muted);
     max-width: 600px;
     margin-bottom: 35px;
 }

 .btn-primary-modern {
     background: var(--primary);
     border: none;
     padding: 13px 25px;
     border-radius: 10px;
     font-weight: 600;
     transition: all .2s ease;
 }

 .btn-primary-modern:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
 }

 .btn-outline-modern {
     padding: 12px 24px;
     border-radius: 10px;
     font-weight: 600;
     border: 1px solid #cbd5e1;
     color: #334155;
 }

 .btn-outline-modern:hover {
     background: white;
     border-color: var(--primary);
     color: var(--primary);
 }

 /* =========================
           DASHBOARD PREVIEW
        ========================= */

 .dashboard-wrapper {
     position: relative;
     padding: 25px;
 }

 .dashboard {
     background: white;
     border: 1px solid #e2e8f0;
     border-radius: 20px;
     box-shadow: 0 25px 70px rgba(15, 23, 42, .12);
     overflow: hidden;
     transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
 }

 .dashboard-header {
     height: 55px;
     display: flex;
     align-items: center;
     padding: 0 18px;
     border-bottom: 1px solid #e2e8f0;
 }

 .window-dots {
     display: flex;
     gap: 6px;
 }

 .window-dots span {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: #cbd5e1;
 }

 .dashboard-body {
     display: flex;
     min-height: 330px;
 }

 .dashboard-sidebar {
     width: 65px;
     background: #f8fafc;
     border-right: 1px solid #e2e8f0;
     padding-top: 20px;
     text-align: center;
 }

 .dashboard-sidebar i {
     display: block;
     font-size: 20px;
     color: #94a3b8;
     margin-bottom: 22px;
 }

 .dashboard-sidebar i.active {
     color: var(--primary);
 }

 .dashboard-main {
     flex: 1;
     padding: 25px;
 }

 .dashboard-title {
     font-weight: 700;
     margin-bottom: 20px;
 }

 .stat-card {
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     padding: 15px;
     background: white;
 }

 .stat-label {
     color: var(--text-muted);
     font-size: .8rem;
 }

 .stat-value {
     font-size: 1.4rem;
     font-weight: 700;
     margin-top: 5px;
 }

 .chart {
     height: 100px;
     display: flex;
     align-items: end;
     gap: 8px;
     margin-top: 25px;
 }

 .bar {
     flex: 1;
     background: linear-gradient(to top,
             var(--primary),
             #60a5fa);
     border-radius: 5px 5px 0 0;
 }

 /* =========================
           FEATURES
        ========================= */

 .features {
     padding: 100px 0;
     background: white;
 }

 .section-title {
     font-weight: 800;
     letter-spacing: -1px;
 }

 .section-description {
     color: var(--text-muted);
     max-width: 650px;
     margin: auto;
 }

 .feature-card {
     height: 100%;
     padding: 30px;
     border: 1px solid #e2e8f0;
     border-radius: 16px;
     background: white;
     transition: all .25s ease;
 }

 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(15, 23, 42, .08);
     border-color: #bfdbfe;
 }

 .feature-icon {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 13px;
     background: #dbeafe;
     color: var(--primary);
     font-size: 1.4rem;
     margin-bottom: 20px;
 }

 .feature-card h4 {
     font-size: 1.1rem;
     font-weight: 700;
 }

 .feature-card p {
     color: var(--text-muted);
     margin-bottom: 0;
     line-height: 1.6;
 }

 /* =========================
           FOOTER
        ========================= */

 footer {
     background: var(--secondary);
     color: #94a3b8;
     padding: 30px 0;
 }

 footer strong {
     color: white;
 }

 /* =========================
           RESPONSIVE
        ========================= */

 @media (max-width: 991px) {

     .hero {
         padding: 80px 0;
     }

     .dashboard-wrapper {
         margin-top: 50px;
     }

     .dashboard {
         transform: none;
     }
 }

 @media (max-width: 576px) {

     .hero h1 {
         letter-spacing: -1.5px;
     }

     .hero-buttons {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }

     .hero-buttons .btn {
         width: 100%;
     }

     .dashboard-sidebar {
         width: 50px;
     }

     .dashboard-main {
         padding: 15px;
     }
 }