/* =============================================================================
   VITRINE — Hugo Galofaro
   Couleurs : bleu marine #0B1F3A + orange #FF6B35
   ============================================================================= */

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root, [data-theme="light"] {
    /* Couleurs de marque (constantes dans les 2 modes) */
    --c-brand: #0B1F3A;
    --c-brand-light: #1B3358;
    --c-accent: #FF6B35;
    --c-accent-dark: #E5552A;
    /* Couleurs adaptatives */
    --c-primary: #0B1F3A;
    --c-primary-light: #1B3358;
    --c-bg: #FFFFFF;
    --c-bg-soft: #F7F8FA;
    --c-card: #FFFFFF;
    --c-text: #1A1A1A;
    --c-text-muted: #6B7280;
    --c-border: #E5E7EB;
    --c-header-bg: rgba(255,255,255,.95);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(11,31,58,.08);
    --shadow-lg: 0 10px 25px rgba(11,31,58,.12);
    --radius: 12px;
    --radius-sm: 6px;
    --container: 1200px;
}

[data-theme="dark"] {
    --c-accent: #FF8455;
    --c-accent-dark: #FF6B35;
    /* Couleurs adaptatives — primary devient clair pour les titres */
    --c-primary: #F1F5F9;
    --c-primary-light: #E2E8F0;
    --c-bg: #0F172A;
    --c-bg-soft: #1E293B;
    --c-card: #1E293B;
    --c-text: #F1F5F9;
    --c-text-muted: #94A3B8;
    --c-border: #334155;
    --c-header-bg: rgba(15,23,42,.95);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.5);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent-dark); }

h1, h2, h3, h4 { color: var(--c-primary); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; margin-bottom: .5rem; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* --- Header --- */
.header {
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(8px);
    transition: background .3s, border-color .3s;
}
body { transition: background .3s, color .3s; }
.theme-toggle {
    background: transparent; border: 1px solid var(--c-border); border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--c-bg-soft); transform: scale(1.05); }

/* Burger menu mobile */
.nav-toggle {
    display: none; background: transparent; border: none; cursor: pointer;
    width: 40px; height: 40px; padding: 0; position: relative; z-index: 101;
}
.nav-toggle span {
    display: block; width: 24px; height: 2px; background: var(--c-text);
    margin: 5px auto; border-radius: 2px; transition: all .3s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; max-width: var(--container); margin: 0 auto;
}
.brand {
    font-weight: 800; font-size: 1.25rem; color: var(--c-primary);
}
.brand span { color: var(--c-accent); }

.nav { display: flex; gap: 2rem; }
.nav a {
    color: var(--c-text); font-weight: 500;
    position: relative; padding: .25rem 0;
}
.nav a:hover { color: var(--c-primary); }
.nav a.active::after {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 2px; background: var(--c-accent);
}

/* --- Footer --- */
.footer {
    background: var(--c-brand); color: rgba(255,255,255,.85);
    padding: 3rem 0 1.5rem; margin-top: 5rem;
}
.footer h4 { color: white; }
.footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
    max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
}
.footer h4 { color: white; margin-bottom: 1rem; font-size: 1rem; }
.footer a { color: rgba(255,255,255,.85); }
.footer a:hover { color: var(--c-accent); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: .5rem; }
.footer__bottom {
    text-align: center; padding-top: 2rem; margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.15); font-size: .875rem;
}

