/* ========================================
   APIONA - STYLES CSS
   ======================================== */

/* VARIABLES */
:root {
    --primary: #EDD6C4;
    --primary-dark: #E0C9B7;
    --primary-light: #F7ECE4;
    --secondary: #2D5A68;
    --secondary-light: #4a7d8c;
    --tertiary: #B9D3DC;
    --accent: #F2BFA0;
    --accent-dark: #d69670;
    --accent-light: #f5d4c2;

    --bg-primary: #EDD6C4;
    --bg-secondary: #F7ECE4;
    --bg-tertiary: #FAF7F4;
    --bg-card: rgba(255, 255, 255, 0.7);

    --text-primary: #2d5a68;
    --text-secondary: #5a8391;
    --text-muted: #8ba5ae;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-xl: 48px;
}

/* RESET & GLOBAL */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Nunito', system-ui, sans-serif;
    line-height: 1.7;
    font-weight: 500;
    color: var(--secondary);
    background: var(--bg-primary);
    background-attachment: fixed;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
::selection {
    background: var(--accent-light);
    color: var(--secondary);
}

/* ANIMATIONS */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }

/* ========================================
   NAVIGATION
   ======================================== */
.nav-bar {
    background: var(--accent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}
.nav-logo {
    height: 36px;
    width: 36px;
    color: var(--secondary);
    transform: translateY(-1px);
}
.nav-logo.light { color: var(--bg-primary); }
.nav-logo.light-cream { color: var(--bg-secondary); }
.nav-title {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--secondary);
    letter-spacing: 0.02em;
}
nav { text-align: right; }
nav a {
    margin: 0 20px;
    text-decoration: none;
    color: var(--secondary);
    font-weight: 500;
    font-size: 1.15rem;
    transition: color 0.3s ease;
    position: relative;
}
nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}
nav a:hover { color: var(--secondary); }
nav a:hover::after { width: 100%; }

/* HAMBURGER MENU */
.hamburger { display: none; flex-direction: column; cursor: pointer; padding: 10px; }
.hamburger span { width: 22px; height: 2px; background: var(--secondary); margin: 3px 0; transition: 0.3s; border-radius: 2px; }
.nav-menu { display: flex; }
.nav-menu.active { display: flex; }
.nav-menu a {
    margin: 0 20px;
    text-decoration: none;
    color: var(--secondary);
    font-weight: 500;
    font-size: 1.15rem;
    transition: color 0.3s ease;
}
.nav-menu a:hover { color: var(--secondary-light); }

/* ========================================
   HEADER / HERO
   ======================================== */
header {
    background-color: var(--secondary);
    text-align: center;
    padding: 60px 20px clamp(160px, 22vw, 340px) 20px;
    position: relative;
    overflow: hidden;
}
header h1, header p, header .hero-cta { position: relative; z-index: 2; }
header h1 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 500;
    margin-bottom: 20px;
    padding-top: 70px;
    color: var(--bg-secondary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
header p {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    padding-bottom: 30px;
    color: rgba(255,255,255,0.85);
    max-width: 1400px;
    margin: 0 auto;
    font-weight: 400;
}
.hero-cta { padding-top: 15px; padding-bottom: 0px; }
.btn-hero {
    display: inline-block;
    background: var(--accent);
    color: var(--secondary);
    padding: 18px 42px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 20px rgba(232, 168, 130, 0.4);
    letter-spacing: 0.01em;
    margin-top: 10px;
}
.btn-hero:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(232, 168, 130, 0.5);
}
.hero-svg {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
    display: block;
}
.hero-micro {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cta-micro {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 420px;
}
.micro {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}
.legal-micro {
    margin-top: 2rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    opacity: 0.85;
}

/* ========================================
   SECTIONS
   ======================================== */
section {
    width: 90%;
    max-width: 1000px;
    padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 50px);
    margin: 0 auto clamp(50px, 8vw, 80px) auto;
}
section h2 {
    font-family: 'Nunito', system-ui, sans-serif;
    color: var(--secondary);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}
section p {
    font-size: 1.05rem;
    margin-bottom: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.card-bg {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 50px);
    box-shadow: 0 4px 40px rgba(45, 90, 104, 0.06);
    border: 1px solid rgba(255,255,255,0.6);
}

.solution-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 50px);
    border: 2px solid rgba(255,255,255,0.6);
}

