/* ── Hero ────────────────────────────────────────────────────────────────── */
.fone-hero {
    position: relative;
    background: var(--black);
    color: var(--white);
    overflow: hidden;
    padding: 100px 0 80px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    transition: background .25s;
}

/* Light mode hero — switches to light */
[data-theme="light"] .fone-hero {
    background: var(--off-white);
    color: var(--text);
}
[data-theme="light"] .fone-hero__title { color: var(--text); }
[data-theme="light"] .fone-hero__subtitle { color: var(--text-muted); }
[data-theme="light"] .fone-hero__bg-circle--1,
[data-theme="light"] .fone-hero__bg-circle--2 { opacity: .4; }
[data-theme="light"] .fone-hero__stat {
    background: rgba(255,255,255,.9);
    border-color: var(--gray-200);
    box-shadow: var(--shadow);
}
[data-theme="light"] .fone-hero__stat-num   { }
[data-theme="light"] .fone-hero__stat-label { color: var(--text-muted); }
[data-theme="light"] .fone-hero__img-placeholder {
    background: linear-gradient(135deg, #e8e8f0 0%, #d0d0e0 100%);
}
[data-theme="light"] .fone-hero__wave { color: var(--text-muted); }
[data-theme="light"] .fone-hero__btn-outline {
    border-color: var(--gray-200) !important;
    color: var(--text) !important;
}
[data-theme="light"] .fone-hero__btn-outline:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

@media (prefers-color-scheme: light) {
    .fone-hero { background: var(--off-white); color: var(--text); }
    .fone-hero__title { color: var(--text); }
    .fone-hero__subtitle { color: var(--text-muted); }
    .fone-hero__stat { background: rgba(255,255,255,.9); border-color: var(--gray-200); box-shadow: var(--shadow); }
    .fone-hero__stat-label { color: var(--text-muted); }
    .fone-hero__img-placeholder { background: linear-gradient(135deg, #e8e8f0 0%, #d0d0e0 100%); }
    .fone-hero__wave { color: var(--text-muted); }
    .fone-hero__btn-outline { border-color: var(--gray-200) !important; color: var(--text) !important; }
    .fone-hero__btn-outline:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
}
.fone-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 2;
}
.fone-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,.5);
    margin-bottom: 20px;
}
.fone-hero__eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

.fone-hero__title {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 92px);
    line-height: .95;
    letter-spacing: 1px;
    color: #FFFFFF;
    margin-bottom: 24px;
}
.fone-hero__title--accent {
    color: #7C3AED;
}
[data-theme="dark"] .fone-hero__title--accent { color: var(--gold); }

.fone-hero__subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    max-width: 460px;
    margin-bottom: 36px;
}
.fone-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.fone-hero__btn-outline {
    border-color: rgba(255,255,255,.25) !important;
    color: #FFFFFF !important;
}
.fone-hero__btn-outline:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.fone-hero__wave {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.3);
}
.fone-hero__wave svg rect { fill: rgba(232,160,32,.5); }
.fone-hero__wave-text { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* Hero visual */
.fone-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.fone-hero__img-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    border-radius: 24px;
    overflow: hidden;
}
.fone-hero__img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}
.fone-hero__img-placeholder {
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.06);
}
.fone-hero__img-glow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(to bottom, transparent 60%, rgba(232,160,32,.12) 100%);
    pointer-events: none;
}
/* Floating stats */
.fone-hero__stat {
    position: absolute;
    background: rgba(10,10,15,.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
}
.fone-hero__stat--1 { top: 20%; left: -32px; }
.fone-hero__stat--2 { bottom: 20%; right: -32px; }
.fone-hero__stat-num { display: block; font-family: var(--font-display); font-size: 28px; color: var(--gold); line-height: 1; }
.fone-hero__stat-label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; display: block; }

/* BG circles */
.fone-hero__bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.fone-hero__bg-circle--1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%);
    top: -200px; right: -100px;
}
.fone-hero__bg-circle--2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(232,160,32,.08) 0%, transparent 70%);
    bottom: -100px; left: 10%;
}

/* ── Featured Track ───────────────────────────────────────────────────────── */
.fone-featured__card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 24px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 20px 28px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--duration) var(--ease);
}
[data-theme="dark"] .fone-featured__card {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.08);
}
.fone-featured__card:hover { box-shadow: var(--shadow-lg); }

