/* ======================================== BRITNEY SPEARS FAN SITE - CSS Modern 2026 | RTL | Vazirmatn + Inline SVG Icons ======================================== */
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-Light.woff2') format('woff2');
     font-weight:300;
     font-display:swap;
}
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
     font-weight:400;
     font-display:swap;
}
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
     font-weight:500;
     font-display:swap;
}
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
     font-weight:600;
     font-display:swap;
}
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
     font-weight:700;
     font-display:swap;
}
 @font-face {
     font-family:'Vazirmatn';
     src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
     font-weight:800;
     font-display:swap;
}
 *,*::before,*::after {
     margin:0;
     padding:0;
     box-sizing:border-box;
}
 html {
     scroll-behavior:smooth;
     font-size:16px;
}
 body {
     font-family:'Vazirmatn',system-ui,sans-serif;
     background:#050508;
     color:#e5e5e5;
     line-height:1.7;
     overflow-x:hidden;
     direction:rtl;
}
/* --- SVG ICONS --- */
 svg.icon {
     width:1em;
     height:1em;
     vertical-align:-0.125em;
     display:inline-block;
}
 svg.icon.icon-xs {
     width:0.8em;
     height:0.8em;
}
 svg.icon.icon-sm {
     width:0.9em;
     height:0.9em;
}
 svg.icon.icon-lg {
     width:1.4em;
     height:1.4em;
}
 svg.icon.icon-xl {
     width:1.8em;
     height:1.8em;
}
 a {
     text-decoration:none;
     color:inherit;
}
 ul {
     list-style:none;
}
 button {
     cursor:pointer;
     border:none;
     background:none;
     font-family:inherit;
}
 img {
     max-width:100%;
     display:block;
}
 ::selection {
     background:rgba(233,30,140,0.3);
     color:white;
}
 ::-webkit-scrollbar {
     width:8px;
}
 ::-webkit-scrollbar-track {
     background:#0a0a10;
}
 ::-webkit-scrollbar-thumb {
     background:linear-gradient(180deg,#e91e8c,#9333ea);
     border-radius:4px;
}
 .container {
     max-width:1200px;
     margin:0 auto;
     padding:0 1.5rem;
}
 .gradient-pink {
     background:linear-gradient(135deg,#e91e8c,#f43fa0,#e91e8c);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .gradient-purple {
     background:linear-gradient(135deg,#9333ea,#c084fc,#9333ea);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .gradient-pink-text {
     background:linear-gradient(135deg,#e91e8c,#f43fa0);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .gradient-purple-text {
     background:linear-gradient(135deg,#9333ea,#c084fc);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .gradient-mixed-text {
     background:linear-gradient(135deg,#e91e8c,#9333ea);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
}
 .glass {
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     -webkit-backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.08);
}
 .section-divider {
     height:1px;
     background:linear-gradient(90deg,transparent,rgba(233,30,140,0.5),rgba(147,51,234,0.5),transparent);
     max-width:1200px;
     margin:0 auto;
}
 .animate-on-scroll {
     opacity:0;
     transform:translateY(30px);
     transition:opacity 0.6s ease, transform 0.6s ease;
}
 .animate-on-scroll.visible {
     opacity:1;
     transform:translateY(0);
}
 @keyframes bounce-down {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(8px)
    }
}
 @keyframes particle-float {
     0%{
        opacity:0;
        transform:translateY(0)
    }
     50%{
        opacity:1
    }
     100%{
        opacity:0;
        transform:translateY(-40px)
    }
}
/* --- NAV --- */
 nav {
     position:fixed;
     top:0;
     left:0;
     right:0;
     z-index:1000;
     transition:all 0.4s;
     padding:0.5rem 0;
}
 nav.scrolled {
     background:rgba(5,5,8,0.85);
     backdrop-filter:blur(30px);
     border-bottom:1px solid rgba(255,255,255,0.05);
}
 .nav-container {
     max-width:1200px;
     margin:0 auto;
     padding:0 1.5rem;
     display:flex;
     align-items:center;
     justify-content:space-between;
     height:64px;
}
 .nav-logo {
     display:flex;
     align-items:center;
     gap:0.75rem;
}
 .nav-logo-img {
     height:40px;
     width:auto;
     border-radius:8px;
}
 .nav-logo-img-footer {
     height:60px;
     width:auto;
     border-radius:10px;
}
 .nav-links {
     display:flex;
     gap:0.25rem;
}
 .nav-links a {
     padding:0.5rem 1rem;
     border-radius:9999px;
     font-size:0.875rem;
     font-weight:500;
     color:#9ca3af;
     transition:all 0.3s;
}
 .nav-links a:hover {
     color:white;
     background:rgba(255,255,255,0.05);
}
 .nav-links a.active {
     color:#f472b6;
     background:rgba(233,30,140,0.15);
     border:1px solid rgba(233,30,140,0.3);
}
 .nav-toggle {
     display:none;
     flex-direction:column;
     gap:5px;
     padding:4px;
}
 .nav-toggle span {
     display:block;
     width:24px;
     height:2px;
     background:#9ca3af;
     border-radius:2px;
     transition:0.3s;
}
 .mobile-menu {
     display:none;
     position:fixed;
     top:0;
     right:0;
     bottom:0;
     width:280px;
     z-index:999;
     background:rgba(10,10,16,0.95);
     backdrop-filter:blur(40px);
     border-left:1px solid rgba(255,255,255,0.08);
     padding:5rem 1.5rem 2rem;
     transform:translateX(100%);
     transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
 .mobile-menu.open {
     transform:translateX(0);
}
 .mobile-menu ul {
     display:flex;
     flex-direction:column;
     gap:0.5rem;
}
 .mobile-menu a {
     display:block;
     padding:0.75rem 1rem;
     border-radius:0.75rem;
     font-size:1rem;
     font-weight:500;
     color:#9ca3af;
     transition:0.3s;
}
/* --- HERO --- */
 .hero {
     position:relative;
     min-height:100vh;
     display:flex;
     align-items:center;
     justify-content:center;
     overflow:hidden;
}
 .hero-bg {
     position:absolute;
     inset:0;
}
 .hero-bg img {
     width:100%;
     height:100%;
     object-fit:cover;
}
 .hero-overlay {
     position:absolute;
     inset:0;
     background:linear-gradient(to bottom,rgba(5,5,8,0.7),rgba(5,5,8,0.5),#050508), linear-gradient(to left,rgba(233,30,140,0.1),transparent,rgba(147,51,234,0.1));
}
 .hero-particles {
     position:absolute;
     inset:0;
     pointer-events:none;
     overflow:hidden;
}
 .hero-particle {
     position:absolute;
     width:4px;
     height:4px;
     background:rgba(233,30,140,0.4);
     border-radius:50%;
     animation:particle-float 4s ease-in-out infinite;
}
 .hero-content {
     position:relative;
     z-index:10;
     text-align:center;
     padding:0 1rem;
     max-width:900px;
}
 .hero-badge {
     display:inline-flex;
     align-items:center;
     gap:0.5rem;
     padding:0.5rem 1.25rem;
     border-radius:9999px;
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.08);
     color:#f472b6;
     font-size:0.875rem;
     font-weight:500;
     margin-bottom:1.5rem;
}
 .hero-title {
     font-size:clamp(3rem,10vw,7rem);
     font-weight:800;
     line-height:1.1;
     margin-bottom:1.5rem;
}
 .hero-subtitle {
     font-size:clamp(1rem,2.5vw,1.375rem);
     color:#d1d5db;
     margin-bottom:2.5rem;
     max-width:600px;
     margin-left:auto;
     margin-right:auto;
     line-height:2;
}
 .hero-buttons {
     display:flex;
     align-items:center;
     justify-content:center;
     gap:1rem;
     flex-wrap:wrap;
     margin-bottom:3rem;
}
 .btn {
     display:inline-flex;
     align-items:center;
     gap:0.5rem;
     padding:0.875rem 2rem;
     border-radius:9999px;
     font-size:1rem;
     font-weight:700;
     transition:all 0.3s;
}
 .btn-primary {
     background:linear-gradient(135deg,#be185d,#e91e8c);
     color:white;
     box-shadow:0 8px 25px rgba(233,30,140,0.3);
}
 .btn-primary:hover {
     background:linear-gradient(135deg,#e91e8c,#f43fa0);
     transform:translateY(-2px);
}
 .btn-outline {
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     border:1px solid rgba(233,30,140,0.4);
     color:white;
}
 .btn-outline:hover {
     background:rgba(255,255,255,0.1);
     transform:translateY(-2px);
}
 .hero-stats {
     display:grid;
     grid-template-columns:repeat(4,1fr);
     gap:1.5rem;
     max-width:700px;
     margin:0 auto;
}
 .stat {
     text-align:center;
}
 .stat-value {
     display:block;
     font-size:clamp(1.25rem,3vw,1.75rem);
     font-weight:800;
     background:linear-gradient(135deg,#e91e8c,#f43fa0);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
     background-clip:text;
     direction: ltr;
}
 .stat-label {
     font-size:0.7rem;
     color:#9ca3af;
     margin-top:0.25rem;
     display:block;
}
 .scroll-indicator {
     position:absolute;
     bottom:2rem;
     left:50%;
     transform:translateX(-50%);
     display:flex;
     flex-direction:column;
     align-items:center;
     gap:0.5rem;
     color:#6b7280;
     font-size:0.75rem;
     animation:bounce-down 2s ease infinite;
}
/* --- SECTIONS --- */
 .section {
     padding:6rem 0;
}
 .section-bg {
     background:rgba(255,255,255,0.01);
}
 .section-header {
     text-align:center;
     margin-bottom:4rem;
}
 .section-badge {
     display:inline-flex;
     align-items:center;
     gap:0.5rem;
     padding:0.5rem 1.25rem;
     border-radius:9999px;
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.08);
     font-size:0.875rem;
     font-weight:500;
     margin-bottom:1rem;
}
 .section-badge i {
     font-size:1rem;
}
 .badge-pink {
     color:#f472b6;
}
 .badge-purple {
     color:#c084fc;
}
 .badge-yellow {
     color:#fbbf24;
}
 .section-title {
     font-size:clamp(2rem,5vw,3rem);
     font-weight:800;
     margin-bottom:1rem;
}
 .section-desc {
     font-size:1.125rem;
     color:#9ca3af;
     max-width:600px;
     margin:0 auto;
}
/* --- BIO --- */
 .bio-grid {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:3rem;
     align-items:start;
}
 .bio-text p {
     color:#d1d5db;
     font-size:1.0625rem;
     margin-bottom:1.5rem;
     line-height:2.2;
}
 .bio-facts {
     display:flex;
     flex-direction:column;
     gap:0.75rem;
}
 .fact-card {
     display:flex;
     align-items:center;
     gap:1rem;
     padding:1rem;
     border-radius:1rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     transition:0.4s;
}
 .fact-card:hover {
     transform:translateY(-4px);
     box-shadow:0 10px 30px rgba(233,30,140,0.1);
}
 .fact-icon {
     width:48px;
     height:48px;
     border-radius:0.75rem;
     display:flex;
     align-items:center;
     justify-content:center;
     flex-shrink:0;
     font-size:1.25rem;
}
 .icon-pink {
     background:rgba(233,30,140,0.15);
     color:#f472b6;
}
 .icon-purple {
     background:rgba(147,51,234,0.15);
     color:#c084fc;
}
 .fact-label {
     display:block;
     font-size:0.8125rem;
     color:#9ca3af;
}
 .fact-value {
     display:block;
     font-weight:600;
     color:white;
}
/* --- DISCOGRAPHY --- */
 .albums-grid {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:1.5rem;
}
 .album-card {
     border-radius:1rem;
     overflow:hidden;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     transition:0.4s;
     cursor:pointer;
     text-decoration:none;
     color:inherit;
     display:block;
}
 .album-card:hover {
     transform:translateY(-8px);
     box-shadow:0 20px 40px rgba(233,30,140,0.15);
}
 .album-cover {
     position:relative;
     aspect-ratio:1;
     overflow:hidden;
}
 .album-cover img {
     width:100%;
     height:100%;
     object-fit:cover;
     transition:transform 0.5s;
}
 .album-card:hover .album-cover img {
     transform:scale(1.1);
}
 .album-overlay {
     position:absolute;
     inset:0;
     background:rgba(233,30,140,0.2);
     display:flex;
     align-items:center;
     justify-content:center;
     opacity:0;
     transition:0.3s;
}
 .album-card:hover .album-overlay {
     opacity:1;
}
 .play-btn {
     width:56px;
     height:56px;
     border-radius:50%;
     background:rgba(233,30,140,0.8);
     display:flex;
     align-items:center;
     justify-content:center;
     color:white;
     box-shadow:0 4px 20px rgba(233,30,140,0.5);
}
 .play-btn svg.icon {
     width:1.5em;
     height:1.5em;
}
 .album-year-badge {
     position:absolute;
     top:0.75rem;
     left:0.75rem;
     padding:0.25rem 0.75rem;
     border-radius:9999px;
     background:rgba(255,255,255,0.1);
     backdrop-filter:blur(10px);
     color:white;
     font-size:0.75rem;
     font-weight:700;
     border:1px solid rgba(255,255,255,0.1);
}
 .album-info {
     padding:1rem;
}
 .album-info h3 {
     font-size:1rem;
     font-weight:700;
     color:white;
     margin-bottom:0.25rem;
     transition:0.3s;
}
 .album-card:hover .album-info h3 {
     color:#f472b6;
}
 .album-info p {
     font-size:0.8125rem;
     color:#9ca3af;
     margin-bottom:0.5rem;
}
 .album-meta {
     display:flex;
     justify-content:space-between;
     font-size:0.75rem;
     color:#6b7280;
}
 .album-meta .fa-num,
 .album-hero-meta .fa-num {
     font-family:'Vazirmatn',sans-serif;
     font-weight:600;
}
 .album-sales {
     font-size:0.75rem;
     color:#f472b6;
     font-weight:600;
     margin-top:0.5rem;
     padding-top:0.5rem;
     border-top:1px solid rgba(255,255,255,0.05);
}
/* --- AWARDS --- */
 .awards-grid {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:1.5rem;
}
 .award-card {
     padding:1.5rem;
     border-radius:1rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     text-align:center;
     transition:0.4s;
}
 .award-card:hover {
     transform:translateY(-6px);
     box-shadow:0 15px 35px rgba(233,30,140,0.1);
}
 .award-icon {
     width:56px;
     height:56px;
     border-radius:1rem;
     display:flex;
     align-items:center;
     justify-content:center;
     margin:0 auto 1rem;
}
 .award-icon svg.icon {
     width:1.5em;
     height:1.5em;
}
 .bg-yellow {
     background:rgba(250,204,21,0.1);
}
 .bg-pink {
     background:rgba(233,30,140,0.1);
}
 .bg-purple {
     background:rgba(147,51,234,0.1);
}
 .bg-orange {
     background:rgba(249,115,22,0.1);
}
 .bg-cyan {
     background:rgba(6,182,212,0.1);
}
 .bg-emerald {
     background:rgba(16,185,129,0.1);
}
 .award-count {
     font-size:2.25rem;
     font-weight:800;
     margin-bottom:0.5rem;
}
 .award-card h3 {
     font-size:1rem;
     font-weight:700;
     color:white;
     margin-bottom:0.5rem;
}
 .award-card p {
     font-size:0.8125rem;
     color:#9ca3af;
}
/* --- TIMELINE (Alternating Left/Right on Desktop) --- */
 .timeline {
     position:relative;
     max-width:900px;
     margin:0 auto;
     padding:0 2rem;
}
 .timeline-line {
     position:absolute;
     right:50%;
     transform:translateX(50%);
     top:0;
     bottom:0;
     width:2px;
     background:linear-gradient(to bottom,rgba(233,30,140,0.5),rgba(147,51,234,0.5),transparent);
}
 .timeline-item {
     position:relative;
     margin-bottom:3rem;
     width:44%;
}
/* Right side items (appear on the left visually in RTL) */
 .timeline-item.right {
     float:left;
     clear:both;
     text-align:left;
}
 .timeline-item.right .timeline-dot {
     position:absolute;
     top:0.5rem;
     right:-34px;
}
/* Left side items (appear on the right visually in RTL) */
 .timeline-item.left {
     float:right;
     clear:both;
     text-align:right;
}
 .timeline-item.left .timeline-dot {
     position:absolute;
     top:0.5rem;
     left:-34px;
}
 .timeline-dot {
     width:16px;
     height:16px;
     border-radius:50%;
     background:linear-gradient(135deg,#e91e8c,#9333ea);
     box-shadow:0 0 10px rgba(233,30,140,0.4);
}
 .timeline-year {
     display:inline-flex;
     align-items:center;
     gap:0.35rem;
     padding:0.25rem 0.75rem;
     border-radius:9999px;
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.08);
     color:#f472b6;
     font-size:0.8125rem;
     font-weight:700;
     margin-bottom:0.75rem;
}
 .timeline-year svg.icon {
     width:0.9em;
     height:0.9em;
}
 .timeline-card {
     padding:1.25rem;
     border-radius:1rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     transition:0.4s;
}
 .timeline-card:hover {
     transform:translateY(-4px);
     box-shadow:0 10px 30px rgba(233,30,140,0.1);
}
 .timeline-card h3 {
     font-size:1.125rem;
     font-weight:700;
     color:white;
     margin-bottom:0.5rem;
}
 .timeline-card p {
     font-size:0.875rem;
     color:#9ca3af;
     line-height:2;
}
/* Clear floats after timeline */
 .timeline::after {
     content:'';
     display:table;
     clear:both;
}
/* --- FAN CORNER --- */
 .fan-layout {
     display:flex;
     flex-direction:column;
     gap:2rem;
}
 .fan-two-col {
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:2rem;
     align-items:stretch;
}
 .fan-column {
     display:flex;
     flex-direction:column;
}
 .fan-column .fact-item {
     flex:1;
     display:flex;
     align-items:center;
}
 .fan-col-title {
     font-size:1.25rem;
     font-weight:700;
     margin-bottom:1.5rem;
     display:flex;
     align-items:center;
     gap:0.5rem;
}
 .fan-col-title svg.icon {
     width:1.125em;
     height:1.125em;
}
 .fact-item {
     display:flex;
     align-items:flex-start;
     gap:0.75rem;
     padding:1rem;
     border-radius:0.75rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     margin-bottom:0.75rem;
     transition:0.4s;
}
 .fact-item:hover {
     transform:translateY(-4px);
}
 .fact-emoji {
     flex-shrink:0;
     display:flex;
     align-items:center;
     justify-content:center;
     width:28px;
     height:28px;
     color:#f472b6;
}
 .fact-emoji svg.icon {
     width:1.25em;
     height:1.25em;
}
 .fact-item p {
     font-size:0.875rem;
     color:#d1d5db;
     line-height:2;
}
 .quote-card {
     padding:1.25rem;
     border-radius:1rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     margin-bottom:0.75rem;
     position:relative;
     transition:0.4s;
}
 .quote-card:hover {
     transform:translateY(-4px);
}
 .quote-mark {
     position:absolute;
     top:0.5rem;
     right:1rem;
     font-size:3.5rem;
     color:rgba(233,30,140,0.1);
     font-family:serif;
     line-height:1;
}
 .quote-text {
     font-size:1.0625rem;
     font-weight:600;
     color:white;
     line-height:2.2;
     margin-bottom:0.5rem;
     position:relative;
     z-index:1;
}
 .quote-context {
     font-size:0.8125rem;
     color:#6b7280;
}
 .song-list {
     display:flex;
     flex-direction:column;
     gap:0.5rem;
     flex:1;
}
 .song-item {
     display:flex;
     align-items:center;
     gap:0.75rem;
     padding:0.75rem;
     border-radius:0.75rem;
     background:rgba(255,255,255,0.03);
     border:1px solid rgba(255,255,255,0.05);
     transition:0.3s;
     flex:1;
     min-height:56px;
}
 .song-item:hover {
     background:rgba(255,255,255,0.06);
     transform:translateX(-4px);
}
 .song-item:hover .song-name {
     color:#f472b6;
}
 .song-rank {
     width:32px;
     height:32px;
     border-radius:0.5rem;
     background:linear-gradient(135deg,rgba(233,30,140,0.15),rgba(147,51,234,0.15));
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:0.8125rem;
     font-weight:700;
     color:#f472b6;
     flex-shrink:0;
}
 .song-item > div {
     flex:1;
     min-width:0;
}
 .song-name {
     display:block;
     font-size:0.875rem;
     font-weight:500;
     color:white;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
     transition:0.3s;
}
 .song-year {
     display:block;
     font-size:0.6875rem;
     color:#4b5563;
}
 .song-streams {
     font-size:0.6875rem;
     color:#9ca3af;
     flex-shrink:0;
}
/* Quote Carousel */
 .quote-carousel {
     position:relative;
     padding:2rem 3rem;
     border-radius:1.5rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     text-align:center;
     min-height:120px;
}
 .quote-carousel-slide {
     opacity:0;
     transition:opacity 0.6s ease;
     position:absolute;
     inset:0;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     padding:2rem 3rem;
}
 .quote-carousel-slide.active {
     opacity:1;
     position:relative;
}
 .quote-carousel .quote-mark {
     position:static;
     margin-bottom:0.5rem;
}
 .quote-carousel .quote-text {
     font-size:1.25rem;
     font-weight:700;
     text-align:center;
}
 .quote-carousel .quote-context {
     font-size:0.875rem;
     color:#9ca3af;
     margin-top:0.5rem;
}
/* Photo Gallery */
 .gallery-grid {
     display:grid;
     grid-template-columns:repeat(3,1fr);
     gap:1rem;
}
 .gallery-item {
     position:relative;
     border-radius:1rem;
     overflow:hidden;
     cursor:pointer;
     aspect-ratio:1;
}
 .gallery-item img {
     width:100%;
     height:100%;
     object-fit:cover;
     transition:transform 0.5s ease;
}
 .gallery-item:hover img {
     transform:scale(1.1);
}
 .gallery-item::after {
     content:'';
     position:absolute;
     inset:0;
     background:linear-gradient(to top,rgba(233,30,140,0.3),transparent);
     opacity:0;
     transition:opacity 0.3s;
}
 .gallery-item:hover::after {
     opacity:1;
}
/* Lightbox */
 .lightbox {
     position:fixed;
     inset:0;
     z-index:3000;
     display:none;
     align-items:center;
     justify-content:center;
}
 .lightbox.open {
     display:flex;
}
 .lightbox-backdrop {
     position:absolute;
     inset:0;
     background:rgba(0,0,0,0.9);
     backdrop-filter:blur(10px);
}
 .lightbox-close {
     position:absolute;
     top:1.5rem;
     left:1.5rem;
     z-index:10;
     width:48px;
     height:48px;
     border-radius:50%;
     background:rgba(255,255,255,0.1);
     color:white;
     display:flex;
     align-items:center;
     justify-content:center;
     transition:0.3s;
     border:1px solid rgba(255,255,255,0.15);
}
 .lightbox-close:hover {
     background:rgba(233,30,140,0.3);
}
 .lightbox-prev, .lightbox-next {
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     z-index:10;
     width:48px;
     height:48px;
     border-radius:50%;
     background:rgba(255,255,255,0.1);
     color:white;
     display:flex;
     align-items:center;
     justify-content:center;
     transition:0.3s;
     border:1px solid rgba(255,255,255,0.15);
}
 .lightbox-prev:hover, .lightbox-next:hover {
     background:rgba(233,30,140,0.3);
}
 .lightbox-prev {
     right:1.5rem;
}
 .lightbox-next {
     left:1.5rem;
}
 .lightbox-content {
     position:relative;
     z-index:5;
     max-width:90vw;
     max-height:85vh;
     display:flex;
     align-items:center;
     justify-content:center;
}
 .lightbox-content img {
     max-width:100%;
     max-height:80vh;
     border-radius:0.5rem;
     object-fit:contain;
}
 .lightbox-counter {
     text-align:center;
     color:#9ca3af;
     font-size:0.875rem;
     margin-top:1rem;
}
/* About Contact Cards */
 .about-contact-cards {
     display:flex;
     gap:1rem;
     flex-wrap:wrap;
     margin:1.5rem 0 2rem;
}
 .about-contact-card {
     display:flex;
     align-items:center;
     gap:1rem;
     padding:1rem 1.5rem;
     border-radius:1rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.05);
     transition:0.4s;
     text-decoration:none;
     color:inherit;
     flex:1;
     min-width:250px;
}
 .about-contact-card:hover {
     transform:translateY(-4px);
     box-shadow:0 10px 30px rgba(233,30,140,0.1);
     border-color:rgba(233,30,140,0.2);
}
/* Biography Page */
 .bio-page {
     padding-top:8rem;
}
 .bio-page-content {
     max-width:800px;
     margin:0 auto;
}
 .bio-page-content h2 {
     font-size:1.5rem;
     font-weight:700;
     color:white;
     margin:2.5rem 0 1rem;
}
 .bio-page-content p {
     color:#d1d5db;
     font-size:1.0625rem;
     line-height:2.2;
     margin-bottom:1.25rem;
}
 .fan-message {
     max-width:800px;
     margin:4rem auto 0;
     padding:3rem;
     border-radius:1.5rem;
     background:rgba(255,255,255,0.03);
     backdrop-filter:blur(20px);
     position:relative;
     text-align:center;
}
 .fan-message::before {
     content:'';
     position:absolute;
     inset:-2px;
     border-radius:1.6rem;
     padding:2px;
     background:conic-gradient(from var(--border-angle, 0deg), #e91e8c, #9333ea, #3b82f6, #9333ea, #e91e8c);
     -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite:xor;
     mask-composite:exclude;
     animation:border-rotate 4s linear infinite;
}
 @keyframes border-rotate {
     to {
         --border-angle: 360deg;
    }
}
 @property --border-angle {
     syntax:'<angle>';
     initial-value:0deg;
     inherits:false;
}
 .fan-message-heart {
     margin-bottom:1rem;
     display:inline-block;
     color:#e91e8c;
}
 .fan-message-heart svg.icon {
     width:2.5em;
     height:2.5em;
}
 .fan-message h3 {
     font-size:1.5rem;
     font-weight:800;
     color:white;
     margin-bottom:1rem;
}
 .fan-message p {
     font-size:1.0625rem;
     color:#d1d5db;
     line-height:2.4;
}
/* --- ALBUM PAGE --- */
 .album-hero {
     position:relative;
     padding:8rem 0 4rem;
     overflow:hidden;
}
 .album-hero-bg {
     position:absolute;
     inset:0;
     background-size:cover;
     background-position:center;
     filter:blur(10px) brightness(0.3);
     transform:scale(1.2);
}
 .back-link {
     display:inline-flex;
     align-items:center;
     gap:0.5rem;
     padding:0.5rem 1.25rem;
     border-radius:9999px;
     background:rgba(255,255,255,0.05);
     backdrop-filter:blur(20px);
     border:1px solid rgba(255,255,255,0.1);
     color:#f472b6;
     font-size:0.875rem;
     font-weight:500;
     margin-bottom:2rem;
     transition:0.3s;
     position:relative;
     z-index:2;
}
 .back-link:hover {
     background:rgba(255,255,255,0.1);
}
 .back-link svg.icon {
     width:1em;
     height:1em;
}
 .album-hero-grid {
     display:flex;
     align-items:flex-end;
     gap:2.5rem;
     position:relative;
     z-index:2;
}
 .album-hero-cover {
     width:280px;
     flex-shrink:0;
     border-radius:1rem;
     overflow:hidden;
     box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
 .album-hero-cover img {
     width:100%;
     aspect-ratio:1;
     object-fit:cover;
}
 .album-hero-info {
     flex:1;
}
 .album-hero-type {
     display:inline-block;
     padding:0.35rem 1rem;
     border-radius:9999px;
     background:rgba(233,30,140,0.15);
     color:#f472b6;
     font-size:0.75rem;
     font-weight:600;
     margin-bottom:0.75rem;
     border:1px solid rgba(233,30,140,0.3);
}
 .album-hero-info h1 {
     font-size:clamp(2rem,5vw,3.5rem);
     font-weight:800;
     margin-bottom:0.25rem;
     line-height:1.2;
     direction:ltr;
     text-align:right;
}
 .album-hero-info h2 {
     font-size:1.5rem;
     font-weight:600;
     color:#9ca3af;
     margin-bottom:1rem;
}
 .album-hero-meta {
     display:flex;
     align-items:center;
     gap:0.5rem;
     color:#9ca3af;
     font-size:0.9375rem;
}
 .album-download-btn {
     display:inline-flex;
     align-items:center;
     gap:0.5rem;
     margin-top:1.25rem;
     padding:0.65rem 1.5rem;
     border-radius:9999px;
     background:linear-gradient(135deg,#be185d,#e91e8c);
     color:white;
     font-family:'Vazirmatn',system-ui,sans-serif;
     font-size:0.875rem;
     font-weight:600;
     text-decoration:none;
     transition:all 0.3s;
     box-shadow:0 4px 20px rgba(233,30,140,0.4);
     border:none;
     cursor:pointer;
}
 .album-download-btn svg.icon {
     width:1.125em;
     height:1.125em;
}
 .album-download-btn:hover {
     transform:translateY(-2px);
     box-shadow:0 8px 30px rgba(233,30,140,0.5);
     background:linear-gradient(135deg,#9d174d,#db2777);
}
/* --- TRACK LIST (LTR) --- */
 .tracklist {
     display:flex;
     flex-direction:column;
     gap:0;
     max-width:800px;
     margin:0 auto;
     direction:ltr;
}
 .track-item {
     display:flex;
     align-items:center;
     gap:1rem;
     padding:1rem 1.25rem;
     border-radius:0.75rem;
     background:rgba(255,255,255,0.02);
     border:1px solid rgba(255,255,255,0.04);
     transition:all 0.3s;
     cursor:pointer;
     margin-bottom:0.5rem;
}
 .track-item:hover {
     background:rgba(233,30,140,0.08);
     border-color:rgba(233,30,140,0.2);
     transform:translateX(6px);
}
 .track-num {
     width:36px;
     height:36px;
     border-radius:0.5rem;
     background:linear-gradient(135deg,rgba(233,30,140,0.1),rgba(147,51,234,0.1));
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:0.875rem;
     font-weight:700;
     color:#f472b6;
     flex-shrink:0;
}
 .track-info {
     flex:1;
     min-width:0;
}
 .track-name {
     font-size:1rem;
     font-weight:600;
     color:white;
     transition:0.3s;
}
 .track-item:hover .track-name {
     color:#f472b6;
}
 .track-duration {
     font-size:0.8125rem;
     color:#6b7280;
     flex-shrink:0;
}
 .track-lyrics-hint {
     font-size:0.6875rem;
     color:#9333ea;
     padding:0.2rem 0.6rem;
     border-radius:9999px;
     background:rgba(147,51,234,0.1);
     border:1px solid rgba(147,51,234,0.2);
     flex-shrink:0;
     transition:0.3s;
     display:inline-flex;
     align-items:center;
     gap:0.25rem;
}
 .track-lyrics-hint svg.icon {
     width:0.75em;
     height:0.75em;
}
 .track-item:hover .track-lyrics-hint {
     background:rgba(147,51,234,0.2);
}
/* --- LYRICS MODAL --- */
 .lyrics-modal {
     position:fixed;
     inset:0;
     z-index:2000;
     display:none;
     align-items:center;
     justify-content:center;
     padding:1rem;
}
 .lyrics-modal.open {
     display:flex;
}
 .lyrics-modal::before {
     content:'';
     position:absolute;
     inset:0;
     background:rgba(0,0,0,0.85);
     backdrop-filter:blur(10px);
}
 .lyrics-modal-content {
     position:relative;
     z-index:1;
     width:100%;
     max-width:900px;
     max-height:90vh;
     background:rgba(12,12,20,0.95);
     backdrop-filter:blur(40px);
     border:1px solid rgba(233,30,140,0.2);
     border-radius:1.5rem;
     overflow:hidden;
     box-shadow:0 40px 100px rgba(0,0,0,0.5), 0 0 30px rgba(233,30,140,0.1);
     display:flex;
     flex-direction:column;
}
 .lyrics-modal-header {
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:1.5rem 2rem;
     border-bottom:1px solid rgba(255,255,255,0.05);
     flex-shrink:0;
     gap:1rem;
     direction:ltr;
}
 .lyrics-header-info {
     direction:ltr;
     text-align:left;
     min-width:0;
}
 .lyrics-modal-header h3 {
     font-size:1.25rem;
     font-weight:700;
     color:white;
     direction:ltr;
     text-align:left;
}
 .lyrics-modal-header p {
     font-size:0.8125rem;
     color:#9ca3af;
     margin-top:0.25rem;
     direction:ltr;
     text-align:left;
}
 .lyrics-body {
     overflow-y:auto;
     flex:1;
     padding:2rem;
}
 .lyrics-section-title {
     font-size:0.875rem;
     font-weight:600;
     margin-bottom:1.25rem;
     padding-bottom:0.75rem;
     border-bottom:1px solid rgba(255,255,255,0.05);
     display:flex;
     align-items:center;
     gap:0.5rem;
}
 .lyrics-section-title svg.icon {
     width:1em;
     height:1em;
}
 .lyrics-section-title.original {
     color:#f472b6;
     direction:ltr;
     text-align:left;
}
 .lyrics-section-title.translation {
     color:#c084fc;
}
 .lyrics-text {
     font-family:'Vazirmatn',system-ui,sans-serif;
     font-size:0.9375rem;
     line-height:2.2;
     color:#d1d5db;
     white-space:pre-wrap;
     word-wrap:break-word;
     direction:ltr;
     text-align:left;
}
 .lyrics-translation-section {
     margin-top:2rem;
     padding-top:2rem;
     border-top:1px solid rgba(255,255,255,0.05);
     direction:rtl;
     text-align:right;
}
 .lyrics-translation-section .lyrics-text {
     direction:rtl;
     text-align:right;
}
 .lyrics-header-actions {
     display:flex;
     align-items:center;
     gap:0.5rem;
     flex-shrink:0;
}
 .lyrics-action-btn {
     width:40px;
     height:40px;
     border-radius:50%;
     background:rgba(255,255,255,0.05);
     color:#d1d5db;
     font-size:1.125rem;
     display:flex;
     align-items:center;
     justify-content:center;
     transition:0.3s;
     border:1px solid rgba(255,255,255,0.1);
     cursor:pointer;
     padding:0;
}
 .lyrics-action-btn svg.icon {
     width:1em;
     height:1em;
}
 .lyrics-action-btn:hover {
     background:rgba(233,30,140,0.2);
     border-color:rgba(233,30,140,0.3);
     color:#f472b6;
}
 .lyrics-action-btn.copied {
     background:rgba(34,197,94,0.15);
     border-color:rgba(34,197,94,0.3);
     color:#22c55e;
}
/* --- FOOTER --- */
 .footer {
     border-top:1px solid rgba(255,255,255,0.05);
     padding:2rem 0 0;
}
 .footer-grid {
     display:grid;
     grid-template-columns:1.5fr 1fr 1fr 1fr;
     gap:2.5rem;
     margin-bottom:2rem;
}
 .footer-brand p {
     font-size:0.875rem;
     color:#9ca3af;
     line-height:2;
     margin-top:1rem;
}
 .footer-links h4 {
     font-size:1rem;
     font-weight:700;
     color:white;
     margin-bottom:1rem;
}
 .footer-links ul {
     display:flex;
     flex-direction:column;
     gap:0.5rem;
}
 .footer-links a {
     font-size:0.875rem;
     color:#9ca3af;
     transition:0.3s;
     display:inline-flex;
     align-items:center;
     gap:0.35rem;
}
 .footer-links a:hover {
     color:#f472b6;
}
 .footer-links a svg.icon {
     width:0.75em;
     height:0.75em;
}
 .footer-bottom {
     border-top:1px solid rgba(255,255,255,0.05);
     padding:1.5rem 0;
     display:flex;
     justify-content:space-between;
     align-items:center;
     font-size:0.8125rem;
     color:#6b7280;
}
 .footer-bottom svg.icon {
     vertical-align:middle;
}
 .footer-social {
     display:flex;
     justify-content:center;
     gap:1rem;
     padding:0 0 2rem;
}
 .footer-social-link {
     width:40px;
     height:40px;
     border-radius:50%;
     background:rgba(255,255,255,0.05);
     border:1px solid rgba(255,255,255,0.08);
     display:flex;
     align-items:center;
     justify-content:center;
     color:#9ca3af;
     transition:all 0.3s;
}
 .footer-social-link svg.icon {
     width:1.125em;
     height:1.125em;
}
 .footer-social-link:hover {
     background:rgba(233,30,140,0.15);
     border-color:rgba(233,30,140,0.3);
     color:#f472b6;
     transform:translateY(-3px);
}
/* --- BACK TO TOP --- */
 .back-to-top {
     position:fixed;
     bottom:2rem;
     right:2rem;
     z-index:1500;
     width:48px;
     height:48px;
     border-radius:50%;
     background:linear-gradient(135deg,#be185d,#e91e8c);
     color:white;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow:0 4px 20px rgba(233,30,140,0.4);
     opacity:0;
     visibility:hidden;
     transform:translateY(20px);
     transition:all 0.4s;
     cursor:pointer;
     border:none;
}
 .back-to-top svg.icon {
     width:1.25em;
     height:1.25em;
     transform:rotate(180deg);
}
 .back-to-top.visible {
     opacity:1;
     visibility:visible;
     transform:translateY(0);
}
 .back-to-top:hover {
     transform:translateY(-4px);
     box-shadow:0 8px 30px rgba(233,30,140,0.5);
}
/* --- RESPONSIVE --- */
 @media (max-width:1024px) {
     .albums-grid {
         grid-template-columns:repeat(3,1fr);
    }
     .gallery-grid {
         grid-template-columns:repeat(3,1fr);
    }
     .awards-grid {
         grid-template-columns:repeat(2,1fr);
    }
     .footer-grid {
         grid-template-columns:repeat(2,1fr);
    }
}
 @media (max-width:768px) {
     .nav-links {
         display:none;
    }
     .nav-toggle {
         display:flex;
    }
     .mobile-menu {
         display:block;
    }
     .hero-stats {
         grid-template-columns:repeat(2,1fr);
    }
     .bio-grid {
         grid-template-columns:1fr;
    }
     .albums-grid {
         grid-template-columns:repeat(2,1fr);
    }
     .awards-grid {
         grid-template-columns:1fr;
    }
     .fan-two-col {
         grid-template-columns:1fr;
    }
     .gallery-grid {
         grid-template-columns:repeat(2,1fr);
    }
     .footer-grid {
         grid-template-columns:1fr;
    }
     .footer-bottom {
         flex-direction:column;
         gap:0.5rem;
         text-align:center;
    }
    /* Timeline: single column on mobile */
     .timeline-line {
         right:0;
         left:auto;
         transform:none;
    }
     .timeline-item {
         width:100%!important;
         float:none!important;
         margin-right:0!important;
         margin-left:0!important;
         padding-right:2.5rem!important;
         padding-left:0!important;
         text-align:right!important;
    }
     .timeline-item .timeline-dot {
         right:-8px!important;
         left:auto!important;
    }
     .album-hero-grid {
         flex-direction:column;
         align-items:center;
         text-align:center;
    }
     .album-hero-cover {
         width:200px;
    }
     .album-hero-meta {
         justify-content:center;
    }
     .lyrics-modal-content {
         max-height:95vh;
    }
     .lyrics-modal-header {
         padding:1rem 1.25rem;
    }
     .lyrics-header-actions {
         gap:0.35rem;
    }
     .lyrics-action-btn {
         width:36px;
         height:36px;
    }
}
 @media (max-width:480px) {
     .section {
         padding:4rem 0;
    }
     .hero-title {
         font-size:2.5rem;
    }
     .albums-grid {
         grid-template-columns:1fr;
    }
     .gallery-grid {
         grid-template-columns:1fr;
    }
}