/* Hide header on birthday page - laptop version */
body:has(.birthday-hero) .navbar,
body:has(.birthday-hero) .menu-overlay {
    display: none !important;
    visibility: hidden !important;
}

/* Make birthday content block smaller on laptop/notebook */
@media (max-width: 1366px) {
    .birthday-content {
        max-width: 600px !important;
        padding: 1.5rem !important;
        margin: 1rem !important;
    }
    
    .birthday-title {
        font-size: clamp(2rem, 6vw, 3.5rem) !important;
        margin-bottom: 1rem !important;
    }
    
    .birthday-message {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .birthday-content .btn-primary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* Global interview link colors - apply to all screen sizes */
/* Light theme: Green text, no background */
[data-theme="light"] .interview-link,
:not([data-theme="dark"]) .interview-link {
    color: #228B22 !important;
    background-color: transparent !important;
}

[data-theme="light"] .interview-link i,
:not([data-theme="dark"]) .interview-link i {
    color: #228B22 !important;
}

[data-theme="light"] .interview-link:hover,
:not([data-theme="dark"]) .interview-link:hover {
    color: #196b19 !important;
    background-color: transparent !important;
}

/* Dark theme: Yellow text, no background */
[data-theme="dark"] .interview-link {
    color: #FFD700 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .interview-link i {
    color: #FFD700 !important;
}

[data-theme="dark"] .interview-link:hover {
    color: #e6c200 !important;
    background-color: transparent !important;
}

/* Laptop Optimization (max-width: 1366px) covers 1280x800, 1366x768 */

@media (max-width: 1366px) {

    /* Оптимизированные переходы для смены темы - только для элементов, которые меняют цвет */
    html,
    body {
        transition: background-color 0.3s ease, color 0.3s ease !important;
        will-change: background-color, color;
    }
    
    /* Remove white line from top of page */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-top: none !important;
        outline: none !important;
    }
    
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .navbar {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
    }
    
    /* Remove white line on birthday page specifically */
    body:has(.birthday-hero) {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    body:has(.birthday-hero) .birthday-hero {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        top: 0 !important;
    }
    
    body:has(.birthday-hero) #main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Основные контейнеры и секции */
    .navbar,
    .footer,
    .hero,
    section,
    .container {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    }
    
    /* Карточки и интерактивные элементы */
    .card,
    .btn-primary,
    .btn-secondary,
    .social-card,
    .link-card,
    .timeline-item {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    /* Текст */
    .nav-link,
    .hero-title,
    .hero-title .title-line,
    .hero-subtitle,
    h1, h2, h3, h4, h5, h6,
    p, span, a, li {
        transition: color 0.3s ease !important;
    }
    
    /* Иконки и SVG */
    i,
    .fas,
    .fab,
    .far,
    .icon,
    svg {
        transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
    }
    
    svg path,
    svg rect,
    svg circle {
        transition: fill 0.3s ease, stroke 0.3s ease !important;
    }

    /* Preloader - Bigger text for laptop */
    .preloader-logo h2 {
        font-size: 4.5rem !important; /* Slightly bigger */
    }

    /* News page hero - Make shorter */
    .news-hero {
        height: 35vh !important; /* Increased a bit */
        min-height: 280px !important;
        max-height: 35vh !important;
        overflow: hidden !important;
    }

    /* News page blocks - Make smaller, narrower and shorter */
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 1.2rem !important;
        max-width: 1050px !important;
        margin: 0 auto !important;
    }

    .news-card {
        padding: 0 !important;
        max-width: 100% !important;
        /* Smaller, more compact cards */
    }

    .news-card .news-content {
        padding: 1.2rem !important;
    }

    .news-card.featured {
        grid-column: span 2 !important;
        max-width: 100% !important;
        /* Featured block spans 2 columns but is narrower */
    }

    /* Make images smaller */
    .news-image {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 200px !important;
        max-height: 200px !important;
        min-height: 200px !important;
    }

    .news-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }

    .news-card.featured .news-image {
        height: 250px !important;
        max-height: 250px !important;
        min-height: 250px !important;
    }

    .news-card.featured .news-image img {
        height: 100% !important;
    }
    
    /* Smaller text in news cards */
    .news-content h2 {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .news-content p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    
    .news-date {
        font-size: 0.85rem !important;
        margin-bottom: 0.4rem !important;
    }

    /* Interview section - Make blocks smaller and center them */
    .interviews-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        align-items: center !important;
    }

    .interview-card {
        max-width: 800px !important;
        width: 100% !important;
        height: 140px !important;
        gap: 0 !important;
        /* Remove gap between image and text */
    }

    /* Zig zag pattern - left, right, left... */
    .interview-card:nth-child(1) {
        margin-left: -400px !important;
        margin-right: 0 !important;
    }

    .interview-card:nth-child(2) {
        margin-left: 0 !important;
        margin-right: -400px !important;
    }

    .interview-card:nth-child(3) {
        margin-left: -400px !important;
        margin-right: 0 !important;
    }

    .interview-card:nth-child(4) {
        margin-left: 0 !important;
        margin-right: -400px !important;
    }

    .interview-card:nth-child(5) {
        margin-left: -400px !important;
        margin-right: 0 !important;
    }

    .interview-card:nth-child(6) {
        margin-left: 0 !important;
        margin-right: -400px !important;
    }

    .interview-card:nth-child(7) {
        margin-left: -400px !important;
        margin-right: 0 !important;
    }

    .interview-image {
        height: 160px !important;
        max-height: 160px !important;
        min-height: 160px !important;
        width: 280px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: visible !important;
        transform: translateY(-10px) !important;
        display: block !important;
        text-decoration: none !important;
        cursor: pointer !important;
        /* Place pictures higher, ensure category can be positioned, make clickable */
    }

    .interview-image img {
        height: 180px !important;
        width: 280px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .interview-content {
        padding: 0.1rem !important;
        padding-left: 0.15rem !important;
        padding-top: 1rem !important;
        /* Much closer to the picture, move text lower */
        margin: 0 !important;
        margin-left: -100px !important;
    }

    /* Ensure even blocks have image on the RIGHT - MAXIMUM SPECIFICITY */
    html body .interviews-grid .interview-card:nth-child(even),
    html body .interviews-section .interview-card:nth-child(even),
    body .interviews-grid .interview-card:nth-child(even),
    body .interviews-section .interview-card:nth-child(even),
    .interviews-grid .interview-card:nth-child(even),
    .interviews-section .interview-card:nth-child(even),
    html body .interview-card:nth-child(even),
    body .interview-card:nth-child(even),
    .interview-card:nth-child(even) {
        flex-direction: row !important;
        display: flex !important;
    }

    /* Odd blocks have image on the LEFT */
    html body .interviews-grid .interview-card:nth-child(odd),
    html body .interviews-section .interview-card:nth-child(odd),
    body .interviews-grid .interview-card:nth-child(odd),
    body .interviews-section .interview-card:nth-child(odd),
    .interviews-grid .interview-card:nth-child(odd),
    .interviews-section .interview-card:nth-child(odd),
    html body .interview-card:nth-child(odd),
    body .interview-card:nth-child(odd),
    .interview-card:nth-child(odd) {
        flex-direction: row !important;
        display: flex !important;
    }

    html body .interview-card:nth-child(even) .interview-content,
    body .interview-card:nth-child(even) .interview-content,
    .interview-card:nth-child(even) .interview-content {
        padding-left: 1.5rem !important;
        padding-right: 0.15rem !important;
        margin: 0 !important;
        margin-right: -50px !important;
    }

    html body .interview-card:nth-child(odd) .interview-content,
    body .interview-card:nth-child(odd) .interview-content,
    .interview-card:nth-child(odd) .interview-content {
        padding-left: 0.15rem !important;
        padding-right: 0.1rem !important;
        padding-top: 1rem !important;
        margin: 0 !important;
        margin-left: -100px !important;
        /* Bring text closer but keep it visible, move text lower */
    }

    /* Remove any margin from image */
    .interview-image {
        margin: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }

    /* Even blocks: image on RIGHT - pushed to the right corner and higher */
    html body .interview-card:nth-child(even) .interview-image,
    body .interview-card:nth-child(even) .interview-image,
    .interview-card:nth-child(even) .interview-image {
        margin-left: auto !important;
        margin-right: -40px !important;
        order: 2 !important;
        transform: translateX(100px) translateY(-15px) !important;
        position: relative !important;
        z-index: 1 !important;
        /* Place right side pictures higher, behind content */
    }

    html body .interview-card:nth-child(even) .interview-content,
    body .interview-card:nth-child(even) .interview-content,
    .interview-card:nth-child(even) .interview-content {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: -50px !important;
        padding-right: 0.5rem !important;
        padding-left: 1.5rem !important;
        padding-top: 1rem !important;
        position: relative !important;
        z-index: 2 !important;
        /* Move text more to the left in right blocks */
    }

    /* Odd blocks: image on LEFT - make bigger and higher */
    html body .interview-card:nth-child(odd) .interview-image,
    body .interview-card:nth-child(odd) .interview-image,
    .interview-card:nth-child(odd) .interview-image {
        margin-left: 0 !important;
        margin-right: 0 !important;
        order: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 270px !important;
        height: 155px !important;
        max-height: 155px !important;
        min-height: 155px !important;
        transform: translateY(-15px) !important;
        /* Image behind text - bigger size and higher */
    }

    html body .interview-card:nth-child(odd) .interview-image img,
    body .interview-card:nth-child(odd) .interview-image img,
    .interview-card:nth-child(odd) .interview-image img {
        width: 270px !important;
        height: 175px !important;
        /* Bigger image for left-side blocks */
    }

    html body .interview-card:nth-child(odd) .interview-content,
    body .interview-card:nth-child(odd) .interview-content,
    .interview-card:nth-child(odd) .interview-content {
        order: 2 !important;
        margin-left: -100px !important;
        margin-right: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        /* Ensure text is above image and closer to picture */
    }

    .interview-content h3 {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }

    .interview-content p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.3rem !important;
    }

    .interview-content p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.4rem !important;
    }

    /* Light mode: Green text, no background - only the word is clickable */
    [data-theme="light"] .interview-link,
    :not([data-theme="dark"]) .interview-link {
        font-size: 0.85rem !important;
        padding: 0 !important;
        margin-top: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        background-color: transparent !important;
        color: #228B22 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        gap: 0.3rem !important;
        text-align: left !important;
        /* Green text, no background in light mode, only the word is clickable */
    }
    
    /* Dark mode: Yellow text, no background */
    [data-theme="dark"] .interview-link {
        font-size: 0.85rem !important;
        padding: 0 !important;
        margin-top: 1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        background-color: transparent !important;
        color: #FFD700 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        gap: 0.3rem !important;
        text-align: left !important;
        /* Yellow text in dark mode, no background */
    }
    
    /* Override inline-flex from base styles - make icon inline */
    [data-theme="light"] .interview-link i,
    :not([data-theme="dark"]) .interview-link i {
        display: inline !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #228B22 !important;
    }
    
    /* Dark mode icon - yellow */
    [data-theme="dark"] .interview-link i {
        display: inline !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #FFD700 !important;
    }
    
    /* Light mode hover - darker green text */
    [data-theme="light"] .interview-link:hover,
    :not([data-theme="dark"]) .interview-link:hover {
        background-color: transparent !important;
        color: #196b19 !important;
    }
    
    /* Dark mode hover - lighter yellow */
    [data-theme="dark"] .interview-link:hover {
        color: #e6c200 !important;
    }
    
    /* Ensure interview-content doesn't make link full width */
    [data-theme="light"] .interview-content .interview-link,
    :not([data-theme="dark"]) .interview-content .interview-link {
        display: inline-block !important;
        width: auto !important;
        align-self: flex-start !important;
    }

    /* Light mode: Left blocks - make button higher */
    [data-theme="light"] html body .interview-card:nth-child(odd) .interview-link,
    [data-theme="light"] body .interview-card:nth-child(odd) .interview-link,
    [data-theme="light"] .interview-card:nth-child(odd) .interview-link,
    :not([data-theme="dark"]) html body .interview-card:nth-child(odd) .interview-link,
    :not([data-theme="dark"]) body .interview-card:nth-child(odd) .interview-link,
    :not([data-theme="dark"]) .interview-card:nth-child(odd) .interview-link {
        margin-top: 1.2rem !important;
        position: relative !important;
        z-index: 3 !important;
        background-color: transparent !important;
        color: #228B22 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        align-self: flex-start !important;
        /* Higher position for left blocks, green text no background in light mode */
    }
    
    /* Dark mode: Left blocks - yellow text */
    [data-theme="dark"] html body .interview-card:nth-child(odd) .interview-link,
    [data-theme="dark"] body .interview-card:nth-child(odd) .interview-link,
    [data-theme="dark"] .interview-card:nth-child(odd) .interview-link {
        margin-top: 1.2rem !important;
        position: relative !important;
        z-index: 3 !important;
        background-color: transparent !important;
        color: #FFD700 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        align-self: flex-start !important;
        /* Higher position for left blocks, yellow text in dark mode */
    }

    /* Light mode: Right blocks - ensure visibility */
    [data-theme="light"] html body .interview-card:nth-child(even) .interview-link,
    [data-theme="light"] body .interview-card:nth-child(even) .interview-link,
    [data-theme="light"] .interview-card:nth-child(even) .interview-link,
    :not([data-theme="dark"]) html body .interview-card:nth-child(even) .interview-link,
    :not([data-theme="dark"]) body .interview-card:nth-child(even) .interview-link,
    :not([data-theme="dark"]) .interview-card:nth-child(even) .interview-link {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 1rem !important;
        background-color: transparent !important;
        color: #228B22 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        align-self: flex-start !important;
        /* Ensure button is visible on right blocks, green text no background in light mode */
    }
    
    /* Dark mode: Right blocks - yellow text */
    [data-theme="dark"] html body .interview-card:nth-child(even) .interview-link,
    [data-theme="dark"] body .interview-card:nth-child(even) .interview-link,
    [data-theme="dark"] .interview-card:nth-child(even) .interview-link {
        position: relative !important;
        z-index: 3 !important;
        margin-top: 1rem !important;
        background-color: transparent !important;
        color: #FFD700 !important;
        padding: 0 !important;
        display: inline-block !important;
        width: auto !important;
        max-width: fit-content !important;
        min-width: auto !important;
        flex: none !important;
        align-self: flex-start !important;
        /* Ensure button is visible on right blocks, yellow text in dark mode */
    }

    .interview-category {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Light theme: Green background, white text */
    [data-theme="light"] .interview-category,
    :not([data-theme="dark"]) .interview-category {
        background-color: #228B22 !important;
        color: #ffffff !important;
    }

    /* Dark theme - keep yellow background with dark text */
    [data-theme="dark"] .interview-category {
        color: #1e293b !important;
        background-color: #FFD700 !important;
        /* Yellow background with dark text for dark theme */
    }

    .interview-card:nth-child(even) .interview-category {
        top: 1.2rem !important;
        bottom: auto !important;
        right: 0.5rem !important;
        left: auto !important;
        position: absolute !important;
        z-index: 15 !important;
        /* For right blocks, place at top right corner - higher z-index to ensure visibility */
    }
    
    /* Alternative positioning for right blocks - try left side if right is not visible */
    html body .interview-card:nth-child(even) .interview-image .interview-category {
        right: auto !important;
        left: 0.5rem !important;
        /* Position on left side of image for better visibility */
    }
    
    /* Ensure interview-image in even blocks has position relative and visible overflow */
    .interview-card:nth-child(even) .interview-image {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Ensure interview-image in odd blocks has position relative */
    .interview-card:nth-child(odd) .interview-image {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Make sure category buttons are visible on right blocks despite transforms */
    html body .interview-card:nth-child(even) .interview-image .interview-category,
    body .interview-card:nth-child(even) .interview-image .interview-category,
    .interview-card:nth-child(even) .interview-image .interview-category,
    html body .interview-card:nth-child(even) .interview-category,
    body .interview-card:nth-child(even) .interview-category,
    .interview-card:nth-child(even) .interview-category {
        position: absolute !important;
        top: 1.2rem !important;
        right: 0.5rem !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 20 !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Override any transforms, ensure button is visible */
    }

    /* News images - Make smaller */
    html body .news-articles .news-card.featured .news-image,
    html body .news-grid .news-card.featured .news-image,
    body .news-card.featured .news-image,
    .news-articles .news-card.featured .news-image,
    .news-grid .news-card.featured .news-image,
    .news-card.featured .news-image {
        height: 250px !important;
        max-height: 250px !important;
        min-height: 250px !important;
    }

    html body .news-articles .news-card.featured .news-image img,
    html body .news-grid .news-card.featured .news-image img,
    body .news-card.featured .news-image img,
    .news-articles .news-card.featured .news-image img,
    .news-grid .news-card.featured .news-image img,
    .news-card.featured .news-image img {
        height: 250px !important;
        max-height: 250px !important;
        min-height: 250px !important;
        object-fit: cover !important;
    }

    html body .news-articles .news-image:not(.news-card.featured .news-image),
    html body .news-grid .news-image:not(.news-card.featured .news-image),
    body .news-card:not(.featured) .news-image,
    .news-articles .news-card:not(.featured) .news-image,
    .news-grid .news-card:not(.featured) .news-image {
        height: 200px !important;
        max-height: 200px !important;
        min-height: 200px !important;
    }

    html body .news-articles .news-image:not(.news-card.featured .news-image) img,
    html body .news-grid .news-image:not(.news-card.featured .news-image) img,
    body .news-card:not(.featured) .news-image img,
    .news-articles .news-card:not(.featured) .news-image img,
    .news-grid .news-card:not(.featured) .news-image img {
        height: 200px !important;
        max-height: 200px !important;
        min-height: 200px !important;
        object-fit: cover !important;
    }

    /* Отключаем плавный скролл и bounce-эффекты на ноутбуках,
       чтобы убрать ощущение «dragging» */
    html,
    body {
        scroll-behavior: auto !important;
        overscroll-behavior-y: none !important;
        transition: background-color 0.3s ease, color 0.3s ease !important;
    }

    /* Глушим параллакс и любые translateY для фонового героя на ноутбуках */
    .hero-background,
    .animated-bg {
        transform: none !important;
        will-change: auto !important;
    }

    :root {
        /* Force smaller clamp values */
        --font-xl: 2.5rem !important;
        --font-2xl: 3rem !important;
    }

    .container {
        max-width: 1300px !important;
        /* Use more width for notebook version */
        padding: 0 1.5rem;
        width: 98% !important;
    }
    
    /* Gallery and story sections can use even more width - почти на всю ширину */
    .photo-stories .container {
        max-width: 98% !important;
        width: 98% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Allow gallery to use maximum width for corner videos/images */
    .story-gallery {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* Allow story sections to expand */
    .story-section {
        max-width: 100% !important;
    }
    
    /* Уменьшаем расстояние между WANDER и галереей */
    .story-header {
        margin-bottom: 1rem !important;
        padding: 1rem 0 !important;
    }
    
    /* Увеличиваем расстояние от тикера до WANDER, но сохраняем маленькое расстояние между WANDER и картинками */
    .photo-stories {
        padding-top: 2rem !important;
        padding-bottom: 6rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Добавляем дополнительный отступ перед первым story-section для большего расстояния от тикера */
    .photo-stories .story-section:first-child {
        margin-top: 2rem !important;
    }
    
    /* Поднимаем текст в модальном окне выше */
    .gallery-modal .modal-caption {
        bottom: 3rem !important;
    }
    
    /* Удаляем анимацию точки на главной странице (scroll-indicator) */
    .scroll-indicator {
        display: none !important;
    }
    
    /* Удаляем ВСЕ возможные декоративные элементы и точки в hero секции */
    .hero-particles,
    .hero-particles::before,
    .hero-particles::after,
    .hero *[class*="dot"],
    .hero *[class*="circle"],
    .hero *[class*="particle"],
    .hero *[class*="decoration"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Удаляем все псевдоэлементы в hero секции */
    .hero::before,
    .hero::after,
    .hero-content::before,
    .hero-content::after,
    .hero-image::before,
    .hero-image::after,
    .hero-text::before,
    .hero-text::after,
    .image-container::before,
    .image-container::after,
    .hero-background::before,
    .hero-background::after,
    .animated-bg::before,
    .animated-bg::after {
        display: none !important;
        content: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Удаляем ВСЕ возможные декоративные круги и точки в hero */
    .hero-gradient-bg,
    .hero-gradient-bg::before,
    .hero-gradient-bg::after {
        display: none !important;
        visibility: hidden !important;
        background: none !important;
        background-image: none !important;
    }
    
    /* Удаляем ВСЕ радиальные градиенты в hero секции, которые создают круги */
    .hero,
    .hero *,
    .hero-content,
    .hero-image,
    .hero-text,
    .hero-background,
    .animated-bg,
    .hero-gradient-bg {
        background-image: none !important;
        background: none !important;
    }
    
    /* Удаляем все элементы, которые могут выглядеть как точки (круги) */
    .hero [style*="border-radius: 50%"],
    .hero [style*="border-radius:50%"],
    .hero *[class*="circle"],
    .hero *[class*="dot"],
    .hero *[class*="particle"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Убираем все радиальные градиенты полностью */
    *[style*="radial-gradient"],
    *[style*="circle"] {
        background: none !important;
        background-image: none !important;
    }
    
    /* Удаляем ВСЕ радиальные градиенты и круги в hero */
    .hero *,
    .hero * * {
        background-image: none !important;
    }
    
    /* Скрываем все элементы с круглой формой в hero */
    .hero [style*="border-radius"],
    .hero [style*="50%"] {
        display: none !important;
    }
    
    /* Удаляем анимацию для всех элементов в hero */
    .hero *,
    .hero *::before,
    .hero *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* Делаем кнопки навигации статичными - без прыжков при нажатии */
    .gallery-modal .modal-prev,
    .gallery-modal .modal-next {
        transition: none !important;
        animation: none !important;
        transform: translateY(-50%) !important;
        position: fixed !important;
        will-change: auto !important;
        backface-visibility: visible !important;
    }
    
    /* Убираем все изменения при hover */
    .gallery-modal .modal-prev:hover,
    .gallery-modal .modal-next:hover {
        transform: translateY(-50%) !important;
        scale: 1 !important;
        translate: 0 0 !important;
        position: fixed !important;
        top: 50% !important;
    }
    
    /* Убираем все изменения при active (нажатие) */
    .gallery-modal .modal-prev:active,
    .gallery-modal .modal-next:active {
        transform: translateY(-50%) !important;
        scale: 1 !important;
        translate: 0 0 !important;
        position: fixed !important;
        top: 50% !important;
    }
    
    /* Убираем все изменения при focus */
    .gallery-modal .modal-prev:focus,
    .gallery-modal .modal-next:focus {
        transform: translateY(-50%) !important;
        scale: 1 !important;
        translate: 0 0 !important;
        position: fixed !important;
        top: 50% !important;
        outline: none !important;
    }
    
    /* Убираем все изменения при focus-visible */
    .gallery-modal .modal-prev:focus-visible,
    .gallery-modal .modal-next:focus-visible {
        transform: translateY(-50%) !important;
        scale: 1 !important;
        translate: 0 0 !important;
        position: fixed !important;
        top: 50% !important;
    }
    
    /* Уменьшаем размер изображений в модальном окне */
    .gallery-modal .modal-image-wrapper {
        max-width: 70vw !important;
        max-height: 70vh !important;
    }
    
    .gallery-modal .modal-image,
    .gallery-modal .modal-video {
        max-width: 100% !important;
        max-height: 70vh !important;
    }
    
    /* Allow corner videos to use more horizontal space */
    .story-gallery .gallery-item.video-wander-second,
    .story-gallery .gallery-item.video-wander-third,
    .story-gallery .gallery-item.video-wander-fourth {
        overflow: visible !important;
    }

    /* ===================================
       GALLERY - Move Tali wander vid to the left
       =================================== */
    
    /* Move video-wander-second (Tali wander vid) more to the left */
    .story-gallery .gallery-item.video-wander-second {
        left: 500px !important;
    }

    /* ===================================
       GALLERY - Move Tali vids(21) to the right
       =================================== */
    
    /* Move video-wander-fourth (Tali vids 21) a bit more to the right */
    .story-gallery .gallery-item.video-wander-fourth {
        right: 200px !important;
    }

    /* ===================================
       GALLERY - Move Tali vids(20) to the right
       =================================== */
    
    /* Move video-wander-third (Tali vids 20) more to the right */
    .story-gallery .gallery-item.video-wander-third {
        left: -350px !important;
    }

    /* ===================================
       MOMENTS SECTION - Smaller images and last row handling
       =================================== */
    
    /* Make Moments images smaller for notebook */
    .photo-grid-section .photo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    .photo-grid-section .photo-item {
        max-width: 100% !important;
        transform: scale(0.9) !important;
        transform-origin: center center !important;
    }
    
    /* If last row has 1 item (16th, 19th, 22nd, etc.) - center it */
    .photo-grid-section .photo-item:nth-last-child(1):nth-child(3n+1) {
        grid-column: 2 / span 1 !important;
        justify-self: center !important;
    }
    
    /* If last row has 2 items - place them separately (first and third column) */
    .photo-grid-section .photo-item:nth-last-child(2):nth-child(3n+1) {
        grid-column: 1 / span 1 !important;
        justify-self: start !important;
    }
    
    .photo-grid-section .photo-item:nth-last-child(1):nth-child(3n+2) {
        grid-column: 3 / span 1 !important;
        justify-self: end !important;
    }

    /* ===================================
       NAVBAR FIXES - Critical for laptop
       =================================== */

    /* Force navbar to stay fixed and visible */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        transform: translateY(0) !important;
        /* Prevent any JS transforms */
        transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    /* Override any scroll behaviors that might hide navbar */
    .navbar.scroll-down,
    .navbar.scroll-up,
    .navbar.scrolled,
    .navbar.hidden,
    .navbar.visible {
        position: fixed !important;
        top: 0 !important;
        transform: translateY(0) !important;
    }

    /* Prevent body from having scroll padding that might affect navbar */
    body {
        padding-top: 0 !important;
    }

    /* Navigation compacting - REMOVED to prevent conflicts with main navbar styles */
    /* All navbar styles should be in styles_new.css only */

    /* Hero Section - Account for fixed navbar */
    .hero {
        margin-top: 100px !important;
        padding-top: 2rem !important;
        /* Decreased padding to move everything higher */
        padding-bottom: 4rem !important;
        min-height: calc(100vh - 80px) !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .hero-content {
        padding-top: 20px !important;
    }

    .hero .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        max-width: 1200px !important;
        width: 95% !important;
    }

    /* Hero Content Grid */
    .hero-content {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr !important;
        /* More space for text */
        gap: 2rem !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Left side (Text) adjustments */
    .hero-text {
        padding-left: 0 !important;
        padding-right: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
        z-index: 2 !important;
        transform: translateX(160px) !important;
        /* Move text to the left */
    }

    .hero-title {
        font-size: 3.1rem !important;
        /* Increased from 2.8rem */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }

    .hero-subtitle {
        font-size: 1.3rem !important;
        /* Increased from 1.1rem */
        margin-bottom: 0.2rem !important;
        line-height: 1.6 !important;
    }

    .hero-buttons {
        margin-top: 1.5rem !important;
        display: flex !important;
        gap: 1rem !important;
        flex-wrap: wrap !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Right side (Image) adjustments */
    .hero .hero-image,
    .hero-content .hero-image,
    html body .hero     .hero-image {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        height: 100% !important;
        transform: translateX(-50px) translateY(-30px) !important;
        margin-top: -180px !important;
        padding-top: 0 !important;
        overflow: visible !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Убираем скроллбары из секций Explore и Follow Tali */
    .quick-links,
    .social-integration {
        overflow: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .quick-links::-webkit-scrollbar,
    .social-integration::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .links-grid,
    .social-grid {
        overflow: visible !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .links-grid::-webkit-scrollbar,
    .social-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Убираем линии во время анимации fadeInRight */
    .hero-image[style*="animation"],
    .hero-image.animating {
        overflow: hidden !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .hero-image .image-container,
    .hero-content .hero-image .image-container,
    html body .hero-image .image-container,
    html body .hero .hero-content .hero-image .image-container {
        width: 100% !important;
        max-width: 600px !important;
        min-width: 550px !important;
        max-height: 400px !important;
        height: auto !important;
        margin: 0 auto !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        transform: translateY(0) !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        outline: none !important;
        outline-offset: 0 !important;
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        background: transparent !important;
    }
    
    .hero-image .image-container::before,
    .hero-image .image-container::after,
    html body .hero-image .image-container::before,
    html body .hero-image .image-container::after {
        display: none !important;
        content: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    .hero-image picture,
    .hero-image .image-container picture,
    html body .hero-image picture,
    html body .hero-image .image-container picture {
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: transparent !important;
    }
    
    .hero-image picture::before,
    .hero-image picture::after {
        display: none !important;
        content: none !important;
        border: none !important;
        outline: none !important;
    }
    
    .hero-image .image-overlay,
    html body .hero-image .image-overlay {
        border: none !important;
        border-width: 0 !important;
        border-style: none !important;
        border-color: transparent !important;
        outline: none !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        background: transparent !important;
    }
    
    .hero-image .image-overlay::before,
    .hero-image .image-overlay::after {
        display: none !important;
        content: none !important;
        border: none !important;
        outline: none !important;
    }

    .hero-photo,
    .image-container .hero-photo,
    .hero-image .hero-photo,
    html body .hero-photo {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        min-height: 350px !important;
        object-fit: cover !important;
        object-position: center bottom !important;
        border-radius: 12px !important;
        align-self: flex-end !important;
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* ===================================
       SCROLL INDICATOR
       =================================== */

    .scroll-indicator {
        position: absolute !important;
        bottom: 2rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        font-size: 0.85rem !important;
        animation: bounce 2s infinite !important;
        z-index: 5 !important;
    }

    .scroll-indicator i {
        display: block !important;
        font-size: 1.2rem !important;
        margin-top: 0.5rem !important;
    }

    /* ===================================
       GENERAL TYPOGRAPHY
       =================================== */

    h1 {
        font-size: 2.2rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    .section-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }

    /* ===================================
       SECTIONS SPACING
       =================================== */

    section {
        padding: 4rem 0 !important;
    }

    /* Account for fixed navbar on all sections */
    section:first-of-type:not(.hero) {
        margin-top: 80px !important;
    }

    /* ===================================
       CARDS OPTIMIZATION
       =================================== */

    /* Cards compacting */
    .link-card,
    .social-card {
        padding: 2rem !important;
        height: 320px !important;
        width: 100% !important;
        min-width: 160px !important;
        max-width: 210px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        transition: all 0.3s ease !important;
        /* Ensure hover transition works */
        position: relative !important;
        overflow: hidden !important;
    }

    /* Restore hover effects */
    .link-card:hover,
    .social-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        border-color: #228B22 !important;
        /* Green color */
    }

    /* Dark mode hover border */
    @media (prefers-color-scheme: dark) {

        .link-card:hover,
        .social-card:hover {
            border-color: #FFD700 !important;
            /* Gold color */
        }
    }

    .link-card::before,
    .social-card::before {
        display: block !important;
        /* Ensure hover pseudo-elements show */
    }

    /* Make the grid responsive but contain narrow cards */
    .links-grid,
    .social-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* FORCE single row */
        justify-content: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
        overflow-x: auto !important;
        /* Add scroll if they don't fit, though they should */
    }

    .card-icon,
    .social-icon {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }

    .card-title,
    .social-platform {
        font-size: 1.3rem !important;
        margin-bottom: 0.8rem !important;
    }

    .card-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .link-card h3,
    .social-card h3 {
        font-size: 1.5rem !important;
    }

    /* ===================================
       NEWSLETTER SECTION
       =================================== */

    .newsletter-section {
        padding: 3rem 0 !important;
    }

    .newsletter-section h2 {
        font-size: 1.8rem !important;
    }

    .newsletter-input-group {
        max-width: 500px !important;
    }

    /* ===================================
       COLLABORATION SECTION
       =================================== */

    .collaboration-block {
        padding: 3rem 0 !important;
    }

    .collab-text h2 {
        font-size: 2rem !important;
    }

    .collab-text p {
        font-size: 1rem !important;
    }

    /* ===================================
       FOOTER
       =================================== */

    .footer {
        padding: 2rem 0 1.25rem !important;
        margin-top: -2rem !important;
        /* поднимаем футер выше */
    }

    .footer-content {
        gap: 1.5rem !important;
        /* чуть компактнее расстояние между блоками */
        width: 100% !important;
    }

    /* Делаем футер на ноутбуках визуально ШИРЕ, только в этой меди */
    .footer .container {
        max-width: 100% !important;
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    /* Делаем футер на ноутбуках похожим на десктопный,
       но чуть компактнее и лучше вписывающимся в меньшую ширину */
    .footer-logo {
        padding-left: 2.5rem !important;
        top: 90% !important;
        /* поднимаем логотип чуть выше, чтобы всё влезло */
    }

    .footer-links {
        gap: 2.2rem !important;
        /* слегка компактнее */
        top: 70% !important;
        margin-right: 3rem !important;
    }

    .footer-links a {
        font-size: 1.1rem !important;
    }

    .footer-social {
        gap: 1.5rem !important;
        /* двигаем иконки почти к самому краю экрана */
        padding-right: 2rem !important;
        top: 70% !important;
        /* чуть выше, чтобы уменьшенный футер не резал иконки */
    }

    /* Чуть уменьшаем кружки соцсетей только на ноутбуках */
    .footer-social a {
        width: 39px !important;
        height: 39px !important;
    }

    /* ===================================
       ABOUT PAGE HERO IMAGE
       =================================== */

    /* На ноутбуках делаем главный снимок крупнее,
       чтобы он заполнил пустое место, как на главной */
    .about-hero {
        /* оставляем нормальный внутренний отступ и поднимаем содержимое внутри,
           вместо того чтобы прятать секцию под навбаром */
        padding-top: 2.5rem !important;
        padding-bottom: 1rem !important;
        /* уменьшаем padding-bottom */
        margin-top: 0 !important;

        /* Block animations only on the background/container, not content */
        animation: none !important;
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        background: var(--bg-secondary) !important;
        /* фиксируем фон */

        /* Минимальная высота, но фон расширяется автоматически с контентом */
        min-height: 450px !important;
        /* уменьшаем минимальную высоту */
        height: auto !important;
        /* высота автоматически подстраивается под контент */
        overflow: visible !important;
        /* позволяем контенту выходить за границы */
    }

    /* Увеличиваем padding-bottom динамически, когда текст приближается к концу */
    .about-hero .about-intro {
        padding-bottom: 30px !important;
        /* уменьшаем отступ снизу для текста */
        margin-bottom: 30px !important;
        /* уменьшаем дополнительный отступ */
    }

    /* Block animations on the hero content container */
    .about-hero-content {
        animation: none !important;
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Дополнительная защита от JavaScript анимаций */
    .about-hero[style*="opacity"],
    .about-hero[style*="transform"],
    .about-hero-content[style*="opacity"],
    .about-hero-content[style*="transform"] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Сдвигаем текстовый блок About правее,
       чтобы он не прилипал к фото и выглядел как на десктопе */
    /* Allow container to be wider for About page to let text reach the edge */
    .about-hero .container {
        max-width: 95% !important;
        padding-right: 0.5rem !important;
    }

    /* Switch from Grid to Block to allow Float */
    .about-hero-content {
        display: block !important;
        /* Block animations only on the container background, not content */
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Prevent intersection observer animations from affecting about image */
    .about-hero .about-image.animate-in,
    .about-hero-content .about-image.animate-in,
    .about-hero .about-image[class*="animate"],
    .about-hero-content .about-image[class*="animate"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Float the image to the left - HIGH SPECIFICITY */
    .about-hero .about-image,
    .about-hero-content .about-image {
        float: left !important;
        margin-left: -3rem !important;
        /* расширяем влево, чтобы скрыть углы */
        margin-right: 1rem !important;
        /* убираем margin-right, используем shape-margin вместо этого */
        margin-bottom: 1rem !important;
        width: 650px !important;
        /* делаем шире */
        height: 400px !important;
        /* делаем меньше по высоте */
        margin-top: 0 !important;
        /* поднимаем картинку выше */
        min-width: 650px !important;
        min-height: 400px !important;
        max-width: 650px !important;
        max-height: 400px !important;

        border-radius: 12px !important;
        /* Rounded corners */

        /* Используем shape-outside для создания отступа только у обтекающей части */
        shape-outside: margin-box !important;
        shape-margin: 1.5rem !important;
        /* отступ только для обтекающей части текста */

        /* Block animations only on the image container background */
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 1 !important;

        /* Ensure it doesn't expand */
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    .about-hero .about-image,
    .about-hero-content .about-image {
        height: 320px !important;
        max-height: 320px !important;
        min-height: 320px !important;
    }

    .about-hero .about-image img,
    .about-hero-content .about-image img,
    .about-hero .about-image .hero-photo,
    .about-hero-content .about-image .hero-photo,
    .about-hero .about-image picture,
    .about-hero-content .about-image picture {
        height: 100% !important;
        max-height: 320px !important;
        /* уменьшаем высоту */
        min-height: 320px !important;
        width: 100% !important;

        object-fit: cover !important;
        object-position: center 30% !important;
        position: relative !important;
    }

    /* Light theme image - показываем в светлом режиме */
    .about-hero .about-image .light-theme-img,
    .about-hero-content .about-image .light-theme-img {
        display: block !important;
        visibility: visible !important;
    }

    /* Dark theme image - скрываем в светлом режиме */
    .about-hero .about-image .dark-theme-img,
    .about-hero-content .about-image .dark-theme-img {
        display: none !important;
    }

    /* Dark mode - скрываем светлую картинку, показываем темную */
    [data-theme="dark"] .about-hero .about-image .light-theme-img,
    [data-theme="dark"] .about-hero-content .about-image .light-theme-img {
        display: none !important;
    }

    [data-theme="dark"] .about-hero .about-image .dark-theme-img,
    [data-theme="dark"] .about-hero-content .about-image .dark-theme-img {
        display: block !important;
        visibility: visible !important;
    }

    /* Text flows around */
    .about-intro {
        margin-left: 0 !important;
        max-width: none !important;
        margin-top: 0 !important;
        /* поднимаем текстовый блок выше */
        padding-right: 0 !important;
        padding-left: 1.5rem !important;
        display: block !important;
        text-align: justify !important;
        /* выравниваем текст по ширине, чтобы строки были одинаковой длины */
        text-justify: inter-word !important;
        /* равномерное распределение пробелов между словами */
        hyphens: auto !important;
        /* автоматический перенос слов для лучшего распределения */
        word-spacing: normal !important;
    }

    /* Убираем выравнивание по ширине для последнего параграфа, чтобы он выглядел естественно */
    .about-intro p:last-child {
        text-align: left !important;
    }

    /* DISABLE TYPEWRITER EFFECT - Show full text immediately */
    .about-description,
    #typewriter-text {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 1rem !important; /* Slightly smaller */
    }

    /* Make About title smaller */
    .about-title {
        font-size: 3rem !important; /* Slightly smaller from 3.5rem */
    }

    /* Ensure text is fully visible from start, not animated character by character */
    .about-description::before,
    #typewriter-text::before {
        content: none !important;
    }

    /* ===================================
       LIFE JOURNEY SECTION
       =================================== */

    /* Поднимаем текст Life Journey выше */
    .biography-timeline {
        margin-top: 1rem !important;
        /* уменьшаем отступ сверху, чтобы поднять секцию выше */
        padding-top: 1rem !important;
    }

    /* Поднимаем заголовок "Life Journey" ещё выше */
    .biography-timeline .section-title {
        margin-top: 0 !important;
        margin-bottom: 2rem !important;
    }

    /* Опускаем содержимое секции (timeline items) ниже */
    .biography-timeline .timeline-container,
    .biography-timeline .timeline-connector {
        margin-top: 5rem !important;
        /* добавляем отступ сверху для контента */
    }

    /* Делаем блоки timeline меньше */
    .biography-timeline .timeline-item {
        margin-bottom: 2rem !important;
        /* уменьшаем отступ между блоками */
        padding: 0.8rem !important;
        /* уменьшаем внутренние отступы ещё больше */
        max-width: 400px !important;
        /* уменьшаем максимальную ширину блоков */
    }

    /* Уменьшаем размер контента внутри блоков */
    .biography-timeline .timeline-content {
        padding: 0.8rem !important;
        /* уменьшаем padding контента */
    }

    /* Отключаем клики на блоки timeline */
    .biography-timeline .timeline-item {
        pointer-events: auto !important;
        cursor: default !important;
    }

    .biography-timeline .timeline-item * {
        pointer-events: none !important;
        /* отключаем клики на все элементы внутри */
    }

    /* Копируем оригинальные эффекты hover из styles_new.css - упрощённая версия */
    .biography-timeline .timeline-item {
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .biography-timeline .timeline-content {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        /* точно как в оригинале */
    }

    .biography-timeline .timeline-item:hover {
        z-index: 10 !important;
    }

    /* Упрощённый hover - только поднятие и небольшое увеличение, без поворота */
    .biography-timeline .timeline-item:hover .timeline-content {
        transform: translateY(-12px) scale(1.02) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--accent-color) !important;
        border-color: var(--accent-color) !important;
    }

    /* Убираем поворот блоков при hover - только поднятие и увеличение */
    .biography-timeline .timeline-item:nth-child(odd):hover {
        transform: translateY(-12px) scale(1.02) !important;
        /* без поворота */
    }

    .biography-timeline .timeline-item:nth-child(even):hover {
        transform: translateY(-12px) scale(1.02) !important;
        /* без поворота */
    }

    .biography-timeline .timeline-item:hover .timeline-image img {
        transform: scale(1.05) !important;
    }

    .biography-timeline .timeline-item:hover .timeline-content::before {
        display: none !important;
    }

    /* Копируем эффект hover для маркера года из оригинала */
    .biography-timeline .timeline-item:hover .marker-year {
        transform: rotate(0deg) scale(1.1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--accent-color) !important;
    }

    /* Отключаем hover эффекты для текста - только блок и маркер */
    .biography-timeline .timeline-item:hover .timeline-text,
    .biography-timeline .timeline-item:hover .timeline-text p {
        transform: none !important;
        /* убираем transform для текста */
        color: var(--text-primary) !important;
        /* оставляем обычный цвет */
    }

    /* Увеличиваем картинки, чтобы заполнить блок, но делаем их немного меньше */
    .biography-timeline .timeline-image {
        width: 100% !important;
        /* заполняем всю ширину блока */
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        /* сохраняем пропорции */
        margin-bottom: 0.5rem !important;
        /* уменьшаем отступ снизу */
    }

    .biography-timeline .timeline-image img {
        width: 100% !important;
        /* заполняем всю ширину */
        height: 100% !important;
        /* заполняем всю высоту */
        object-fit: cover !important;
        /* заполняем блок с обрезкой */
        object-position: center !important;
        transition: transform 0.5s ease !important;
        /* добавляем transition для hover */
    }

    /* Уменьшаем размер текста в timeline */
    .biography-timeline .timeline-text p {
        font-size: 0.85rem !important;
        /* уменьшаем размер текста ещё больше */
        line-height: 1.5 !important;
    }

    /* Приближаем тексты к главной линии timeline */
    .biography-timeline .timeline-item:nth-child(odd) .timeline-text {
        left: calc(100% + 2.5rem) !important;
        /* уменьшаем расстояние от блока (было 6rem) */
    }

    .biography-timeline .timeline-item:nth-child(even) .timeline-text {
        right: calc(100% + 2.5rem) !important;
        /* уменьшаем расстояние от блока (было 6rem) */
    }

    /* Уменьшаем размер заголовков в timeline */
    .biography-timeline .timeline-content h3 {
        font-size: 1.15rem !important;
        /* уменьшаем размер заголовков */
        margin-bottom: 0.4rem !important;
    }

    /* Уменьшаем размер маркеров года */
    .biography-timeline .marker-year {
        font-size: 1rem !important;
        /* средний размер текста года */
        padding: 0.5rem 1rem !important;
        /* средний padding маркера */
    }

    /* Укорачиваем главную линию timeline - немного */
    .biography-timeline .timeline-line-vertical {
        height: 330% !important;
        /* немного уменьшаем высоту линии */
        max-height: 2500px !important;
        /* ограничиваем максимальную высоту */
    }

    .biography-timeline .timeline-connector {
        height: 85% !important;
        /* немного уменьшаем высоту контейнера линии */
        max-height: 600px !important;
    }

    /* Приближаем маркеры года к блокам - максимально близко */
    .biography-timeline .timeline-item:nth-child(odd) .timeline-marker {
        right: 1.5rem !important;
        /* максимально приближаем маркер к блоку */
        top: 0 !important;
        /* опускаем маркер на уровень блока */
        transform: translateY(0) !important;
        /* убираем смещение по вертикали */
    }

    .biography-timeline .timeline-item:nth-child(even) .timeline-marker {
        left: 1.5rem !important;
        /* максимально приближаем маркер к блоку */
        top: 0 !important;
        /* опускаем маркер на уровень блока */
        transform: translateY(0) !important;
        /* убираем смещение по вертикали */
    }

    /* Уменьшаем расстояние между маркером и контентом */
    .biography-timeline .timeline-content {
        margin-top: 0.5rem !important;
        /* уменьшаем отступ сверху контента */
    }


    /* ===================================
       PROFESSIONAL MATERIALS SECTION
       =================================== */

    /* Поднимаем секцию Professional Materials выше */
    .professional-section {
        margin-top: -10rem !important;
        /* поднимаем секцию выше, уменьшая отступ сверху */
        padding-top: 2rem !important;
        /* уменьшаем внутренний отступ сверху */
    }

    /* Делаем стикер clapboard меньше и выше */
    .professional-section .clapboard-sticker {
        width: 70px !important;
        /* уменьшаем ширину стикера */
        height: auto !important;
        max-width: 70px !important;
        top: 45% !important;
        /* поднимаем стикер выше (было 50%) */
        left: auto !important;
        /* убираем left позиционирование */
        left: 3.5rem !important;
        /* позиционируем справа */
        transform: translateY(0) rotate(-15deg) !important;
        /* убираем translateY, оставляем только rotate */
    }

    /* Footer sticker removed from main page */
    .footer-sticker {
        display: none !important;
    }

    /* ===================================
       IMDB LINK
       =================================== */

    /* Уменьшаем размер IMDB ссылки и поднимаем выше */
    .imdb-link-container {
        transform: scale(0.7) !important;
        /* уменьшаем размер на 30% */
        margin-top: -8rem !important;
        /* поднимаем IMDB ссылку выше */
        margin-bottom: 4rem !important;
        /* уменьшаем отступ снизу */
    }

    .imdb-link,
    .imdb-link svg,
    .imdb-icon {
        width: 140px !important;
        /* уменьшаем ширину (было 200px) */
        height: 70px !important;
        /* уменьшаем высоту (было 100px) */
    }

    /* ===================================
       MUSIC PAGE HERO
       =================================== */

    /* Уменьшаем высоту картинки в заголовке секции Music */
    .music-hero {
        height: 50vh !important;
        /* уменьшаем высоту (было 60vh или больше) */
        min-height: 400px !important;
        /* устанавливаем минимальную высоту */
        max-height: 500px !important;
        /* ограничиваем максимальную высоту */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 8rem !important;
        /* отступ сверху */
    }

    /* Поднимаем текст и анимацию выше */
    .music-hero-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .music-visualizer-large {
        position: absolute !important;
        top: 0 !important;
        /* поднимаем анимацию в самый верх */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    /* ===================================
       MUSIC TRACKS BLOCKS
       =================================== */

    /* Уменьшаем размер блоков треков */
    .track-card {
        padding: 1rem !important;
        /* уменьшаем внутренние отступы */
        width: 100% !important;
        /* блоки занимают всю доступную ширину в сетке */
        max-width: 280px !important;
        /* немного увеличиваем максимальную ширину */
        min-width: 240px !important;
        /* немного увеличиваем минимальную ширину */
    }

    /* Центрируем контейнер с треками */
    .featured-tracks .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .featured-tracks .section-title {
        text-align: center !important;
        width: 100% !important;
    }

    .tracks-grid {
        gap: 2.5rem !important;
        /* увеличиваем расстояние между блоками */
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3 блока в ряд */
        grid-auto-rows: auto !important;
        justify-items: center !important;
        /* центрируем блоки в ячейках сетки */
        margin: 0 auto !important;
        /* центрируем саму сетку */
        width: fit-content !important;
        /* сетка занимает только необходимое пространство */
        max-width: 100% !important;
        justify-content: center !important;
    }

    /* Уменьшаем размер картинок в блоках треков */
    .track-image {
        height: 180px !important;
        /* уменьшаем высоту картинки (было 250px) */
    }

    /* Уменьшаем размер текста в блоках треков */
    .track-card h3,
    .track-card h4 {
        font-size: 1.1rem !important;
        /* уменьшаем размер заголовков */
        margin-bottom: 0.5rem !important;
    }

    .track-card p {
        font-size: 0.9rem !important;
        /* уменьшаем размер текста */
        line-height: 1.5 !important;
    }

    /* ===================================
       SPOTIFY SECTION
       =================================== */

    /* Уменьшаем размер блока "Listen on Spotify" и плеера */
    .spotify-section {
        padding: 3rem 0 !important;
        /* уменьшаем вертикальные отступы */
    }

    .spotify-section h2 {
        font-size: 1.8rem !important;
        /* уменьшаем размер заголовка */
        margin-bottom: 1.5rem !important;
    }

    /* Ограничиваем видимую область контейнера, чтобы был виден только один плеер */
    .spotify-container {
        max-width: 600px !important;
        /* увеличиваем внешний блок еще больше */
        width: 600px !important;
        margin: 0 auto !important;
        /* центрируем */
        position: relative !important;
        overflow: visible !important;
        /* разрешаем видимость кнопок вне контейнера */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Ограничиваем видимую область плееров - скрываем часть второго плеера */
    .spotify-players {
        gap: 1rem !important;
        /* уменьшаем расстояние между плеерами */
        padding: 0.5rem 0 !important;
        width: 450px !important;
        /* еще немного уменьшаем ширину */
        max-width: 450px !important;
        margin: 0 auto !important;
        /* центрируем контейнер плееров */
        overflow-x: auto !important;
        /* разрешаем скролл */
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        /* скрываем скроллбар */
        -ms-overflow-style: none !important;
        position: relative !important;
    }

    .spotify-players::-webkit-scrollbar {
        display: none !important;
        /* скрываем скроллбар в WebKit */
    }

    /* Обрезаем видимую область контейнера, но оставляем место для кнопок */
    .spotify-section .container {
        overflow: visible !important;
        /* разрешаем видимость кнопок */
        position: relative !important;
        pointer-events: auto !important;
        /* разрешаем клики */
        max-width: 800px !important;
        /* увеличиваем внешний блок еще больше */
        width: 800px !important;
    }

    .spotify-container {
        max-width: 700px !important;
        /* увеличиваем внешний контейнер */
    }

    /* Убеждаемся, что родительские элементы не блокируют клики на кнопки */
    .spotify-section {
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Убеждаемся, что кнопки навигации видны и находятся вне области overflow */
    .spotify-container .scroll-btn,
    .spotify-container button.scroll-btn,
    #scrollLeft,
    #scrollRight {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 100 !important;
        /* z-index меньше чем у navbar (10000), чтобы не перекрывать хедер */
        pointer-events: auto !important;
        /* разрешаем клики на кнопки */
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: manipulation !important;
        /* улучшаем отзывчивость на мобильных */
        -webkit-tap-highlight-color: transparent !important;
        background: var(--accent-color) !important;
        border: none !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        /* Предотвращаем дефолтное поведение кнопки */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .spotify-container .scroll-btn:hover,
    .spotify-container button.scroll-btn:hover,
    #scrollLeft:hover,
    #scrollRight:hover {
        pointer-events: auto !important;
        background: var(--accent-hover) !important;
    }

    .spotify-container .scroll-btn:active,
    .spotify-container button.scroll-btn:active,
    #scrollLeft:active,
    #scrollRight:active {
        pointer-events: auto !important;
    }

    .spotify-container .scroll-btn:focus,
    .spotify-container button.scroll-btn:focus,
    #scrollLeft:focus,
    #scrollRight:focus {
        pointer-events: auto !important;
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 2px !important;
    }

    .spotify-container .scroll-left {
        left: -50px !important;
        /* кнопка ближе к контейнеру */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .spotify-container .scroll-right {
        right: -50px !important;
        /* кнопка ближе к контейнеру */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Убеждаемся, что иконки внутри кнопок не блокируют клики */
    .spotify-container .scroll-btn i,
    .spotify-container .scroll-btn svg,
    #scrollLeft i,
    #scrollRight i {
        pointer-events: none !important;
        /* иконки не блокируют клики */
    }

    /* Убеждаемся, что никакие другие элементы не перекрывают кнопки */
    .spotify-section * {
        pointer-events: auto !important;
    }

    .spotify-section .scroll-btn,
    .spotify-section #scrollLeft,
    .spotify-section #scrollRight {
        pointer-events: auto !important;
        z-index: 100 !important;
        /* z-index меньше чем у navbar (10000), чтобы не перекрывать хедер при прокрутке */
    }

    /* Убеждаемся, что кнопки Spotify НИКОГДА не перекрывают навбар */
    .navbar {
        z-index: 10000 !important;
        position: fixed !important;
    }

    /* Кнопки Spotify должны быть ниже навбара */
    .spotify-container .scroll-btn,
    .spotify-container button.scroll-btn,
    #scrollLeft,
    #scrollRight,
    .spotify-section .scroll-btn,
    .spotify-section #scrollLeft,
    .spotify-section #scrollRight {
        z-index: 100 !important;
        /* Гарантируем, что кнопки ниже навбара */
    }

    /* Убеждаемся, что контейнер не блокирует клики на кнопки */
    .spotify-container {
        pointer-events: auto !important;
    }

    /* Убеждаемся, что iframe в плеере не блокирует клики на кнопки */
    .spotify-player {
        pointer-events: auto !important;
    }

    .spotify-player iframe {
        pointer-events: auto !important;
    }

    /* Убеждаемся, что область плееров не блокирует клики на кнопки */
    .spotify-players {
        pointer-events: auto !important;
    }

    /* Убеждаемся, что секция не блокирует клики */
    .spotify-section {
        pointer-events: auto !important;
    }

    .spotify-section .container {
        pointer-events: auto !important;
    }

    .spotify-player {
        padding: 0.7rem !important;
        /* еще немного уменьшаем padding */
        flex: 0 0 440px !important;
        /* возвращаем ширину плеера */
        min-width: 440px !important;
        min-height: 300px !important;
        /* еще немного уменьшаем минимальную высоту блока */
        overflow: hidden !important;
        /* возвращаем overflow */
    }

    .spotify-player h4 {
        font-size: 0.95rem !important;
        /* уменьшаем размер заголовка в плеере */
        margin-bottom: 0.3rem !important;
    }

    .spotify-player iframe {
        height: 233px !important;
        /* еще больше уменьшаем высоту iframe */
        min-height: 233px !important;
        transform: scale(0.85) !important;
        /* уменьшаем сам плеер на 15% */
        transform-origin: top center !important;
        margin-bottom: -90px !important;
        /* корректируем отрицательный margin */
        margin-top: -10px !important;
        /* перемещаем плеер немного выше */
        display: block !important;
    }

    /* ===================================
       SHOW HISTORY SECTION
       =================================== */

    /* Уменьшаем размер текста в Show History */
    .show-history-section .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 1.5rem !important;
    }

    .show-item {
        font-size: 1.2rem !important;
        /* уменьшаем размер текста (было 1.6rem) */
        line-height: 1.3 !important;
    }

    .show-item .show-date {
        font-size: 1rem !important;
        /* уменьшаем размер даты */
        margin-right: 2rem !important;
        /* уменьшаем отступ справа */
        width: 80px !important;
        /* уменьшаем ширину даты */
    }

    .show-item .show-name {
        font-size: 1.2rem !important;
        /* уменьшаем размер названия */
    }

    /* Уменьшаем размер картинок (стикеров) в секции Song Stories */
    /* ИСКЛЮЧАЕМ fighter-sticker, left и right стикеры из этого правила! */
    .song-stories .section-sticker:not(.fighter-sticker):not(.left):not(.right) {
        width: 120px !important;
        /* уменьшаем ширину (было 200px) */
        height: auto !important;
        max-width: 120px !important;
    }

    /* ОТДЕЛЬНОЕ ПРАВИЛО для исключения по ID - :not() не работает с ID */
    .song-stories #fighter-sticker-img.section-sticker {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    /* ИСКЛЮЧЕНИЕ для fighter-sticker - должен быть 80px, не 120px! */
    /* Используем максимальную специфичность, чтобы переопределить общее правило */
    html body .song-stories .section-sticker.fighter-sticker,
    html body .song-stories #fighter-sticker-img.section-sticker,
    html body .song-stories img.section-sticker.fighter-sticker,
    html body .song-stories img#fighter-sticker-img.section-sticker,
    body .song-stories .section-sticker.fighter-sticker,
    body .song-stories #fighter-sticker-img.section-sticker,
    body .song-stories img.section-sticker.fighter-sticker,
    body .song-stories img#fighter-sticker-img.section-sticker,
    .song-stories .section-sticker.fighter-sticker,
    .song-stories #fighter-sticker-img.section-sticker,
    .song-stories img.section-sticker.fighter-sticker,
    .song-stories img#fighter-sticker-img.section-sticker {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    .song-stories .section-sticker.mid-right-sticker {
        width: 180px !important;
        /* уменьшаем ширину (было 300px) */
        height: auto !important;
        max-width: 180px !important;
    }

    /* Увеличиваем специфичность для fighter-sticker - используем очень агрессивный селектор */
    body .song-stories img.section-sticker.fighter-sticker,
    html body .song-stories .section-sticker.fighter-sticker,
    .song-stories img.section-sticker.fighter-sticker,
    .song-stories .section-sticker.fighter-sticker,
    .song-stories img.fighter-sticker,
    img.section-sticker.fighter-sticker,
    .fighter-sticker,
    #fighter-sticker-img {
        width: 80px !important;
        height: auto !important;
        max-width: 80px !important;
        right: 150px !important;
        top: 5% !important;
        /* перемещаем выше (было 10%) */
        left: auto !important;
        position: absolute !important;
        /* убеждаемся, что позиционирование работает */
        transform: rotate(-15deg) !important;
        /* сохраняем поворот */
    }

    /* Переопределяем все возможные медиа-запросы для fighter-sticker */
    @media (max-width: 1366px) {

        /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ - переопределяет ВСЕ остальные правила */
        html body .song-stories .section-sticker.fighter-sticker,
        html body .song-stories #fighter-sticker-img.section-sticker,
        html body .song-stories img.section-sticker.fighter-sticker,
        html body .song-stories img#fighter-sticker-img.section-sticker,
        body .song-stories .section-sticker.fighter-sticker,
        body .song-stories #fighter-sticker-img.section-sticker,
        .song-stories .section-sticker.fighter-sticker,
        .song-stories #fighter-sticker-img.section-sticker,
        .fighter-sticker,
        #fighter-sticker-img,
        img.fighter-sticker {
            right: 150px !important;
            top: 5% !important;
            width: 80px !important;
            max-width: 80px !important;
            min-width: 80px !important;
            height: auto !important;
            position: absolute !important;
        }
    }

    .song-stories .section-sticker.fighter-left-sticker {
        width: 150px !important;
        /* еще больше увеличиваем ширину */
        height: auto !important;
        max-width: 150px !important;
    }

    /* Уменьшаем отступы в Show History */
    /* Уменьшаем белый блок Show History для ноутбуков */
    .show-history-section {
        padding: 2rem 1.5rem !important;
        max-width: 700px !important;
        margin: 0 auto !important;
        margin-bottom: 3rem !important;
    }

    .show-history-grid {
        gap: 1.5rem !important;
        /* уменьшаем расстояние между колонками */
        margin-top: 1.5rem !important;
        max-width: 700px !important;
        /* уменьшаем максимальную ширину */
        transform: translateX(0) !important;
    }

    .show-history-column {
        gap: 0.05rem !important;
        /* уменьшаем расстояние между элементами */
    }

    /* Уменьшаем видео-секцию для ноутбуков */
    .show-video-section {
        margin-top: 2rem !important;
        padding: 0 1rem !important;
    }

    .show-video {
        max-width: 600px !important;
    }

    /* Bottom-left sticker - поверх белого блока, но под футером (только для ноутбуков) */
    .bottom-left-sticker {
        left: 220px !important;
        width: 150px !important;
        max-width: 150px !important;
        min-width: 150px !important;
        top: 90% !important;
        bottom: auto !important;
        z-index: 5 !important;
    }

    /* Fighter-sticker - изменяем позицию (только для ноутбуков) */
    .fighter-sticker,
    #fighter-sticker-img {
        right: 100px !important;
        left: auto !important;
        top: 8% !important;
        width: 100px !important;
        max-width: 100px !important;
        min-width: 100px !important;
        z-index: 6 !important;
        position: absolute !important;
    }

    /* Стикеры по бокам белого блока - принудительное изменение (только для ноутбуков) */
    .section-sticker.left:not(.fighter-left-sticker),
    #top-left-sticker,
    img[src*="Bowery"],
    img[src*="48"] {
        left: 50px !important;
        width: 220px !important;
        max-width: 220px !important;
        min-width: 220px !important;
        height: 160px !important;
        max-height: 160px !important;
        object-fit: cover !important;
        position: absolute !important;
    }
    
    .section-sticker.fighter-left-sticker,
    .section-sticker.little-better-sticker,
    img[src*="104"],
    img[src*="Tali pics(104)"],
    .song-stories img[src*="104"] {
        left: 50px !important;
        width: 150px !important;
        max-width: 150px !important;
        min-width: 150px !important;
        position: absolute !important;
    }

    .section-sticker.right,
    #top-right-sticker,
    img[src*="105"],
    img[src*="Tali pics(105)"] {
        right: 50px !important;
        width: 170px !important;
        max-width: 170px !important;
        min-width: 170px !important;
        height: 130px !important;
        max-height: 130px !important;
        object-fit: cover !important;
        position: absolute !important;
    }

    /* Atelier sticker для ноутбуков */
    .section-sticker.mid-right-sticker {
        right: 50px !important;
        width: 150px !important;
        max-width: 150px !important;
        top: 35% !important;
        position: absolute !important;
    }

    /* Футер поверх изображения */
    .footer {
        position: relative !important;
        z-index: 10 !important;
    }

    /* ===================================
       BACK TO TOP BUTTON
       =================================== */

    .back-to-top {
        bottom: 2rem !important;
        right: 2rem !important;
        width: 45px !important;
        height: 45px !important;
    }

    /* ФИНАЛЬНОЕ ПРАВИЛО: Кнопки Spotify НИКОГДА не должны перекрывать навбар */
    /* Навбар всегда должен быть выше */
    .navbar,
    header .navbar,
    body .navbar {
        z-index: 10000 !important;
        position: fixed !important;
    }

    /* Все кнопки Spotify должны быть ниже навбара */
    .spotify-container .scroll-btn,
    .spotify-container button.scroll-btn,
    button.scroll-btn,
    .scroll-btn.scroll-left,
    .scroll-btn.scroll-right,
    #scrollLeft,
    #scrollRight,
    .spotify-section .scroll-btn,
    .spotify-section #scrollLeft,
    .spotify-section #scrollRight {
        z-index: 100 !important;
        position: absolute !important;
    }

    /* ФИНАЛЬНОЕ ПРАВИЛО ДЛЯ FIGHTER-STICKER - в самом конце медиа-запроса */
    /* Переопределяет ВСЕ предыдущие правила, включая .song-stories .section-sticker */
    html body .song-stories .section-sticker.fighter-sticker,
    html body .song-stories #fighter-sticker-img.section-sticker,
    html body .song-stories img.section-sticker.fighter-sticker,
    html body .song-stories img#fighter-sticker-img.section-sticker {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    /* ===================================
       GALLERY TICKER - Shorter for notebook
       =================================== */
    
    .gallery-hero {
        min-height: 220px !important;
        height: 220px !important;
        max-height: 220px !important;
    }

    /* Замедляем тикер для комфортного просмотра */
    html body .gallery-hero .gallery-ticker-wrapper .gallery-ticker .ticker-track,
    body .gallery-hero .gallery-ticker-wrapper .gallery-ticker .ticker-track,
    .gallery-hero .gallery-ticker-wrapper .gallery-ticker .ticker-track,
    .gallery-ticker-wrapper .gallery-ticker .ticker-track,
    .gallery-ticker .ticker-track,
    .ticker-track {
        animation: ticker-scroll 80s linear infinite !important;
        animation-duration: 80s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: linear !important;
        -webkit-animation: ticker-scroll 80s linear infinite !important;
        -webkit-animation-duration: 80s !important;
        -moz-animation: ticker-scroll 80s linear infinite !important;
        -moz-animation-duration: 80s !important;
    }

}


/* ===================================
   BOUNCE ANIMATION
   =================================== */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ===================================
   ADDITIONAL FIXES FOR SPECIFIC LAPTOP SIZES
   =================================== */

/* For 1280x800 and similar */
@media (max-width: 1280px) {
    .hero {
        min-height: calc(100vh - 80px) !important;
    }

    /* Allow general styles to control font size */

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    .container {
        max-width: 900px !important;
    }
}

/* For very small laptops (1024px) */
@media (max-width: 1024px) {
    .nav-container {
        padding: 0 1.5rem !important;
    }

    .nav-menu {
        gap: 1.75rem !important; /* Increased gap for smaller laptops */
    }

    .nav-link {
        font-size: 0.9rem !important; /* Slightly bigger */
    }

    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    .hero-text {
        text-align: center !important;
        padding: 0 1rem !important;
    }

    .hero-buttons {
        justify-content: center !important;
    }

    .hero-image {
        order: -1 !important;
        /* Image goes first on smaller screens */
        margin-top: -30px !important;
    }

    .image-container {
        max-width: 500px !important;
    }

    .hero-photo {
        max-height: 500px !important;
    }
}

/* Дополнительные стили для fighter-sticker вне медиа-запроса с максимальной специфичностью */
html body .song-stories img.section-sticker.fighter-sticker,
html body .song-stories .section-sticker.fighter-sticker,
body .song-stories img.section-sticker.fighter-sticker,
body .song-stories .section-sticker.fighter-sticker,
.song-stories img.section-sticker.fighter-sticker,
.song-stories .section-sticker.fighter-sticker {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    min-width: 80px !important;
    right: 250px !important;
    top: 5% !important;
    left: auto !important;
    position: absolute !important;
    transform: rotate(-15deg) !important;
}

/* Еще более агрессивный подход - используем атрибут селектор */
img[class*="fighter-sticker"],
img.section-sticker.fighter-sticker,
*[class*="fighter-sticker"] {
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    min-width: 80px !important;
    right: 250px !important;
    /* перемещаем левее */
    top: 5% !important;
    left: auto !important;
    position: absolute !important;
    transform: rotate(-15deg) !important;
}

/* Максимально агрессивный подход - переопределяем все возможные варианты */
html body .song-stories img[src*="Tali pics(76)"],
html body .song-stories img[class*="fighter"],
html body img.fighter-sticker,
html body .fighter-sticker {
    right: 250px !important;
    top: 5% !important;
    width: 80px !important;
    height: auto !important;
    max-width: 80px !important;
    min-width: 80px !important;
    position: absolute !important;
    transform: rotate(-15deg) !important;
}

/* АБСОЛЮТНО МАКСИМАЛЬНЫЙ ПРИОРИТЕТ - переопределяет ВСЕ остальные стили */
html body .song-stories img#fighter-sticker-img.section-sticker.fighter-sticker,
html body img#fighter-sticker-img.fighter-sticker,
html body #fighter-sticker-img.fighter-sticker,
html body #fighter-sticker-img,
body .song-stories #fighter-sticker-img,
.song-stories #fighter-sticker-img,
#fighter-sticker-img.section-sticker.fighter-sticker {
    right: 250px !important;
    top: 5% !important;
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    position: absolute !important;
    transform: rotate(-15deg) !important;
    z-index: 9999 !important;
}

/* =====================================================
   FINAL OVERRIDE: Hero image square and left - MAXIMUM SPECIFICITY
   Must be last to override all previous rules
   ===================================================== */
@media (min-width: 769px) {
    html body .hero .hero-content .hero-image,
    html body section.hero .hero-content .hero-image,
    section.hero .hero-content .hero-image,
    .hero .hero-content .hero-image,
    .hero-content .hero-image,
    .hero-image {
        max-width: 400px !important;
        width: 400px !important;
        margin: 0 auto 0 0 !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        order: 1 !important;
        display: block !important;
    }
    
    html body .hero .hero-content .hero-image .image-container,
    html body section.hero .hero-content .hero-image .image-container,
    section.hero .hero-content .hero-image .image-container,
    .hero .hero-content .hero-image .image-container,
    .hero-content .hero-image .image-container,
    .hero-image .image-container,
    .image-container {
        width: 400px !important;
        height: 400px !important;
        max-width: 400px !important;
        max-height: 400px !important;
        min-width: 400px !important;
        min-height: 400px !important;
        aspect-ratio: 1 !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    html body .hero .hero-content .hero-image .hero-photo,
    html body .hero .hero-content .hero-image img,
    html body section.hero .hero-content .hero-image .hero-photo,
    section.hero .hero-content .hero-image .hero-photo,
    .hero .hero-content .hero-image .hero-photo,
    .hero-content .hero-image .hero-photo,
    .hero-image .hero-photo,
    .hero-image img,
    .hero-photo {
        width: 100% !important;
        height: 100% !important;
        max-width: 400px !important;
        max-height: 400px !important;
        min-width: 400px !important;
        min-height: 400px !important;
        aspect-ratio: 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        display: block !important;
    }
    
    .hero-text {
        order: 2 !important;
    }
    
    .hero-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}