.fone-featured__art {
    width: 80px; height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-100);
}
.fone-featured__art img { width:100%;height:100%;object-fit:cover;display:block; }
.fone-featured__art-placeholder {
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background: linear-gradient(135deg,#1a1a2e,#0d0d1a);
    color: var(--gold);
}

.fone-featured__meta { margin-bottom: 6px; }
.fone-featured__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.fone-featured__artist { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }

.fone-featured__player { display: flex; align-items: center; gap: 12px; }
.fone-featured__progress-bar {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    cursor: pointer;
    max-width: 300px;
}
.fone-featured__progress-fill { height:100%;background:var(--gold);border-radius:2px;width:0%;transition:width .1s linear; }
.fone-featured__time { font-size:12px;color:var(--text-muted);white-space:nowrap; }

.fone-featured__actions { display:flex;gap:10px;flex-shrink:0; }

/* ── Artists Section ─────────────────────────────────────────────────────── */
.fone-section-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 32px;
}
.fone-section-header.fone-section-header--left.fone-artists-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.fone-artists__grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.fone-artists__grid::-webkit-scrollbar { display: none; }

.fone-artist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    min-width: 150px;
    padding: 24px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    background: var(--white);
    transition: all var(--duration) var(--ease);
    cursor: pointer;
    flex-shrink: 0;
}
[data-theme="dark"] .fone-artist-card {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.08);
}
.fone-artist-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.fone-artist-card__photo {
    position: relative;
    width: 88px; height: 88px;
    margin-bottom: 14px;
}
.fone-artist-card__photo img { width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--gray-200); }
.fone-artist-card:hover .fone-artist-card__photo img { border-color: var(--gold); }
.fone-artist-card__placeholder {
    width:100%;height:100%;border-radius:50%;
    background: linear-gradient(135deg,#1a1a2e,#0d0d1a);
    display:flex;align-items:center;justify-content:center;font-size:28px;
}
.fone-artist-card__rank {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fone-artist-card__name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; white-space: nowrap; }
.fone-artist-card__meta { font-size: 11px; color: var(--text-muted); }

/* ── Top Tracks ──────────────────────────────────────────────────────────── */
.fone-top-tracks .fone-section-header,
.fone-tracks .fone-sec-row { text-align: left !important; justify-content: space-between; }
.fone-top-tracks .fone-section-header { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.fone-tracks-list { display: flex; flex-direction: column; gap: 4px; }
.fone-track-row {
    display: grid;
    grid-template-columns: 48px 60px 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: all var(--duration) var(--ease);
    cursor: pointer;
}
.fone-track-row:hover {
    background: var(--gray-50);
    border-color: var(--gray-200);
}
[data-theme="dark"] .fone-track-row:hover {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.06);
}
.fone-track-row.playing { background: rgba(232,160,32,.06); border-color: rgba(232,160,32,.2); }

.fone-track-row__num { display: flex; align-items: center; justify-content: center; }
.fone-track-row__index { font-size: 14px; color: var(--text-muted); font-weight: 600; }
.fone-track-row__play {
    display: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    color: var(--black);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--duration) var(--ease);
}
.fone-track-row__play:hover { transform: scale(1.1); }
.fone-track-row:hover .fone-track-row__index { display: none; }
.fone-track-row:hover .fone-track-row__play { display: flex; }
.fone-track-row.playing .fone-track-row__index { display: none; }
.fone-track-row.playing .fone-track-row__play { display: flex; }

.fone-track-row__art { width:48px;height:48px;border-radius:8px;overflow:hidden;background:var(--gray-100); }
.fone-track-row__art img { width:100%;height:100%;object-fit:cover; }
.fone-track-row__art-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#0d0d1a);color:var(--gold); }

.fone-track-row__info { min-width: 0; }
.fone-track-row__title { display:block;font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
.fone-track-row__title:hover { color: var(--gold); }
.fone-track-row__artist { font-size:12px;color:var(--text-muted); }
.fone-track-row__tag { }
.fone-track-row__stats { display:flex;align-items:center;gap:8px; }
.fone-track-row__dl-count { display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted); }
.fone-track-row__actions { display:flex;gap:6px;opacity:0;transition:opacity var(--duration) var(--ease); }
.fone-track-row:hover .fone-track-row__actions { opacity:1; }

/* ── AI Tools ────────────────────────────────────────────────────────────── */
.fone-tools__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.fone-tool-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--duration) var(--ease);
}
.fone-tool-card:hover { border-color: rgba(255,255,255,.2); }
.fone-tool-card--gold { border-color: rgba(232,160,32,.3); background: rgba(232,160,32,.04); }
.fone-tool-card--gold:hover { border-color: var(--gold); }
.fone-tool-card__icon { color: var(--gold); }
.fone-tool-card__title { font-family: var(--font-display); font-size: 24px; color: #FFFFFF; letter-spacing: .5px; }
.fone-tool-card__desc { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; flex: 1; }

/* ── About Teaser ────────────────────────────────────────────────────────── */
.fone-about-teaser__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}
.fone-about-teaser__text { font-size: 16px; line-height: 1.8; color: var(--text-muted); margin: 20px 0 32px; }
.fone-about-teaser__stats { display: flex; gap: 32px; margin-bottom: 32px; }
.fone-about-teaser__stat { }
.fone-about-teaser__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--gray-100);
}
.fone-about-teaser__image img { width:100%;height:100%;object-fit:cover; }
.fone-about-teaser__img-placeholder {
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1a1a2e,#0d0d1a);
    color:var(--gold);
}

