/* RESET & BASE */
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        :root{
            --primary-blue:#3b82f6;
            --primary-purple:#a855f7;
            --dark-blue:#1e3a8a;
            --light-purple:#c084fc;
            --white:#ffffff;
            --cream:#f8fafc;
            --dark-bg:#020617;
            --text-primary:#e5e7eb;
            --text-secondary:#9ca3af;
            --shadow:0 20px 50px rgba(0,0,0,0.5);
            --shadow-hover:0 30px 80px rgba(0,0,0,0.8);
            --radius-xl:32px;
            --radius-lg:24px;
            --radius-md:18px;
            --blur-strong:40px;
            --blur-soft:20px;
        }

        html{
            scroll-behavior:smooth;
            background:#000;
        }

        body{
            font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Segoe UI","Roboto",sans-serif;
            background:
                radial-gradient(circle at 0% 0%,rgba(59,130,246,0.7),transparent 50%),
                radial-gradient(circle at 100% 0%,rgba(168,85,247,0.7),transparent 50%),
                radial-gradient(circle at 50% 100%,rgba(248,250,252,1),transparent 55%),
                linear-gradient(180deg,#020617 0%,#0f172a 50%,#1e293b 100%);
            color:var(--text-primary);
            line-height:1.6;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
            position:relative;
        }

        /* ANIMATED BACKGROUND PARTICLES */
        body::before,
        body::after{
            content:"";
            position:fixed;
            width:600px;
            height:600px;
            border-radius:50%;
            filter:blur(120px);
            opacity:0.3;
            pointer-events:none;
            z-index:0;
            animation:float 20s ease-in-out infinite;
        }

        body::before{
            background:radial-gradient(circle,rgba(59,130,246,0.6),transparent);
            top:-200px;
            left:-200px;
            animation-delay:5s;
        }

        body::after{
            background:radial-gradient(circle,rgba(168,85,247,0.6),transparent);
            bottom:-200px;
            right:-200px;
            animation-delay:10s;
        }

        @keyframes float{
            0%,100%{transform:translate(0,0) scale(1);}
            25%{transform:translate(50px,-50px) scale(1.1);}
            50%{transform:translate(-30px,30px) scale(0.9);}
            75%{transform:translate(30px,50px) scale(1.05);}
        }

        /* SCROLL PROGRESS BAR */
        .scroll-progress{
            position:fixed;
            top:0;
            left:0;
            height:4px;
            background:linear-gradient(90deg,var(--primary-blue),var(--primary-purple),var(--white));
            z-index:999;
            transform-origin:left;
            transform:scaleX(0);
            transition:transform 1s ease-out;
            box-shadow:0 0 20px rgba(59,130,246,0.8);
        }

        /* GLOBAL LAYOUT */
        section{
            padding:120px 20px;
            position:relative;
            isolation:isolate;
            min-height:60vh;
        }

        .section-inner{
            max-width:1200px;
            margin:0 auto;
            position:relative;
            z-index:2;
        }

        .section-title{
            font-size:clamp(2.2rem,5vw,3.2rem);
            font-weight:900;
            text-align:center;
            margin-bottom:20px;
            letter-spacing:0.02em;
            background:linear-gradient(135deg,#ffffff,rgba(191,219,254,0.9),rgba(168,85,247,0.8));
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            opacity:0;
            transform:translateY(30px);
            transition:all 0.8s cubic-bezier(.22,.61,.36,1);
        }

        .section-title.visible{
            opacity:1;
            transform:translateY(0);
        }

        .section-sub{
            text-align:center;
            max-width:700px;
            margin:0 auto 50px;
            font-size:1.05rem;
            color:var(--text-secondary);
            opacity:0;
            transform:translateY(20px);
            transition:all 0.8s cubic-bezier(.22,.61,.36,1) 0.2s;
        }

        .section-sub.visible{
            opacity:1;
            transform:translateY(0);
        }

        /* NAVBAR */
        header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            z-index:100;
            backdrop-filter:blur(20px) saturate(180%);
            -webkit-backdrop-filter:blur(20px) saturate(180%);
            background:linear-gradient(to right,rgba(15,23,42,0.85),rgba(15,23,42,0.75));
            border-bottom:1px solid rgba(148,163,184,0.2);
            transition:all 0.5s cubic-bezier(.22,.61,.36,1);
            box-shadow:0 10px 40px rgba(0,0,0,0.3);
        }

        body.scrolled header{
            background:rgba(2,6,23,0.95);
            box-shadow:0 20px 60px rgba(0,0,0,0.6);
            transform:translateY(0) scale(1);
            border-color:rgba(59,130,246,0.4);
        }

        .nav{
            max-width:1200px;
            margin:0 auto;
            padding:14px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }

        .nav-left{
            display:flex;
            align-items:center;
            gap:14px;
            cursor:pointer;
        }

        .nav-logo{
            width:46px;
            height:46px;
            border-radius:16px;
            object-fit:cover;
            background:radial-gradient(circle at 10% 0%,rgba(255,255,255,0.5),transparent 80%);
            box-shadow:0 10px 30px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.2);
            transform:translateY(0) rotate(0deg);
            transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
        }

        .nav-left:hover .nav-logo{
            transform:translateY(-4px) rotate(8deg) scale(1.05);
            box-shadow:0 20px 60px rgba(59,130,246,0.6),0 0 0 1px rgba(255,255,255,0.3);
        }

        .nav-title{
            font-weight:800;
            font-size:1.15rem;
            color:#f9fafb;
            letter-spacing:0.05em;
            text-transform:uppercase;
        }

        .nav-tagline{
            font-size:0.7rem;
            color:#9ca3af;
            text-transform:uppercase;
            letter-spacing:0.2em;
        }

        .nav-links{
            display:flex;
            gap:28px;
            align-items:center;
        }

        .nav-links a{
            color:#e5e7eb;
            text-decoration:none;
            font-size:0.9rem;
            font-weight:500;
            position:relative;
            letter-spacing:0.05em;
            padding:8px 0;
            opacity:0.8;
            transition:all 0.3s cubic-bezier(.22,.61,.36,1);
        }

        .nav-links a::after{
            content:"";
            position:absolute;
            left:0;
            bottom:0;
            width:0;
            height:2px;
            border-radius:2px;
            background:linear-gradient(90deg,var(--primary-blue),var(--primary-purple));
            transition:width 0.4s cubic-bezier(.34,1.56,.64,1);
        }

        .nav-links a:hover{
            opacity:1;
            transform:translateY(-2px);
        }

        .nav-links a:hover::after{
            width:100%;
        }

        .nav-cta{
            background:linear-gradient(135deg,rgba(59,130,246,1),rgba(168,85,247,1));
            color:#ffffff;
            padding:10px 22px;
            border-radius:999px;
            font-size:0.85rem;
            font-weight:700;
            text-decoration:none;
            box-shadow:0 10px 30px rgba(59,130,246,0.4);
            letter-spacing:0.08em;
            text-transform:uppercase;
            display:inline-flex;
            align-items:center;
            gap:8px;
            transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
            border:none;
            position:relative;
            overflow:hidden;
        }

        .nav-cta::before{
            content:"";
            position:absolute;
            inset:-100%;
            background:conic-gradient(from 0deg,transparent,rgba(255,255,255,0.3),transparent);
            opacity:0;
            transition:opacity 0.4s ease;
        }

        .nav-cta:hover{
            transform:translateY(-3px) scale(1.05);
            box-shadow:0 20px 50px rgba(59,130,246,0.6);
        }

        .nav-cta:hover::before{
            opacity:1;
            animation:spinShine 2s linear infinite;
        }

        @keyframes spinShine{
            to{transform:rotate(360deg);}
        }

        /* HERO */
        .hero{
            min-height:100vh;
            padding-top:100px;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            overflow:hidden;
            perspective:1500px;
        }

        .hero::before{
            content:"";
            position:absolute;
            inset:-20%;
            background:
                radial-gradient(circle at 15% 10%,rgba(59,130,246,0.6),transparent 50%),
                radial-gradient(circle at 85% 10%,rgba(168,85,247,0.65),transparent 50%),
                radial-gradient(circle at 50% 90%,rgba(248,250,252,0.95),transparent 60%);
            opacity:0.9;
            pointer-events:none;
            animation:heroGlow 15s ease-in-out infinite;
        }

        @keyframes heroGlow{
            0%,100%{transform:scale(1) rotate(0deg);}
            50%{transform:scale(1.1) rotate(5deg);}
        }

        .hero::after{
            content:"";
            position:absolute;
            width:300%;
            height:300%;
            background:
                radial-gradient(circle,rgba(255,255,255,0.05) 1px,transparent 1px),
                radial-gradient(circle,rgba(59,130,246,0.08) 1px,transparent 1px);
            background-size:60px 60px,80px 80px;
            background-position:0 0,40px 40px;
            opacity:0.4;
            transform:translate3d(0,0,0);
            animation:heroGrid 60s linear infinite;
            mix-blend-mode:screen;
        }

        @keyframes heroGrid{
            0%{transform:translate3d(0,0,0);}
            100%{transform:translate3d(150px,120px,0);}
        }

        .hero-inner{
            position:relative;
            z-index:2;
            text-align:center;
            max-width:880px;
            padding:50px 30px 60px;
            border-radius:var(--radius-xl);
            backdrop-filter:blur(var(--blur-strong)) saturate(180%);
            -webkit-backdrop-filter:blur(var(--blur-strong)) saturate(180%);
            background:
                radial-gradient(circle at 10% 10%,rgba(255,255,255,0.15),transparent 60%),
                linear-gradient(145deg,rgba(15,23,42,0.85),rgba(15,23,42,0.75));
            border:1px solid rgba(148,163,184,0.3);
            box-shadow:
                0 50px 180px rgba(0,0,0,0.9),
                inset 0 1px 0 rgba(255,255,255,0.1);
            transform:translateY(40px) scale(0.95);
            opacity:0;
            animation:heroReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards 0.3s;
            will-change:transform,opacity;
        }

        @keyframes heroReveal{
            to{
                opacity:1;
                transform:translateY(0) scale(1);
            }
        }

        .hero-logo-big{
            width:130px;
            height:130px;
            margin:0 auto 25px;
            border-radius:35px;
            object-fit:cover;
            box-shadow:
                0 30px 100px rgba(0,0,0,0.9),
                0 0 0 1px rgba(255,255,255,0.2);
            border:2px solid rgba(59,130,246,0.3);
            background:radial-gradient(circle at 10% 10%,rgba(255,255,255,0.4),transparent 70%);
            transform:translateY(-30px) scale(0.9) rotateX(15deg);
            opacity:0;
            animation:logoFloat 1s cubic-bezier(.34,1.56,.64,1) forwards 0.1s;
        }

        @keyframes logoFloat{
            to{
                opacity:1;
                transform:translateY(0) scale(1) rotateX(0deg);
            }
        }

        .hero-title{
            font-size:clamp(2.8rem,6vw,4.5rem);
            font-weight:900;
            letter-spacing:0.02em;
            margin-bottom:16px;
            background:linear-gradient(135deg,#ffffff 0%,#e0e7ff 40%,#c7d2fe 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            opacity:0;
            transform:translateY(25px);
            animation:titleSlide 1s cubic-bezier(.22,.61,.36,1) forwards 0.4s;
            text-shadow:0 0 40px rgba(255,255,255,0.3);
        }

        @keyframes titleSlide{
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        .hero-tagline{
            font-size:clamp(1rem,2.5vw,1.3rem);
            letter-spacing:0.3em;
            margin-bottom:20px;
            color:#c7d2fe;
            opacity:0;
            transform:translateY(20px);
            animation:fadeSlide 1s cubic-bezier(.22,.61,.36,1) forwards 0.6s;
            text-transform:uppercase;
        }

        .hero-subtitle{
            font-size:1.1rem;
            max-width:620px;
            margin:0 auto 35px;
            color:var(--text-secondary);
            line-height:1.7;
            opacity:0;
            transform:translateY(20px);
            animation:fadeSlide 1s cubic-bezier(.22,.61,.36,1) forwards 0.8s;
        }

        @keyframes fadeSlide{
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        .hero-actions{
            display:flex;
            justify-content:center;
            gap:18px;
            flex-wrap:wrap;
            opacity:0;
            transform:translateY(20px);
            animation:fadeSlide 1s cubic-bezier(.22,.61,.36,1) forwards 1s;
        }

        .hero-btn{
            border:none;
            cursor:pointer;
            padding:16px 36px;
            border-radius:999px;
            font-size:0.95rem;
            font-weight:700;
            display:inline-flex;
            align-items:center;
            gap:12px;
            text-decoration:none;
            transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
            letter-spacing:0.08em;
            text-transform:uppercase;
            position:relative;
            overflow:hidden;
            box-shadow:0 10px 30px rgba(0,0,0,0.3);
        }

        .hero-btn::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
            transform:translateX(-100%);
            transition:transform 0.8s cubic-bezier(.22,.61,.36,1);
        }

        .hero-btn:hover::before{
            transform:translateX(100%);
        }

        .hero-btn-primary{
            background:linear-gradient(135deg,#ffffff,#e5e7eb);
            color:#0f172a;
            box-shadow:0 20px 60px rgba(255,255,255,0.3);
        }

        .hero-btn-primary:hover{
            transform:translateY(-5px) scale(1.05);
            box-shadow:0 30px 80px rgba(255,255,255,0.4);
        }

        .hero-btn-ghost{
            background:rgba(148,163,184,0.1);
            border:2px solid rgba(148,163,184,0.5);
            color:#e5e7eb;
            backdrop-filter:blur(10px);
        }

        .hero-btn-ghost:hover{
            transform:translateY(-3px);
            border-color:#e5e7eb;
            background:rgba(59,130,246,0.2);
            box-shadow:0 20px 50px rgba(59,130,246,0.4);
        }

        .hero-scroll{
            position:absolute;
            left:50%;
            bottom:40px;
            transform:translateX(-50%);
            font-size:0.85rem;
            color:#e0e7ff;
            opacity:0;
            animation:fadeSlide 1s cubic-bezier(.22,.61,.36,1) forwards 1.2s, bounce 2.5s ease-in-out infinite 1.8s;
            letter-spacing:0.2em;
            text-transform:uppercase;
        }

        @keyframes bounce{
            0%,20%,50%,80%,100%{transform:translate(-50%,0);}
            40%{transform:translate(-50%,-12px);}
            60%{transform:translate(-50%,-6px);}
        }

        /* ABOUT SECTION */
        .about-grid{
            display:grid;
            gap:24px;
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        }

        .about-card{
            background:
                radial-gradient(circle at 0 0,rgba(59,130,246,0.15),transparent 70%),
                linear-gradient(145deg,rgba(15,23,42,0.9),rgba(15,23,42,0.8));
            border-radius:var(--radius-lg);
            padding:32px 24px;
            box-shadow:var(--shadow);
            transform:translateY(60px) scale(0.9);
            opacity:0;
            transition:all 0.8s cubic-bezier(.22,.61,.36,1);
            border:1px solid rgba(59,130,246,0.3);
            position:relative;
            overflow:hidden;
            cursor:pointer;
        }

        .about-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(59,130,246,0.2),transparent 50%);
            opacity:0;
            transition:opacity 0.4s ease;
        }

        .about-card:hover::before{
            opacity:1;
        }

        .about-card.visible{
            transform:translateY(0) scale(1);
            opacity:1;
        }

        .about-card:hover{
            transform:translateY(-10px) scale(1.02);
            box-shadow:var(--shadow-hover);
            border-color:rgba(59,130,246,0.6);
        }

        .about-stat{
            font-size:2.5rem;
            font-weight:900;
            background:linear-gradient(135deg,#3b82f6,#a855f7,#e5e7eb);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            margin-bottom:10px;
            display:inline-block;
        }

        .about-card h3{
            font-size:1.15rem;
            margin-bottom:10px;
            color:#e5e7eb;
        }

        .about-card p{
            font-size:0.95rem;
            color:var(--text-secondary);
            line-height:1.6;
        }

        /* PRODUCTS SECTION */
        .products-section{
    background:
        radial-gradient(circle at 10% 20%,rgba(37,99,235,0.3),transparent 60%),
        radial-gradient(circle at 90% 80%,rgba(147,51,234,0.3),transparent 60%),
        #020617;
    overflow:hidden;
    position:relative;
}

/* ---------------- CATEGORY BLOCK ---------------- */

.category-block{
    margin-top:70px;
    position:relative;
}

.category-block::before{
    content:"";
    position:absolute;
    inset:-60px -100px;
    background:radial-gradient(circle at 20% 50%,rgba(59,130,246,0.15),transparent 70%);
    opacity:0.6;
    pointer-events:none;
    z-index:0;
}

.category-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    margin-bottom:30px;
    position:relative;
    z-index:1;
    opacity:0;
    transform:translateX(-40px);
    transition:all 0.8s cubic-bezier(.22,.61,.36,1);
}

.category-header.visible{
    opacity:1;
    transform:translateX(0);
}

.category-name{
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:0.05em;
    background:linear-gradient(135deg,#ffffff,#bfdbfe);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.category-note{
    font-size:0.9rem;
    color:var(--text-secondary);
}

/* ---------------- PRODUCTS ROW (SPOTIFY STYLE) ---------------- */

.products-row{
    display:flex;
    gap:24px;
    overflow-x:auto;
    padding:15px 60px 30px;
    scroll-behavior:smooth;
    position:relative;
    z-index:1;

    /* Spotify snap */
    scroll-snap-type:x mandatory;

    scrollbar-width:thin;
    scrollbar-color:rgba(59,130,246,0.6) rgba(15,23,42,0.8);
}

.products-row::-webkit-scrollbar{
    height:8px;
}

.products-row::-webkit-scrollbar-track{
    background:rgba(15,23,42,0.8);
    border-radius:10px;
}

.products-row::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg,#3b82f6,#a855f7);
    border-radius:10px;
}

/* ---------------- PRODUCT CARD ---------------- */

.product-card{
    flex:0 0 280px;
    scroll-snap-align:center;

    background:
        radial-gradient(circle at 0 0,rgba(59,130,246,0.1),transparent 70%),
        linear-gradient(145deg,rgba(15,23,42,0.95),rgba(15,23,42,0.85));

    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;

    /* Spotify slide-in */
    transform:translateX(40px) scale(0.95);
    opacity:0;

    transition:
        transform 0.6s cubic-bezier(.22,.61,.36,1),
        opacity 0.6s ease,
        box-shadow 0.4s ease;

    border:1px solid rgba(148,163,184,0.2);
    position:relative;
    cursor:pointer;
}

/* visible on scroll */
.product-card.visible{
    transform:translateX(0) scale(1);
    opacity:1;
}

/* Spotify focus hover */
.products-row:hover .product-card{
    opacity:0.5;
    transform:scale(0.95);
}

.products-row:hover .product-card:hover{
    opacity:1;
    transform:scale(1.08);
    z-index:10;
    box-shadow:0 25px 60px rgba(59,130,246,0.45);
    border-color:rgba(59,130,246,0.6);
}

/* Glow follows mouse */
.product-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at var(--mouse-x,50%) var(--mouse-y,50%),
        rgba(59,130,246,0.2),
        transparent 60%
    );
    opacity:0;
    transition:opacity 0.4s ease;
    pointer-events:none;
}

