/* ── Page Hero ───────────────────────────────────────────────────────────── */
.fone-page-hero {
    padding: 80px 0 64px;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-200);
}
.fone-page-hero--dark {
    background: var(--black);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.fone-page-hero--dark::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 60%, rgba(124,58,237,.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 40%, rgba(232,160,32,.08) 0%, transparent 60%);
}
.fone-page-hero--dark .fone-page-hero__content { position: relative; z-index: 1; }
.fone-page-hero--tool { min-height: 280px; display: flex; align-items: center; }

.fone-page-hero__content { max-width: 700px; }
.fone-page-hero__content--centered { max-width: 100%; text-align: center; }
.fone-page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    letter-spacing: 1px;
    color: var(--text);
    margin-top: 8px;
    line-height: 1.05;
}
.fone-page-hero--dark .fone-page-hero__title { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .fone-page-hero--dark .fone-page-hero__title { color: #FFFFFF; } }
.fone-page-hero__sub {
    font-size: 17px;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.7;
    max-width: 560px;
}
.fone-page-hero--dark .fone-page-hero__sub { color: rgba(255,255,255,.55); }
.fone-page-hero__content--centered .fone-page-hero__sub { margin: 12px auto 0; }

.fone-tools-hero-icon { color: var(--gold); margin-bottom: 16px; }
.fone-tools-hero-icon svg { width: 56px; height: 56px; }

/* ── How It Works (Tools) ────────────────────────────────────────────────── */
.fone-how-it-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.fone-how-step {
    text-align: center;
    padding: 24px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    position: relative;
}
[data-theme="dark"] .fone-how-step {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.08);
}
.fone-how-step__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-weight: 800;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.fone-how-step__title { font-weight: 800; font-size: 15px; margin-bottom: 8px; color: var(--text); }
.fone-how-step__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── Trust Badges ────────────────────────────────────────────────────────── */
.fone-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}
.fone-trust-badge {
    text-align: center;
    padding: 20px 16px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
[data-theme="dark"] .fone-trust-badge { background: var(--gray-100); border-color: rgba(255,255,255,.06); }
.fone-trust-badge__icon { font-size: 24px; margin-bottom: 8px; display: block; }
.fone-trust-badge span { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.fone-trust-badge small { font-size: 12px; color: var(--text-muted); }

/* ── Recording Page ──────────────────────────────────────────────────────── */
.fone-page-hero--recording {
    background: var(--black);
    min-height: 480px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.fone-page-hero--recording::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(124,58,237,.2) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 30%, rgba(232,160,32,.1) 0%, transparent 60%);
}
.fone-recording-hero { position: relative; z-index: 1; max-width: 680px; }
.fone-recording-hero__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 68px);
    color: var(--white);
    line-height: .95;
    letter-spacing: 1px;
    margin: 12px 0 16px;
}
.fone-text-gold { color: var(--gold); }
.fone-recording-hero__sub { font-size: 18px; color: rgba(255,255,255,.55); margin-bottom: 36px; }
.fone-recording-hero__actions { display:flex;gap:12px;flex-wrap:wrap; }

.fone-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: start;
    position: relative;
}
.fone-process-step {
    text-align: center;
    padding: 28px 16px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    position: relative;
}
[data-theme="dark"] .fone-process-step { background: var(--gray-100); border-color: rgba(255,255,255,.08); }
.fone-process-step__num { font-family: var(--font-display); font-size: 40px; color: var(--gold); opacity: .25; line-height: 1; margin-bottom: 8px; }
.fone-process-step__icon { font-size: 32px; margin-bottom: 12px; }
.fone-process-step__title { font-weight: 800; font-size: 16px; margin-bottom: 8px; color: var(--text); }
.fone-process-step__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.fone-process-step__arrow {
    position: absolute;
    right: -20px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 1;
}

/* ── About Page ──────────────────────────────────────────────────────────── */
.fone-about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}
.fone-about-story__content p { margin-bottom: 16px; font-size: 16px; line-height: 1.8; color: var(--text-muted); }
.fone-about-story__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--gray-100);
}
.fone-about-story__img { width:100%;height:100%;object-fit:cover; }
.fone-about-story__img-placeholder {
    width:100%;height:100%;
    background:var(--black);
    display:flex;align-items:center;justify-content:center;
}
.fone-logo-text--large .fone-logo-f { font-size: 36px; }
.fone-logo-text--large .fone-logo-studio { font-size: 16px; }