/* --- Hero --- */
.hero {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    color: white; padding: 5rem 0 4rem; position: relative; overflow: hidden;
}
.hero h1, .hero .hero__title { color: white; }
.hero .hero__subtitle { color: rgba(255,255,255,.9); }
.hero::after {
    content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
    background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 70%);
    pointer-events: none;
}
.hero__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center;
    position: relative; z-index: 1;
}
.hero__title { color: white; margin-bottom: 1rem; }
.hero__title span { color: var(--c-accent); }
.hero__subtitle {
    font-size: 1.125rem; opacity: .9; margin-bottom: 2rem; max-width: 600px;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__photo {
    width: 280px; height: 280px; border-radius: 50%; margin: 0 auto;
    background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
    border: 4px solid rgba(255,255,255,.25); overflow: hidden;
    font-size: 6rem; font-weight: 800; color: rgba(255,255,255,.6);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600;
    border: 2px solid transparent; cursor: pointer; transition: all .2s;
    text-decoration: none; font-size: 1rem;
}
.btn-primary { background: var(--c-accent); color: white; }
.btn-primary:hover { background: var(--c-accent-dark); color: white; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary {
    background: rgba(255,255,255,.1); color: white; border-color: rgba(255,255,255,.5);
    backdrop-filter: blur(4px);
}
.btn-secondary:hover { background: rgba(255,255,255,.2); color: white; border-color: white; transform: translateY(-2px); }
.btn-outline {
    background: transparent; color: var(--c-text); border-color: var(--c-border);
}
.btn-outline:hover { background: var(--c-bg-soft); color: var(--c-text); border-color: var(--c-text-muted); }

/* --- Sections --- */
.section { padding: 5rem 0; }
.section--soft { background: var(--c-bg-soft); }
.section--accent {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    color: white;
}
.section--accent h2, .section--accent h3, .section--accent h4, .section--accent .section__header p { color: white; }
.section--accent .section__header p { opacity: .85; }
.tiktok-embed-wrap {
    display: flex; justify-content: center; max-width: 605px; margin: 0 auto;
}
.tiktok-cta {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    padding: 2rem;
}
.section--accent .btn-outline { color: white; border-color: rgba(255,255,255,.5); }
.section--accent .btn-outline:hover { background: rgba(255,255,255,.1); border-color: white; }
.section__header { text-align: center; margin-bottom: 3rem; }
.section__header h2 { margin-bottom: .5rem; }
.section__header p { color: var(--c-text-muted); }

/* --- Stats --- */
.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem; margin-top: 3rem;
}
.stat {
    text-align: center; padding: 2rem 1rem; background: var(--c-card); border-radius: var(--radius);
    box-shadow: var(--shadow-md); display: block; text-decoration: none; color: inherit;
    transition: transform .25s, box-shadow .25s;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.stat__value { font-size: 2.5rem; font-weight: 800; color: var(--c-accent); display: block; }
.stat__label { color: var(--c-text-muted); font-size: .9rem; margin-top: .5rem; }

/* --- Project cards --- */
.projects-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}
.project-card {
    background: var(--c-card); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: all .3s;
    border: 1px solid var(--c-border);
    display: flex; flex-direction: column;
}
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.project-card__media {
    display: block; aspect-ratio: 16/9; overflow: hidden;
    background: var(--c-bg-soft); position: relative;
}
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__media--placeholder {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    display: flex; align-items: center; justify-content: center;
}
.project-card__media--placeholder span {
    color: var(--c-accent); font-size: 3rem; font-weight: 800; letter-spacing: -.05em;
}
.project-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.project-card__name { color: var(--c-primary); margin-bottom: .5rem; }
.project-card__tagline { color: var(--c-text-muted); margin-bottom: 1rem; flex: 1; }
.project-card__stack { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.tag {
    display: inline-block; background: var(--c-bg-soft); color: var(--c-text);
    padding: .25rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
    border: 1px solid var(--c-border);
}
.project-card__actions { display: flex; gap: .5rem; }
.project-card__actions a {
    color: var(--c-accent); font-weight: 600; font-size: .9rem;
}

/* --- Timeline (experience) --- */
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: 2rem; }
.timeline::before {
    content: ''; position: absolute; left: .5rem; top: 0; bottom: 0;
    width: 2px; background: var(--c-border);
}
.timeline-item { position: relative; padding-bottom: 3rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: ''; position: absolute; left: -1.85rem; top: .25rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--c-accent); border: 3px solid white;
    box-shadow: 0 0 0 2px var(--c-accent);
}
.timeline-item__date {
    color: var(--c-accent); font-weight: 600; font-size: .875rem;
    margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .05em;
}
.timeline-item__role { font-size: 1.25rem; color: var(--c-text); margin-bottom: .25rem; }
.timeline-item__company { color: var(--c-text-muted); margin-bottom: .75rem; font-weight: 500; }
.timeline-item__description { margin-bottom: .75rem; }
.timeline-item__highlights { list-style: none; padding: 0; }
.timeline-item__highlights li {
    position: relative; padding-left: 1.25rem; margin-bottom: .375rem;
    color: var(--c-text);
}
.timeline-item__highlights li::before {
    content: '▸'; position: absolute; left: 0; color: var(--c-accent);
}

/* --- Skills --- */
.skills-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.skill-group {
    background: var(--c-card); padding: 1.75rem; border-radius: var(--radius);
    border: 1px solid var(--c-border);
}
.skill-group h3 { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--c-accent); }
.skill-list { list-style: none; }
.skill-list li {
    padding: .5rem 0; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px dashed var(--c-border);
}
.skill-list li:last-child { border-bottom: none; }
.skill-level {
    display: inline-flex; gap: 3px;
}
.skill-level span {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-border);
}
.skill-level span.on { background: var(--c-accent); }