.logo-bullets {
    list-style: none;
    padding-left: 0;
}
.logo-bullets li {
    padding-left: 32px;
    margin-bottom: 12px;
    position: relative;
}
.logo-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 894 894' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M579.829 132.936L623.669 176.777C643.195 196.303 643.195 227.961 623.669 247.487L526.089 345.068L482.248 388.909C462.722 408.435 431.063 408.435 411.537 388.909L270.116 247.487C250.59 227.961 250.59 196.303 270.116 176.777L313.957 132.936C333.483 113.41 365.141 113.41 384.667 132.936L446.893 195.161L509.118 132.936C528.644 113.41 560.302 113.41 579.829 132.936Z' fill='%232D5A68'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M388.909 482.245L389.342 481.807C389.349 481.8 389.356 481.793 389.363 481.786C408.283 462.379 408.283 431.401 389.363 411.995L388.909 411.535L247.487 270.113C227.961 250.587 196.303 250.587 176.776 270.113L132.936 313.954L132.482 314.414C113.411 333.974 113.562 365.291 132.936 384.665L195.161 446.89L132.936 509.115C113.41 528.642 113.41 560.3 132.936 579.826L176.776 623.667L177.236 624.121C196.797 643.192 228.114 643.04 247.487 623.667L388.909 482.245ZM251.73 446.89L161.22 537.4C157.315 541.305 157.315 547.637 161.22 551.542L205.061 595.382C208.966 599.288 215.298 599.288 219.203 595.383L360.624 453.961C364.529 450.056 364.529 443.724 360.624 439.819L219.203 298.398C215.298 294.492 208.966 294.492 205.061 298.398L161.22 342.238C157.315 346.144 157.315 352.475 161.22 356.38L251.73 446.89Z' fill='%232D5A68'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M717.006 270.114L760.846 313.954L761.301 314.414C780.371 333.975 780.22 365.292 760.846 384.665L698.621 446.891L760.846 509.116C780.22 528.489 780.371 559.806 761.301 579.366L760.846 579.826L579.827 760.846L579.367 761.3C559.807 780.371 528.49 780.219 509.116 760.846L446.891 698.62L384.666 760.846C365.292 780.22 333.975 780.371 314.415 761.3L313.955 760.846L270.114 717.005C250.588 697.479 250.588 665.821 270.114 646.295L646.295 270.114C665.821 250.588 697.48 250.588 717.006 270.114ZM446.891 642.052L537.4 732.561C541.306 736.467 547.637 736.467 551.543 732.561L732.562 551.542C736.467 547.637 736.467 541.305 732.562 537.4L642.052 446.89L732.562 356.381C736.467 352.476 736.467 346.144 732.562 342.239L688.721 298.398C684.816 294.493 678.485 294.493 674.579 298.398L298.399 674.579C294.493 678.484 294.493 684.816 298.399 688.721L342.239 732.562C346.144 736.467 352.476 736.467 356.381 732.562L446.891 642.052Z' fill='%232D5A68'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.diff-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
}
.diff-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--secondary);
}
.diff-card p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}
.card-bg h2 { text-align: left; }
.card-bg p { text-align: left; }

.cta-blue {
    background: var(--secondary);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 50px);
}
.cta-blue h2 { text-align: center; color: var(--bg-primary); }
.cta-blue p { text-align: center; color: var(--bg-secondary); }
.cta-blue .btn {
    background: var(--bg-primary);
    color: var(--secondary);
}
.cta-blue .btn:hover {
    background: white;
    transform: translateY(-2px);
}

/* Sections spacing */
#mission { margin-top: 0; margin-bottom: 0; }
.first-section { margin-top: clamp(50px, 8vw, 80px); }
#avancement { margin-bottom: clamp(60px, 8vw, 95px); }
#contact { margin-bottom: clamp(50px, 8vw, 100px); }
#pourquoi-apiona { margin-top: clamp(50px, 8vw, 100px); }
#faq { margin-top: 0; }

/* ========================================
   OBJECTIFS
   ======================================== */