.product-card:hover::after{
    opacity:1;
}

/* ---------------- IMAGE ---------------- */

.product-image{
    width:100%;
    height:200px;
    object-fit:cover;
    background:linear-gradient(135deg,#3b82f6,#6366f1,#a855f7);
    transform:scale(1.05);
    transition:transform 0.6s ease, filter 0.6s ease;
}

.product-card:hover .product-image{
    transform:scale(1.15);
    filter:saturate(1.25) brightness(1.1);
}

/* ---------------- CONTENT ---------------- */

.product-body{
    padding:20px 18px 22px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.product-code{
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.15em;
    color:#bfdbfe;
    font-weight:700;
}

.product-title{
    font-size:1.05rem;
    font-weight:700;
    color:#e5e7eb;
}

.product-desc{
    font-size:0.88rem;
    color:var(--text-secondary);
    flex:1;
    line-height:1.5;
}

/* ---------------- CTA ---------------- */

.product-cta-row{
    margin-top:12px;
    display:flex;
    gap:10px;
}

.product-btn{
    flex:1;
    border:none;
    cursor:pointer;
    font-size:0.78rem;
    padding:11px 12px;
    border-radius:999px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
    position:relative;
    overflow:hidden;
}

.product-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
    transform:translateX(-100%);
    transition:transform 0.6s ease;
}

.product-btn:hover::before{
    transform:translateX(100%);
}

.btn-contact{
    background:linear-gradient(135deg,#3b82f6,#6366f1,#a855f7);
    color:#f9fafb;
}

.btn-contact:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 35px rgba(59,130,246,0.5);
}

.btn-quote{
    background:transparent;
    border:1px solid rgba(96,165,250,0.6);
    color:#bfdbfe;
}

.btn-quote:hover{
    background:rgba(37,99,235,0.2);
    border-color:#3b82f6;
}

/* ---------------- SPOTIFY NEXT / PREV BUTTONS ---------------- */

.scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    z-index:20;
    transition:all 0.3s ease;
}