/* --- About / Bio --- */
.bio {
    max-width: 800px; margin: 0 auto; font-size: 1.125rem;
    color: var(--c-text); text-align: center;
}
.bio p + p { margin-top: 1rem; }

.interests-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; margin-top: 3rem;
}
.interest-card {
    background: var(--c-card); padding: 1.75rem; border-radius: var(--radius);
    border: 1px solid var(--c-border); text-align: center;
}
.interest-card__icon { font-size: 2.5rem; margin-bottom: .75rem; }
.interest-card h3 { margin-bottom: .5rem; }
.interest-card p { color: var(--c-text-muted); font-size: .95rem; }

/* --- Contact form --- */
.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    max-width: 1000px; margin: 0 auto;
}
.contact-info h3 { margin-bottom: 1rem; }
.contact-info dl { margin-top: 1.5rem; }
.contact-info dt { font-weight: 600; color: var(--c-text-muted); margin-top: 1rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }
.contact-info dd { color: var(--c-text); margin-top: .25rem; }

.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .375rem; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: .75rem 1rem; border: 1px solid var(--c-border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem;
    transition: border-color .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: none; border-color: var(--c-accent);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-actions { margin-top: 1.5rem; }

.alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* --- Detail list (show pages) --- */
.detail-list {
    display: grid; grid-template-columns: 200px 1fr; gap: .75rem 1.5rem;
    background: var(--c-card); padding: 1.75rem; border-radius: var(--radius);
    border: 1px solid var(--c-border);
}
.detail-list dt { font-weight: 600; color: var(--c-text-muted); }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Tablette (≤ 960px) */
@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
    .hero__photo { width: 220px; height: 220px; }
    .hero__cta { justify-content: center; }
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .detail-list { grid-template-columns: 1fr; gap: .25rem 0; }
    .detail-list dt { margin-top: .75rem; }
    h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.375rem, 4vw, 2rem); }
}