#objectifs h2 { text-align: left; margin-bottom: 16px; }
#objectifs > p { text-align: left; margin-bottom: 40px; }
.objectifs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.objectif-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.3s ease;
}
.objectif-card:hover {
    border-color: var(--accent-light);
    transform: translateX(8px);
}
.objectif-card svg {
    flex-shrink: 0;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--primary) 100%);
    border-radius: var(--radius-sm);
}
.objectif-content h3 {
    color: var(--secondary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.objectif-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

/* ========================================
   BENEFICIAIRES GRID
   ======================================== */
#beneficiaires { padding-left: 0; padding-right: 0; padding-top: clamp(16px, 3vw, 30px); padding-bottom: clamp(16px, 3vw, 30px); }
#beneficiaires h2 { text-align: center; margin-bottom: 20px; }
#beneficiaires p { margin-bottom: 20px; }
.beneficiaires-center { text-align: center; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 40px;
    width: 100%;
}
.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 36px 28px;
    text-align: left;
    box-shadow: 0 2px 24px rgba(45, 90, 104, 0.05);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(45, 90, 104, 0.12);
    border-color: var(--accent-light);
}
.card h3 {
    color: var(--secondary);
    margin-bottom: 12px;
    font-size: 1.15rem;
    font-weight: 600;
}
.card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.6;
}
.card svg {
    margin-bottom: 20px;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--primary) 100%);
    border-radius: var(--radius-sm);
}

/* ========================================
   IMPACT
   ======================================== */
#impact {
    text-align: center;
    background: var(--secondary);
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 50px);
}
#impact h2 {
    color: var(--bg-secondary);
    margin-bottom: 16px;
}
#impact > p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
}
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.impact-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    padding: 32px 24px;
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(255,255,255,0.1);
}
.impact-card:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-6px);
    border-color: var(--accent);
}
.impact-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.impact-icon svg {
    width: 28px;
    height: 28px;
    color: var(--secondary);
}
.impact-card h3 {
    color: var(--bg-secondary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.impact-card p {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--secondary);
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 20px rgba(232, 168, 130, 0.3);
}
.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(232, 168, 130, 0.4);
}

/* ========================================
   CONTACT FORM
   ======================================== */
.contact-form input, .contact-form textarea {
    background: var(--bg-primary);
    width: 100%;
    padding: 18px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(45, 90, 104, 0.1);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: all 0.3s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232, 168, 130, 0.15);
}
.contact-form button {
    background: var(--accent);
    color: var(--secondary);
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 20px rgba(232, 168, 130, 0.3);
}
.contact-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(232, 168, 130, 0.4);
}

/* ========================================
   FAQ
   ======================================== */
#faq { padding-left: 0; padding-right: 0; }
#faq h2 { text-align: center; margin-bottom: 40px; }
.faq-item {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}
.faq-item:hover { border-color: var(--accent-light); }
.faq-question {
    font-weight: 600;
    color: var(--secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
}
.faq-question::after {
    content: '+';
    font-size: 1.4em;
    font-weight: 400;
    color: var(--accent);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.faq-answer p { padding-top: 16px; margin-bottom: 0; text-align: left; color: var(--text-secondary); }
.faq-item.active .faq-answer { max-height: 200px; }

/* ========================================
   NEWSLETTER
   ======================================== */
#newsletter h2 { text-align: center; }
#newsletter > p { text-align: center; }
.newsletter-form {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}
.newsletter-form input[type="email"] {
    padding: 16px 24px;
    border: 1px solid rgba(45, 90, 104, 0.1);
    border-radius: 50px;
    font-size: 1rem;
    min-width: 300px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.3s ease;
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232, 168, 130, 0.15);
}
.newsletter-form button {
    background: var(--accent);
    color: var(--secondary);
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 20px rgba(232, 168, 130, 0.3);
}
.newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(232, 168, 130, 0.4);
}

/* ========================================
   AVANCEMENT
   ======================================== */
