.chanson::before { background: #da9b4f; }
.lyric::before { background: #b56cff; }
.kids::before { background: #ffcf36; }
.estrada::before { background: #28d39c; }
.style-grid h3 { font-size: clamp(1.25rem, 2.2vw, 2.3rem); }

@media (max-width: 580px) {
  body { overflow-x: hidden; }
  header { width: calc(100% - 28px); height: 68px; }
  header .brand { font-size: .72rem; gap: 8px; }
  header .brand i { width: 36px; font-size: 1.15rem; }
  .top-cta { padding: 10px 11px; border-radius: 8px; }

  .hero { height: 720px; min-height: 720px; }
  .stage { object-position: 63% center; }
  .shade { background: linear-gradient(90deg,#070709f2 0%,#070709bb 46%,transparent 100%),linear-gradient(0deg,#070709 0%,transparent 42%); }
  .hero-copy { top: auto; bottom: 44px; transform: none; left: 20px; right: 20px; }
  .hero-copy .tag { max-width: 290px; font-size: .6rem; line-height: 1.55; }
  .hero h1 { margin: 15px 0 18px; font-size: clamp(3.05rem,15vw,4rem); line-height: .84; }
  .hero h1 em { -webkit-text-stroke-width: 1px; }
  .hero-copy p { margin: 0; max-width: 330px; font-size: .94rem; line-height: 1.5; }
  .hero .button { width: min(100%,310px); justify-content: space-between; margin-top: 18px; }
  .button span,.button b { padding: 15px 17px; }

  .styles { padding: 74px 16px; }
  .intro { gap: 22px; }
  .intro h2 { font-size: 2.38rem; line-height: .9; }
  .intro h2 i { -webkit-text-stroke-width: 1px; }
  .intro p { margin: 0; font-size: .92rem; }
  .style-grid { margin-top: 34px; gap: 9px; }
  .style-grid article { height: 208px; padding: 16px; border-radius: 10px; }
  .style-grid article::before { width: 150px; top: -55px; right: -58px; }
  .style-grid h3 { font-size: clamp(1rem,5vw,1.35rem); }
  .style-grid p { margin-bottom: 0; font-size: .78rem; line-height: 1.38; }

  .story { width: calc(100% - 32px); padding: 72px 0; gap: 48px; }
  .record { width: 220px!important; border-width: 38px; box-shadow: inset 0 0 0 36px var(--pink),0 28px 60px #000; }
  .story li { padding: 22px 0 22px 43px; }
  .story b { font-size: 1.05rem; }
  .story p { font-size: .86rem; line-height: 1.5; }

  .order { padding: 82px 17px; }
  .order h2 { font-size: 2.32rem; line-height: .9; }
  .order h2 i { -webkit-text-stroke-width: 1px; }
  .order .button { width: 100%; justify-content: space-between; }
  footer { width: calc(100% - 32px); padding-bottom: 100px; }

  .chat-launcher { left: 14px; right: 14px; bottom: 14px; justify-content: center; padding-right: 50px; }
  .chat-launcher > span { position: absolute; left: 9px; }
  .song-chat { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(620px,calc(100dvh - 16px)); border-radius: 20px; }
  .chat-head { height: 68px; padding: 11px 12px; }
  .chat-avatar { width: 40px; }
  .chat-body { padding: 15px; }
  .bot-message,.user-message { max-width: 90%; font-size: .88rem; }
  .quick-replies { gap: 6px; }
  .quick-replies button { padding: 9px 11px; font-size: .78rem; }
  .chat-form { padding: 10px; padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  .chat-form input { font-size: 16px; }
}

.order-page { min-height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; }
.order-page > p { max-width: 720px; }
.order-page #tracks { display: grid; grid-template-columns: repeat(2,minmax(0,360px)); gap: 18px; width: min(100%,760px); margin: 28px auto; }
.site-track { background: #171717; border: 1px solid #383838; border-radius: 18px; padding: 20px; text-align: left; }
.site-track strong { display: block; margin-bottom: 12px; color: #fff; }
.site-track audio { width: 100%; }
.track-save { display: inline-block; margin-top: 12px; color: #ffca45; }
.pay-site { margin: 18px auto; }
.order-page a { color: #ffca45; }
@media (max-width: 680px) { .order-page #tracks { grid-template-columns: 1fr; } .order-page h2 { font-size: 44px; } .site-track { padding: 15px; } }

.seller { width: min(1200px,90vw); margin: auto; padding: 44px 0 72px; border-top: 1px solid var(--line); color: #918d98; font-size: .78rem; line-height: 1.7; }
.seller strong { color: #f4f0e9; }
.seller a, footer nav a { color: #aaa7b0; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 580px) { .seller { width: calc(100% - 32px); } footer { gap: 18px; flex-wrap: wrap; } footer nav { order: 3; width: 100%; } }

@media (max-width: 370px) {
  .top-cta { font-size: .57rem; }
  .hero h1 { font-size: 2.85rem; }
  .style-grid { grid-template-columns: 1fr; }
  .style-grid article { height: 175px; }
}

.chat-done { padding: 6px 0 18px; }
.chat-done .result-intro { font-size: .82rem; margin: 7px 3px 15px; }
.track-card { display: grid; grid-template-columns: 39px 1fr 38px 35px; align-items: center; gap: 9px; padding: 10px; margin: 9px 0; border: 1px solid #37333f; border-radius: 13px; background: #1b1a20; text-align: left; }
.track-icon { width: 39px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: #080809; font-size: 1.2rem; font-weight: 900; }
.track-icon.alt { background: var(--pink); color: white; }
.track-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.track-info strong { font-size: .85rem; }
.track-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #918d98; font-size: .67rem; }
.track-line { height: 3px; overflow: hidden; margin-top: 4px; background: #36323d; border-radius: 3px; }
.track-line i { display: block; width: 0; height: 100%; background: var(--lime); }
.track-line i.playing { animation: demo-progress 20s linear forwards; }
.demo-play,.track-download { width: 35px; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: #302d36; color: white; text-decoration: none; cursor: pointer; }
.track-download.locked { opacity: .42; cursor: not-allowed; }
.demo-hint { margin: 12px 2px 8px; color: #8f8b96; font-size: .68rem; }
.pay-button { display: block; margin-top: 12px; padding: 13px 10px; border-radius: 10px; background: var(--pink); color: white; text-decoration: none; font-weight: 900; }
.chat-done .telegram-button { margin-top: 9px; }
@keyframes demo-progress { from { width: 0; } to { width: 100%; } }

@media (max-width: 580px) {
  .chat-done h3 { margin-top: 4px; }
  .track-card { grid-template-columns: 36px 1fr 35px 32px; gap: 7px; padding: 9px; }
  .track-icon { width: 36px; }
  .demo-play,.track-download { width: 32px; }
}