/* ── Testimonials ────────────────────────────────────────────────────────── */
.fone-testimonials__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.fone-testimonial-card { padding: 28px; }
.fone-testimonial-card__stars { display:flex;gap:3px;color:var(--gold);margin-bottom:16px; }
.fone-testimonial-card__quote { font-size:15px;line-height:1.7;color:var(--text-muted);margin-bottom:20px;font-style:italic; }
.fone-testimonial-card__author { display:flex;align-items:center;gap:12px; }
.fone-testimonial-card__avatar {
    width:40px;height:40px;border-radius:50%;
    background:var(--gold);color:var(--black);
    font-weight:800;font-size:16px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.fone-testimonial-card__name { font-size:14px;font-weight:700;color:var(--text); }
.fone-testimonial-card__role { font-size:12px;color:var(--text-muted); }

/* ── CTA Banner ──────────────────────────────────────────────────────────── */
.fone-cta-banner {
    background: var(--black);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}
.fone-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(232,160,32,.08) 0%, transparent 60%);
}
.fone-cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.fone-cta-banner__title {
    font-family: var(--font-display);
    font-size: clamp(28px,4vw,44px);
    color: #FFFFFF;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.fone-cta-banner__sub { font-size: 16px; color: rgba(255,255,255,.55); }
.fone-cta-banner__actions { display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap; }

/* ── Share Modal ─────────────────────────────────────────────────────────── */
.fone-share-backdrop {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.fone-share-backdrop.open { opacity:1;pointer-events:all; }
.fone-share-modal {
    position: fixed; z-index: 9991;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    border-radius: 24px 24px 0 0;
    padding: 20px 24px 40px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-width: 540px;
    margin: 0 auto;
    box-shadow: 0 -16px 48px rgba(0,0,0,.15);
}
[data-theme="dark"] .fone-share-modal {
    background: #1A1A26;
    border-top-color: rgba(255,255,255,.08);
}
.fone-share-modal.open { transform: translateY(0); }
.fone-share-modal__handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--gray-200);
    margin: 0 auto 20px;
}
.fone-share-modal__header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}
[data-theme="dark"] .fone-share-modal__header { border-bottom-color: rgba(255,255,255,.08); }
.fone-share-modal__song-title { font-size:15px;font-weight:700;color:var(--text); }
.fone-share-modal__song-artist { font-size:12px;color:var(--text-muted); }
.fone-share-modal__close {
    width:32px;height:32px;border-radius:50%;
    border:1px solid var(--gray-200);
    background:var(--gray-50);color:var(--text-muted);
    font-size:13px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all var(--duration) var(--ease);
}
.fone-share-modal__close:hover { border-color:#EF4444;color:#EF4444; }
.fone-share-modal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.fone-share-opt {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 16px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}
[data-theme="dark"] .fone-share-opt {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}
.fone-share-opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.fone-share-opt__icon {
    width:44px;height:44px;border-radius:12px;
    background:var(--gray-100);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:900;color:var(--white);
}
.fone-share-opt__icon--wa  { background:#25D366; }
.fone-share-opt__icon--fb  { background:#1877F2;font-size:24px; }
.fone-share-opt__icon--tw  { background:#000; }
.fone-share-opt__icon--sms { background:#34C759; }
.fone-share-opt__icon--em  { background:var(--gold);color:var(--black) !important; }
.fone-share-opt__icon--link { background:var(--gray-200); }
[data-theme="dark"] .fone-share-opt__icon--link { background:rgba(255,255,255,.1); }
.fone-share-opt__label { font-size:11px;font-weight:600;color:var(--text-muted);text-align:center; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fone-hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .fone-hero__subtitle { max-width: 100%; margin-left:auto;margin-right:auto; }
    .fone-hero__actions { justify-content: center; }
    .fone-hero__stat--1 { left: 0; top: 10%; }
    .fone-hero__stat--2 { right: 0; bottom: 10%; }
    .fone-featured__card { grid-template-columns: 60px 1fr; }
    .fone-featured__actions { grid-column: 1/-1; }
    .fone-testimonials__grid { grid-template-columns: 1fr; }
    .fone-tools__grid { grid-template-columns: 1fr; }
    .fone-about-teaser__inner { grid-template-columns: 1fr; gap: 40px; }
    .fone-cta-banner__inner { flex-direction: column; text-align: center; }
    .fone-cta-banner__actions { justify-content: center; }
}
@media (max-width: 768px) {
    .fone-track-row { grid-template-columns: 40px 40px 1fr auto; }
    .fone-track-row__tag, .fone-track-row__stats { display: none; }
    .fone-track-row__actions { opacity: 1; }
    .fone-artists__grid { gap: 12px; }
    .fone-testimonials__grid { grid-template-columns: 1fr; }
}