#avancement {
    text-align: center;
}
#avancement h2 { text-align: center; }
#avancement p { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 50px; }

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: var(--accent);
    color: var(--secondary);
    padding: 60px 40px 40px;
    margin-top: 60px;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.footer-section h4 {
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary);
}
.footer-section p, .footer-section a {
    font-size: 0.9rem;
    color: var(--secondary);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
.footer-section a:hover { color: var(--accent-dark); }
.footer-bottom {
    border-top: 1px solid var(--secondary);
    padding-top: 24px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-bottom p { color: var(--secondary); font-size: 0.85rem; }
.social-links { display: flex; gap: 12px; }
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.1);
    color: var(--secondary);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.social-links a:hover {
    background: var(--secondary);
    color: var(--accent);
    transform: translateY(-3px);
}

/* ========================================
   ABOUT PAGE SPECIFIC
   ======================================== */
.page-header {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
}
.page-header h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--secondary);
    margin-bottom: 16px;
    font-weight: 700;
}
.page-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Main content for pages */
main {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) 0;
}
main section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Founder Section */
.founder-section {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 50px);
    box-shadow: 0 4px 40px rgba(45, 90, 104, 0.06);
    border: 1px solid rgba(255,255,255,0.6);
    margin-bottom: 40px;
}
.founder-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.founder-photo {
    flex-shrink: 0;
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--accent);
    box-shadow: 0 4px 20px rgba(45, 90, 104, 0.1);
}
.founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 35%;
    transform: scale(1);
}
.founder-photo .placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 4px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.founder-info h2 {
    font-size: 1.6rem;
    color: var(--secondary);
    margin-bottom: 8px;
}
.founder-info .role {
    font-size: 1.1rem;
    color: var(--accent-dark);
    font-weight: 600;
    margin-bottom: 20px;
}
.founder-info p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.8;
}

/* Mission Section (about page cards) */
.mission-section {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: clamp(32px, 5vw, 50px);
    box-shadow: 0 4px 40px rgba(45, 90, 104, 0.06);
    border: 1px solid rgba(255,255,255,0.6);
}
.mission-section h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--secondary);
    margin-bottom: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.mission-section p {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.8;
}
.mission-section ul {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.8;
    padding-left: 20px;
}
.mission-section li {
    margin-bottom: 8px;
}
.mission-section .highlight {
    color: var(--secondary);
    font-weight: 600;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.value-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.value-item strong {
    color: var(--secondary);
    white-space: nowrap;
}
.closing-statement {
    text-align: center;
    font-size: 1.15rem;
    color: var(--secondary);
    font-weight: 600;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(45, 90, 104, 0.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media(max-width: 768px) {
    /* Header */
    header { padding: 25px 20px clamp(100px, 25vw, 160px) 20px; }
    header h1 { padding-top: 35px; font-size: 1.7rem; margin-bottom: 10px; }
    header p { padding-bottom: 12px; }
    .hero-cta { padding-top: 5px; padding-bottom: 15px; }
    .cta-micro { max-width: 260px; margin: 0 auto; font-size: 0.75rem; }

    /* Sections */
    section { width: 92%; padding: 32px 24px; margin: 16px auto; }
    .grid { grid-template-columns: 1fr; }

    /* Mobile menu */
    .hamburger { display: flex; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    .nav-menu.active { display: flex; }
    .nav-menu a { margin: 12px 0; text-align: center; }
    .nav-menu a::after { display: none; }
    .nav-bar { position: relative; padding: 14px 20px; }

    /* Spacing mobile */
    #avancement { margin-top: 0; }

    /* Impact */
    .impact-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Diff grid mobile */
    .diff-grid { grid-template-columns: 1fr; }

    /* Footer responsive */
    .footer-content { flex-direction: column; text-align: center; gap: 30px; }
    .footer-section { width: 100%; }
    .social-links { justify-content: center; }

    /* Newsletter */
    .newsletter-form { flex-direction: column; align-items: center; }
    .newsletter-form input[type="email"] { min-width: auto; width: 100%; max-width: 320px; }

    /* About page */
    .founder-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .founder-photo img,
    .founder-photo .placeholder {
        width: 160px;
        height: 160px;
    }
    .founder-photo {
        width: 160px;
        height: 160px;
    }
}

/* FAQ Page */
.faq-page-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 60px;
}

/* Contact Page - Two Column Layout */
.contact-main {
    max-width: none;
    width: 100%;
    padding-top: 100px;
    min-height: calc(100vh - 200px);
}

.contact-container {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 0 80px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10%;
    align-items: start;
}

.contact-form-side {
    width: 100%;
}

.contact-info-side h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--secondary);
    margin-bottom: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.contact-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.contact-section {
    margin-bottom: 32px;
}

.contact-section h2 {
    font-size: 1.2rem;
    color: var(--secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-section a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-section a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Contact Form New Style */
.contact-form-new {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232D5A68' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.btn-submit {
    padding: 16px 32px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-top: 8px;
}

.btn-submit:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 24px 60px;
    }

    .contact-info-side h1 {
        font-size: 2rem;
    }
}