:root{--m-green-50:rgba(0,169,143,0.06);--m-green-100:rgba(0,169,143,0.12);--m-green-200:rgba(0,169,143,0.2);--m-green-300:#34D4B8;--m-green-400:#34D4B8;--m-green-500:#00A98F;--m-green-600:#00A98F;--m-green-700:#007D69;--m-green-800:#005C4E;--m-green-900:#003D34;--m-bg:#F8F8FC;--m-surface-1:#F0F0F8;--m-surface-2:#E8E8F4;--m-surface-3:#E0E0EC;--m-border:rgba(0,0,0,0.07);--m-border-hover:rgba(0,169,143,0.5);--m-text:#0D0D1A;--m-muted:rgba(0,0,0,0.55);--m-dim:rgba(0,0,0,0.38);--m-indigo:#6366F1;--m-indigo-light:#818CF8;--m-yellow:#FCD34D;--m-yellow-dark:#B45309;--m-radius-sm:8px;--m-radius-md:12px;--m-radius-lg:16px;--m-radius-xl:24px;--m-transition:0.25s cubic-bezier(0.4,0,0.2,1);--m-font-display:"Space Grotesk",sans-serif;--m-font-body:"Be Vietnam Pro",sans-serif}.music-container{max-width:1440px;margin:0 auto;padding:0 32px}@media (max-width:768px){.music-container{padding:0 20px}}.music-section{font-family:var(--m-font-body);padding:80px 0;background:var(--m-bg);color:var(--m-text);position:relative;overflow:hidden}.section-label{display:flex;align-items:center;gap:12px;margin-bottom:10px}.section-line{display:block;height:1px;width:32px;background:var(--m-green-500)}.section-tag{font-family:Space Grotesk,sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--m-green-400);font-weight:700}.section-title{font-family:Be Vietnam Pro,sans-serif;font-size:40px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin-bottom:16px;color:var(--m-text)}.section-desc{font-size:15px;color:var(--m-muted);line-height:1.7;max-width:480px;margin-bottom:48px}.text-green{color:var(--m-green-400)}.btn-primary-music{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#00A98F,#007D69);color:#fff;padding:13px 28px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;transition:transform var(--m-transition),box-shadow var(--m-transition);font-family:var(--m-font-body);letter-spacing:.2px}.btn-primary-music:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(0,169,143,.45)}.btn-outline-music{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--m-green-400);padding:12px 26px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;border:1.5px solid var(--m-green-500);transition:all var(--m-transition);font-family:var(--m-font-body);cursor:pointer;letter-spacing:.2px}.btn-outline-music:hover{border-color:var(--m-yellow);color:var(--m-yellow);transform:translateY(-1px)}.nc-card{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);border-radius:12px;padding:24px;transition:all .35s cubic-bezier(.2,.8,.2,1)}.nc-card:hover{border-color:rgba(0,169,143,.4);box-shadow:0 24px 48px -16px rgba(0,169,143,.2);transform:translateY(-4px)}.nc-badge{font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid;display:inline-flex;align-items:center;gap:6px}.nc-badge-teal{color:#34D4B8}.nc-badge-indigo{color:#818CF8}.nc-badge-yellow{color:#FCD34D}.nc-kpi{font:700 32px Space Grotesk;letter-spacing:-1px}.nc-kpi,.nc-kpi-sm{color:var(--m-text)}.nc-kpi-sm{font:700 20px Space Grotesk;letter-spacing:-.5px}.hero-section{position:relative;min-height:560px;background:linear-gradient(135deg,#F0F0F8,#E8ECF8 55%,#DDE0F4);display:flex;align-items:center;padding:80px 48px;overflow:hidden;font-family:var(--m-font-body);color:var(--m-text)}.hero-bg-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,169,143,.08);pointer-events:none}.hero-bg-ring.r1{width:800px;height:800px;top:-250px;right:-250px}.hero-bg-ring.r2{width:580px;height:580px;top:-150px;right:-150px}.hero-bg-ring.r3{width:360px;height:360px;top:-50px;right:-50px}.hero-particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:3px;height:3px;background:var(--m-green-400);border-radius:50%;opacity:.35;animation:float-up linear infinite}@keyframes float-up{0%{transform:translateY(0) scale(1);opacity:.35}to{transform:translateY(-120px) scale(0);opacity:0}}.hero-content{position:relative;z-index:1;max-width:520px}.hero-live-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,169,143,.1);border:1px solid rgba(0,169,143,.3);padding:6px 16px;border-radius:100px;font-family:Space Grotesk,sans-serif;font-size:10px;color:#34D4B8;margin-bottom:24px;letter-spacing:2px;text-transform:uppercase;font-weight:700}.live-dot{width:6px;height:6px;background:var(--m-green-500);border-radius:50%;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}.hero-title{font-family:Be Vietnam Pro,sans-serif;font-size:56px;font-weight:800;line-height:1;letter-spacing:-2px;margin-bottom:20px;color:var(--m-text)}.hero-title-accent{color:#34D4B8}.hero-desc{font-size:15px;color:var(--m-muted);line-height:1.75;margin-bottom:36px;max-width:380px}.hero-actions{display:flex;gap:16px;flex-wrap:wrap}.hero-visual-wrap{position:absolute;right:100px;top:50%;transform:translateY(-50%);z-index:1}.vinyl-disk,.vinyl-outer{position:relative}.vinyl-disk{width:240px;height:240px;border-radius:50%;background:conic-gradient(from 0deg,#D8DCF0,#C8CEE8,#D0D5EC,#D8DCF0,#CCCDE8,#D8DCF0,#C8CEE8);border:3px solid rgba(0,169,143,.25);animation:vinyl-spin 10s linear infinite;display:flex;align-items:center;justify-content:center}@keyframes vinyl-spin{to{transform:rotate(1turn)}}.vinyl-groove{position:absolute;border-radius:50%;border:1px solid rgba(0,0,0,.1)}.vinyl-groove.g1{width:190px;height:190px}.vinyl-groove.g2{width:140px;height:140px}.vinyl-groove.g3{width:90px;height:90px}.vinyl-center{width:64px;height:64px;background:linear-gradient(135deg,#00A98F,#007D69);z-index:1}.vinyl-center,.vinyl-hole{border-radius:50%;position:absolute}.vinyl-hole{width:18px;height:18px;background:var(--m-bg);z-index:2}.vinyl-needle{position:absolute;top:-20px;right:-30px;width:3px;height:80px;background:linear-gradient(180deg,rgba(0,169,143,.7),transparent);border-radius:2px;transform:rotate(20deg);transform-origin:top center}.now-playing-card{position:absolute;bottom:-20px;left:-60px;background:rgba(255,255,255,.85);border:1px solid rgba(0,169,143,.2);backdrop-filter:blur(12px);border-radius:var(--m-radius-md);padding:12px 16px;display:flex;align-items:center;gap:12px;width:220px;box-shadow:0 4px 24px rgba(0,0,0,.4)}.np-bar{display:flex;align-items:flex-end;gap:2px;height:24px}.np-wave{display:inline-block;width:3px;background:var(--m-green-500);border-radius:2px;animation:wave-anim 1s ease-in-out infinite}@keyframes wave-anim{0%,to{height:4px}50%{height:20px}}.np-info{flex:1;min-width:0}.np-title{font-size:12px;font-weight:500;color:var(--m-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-artist{font-size:11px;color:var(--m-muted)}.services-section{background:var(--m-surface-1)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.services-grid{grid-template-columns:1fr}}.service-card{position:relative;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);border-radius:var(--m-radius-lg);padding:32px 28px;overflow:hidden;transition:border-color var(--m-transition),transform var(--m-transition),box-shadow var(--m-transition);cursor:default;animation:fade-in-up .5s both}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.service-card:hover{border-color:rgba(0,169,143,.35);transform:translateY(-4px);box-shadow:0 24px 48px -16px rgba(0,169,143,.15)}.service-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,169,143,.04),transparent 60%);pointer-events:none}.service-card-glow{position:absolute;bottom:-40px;right:-40px;width:120px;height:120px;border-radius:50%;opacity:.04;pointer-events:none;transition:opacity var(--m-transition)}.service-card:hover .service-card-glow{opacity:.12}.service-icon-wrap{width:52px;height:52px;border-radius:var(--m-radius-md);background:rgba(0,169,143,.1);border:1px solid rgba(0,169,143,.2);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:24px}.service-title{font-size:16px;font-weight:600;margin-bottom:10px;color:var(--m-text);font-family:var(--m-font-body)}.service-desc{font-size:13px;color:var(--m-muted);line-height:1.65;margin-bottom:20px}.service-tag{display:inline-block;font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700;color:#34D4B8;padding:4px 10px;border-radius:100px;border:1px solid rgba(0,169,143,.3);letter-spacing:1.5px;text-transform:uppercase}.featured-section{background:var(--m-surface-2);border-top:1px solid var(--m-border);border-bottom:1px solid var(--m-border)}.featured-blob{position:absolute;border-radius:50%;pointer-events:none}.featured-blob.b1{width:500px;height:500px;background:radial-gradient(circle,rgba(0,169,143,.06) 0,transparent 70%);top:-100px;left:-100px}.featured-blob.b2{width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,.05) 0,transparent 70%);bottom:-80px;right:-80px}.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:32px}@media (max-width:768px){.featured-grid{grid-template-columns:1fr;gap:40px}}.featured-cover,.featured-cover-wrap{position:relative}.featured-cover{aspect-ratio:1;border-radius:var(--m-radius-xl);background:linear-gradient(135deg,#E8ECF8,#D8DFF0 50%,#C8F0EC);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform var(--m-transition);box-shadow:0 12px 48px rgba(0,169,143,.15)}.cover-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,169,143,.15)}.cover-ring.r1{width:80%;height:80%}.cover-ring.r2{width:60%;height:60%}.cover-ring.r3{width:40%;height:40%}.cover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.15);z-index:2}.cover-overlay,.cover-play-btn{display:flex;align-items:center;justify-content:center}.cover-play-btn{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#00A98F,#007D69);border:none;color:#fff;font-size:22px;cursor:pointer;transition:transform var(--m-transition),box-shadow var(--m-transition)}.cover-play-btn:hover{transform:scale(1.1);box-shadow:0 14px 32px rgba(0,169,143,.4)}.cover-reflection{position:absolute;top:100%;left:5%;right:5%;height:60px;background:linear-gradient(180deg,rgba(0,169,143,.12),transparent);border-radius:0 0 50% 50%;filter:blur(8px)}.badge-new{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,#FCD34D,#B45309);color:#fff;font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:1.5px;text-transform:uppercase;z-index:3}.waveform{display:flex;align-items:center;justify-content:center;gap:2px;height:48px;margin-top:16px}.waveform-bar{display:inline-block;width:3px;background:rgba(0,169,143,.2);border-radius:2px;transition:background var(--m-transition)}.waveform.active .waveform-bar{background:var(--m-green-500);animation:waveform-anim 1.2s ease-in-out infinite}@keyframes waveform-anim{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.featured-title{font-family:Be Vietnam Pro,sans-serif;font-size:40px;font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:10px;color:var(--m-text)}.featured-artist{font-size:15px;color:#34D4B8;margin-bottom:6px;font-weight:600}.featured-album{font-size:13px;color:var(--m-muted);margin-bottom:28px;display:flex;align-items:center;gap:6px}.icon-disc{font-size:16px}.track-stats{display:flex;gap:32px;margin-bottom:32px}.track-stat-item strong{display:block;font:700 22px Space Grotesk;color:var(--m-text);margin-bottom:2px;letter-spacing:-.5px}.track-stat-item span{font-size:12px;color:var(--m-muted);text-transform:uppercase;letter-spacing:1px}.progress-container{margin-bottom:24px}.progress-track{height:5px;background:rgba(0,169,143,.15);cursor:pointer;margin-bottom:10px}.progress-fill,.progress-track{border-radius:100px;position:relative}.progress-fill{height:100%;background:var(--m-green-500);transition:width .2s linear}.progress-thumb{position:absolute;right:-6px;top:-4px;width:13px;height:13px;background:#34D4B8;border-radius:50%;border:2px solid var(--m-bg);box-shadow:0 1px 4px rgba(0,169,143,.4)}.progress-time{display:flex;justify-content:space-between;font-size:12px;color:var(--m-muted)}.player-controls{gap:12px}.ctrl-btn,.player-controls{display:flex;align-items:center}.ctrl-btn{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.07);justify-content:center;font-size:16px;cursor:pointer;transition:all var(--m-transition);color:var(--m-text)}.ctrl-btn:hover{border-color:rgba(0,169,143,.4);color:#34D4B8;transform:scale(1.05)}.ctrl-btn.play-main{width:56px;height:56px;background:linear-gradient(135deg,#00A98F,#007D69);border-color:transparent;color:#fff;font-size:20px}.ctrl-btn.play-main:hover{box-shadow:0 8px 24px rgba(0,169,143,.4)}.ctrl-btn.liked{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:#ef4444}.artists-section{background:var(--m-bg)}.artists-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}.genre-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}.genre-tab{padding:6px 16px;border-radius:100px;background:transparent;border:1px solid rgba(0,0,0,.1);color:var(--m-muted);font-family:Space Grotesk,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all var(--m-transition)}.genre-tab.active,.genre-tab:hover{border-color:rgba(0,169,143,.4);color:#34D4B8}.genre-tab.active{background:rgba(0,169,143,.12)}.artists-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media (max-width:900px){.artists-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.artists-grid{grid-template-columns:1fr}}.artist-card{position:relative;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);border-radius:var(--m-radius-lg);padding:28px 20px;text-align:center;text-decoration:none;color:var(--m-text);transition:all var(--m-transition);overflow:hidden;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:fade-in-up .4s both}.artist-card:hover{border-color:rgba(0,169,143,.4);transform:translateY(-6px);box-shadow:0 24px 48px -16px rgba(0,169,143,.2)}.artist-card-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,169,143,.04),transparent 60%);opacity:0;transition:opacity var(--m-transition);pointer-events:none}.artist-card:hover .artist-card-glow{opacity:1}.artist-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 16px;border:2px solid rgba(0,169,143,.25);display:flex;align-items:center;justify-content:center;font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:700;color:#34D4B8;position:relative;transition:border-color var(--m-transition);background:rgba(0,169,143,.1)}.artist-card:hover .artist-avatar{border-color:rgba(0,169,143,.5)}.verified-badge{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#00A98F,#007D69);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;border:2px solid var(--m-surface-1)}.artist-name{font-size:14px;font-weight:600;margin-bottom:5px;color:var(--m-text);letter-spacing:-.2px}.artist-genre-tag{font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700;color:#34D4B8;margin-bottom:16px;letter-spacing:1.5px;text-transform:uppercase}.artist-stats{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.artist-stat strong{display:block;font:700 16px Space Grotesk;color:var(--m-text);letter-spacing:-.3px}.artist-stat span{font-size:10px;color:var(--m-muted);text-transform:uppercase;letter-spacing:.5px}.artist-stat-divider{width:1px;height:28px;background:rgba(0,0,0,.1)}.artist-play-hint{font-family:Space Grotesk,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#34D4B8;opacity:0;transform:translateY(4px);transition:all var(--m-transition)}.artist-card:hover .artist-play-hint{opacity:1;transform:translateY(0)}.charts-section{background:var(--m-surface-1);border-top:1px solid var(--m-border)}.charts-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:20px}.period-tabs{display:flex;gap:4px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08);border-radius:100px;padding:4px}.period-tab{padding:8px 18px;border-radius:100px;background:transparent;border:none;color:var(--m-muted);font-family:Space Grotesk,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all var(--m-transition);white-space:nowrap}.period-tab.active{background:linear-gradient(135deg,#00A98F,#007D69);color:#fff}.chart-list{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}.chart-item{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.07);border-radius:var(--m-radius-md);padding:16px 20px;display:flex;align-items:center;gap:16px;transition:all var(--m-transition);animation:fade-in-up .4s both}.chart-item:hover{border-color:rgba(0,169,143,.3);box-shadow:0 8px 24px rgba(0,169,143,.08)}.chart-item.playing{border-color:rgba(0,169,143,.35);background:rgba(0,169,143,.06)}.chart-rank{font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:700;color:rgba(0,169,143,.2);width:48px;text-align:center;line-height:1;flex-shrink:0;transition:color var(--m-transition)}.chart-item.playing .chart-rank,.chart-item:hover .chart-rank{color:rgba(0,169,143,.5)}.chart-thumb{width:52px;height:52px;border-radius:10px;flex-shrink:0;position:relative;overflow:hidden;background:linear-gradient(135deg,#E8ECF8,#D8DFF0)}.chart-play-btn,.chart-thumb{display:flex;align-items:center;justify-content:center}.chart-play-btn{position:absolute;inset:0;background:rgba(0,0,0,.3);border:none;color:#fff;font-size:16px;cursor:pointer;opacity:0;transition:opacity var(--m-transition)}.chart-item.playing .chart-play-btn,.chart-item:hover .chart-play-btn{opacity:1}.chart-info{flex:1;min-width:0}.chart-title{font-size:14px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--m-text)}.chart-artist{font-size:12px;color:var(--m-muted)}.trend-badge{font-family:Space Grotesk,sans-serif;font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;flex-shrink:0;letter-spacing:1px;text-transform:uppercase}.trend-badge.up{background:rgba(0,169,143,.1);color:#34D4B8}.trend-badge.down{background:rgba(239,68,68,.1);color:#f87171}.trend-badge.new{background:rgba(252,211,77,.1);color:#FCD34D}.trend-badge.same{background:rgba(0,0,0,.06);color:var(--m-muted)}.chart-bar-col{width:140px;flex-shrink:0}.chart-bar-bg{height:4px;background:rgba(0,169,143,.1);border-radius:100px;margin-bottom:6px}.chart-bar-fill{height:100%;background:linear-gradient(90deg,#00A98F,#34D4B8);border-radius:100px;transition:width .6s cubic-bezier(.4,0,.2,1)}.chart-plays{font-family:Space Grotesk,sans-serif;font-size:11px;color:var(--m-muted);text-align:right}.charts-footer{text-align:center}@media (max-width:768px){.section-title{font-size:28px}.hero-section{padding:60px 24px;min-height:auto}.hero-title{font-size:40px}.hero-visual-wrap{display:none}.music-section{padding:60px 0}.featured-title{font-size:28px}.chart-bar-col{display:none}.artists-header,.charts-header{flex-direction:column;align-items:flex-start}.track-stats{gap:16px}.player-controls{gap:8px;flex-wrap:wrap;justify-content:center}.section-desc{margin-bottom:32px}}@media (max-width:480px){.featured-title{font-size:22px}.section-title{font-size:24px}.ctrl-btn{width:40px;height:40px;font-size:14px}.ctrl-btn.play-main{width:50px;height:50px;font-size:18px}}