.scroll-btn:hover{
    background:rgba(59,130,246,0.9);
    transform:translateY(-50%) scale(1.1);
}

.scroll-btn.prev{
    left:15px;
}

.scroll-btn.next{
    right:15px;
}

        /* MODAL */
        .modal{
            display:none;
            position:fixed;
            inset:0;
            background:rgba(2,6,23,0.95);
            backdrop-filter:blur(20px);
            z-index:200;
            align-items:flex-start;
            justify-content:center;
            overflow-y:auto;
            padding:50px 20px;
            animation:modalFadeIn 0.3s ease-out;
        }

        @keyframes modalFadeIn{
            from{opacity:0;}
            to{opacity:1;}
        }

        .modal-visible{
            display:flex;
        }

        .modal-box{
            background:
                radial-gradient(circle at 0 0,rgba(59,130,246,0.15),transparent 40%),
                linear-gradient(145deg,rgba(15,23,42,0.95),rgba(15,23,42,0.9));
            max-width:560px;
            width:100%;
            margin:0 auto;
            padding:32px 28px 28px;
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-hover);
            position:relative;
            animation:modalSlideIn 0.4s cubic-bezier(.34,1.56,.64,1);
            border:1px solid rgba(59,130,246,0.3);
        }

        @keyframes modalSlideIn{
            from{opacity:0;transform:translateY(50px) scale(.95);}
            to{opacity:1;transform:translateY(0) scale(1);}
        }

        .modal-close{
            position:absolute;
            top:16px;
            right:20px;
            font-size:1.8rem;
            cursor:pointer;
            color:var(--text-secondary);
            transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
            width:36px;
            height:36px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
        }

        .modal-close:hover{
            color:#e5e7eb;
            transform:rotate(90deg) scale(1.1);
            background:rgba(239,68,68,0.2);
        }

        .modal-title{
            font-size:1.5rem;
            font-weight:800;
            margin-top:8px;
            margin-bottom:6px;
            color:#f9fafb;
        }

        .modal-code{
            font-size:0.85rem;
            text-transform:uppercase;
            letter-spacing:0.15em;
            color:#bfdbfe;
            font-weight:700;
        }

        .modal-price-info{
            font-size:0.95rem;
            margin-top:8px;
            color:#c7d2fe;
            font-weight:600;
        }

        .modal-desc{
            font-size:0.95rem;
            margin-top:14px;
            color:var(--text-secondary);
            line-height:1.6;
        }

        .modal-contact-grid{
            margin-top:24px;
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
            gap:14px;
        }

        .modal-contact-card{
            padding:18px 14px;
            border-radius:16px;
            background:
                radial-gradient(circle at 0 0,rgba(59,130,246,0.2),transparent 70%),
                linear-gradient(135deg,#1e293b,#0f172a);
            color:#f9fafb;
            text-align:center;
            border:1px solid rgba(59,130,246,0.3);
            transition:all 0.4s cubic-bezier(.34,1.56,.64,1);
            cursor:pointer;
        }

        .modal-contact-card:hover{
            transform:translateY(-4px);
            border-color:rgba(59,130,246,0.6);
            box-shadow:0 10px 30px rgba(59,130,246,0.3);
        }

        .modal-contact-card h4{
            font-size:0.95rem;
            margin-bottom:8px;
        }

        .modal-contact-card a{
            display:inline-block;
            margin:6px 4px 0;
            padding:8px 14px;
            border-radius:999px;
            font-size:0.82rem;
            text-decoration:none;
            font-weight:700;
            background:#f9fafb;
            color:#111827;
            transition:all 0.3s cubic-bezier(.34,1.56,.64,1);
        }

        .modal-contact-card a:hover{
            background:linear-gradient(135deg,#3b82f6,#a855f7);
            color:#fff;
            transform:scale(1.05);
        }

        .modal-note{
            margin-top:18px;
            font-size:0.8rem;
            color:var(--text-secondary);
            line-height:1.5;
        }

        /* LOCATIONS */
        .locations-section{
            background:#020617;
        }

        .locations-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
            gap:28px;
        }

        .location-card{
            background:
                radial-gradient(circle at 0 0,rgba(59,130,246,0.12),transparent 70%),
                linear-gradient(145deg,rgba(15,23,42,0.95),rgba(15,23,42,0.9));
            border-radius:var(--radius-lg);
            overflow:hidden;
            box-shadow:var(--shadow);
            transform:translateY(60px) scale(0.9);
            opacity:0;
            transition:all 0.8s cubic-bezier(.22,.61,.36,1);
            border:1px solid rgba(148,163,184,0.2);
            cursor:pointer;
        }

        .location-card.visible{
            transform:translateY(0) scale(1);
            opacity:1;
        }

        .location-card:hover{
            transform:translateY(-10px) scale(1.02);
            box-shadow:var(--shadow-hover);
            border-color:rgba(59,130,246,0.5);
        }

        .location-map{
            height:240px;
            overflow:hidden;
            position:relative;
        }

        .location-map iframe{
            width:100%;
            height:100%;
            border:0;
            filter:grayscale(20%) contrast(1.1) saturate(1.2);
            transition:all 0.8s cubic-bezier(.22,.61,.36,1);
        }

        .location-card:hover .location-map iframe{
            filter:grayscale(0%) contrast(1.15) saturate(1.4);
            transform:scale(1.1);
        }

        .location-body{
            padding:22px 20px 24px;
        }

        .location-title{
            font-size:1.2rem;
            font-weight:800;
            color:#e5e7eb;
            margin-bottom:8px;
        }

        .location-address{
            font-size:0.9rem;
            color:var(--text-secondary);
            margin-bottom:12px;
            line-height:1.5;
        }

        .location-contact-line{
            font-size:0.9rem;
            margin-top:6px;
            color:var(--text-secondary);
        }

        .location-contact-line a{
            color:#bfdbfe;
            text-decoration:none;
            transition:all 0.3s ease;
        }

        .location-contact-line a:hover{
            color:#ffffff;
            text-decoration:underline;
        }


            /*Exhibitions Section*/
           /* ---------- COMMON ---------- */
.exhibitions,
.rewards{
    padding:100px 6%;
    background:#020617;
    overflow:hidden;
}

.section-head{
    text-align:center;
    margin-bottom:55px;
}

.badge{
    display:inline-block;
    padding:6px 16px;
    border-radius:999px;
    background:rgba(59,130,246,0.18);
    color:#93c5fd;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.section-head h2{
    font-size:38px;
    font-weight:800;
    color:#ffffff;
}

.section-head p{
    margin-top:10px;
    color:#94a3b8;
    font-size:15px;
}

/* ---------- AUTO SCROLL BASE ---------- */
.auto-scroll-wrap{
    overflow:hidden;
    position:relative;
}

.auto-scroll-track{
    display:flex;
    gap:28px;
    width:max-content;
    animation:scrollLeft 40s linear infinite;
}

.auto-scroll-wrap:hover .auto-scroll-track{
    animation-play-state:paused;
}

/* ---------- EXHIBITION CARDS ---------- */
.expo-card{
    position:relative;
    width:320px;
    height:220px;
    border-radius:22px;
    overflow:hidden;
    flex-shrink:0;
    cursor:pointer;
    transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.expo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.6s ease;
}

.expo-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px;
    background:linear-gradient(to top,rgba(0,0,0,0.85),transparent);
}

