:root {
    --color-bg:           #0A0A1F;
    --color-surface:      #12112A;
    --color-bg-alt:       var(--color-surface);
    --color-card:         #1A1838;
    --color-card-hover:   #22203F;
    --color-edge:         #2E2A55;

    --color-primary:      #FF3B63;
    --color-secondary:    #FF5C9A;
    --color-accent-2:     #FFB14D;
    --color-accent-3:     #9B6BFF;
    --color-cyan:         #38E1D6;

    --color-text:         #F4F0FA;
    --color-muted:        #A39EC2;

    --color-border:       rgba(255, 255, 255, 0.09);
    --color-border-hover: rgba(255, 255, 255, 0.18);

    --gradient-accent:    linear-gradient(135deg, #FF5C9A 0%, #FF3B63 100%);
    --gradient-warm:      linear-gradient(135deg, #FF5C9A 0%, #FFB14D 100%);
    --gradient-vivid:     linear-gradient(115deg, #FF5C9A 0%, #FF3B63 42%, #9B6BFF 100%);
    --gradient-hero:      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 59, 99, 0.34) 0%, transparent 70%);
    --gradient-card:      linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 42%, transparent 100%);
    --gradient-edge:      linear-gradient(150deg, rgba(255, 92, 154, 0.9) 0%, rgba(255, 59, 99, 0.55) 38%, rgba(155, 107, 255, 0.7) 100%);

    --highlight-top:      linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);

    --font-body:      'Inter', sans-serif;
    --font-heading:   'Cormorant', Georgia, 'Times New Roman', serif;
    --line-height:    1.65;

    --container-width: 1240px;
    --section-gap:     100px;

    --radius:     8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --transition: 0.25s ease;
    --shadow:     0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-sm:  0 6px 24px rgba(0, 0, 0, 0.40);
    --shadow-glow:  0 0 54px rgba(255, 59, 99, 0.38);
    --glow-amber:   0 0 48px rgba(255, 177, 77, 0.24);
    --glow-violet:  0 0 52px rgba(155, 107, 255, 0.30);
    --glow-pink:    0 0 52px rgba(255, 92, 154, 0.32);
    --glow-cyan:    0 0 48px rgba(56, 225, 214, 0.28);

    --glass-bg:         rgba(255, 255, 255, 0.055);
    --glass-bg-strong:  rgba(255, 255, 255, 0.08);
    --glass-border:     rgba(255, 255, 255, 0.14);
    --glass-blur:       20px;
    --glass-highlight:  inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-shadow:     0 20px 60px rgba(0, 0, 0, 0.50);

    --header-height: 72px;
    --header-bg:     rgba(10, 10, 31, 0.82);
    --footer-bg:     var(--header-bg);
    --footer-color:  #9A95B8;

    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

html {
    font-size: 16px;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
    font-family:      var(--font-body);
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

body::before {
    content:        '';
    position:       fixed;
    inset:          -25%;
    z-index:        -1;
    pointer-events: none;
    will-change:    transform;
    background:
        radial-gradient(ellipse 46% 40% at 12% 8%,  rgba(255, 59, 99, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 42% 38% at 88% 2%,  rgba(255, 177, 77, 0.26) 0%, transparent 58%),
        radial-gradient(ellipse 50% 44% at 80% 58%, rgba(56, 225, 214, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 52% at 28% 96%, rgba(155, 107, 255, 0.34) 0%, transparent 64%),
        radial-gradient(ellipse 40% 36% at 60% 50%, rgba(255, 92, 154, 0.20) 0%, transparent 62%);
    animation: mesh-drift 42s ease-in-out infinite alternate;
}

@keyframes mesh-drift {
    0%   { transform: translate3d(-2%, -1.5%, 0) scale(1.05) rotate(0deg); }
    50%  { transform: translate3d(2.5%, 1%, 0)  scale(1.12) rotate(1.5deg); }
    100% { transform: translate3d(-1%, 2.5%, 0) scale(1.06) rotate(-1.5deg); }
}

body::after {
    content:        '';
    position:       fixed;
    inset:          0;
    z-index:        1;
    pointer-events: none;
    opacity:        0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; transform: scale(1.05); }
    body::after  { opacity: 0.02; }
}

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

#page { padding-top: var(--header-height); }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 20px;
    margin:    0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    600;
    line-height:    1.12;
    letter-spacing: -0.015em;
    color:          var(--color-text);
}

p { color: var(--color-muted); }

a { color: var(--color-text); transition: color var(--transition); }
a:hover { color: var(--color-primary); }

.gradient-text {
    background:              var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

.section-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        5px 14px;
    background:     rgba(255, 92, 154, 0.14);
    border:         1px solid rgba(255, 92, 154, 0.35);
    border-radius:  40px;
    box-shadow:     0 0 24px rgba(255, 59, 99, 0.18);
    font-size:      11px;
    font-weight:    600;
    color:          var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  14px;
}

.section-header {
    text-align:    center;
    margin-bottom: 56px;
}

.section-header h2 {
    font-size:      46px;
    font-weight:    600;
    letter-spacing: -0.02em;
    margin-bottom:  16px;
}

.section-header p {
    font-size: 17px;
    max-width: 520px;
    margin:    0 auto;
}

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 28px;
    border-radius:   var(--radius);
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       15px;
    line-height:     1;
    text-decoration: none;
    transition:      all var(--transition);
    cursor:          pointer;
    border:          none;
    white-space:     nowrap;
}

