/* ============================================
   ZETRONIC RECORDS — SECTIONS CSS (Part 2)
   ============================================ */

/* MUSIC CATALOG */
.music-sec { background: var(--bg-primary); }
.music-filters { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:48px; flex-wrap:wrap; }
.filter-btn { padding:8px 24px; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-size:0.85rem; font-weight:500; letter-spacing:0.05em; cursor:pointer; transition:all var(--duration) var(--ease); }
.filter-btn:hover, .filter-btn.active { background:var(--gold); border-color:var(--gold); color:var(--bg-primary); }
.spotify-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.spotify-embed-wrap { border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.spotify-embed-wrap:hover { border-color:var(--border-hover); box-shadow:var(--shadow-gold); }
.spotify-embed-wrap iframe { width:100%; border-radius:var(--radius-md); }

/* VIDEOS SECTION */
.videos-sec { background: var(--bg-secondary); }
.videos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.video-card { position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--bg-card); transition:all 0.4s var(--ease); aspect-ratio:16/9; }
.video-card:hover { border-color:var(--border-hover); transform:translateY(-4px); box-shadow:var(--shadow-gold); }
.video-card iframe { width:100%; height:100%; border:none; }
.video-card-label { position:absolute; bottom:0; left:0; right:0; padding:12px 16px; background:linear-gradient(transparent, rgba(5,8,16,0.9)); font-size:0.85rem; font-weight:500; color:var(--white); }

/* SERVICES SECTION */
.services-sec { background:var(--bg-primary); position:relative; overflow:hidden; }
.services-sec::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(201,168,76,0.04) 0%,transparent 70%); pointer-events:none; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card {
    background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 28px;
    text-align:center; transition:all 0.4s var(--ease); position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity 0.4s var(--ease); }
.service-card:hover { border-color:var(--border-hover); transform:translateY(-8px); box-shadow:var(--shadow-gold),var(--shadow-card); }
.service-card:hover::before { opacity:1; }
.service-icon { width:64px; height:64px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--gold); transition:all 0.4s var(--ease); }
.service-card:hover .service-icon { background:var(--gold); color:var(--bg-primary); box-shadow:0 0 20px rgba(201,168,76,0.4); }
.service-title { font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--white); margin-bottom:12px; }
.service-desc { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; }