.expo-info h4{
    color:#ffffff;
    font-size:16px;
    font-weight:700;
}

.expo-info span{
    font-size:13px;
    color:#c7d2fe;
}

.expo-card:hover{
    transform:scale(1.06);
    box-shadow:0 25px 60px rgba(59,130,246,0.45);
}

.expo-card:hover img{
    transform:scale(1.15);
}

/* ---------- SCROLL ANIMATION ---------- */
@keyframes scrollLeft{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}





.reward-track{
    display:flex;
    gap:30px;
    width:max-content;
    animation:scrollLeft 55s linear infinite;
}

.auto-scroll-wrap:hover .reward-track{
    animation-play-state:paused;
}

.reward-card{
    width:260px;
    flex-shrink:0;
    background:#0f172a;
    border-radius:22px;
    padding:34px 24px;
    text-align:center;
    border:1px solid rgba(148,163,184,0.2);
    transition:transform 0.4s ease, box-shadow 0.4s ease;
}

.reward-card img{
    width:90px;
    margin-bottom:20px;
}

.reward-card h3{
    color:#ffffff;
    font-size:17px;
    font-weight:700;
}

.reward-card span{
    display:block;
    margin-top:8px;
    font-size:14px;
    color:#94a3b8;
}

.reward-card:hover{
    transform:translateY(-12px) scale(1.04);
    box-shadow:0 30px 70px rgba(147,51,234,0.45);
    border-color:rgba(147,51,234,0.6);
}

