:root {
     --primary: #6C63FF;
     --primary-dark: #554FD8;
     --secondary: #FF6584;
     --success: #36D399;
     --warning: #FFB347;
     --danger: #FF6B6B;
     --dark: #1A1A2E;
     --light: #F8F9FF;
     --gradient: linear-gradient(135deg, #6C63FF 0%, #FF6584 100%);
     --gradient-reverse: linear-gradient(135deg, #FF6584 0%, #6C63FF 100%);
     --shadow: 0 20px 40px rgba(108, 99, 255, 0.15);
     --shadow-lg: 0 30px 60px rgba(108, 99, 255, 0.25);
     --radius: 20px;
     --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Poppins', sans-serif;
     background-color: var(--light);
     color: var(--dark);
     overflow-x: hidden;
     line-height: 1.6;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
 }

 /* Custom Scrollbar */
 ::-webkit-scrollbar {
     width: 10px;
 }

 ::-webkit-scrollbar-track {
     background: var(--light);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--gradient);
     border-radius: 10px;
 }

 /* ==================== SIMPLIFIED NAVIGATION ==================== */
 .navbar {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 0.8rem 0;
     box-shadow: 0 4px 20px rgba(108, 99, 255, 0.1);
 }

 .navbar-brand {
     font-size: 1.8rem;
     font-weight: 900;
     color: var(--primary) !important;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .navbar-brand i {
     font-size: 1.8rem;
     color: var(--primary);
 }

 .nav-link {
     color: var(--dark) !important;
     font-weight: 500;
     padding: 0.5rem 1rem !important;
     border-radius: 50px;
     transition: var(--transition);
 }

 .nav-link:hover {
     color: var(--primary) !important;
     background: rgba(108, 99, 255, 0.1);
 }

 .nav-link.active {
     background: var(--gradient);
     color: white !important;
 }

 /* Simple dropdown - no fancy effects */
 .dropdown-menu {
     border-radius: 12px;
     box-shadow: var(--shadow);
     border: none;
 }

 .dropdown-item:hover {
     background: rgba(108, 99, 255, 0.1);
     color: var(--primary) !important;
 }

 /* Mobile friendly */
 @media (max-width: 992px) {
     .navbar-collapse {
         background: white;
         padding: 1rem;
         border-radius: 12px;
         margin-top: 10px;
         box-shadow: var(--shadow);
     }
 }

 /* ==================== ENHANCED FOOTER ==================== */
 footer {
     background: var(--dark);
     color: white;
     padding: 0px 0 10px;
     position: relative;
     overflow: hidden;
 }

 footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--gradient);
 }

 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
     position: relative;
     z-index: 2;
 }

 .footer-bottom {
     padding-top: 30px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: left;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 @media(max-width:992px) {
     .footer-bottom {
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;

     }
 }

 .copyright-text {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.8rem;
     margin-bottom: 10px;
     line-height: 1.6;
 }

 .copyright-text strong {
     color: white;
     font-weight: 600;
     background: var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .developer-badge {
     background: rgba(255, 255, 255, 0.1);
     padding: 5px 5px;
     border-radius: 50px;
     color: white;
     font-weight: 500;
     display: inline-flex;
     align-items: center;
     font-size: 0.8rem;
     gap: 10px;
     margin-top: 2px;
     transition: var(--transition);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .developer-badge:hover {
     background: var(--gradient);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(108, 99, 255, 0.2);
 }

 .developer-badge i {
     color: var(--primary);
 }

 .policy-links {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 10px;
     flex-wrap: wrap;
 }

 .policy-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.8rem;
     transition: var(--transition);
 }

 .policy-links a:hover {
     color: white;
 }

 /* Features Page */
 .features-hero {
     padding: 120px 0 30px;
     background: linear-gradient(135deg, var(--light) 0%, rgba(108, 99, 255, 0.05) 100%);
     text-align: center;
 }

 .features-hero h1 {
     font-size: 2.5rem;
     background: linear-gradient(135deg, var(--dark) 30%, var(--primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .features-hero p {
     font-size: 1.1rem;
     color: #666;
     max-width: 700px;
     margin: 0 auto;
 }

 .election-type-tabs {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0 20px;
     flex-wrap: wrap;
 }

 .type-tab {
     padding: 12px 30px;
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     background: white;
     color: #666;
     border: 2px solid var(--primary);
 }

 .type-tab.active {
     background: var(--gradient);
     color: white;
     border-color: transparent;
 }

 .type-tab i {
     margin-right: 8px;
 }

 .features-section {
     padding: 50px 0;
     background: white;
 }

 .section-title {
     margin-bottom: 40px;
 }

 .section-title h2 {
     font-size: 2rem;
     background: linear-gradient(135deg, var(--dark) 30%, var(--primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     position: relative;
     display: inline-block;
 }

 .section-title h2 i {
     margin-right: 10px;
     color: var(--primary);
 }

 .section-subtitle {
     font-size: 1.3rem;
     margin: 40px 0 20px;
     color: var(--primary);
     position: relative;
     padding-left: 15px;
     border-left: 5px solid var(--primary);
 }

 .section-subtitle i {
     margin-right: 10px;
 }

 .feature-card {
     background: white;
     padding: 30px 25px;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     transition: var(--transition);
     text-align: center;
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .feature-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-lg);
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: var(--gradient);
 }

 .feature-card h4 {
     font-size: 1.2rem;
     margin: 15px 0 10px;
     color: var(--dark);
 }

 .feature-card p {
     font-size: 0.9rem;
     color: #666;
     margin-bottom: 0;
     line-height: 1.6;
 }

 .feature-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 10px;
     font-size: 2rem;
     color: white;
     transition: var(--transition);
 }

 .feature-card:hover .feature-icon {
     transform: scale(1.1) rotate(5deg);
 }

 .badge-private {
     background: var(--gradient);
     color: white;
     padding: 3px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     position: absolute;
     top: 15px;
     right: 15px;
 }

 .badge-public {
     background: var(--gradient);
     color: white;
     padding: 3px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     position: absolute;
     top: 15px;
     right: 15px;
 }

 .badge-both {
     background: var(--gradient);
     color: white;
     padding: 3px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     position: absolute;
     top: 15px;
     right: 15px;
 }

 .info-box {
     background: linear-gradient(135deg, rgba(108, 99, 255, 0.05), rgba(255, 101, 132, 0.05));
     border-radius: 12px;
     padding: 25px;
     margin: 40px 0;
     border-left: 5px solid var(--primary);
 }

 .info-box h4 {
     color: var(--primary);
     margin-bottom: 15px;
 }

 .comparison-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin: 30px 0;
 }

 .comparison-item {
     background: #f8f9fa;
     border-radius: 12px;
     padding: 20px;
 }

 .comparison-item h5 {
     color: var(--primary);
     margin-bottom: 15px;
     font-size: 1.1rem;
 }

 .comparison-item ul {
     margin-bottom: 0;
     padding-left: 20px;
 }

 .comparison-item li {
     margin-bottom: 8px;
     color: #555;
 }

 .comparison-item i {
     color: var(--primary);
     margin-right: 8px;
 }

 @media (max-width: 768px) {
     .comparison-grid {
         grid-template-columns: 1fr;
     }
 }