:root{--bg:#020711;--panel:#071426;--text:#f5f8ff;--muted:#a8b3c7;--cyan:#00eaff;--blue:#315cff;--purple:#7b2cff;--pink:#e500b8;--gold:#f2b632;--border:rgba(120,180,255,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.55}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 22%,rgba(34,77,255,.13),transparent 30%),radial-gradient(circle at 35% 52%,rgba(0,234,255,.05),transparent 30%);z-index:-1}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.header{position:sticky;top:0;z-index:20;background:rgba(2,7,17,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(130,180,255,.1)}.header-inner{height:82px;display:flex;align-items:center;gap:28px}.brand img{width:190px;max-height:58px;object-fit:contain;display:block}.nav{display:flex;gap:30px;margin:auto;font-size:14px}.nav a{opacity:.82;padding:30px 0;border-bottom:2px solid transparent}.nav a:hover,.nav a.active{opacity:1;border-bottom-color:var(--cyan)}.header-order{padding:12px 24px;border:1px solid var(--purple);border-radius:14px;box-shadow:0 0 22px rgba(123,44,255,.2)}.hero{padding:70px 0 42px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:34px}.eyebrow{font-size:11px;letter-spacing:5px;font-weight:800;color:var(--cyan);margin-bottom:12px}h1{font-size:clamp(48px,6vw,76px);line-height:.98;margin:0 0 24px;font-weight:900;letter-spacing:-3px}h1 span,h2 span{background:linear-gradient(90deg,#fff,var(--cyan),#8754ff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p,.section-head>p,.order-box>div p{max-width:560px;color:var(--muted);font-size:17px}.hero-actions{display:flex;gap:14px;margin:28px 0 18px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 25px;border-radius:13px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(100deg,var(--blue),var(--purple),var(--pink));box-shadow:0 12px 35px rgba(95,39,255,.28)}.secondary{border-color:#7b35ff;background:rgba(0,0,0,.15)}.hero-points{display:flex;flex-wrap:wrap;gap:16px;color:#aab5c8;font-size:11px}
.hero-art{
    position:relative;
}

.hero-art::before{
     content:"";
    position:absolute;
    width:85%;
    height:75%;
    left:7.5%;
    top:12%;
    background:radial-gradient(
        ellipse,
        rgba(21,76,255,.65) 0%,
        rgba(0,234,255,.32) 30%,
        rgba(49,92,255,.16) 50%,
        transparent 75%
    );
    filter:blur(45px);
    z-index:0;
}

.hero-art img{
    position:relative;
    z-index:1;
    width:100%;
    max-height:430px;
    object-fit:contain;
    border-radius:0;
     box-shadow:none;
    transform:scale(1.48);
}
.categories-section{padding:10px 0 28px;position:relative}
.categories-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:16px}
.categories-head h2{font-size:27px;line-height:1.05;margin:0}
.categories-head h2 span{background:linear-gradient(90deg,#fff,var(--cyan),#8754ff,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.categories-all{font-size:12px;color:#b9c4d8;white-space:nowrap;transition:.2s}
.categories-all:hover{color:var(--cyan)}
.category-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.category-card{position:relative;min-height:132px;padding:16px 10px 12px;border:1px solid rgba(120,180,255,.15);border-radius:14px;background:
linear-gradient(145deg,rgba(11,28,47,.94),rgba(4,11,23,.98));
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;transition:.25s;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.category-card:before{content:"";position:absolute;inset:auto -30% -65% -30%;height:90px;background:radial-gradient(circle,rgba(0,234,255,.14),transparent 65%);pointer-events:none}
.category-card:hover{transform:translateY(-3px);border-color:rgba(0,234,255,.55);box-shadow:0 10px 28px rgba(0,180,255,.08)}
.category-card.featured{border-color:rgba(0,234,255,.72);box-shadow:0 0 0 1px rgba(0,234,255,.08),0 0 28px rgba(0,234,255,.13),inset 0 1px 0 rgba(255,255,255,.04)}
.category-card.featured:after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,rgba(0,234,255,.07),transparent 45%,rgba(123,44,255,.08));pointer-events:none}
.category-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:9px;font-size:25px;color:#dffcff;background:linear-gradient(145deg,#0a3555,#081323);border:1px solid rgba(0,234,255,.28);box-shadow:0 0 20px rgba(0,234,255,.08);position:relative;z-index:1}
.featured .category-icon{font-size:29px;background:linear-gradient(145deg,#073a56,#101a35);border-color:rgba(0,234,255,.55);box-shadow:0 0 24px rgba(0,234,255,.15)}
.category-card strong{font-size:13px;line-height:1.15;position:relative;z-index:1}
.category-card small{margin-top:5px;color:#75849b;font-size:9px;line-height:1.15;position:relative;z-index:1}
.numbers{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(5,13,25,.7)}.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr)}.numbers-grid>div{padding:23px 24px;border-right:1px solid var(--border)}.numbers strong{display:block;font-size:27px;color:var(--cyan)}.numbers span{font-size:11px;color:var(--muted)}.section{padding:90px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.section-head h2,h2{font-size:44px;line-height:1.05;margin:0;font-weight:900}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{position:relative;text-align:center;padding:42px 30px 28px;min-height:570px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,rgba(10,27,45,.92),rgba(4,12,24,.96));overflow:hidden}.card.gold{border-color:#b82cff;box-shadow:0 0 35px rgba(157,42,255,.16)}.popular-label{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:9px 30px;background:linear-gradient(90deg,#5734ff,#ee00ae);border-radius:0 0 12px 12px;font-size:10px;font-weight:900;letter-spacing:2px}.medal{width:74px;height:74px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;font-size:31px;font-weight:900;background:linear-gradient(145deg,#f5f7fb,#5e6874);box-shadow:0 0 25px rgba(190,220,255,.15)}.gold-medal{background:linear-gradient(145deg,#ffe78a,#bd7600)}.card h3{font-size:31px;letter-spacing:2px;margin:0}.gold h3{color:#ffd55c}.line{width:48px;height:2px;background:var(--cyan);margin:13px auto 18px}.gold .line{background:#ffd23d}.card p{font-size:17px;min-height:55px}.product-icons{height:100px;display:flex;justify-content:center;align-items:center;gap:32px}.usb{width:120px;height:42px;border-radius:5px 8px 8px 5px;transform:rotate(-10deg);position:relative;box-shadow:0 8px 22px rgba(0,0,0,.35)}.usb:before{content:"";position:absolute;left:-20px;width:20px;height:22px;border-radius:2px 0 0 2px;background:#b8c6d4}.usb-silver{background:linear-gradient(135deg,#e9f5ff,#5d7284)}.usb-gold{background:linear-gradient(135deg,#fff0a0,#b87b00)}.usb-platinum{background:linear-gradient(135deg,#fff,#8c9aaa)}.perfume{width:45px;height:62px;border:3px solid #35d9ff;border-radius:7px 7px 10px 10px;color:#7df3ff;display:grid;place-items:center;box-shadow:0 0 18px rgba(0,234,255,.18)}.price{font-size:42px;font-weight:900;color:var(--cyan);margin:6px 0 20px}.price small{font-size:19px;font-weight:600}.card-btn{width:100%}.benefits{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:18px;background:rgba(8,21,37,.7);overflow:hidden}.benefits>div{display:flex;gap:15px;align-items:center;padding:20px;border-right:1px solid var(--border)}.benefits i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#061c34;color:var(--cyan);font-style:normal;font-size:23px}.benefits b,.benefits small{display:block}.benefits small{color:var(--muted)}.how{border-top:1px solid var(--border)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}.steps>div,.review-card{padding:30px;border:1px solid var(--border);border-radius:18px;background:rgba(7,18,31,.65)}.steps b{color:var(--cyan);font-size:25px}.steps p,.review-card p{color:var(--muted)}.review-card{display:flex;gap:20px;max-width:700px;margin-top:30px}.avatar{width:55px;height:55px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--purple));font-weight:900;font-size:22px}.stars{color:#ffd43d;letter-spacing:2px}.order-box{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:45px;border:1px solid #254d77;border-radius:25px;background:linear-gradient(135deg,rgba(7,23,41,.95),rgba(6,12,26,.92))}form{display:grid;gap:12px}input,select,textarea{width:100%;background:#030a15;border:1px solid #25364d;color:#fff;border-radius:12px;padding:15px;font:inherit;outline:none}textarea{min-height:110px;resize:vertical}.form-note{text-align:center;color:#748198}footer{border-top:1px solid var(--border);padding:25px 0;color:#728097;font-size:12px}.footer-inner{display:flex;justify-content:space-between}@media(max-width:900px){.nav{gap:15px}.hero-grid,.order-box{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.benefits,.numbers-grid,.steps{grid-template-columns:1fr 1fr}}@media(max-width:650px){.container{width:calc(100% - 24px)}.categories-section{padding-top:4px}.categories-head{align-items:center}.categories-head h2{font-size:24px}.category-strip{display:flex;overflow-x:auto;gap:10px;padding:2px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.category-strip::-webkit-scrollbar{height:4px}.category-strip::-webkit-scrollbar-thumb{background:rgba(0,234,255,.25);border-radius:10px}.category-card{flex:0 0 142px;min-height:132px;scroll-snap-align:start}.header-inner{height:70px}.brand img{width:150px}.nav{display:none}.header-order{margin-left:auto;padding:10px 15px;font-size:12px}.hero{padding-top:45px}.hero-grid{gap:25px}.hero-art{order:-1}
.hero-art img{max-height:270px}h1{font-size:48px;letter-spacing:-2px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.numbers-grid,.benefits,.steps{grid-template-columns:1fr}.numbers-grid>div{border-right:0;border-bottom:1px solid var(--border)}.section{padding:65px 0}.section-head{display:block}.section-head h2,h2{font-size:35px}.cards{gap:16px}.card{padding:36px 22px;min-height:0}.order-box{padding:28px 20px}.footer-inner{display:block}}
.category-strip{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:14px;
}

.category-card{
    position:relative;
    min-height:205px;
    padding:24px 12px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:1px solid var(--border);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(9,27,45,.9),rgba(3,12,25,.96));
    transition:.25s ease;
    overflow:hidden;
}

.category-card:hover{
    transform:translateY(-5px);
    border-color:rgba(0,234,255,.45);
    box-shadow:0 14px 35px rgba(0,30,70,.28);
}

.category-icon{
    width:76px;
    height:76px;
    margin-bottom:16px;
    display:grid;
    place-items:center;
    color:var(--cyan);
    border-radius:22px;
    background:radial-gradient(
        circle at 50% 35%,
        rgba(0,234,255,.16),
        rgba(8,25,45,.95) 70%
    );
    border:1px solid rgba(0,234,255,.24);
    box-shadow:0 0 24px rgba(0,234,255,.12);
}

.category-icon svg{
    width:58px;
    height:58px;
    display:block;
}

.category-card strong{
    font-size:15px;
    line-height:1.25;
    color:#f5f8ff;
}

.category-card small{
    margin-top:8px;
    color:var(--muted);
    font-size:11px;
}

/* ===== УКРАЇНСЬКА МУЗИКА ===== */

.category-ua{
    border-color:rgba(49,92,255,.9);

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(49,92,255,.18),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(10,28,52,.98),
            rgba(5,14,28,.98)
        );

    box-shadow:
        0 0 30px rgba(49,92,255,.22),
        inset 0 0 25px rgba(255,211,77,.035);
}

.category-ua:hover{
    border-color:#ffd34d;

    box-shadow:
        0 0 38px rgba(49,92,255,.3),
        0 0 18px rgba(255,211,77,.12);
}

.category-icon-ua{
    color:#fff;

    background:
        linear-gradient(
            to bottom,
            rgba(49,92,255,.28) 0 50%,
            rgba(255,211,77,.16) 50% 100%
        );

    border-color:rgba(255,255,255,.38);

    box-shadow:
        0 0 28px rgba(49,92,255,.32),
        0 0 18px rgba(255,211,77,.12);
}


/* ===== МОБІЛЬНА ВЕРСІЯ ===== */

@media(max-width:900px){

    .category-strip{
        display:flex;
        overflow-x:auto;
        gap:12px;
        padding:2px 2px 12px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .category-card{
        flex:0 0 158px;
        min-height:190px;
        scroll-snap-align:start;
    }
}

@media(max-width:650px){

    .category-card{
        flex:0 0 142px;
        min-height:175px;
        padding:20px 10px 16px;
    }

    .category-icon{
        width:64px;
        height:64px;
        border-radius:18px;
    }

    .category-icon svg{
        width:50px;
        height:50px;
    }

    .category-card strong{
        font-size:14px;
    }
}
.category-strip .category-card .category-icon{
    width:76px !important;
    height:76px !important;
    margin-bottom:16px !important;
    display:grid !important;
    place-items:center !important;
    color:var(--cyan) !important;
    border-radius:22px !important;
    background:radial-gradient(
        circle at 50% 35%,
        rgba(0,234,255,.16),
        rgba(8,25,45,.95) 70%
    ) !important;
    border:1px solid rgba(0,234,255,.24) !important;
    box-shadow:0 0 24px rgba(0,234,255,.12) !important;
}

.category-strip .category-card .category-icon svg{
    width:58px !important;
    height:58px !important;
    display:block !important;
}

.category-strip .category-card strong{
    font-size:15px !important;
    line-height:1.25 !important;
    color:#f5f8ff !important;
}

.category-strip .category-card small{
    margin-top:8px !important;
    color:var(--muted) !important;
    font-size:11px !important;
}

/* Українська музика — головна */
.category-strip .category-card.category-ua{
    border-color:rgba(49,92,255,.9) !important;
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(49,92,255,.18),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(10,28,52,.98),
            rgba(5,14,28,.98)
        ) !important;
    box-shadow:
        0 0 30px rgba(49,92,255,.22),
        inset 0 0 25px rgba(255,211,77,.035) !important;
}

.category-strip .category-card .category-icon-ua{
    color:#fff !important;
    background:
        linear-gradient(
            to bottom,
            rgba(49,92,255,.28) 0 50%,
            rgba(255,211,77,.16) 50% 100%
        ) !important;
    border-color:rgba(255,255,255,.38) !important;
    box-shadow:
        0 0 28px rgba(49,92,255,.32),
        0 0 18px rgba(255,211,77,.12) !important;
}