/* FOOTER */
            footer{
                background:linear-gradient(to top, #000000, #020617);
                color:#e5e7eb;
            padding:50px 20px 30px;
            border-top:1px solid rgba(59,130,246,0.2);
        }

        .footer-inner{
            max-width:1200px;
            margin:0 auto;
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
            gap:30px;
        }

        .footer-title{
            color:#f9fafb;
            font-weight:800;
            margin-bottom:10px;
            letter-spacing:0.1em;
            text-transform:uppercase;
            font-size:0.85rem;
        }

        .footer-col p,
        .footer-col a{
            font-size:0.9rem;
            color:#9ca3af;
            text-decoration:none;
            margin-bottom:6px;
            line-height:1.6;
        }

        .footer-col a{
            transition:all 0.3s ease;
        }

        .footer-col a:hover{
            color:#e5e7eb;
            transform:translateX(3px);
        }

        .footer-links{
            display:flex;
            flex-direction:column;
        }

        .footer-social{
            margin-top:10px;
        }

        .footer-social a{
            color:#f9fafb;
            font-weight:600;
        }

        .footer-bottom{
            max-width:1200px;
            margin:30px auto 0;
            border-top:1px solid rgba(55,65,81,0.5);
            padding-top:20px;
            text-align:center;
            font-size:0.85rem;
            color:#6b7280;
        }

        /* RESPONSIVE */
        @media(max-width:768px){
            .nav-links{display:none;}
            .hero{
                min-height:90vh;
                padding-top:100px;
            }
            section{
                padding:80px 18px;
            }
            .hero-inner{
                padding:35px 20px 40px;
            }
            .hero-title{
                letter-spacing:0.05em;
            }
            .hero-actions{
                gap:12px;
            }
            .modal{
                padding:30px 15px;
            }
            .product-card{
                flex:0 0 250px;
            }
        }

        @media(max-width:480px){
            .hero-logo-big{
                width:100px;
                height:100px;
            }
            .product-card{
                flex:0 0 240px;
            }
        }