/* AI PRODUCTION SECTION */
.ai-sec { background:var(--bg-secondary); position:relative; overflow:hidden; }
.ai-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.ai-content .sec-tag, .ai-content .sec-title, .ai-content .sec-desc { text-align:left; margin-left:0; }
.ai-content .sec-title { margin-bottom:20px; }
.ai-content .sec-desc { margin-bottom:32px; }
.ai-steps { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; }
.ai-step { display:flex; align-items:flex-start; gap:16px; padding:20px; background:var(--bg-glass); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:var(--radius-md); transition:all var(--duration) var(--ease); }
.ai-step:hover { border-color:var(--border-hover); background:rgba(201,168,76,0.05); }
.ai-step-num { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--bg-primary); font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-step-text h4 { font-weight:600; color:var(--white); margin-bottom:4px; font-size:0.95rem; }
.ai-step-text p { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

.ai-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.ai-circle-wrap { position:relative; width:380px; height:380px; display:flex; align-items:center; justify-content:center; }
.ai-ring { position:absolute; border-radius:50%; border:1px solid var(--border); }
.ai-ring:nth-child(1) { width:380px; height:380px; animation:aiSpin 20s linear infinite; }
.ai-ring:nth-child(2) { width:280px; height:280px; animation:aiSpin 15s linear infinite reverse; border-color:rgba(201,168,76,0.2); }
.ai-ring:nth-child(3) { width:180px; height:180px; animation:aiSpin 10s linear infinite; border-color:rgba(201,168,76,0.3); }
@keyframes aiSpin { to { transform:rotate(360deg); } }
.ai-center-icon { position:relative; z-index:2; width:100px; height:100px; border-radius:50%; background:linear-gradient(135deg,var(--gold-dim),rgba(201,168,76,0.05)); border:1px solid var(--border-hover); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.ai-ring-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.ai-ring-dot:nth-child(4) { top:0; left:50%; transform:translateX(-50%); }
.ai-ring-dot:nth-child(5) { bottom:0; left:50%; transform:translateX(-50%); }
.ai-ring-dot:nth-child(6) { left:0; top:50%; transform:translateY(-50%); }
.ai-ring-dot:nth-child(7) { right:0; top:50%; transform:translateY(-50%); }

/* PORTFOLIO SECTION */
.portfolio-sec { background:var(--bg-primary); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.portfolio-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--bg-card); transition:all 0.4s var(--ease); }
.portfolio-card:hover { border-color:var(--border-hover); transform:translateY(-6px); box-shadow:var(--shadow-gold),var(--shadow-card); }
.portfolio-img { aspect-ratio:1; background:linear-gradient(135deg,#0a1020,#0f1830); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.portfolio-cover-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.portfolio-cover-art { width:120px; height:120px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--gold-dim),rgba(201,168,76,0.05)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.portfolio-cover-art svg { color:var(--gold); opacity:0.6; }
.portfolio-overlay { position:absolute; inset:0; background:rgba(5,8,16,0.85); display:flex; align-items:center; justify-content:center; gap:12px; opacity:0; transition:opacity 0.3s var(--ease); }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-play-btn { width:52px; height:52px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; color:var(--bg-primary); transition:transform var(--duration) var(--ease); }
.portfolio-play-btn:hover { transform:scale(1.1); }
.portfolio-ext-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration) var(--ease); }
.portfolio-ext-btn:hover { border-color:var(--gold); color:var(--gold); }
.portfolio-info { padding:20px; }
.portfolio-type { font-size:0.7rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.portfolio-title { font-family:var(--font-serif); font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.portfolio-artist { font-size:0.85rem; color:var(--text-secondary); margin-bottom:12px; }
.portfolio-meta { display:flex; align-items:center; justify-content:space-between; }
.portfolio-year { font-size:0.75rem; color:var(--text-muted); }
.portfolio-links { display:flex; gap:8px; }
.portfolio-link { width:28px; height:28px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration) var(--ease); }
.portfolio-link:hover { border-color:var(--gold); color:var(--gold); }

/* CONTACT SECTION */
.contact-sec { background:var(--bg-secondary); }
.contact-inner { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; }
.contact-info { padding-top:8px; }
.contact-info .sec-tag, .contact-info .sec-title, .contact-info .sec-desc { text-align:left; margin-left:0; }
.contact-info .sec-title { margin-bottom:16px; }
.contact-info .sec-desc { margin-bottom:40px; }
.contact-details { display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.contact-item { display:flex; align-items:center; gap:16px; }
.contact-item-icon { width:48px; height:48px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; }
.contact-item-text span { display:block; font-size:0.75rem; color:var(--text-muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px; }
.contact-item-text a, .contact-item-text p { font-size:0.95rem; color:var(--text-primary); transition:color var(--duration) var(--ease); }
.contact-item-text a:hover { color:var(--gold); }
.contact-socials { display:flex; gap:12px; }
.social-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration) var(--ease); }
.social-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); transform:translateY(-2px); }

.contact-form-wrap { background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-label { font-size:0.8rem; font-weight:500; letter-spacing:0.05em; color:var(--text-secondary); text-transform:uppercase; }
.form-input, .form-select, .form-textarea {
    background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:14px 16px; color:var(--text-primary); font-size:0.95rem; font-family:var(--font-body);
    transition:all var(--duration) var(--ease); outline:none; width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--gold); background:rgba(201,168,76,0.05); box-shadow:0 0 0 3px rgba(201,168,76,0.1); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted); }