.fone-founder {
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: center;
    gap: 64px;
}
.fone-founder__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--gray-100);
}
.fone-founder__image img { width:100%;height:100%;object-fit:cover; }
.fone-founder__img-placeholder {
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-size:64px;
    background:var(--black);
}
.fone-founder__name { font-family: var(--font-display); font-size: 36px; color: var(--text); margin: 8px 0 4px; }
.fone-founder__role { font-size: 14px; color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.fone-founder__bio { font-size: 16px; line-height: 1.8; color: var(--text-muted); margin-top: 16px; }

/* ── Video Page ──────────────────────────────────────────────────────────── */
.fone-video-featured { margin-bottom: 40px; }
.fone-video-featured__embed {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--black);
}
.fone-video-featured__embed iframe { width:100%;height:100%;border:none;display:block; }

.fone-video-filters { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px; }

.fone-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.fone-video-card { }
.fone-video-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--black);
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.fone-video-card__thumb img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s; }
.fone-video-card:hover .fone-video-card__thumb img { transform:scale(1.05); }
.fone-video-card__thumb-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--dark-2); }
.fone-video-card__duration {
    position:absolute;bottom:8px;right:8px;
    background:rgba(0,0,0,.75);color:#fff;
    font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;
}
.fone-video-card__play-overlay {
    position:absolute;inset:0;
    background:rgba(0,0,0,.4);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity var(--duration) var(--ease);
}
.fone-video-card:hover .fone-video-card__play-overlay { opacity:1; }
.fone-video-card__info { padding:14px 16px; }
.fone-video-card__title { font-size:14px;font-weight:700;color:var(--text);line-height:1.4; }

/* ── Contact Page ────────────────────────────────────────────────────────── */
.fone-contact-page { padding: 80px 0; }
.fone-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.fone-contact-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    color: var(--text);
    margin: 8px 0 12px;
}
.fone-contact-sub { font-size: 16px; color: var(--text-muted); margin-bottom: 36px; }

.fone-contact-form { display: flex; flex-direction: column; gap: 16px; }
.fone-form-group { }
.fone-form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    outline: none;
}
[data-theme="dark"] .fone-form-input {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.1);
    color: var(--white);
}
.fone-form-input::placeholder { color: var(--gray-400); }
.fone-form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,160,32,.1);
}
.fone-form-textarea { resize: vertical; min-height: 120px; }
.fone-contact-form__success {
    padding: 14px 16px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--radius);
    font-size: 14px;
    color: #166534;
    text-align: center;
}
.fone-contact-form__error {
    padding: 14px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius);
    font-size: 14px;
    color: #991B1B;
}

.fone-contact-info { display: flex; flex-direction: column; gap: 40px; }
.fone-contact-info__block { }
.fone-contact-info__title { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 16px; }

.fone-contact-social { display: flex; flex-direction: column; gap: 12px; }
.fone-contact-social__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none !important;
    transition: all var(--duration) var(--ease);
}
[data-theme="dark"] .fone-contact-social__item {
    background: var(--gray-100);
    border-color: rgba(255,255,255,.08);
}
.fone-contact-social__item:hover { border-color: var(--gold); transform: translateX(4px); }
.fone-contact-social__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    flex-shrink: 0;
}
.fone-contact-social__icon--instagram { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.fone-contact-social__icon--facebook  { background: #1877F2; }
.fone-contact-social__icon--tiktok    { background: #000; }
.fone-contact-social__icon--twitter   { background: #000; }
.fone-contact-social__icon--youtube   { background: #FF0000; }
.fone-contact-social__platform { font-size: 14px; font-weight: 700; color: var(--text); }
[data-theme="dark"] .fone-contact-social__platform { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .fone-contact-social__platform { color: #FFFFFF; } }
.fone-contact-social__handle { font-size: 12px; color: var(--text-muted); }

.fone-contact-details { display:flex;flex-direction:column;gap:14px; }
.fone-contact-details li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-muted);
}
.fone-contact-details__icon { width:20px;flex-shrink:0;color:var(--gold);text-align:center; }
.fone-contact-details a { color: var(--gold); }
.fone-contact-details a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fone-process-grid { grid-template-columns: repeat(2,1fr); }
    .fone-process-step__arrow { display: none; }
    .fone-about-story { grid-template-columns: 1fr; gap:40px; }
    .fone-founder { grid-template-columns: 1fr; }
    .fone-founder__image { max-width: 300px; }
    .fone-contact-grid { grid-template-columns: 1fr; gap:48px; }
}
@media (max-width: 640px) {
    .fone-how-it-works { grid-template-columns: 1fr; }
    .fone-trust-badges { grid-template-columns: 1fr; }
    .fone-process-grid { grid-template-columns: 1fr; }
}