/*
Theme Name: LoudPak Music
Author: LoudPak Music Studios Inc.
Version: 5.9.0
Text Domain: loudpak
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root { --bg:#000; --card:#121212; --primary:#00E5FF; --border:#2e2e2e; --muted:rgba(255,255,255,0.5); }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:#000; color:#fff; font-family:'Inter',sans-serif; line-height:1.6; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#000; }
::-webkit-scrollbar-thumb { background:#00E5FF; border-radius:3px; }

.lp-container { width:100%; max-width:1280px; margin:0 auto; padding:0 1.25rem; }

/* HERO */
.hero-banner { position:relative; width:100%; height:280px; overflow:hidden; }
@media(min-width:768px){ .hero-banner{ height:420px; } }
.hero-banner__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-banner__overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); }
.hero-banner__inner { position:relative; z-index:10; display:flex; align-items:center; justify-content:center; height:100%; }
.hero-banner__logo { width:200px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.9)); transition:transform .3s; }
.hero-banner__logo:hover { transform:scale(1.04); }
@media(min-width:768px){ .hero-banner__logo{ width:320px; } }
@media(min-width:1024px){ .hero-banner__logo{ width:400px; } }

/* NAV */
.site-nav { background:#00E5FF; position:sticky; top:0; z-index:50; }
.site-nav__desktop { display:none; align-items:center; justify-content:center; gap:.25rem; padding:.875rem 0; max-width:1280px; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }
@media(min-width:768px){ .site-nav__desktop{ display:flex; } }
.site-nav__desktop a { font-family:'Oswald',sans-serif; font-size:.85rem; letter-spacing:.18em; padding:.45rem 1rem; color:rgba(0,0,0,0.8); text-transform:uppercase; border-bottom:2px solid transparent; transition:all .2s; }
.site-nav__desktop a:hover,.site-nav__desktop a.active { color:#000; border-bottom-color:#000; }
.site-nav__live-btn { background:rgba(0,0,0,0.15) !important; border:1.5px solid rgba(0,0,0,0.3) !important; border-radius:9999px !important; padding:.3rem 1rem !important; border-bottom:1.5px solid rgba(0,0,0,0.3) !important; display:inline-flex !important; align-items:center; gap:.35rem; }
.site-nav__live-btn:hover { background:rgba(0,0,0,0.25) !important; }
.site-nav__mobile-bar { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; }
@media(min-width:768px){ .site-nav__mobile-bar{ display:none; } }
.site-nav__mobile-brand { font-family:'Oswald',sans-serif; color:#000; font-size:1.1rem; letter-spacing:.2em; font-weight:700; }
.site-nav__hamburger { color:#000; padding:.25rem; }
.site-nav__hamburger svg { width:22px; height:22px; stroke:#000; fill:none; stroke-width:2; }
.site-nav__mobile-menu { display:none; flex-direction:column; padding-bottom:.75rem; padding-left:1.25rem; padding-right:1.25rem; }
.site-nav__mobile-menu.is-open { display:flex; }
.site-nav__mobile-menu a { font-family:'Oswald',sans-serif; font-size:.875rem; letter-spacing:.15em; padding:.65rem .5rem; color:rgba(0,0,0,0.8); text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,0.1); }
.site-nav__mobile-menu a:last-child { border-bottom:none; }

/* FOOTER */
.site-footer { background:#111; border-top:1px solid #222; padding:3rem 0; text-align:center; }
.site-footer__brand { font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.3em; color:#00E5FF; margin-bottom:.75rem; }
.site-footer__tagline { color:rgba(255,255,255,0.4); font-size:.8rem; letter-spacing:.1em; margin-bottom:1.5rem; }
.site-footer__copy { border-top:1px solid #222; padding-top:1.5rem; color:rgba(255,255,255,0.3); font-size:.7rem; letter-spacing:.1em; }

/* HOMEPAGE SECTIONS */
.roster-section { padding:1.25rem 0 1.5rem; background:#000; border-bottom:1px solid rgba(0,229,255,0.15); }
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-header__title { font-family:'Oswald',sans-serif; font-size:clamp(1.75rem,4vw,2.5rem); letter-spacing:.15em; color:#fff; text-transform:uppercase; margin-bottom:.5rem; }
.section-header__subtitle { font-size:.875rem; color:rgba(255,255,255,0.5); }
.hero-section { padding:5rem 0 4rem; text-align:center; }
.hero-section__eyebrow { font-family:'Oswald',sans-serif; font-size:.65rem; letter-spacing:.4em; color:rgba(255,255,255,0.35); text-transform:uppercase; margin-bottom:1.5rem; }
.hero-section__h1 { font-family:'Oswald',sans-serif; font-size:clamp(3rem,10vw,8rem); font-weight:700; font-style:italic; color:#fff; line-height:1; margin-bottom:.5rem; }
.hero-section__h2 { font-family:'Oswald',sans-serif; font-size:clamp(2.5rem,8vw,7rem); font-weight:700; font-style:italic; color:#fff; line-height:1; margin-bottom:2.5rem; }
.hero-section__body { font-size:.95rem; color:rgba(255,255,255,0.5); line-height:1.8; max-width:48rem; margin:0 auto 5rem; }
.mission-divider { display:flex; align-items:center; gap:1rem; margin-bottom:4rem; }
.mission-divider__line { width:4rem; height:2px; background:#00E5FF; }
.pillars { display:grid; gap:2rem; }
@media(min-width:768px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar__num { font-family:'Oswald',sans-serif; font-size:1.875rem; font-weight:700; color:#00E5FF; }
.pillar__title { font-family:'Oswald',sans-serif; font-size:1.125rem; letter-spacing:.1em; color:#fff; margin-top:.5rem; text-transform:uppercase; }
.pillar__subtitle { font-size:.7rem; letter-spacing:.1em; color:#00E5FF; margin:.25rem 0 .75rem; text-transform:uppercase; }
.pillar__text { font-size:.875rem; color:rgba(255,255,255,0.5); line-height:1.7; }
.releases-section { padding:5rem 0; background:#111; border-top:1px solid #222; }
.releases-grid { display:grid; gap:2rem; }
@media(min-width:768px){ .releases-grid{ grid-template-columns:repeat(2,1fr); } }
.release-card { background:#000; border:1px solid #222; border-radius:.75rem; overflow:hidden; }
.release-card__header { padding:1rem; border-bottom:1px solid #222; }
.release-card__artist { font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.2em; color:#00E5FF; text-transform:uppercase; }
.release-card__body { padding:1rem; }
.vision-section { padding:5rem 0; background:#111; border-top:1px solid #222; text-align:center; }
.vision-section__h2 { font-family:'Oswald',sans-serif; font-size:clamp(3rem,10vw,8rem); font-weight:700; font-style:italic; color:#fff; line-height:1; margin-bottom:.5rem; }
.vision-section__h3 { font-family:'Oswald',sans-serif; font-size:clamp(2.5rem,8vw,7rem); font-weight:700; font-style:italic; color:#fff; line-height:1; margin-bottom:2rem; }
.vision-section__body { font-size:.95rem; color:rgba(255,255,255,0.5); line-height:1.8; max-width:48rem; margin:0 auto 3rem; }
.vision-section__btn { background:#00E5FF; color:#000; font-family:'Oswald',sans-serif; font-size:.875rem; letter-spacing:.2em; padding:.75rem 2.5rem; border-radius:9999px; text-transform:uppercase; display:inline-block; transition:all .2s; }
.vision-section__btn:hover { box-shadow:0 0 25px rgba(0,229,255,0.4); }

/* ROSTER */
.roster-footer__link { display:inline-flex; align-items:center; gap:.5rem; font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.25em; text-transform:uppercase; color:#00E5FF; border:1px solid #00E5FF; padding:.75rem 2rem; border-radius:9999px; transition:all .2s; }
.roster-footer__link:hover { background:#00E5FF; color:#000; }
.roster-card:hover .roster-card__img-wrap { box-shadow:0 0 25px rgba(0,229,255,0.5) !important; }

/* ARTIST DETAIL */
.ad-avatar-ring { width:180px; height:180px; border-radius:50%; overflow:hidden; border:3px solid #00E5FF; box-shadow:0 0 0 3px rgba(0,229,255,0.15),0 0 40px rgba(0,229,255,0.4); margin-bottom:1.75rem; }
@media(min-width:768px){ .ad-avatar-ring{ width:220px; height:220px; } }
.ad-avatar-img { width:100%; height:100%; object-fit:cover; }
.back-link { display:inline-flex; align-items:center; gap:.4rem; font-family:'Oswald',sans-serif; font-size:.65rem; letter-spacing:.2em; color:#00E5FF; text-transform:uppercase; margin-bottom:3rem; transition:opacity .2s; }
.back-link:hover { opacity:.7; }

/* PRICING */
.pricing-section { padding:5rem 0; }
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:3rem; }
.pricing-toggle__label { font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); }
.pricing-toggle__label.is-active { color:#00E5FF; }
.pricing-toggle__switch { position:relative; width:3.5rem; height:1.75rem; border-radius:9999px; background:#262626; cursor:pointer; transition:background .2s; }
.pricing-toggle__switch.is-annual { background:#00E5FF; }
.pricing-toggle__thumb { position:absolute; top:2px; left:2px; width:1.5rem; height:1.5rem; border-radius:50%; background:#000; transition:transform .2s; }
.pricing-toggle__switch.is-annual .pricing-toggle__thumb { transform:translateX(1.75rem); }
.pricing-toggle__badge { font-size:.75rem; color:#00E5FF; background:rgba(0,229,255,0.1); padding:.125rem .5rem; border-radius:9999px; display:none; }
.pricing-toggle__badge.is-visible { display:inline; }
.pricing-grid { display:grid; gap:1.5rem; }
@media(min-width:640px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .pricing-grid{ grid-template-columns:repeat(4,1fr); } }
.pricing-card { position:relative; border-radius:.75rem; border:1px solid #2e2e2e; background:#121212; padding:1.5rem; display:flex; flex-direction:column; }
.pricing-card--popular { border-color:#00E5FF; background:rgba(0,229,255,0.04); box-shadow:0 0 30px rgba(0,229,255,0.12); }
.pricing-card__badge { position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); background:#00E5FF; color:#000; font-family:'Oswald',sans-serif; font-size:.6rem; letter-spacing:.2em; padding:.2rem .875rem; border-radius:9999px; white-space:nowrap; text-transform:uppercase; }
.pricing-card__tier { font-size:.7rem; color:rgba(255,255,255,0.4); text-transform:uppercase; }
.pricing-card__name { font-family:'Oswald',sans-serif; font-size:1.5rem; letter-spacing:.1em; color:#fff; margin-top:.25rem; text-transform:uppercase; }
.pricing-card__desc { font-size:.75rem; color:rgba(255,255,255,0.4); margin:.25rem 0 1rem; }
.pricing-card__amount { font-family:'Oswald',sans-serif; font-size:2.5rem; color:#fff; }
.pricing-card__per { font-size:.875rem; color:rgba(255,255,255,0.4); }
.pricing-card__tracks { font-size:.75rem; color:rgba(255,255,255,0.4); }
.pricing-card__annual-total { font-size:.75rem; color:#00E5FF; display:none; margin:.25rem 0 1rem; }
.pricing-card__annual-total.is-visible { display:block; }
.pricing-card__features { flex:1; list-style:none; display:flex; flex-direction:column; gap:.75rem; margin:1rem 0 1.5rem; }
.pricing-card__feature { display:flex; align-items:center; gap:.5rem; font-size:.75rem; }
.pricing-card__feature--included { color:#fff; }
.pricing-card__feature--excluded { color:rgba(255,255,255,0.2); }
.pricing-card__feature-icon { width:14px; height:14px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; }
.pricing-card__feature--included .pricing-card__feature-icon { stroke:#00E5FF; }
.pricing-card__cta { width:100%; padding:.75rem; border-radius:9999px; font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-align:center; display:block; transition:all .2s; }
.pricing-card__cta--default { background:#1f1f1f; color:#fff; }
.pricing-card__cta--default:hover { background:#2a2a2a; }
.pricing-card__cta--popular { background:#00E5FF; color:#000; }
.pricing-card__cta--popular:hover { box-shadow:0 0 20px rgba(0,229,255,0.3); }

/* FADE */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s; }
.fade-in.is-visible { opacity:1; transform:translateY(0); }