.form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9ab5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.form-select option { background:var(--bg-card); color:var(--text-primary); }
.form-textarea { resize:vertical; min-height:140px; }
.form-submit { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--bg-primary); font-weight:700; font-size:0.95rem; letter-spacing:0.05em; padding:16px 40px; border-radius:100px; border:none; cursor:pointer; transition:all var(--duration) var(--ease); box-shadow:0 4px 20px rgba(201,168,76,0.3); width:100%; }
.form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,0.5); }
.form-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.form-success { display:none; text-align:center; padding:40px 20px; }
.form-success.show { display:block; }
.form-success-icon { width:64px; height:64px; border-radius:50%; background:rgba(29,185,84,0.15); border:1px solid rgba(29,185,84,0.3); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:#1DB954; }
.form-success h3 { font-family:var(--font-serif); font-size:1.5rem; color:var(--white); margin-bottom:8px; }
.form-success p { color:var(--text-secondary); }

/* STICKY MUSIC PLAYER */
.sticky-player {
    position:fixed; bottom:0; left:0; right:0; z-index:900;
    background:rgba(8,13,26,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    transform:translateY(100%); transition:transform 0.4s var(--ease);
    padding:12px var(--container-px);
}
.sticky-player.visible { transform:translateY(0); }
.sticky-player.minimized { transform:translateY(calc(100% - 4px)); }
.player-inner { max-width:var(--container-max); margin:0 auto; display:flex; align-items:center; gap:20px; }
.player-track { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.player-thumb { width:44px; height:44px; border-radius:var(--radius-sm); background:var(--gold-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold); overflow:hidden; }
.player-thumb img { width:100%; height:100%; object-fit:cover; }
.player-info { min-width:0; }
.player-title { font-size:0.9rem; font-weight:600; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist { font-size:0.75rem; color:var(--text-secondary); }
.player-controls { display:flex; align-items:center; gap:12px; }
.player-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration) var(--ease); }
.player-btn:hover { color:var(--white); }
.player-play { width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--bg-primary); transition:all var(--duration) var(--ease); }
.player-play:hover { background:var(--gold-light); transform:scale(1.05); }
.player-progress { flex:1; display:flex; align-items:center; gap:10px; }
.player-time { font-size:0.72rem; color:var(--text-muted); white-space:nowrap; }
.progress-bar { flex:1; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; cursor:pointer; position:relative; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:4px; width:0%; transition:width 0.1s linear; }
.progress-bar:hover .progress-fill { background:var(--gold-light); }
.player-volume { display:flex; align-items:center; gap:8px; }
.volume-slider { width:80px; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; cursor:pointer; appearance:none; outline:none; }
.volume-slider::-webkit-slider-thumb { appearance:none; width:12px; height:12px; border-radius:50%; background:var(--gold); cursor:pointer; }
.player-minimize { color:var(--text-muted); transition:color var(--duration) var(--ease); }
.player-minimize:hover { color:var(--white); }
.player-spotify-link { display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; color:#1DB954; padding:6px 12px; border-radius:100px; border:1px solid rgba(29,185,84,0.3); transition:all var(--duration) var(--ease); }
.player-spotify-link:hover { background:rgba(29,185,84,0.1); }

/* FOOTER */
.footer { background:var(--bg-primary); border-top:1px solid var(--border); padding:60px 0 30px; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .nav-logo { margin-bottom:20px; }
.footer-tagline { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; margin-bottom:24px; max-width:280px; }
.footer-social { display:flex; gap:10px; }
.footer-social-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all var(--duration) var(--ease); }
.footer-social-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.footer-col h4 { font-size:0.8rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-link { font-size:0.9rem; color:var(--text-secondary); transition:color var(--duration) var(--ease); }
.footer-link:hover { color:var(--white); }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-copy { font-size:0.8rem; color:var(--text-muted); }
.footer-copy span { color:var(--gold); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-size:0.8rem; color:var(--text-muted); transition:color var(--duration) var(--ease); }
.footer-legal a:hover { color:var(--text-secondary); }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .footer-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width: 1024px) {
    :root { --section-py: 80px; }
    .nav-menu { display:none; }
    .hamburger { display:flex; }
    .mobile-nav { display:block; }
    .artists-grid { grid-template-columns:repeat(2,1fr); }
    .ai-inner { grid-template-columns:1fr; gap:48px; }
    .ai-visual { display:none; }
    .contact-inner { grid-template-columns:1fr; gap:48px; }
    .videos-grid { grid-template-columns:repeat(2,1fr); }
    .portfolio-grid { grid-template-columns:repeat(2,1fr); }
    .player-volume { display:none; }
    .player-progress { display:none; }
}

@media (max-width: 768px) {
    :root { --section-py: 60px; --container-px: 16px; }
    .hh-line { font-size: clamp(3rem,15vw,5rem); }
    .hero-stats { gap:20px; }
    .hs-num { font-size:2rem; }
    .artists-grid { grid-template-columns:1fr 1fr; gap:16px; }
    .spotify-grid { grid-template-columns:1fr; }
    .services-grid { grid-template-columns:1fr; }
    .videos-grid { grid-template-columns:1fr; }
    .portfolio-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .footer-inner { grid-template-columns:1fr; gap:32px; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .player-inner { gap:12px; }
    .player-track { flex:1; }
    .player-spotify-link { display:none; }
    .hero-waveform { display:none; }
}

@media (max-width: 480px) {
    .artists-grid { grid-template-columns:1fr; }
    .hero-btns { flex-direction:column; align-items:stretch; }
    .btn-primary-gold, .btn-ghost-gold { justify-content:center; }
    .hero-stats { flex-direction:column; gap:16px; }
    .hs-sep { width:40px; height:1px; }
    .contact-form-wrap { padding:24px 16px; }
}

/* UTILITY */
.text-gold { color:var(--gold); }
.text-center { text-align:center; }
.mt-8 { margin-top:8px; }
.mb-8 { margin-bottom:8px; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* SELECTION */
::selection { background:rgba(201,168,76,0.3); color:var(--white); }