.btn--primary {
    background: var(--gradient-accent);
    color:      #fff;
    box-shadow: 0 4px 24px rgba(230, 57, 82, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 10px 34px rgba(230, 57, 82, 0.45),
                var(--shadow-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.32);
    color:      #fff;
}

.btn--ghost {
    background:   rgba(255, 255, 255, 0.03);
    color:        var(--color-text);
    border:       1px solid var(--color-border-hover);
}
.btn--ghost:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
    background:    rgba(230, 57, 82, 0.08);
    box-shadow:    0 0 28px rgba(230, 57, 82, 0.18);
}

.btn--outline {
    background:   transparent;
    color:        var(--color-primary);
    border:       1px solid var(--color-primary);
}
.btn--outline:hover {
    background:   var(--gradient-accent);
    color:        #fff;
    border-color: transparent;
}

.btn--sm  { padding: 10px 20px; font-size: 13px; }
.btn--lg  { padding: 17px 36px; font-size: 16px; }

.card {
    position:      relative;
    background:    var(--color-card);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
    transition:    transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card::before {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    padding:        1px;
    background:     var(--gradient-edge);
    -webkit-mask:   linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:   linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--transition);
}
.card:hover {
    border-color: var(--color-border-hover);
    transform:    translateY(-4px);
    box-shadow:   var(--shadow), var(--shadow-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
.card:hover::before { opacity: 1; }

.field {
    width:         100%;
    padding:       13px 16px;
    background:    rgba(255, 255, 255, 0.03);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    color:         var(--color-text);
    font-family:   var(--font-body);
    font-size:     15px;
    transition:    border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.field::placeholder { color: var(--color-muted); }
.field:focus {
    outline:      none;
    border-color: var(--color-primary);
    background:   rgba(255, 255, 255, 0.05);
    box-shadow:   0 0 0 3px rgba(230, 57, 82, 0.18);
}

::selection { background: rgba(230, 57, 82, 0.32); color: #fff; }

:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: 2px;
}

.reveal {
    opacity:        0;
    transform:      translateY(24px);
    transition:     opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ri, 0) * 60ms);
    will-change:    opacity, transform;
}
.reveal.is-visible {
    opacity:   1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}


.site-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    height:           var(--header-height);
    background:       var(--header-bg);
    backdrop-filter:  blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom:    1px solid var(--color-border);
    z-index:          var(--z-sticky);
    transition:       background var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
    background: rgba(10, 10, 31, 0.96);
    border-bottom-color: var(--color-border-hover);
    box-shadow: 0 6px 36px rgba(0, 0, 0, 0.5);
}

.header-inner {
    display:     flex;
    align-items: center;
    height:      var(--header-height);
    gap:         24px;
}

.site-logo { flex-shrink: 0; }

.site-logo a,
.site-logo .custom-logo-link {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   20px;
    font-weight: 800;
    color:       var(--color-text);
    text-decoration: none;
}

.site-logo img,
.site-logo .custom-logo { height: 40px; width: auto; }

.site-title-link {
    font-size:   20px;
    font-weight: 800;
    color:       var(--color-text);
    text-decoration: none;
}

.nav-primary { flex: 1; display: flex; justify-content: center; }

