@media (max-width: 1080px) {
    .main-nav { display:none; position:absolute; left:16px; right:16px; top:90px; background:white; border:1px solid var(--line); border-radius:20px; padding:12px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
    .main-nav.open { display:flex; }
    .nav-toggle { display:block; margin-left:auto; }
    .header-actions .btn-soft { display:none; }
    .hero-grid { grid-template-columns:1fr; }
    .music-visual { min-height:380px; }
    .cards,.grid-3 { grid-template-columns:repeat(2,1fr); }
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
    .announcement { display:none; }
    .header-main { min-height:72px; }
    .main-nav { top:76px; }
    .header-actions .btn { padding:9px 12px; font-size:.88rem; }
    .hero { padding-top:42px; }
    .music-card { inset:10px; }
    .cards,.grid-2,.grid-3,.grid-4,.form-grid { grid-template-columns:1fr; }
    .form-field.full { grid-column:auto; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; }
    .section { padding:52px 0; }
}
@media (max-width: 460px) {
    .container { width:min(100% - 22px,1180px); }
    .brand strong { font-size:.94rem; }
    .brand-mark { width:42px;height:42px; }
    .hero h1 { font-size:2.55rem; }
}

@media (max-width: 1195px) { .responsive-gap-1 { gap: 20px; } }

@media (max-width: 1190px) { .responsive-gap-2 { gap: 20px; } }

@media (max-width: 1185px) { .responsive-gap-3 { gap: 20px; } }

@media (max-width: 1180px) { .responsive-gap-4 { gap: 20px; } }

@media (max-width: 1175px) { .responsive-gap-5 { gap: 20px; } }

@media (max-width: 1170px) { .responsive-gap-6 { gap: 20px; } }

@media (max-width: 1165px) { .responsive-gap-7 { gap: 20px; } }

@media (max-width: 1160px) { .responsive-gap-8 { gap: 19px; } }

@media (max-width: 1155px) { .responsive-gap-9 { gap: 19px; } }

@media (max-width: 1150px) { .responsive-gap-10 { gap: 19px; } }

@media (max-width: 1145px) { .responsive-gap-11 { gap: 19px; } }

@media (max-width: 1140px) { .responsive-gap-12 { gap: 19px; } }

@media (max-width: 1135px) { .responsive-gap-13 { gap: 19px; } }

@media (max-width: 1130px) { .responsive-gap-14 { gap: 19px; } }

@media (max-width: 1125px) { .responsive-gap-15 { gap: 19px; } }

@media (max-width: 1120px) { .responsive-gap-16 { gap: 18px; } }

@media (max-width: 1115px) { .responsive-gap-17 { gap: 18px; } }

@media (max-width: 1110px) { .responsive-gap-18 { gap: 18px; } }

@media (max-width: 1105px) { .responsive-gap-19 { gap: 18px; } }

@media (max-width: 1100px) { .responsive-gap-20 { gap: 18px; } }

@media (max-width: 1095px) { .responsive-gap-21 { gap: 18px; } }

@media (max-width: 1090px) { .responsive-gap-22 { gap: 18px; } }

@media (max-width: 1085px) { .responsive-gap-23 { gap: 18px; } }

@media (max-width: 1080px) { .responsive-gap-24 { gap: 17px; } }

@media (max-width: 1075px) { .responsive-gap-25 { gap: 17px; } }

@media (max-width: 1070px) { .responsive-gap-26 { gap: 17px; } }

@media (max-width: 1065px) { .responsive-gap-27 { gap: 17px; } }

@media (max-width: 1060px) { .responsive-gap-28 { gap: 17px; } }

@media (max-width: 1055px) { .responsive-gap-29 { gap: 17px; } }

@media (max-width: 1050px) { .responsive-gap-30 { gap: 17px; } }

@media (max-width: 1045px) { .responsive-gap-31 { gap: 17px; } }

@media (max-width: 1040px) { .responsive-gap-32 { gap: 16px; } }

@media (max-width: 1035px) { .responsive-gap-33 { gap: 16px; } }

@media (max-width: 1030px) { .responsive-gap-34 { gap: 16px; } }

@media (max-width: 1025px) { .responsive-gap-35 { gap: 16px; } }

@media (max-width: 1020px) { .responsive-gap-36 { gap: 16px; } }

@media (max-width: 1015px) { .responsive-gap-37 { gap: 16px; } }

@media (max-width: 1010px) { .responsive-gap-38 { gap: 16px; } }

@media (max-width: 1005px) { .responsive-gap-39 { gap: 16px; } }

@media (max-width: 1000px) { .responsive-gap-40 { gap: 15px; } }

@media (max-width: 995px) { .responsive-gap-41 { gap: 15px; } }

@media (max-width: 990px) { .responsive-gap-42 { gap: 15px; } }

@media (max-width: 985px) { .responsive-gap-43 { gap: 15px; } }

@media (max-width: 980px) { .responsive-gap-44 { gap: 15px; } }

@media (max-width: 975px) { .responsive-gap-45 { gap: 15px; } }

@media (max-width: 970px) { .responsive-gap-46 { gap: 15px; } }

@media (max-width: 965px) { .responsive-gap-47 { gap: 15px; } }

@media (max-width: 960px) { .responsive-gap-48 { gap: 14px; } }

@media (max-width: 955px) { .responsive-gap-49 { gap: 14px; } }

@media (max-width: 950px) { .responsive-gap-50 { gap: 14px; } }

@media (max-width: 945px) { .responsive-gap-51 { gap: 14px; } }

@media (max-width: 940px) { .responsive-gap-52 { gap: 14px; } }

@media (max-width: 935px) { .responsive-gap-53 { gap: 14px; } }

@media (max-width: 930px) { .responsive-gap-54 { gap: 14px; } }

@media (max-width: 925px) { .responsive-gap-55 { gap: 14px; } }

@media (max-width: 920px) { .responsive-gap-56 { gap: 13px; } }

@media (max-width: 915px) { .responsive-gap-57 { gap: 13px; } }

@media (max-width: 910px) { .responsive-gap-58 { gap: 13px; } }

@media (max-width: 905px) { .responsive-gap-59 { gap: 13px; } }

@media (max-width: 900px) { .responsive-gap-60 { gap: 13px; } }

@media (max-width: 895px) { .responsive-gap-61 { gap: 13px; } }

@media (max-width: 890px) { .responsive-gap-62 { gap: 13px; } }

@media (max-width: 885px) { .responsive-gap-63 { gap: 13px; } }

@media (max-width: 880px) { .responsive-gap-64 { gap: 12px; } }

@media (max-width: 875px) { .responsive-gap-65 { gap: 12px; } }

@media (max-width: 870px) { .responsive-gap-66 { gap: 12px; } }

@media (max-width: 865px) { .responsive-gap-67 { gap: 12px; } }

@media (max-width: 860px) { .responsive-gap-68 { gap: 12px; } }

@media (max-width: 855px) { .responsive-gap-69 { gap: 12px; } }

@media (max-width: 850px) { .responsive-gap-70 { gap: 12px; } }

@media (max-width: 845px) { .responsive-gap-71 { gap: 12px; } }

@media (max-width: 840px) { .responsive-gap-72 { gap: 11px; } }

@media (max-width: 835px) { .responsive-gap-73 { gap: 11px; } }

@media (max-width: 830px) { .responsive-gap-74 { gap: 11px; } }

@media (max-width: 825px) { .responsive-gap-75 { gap: 11px; } }

@media (max-width: 820px) { .responsive-gap-76 { gap: 11px; } }

@media (max-width: 815px) { .responsive-gap-77 { gap: 11px; } }

@media (max-width: 810px) { .responsive-gap-78 { gap: 11px; } }

@media (max-width: 805px) { .responsive-gap-79 { gap: 11px; } }

@media (max-width: 800px) { .responsive-gap-80 { gap: 10px; } }

@media (max-width: 795px) { .responsive-gap-81 { gap: 10px; } }

@media (max-width: 790px) { .responsive-gap-82 { gap: 10px; } }

@media (max-width: 785px) { .responsive-gap-83 { gap: 10px; } }

@media (max-width: 780px) { .responsive-gap-84 { gap: 10px; } }

@media (max-width: 775px) { .responsive-gap-85 { gap: 10px; } }

@media (max-width: 770px) { .responsive-gap-86 { gap: 10px; } }

@media (max-width: 765px) { .responsive-gap-87 { gap: 10px; } }

@media (max-width: 760px) { .responsive-gap-88 { gap: 9px; } }

@media (max-width: 755px) { .responsive-gap-89 { gap: 9px; } }

@media (max-width: 750px) { .responsive-gap-90 { gap: 9px; } }

@media (max-width: 745px) { .responsive-gap-91 { gap: 9px; } }

@media (max-width: 740px) { .responsive-gap-92 { gap: 9px; } }

@media (max-width: 735px) { .responsive-gap-93 { gap: 9px; } }

@media (max-width: 730px) { .responsive-gap-94 { gap: 9px; } }

@media (max-width: 725px) { .responsive-gap-95 { gap: 9px; } }

@media (max-width: 720px) { .responsive-gap-96 { gap: 8px; } }

@media (max-width: 715px) { .responsive-gap-97 { gap: 8px; } }

@media (max-width: 710px) { .responsive-gap-98 { gap: 8px; } }

@media (max-width: 705px) { .responsive-gap-99 { gap: 8px; } }

@media (max-width: 700px) { .responsive-gap-100 { gap: 8px; } }

@media (max-width: 695px) { .responsive-gap-101 { gap: 8px; } }

@media (max-width: 690px) { .responsive-gap-102 { gap: 8px; } }

@media (max-width: 685px) { .responsive-gap-103 { gap: 8px; } }

@media (max-width: 680px) { .responsive-gap-104 { gap: 7px; } }

@media (max-width: 675px) { .responsive-gap-105 { gap: 7px; } }

@media (max-width: 670px) { .responsive-gap-106 { gap: 7px; } }

@media (max-width: 665px) { .responsive-gap-107 { gap: 7px; } }

@media (max-width: 660px) { .responsive-gap-108 { gap: 7px; } }

@media (max-width: 655px) { .responsive-gap-109 { gap: 7px; } }

@media (max-width: 650px) { .responsive-gap-110 { gap: 7px; } }

@media (max-width: 645px) { .responsive-gap-111 { gap: 7px; } }

@media (max-width: 640px) { .responsive-gap-112 { gap: 6px; } }

@media (max-width: 635px) { .responsive-gap-113 { gap: 6px; } }

@media (max-width: 630px) { .responsive-gap-114 { gap: 6px; } }

@media (max-width: 625px) { .responsive-gap-115 { gap: 6px; } }

@media (max-width: 620px) { .responsive-gap-116 { gap: 6px; } }

@media (max-width: 615px) { .responsive-gap-117 { gap: 6px; } }

@media (max-width: 610px) { .responsive-gap-118 { gap: 6px; } }

@media (max-width: 605px) { .responsive-gap-119 { gap: 6px; } }