/* Mobile (≤ 768px) — menu burger + compactage */
@media (max-width: 768px) {
    .container { padding: 0 1rem; }
    .section { padding: 3rem 0; }

    .nav-toggle { display: block; }
    .nav {
        position: fixed; top: 0; right: 0;
        width: min(280px, 80vw); height: 100vh;
        background: var(--c-bg); flex-direction: column;
        padding: 5rem 1.5rem 2rem; gap: .25rem;
        box-shadow: -4px 0 20px rgba(0,0,0,.15);
        transform: translateX(100%); transition: transform .3s;
        align-items: stretch; overflow-y: auto;
    }
    .nav.is-open { transform: translateX(0); }
    .nav a { padding: .875rem 1rem; border-radius: 6px; font-size: 1rem; }
    .nav a:hover, .nav a.active { background: var(--c-bg-soft); }
    .nav a.active::after { display: none; }
    .nav .theme-toggle { margin-top: 1rem; align-self: flex-start; }

    .header__inner { padding: .875rem 1rem; }

    .hero { padding: 3rem 0 2.5rem; }
    .hero__photo { width: 180px; height: 180px; font-size: 4rem; border-width: 3px; }
    .hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
    .hero__cta .btn { width: 100%; }

    .stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
    .stat { padding: 1.25rem .5rem; }
    .stat__value { font-size: 1.75rem; }
    .stat__label { font-size: .8rem; }

    .projects-grid { grid-template-columns: 1fr; gap: 1.25rem; }

    .timeline { padding-left: 1.25rem; }
    .timeline::before { left: .25rem; }
    .timeline-item::before { left: -1.125rem; width: 12px; height: 12px; }
    .timeline-item { padding-bottom: 2rem; }
    .timeline-item__role { font-size: 1.1rem; }

    .skills-grid { grid-template-columns: 1fr; gap: 1rem; }
    .skill-group { padding: 1.25rem; }

    .interests-grid { grid-template-columns: 1fr; }

    .form-field input, .form-field textarea, .form-field select { font-size: 1rem; padding: .75rem; }

    .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .footer { padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
}

/* Petit mobile (≤ 480px) */
@media (max-width: 480px) {
    .stats { grid-template-columns: 1fr; }
    .hero { padding: 2.5rem 0 2rem; }
    .hero__photo { width: 150px; height: 150px; font-size: 3.5rem; }
    .section { padding: 2.5rem 0; }
    .section__header { margin-bottom: 2rem; }
    .brand { font-size: 1.1rem; }
}

/* =============================================================================
   CASE STUDY — FRED
   ============================================================================= */

.fred-hero {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    color: white;
    padding: 4rem 0 5rem;
    position: relative;
    overflow: hidden;
}
.fred-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
.fred-hero h1 { color: white; margin-bottom: 1rem; }
.fred-hero__eyebrow { margin-bottom: 1rem; }
.fred-hero__eyebrow a { color: rgba(255,255,255,.8); font-size: .95rem; }
.fred-hero__eyebrow a:hover { color: var(--c-accent); }
.fred-hero__lead {
    font-size: 1.15rem; line-height: 1.6;
    color: rgba(255,255,255,.9);
    margin-bottom: 2rem;
    max-width: 540px;
}
.fred-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.fred-hero__cta .btn-outline { color: white; border-color: rgba(255,255,255,.4); }
.fred-hero__cta .btn-outline:hover { background: rgba(255,255,255,.1); color: white; border-color: white; }
.fred-hero__stack {
    list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
    padding: 0; margin: 0;
}
.fred-hero__stack li {
    background: rgba(255,255,255,.12);
    padding: .35rem .75rem; border-radius: 999px;
    font-size: .85rem; color: rgba(255,255,255,.9);
}
.fred-hero__visual { position: relative; }

/* Browser mockup */
.browser-mockup {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform .3s;
}
.browser-mockup:hover { transform: translateY(-4px); }
.browser-mockup__bar {
    background: var(--c-bg-soft);
    border-bottom: 1px solid var(--c-border);
    padding: .6rem .85rem;
    display: flex; align-items: center; gap: .4rem;
}
.browser-mockup__bar > span {
    width: 11px; height: 11px; border-radius: 50%;
    background: #e5e7eb;
}
.browser-mockup__bar > span:nth-child(1) { background: #ff5f57; }
.browser-mockup__bar > span:nth-child(2) { background: #febc2e; }
.browser-mockup__bar > span:nth-child(3) { background: #28c840; }
.browser-mockup__url {
    flex: 1; margin-left: .75rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: .25rem .75rem;
    font-size: .8rem; color: var(--c-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.browser-mockup img { display: block; width: 100%; height: auto; }

/* Promise block */
.fred-promise {
    max-width: 820px; text-align: center;
    font-size: 1.2rem; line-height: 1.7; color: var(--c-text);
}
.fred-promise strong { color: var(--c-primary); }

/* Pillars */
.fred-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.fred-pillar {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.fred-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fred-pillar__icon {
    font-size: 2.2rem; margin-bottom: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255, 107, 53, .1);
}
.fred-pillar h3 { color: var(--c-primary); }

/* Split sections */
.fred-split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    align-items: center;
}
.fred-split--reverse .fred-split__text { order: 2; }
.fred-split--reverse .fred-split__visual { order: 1; }
.fred-step {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem; font-weight: 700;
    color: var(--c-accent);
    letter-spacing: .1em;
    margin-bottom: .75rem;
}
.fred-split__text p { color: var(--c-text-muted); font-size: 1.05rem; line-height: 1.7; }

/* Proofs (RH + Audit) */
.fred-proofs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.fred-proof h3 { margin-top: 1.25rem; margin-bottom: .5rem; }
.fred-proof p { color: var(--c-text-muted); }

/* Mobile section */
.fred-mobile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
}
.fred-mobile__phones {
    display: flex; gap: 1rem;
}
.phone-mockup {
    background: #111;
    border-radius: 28px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
    max-width: 220px;
}
.phone-mockup img {
    border-radius: 20px;
    display: block;
    width: 100%;
}

/* Features grid */
.fred-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.fred-feature {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: transform .2s, border-color .2s;
}
.fred-feature:hover { transform: translateY(-2px); border-color: var(--c-accent); }
.fred-feature span { font-size: 1.5rem; display: block; margin-bottom: .5rem; }
.fred-feature h4 { color: var(--c-primary); font-size: 1rem; margin-bottom: .25rem; font-weight: 700; }
.fred-feature p { color: var(--c-text-muted); font-size: .9rem; line-height: 1.5; }

/* Responsive */
@media (max-width: 960px) {
    .fred-hero__inner,
    .fred-split,
    .fred-mobile { grid-template-columns: 1fr; gap: 2.5rem; }
    .fred-split--reverse .fred-split__text { order: 1; }
    .fred-split--reverse .fred-split__visual { order: 2; }
    .fred-pillars { grid-template-columns: 1fr; }
    .fred-proofs { grid-template-columns: 1fr; }
    .fred-features { grid-template-columns: repeat(2, 1fr); }
    .fred-mobile__phones { justify-content: center; }
}
@media (max-width: 480px) {
    .fred-hero { padding: 2.5rem 0 3rem; }
    .fred-features { grid-template-columns: 1fr; }
    .phone-mockup { max-width: 160px; }
}