.nav-primary ul {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.nav-primary a {
    display:       block;
    padding:       8px 16px;
    font-size:     14px;
    font-weight:   500;
    color:         var(--color-muted);
    border-radius: var(--radius);
    transition:    all var(--transition);
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a,
.nav-primary .current-menu-ancestor > a {
    color:      var(--color-text);
    background: rgba(255, 255, 255, 0.06);
}

.header-actions {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
}

.cart-icon {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   var(--radius);
    color:           var(--color-muted);
    border:          1px solid var(--color-border);
    transition:      all var(--transition);
    text-decoration: none;
}

.cart-icon:hover {
    color:        var(--color-text);
    border-color: var(--color-border-hover);
}

.cart-icon svg { width: 18px; height: 18px; }

.cart-icon__count {
    position:        absolute;
    top:             -6px;
    right:           -6px;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    background:      var(--gradient-accent);
    color:           #fff;
    font-size:       10px;
    font-weight:     700;
    border-radius:   9px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
}

.header-actions .btn--primary { padding: 10px 20px; font-size: 14px; }

.menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             5px;
    width:           40px;
    height:          40px;
    padding:         8px;
    border-radius:   var(--radius);
    cursor:          pointer;
    border:          1px solid var(--color-border);
    background:      transparent;
}

.menu-toggle span {
    display:          block;
    width:            20px;
    height:           2px;
    background:       var(--color-text);
    border-radius:    2px;
    transition:       all var(--transition);
    transform-origin: center;
}

.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-footer {
    position:    relative;
    background:  var(--footer-bg);
    border-top:  1px solid var(--color-border);
    padding:     64px 0 64px;
    margin-top:  auto;
}

.site-footer::before {
    content:    '';
    position:   absolute;
    top:        -1px;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(230, 57, 82, 0.5), rgba(240, 168, 104, 0.4), transparent);
    pointer-events: none;
}

.footer-grid {
    display:     flex;
    gap:         48px;
    align-items: flex-start;
}

.footer-grid > * { flex: 1; }

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img,
.footer-logo .custom-logo {
    height: 48px;
    width:  auto;
    display: block;
}

.footer-logo .custom-logo-link { display: inline-block; }

.footer-site-name {
    font-size:       22px;
    font-weight:     800;
    color:           var(--color-text);
    text-decoration: none;
    display:         block;
    margin-bottom:   20px;
}

.footer-contacts {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.footer-contacts a {
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-size:       14px;
    color:           var(--footer-color);
    text-decoration: none;
    transition:      color var(--transition);
}

.footer-contacts a:hover { color: var(--color-primary); }

.footer-contacts svg { flex-shrink: 0; }

.footer-nav ul {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    list-style:     none;
}

.footer-nav a {
    font-size:       14px;
    color:           var(--footer-color);
    text-decoration: none;
    transition:      color var(--transition);
    display:         block;
}

.footer-nav a:hover { color: var(--color-primary); }

@media (max-width: 1024px) {
    .section-header h2 { font-size: 32px; }
    .section-header    { margin-bottom: 40px; }
    .footer-grid       { gap: 36px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    .nav-primary {
        position:        fixed;
        top:             var(--header-height);
        left:            0;
        right:           0;
        background:      rgba(10, 10, 31, 0.98);
        backdrop-filter: blur(20px);
        padding:         16px;
        border-bottom:   1px solid var(--color-border);
        transform:       translateY(-100%);
        opacity:         0;
        transition:      transform 0.3s ease, opacity 0.3s ease;
        pointer-events:  none;
        z-index:         calc(var(--z-sticky) - 1);
        justify-content: flex-start;
    }

    .nav-primary.is-open {
        transform:      translateY(0);
        opacity:        1;
        pointer-events: auto;
    }

    .nav-primary ul {
        flex-direction: column;
        align-items:    flex-start;
        width:          100%;
        gap:            2px;
    }

    .nav-primary a { width: 100%; padding: 12px 16px; }

    .header-inner { justify-content: space-between; }
    .header-actions .btn--primary { display: none; }

    .section-header h2 { font-size: 26px; }

    .footer-grid {
        flex-direction: column;
        gap:            28px;
    }

}

@media (max-width: 560px) {
    .container         { padding: 0 16px; }
    .section-header    { margin-bottom: 32px; }
    .section-header h2 { font-size: 22px; }
    .section-header p  { font-size: 15px; }

    .site-logo a,
    .site-logo .custom-logo-link,
    .site-title-link   { font-size: 17px; }
    .site-logo img,
    .site-logo .custom-logo { height: 32px; }

    .btn      { padding: 12px 22px; font-size: 14px; }
    .btn--lg  { padding: 14px 28px; font-size: 15px; }

    .footer-grid    { gap: 24px; }
    .site-footer    { padding: 48px 0; }
}

@media (max-width: 768px) {
    body::after  { opacity: 0.025; background-size: 140px 140px; }
    body::before { background:
        radial-gradient(ellipse 70% 50% at 20% -5%, rgba(255, 59, 99, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 80% 105%, rgba(155, 107, 255, 0.12) 0%, transparent 62%);
    }
}