/* ───────── Variables ───────── */
        /* 
            :root{
            --accent-color:#9394c0;
            --accent-hover:#a9a8db;
            --slide-duration:4s;
            --transition-speed:0.5s;
            --text-primary:#1f2937;
            --text-secondary:#6b7280;
            --bg-white:#ffffff;
            --bg-overlay:rgba(0,0,0,.4);
            --progress-track:#e5e7eb;
            --shadow-color:rgba(0,0,0,.1);
        }
        */
        /* ───────── Resets ───────── */
        /* *{margin:0;padding:0;box-sizing:border-box;} */
        
        .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

        /* ───────── Container ───────── */
        .hero-slider-container{
            position:relative;
            width:100vw;
            height:100vh;
            overflow:hidden;
            box-shadow:0 10px 25px var(--shadow-color);
            touch-action:pan-y;
            -webkit-user-select:none;
            -moz-user-select:none;
            user-select:none;
        }
        .slider-wrapper{position:relative;width:100%;height:100%;}

        /* ───────── Slides ───────── */
        .slide{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-size:cover;
            background-position:center;
            opacity:0;
            transition:opacity var(--transition-speed) ease;
            display:flex;
            align-items:center;
            justify-content:center;
            transform:translateX(0);
        }
        .slide.active{opacity:1;}
        .slide::before{content:'';position:absolute;inset:0;background:var(--bg-overlay);z-index:1;}

        /* ───────── Slide layout ───────── */
        .slide-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
            gap:4rem;max-width:1200px;width:90%;height:100%;
            align-items:center;padding:0rem; top: 10px;}
        .text-content{color:var(--bg-white);animation:slideInLeft .8s ease-out;}
        .text-content h1{font-size:3.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2;}
        .text-content p{font-size:1.25rem;font-weight:300;margin-bottom:2rem;opacity:.9;max-width:500px;}
        .cta-button{
            background:var(--accent-color);
            color:var(--bg-white);
            border:none;
            padding:1rem 2rem;
            font-size:1.1rem;
            font-weight:600;
            border-radius:50px;
            cursor:pointer;
            transition:.3s;
            touch-action:manipulation;
            -webkit-tap-highlight-color:transparent;
        }
        .cta-button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 25px rgba(99,102,241,.4);}
        .cta-button:active{transform:translateY(0);transition:transform 0.1s;}
        .illustration{animation:slideInRight .8s ease-out;}

        /* ───────── Navigation arrows ───────── */
        .nav-arrow{
            position:absolute;
            top:93%;
            transform:translateY(-50%);
            background:rgba(255,255,255,.9);
            border:none;
            width:35px;
            height:35px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:.3s;
            z-index:10;
            color:var(--text-primary);
            touch-action:manipulation;
            -webkit-tap-highlight-color:transparent;
        }
        .nav-arrow:hover{background:var(--bg-white);transform:translateY(-50%) scale(1.1);box-shadow:0 5px 15px var(--shadow-color);}
        .nav-arrow:active{transform:translateY(-50%) scale(0.95);transition:transform 0.1s;}
        .nav-arrow-left{left:2rem;}
        .nav-arrow-right{right:2rem;}

        /* ───────── Progress bars ───────── */
        .progress-container{
            position:absolute;
            bottom:2rem;
            left:50%;
            transform:translateX(-50%);
            display:flex;
            gap:.5rem;
            z-index:10;
        }
        .progress-bar{
            width:60px;
            height:4px;
            background:var(--progress-track);
            border-radius:2px;
            overflow:hidden;
            position:relative;
            cursor:pointer;
            touch-action:manipulation;
            -webkit-tap-highlight-color:transparent;
        }
        .progress-fill{height:100%;width:0;background:var(--accent-color);border-radius:2px;transition:width .3s;}
        .progress-bar.active .progress-fill{animation:fillProgress var(--slide-duration) linear forwards;}

        /* ───────── Touch feedback ───────── */
        .touch-indicator{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            width:60px;
            height:60px;
            border-radius:50%;
            background:rgba(255,255,255,0.2);
            pointer-events:none;
            opacity:0;
            z-index:15;
            transition:opacity 0.3s ease;
        }
        .touch-indicator.show{opacity:1;}

        /* ───────── Swipe hints ───────── */
        .swipe-hint{
            position:absolute;
            bottom:80px;
            left:50%;
            transform:translateX(-50%);
            color:rgba(255,255,255,0.7);
            font-size:0.9rem;
            z-index:10;
            opacity:1;
            transition:opacity 0.5s ease;
            pointer-events:none;
        }
        .swipe-hint.hidden{opacity:0;}

        /* ───────── Keyframes ───────── */
        @keyframes fillProgress{from{width:0;}to{width:100%;}}
        @keyframes slideInLeft{from{opacity:0;transform:translateX(-50px);}to{opacity:1;transform:translateX(0);}}
        @keyframes slideInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}

        /* ───────── Responsive ───────── */
        @media(max-width:1024px){
            .hero-slider-container{height:80vh;min-height:600px;}
            .slide-content{gap:2rem;}
            .text-content h1{font-size:2.8rem;}
            .text-content p{font-size:1.1rem;}
        }

        @media(max-width:768px){
            .hero-slider-container{height:70vh;min-height:500px;}
            .slide-content{grid-template-columns:1fr;gap:1.5rem;text-align:center;padding:1.5rem;}
            .text-content h1{font-size:2.5rem;}
            .text-content p{font-size:1rem;max-width:none;}
            .nav-arrow{width:45px;height:45px;}
            .nav-arrow-left{left:1rem;}
            .nav-arrow-right{right:1rem;}
            .progress-container{bottom:1rem;}
            .progress-bar{width:40px;height:6px;}
            .swipe-hint{bottom:60px;font-size:0.8rem;}
        }

        @media(max-width:480px){
            .hero-slider-container{height:85vh;min-height:400px;}
            .slide-content{padding:1rem;width:95%;}
            .text-content h1{margin-top: 55px; font-size:2rem;margin-bottom:1rem;}
            .text-content p{font-size:.95rem;margin-bottom:1.5rem;}
            .cta-button{padding:.8rem 1.5rem;font-size:1rem;}
            .nav-arrow{width:40px;height:40px;}
            .progress-bar{width:35px;height:5px;}
            .swipe-hint{bottom:50px;}
        }

        @media(max-width:320px){
            .text-content h1{font-size:1.8rem;}
            .slide-content{gap:1rem;}
            .nav-arrow{width:35px;height:35px;}
            .progress-bar{width:30px;height:4px;}
        }

        /* ───────── Hover states for touch devices ───────── */
        @media (hover: none) and (pointer: coarse) {
            .nav-arrow:hover{transform:translateY(-50%);background:rgba(255,255,255,.9);}
            .cta-button:hover{transform:none;background:var(--accent-color);}
        }