* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    background: #FFFFFF;
    overflow-x: hidden;}

/* Container для центрирования на больших экранах */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: -1;
}

/* ========== HEADER ========== */
.header {
    position: fixed;
    width: 100%;
    max-width: 1920px;
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: #FFFFFF;
    z-index: 1000;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px auto;
}

.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 30px;
    order: 0;
}

.nav-links a {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    opacity: 0.8;
    text-decoration: none;
    flex: none;
    flex-grow: 0;
}

.nav-links a:first-child {
    width: 120px;
    height: 20px;
    order: 0;
}

.nav-links a:last-child {
    width: 145px;
    height: 20px;
    order: 1;
}
.footer-logo .logo-center{
    text-align: left;
    align-items: baseline;
}
.footer-logo  .logo-bottom {
    color: #fff;
    text-align: left;
}
.mobile-logo-container .footer-logo  .logo-bottom {
   color: #000;
}
.d-flex{
   display: flex;
}
.d-icons-header{
   gap: 20px;
}
.logo-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.logo-modal{
    margin: 20px auto;
    display: table;
}
.logo-top {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #389C82;
    margin: 0;
    white-space: nowrap;
    text-align: center;
    width: 202.6px;
    letter-spacing: 0.5px;
}

.logo-bottom {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    margin: 0;
    white-space: nowrap;
    text-align: center;
    width: 202.6px;
    letter-spacing: 0.8px;
}

.social-icons-header {
    display: flex;
    gap: 20px;
    align-items: center;
    order: 2;
}

