 :root {
            --primary-blue: #007bff;
            --accent-cyan: #29d8ff;
            --dark-navy: #0f172a;
            --bg-light: #f8fafc;
            --text-gray: #64748b;
            --max-width: 1100px;
        }

        /* Accessibility Classes */
        body.grayscale { filter: grayscale(1); }
        body.high-contrast { background: #000 !important; color: #fff !important; }
        body.high-contrast section, body.high-contrast header { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
        body.underline-links a { text-decoration: underline !important; font-weight: bold; }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 100px; }
        body { font-family: 'Assistant', sans-serif; margin: 0; background: var(--bg-light); color: var(--dark-navy); overflow-x: hidden; transition: background 0.3s; }

        .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

        /* Accessibility Toolbar */
        .acc-toggle {
            position: fixed; top: 100px; right: 20px; width: 50px; height: 50px; 
            background: var(--primary-blue); color: white; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .acc-menu {
            position: fixed; top: 160px; right: 20px; background: white; width: 220px; 
            padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: none; flex-direction: column; gap: 10px; z-index: 9998; border: 1px solid #eee;
        }
        .acc-menu button {
            width: 100%; padding: 10px; border: 1px solid #ddd; background: #f9f9f9; 
            border-radius: 5px; cursor: pointer; text-align: right; font-family: inherit; font-weight: 600;
        }

        /* Navigation */
        header { background: #fff; padding: 15px 0; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
        .nav-flex { display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; text-decoration: none; font-family: 'Heebo', sans-serif; font-size: 28px; }
        .logo-box { width: 10px; height: 10px; background: var(--accent-cyan); border-radius: 2px; margin-left: 8px; }
        .t-black { color: var(--dark-navy); font-weight: 900; }
        .t-blue { color: var(--primary-blue); font-weight: 900; }
        
        .nav-left { display: flex; align-items: center; gap: 40px; }
        .nav-links { display: flex; gap: 20px; }
        .nav-links a { text-decoration: none; color: var(--dark-navy); font-weight: 700; transition: 0.3s; font-size: 16px; }
        .nav-links a:hover { color: var(--primary-blue); }

        .btn-platform { 
            background: var(--dark-navy); color: #fff !important; padding: 12px 24px; border-radius: 50px; 
            text-decoration: none; font-weight: 800; display: flex; align-items: center; gap: 10px; border: 2px solid var(--dark-navy); transition: 0.4s;
        }
        .btn-platform:hover { background: #fff; color: var(--dark-navy) !important; transform: translateY(-2px); }

        /* Hero */
          .hero-cta{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}
.btn-hero-primary,
.btn-hero-secondary{
    padding:14px 26px;
    border-radius:50px;
    text-decoration:none;
    font-weight:800;
    font-size:16px;
    transition:0.3s;
}
.btn-hero-primary{
    background:#fff;
    color:#0f172a;
}
.btn-hero-primary:hover{
    transform:translateY(-2px);
}
.btn-hero-secondary{
    background:transparent;
    color:#fff;
    border:2px solid rgba(255,255,255,0.5);
}
.btn-hero-secondary:hover{
    background:rgba(255,255,255,0.1);
}
          
          
          
          
          .trust-bar{
    background:#ffffff;
    padding:22px 0;
    border-bottom:1px solid rgba(15,23,42,0.08);
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    align-items:center;
}

.trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,0.06);
    border-radius:16px;
    padding:16px 14px;
    font-weight:700;
    font-size:15px;
    color:#0f172a;
    text-align:center;
    min-height:72px;
}

.trust-item i{
    font-size:18px;
    color:#2563eb;
    flex-shrink:0;
}

@media (max-width: 900px){
    .trust-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 600px){
    .trust-grid{
        grid-template-columns:1fr;
    }

    .trust-item{
        justify-content:flex-start;
        text-align:right;
    }
}
        .menu-toggle{
    display:none;
    background:none;
    border:none;
    font-size:26px;
    color:var(--dark-navy);
    cursor:pointer;
    padding:8px;
}

@media (max-width: 900px){
    .menu-toggle{
        display:block;
    }

    .nav-left{
        position:absolute;
        top:100%;
        right:20px;
        left:20px;
        background:#fff;
        border-radius:18px;
        box-shadow:0 20px 40px rgba(0,0,0,0.12);
        padding:20px;
        display:none;
        flex-direction:column;
        gap:18px;
        z-index:1001;
    }

    .nav-left.active{
        display:flex;
    }

    .nav-links{
        display:flex;
        flex-direction:column;
        gap:14px;
    }

    .nav-links a{
        padding:10px 0;
        border-bottom:1px solid #eef2f7;
    }

    .btn-platform{
        justify-content:center;
        width:100%;
    }

    .contact-card{
        grid-template-columns:1fr;
    }

    #cookie-notice{
        flex-direction:column;
        text-align:center;
        gap:15px;
    }
}  
          
        .hero { 
            background: linear-gradient(135deg, #0f172a 0%, #007bff 100%); 
            color: white; padding: 180px 0 160px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
        }
        .hero h1 { font-size: clamp(35px, 5vw, 55px); margin-bottom: 20px; font-weight: 800; letter-spacing: -1px; }
        .hero p { font-size: 22px; opacity: 0.9; max-width: 700px; margin: 0 auto; font-weight: 300; }

        /* Features Grid */
        .features-grid { margin-top: -100px; position: relative; z-index: 10; padding-bottom: 60px; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
        .f-card { 
            background: white; padding: 40px 30px; border-radius: 20px; text-align: center; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-bottom: 5px solid var(--accent-cyan); transition: 0.3s ease;
        }
        .f-card:hover { transform: translateY(-10px); }
        .f-card i { font-size: 45px; color: var(--primary-blue); margin-bottom: 20px; display: block; }
        .f-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 15px; color: var(--dark-navy); }

        /* Sections */
        .section { padding: 100px 0; }
        .section-alt { background: #fff; }
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 60px; align-items: center; }
        .icon-box { width: 60px; height: 60px; background: rgba(0,123,255,0.1); color: var(--primary-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
        h2 { font-size: 38px; font-weight: 800; margin-bottom: 25px; color: var(--dark-navy); }
        .f-list { list-style: none; padding: 0; }
        .f-list li { margin-bottom: 18px; display: flex; align-items: flex-start; font-weight: 700; color: var(--dark-navy); font-size: 18px; }
        .f-list li i { color: #25d366; margin-left: 12px; font-size: 20px; margin-top: 4px; }

        /* Contact Section */
        .contact-outer { background: var(--dark-navy); padding: 100px 0; }
        .contact-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; color: white; }
        .contact-info h2 { color: white; font-size: 45px; }
        .contact-form input, .contact-form textarea { width: 100%; padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; font-family: inherit; font-size: 16px; background: rgba(255,255,255,0.05); color: white; }
        .btn-submit { background: var(--primary-blue); color: white; border: none; padding: 20px; border-radius: 12px; font-weight: 800; cursor: pointer; width: 100%; font-size: 20px; transition: 0.3s; }
        .btn-submit:hover { background: var(--accent-cyan); color: var(--dark-navy); }

        /* FAQ Styling */
        .faq-item { margin-bottom: 15px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
        .faq-btn { width: 100%; padding: 20px; background: none; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: right; font-family: inherit; }
        .faq-answer { max-height: 0; overflow: hidden; transition: 0.3s ease-out; background: #f8fafc; }
        .faq-answer p { padding: 20px; margin: 0; color: var(--text-gray); }

        /* Cookies & WhatsApp */
        #cookie-notice { position: fixed; bottom: 20px; right: 20px; left: 20px; background: #fff; padding: 20px; border-radius: 15px; z-index: 9990; display: none; justify-content: space-between; align-items: center; border-right: 5px solid var(--primary-blue); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .wa-float { position: fixed; bottom: 100px; left: 35px; background: #25d366; color: white; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; z-index: 1000; box-shadow: 0 15px 30px rgba(0,0,0,0.2); text-decoration: none; }

        @media (max-width: 900px) { 
            .nav-links { display: none; } 
            .contact-card { grid-template-columns: 1fr; }
            #cookie-notice { flex-direction: column; text-align: center; gap: 15px; }
        }