.social-icons-header a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-buy-album {
    width: 200px;
    height: 50px;
    background: linear-gradient(270deg, #199478 0%, #41A790 100%), #3FB8C1;
    border: none;
    border-radius: 100px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
}

.menu-button {
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #000000;
    order: 4;
}

/* ========== HERO ========== */
.hero-bg {
    position: absolute;
    width: 100vw;
    max-width: 1920px;
    height: 1080px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: linear-gradient(180deg, rgba(0, 52, 39, 0) 87.41%, #003427 100%),
                url('images/82e949670fc4a8ddf933fd1820e2683260e7c675.jpg') center/cover;
}
.container{
  max-width: 1140px;
  width: 100vw;
  margin: 0 auto;
}
section.album-card {
    background: linear-gradient(0deg, #003427 0%, #003427 100%);
    position: relative;
	padding: 110px 0;
    top: 371px;
}
.hero-card-bg {
    max-width: 1140px;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(12.5px);
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 auto;
	position: relative;
	top: 300px;
	padding: 50px;
	display: flex;
	gap: 50px;
	margin-bottom: 291px;
}

.hero-logo-white {
    color: #FFF;
    font-weight: 900;
    z-index: 2;
    display: inline-block;
    white-space: wrap; /* чтобы не переносился на 2 строки */
    opacity: 0.9;
}

.hero-title {
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    color: #FFF;
    z-index: 2;
}

.hero-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFF;
	margin: 32px 0 60px;
}
.album-d-flex{
	gap: 20px;
}
.btn-about-album {
    background: #FFF;
    border: none;
	width: 200px;
	height: 50px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 16px;
    color: #228891;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.btn-listen-demo {
    width: 216px;
    height: 50px;
    background: transparent;
    border: 1px solid #FFF;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

/* ========== ALBUM ========== */
.album-bg {
    position: absolute;
    width: 100vw;
    max-width: 1920px;
    height: 770px;
    left: 50%;
    transform: translateX(-50%);
    top: 1079px;
    background: linear-gradient(0deg, #003427 0%, #003427 100%);
}

.album-title {
    font-weight: 900;
    font-size: 80px;
    line-height: 93px;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 65px;
}

.album-desc {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #ACC0BB;
    z-index: 2;
}

.price-card {
    background: #0B5A48;
    border-radius: 25px;
    padding: 20px 35px;
    margin-top: 495px;
}

.price-label {
    font-weight: 400;
    font-size: 16px;
    color: #ACC0BB;
    z-index: 3;
}

.price-old {
    font-weight: 600;
    font-size: 24px;
    color: #ACC0BB;
    z-index: 3;
}
.price-container{
     align-items: center;
}	
.gap{
     gap: 45px;
}
.contact-info .contact-left{
    gap: 20px;
}
.price-width {
     max-width: 50%;
     width: 100%;
}
.price-new {
    font-weight: 600;
    font-size: 50px;
    color: #FFF;
    z-index: 3;
}

.btn-buy-white {
    width: 262px;
    height: 60px;
    background: #FFF;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 20px;
    color: #003427;
    cursor: pointer;
    z-index: 3;
    margin-bottom: 15px;
}

.btn-write-us {
    width: 262px;
    height: 60px;
    background: transparent;
    border: 1px solid #FFF;
    border-radius: 100px;
    font-weight: 600;
    font-size: 20px;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 3;
}

.playlist {
}

.track {
    position: relative;
    margin-bottom: 30px;
}

.track-category {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #FFF;
}

.track-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #FFF;
    margin: 5px 0;
}

.track-controls {
    position: absolute;
    right: 20px;
    top: 5px;
}

.track-controls button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}

.track-progress {
    width: 521px;
    height: 3px;
    background: #ACC0BB;
    border-radius: 5px;
    margin-top: 33px;
    cursor: pointer;
    position: relative;
}
.album-card .container{
   gap: 40px;
}
.track-progress-fill {
    height: 100%;
    background: #7DEED4;
    border-radius: 5px;
    position: relative;
}

.track-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #7DEED4;
    border-radius: 50%;
    right: -7.5px;
    top: -6px;
}

/* ========== CONTACT ========== */
.contact-bg {
    background: #FAFAFA;
}

.contact-gradient {
    opacity: 0.8;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg width="1920" height="469" viewBox="0 0 1920 469" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.1"><path d="M930.744 464.266C930.77 466.84 928.691 468.94 926.117 468.94C923.543 468.94 921.464 466.84 921.49 464.266L926.117 14.209L930.744 464.266ZM996.859 463.805C996.886 466.379 994.807 468.479 992.233 468.479C989.66 468.479 987.581 466.379 987.608 463.805L992.233 24.25L996.859 463.805ZM1062.95 458.589C1062.98 461.156 1060.91 463.252 1058.34 463.252C1055.77 463.252 1053.7 461.156 1053.73 458.589L1058.33 37.1006L1062.95 458.589ZM864.628 458.543C864.654 461.11 862.58 463.206 860.012 463.206C857.444 463.206 855.37 461.111 855.396 458.543L860.001 6.86328L864.628 458.543ZM798.534 448.076C798.56 450.65 796.481 452.751 793.907 452.751C791.333 452.751 789.254 450.65 789.281 448.076L793.907 0L798.534 448.076ZM1129.06 447.892C1129.09 450.465 1127.02 452.566 1124.44 452.566C1121.87 452.566 1119.79 450.465 1119.82 447.892L1124.44 52.7832L1129.06 447.892ZM732.416 434.927C732.443 437.501 730.365 439.602 727.791 439.602C725.217 439.602 723.139 437.501 723.166 434.927L727.791 0L732.416 434.927ZM1195.17 431.795C1195.21 434.367 1193.13 436.47 1190.56 436.47C1187.99 436.47 1185.91 434.367 1185.94 431.795L1190.56 69.2949L1195.17 431.795ZM666.299 424.667C666.327 427.234 664.254 429.33 661.686 429.33C659.119 429.33 657.046 427.234 657.074 424.667L661.675 0.645508L666.299 424.667ZM1261.26 411.633C1261.3 414.197 1259.23 416.296 1256.66 416.296C1254.1 416.296 1252.03 414.198 1252.07 411.633L1256.65 88.708L1261.26 411.633ZM600.204 409.18C600.233 411.753 598.155 413.854 595.582 413.854C593.008 413.854 590.93 411.753 590.96 409.18L595.582 3.7998L600.204 409.18ZM534.084 391.701C534.115 394.274 532.038 396.376 529.465 396.376C526.892 396.376 524.815 394.274 524.847 391.701L529.465 10.1328L534.084 391.701ZM1327.37 387.856C1327.41 390.425 1325.34 392.53 1322.77 392.53C1320.2 392.53 1318.13 390.425 1318.17 387.856L1322.77 108.56L1327.37 387.856ZM467.963 377.93C467.996 380.502 465.921 382.604 463.349 382.604C460.777 382.604 458.701 380.502 458.734 377.93L463.349 19.0449L467.963 377.93ZM401.866 363.491C401.902 366.062 399.827 368.165 397.256 368.165C394.685 368.165 392.61 366.062 392.645 363.491L397.256 28.9248L401.866 363.491ZM1393.47 361.995C1393.52 364.561 1391.45 366.669 1388.89 366.669C1386.32 366.669 1384.25 364.561 1384.3 361.995L1388.89 128.571L1393.47 361.995ZM335.745 350.918C335.783 353.488 333.71 355.592 331.14 355.592C328.569 355.592 326.496 353.488 326.535 350.918L331.14 42.374L335.745 350.918ZM9.12753 344.033C9.1888 346.595 7.128 348.706 4.56445 348.706C2.0009 348.706 -0.0598919 346.595 0.00137776 344.033L4.56445 153.166L9.12753 344.033ZM269.622 341.037C269.664 343.607 267.593 345.712 265.023 345.712C262.453 345.712 260.382 343.607 260.424 341.037L265.023 58.54L269.622 341.037ZM73.646 337.941C73.6998 340.5 71.6403 342.604 69.0808 342.604C66.5212 342.604 64.4615 340.5 64.5157 337.941L69.0918 121.686L73.646 337.941ZM1459.54 337.584C1459.6 340.147 1457.54 342.258 1454.98 342.258C1452.41 342.258 1450.35 340.147 1450.41 337.584L1454.98 142.757L1459.54 337.584ZM138.985 333.807C139.036 336.373 136.969 338.48 134.402 338.48C131.835 338.48 129.769 336.373 129.819 333.807L134.402 100.292L138.985 333.807ZM207.275 333.806C207.321 336.374 205.252 338.48 202.684 338.48C200.115 338.48 198.046 336.374 198.092 333.806L202.684 77.3545L207.275 333.806ZM1525.63 311.424C1525.71 313.982 1523.65 316.097 1521.09 316.097C1518.54 316.097 1516.48 313.982 1516.56 311.424L1521.09 157.934L1525.63 311.424ZM1591.71 287.429C1591.81 289.98 1589.76 292.101 1587.21 292.101C1584.66 292.101 1582.61 289.981 1582.71 287.429L1587.21 166.224L1591.71 287.429ZM1657.77 266.244C1657.88 268.788 1655.85 270.914 1653.3 270.914C1650.76 270.914 1648.73 268.788 1648.84 266.244L1653.3 167.583L1657.77 266.244ZM1722.61 250.217C1722.74 252.756 1720.72 254.886 1718.18 254.886C1715.63 254.886 1713.61 252.756 1713.74 250.217L1718.18 163.414L1722.61 250.217ZM1790.11 237.849C1790.24 240.388 1788.22 242.519 1785.68 242.519C1783.13 242.519 1781.11 240.388 1781.24 237.849L1785.68 151.555L1790.11 237.849ZM1919.73 237.846C1919.82 240.401 1917.77 242.519 1915.21 242.519C1912.66 242.519 1910.61 240.401 1910.69 237.846L1915.21 102.019L1919.73 237.846ZM1857.63 233.692C1857.73 236.232 1855.7 238.351 1853.16 238.351C1850.62 238.351 1848.59 236.231 1848.7 233.691L1853.17 129.953L1857.63 233.692Z" fill="url(%23paint0_linear_84_1566)"/><path d="M930.744 464.266C930.77 466.84 928.691 468.94 926.117 468.94C923.543 468.94 921.464 466.84 921.49 464.266L926.117 14.209L930.744 464.266ZM996.859 463.805C996.886 466.379 994.807 468.479 992.233 468.479C989.66 468.479 987.581 466.379 987.608 463.805L992.233 24.25L996.859 463.805ZM1062.95 458.589C1062.98 461.156 1060.91 463.252 1058.34 463.252C1055.77 463.252 1053.7 461.156 1053.73 458.589L1058.33 37.1006L1062.95 458.589ZM864.628 458.543C864.654 461.11 862.58 463.206 860.012 463.206C857.444 463.206 855.37 461.111 855.396 458.543L860.001 6.86328L864.628 458.543ZM798.534 448.076C798.56 450.65 796.481 452.751 793.907 452.751C791.333 452.751 789.254 450.65 789.281 448.076L793.907 0L798.534 448.076ZM1129.06 447.892C1129.09 450.465 1127.02 452.566 1124.44 452.566C1121.87 452.566 1119.79 450.465 1119.82 447.892L1124.44 52.7832L1129.06 447.892ZM732.416 434.927C732.443 437.501 730.365 439.602 727.791 439.602C725.217 439.602 723.139 437.501 723.166 434.927L727.791 0L732.416 434.927ZM1195.17 431.795C1195.21 434.367 1193.13 436.47 1190.56 436.47C1187.99 436.47 1185.91 434.367 1185.94 431.795L1190.56 69.2949L1195.17 431.795ZM666.299 424.667C666.327 427.234 664.254 429.33 661.686 429.33C659.119 429.33 657.046 427.234 657.074 424.667L661.675 0.645508L666.299 424.667ZM1261.26 411.633C1261.3 414.197 1259.23 416.296 1256.66 416.296C1254.1 416.296 1252.03 414.198 1252.07 411.633L1256.65 88.708L1261.26 411.633ZM600.204 409.18C600.233 411.753 598.155 413.854 595.582 413.854C593.008 413.854 590.93 411.753 590.96 409.18L595.582 3.7998L600.204 409.18ZM534.084 391.701C534.115 394.274 532.038 396.376 529.465 396.376C526.892 396.376 524.815 394.274 524.847 391.701L529.465 10.1328L534.084 391.701ZM1327.37 387.856C1327.41 390.425 1325.34 392.53 1322.77 392.53C1320.2 392.53 1318.13 390.425 1318.17 387.856L1322.77 108.56L1327.37 387.856ZM467.963 377.93C467.996 380.502 465.921 382.604 463.349 382.604C460.777 382.604 458.701 380.502 458.734 377.93L463.349 19.0449L467.963 377.93ZM401.866 363.491C401.902 366.062 399.827 368.165 397.256 368.165C394.685 368.165 392.61 366.062 392.645 363.491L397.256 28.9248L401.866 363.491ZM1393.47 361.995C1393.52 364.561 1391.45 366.669 1388.89 366.669C1386.32 366.669 1384.25 364.561 1384.3 361.995L1388.89 128.571L1393.47 361.995ZM335.745 350.918C335.783 353.488 333.71 355.592 331.14 355.592C328.569 355.592 326.496 353.488 326.535 350.918L331.14 42.374L335.745 350.918ZM9.12753 344.033C9.1888 346.595 7.128 348.706 4.56445 348.706C2.0009 348.706 -0.0598919 346.595 0.00137776 344.033L4.56445 153.166L9.12753 344.033ZM269.622 341.037C269.664 343.607 267.593 345.712 265.023 345.712C262.453 345.712 260.382 343.607 260.424 341.037L265.023 58.54L269.622 341.037ZM73.646 337.941C73.6998 340.5 71.6403 342.604 69.0808 342.604C66.5212 342.604 64.4615 340.5 64.5157 337.941L69.0918 121.686L73.646 337.941ZM1459.54 337.584C1459.6 340.147 1457.54 342.258 1454.98 342.258C1452.41 342.258 1450.35 340.147 1450.41 337.584L1454.98 142.757L1459.54 337.584ZM138.985 333.807C139.036 336.373 136.969 338.48 134.402 338.48C131.835 338.48 129.769 336.373 129.819 333.807L134.402 100.292L138.985 333.807ZM207.275 333.806C207.321 336.374 205.252 338.48 202.684 338.48C200.115 338.48 198.046 336.374 198.092 333.806L202.684 77.3545L207.275 333.806ZM1525.63 311.424C1525.71 313.982 1523.65 316.097 1521.09 316.097C1518.54 316.097 1516.48 313.982 1516.56 311.424L1521.09 157.934L1525.63 311.424ZM1591.71 287.429C1591.81 289.98 1589.76 292.101 1587.21 292.101C1584.66 292.101 1582.61 289.981 1582.71 287.429L1587.21 166.224L1591.71 287.429ZM1657.77 266.244C1657.88 268.788 1655.85 270.914 1653.3 270.914C1650.76 270.914 1648.73 268.788 1648.84 266.244L1653.3 167.583L1657.77 266.244ZM1722.61 250.217C1722.74 252.756 1720.72 254.886 1718.18 254.886C1715.63 254.886 1713.61 252.756 1713.74 250.217L1718.18 163.414L1722.61 250.217ZM1790.11 237.849C1790.24 240.388 1788.22 242.519 1785.68 242.519C1783.13 242.519 1781.11 240.388 1781.24 237.849L1785.68 151.555L1790.11 237.849ZM1919.73 237.846C1919.82 240.401 1917.77 242.519 1915.21 242.519C1912.66 242.519 1910.61 240.401 1910.69 237.846L1915.21 102.019L1919.73 237.846ZM1857.63 233.692C1857.73 236.232 1855.7 238.351 1853.16 238.351C1850.62 238.351 1848.59 236.231 1848.7 233.691L1853.17 129.953L1857.63 233.692Z" fill="url(%23paint1_linear_84_1566)"/></g><defs><linearGradient id="paint0_linear_84_1566" x1="0" y1="234.47" x2="1919.74" y2="234.47" gradientUnits="userSpaceOnUse"><stop stop-color="%2346CFF2" stop-opacity="0.592157"/><stop offset="1" stop-color="%233C9497"/></linearGradient><linearGradient id="paint1_linear_84_1566" x1="1919.74" y1="234.47" x2="-2.09786e-05" y2="234.47" gradientUnits="userSpaceOnUse"><stop stop-color="%23199478"/><stop offset="1" stop-color="%2341A790"/></linearGradient></defs></svg>');
}

.contact-label {
    font-weight: 400;
    font-size: 20px;
    color: #000;
}
section.contact-info {
    background: #fafafa;
    padding: 180px 0 110px;
	position: relative;
    top: 444px;
}
.contact-title {
    font-weight: 600;
    font-size: 48px;
    line-height: 59px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 114px;
}

.btn-contact-main {
    width: 250px;
    height: 60px;
    background: linear-gradient(270deg, #199478 0%, #41A790 100%);
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 20px;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.social-tiktok {
  z-index: 2;
  position: relative;
}

.social-instagram {
  z-index: 2;
  position: relative;
}

.feature-box-1 {
    width: 270px;
    height: 350px;
    background: #F4F4F4;
    border-radius: 10px;
    padding: 33px;
    text-align: left;
    z-index: 2;
}

.feature-box-2 {
    width: 270px;
    height: 350px;
    background: #F4F4F4;
    border-radius: 10px;
    padding: 33px;
    text-align: left;
    z-index: 2;
}

.feature-box-1 svg,
.feature-box-2 svg {
    display: block;
    margin: 0 0 80px;
}

.feature-box-1 h3,
.feature-box-2 h3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #000;
    margin-bottom: 15px;
}

.feature-box-1 p,
.feature-box-2 p {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #000;
}

/* ========== FOOTER ========== */
.footer-bg {;
    width: 100vw;
    background: #000;
	padding: 46px 0;
    top: 444px;
    position: relative;
}

.footer-logo {
    font-weight: 700;
    font-size: 20px;
    color: #FFF;
}
.footer-logo{
   margin: 30px 0;
}
.footer-bg .container{
    gap: 120px;
}
.footer-social{
   gap: 47px;
   margin-bottom: 47px;
}
.footer-label {
    font-weight: 400;
    font-size: 16px;
    color: #CCC;
}
.btn-demo-footer-wrp{
    gap: 16px;
}
.footer-copy {
    font-weight: 400;
    font-size: 12px;
    font-style: italic;
    color: #CCC;
	margin-bottom: 45px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

.footer-links a {
    font-weight: 400;
    font-size: 16px;
    color: #FFF;
    text-decoration: none;
}

.footer-payment {
    width: 239px;
    height: 138px;
    border: 1px dashed #565656;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.footer-payment p {
    font-weight: 400;
    font-size: 20px;
    color: #FFF;
    margin-bottom: 20px;
    text-align: center;
}

.payment-icons {
    display: flex;
    gap: 10px;
}

.pay-card {
    width: 85px;
    height: 34px;
    background: #D9D9D9;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social-1 {
 
}

.footer-social-2 {
    
}

.footer-social-3 {
 
}
/* ====== БАЗА ====== */
.mobile-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#fff;
  position:sticky; top:0; z-index:50; border-bottom:1px solid #e9ecef;
}
.mobile-logo-container svg{ height:28px; width:auto; display:block; }
.mobile-menu-btn{
  background:transparent; border:0; font-size:24px; line-height:1; padding:6px 8px; cursor:pointer;
}

/* ====== FULLSCREEN MENU ====== */
.mobile-menu{
  position:fixed; inset:0; z-index:100;
  display:none;
}
.mobile-menu.active{ display:block; }
.mobile-menu-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(2px);
}
.mobile-menu-content{
  position:absolute; left: 50%;
    top: 0;
    transform: translate(-50%, 15%);
  width:100%; 
  background:#041F1C; color:#fff; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:auto;
}
.mobile-menu-btn{
  background:transparent;border:0;padding:10px;cursor:pointer;
  display:inline-grid;place-items:center;
}
.burger{position:relative;width:26px;height:18px;}
.burger span{
  position:absolute;left:0;width:100%;height:2px;background:#0C6F68;border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.burger span:nth-child(1){top:0;}
.burger span:nth-child(2){top:8px;}
.burger span:nth-child(3){top:16px;}

/* состояние «крестик» — класс у кнопки */
.mobile-menu-btn.is-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
.mobile-menu-btn.is-open .burger span:nth-child(2){ opacity:0; }
.mobile-menu-btn.is-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* верхняя панель */
.mm-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:#fff; border-radius:16px 16px 0 0;
  position:sticky; top:0; z-index:2;
}
.mm-mini-logo .mini-brand{
  font-size:11px; letter-spacing:.08em; font-weight:800; color:#199478; text-transform:uppercase;
}
.mobile-menu-close{ background:transparent; border:0; padding:2px; cursor:pointer; }

/* хиро */
.mm-hero{ padding:18px 20px 10px; }
.mm-suptitle{ color:#b8c3bf; font-size:12px; text-align:center; margin:4px 0 8px; }
.mm-title{ text-align:center; font-size:20px; line-height:1.25; letter-spacing:.03em; margin:0; font-weight:800; }
.mm-subbrand{ text-align:center; letter-spacing:.35em; font-size:11px; margin:4px 0 26px; color:#CFE7E1; }
.mm-note{ text-align:center; font-size:11px; color:#90a39e; margin:0 0 63px; }
.mm-sep{
  border:0; height:1px; background:hsl(0deg 0% 100% / 20%);
  margin:10px 0 4px;
}

/* навигация */
.mm-nav{ display:grid; gap:18px; padding:10px 20px 4px; }
.mm-nav a{
  display:block; text-align:center; text-decoration:none; color:#E7F6F2;
  font-size:18px; padding:15px 0;
}
.mm-nav a:last-child{ border-bottom:0; }

/* кнопки */
.mm-actions{ padding:18px 20px 8px; display:grid; gap:12px; }
.mm-btn{
  width:100%; border-radius:999px; padding:12px 16px;
  font-weight:700; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.mm-btn-outline{
  color:#fff; background:transparent; border:1.5px solid rgba(255,255,255,.22);
}
.mm-btn-primary{
  color:#fff; border:0;
  background:linear-gradient(90deg,#199478,#41A790);
  box-shadow:0 6px 14px rgba(25,148,120,.25);
}
.mm-btn:active{ transform:translateY(1px); }
.play-ico{ display:inline-flex; }

/* соцсети */
.mm-socials{
  display:flex; gap:18px; justify-content:center; align-items:center;
  padding:12px 0 18px;
}
.mm-socials a{ display:inline-flex; }
body.mm-lock{ overflow:hidden; }

/* только на мобилках показываем всё это */
@media (min-width: 768px){
  .mobile-header{ display:none; }
  .mobile-menu{ display:none !important; }
}

.btn-demo-footer {
    width: 216px;
    height: 50px;
    background: transparent;
    border: 1px solid #FFF;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}

.btn-buy-footer {
    width: 135px;
    height: 50px;
    left: 50%;
    top: 2770px;
    background: linear-gradient(270deg, #199478 0%, #41A790 100%);
    border: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    z-index: 2;
}

.footer-bottom {
    width: 100vw;
    background: #212121;
    font-weight: 400;
    font-size: 16px;
    color: #CCC;
    display: flex;
    align-items: center;
    justify-content: center;
	padding: 20px 0;
}

/* ========== MODAL ========== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-box {
    position: relative;
    width: 450px;
    background: #FFF;
    border-radius: 25px;
    padding: 40px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #AAA;
    cursor: pointer;
}

.modal-logo {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
}

.modal-label {
    font-size: 16px;
    text-align: center;
    margin-bottom: 5px;
}

.modal-copy {
    font-size: 12px;
    font-style: italic;
    text-align: center;
    margin-bottom: 30px;
}

.modal-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.modal-price-text {
    font-size: 16px;
    color: #ACC0BB;
	display: block;
}

.modal-price-old {
    font-size: 24px;
    font-weight: 600;
    color: #ACC0BB;
    text-decoration: line-through;
}

.modal-price-new {
    font-size: 50px;
    font-weight: 600;
    color: #199478;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.modal-form input {
    height: 65px;
    background: linear-gradient(270deg, #E8E8E8 0%, #F6F6F6 100%);
    border: none;
    border-radius: 10px;
    padding: 0 20px 0 60px;
    font-size: 16px;
    outline: none;
    width: 100%;
}
.control-label{
   position: relative;
}
.control-label svg {
    position: absolute;
    left: 16px;
    top: 25%;
}
.modal-form input::placeholder {
    color: #AAA;
}

.modal-form button {
    width: 203px;
    height: 52px;
    background: linear-gradient(270deg, #199478 0%, #41A790 100%);
    border: none;
    border-radius: 100px;
    color: #FFF;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    margin: 0 auto;
}

.modal-info {
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

.modal-box hr {
    border: none;
    border-top: 1px solid #DDD;
    margin: 20px 0;
}
.modal-privacy a{
   color: #000;
}
.modal-social {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 20px;
}
/* базовая коробка модалки: ограничим высоту и включим внутренний скролл */
.modal-box{
  overflow-y: auto;
  overscroll-behavior: contain; /* чтобы колесо не скроллило фон */
  scrollbar-gutter: stable;      /* без «подпрыгивания» контента */
	padding-right: 20px;
}
.modal-box::-webkit-scrollbar-track {
  background: transparent;
  margin-right: 10px; /* ← эффект «отступа» */
}
/* Firefox */
.modal-box{
  scrollbar-width: thin;                     /* auto | thin | none */
  scrollbar-color: #199478 transparent;      /* thumb | track */
}

/* WebKit (Chrome / Edge / Safari / Opera) */
.modal-box::-webkit-scrollbar{
  width: 10px;               /* толщина вертикального скролла */
}
.modal-box::-webkit-scrollbar-track{
  background: transparent;   /* дорожка прозрачно */
}
.modal-box::-webkit-scrollbar-thumb{
  background: #199478;       /* «ползунок» */
  border-radius: 10px;
  border: 2px solid rgba(25,148,120,0.25); /* мятный обвод, даёт «внутреннюю тень» */
}
.modal-box::-webkit-scrollbar-thumb:hover{
  background: #16a085;       /* чуть светлее на hover */
}
.modal-box::-webkit-scrollbar-corner{
  background: transparent;
}

/* необязательное — скрыть горизонтальный скролл, если вдруг появляется */
.modal-box{ overflow-x: hidden; }

/* чтобы фон страницы не прокручивался, пока открыта модалка */
body.modal-open{
  overflow: hidden;
}

.modal-privacy {
    font-size: 12px;
    text-align: center;
}

.modal-success {
    text-align: center;
}

.success-check {
    margin: 40px 0;
}

.modal-success h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.modal-success p {
    font-size: 16px;
    margin-bottom: 30px;
}

.btn-home {
    width: 353px;
    height: 60px;
    background: linear-gradient(270deg, #199478 0%, #41A790 100%);
    border: none;
    border-radius: 100px;
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
}

/* =================================
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ================================= */

/* Планшеты и маленькие экраны */
@media (max-width: 1920px) {
    body {
        transform-origin: top center;
        width: 100%;
        max-width: 1920px;
    }
}

/* Планшеты */


/* ============ МОБИЛЬНАЯ ВЕРСИЯ ============ */
@media (max-width: 768px) {

.hero-logo-white svg {
   width: 100% !important;
   height: 100%;
}
    /* ======== МОДАЛЬНОЕ ОКНО НА ВЕСЬ ЭКРАН ======== */
    .modal-overlay {
        padding: 0 !important;
    }
    
    .modal-box {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 60px 30px 30px 30px !important;
        overflow-y: auto !important;
    }
    
    .modal-close {
        top: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 50% !important;
    }
    
    .modal-logo {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }
    
    .modal-label {
        font-size: 14px !important;
    }
    
    .modal-copy {
        font-size: 12px !important;
    }
    
    .modal-price {
        margin: 20px 0 !important;
    }
    
    .modal-price-text {
        font-size: 14px !important;
    }
    
    .modal-price-old {
        font-size: 14px !important;
    }
    
    .modal-price-new {
        font-size: 24px !important;
    }
    
    .modal-form input {
        height: 50px !important;
        font-size: 16px !important;
    }
    
    .modal-form button {
        height: 50px !important;
        font-size: 16px !important;
    }
    
    .modal-info {
        font-size: 12px !important;
    }
    
    .modal-social {
        margin: 20px 0 !important;
    }
    
    .modal-social svg {
        width: 35px !important;
        height: 35px !important;
    }
    
    .modal-privacy {
        font-size: 11px !important;
    }

    /* Сброс и базовые настройки */
    html {
        width: 100%;
    }
    
    body {
        width: 100%;
        height: auto !important;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        background: #FFFFFF;
        position: static !important;
    }
    
    body::before {
        display: none !important;
    }
    
    /* ======== МОБИЛЬНЫЙ HEADER ======== */
    .mobile-header {
        position: fixed;
        width: 100%;
        height: 80px;
        left: 0;
        top: 0;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        z-index: 1000;
        box-sizing: border-box;
    }

    .mobile-logo-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-logo-small {
        font-family: 'Montserrat';
        font-weight: 900;
        font-size: 16px;
        line-height: 20px;
        color: #2C8A7B;
        text-transform: uppercase;
        margin: 0 0 2px 0;
    }

    .mobile-logo-studio {
        font-family: 'Montserrat';
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #000000;
        text-transform: uppercase;
        margin: 0;
    }

    .mobile-menu-btn {
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        color: #2C8A7B;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.3s ease;
    }

    .mobile-menu-btn:hover {
        color: #199478;
    }

    /* ======== МОБИЛЬНОЕ МЕНЮ ======== */
 

    .mobile-menu.active {
        display: block;
        opacity: 1;
    }

    .mobile-menu-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }



    .mobile-menu-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 50%;
        color: #FFFFFF;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease;
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .mobile-menu-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    .mobile-menu-nav a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    .mobile-menu-nav a:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(5px);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* ======== МОБИЛЬНАЯ HERO СЕКЦИЯ ======== */
    .mobile-hero-bg {
        position: absolute;
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        background: linear-gradient(180deg, rgba(0, 52, 39, 0) 70.86%, rgba(0, 52, 39, 0.8) 85%, #003427 100%), 
                    url('images/82e949670fc4a8ddf933fd1820e2683260e7c675.jpg');
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    .mobile-hero-card {
        position: absolute;
        width: calc(100% - 60px);
        height: calc(100vh - 160px);
        left: 30px;
        top: 110px;
        background: rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(12.5px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 25px;
        padding: 34px 22px;
        box-sizing: border-box;
        z-index: 10;
    }

    .mobile-hero-logo {
        position: absolute;
        width: 270px;
        height: 180px;
        left: calc(50% - 270px/2);
        top: 34px;
        font-family: 'Montserrat';
        font-weight: 900;
        font-size: 60px;
        line-height: 60px;
        text-align: center;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    .mobile-hero-title {
        position: absolute;
        width: 270px;
        height: 72px;
        left: calc(50% - 270px/2);
        top: 234px;
        font-family: 'Montserrat';
        font-weight: 600;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        color: #FFFFFF;
    }

    .mobile-hero-description {
        position: absolute;
        width: 270px;
        height: 180px;
        left: 52px;
        top: 326px;
        font-family: 'Montserrat';
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
    }

    .mobile-btn-about {
        position: absolute;
        width: 286px;
        height: 50px;
        left: 52px;
        top: 526px;
        background: #FFFFFF;
        border: none;
        border-radius: 100px;
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 16px;
        color: #2C8A7B;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 20px;
        gap: 10px;
    }

    .mobile-btn-demo {
        position: absolute;
        width: 286px;
        height: 50px;
        left: 52px;
        top: 586px;
        background: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 100px;
        font-family: 'Montserrat';
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 20px;
        gap: 10px;
    }

    /* ======== СКРЫВАЕМ ВСЕ ДЕСКТОПНЫЕ ЭЛЕМЕНТЫ ======== */
    
    

    /* ======== МОБИЛЬНЫЙ КАТАЛОГ ПЕСЕН ======== */
    .mobile-catalog {
        position: absolute;
        width: 100%;
        top: 100vh;
        min-height: 120vh;
        background: #003427;
        padding: 50px 20px 40px 20px;
        text-align: center;
        z-index: 5;
        box-sizing: border-box;
    }

    .mobile-catalog-title {
        font-weight: 700;
        font-size: 24px;
        color: #FFFFFF;
        text-transform: uppercase;
        margin: 0 0 10px 0;
    }

    .mobile-catalog-desc {
        font-size: 14px;
        color: #ACC0BB;
        margin: 0 0 30px 0;
        line-height: 1.5;
    }

    .mobile-playlist {
        margin: 0 0 30px 0;
    }

    .mobile-track {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mobile-track-info {
        flex: 1;
        text-align: left;
    }

    .mobile-track-category {
        font-size: 12px;
        color: #ACC0BB;
        margin: 0 0 5px 0;
    }

    .mobile-track-name {
        font-size: 16px;
        font-weight: 600;
        color: #FFFFFF;
        margin: 0;
    }

    .mobile-track-controls {
        display: flex;
        gap: 10px;
    }

    .mobile-play-btn {
        background: transparent;
        border: none;
        color: #FFFFFF;
        cursor: pointer;
        padding: 8px;
        font-size: 16px;
    }

    .mobile-price-section {
        background: #0B5A48;
        border-radius: 20px;
        padding: 30px 20px;
        text-align: center;
    }

    .mobile-price-label {
        font-size: 14px;
        color: #ACC0BB;
        margin: 0 0 10px 0;
    }

    .mobile-price-old-mobile {
        font-size: 18px;
        color: #ACC0BB;
        text-decoration: line-through;
        margin: 0 0 5px 0;
    }

    .mobile-price-new-mobile {
        font-size: 40px;
        font-weight: 700;
        color: #FFFFFF;
        margin: 0 0 20px 0;
    }

    .mobile-buy-button-mobile {
        width: 100%;
        height: 55px;
        background: #FFFFFF;
        border: none;
        border-radius: 30px;
        font-weight: 600;
        font-size: 16px;
        color: #003427;
        cursor: pointer;
        margin: 0 0 15px 0;
    }

    .mobile-contact-button {
        width: 100%;
        height: 55px;
        background: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 30px;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
        margin: 0;
    }

    /* ======== МОБИЛЬНЫЕ КОНТАКТЫ ======== */
    .mobile-contact {
        position: absolute;
        width: 100%;
        top: 232vh;
        min-height: 80vh;
        background: #FAFAFA;
        padding: 50px 20px 80px 20px;
        text-align: center;
        z-index: 5;
        box-sizing: border-box;
    }

    .mobile-contact-top {
        font-size: 14px;
        color: #000000;
        margin: 0 10 20px 20px;
        text-align: center;
    }

    .mobile-contact-label {
        font-size: 18px;
        color: #000000;
        margin: 0 0 40px 0;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
    }

    .mobile-feature-box {
        background: #F4F4F4;
        border-radius: 15px;
        padding: 20px;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mobile-feature-icon {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .mobile-feature-icon svg {
        width: 72px;
        height: 72px;
    }

    .mobile-feature-content {
        flex: 1;
    }

    .mobile-feature-title {
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        margin: 0 0 5px 0;
    }

    .mobile-feature-desc {
        font-size: 14px;
        color: #666666;
        line-height: 1.4;
        margin: 0;
    }

    .mobile-contact-main-btn {
        width: 100%;
        height: 60px;
        background: linear-gradient(90deg, #199478 0%, #41A790 100%);
        border: none;
        border-radius: 100px;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
        margin: 30px 0 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .mobile-contact-main-btn:hover {
        transform: scale(1.02);
        box-shadow: 0 5px 15px rgba(25, 148, 120, 0.3);
    }
    
    .mobile-contact-main-btn svg {
        width: 30px;
        height: 30px;
    }

    .mobile-contact-social {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 0;
    }
    
    .mobile-contact-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    
    .mobile-contact-social a:hover {
        transform: scale(1.1);
    }

    .mobile-contact-social svg {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    /* ======== МОБИЛЬНЫЙ FOOTER ======== */
    .mobile-footer {
        position: absolute;
        width: 100%;
        top: 300vh;
        min-height: calc(80vh - 60px);
        background: #000000;
        padding: 40px 20px 10px 20px;
        text-align: center;
        z-index: 5;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }

    .mobile-footer-album {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin: 0;
    }

    .mobile-footer-title {
        font-weight: 700;
        font-size: 32px;
        color: #FFFFFF;
        margin: 0;
        text-transform: uppercase;
    }

    .mobile-footer-studio {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin: 0;
    }

    .mobile-footer-copyright {
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        margin: 0;
    }

    .mobile-footer-divider {
        width: 100%;
        height: 1px;
        background: #FFFFFF;
        opacity: 0.3;
    }

    .mobile-footer-nav {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0;
    }

    .mobile-footer-nav a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
    }

    .mobile-footer-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
    }

    .mobile-footer-demo-btn {
        width: 100%;
        height: 50px;
        background: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 25px;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .mobile-footer-buy-btn {
        width: 100%;
        height: 50px;
        background: #199478;
        border: none;
        border-radius: 25px;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-footer-social {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 20px 0;
    }

    .mobile-footer-payment {
        width: 100%;
        max-width: 300px;
        border: 1px dashed #FFFFFF;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
    }

    .mobile-footer-payment-label {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-bottom: 15px;
    }

    .mobile-footer-payment-cards {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .mobile-footer-visa,
    .mobile-footer-mastercard {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        padding: 8px 12px;
        border-radius: 5px;
    }

    .mobile-footer-bottom {
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        margin-top: 20px;
        background: #333333;
        padding: 15px 20px;
        width: 100vw;
        box-sizing: border-box;
    }
}
button:hover{
  opacity: 0.8;
}
/* ========== ДЕСКТОПНАЯ ВЕРСИЯ ========== */
@media (min-width: 769px) {
    /* Скрываем мобильную версию на десктопе */
    .mobile-header,
    .mobile-menu,
    .mobile-hero-bg,
    .mobile-hero-card,
    .mobile-hero-logo,
    .mobile-hero-title,
    .mobile-hero-description,
    .mobile-btn-about,
    .mobile-btn-demo,
    .mobile-catalog,
    .mobile-contact,
    .mobile-footer {
        display: none !important;
    }
    
    .header {
        width: 100% !important;
        max-width: 1920px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .header-container {
        max-width: 1140px !important;
    }
    
    /* Скрыть мобильные элементы */
    .menu-button {
        display: none !important;
    }
}
@media (max-width: 768px) {
 .hero-card-bg {
    gap: 0;
}
.price-card-left{
   margin-bottom: 20px;
}
.feature-box-1 svg, .feature-box-2 svg {
   margin: 0 40px 0 0;
    
}
.btn-contact-main {
    font-size: 16px;
}
.btn-demo-footer {
    width: 180px;
}
.footer-logo svg{
   width: 90%;
}
html, body {
    overflow-x: hidden;
}
.hero-card-bg {
    top: 37px;
    gap: 50px;
    margin-bottom: 291px;
}
section.album-card {
    padding: 50px 0;
    top: 91px;
}
.btn-demo-footer-wrp {
    border-bottom: 1px solid hsl(0deg 0% 100% / 20%);
    padding-bottom: 20px;
}
.footer-links {
    padding: 20px 0;
    border-bottom: 1px solid hsl(0deg 0% 100% / 20%);
    margin-bottom: 20px;
}
.footer-bg {
    padding: 30px;
    top: 180px;
}
.footer-bg .container {
    gap: 0;
    flex-direction: column;
}
.feature-box-1, .feature-box-2{
    width: 100%;
    display: flex;
    height: auto;
}
section.contact-info {
    padding: 80px 20px 11px;
    top: 90px;
}
.track-progress {
    width: 387px;
}
.price-card {
    margin: 50px 0;
}
.price-card .price-container,
.contact-info .container,
.contact-left{
   flex-direction: column;
}
section.album-card {
    padding: 50px 20px;
}
.album-title {
    font-size: 24px;
    line-height: 27px;
    margin-bottom: 65px;
}
.price-width {
    max-width: 90%;
    width: 100%;
    padding-bottom: 20px;
}
.hero-card-bg {
    margin: 75px 20px 30px;
}
.album-d-flex {
    flex-direction: column;
}
    .hero-card-bg {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
.album-card .container {
    gap: 0;
    flex-direction: column;
    text-align: center;
}
.header {
    display: none;
}
.btn-about-album {
    width: 216px;
}
.track {
    text-align: left;
}
}