/* ================================================================
   INDEX.HTML - STYLES SPÉCIFIQUES
   Fichier: styles/pages/index.css
   Description: Tous les styles spécifiques à la page d'accueil
================================================================ */

/* Table des matières :
   1. HERO SECTION
   2. PROBLEM SECTION
   3. HOW IT WORKS SECTION
   4. SERVICES SECTION
   5. ADVANTAGES SECTION
   6. EXPERIENCE SECTION
   7. SECURITY SECTION
   8. CTA SECTION
   9. RESPONSIVE SPÉCIFIQUE
*/

/* ==================== HERO SECTION ==================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
    background: transparent;
}

/* === HERO BACKGROUND === */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    min-height: 100vh; /* Réserver l'espace immédiatement */
    overflow: hidden; /* IMPORTANT: Contient les orbs et évite le CLS */
    contain: strict; /* Plus fort que layout paint - isole complètement du layout */
    pointer-events: none; /* Les orbs sont purement décoratifs */
}

/* Garde les gradient-orb si ils existent dans le HTML */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: float 25s ease-in-out infinite;
    contain: strict; /* Isole complètement du layout parent */
    will-change: transform, opacity; /* Optimiser les animations GPU */
    pointer-events: none; /* Purement décoratif */
    backface-visibility: hidden; /* Force le compositing GPU */
    transform-style: preserve-3d; /* Améliore le rendering GPU */
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.25) 0%, rgba(139, 115, 85, 0) 70%);
    top: -300px;
    right: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(168, 144, 128, 0.3) 0%, rgba(139, 92, 246, 0) 70%);
    bottom: -150px;
    left: -100px;
    animation-delay: -8s;
}

.orb-3 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0) 70%);
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -15s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.05);
    }
    66% {
        transform: translate(-25px, 25px) scale(0.98);
    }
}

/* === HERO CONTENT === */
.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    padding: 5rem 0;
    position: relative;
    z-index: 1;
}

.hero-text {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HERO BADGE === */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* === HERO TITLE === */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.hero-title div {
    display: block;
    margin-bottom: 0.3em;
    white-space: nowrap; /* Empêche le retour à la ligne sur desktop */
}

.gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary); /* Fallback color before gradient loads */
    display: inline-block;
}

/* === HERO SUBTITLE === */
.hero-subtitle-optimized {
    margin-bottom: 2.5rem;
}

.hero-speed-highlight {
    font-size: 1.25rem !important;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary) !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: 0.5rem;
}

.hero-speed-highlight span {
    font-size: 1.5em;
    font-weight: var(--font-weight-black);
    color: var(--primary);
    display: inline-block;
    margin: 0 0.1em;
}

.hero-human-benefit {
    font-size: 1.1rem !important;
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-medium);
}

/* === HERO DESCRIPTION === */
.hero-description-optimized {
    margin: 2.5rem 0;
}

.hero-description-optimized p {
    font-size: 1.1rem !important;
    color: var(--text-primary) !important;
    line-height: var(--line-height-relaxed);
    margin-bottom: 0.875rem !important;
}

.hero-description-optimized strong {
    color: var(--success);
    font-weight: var(--font-weight-bold);
}

/* === HERO CTA === */
.hero-cta {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.btn-primary {
    padding: 1.125rem 2.5rem;
    background: var(--gradient-1);
    color: var(--text-white);
    border: none;
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 8px 24px rgba(139, 115, 85, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(91, 111, 219, 0.5);
}

.btn-primary:active {
    transform: translateY(-1px);
}

.btn-secondary {
    padding: 1.125rem 2.5rem;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--text-white);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(139, 115, 85, 0.3);
}

/* === TRUST BADGES === */
.hero-trust-badges {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

.hero-trust-badges div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-trust-badges span {
    color: var(--success);
    font-size: 1.2em;
}

/* === HERO VISUAL (Phone Mockup) === */
.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInRight 1s ease-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Garde les styles pour floating-card s'ils existent */
.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(139, 115, 85, 0.1);
}

.card-1 {
    top: 10%;
    left: 10%;
    animation: floatCard 4s ease-in-out infinite;
}

.card-2 {
    top: 45%;
    right: 5%;
    animation: floatCard 5s ease-in-out infinite;
    animation-delay: -1.5s;
}

.card-3 {
    bottom: 10%;
    left: 20%;
    animation: floatCard 4.5s ease-in-out infinite;
    animation-delay: -2.5s;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.card-icon {
    font-size: 2.5rem;
}

.card-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.card-badge {
    display: inline-block;
    padding: 0.35rem 0.875rem;
    background: var(--gradient-3);
    color: var(--text-white);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.card-progress {
    width: 140px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-bar {
    height: 100%;
    background: var(--gradient-2);
    border-radius: var(--border-radius-full);
}

.card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.metric-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-trend {
    color: var(--success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

/* === RESPONSIVE HERO === */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        order: 2; /* Téléphone après le texte */
    }

    .hero-text {
        order: 1; /* Texte en premier */
    }
}

@media (max-width: 768px) {
    /* Stabilisation CLS - hero background mobile */
    .hero-background {
        min-height: 100vh;
        overflow: hidden;
        contain: strict;
    }

    .gradient-orb {
        contain: strict;
        backface-visibility: hidden;
    }

    .orb-1 {
        width: 400px;
        height: 400px;
    }

    .orb-2 {
        width: 350px;
        height: 350px;
    }

    .orb-3 {
        width: 300px;
        height: 300px;
    }

    /* Floating CTA plus bas sur la page d'accueil (header plus grand) */
    .floating-cta {
        top: 100px !important;
    }

    /* Hero commence bien en dessous du floating CTA */
    .hero {
        padding-top: 122px !important;
        padding-bottom: 50px;
        min-height: auto;
    }

    .hero-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 1.25rem;
        max-width: 100%;
    }

    .hero-text {
        text-align: center;
        padding-top: 0;
        margin-top: 0;
    }

    /* MISSION 1: Centrer le badge d'alerte */
    .hero-badge {
        text-align: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        display: flex;
    }

    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: 1.25rem;
        margin-top: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* FIX: "Don't make customers wait." sur 2 lignes maximum */
    .hero-title div {
        white-space: normal; /* Permet le retour à la ligne sur mobile */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }

    /* En anglais : optimisation pour affichage sur 2 lignes */
    html[lang="en"] .hero-title div[data-en="Don't make customers wait."] {
        line-height: 1.25;
        max-width: 100%;
        /* Force naturellement la coupure après "customers" grâce au point */
    }

    /* FIX CRITIQUE: Rendre le gradient text visible sur mobile */
    .gradient-text,
    .hero-gradient-multiline {
        background: none !important;
        -webkit-text-fill-color: var(--primary) !important;
        color: var(--primary) !important;
        display: inline !important;
    }

    .hero-speed-highlight {
        font-size: 1.1rem !important;
    }

    .hero-human-benefit {
        font-size: 1.03rem !important;
    }

    /* FIX: Réduire la taille du "3" géant pour éviter overflow */
    html[lang="en"] .hero-speed-highlight span {
        font-size: 1.35em !important;  /* Réduit de 1.5em à 1.35em */
    }

    .hero-description-optimized {
        margin: 1.5rem 0;
    }

    .hero-description-optimized p {
        font-size: 1.03rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.5;
    }

    /* FIX: Boutons CTA - suppression de la duplication */
    .btn-primary,
    .btn-secondary {
        width: auto;
        max-width: 280px;
        text-align: center;
        padding: 0.875rem 1.75rem !important;  /* Légèrement réduit pour mobile */
        font-size: 1.03rem !important;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    /* Cacher le mockup téléphone sur mobile */
    .hero-visual {
        display: none !important;
    }

    .hero-text {
        order: 1; /* Texte en premier */
    }

    /* FIX: Trust badges - 2 sur première ligne, 1 en dessous */
    .hero-trust-badges {
        flex-wrap: wrap !important;  /* Permet 2 lignes */
        gap: 0.5rem 1rem;  /* Vertical 0.5rem, horizontal 1rem */
        font-size: 0.75rem;  /* 12px - bien lisible */
        justify-content: center;
        margin-bottom: 2rem;  /* Espace avant le mockup */
    }

    .hero-trust-badges div {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.2rem;  /* Espace entre checkmark et texte */
    }
}

@media (max-width: 480px) {
    /* Floating CTA plus bas sur la page d'accueil (header plus grand) */
    .floating-cta {
        top: 95px !important;
    }

    /* Hero commence bien en dessous du floating CTA */
    .hero {
        padding-top: 118px !important;
        padding-bottom: 40px;
    }

    .hero-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem;
    }

    .hero-text {
        text-align: center;
        padding-top: 0;
        margin-top: 0;
    }

    .hero-badge {
        font-size: var(--font-size-xs);
        padding: 0.625rem 1.25rem;
    }

    .hero-title {
        font-size: clamp(1.375rem, 5.5vw, 1.75rem);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* FIX: Permettre retour à la ligne sur 480px */
    .hero-title div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .gradient-text {
        display: inline !important;
    }

    .hero-speed-highlight {
        font-size: 1.03rem !important;
    }

    .hero-human-benefit {
        font-size: 0.96rem !important;
    }

    /* FIX: Réduire le "3" pour 480px */
    .hero-speed-highlight span {
        font-size: 1.25em !important;  /* Plus petit pour mobile */
    }

    html[lang="en"] .hero-speed-highlight span {
        font-size: 1.25em !important;
    }

    .hero-description-optimized p {
        font-size: 0.96rem !important;
        line-height: 1.5;
    }

    /* FIX: Boutons pour 480px */
    .btn-primary,
    .btn-secondary {
        padding: 0.875rem 1.5rem !important;  /* Padding réduit */
        font-size: 0.96rem !important;  /* Texte légèrement plus petit */
        width: auto;
        max-width: 260px;  /* Réduit de 280px */
    }

    .hero-cta {
        gap: 0.75rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* FIX: Trust badges pour 480px - 2 lignes */
    .hero-trust-badges {
        flex-wrap: wrap !important;
        gap: 0.375rem 0.75rem;
        font-size: 0.6875rem;  /* 11px */
        justify-content: center;
        margin-bottom: 2rem;  /* Espace avant le mockup */
    }

    .hero-trust-badges div {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.15rem;
    }
}

@media (max-width: 375px) {
    /* Floating CTA plus bas sur la page d'accueil (header plus grand) */
    .floating-cta {
        top: 90px !important;
    }

    /* Hero commence bien en dessous du floating CTA */
    .hero {
        padding-top: 115px !important;
        padding-bottom: 35px;
    }

    .hero-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 0.875rem;
    }

    .hero-text {
        padding-top: 0;
        margin-top: 0;
        text-align: center;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .hero-title {
        font-size: 1.25rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* FIX: Permettre retour à la ligne sur 375px */
    .hero-title div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .gradient-text {
        display: inline !important;
    }

    /* FIX: Réduire le "3" pour iPhone SE */
    .hero-speed-highlight {
        font-size: 0.96rem !important;
    }

    .hero-human-benefit {
        font-size: 0.89rem !important;
    }

    .hero-speed-highlight span {
        font-size: 1.2em !important;  /* Encore plus petit */
    }

    html[lang="en"] .hero-speed-highlight span {
        font-size: 1.2em !important;
    }

    .hero-description-optimized p {
        font-size: 0.89rem !important;
        line-height: 1.5;
    }

    /* FIX: Boutons pour iPhone SE */
    .btn-primary,
    .btn-secondary {
        padding: 0.75rem 1.25rem !important;  /* Plus compact */
        font-size: 0.89rem !important;  /* 13px */
        width: auto;
        max-width: 240px;  /* Plus petit pour iPhone SE */
    }

    .hero-cta {
        gap: 0.625rem;  /* Légèrement réduit */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* FIX: Trust badges pour iPhone SE - 2 lignes */
    .hero-trust-badges {
        flex-wrap: wrap !important;
        gap: 0.3rem 0.5rem;
        font-size: 0.625rem;  /* 10px */
        justify-content: center;
        margin-bottom: 1.75rem;  /* Espace avant le mockup */
    }

    .hero-trust-badges div {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }
}

/* ==================== PROBLEM SECTION ==================== */
.problem-section {
    padding: 8rem 0;
    background: transparent;
    position: relative;
}

.problem-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 111, 71, 0.15), transparent);
}

.problem-content {
    max-width: 1100px;
    margin: 0 auto;
}

/* === PROBLEM GRID === */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

/* === PROBLEM CARD WRAPPER (for cards with image above) === */
.problem-card-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.problem-card-wrapper:hover {
    transform: translateY(-8px);
}

.problem-icon-above {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -6rem;
    position: relative;
    z-index: 2;
    transition: all var(--transition-base);
}

.problem-icon-above img {
    width: 16rem;
    height: 16rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-base);
}

.problem-icon-always {
    width: 20.8rem;
    height: 20.8rem;
}

/* === PROBLEM CARDS === */
.problem-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius-xl);
    border-left: 4px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 350px;
}

.problem-card-wrapper .problem-card {
    padding-top: 8rem;
}

.problem-card-wrapper:hover .problem-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: inherit;
    transition: height var(--transition-base);
}

.problem-card:hover::before {
    height: 100%;
}

.problem-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Card border colors */
.problem-card:nth-child(1) {
    border-left-color: #EF4444;
}

.problem-card:nth-child(2) {
    border-left-color: #F59E0B;
}

.problem-card:nth-child(3) {
    border-left-color: #8B6F47;
}

.problem-card:nth-child(4) {
    border-left-color: #EC4899;
}

.problem-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.problem-card:hover .problem-icon {
    transform: none;
}

.problem-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    margin-bottom: 1rem;
    line-height: var(--line-height-tight);
    text-align: center;
}

.problem-card:nth-child(1) .problem-title {
    color: #EF4444;
}

.problem-card:nth-child(2) .problem-title {
    color: #F59E0B;
}

.problem-card:nth-child(3) .problem-title {
    color: #8B6F47;
}

.problem-card:nth-child(4) .problem-title {
    color: #EC4899;
}

.problem-description {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin: 0 0 1.25rem 0;
}

.problem-stat {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--primary-dark);
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(139, 111, 71, 0.08), rgba(139, 111, 71, 0.15));
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--primary);
}

/* === PROBLEM IMPACT BOX === */
.problem-impact {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(251, 146, 60, 0.03) 100%);
    border: 2px solid #FEE2E2;
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.problem-impact::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.impact-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.impact-icon {
    font-size: 3rem;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.impact-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: #DC2626;
    margin: 0;
    text-align: center;
}

.impact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    position: relative;
    z-index: 1;
}

.impact-stat {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(239, 68, 68, 0.1);
    transition: all var(--transition-base);
}

.impact-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15);
    background: white;
}

.impact-value {
    font-size: 3.5rem;
    font-weight: var(--font-weight-black);
    color: #DC2626;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.impact-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.impact-subtext {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #DC2626;
    margin-top: 2rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* === PROBLEM SOLUTION TRANSITION === */
.problem-solution {
    text-align: center;
    position: relative;
    z-index: 1;
}

.solution-badge {
    display: inline-block;
    background: transparent;
    color: #8B6F47;
    padding: 0;
    border-radius: 0;
    font-weight: var(--font-weight-black);
    font-size: calc(var(--font-size-lg) * 2);
    margin-bottom: 1.5rem;
    box-shadow: none;
    transition: none;
}

.solution-badge:hover {
    transform: none;
    box-shadow: none;
}

.solution-text {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

/* === RESPONSIVE PROBLEM SECTION === */
@media (max-width: 768px) {
    .problem-section {
        padding: 4rem 0;
    }

    .problem-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .problem-card {
        padding: 2rem;
    }

    .problem-card-wrapper .problem-card {
        padding-top: 6rem;
    }

    .problem-icon-above {
        margin-bottom: -4rem;
    }

    .problem-icon-above img {
        width: 12rem;
        height: 12rem;
    }

    .problem-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .problem-title {
        font-size: var(--font-size-lg);
    }

    .problem-description {
        font-size: var(--font-size-sm);
    }

    .problem-impact {
        padding: 2rem;
    }

    .impact-title {
        font-size: var(--font-size-xl);
    }

    .impact-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .impact-stat {
        padding: 1.5rem 1rem;
    }

    .impact-value {
        font-size: 2.5rem;
    }

    .impact-label {
        font-size: var(--font-size-xs);
    }

    .impact-subtext {
        font-size: var(--font-size-base);
    }

    .solution-badge {
        padding: 0;
        font-size: calc(var(--font-size-base) * 2);
    }

    .solution-text {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .problem-section {
        padding: 3rem 0;
    }

    .problem-card {
        padding: 1.5rem;
    }

    .problem-icon {
        font-size: 2rem;
    }

    .problem-title {
        font-size: var(--font-size-base);
    }

    .problem-impact {
        padding: 1.5rem;
    }

    .impact-icon {
        font-size: 2rem;
    }

    .impact-title {
        font-size: var(--font-size-lg);
    }

    .impact-value {
        font-size: 2rem;
    }

    .solution-badge {
        padding: 0;
        font-size: calc(var(--font-size-sm) * 2);
    }

    .solution-text {
        font-size: var(--font-size-base);
    }
}

/* ==================== WHAT IS AZENFLOW SECTION ==================== */
.what-is-azenflow {
    padding: 8rem 0;
    background: transparent;
    position: relative;
    border-top: 1px solid rgba(139, 111, 71, 0.15);
}

.what-is-azenflow .section-header {
    max-width: 900px;
    margin: 0 auto 4rem;
    text-align: center;
}

.what-is-azenflow .section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.what-is-azenflow .section-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* === AZENFLOW FEATURES GRID === */
.azenflow-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* === AZENFLOW CARDS === */
.azenflow-card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 2px solid #F3F4F6;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.azenflow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #8B6F47 0%, #A68A5C 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.azenflow-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
    border-color: #8B6F47;
}

.azenflow-card:hover::before {
    transform: scaleX(1);
}

.azenflow-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
    text-align: center;
}

.azenflow-card-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-align: center;
}

.azenflow-card-subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #8B6F47;
    margin-bottom: 1.25rem;
    text-align: center;
}

.azenflow-card-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 1.5rem;
    text-align: left;
}

.azenflow-card-note {
    font-size: var(--font-size-sm);
    color: #8B6F47;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(139, 111, 71, 0.05), rgba(139, 111, 71, 0.1));
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(139, 111, 71, 0.2);
}

/* === RESPONSIVE WHAT IS AZENFLOW SECTION === */
@media (max-width: 1024px) {
    .azenflow-features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .what-is-azenflow {
        padding: 6rem 0;
    }
}

@media (max-width: 768px) {
    .what-is-azenflow {
        padding: 4rem 0;
    }

    .what-is-azenflow .section-title {
        font-size: var(--font-size-3xl);
    }

    .what-is-azenflow .section-subtitle {
        font-size: var(--font-size-lg);
    }

    .azenflow-card {
        padding: 2rem 1.5rem;
    }

    .azenflow-icon {
        font-size: 3rem;
    }

    .azenflow-card-title {
        font-size: var(--font-size-xl);
    }

    .azenflow-card-subtitle {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .what-is-azenflow {
        padding: 3rem 0;
    }

    .what-is-azenflow .section-title {
        font-size: var(--font-size-2xl);
    }

    .what-is-azenflow .section-subtitle {
        font-size: var(--font-size-base);
    }

    .azenflow-card {
        padding: 1.5rem;
    }

    .azenflow-icon {
        font-size: 2.5rem;
    }

    .azenflow-card-title {
        font-size: var(--font-size-lg);
    }

    .azenflow-card-note {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}

/* ==================== HOW IT WORKS SECTION ==================== */
.how-it-works {
    padding: 2rem 0;
    background: transparent;
    position: relative;
}

/* === STEPS CONTAINER === */
.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 5rem;
    position: relative;
    align-items: start;
}


/* === STEP CARDS === */
.step-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
    position: relative;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}



/* === STEP NUMBER === */
.step-number {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: var(--gradient-1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    box-shadow: 0 8px 24px rgba(139, 115, 85, 0.3);
    z-index: 2;
    transition: all var(--transition-base);
}

.step-card:nth-child(1) .step-number {
    background: var(--gradient-1);
}

.step-card:nth-child(2) .step-number {
    background: var(--gradient-1);
}

.step-card:nth-child(3) .step-number {
    background: var(--gradient-1);
}


/* === STEP ICON === */
.step-icon {
    font-size: 4rem;
    margin: 2rem 0 1.5rem;
    display: inline-block;
    transition: all var(--transition-base);
}

/* === STEP CARD WRAPPER (for step 2 with icon above) === */
.step-card-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-base);
}

.step-card-wrapper:hover {
    transform: translateY(-8px);
}

.step-card-wrapper .step-icon-above {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -6rem;
    position: relative;
    z-index: 2;
    transition: all var(--transition-base);
}

.step-icon-share {
    width: 16rem;
    height: 16rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-base);
}

.step-icon-set {
    width: 16rem;
    height: 16rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-base);
}

.step-icon-live {
    width: 16rem;
    height: 16rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-base);
}

.step-card-wrapper .step-card {
    padding-top: 8rem;
    position: relative;
    border-left: 4px solid var(--primary);
    height: 520px;
}

.step-card-wrapper:hover .step-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* === STEP TITLE === */
.step-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    line-height: var(--line-height-tight);
}

/* === STEP DESCRIPTION === */
.step-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 2rem;
}

/* === STEP EXAMPLES === */
.step-examples {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.step-examples li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: var(--line-height-relaxed);
}

.step-examples li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

/* === STEP NOTE === */
.step-note {
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), rgba(168, 144, 128, 0.05));
    border-left: 3px solid var(--primary);
    padding: 1.25rem;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    text-align: left;
    line-height: var(--line-height-relaxed);
}

/* === ZERO EFFORT BOX - VERSION MODERNE === */
.azenflow-summary-box {
    background: linear-gradient(135deg, rgba(139, 111, 71, 0.03) 0%, rgba(139, 111, 71, 0.03) 100%);
    border: 2px solid rgba(139, 111, 71, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.azenflow-summary-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 111, 71, 0.05) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.summary-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.summary-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--font-weight-bold);
    color: #8B6F47;
    line-height: 1.6;
}

.summary-benefits {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.summary-benefit {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.benefit-check {
    font-size: 1.5rem;
    color: #8B6F47;
    flex-shrink: 0;
}

.benefit-text {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.zero-effort-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* === CARDS POUR CHAQUE COLONNE === */
.zero-effort-not-needed,
.zero-effort-needed {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    padding: 3rem 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-base);
}

.zero-effort-not-needed {
    border: 3px solid rgba(239, 68, 68, 0.3);
}

.zero-effort-needed {
    border: 3px solid rgba(139, 111, 71, 0.5);
}

.zero-effort-not-needed:hover,
.zero-effort-needed:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.zero-effort-not-needed:hover {
    border-color: rgba(239, 68, 68, 0.6);
}

.zero-effort-needed:hover {
    border-color: rgba(139, 111, 71, 0.8);
}

.zero-effort-subtitle {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.zero-effort-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    border-radius: var(--border-radius-full);
}

.zero-effort-not-needed .zero-effort-subtitle::after {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.zero-effort-needed .zero-effort-subtitle::after {
    background: linear-gradient(90deg, #8B6F47, #8B6F47);
}

.zero-effort-not-needed ul,
.zero-effort-needed ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.zero-effort-not-needed li,
.zero-effort-needed li {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-left: 3rem;
    position: relative;
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-medium);
}

.zero-effort-not-needed li::before {
    content: '✗';
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.zero-effort-needed li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #8B6F47, #8B6F47);
    color: white;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
}

/* === PRODUCTS TRANSITION - VERSION MODERNE === */
.products-transition {
    text-align: center;
    background: linear-gradient(135deg, #8B6F47 0%, #8B6F47 50%, #8B6F47 100%);
    padding: 5rem 4rem;
    border-radius: var(--border-radius-xl);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(168, 144, 128, 0.3);
}

.products-transition::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

.products-transition::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.transition-badge {
    font-size: 6rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.3));
    animation: float 3s ease-in-out infinite;
}

.transition-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-black);
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.transition-text {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    font-weight: var(--font-weight-semibold);
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.transition-arrow {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: var(--font-weight-black);
    color: #FFFFFF;
    margin: 0;
    animation: bounceArrow 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

/* === RESPONSIVE HOW IT WORKS === */
@media (max-width: 1024px) {
    .steps-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .steps-container::before {
        display: none;
    }

    .step-number {
        top: -20px;
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 768px) {
    .how-it-works {
        padding: 1rem 0;
    }

    .steps-container {
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .step-card {
        padding: 2.5rem 2rem;
    }

    .step-icon {
        font-size: 3rem;
        margin: 1.5rem 0 1rem;
    }

    .step-title {
        font-size: var(--font-size-lg);
    }

    .step-description {
        font-size: var(--font-size-sm);
    }

    .zero-effort-box {
        padding: 3rem 2rem;
        margin-bottom: 3rem;
    }

    .zero-effort-icon {
        font-size: 3.5rem;
    }

    .zero-effort-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 2.5rem;
    }

    .zero-effort-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .zero-effort-not-needed,
    .zero-effort-needed {
        padding: 2rem 1.5rem;
    }

    .zero-effort-subtitle {
        font-size: var(--font-size-xl);
    }

    .zero-effort-not-needed li,
    .zero-effort-needed li {
        font-size: var(--font-size-base);
        padding-left: 2.5rem;
    }

    .zero-effort-not-needed li::before,
    .zero-effort-needed li::before {
        width: 30px;
        height: 30px;
        font-size: var(--font-size-lg);
    }

    .products-transition {
        padding: 3rem 2rem;
    }

    .transition-badge {
        font-size: 4rem;
    }

    .transition-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .transition-text {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }

    .transition-arrow {
        font-size: clamp(1.25rem, 4vw, 2rem);
    }
}

@media (max-width: 480px) {
    .how-it-works {
        padding: 0.75rem 0;
    }

    .step-card {
        padding: 2rem 1.5rem;
    }

    .step-number {
        width: 45px;
        height: 45px;
        font-size: var(--font-size-lg);
    }

    .step-icon {
        font-size: 2.5rem;
    }

    .step-title {
        font-size: var(--font-size-base);
    }

    .step-examples li {
        font-size: var(--font-size-xs);
    }

    .zero-effort-box {
        padding: 2.5rem 1.5rem;
    }

    .zero-effort-icon {
        font-size: 3rem;
    }

    .zero-effort-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .zero-effort-not-needed,
    .zero-effort-needed {
        padding: 1.5rem 1.25rem;
    }

    .zero-effort-subtitle {
        font-size: var(--font-size-lg);
    }

    .zero-effort-not-needed li,
    .zero-effort-needed li {
        font-size: var(--font-size-sm);
        padding-left: 2.25rem;
    }

    .zero-effort-not-needed li::before,
    .zero-effort-needed li::before {
        width: 26px;
        height: 26px;
        font-size: var(--font-size-base);
    }

    .products-transition {
        padding: 2.5rem 1.5rem;
    }

    .transition-badge {
        font-size: 3rem;
    }

    .transition-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .transition-text {
        font-size: clamp(0.875rem, 3vw, 1.125rem);
    }

    .transition-arrow {
        font-size: clamp(1.125rem, 4vw, 1.75rem);
    }
}

/* ==================== SERVICES SECTION ==================== */
.services {
    padding: 8rem 0;
    background: transparent;
    position: relative;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 111, 71, 0.15), transparent);
}

/* === SECTION HEADER (pour toutes les sections) === */
.section-header {
    text-align: center;
    margin-bottom: 3rem;  /* Réduit de 4rem à 3rem */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;  /* Supprime tous les paddings */
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    margin-bottom: 1.25rem;
    margin-top: 0;  /* Supprime complètement l'espace au-dessus du titre */
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 800px;
    margin: 0 auto;
}

/* === SERVICES ICON === */
.services-icon {
    font-size: 5rem;
    margin: 0;  /* Supprime toutes les marges */
    display: block;
    text-align: center;
    animation: float 3s ease-in-out infinite;
    line-height: 0;  /* Supprime complètement l'espace de ligne */
    padding: 0;  /* Supprime tout padding */
}

.services-icon img {
    display: block;  /* Block supprime l'espace sous l'image */
    width: 320px;
    height: 320px;
    object-fit: contain;
    margin: 0 auto;  /* Centre horizontalement */
    padding: 0;
}

/* Style spécifique pour le header de la section services */
.services .section-header {
    margin-bottom: 2rem;  /* Encore moins d'espace après le header */
}

.services .section-title {
    margin-top: 0;  /* Pas d'espace au-dessus */
    margin-bottom: 1rem;  /* Moins d'espace en dessous */
}

/* === SERVICES GRID === */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 5rem;
}

/* === SERVICE CARDS === */
.service-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-xl);
    padding: 3rem;
    transition: all var(--transition-base);
    border: 2px solid rgba(139, 115, 85, 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.7s;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(139, 115, 85, 0.2);
    border-color: rgba(139, 115, 85, 0.3);
}

/* === SERVICE BADGES === */
.service-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-badge.most-popular {
    background: linear-gradient(135deg, #8B6F47 0%, #A68A5C 100%);
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

.service-badge.seamless {
    background: linear-gradient(135deg, #8B6F47 0%, #8B6F47 100%);
    color: white;
}

.service-badge.best-value {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
}

.service-badge.enterprise {
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
    color: white;
    top: 1.5rem;
    right: 1.5rem;
}

.service-badge.setup-fee {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    top: 4.5rem;
    right: 1.5rem;
    font-size: 0.625rem;
}

.service-badge.setup-fee-warning {
    background: white;
    color: #6B7280;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.service-badge.setup-fee-required {
    background: white;
    color: #6B7280;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* === SERVICE ICON === */
.service-icon-large {
    font-size: 5rem;
    margin-bottom: 2rem;
    text-align: center;
    display: block;
    transition: all var(--transition-base);
    filter: drop-shadow(0 4px 12px rgba(139, 115, 85, 0.2));
}

.service-icon-large img {
    display: inline-block;
    width: 150px;  /* 100px × 1.5 */
    height: 150px; /* 100px × 1.5 */
    object-fit: contain;
    transition: all var(--transition-base);
}

.service-card:hover .service-icon-large {
    transform: scale(1.1) rotateY(360deg);
}

.service-card:hover .service-icon-large img {
    transform: scale(1.1) rotateY(360deg);
}

/* === SERVICE TITLE === */
.service-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    margin-bottom: 1.25rem;
    text-align: center;
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

/* === SERVICE DESCRIPTION === */
.service-description {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: var(--line-height-relaxed);
    text-align: center;
    font-size: var(--font-size-base);
}

/* === SERVICE BENEFITS === */
.service-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}

.service-benefits li {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    padding-left: 2rem;
    position: relative;
}

.service-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-lg);
}

/* === FREE TRIAL BADGE === */
.free-trial-badge {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    padding: 1.125rem 1.75rem;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-sm);
    color: #78350F;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
    border: 2px solid #FBBF24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === SERVICE PRICING === */
.service-pricing-redesigned {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

.price-main-small {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.price-secondary-small {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-top: 0.5rem;
    text-align: center;
}

/* === SERVICE BUTTON === */
.service-button {
    display: inline-block;
    width: auto;
    padding: 1rem 2rem;
    background: white;
    color: var(--primary);
    text-align: center;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    text-decoration: none;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.service-button:hover {
    background: var(--gradient-1);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(139, 115, 85, 0.4);
    border-color: transparent;
}

/* === ALL SOLUTIONS INCLUDE BOX === */
.all-include-box {
    margin-top: 4rem;
    margin-bottom: 5rem;
    padding: 4rem 3rem;
    background: white;
    border: 3px solid var(--primary);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(139, 115, 85, 0.15);
    position: relative;
    overflow: hidden;
}

.all-include-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 111, 71, 0.03) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

.all-include-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary);
    position: relative;
    z-index: 1;
}

.all-include-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.include-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.include-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    background: white;
}

.include-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.include-icon-img {
    width: 5.1rem;
    height: 5.1rem;
    object-fit: contain;
}

.include-content {
    flex: 1;
}

.include-main-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: var(--line-height-tight);
}

.include-sub-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* === FINAL CTA === */
.services-final-cta {
    margin-top: 4rem;
    padding: 4rem 3rem;
    background: white;
    border: 3px solid var(--primary);
    border-radius: var(--border-radius-xl);
    text-align: center;
    color: var(--primary);
    box-shadow: 0 20px 60px rgba(139, 115, 85, 0.15);
    position: relative;
    overflow: hidden;
}

.services-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 3s ease-in-out infinite;
}

.final-cta-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.final-cta-text {
    font-size: var(--font-size-lg);
    margin-bottom: 2.5rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-relaxed);
    position: relative;
    z-index: 1;
}

.final-cta-button {
    display: inline-block;
    padding: 1.5rem 3.5rem;
    background: var(--primary);
    color: white;
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(139, 111, 71, 0.3);
    position: relative;
    z-index: 1;
}

.final-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(139, 111, 71, 0.4);
    background: var(--primary-dark);
}

.final-cta-subtext {
    margin-top: 2rem;
    font-size: var(--font-size-sm);
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.cta-disclaimer {
    margin-top: 1rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #6B5D4F;
    text-align: center;
    font-weight: 400;
}

/* Trial Details Text */
.trial-details {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* === RESPONSIVE SERVICES === */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .all-include-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 4rem 0;
    }

    .services-icon {
        font-size: 4rem;
    }

    .services-icon img {
        width: 256px;  /* 128px × 2 (64px × 2 × 2 = 64px × 4 au total) */
        height: 256px; /* 128px × 2 (64px × 2 × 2 = 64px × 4 au total) */
    }

    .services-grid {
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .service-card {
        padding: 2rem;
    }

    .service-icon-large {
        font-size: 4rem;
    }

    .service-icon-large img {
        width: 120px;  /* 80px × 1.5 */
        height: 120px; /* 80px × 1.5 */
    }

    .service-title {
        font-size: var(--font-size-xl);
    }

    .service-description {
        font-size: var(--font-size-sm);
    }

    .service-benefits li {
        font-size: var(--font-size-xs);
    }

    .comparison-table-wrapper {
        padding: 2rem;
        margin-top: 3rem;
    }

    .comparison-title {
        font-size: var(--font-size-xl);
    }

    .comparison-table {
        font-size: var(--font-size-xs);
        min-width: 600px; /* Force minimum width for horizontal scroll */
    }

    .comparison-table th,
    .comparison-table td {
        padding: 1rem 0.75rem;
    }

    /* Show scroll hint on mobile */
    .table-scroll-hint {
        display: block !important;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.75rem;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(168, 144, 128, 0.1));
        border-radius: var(--border-radius-lg);
        margin-bottom: 1rem;
    }

    /* Ajout d'une animation pulse pour le hint */
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }

    .all-include-box {
        padding: 3rem 2rem;
        margin-top: 3rem;
    }

    .all-include-title {
        font-size: var(--font-size-xl);
    }

    .include-item {
        padding: 1.5rem;
    }

    .include-icon {
        font-size: 2rem;
    }

    .include-main-text {
        font-size: var(--font-size-sm);
    }

    .include-sub-text {
        font-size: var(--font-size-xs);
    }

    .services-final-cta {
        padding: 3rem 2rem;
        margin-top: 3rem;
    }

    .final-cta-title {
        font-size: var(--font-size-2xl);
    }

    .final-cta-text {
        font-size: var(--font-size-base);
    }

    .final-cta-button {
        padding: 1.25rem 2.5rem;
        font-size: var(--font-size-base);
    }

    .trial-details {
        font-size: 13px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .service-card {
        padding: 1.5rem;
    }

    .service-badge {
        position: static;
        display: inline-block;
        margin: 0 auto 1rem auto;
        padding: 0.5rem 1rem;
        font-size: 0.625rem;
        width: auto;
        max-width: fit-content;
        align-self: center;
    }

    .service-badge.setup-fee {
        position: static;
        margin: 0 auto 1rem auto;
        align-self: center;
    }

    .service-badge.most-popular,
    .service-badge.setup-fee-warning,
    .service-badge.setup-fee-required {
        position: static;
        margin: 0 auto 1rem auto;
        align-self: center;
        width: auto;
        max-width: fit-content;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-badge {
        order: 1;
    }

    .service-icon-large {
        font-size: 3rem;
        order: 2;
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .service-title {
        order: 3;
    }

    .service-description {
        order: 4;
    }

    .service-benefits {
        order: 5;
    }

    .free-trial-badge {
        order: 6;
    }

    .service-pricing-redesigned {
        order: 7;
    }

    .service-card > div[style*="text-align"] {
        order: 8;
    }

    .service-icon-large img {
        width: 90px;  /* 60px × 1.5 */
        height: 90px; /* 60px × 1.5 */
    }

    .service-title {
        font-size: var(--font-size-lg);
    }

    .free-trial-badge {
        padding: 0.875rem 1.25rem;
        font-size: var(--font-size-xs);
    }

    .service-button {
        padding: 0.875rem 1.5rem;
        font-size: var(--font-size-sm);
    }

    .comparison-table {
        font-size: 0.7rem;
        min-width: 600px;
    }

    /* Fix 480px - Réduire légèrement les largeurs */
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        font-size: 0.75rem !important;
        padding: 0.625rem 0.5rem !important;
    }

    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
        font-size: 0.7rem !important;
        padding: 0.625rem 0.375rem !important;
    }

    .comparison-table-wrapper {
        padding: 1.5rem 1rem;
    }

    .table-scroll-hint {
        font-size: 0.875rem;
        padding: 0.625rem;
    }

    .all-include-box {
        padding: 2rem 1.5rem;
    }

    .include-item {
        padding: 1.25rem;
        gap: 1rem;
    }

    .services-final-cta {
        padding: 2rem 1.5rem;
    }

    .final-cta-title {
        font-size: var(--font-size-xl);
    }

    .final-cta-button {
        padding: 1rem 2rem;
        font-size: var(--font-size-sm);
    }

    .comparison-table {
        font-size: 0.75rem;
        min-width: 600px; /* Augmenté pour éviter les coupures */
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap !important;
    }

    /* Première colonne plus large */
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        min-width: 190px !important;
    }
}

/* ==================== ADVANTAGES SECTION ==================== */
.advantages {
    padding: 6rem 0;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.advantage-card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    border: 2px solid var(--border-color);
    transition: all var(--transition-base);
    overflow: hidden;
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-1);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.advantage-card:hover::before {
    transform: scaleX(1);
}

.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.advantage-number {
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.2;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
}

.advantage-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.advantage-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.advantage-description {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.advantage-metric {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    text-align: center;
}

.metric-highlight {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.125rem;
}

.advantages-summary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
}

.summary-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.summary-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.summary-list li {
    padding: 1rem;
    background: white;
    border-radius: 12px;
    font-weight: 500;
}

/* ==================== EXPERIENCE SECTION ==================== */
.experience {
    padding: 10rem 0;
    background: transparent;
    position: relative;
}

.experience::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 111, 71, 0.15), transparent);
}

.experience-content {
    max-width: 1100px;
    margin: 0 auto;
}

/* === EXPERIENCE TEXT === */
.experience-text {
    text-align: center;
    margin-bottom: 5rem;
    animation: fadeInUp 0.8s ease-out;
}

.experience-subtitle {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    color: var(--primary);
    margin-bottom: 2rem;
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.experience-description {
    font-size: var(--font-size-xl);
    color: #4B5563;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.experience-japan {
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    font-size: var(--font-size-xl);
    margin-top: 2.5rem;
    letter-spacing: -0.01em;
}

/* === STATS GRID === */
.stats-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin: 5rem 0 6rem 0;
}

.stat-box-enhanced {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-xl);
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08);
    transition: all var(--transition-base);
    border: 2px solid rgba(139, 92, 246, 0.12);
    position: relative;
    overflow: hidden;
}

.stat-box-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-1);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.stat-box-enhanced:hover::before {
    transform: scaleX(1);
}

.stat-box-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(168, 144, 128, 0.2);
    border-color: rgba(168, 144, 128, 0.3);
    background: white;
}

.stat-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(0.2);
    transition: all var(--transition-base);
}

.stat-icon-img {
    width: 4.2rem;
    height: 4.2rem;
    object-fit: contain;
}

.stat-box-enhanced:hover .stat-icon {
    transform: scale(1.15) rotateY(360deg);
    filter: grayscale(0);
}

.stat-number {
    font-size: 3rem;
    font-weight: var(--font-weight-black);
    background: var(--gradient-1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.stat-text {
    color: #1F2937;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
    line-height: var(--line-height-tight);
}

.stat-subtext {
    font-size: var(--font-size-sm);
    color: #6B7280;
    font-weight: var(--font-weight-medium);
}

/* === WHY THIS MATTERS BOX === */
.why-matters-box {
    display: flex;
    gap: 2.5rem;
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.06), rgba(168, 144, 128, 0.06));
    border-left: 5px solid #5B4CB8;
    border-radius: var(--border-radius-xl);
    padding: 3rem 3.5rem;
    margin: 5rem 0;
    box-shadow: 0 4px 20px rgba(139, 115, 85, 0.08);
    transition: all var(--transition-base);
}

.why-matters-box:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 32px rgba(139, 115, 85, 0.15);
}

.why-matters-icon {
    font-size: 3rem;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

.why-matters-content {
    flex: 1;
}

.why-matters-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    color: #1F2937;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.why-matters-content p {
    font-size: var(--font-size-lg);
    color: #4B5563;
    line-height: 1.8;
}

/* === EXPERIENCE LINKS === */
.experience-links-enhanced {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 4rem;
}

.experience-link-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 115, 85, 0.15);
    border-radius: var(--border-radius-xl);
    transition: all var(--transition-base);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.experience-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 115, 85, 0.1), transparent);
    transition: left 0.6s;
}

.experience-link-card:hover::before {
    left: 100%;
}

.experience-link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(139, 115, 85, 0.2);
    border-color: var(--primary);
    background: white;
}

.link-card-icon {
    font-size: 4rem;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.experience-link-card:hover .link-card-icon {
    transform: scale(1.15) rotate(5deg);
}

/* LinkedIn specific icon */
.linkedin-icon svg {
    width: 64px;
    height: 64px;
    transition: transform var(--transition-base);
}

.linkedin-card:hover .linkedin-icon svg {
    transform: scale(1.15) rotate(-5deg);
}

.link-card-content {
    flex: 1;
}

.link-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: var(--line-height-tight);
}

.link-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--primary);
    margin-bottom: 0.75rem;
    font-weight: var(--font-weight-semibold);
}

.verified-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #8B6F47 0%, #8B6F47 100%);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-md);
    vertical-align: middle;
}

.link-card-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.link-card-arrow {
    font-size: 2.5rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.experience-link-card:hover .link-card-arrow {
    transform: translateX(8px);
}

/* === RESPONSIVE EXPERIENCE === */
@media (max-width: 1024px) {
    .stats-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .experience {
        padding: 5rem 0;
    }

    .experience-text {
        margin-bottom: 4rem;
    }

    .experience-subtitle {
        font-size: var(--font-size-xl);
    }

    .experience-description {
        font-size: var(--font-size-base);
    }

    .experience-japan {
        font-size: var(--font-size-lg);
    }

    .stats-grid-enhanced {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin: 3rem 0;
    }

    .stat-box-enhanced {
        padding: 2rem 1.5rem;
    }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-number {
        font-size: 2.25rem;
    }

    .stat-text {
        font-size: var(--font-size-xs);
    }

    .stat-subtext {
        font-size: 0.625rem;
    }

    .why-matters-box {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
        margin: 3rem 0;
    }

    .why-matters-icon {
        font-size: 2.5rem;
    }

    .why-matters-title {
        font-size: var(--font-size-lg);
    }

    .why-matters-content p {
        font-size: var(--font-size-sm);
    }

    .experience-link-card {
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        text-align: center;
    }

    .link-card-icon {
        font-size: 3rem;
    }

    .linkedin-icon svg {
        width: 48px;
        height: 48px;
    }

    .link-card-title {
        font-size: var(--font-size-lg);
    }

    .link-card-arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .experience {
        padding: 3rem 0;
    }

    .experience-subtitle {
        font-size: var(--font-size-lg);
    }

    .experience-description {
        font-size: var(--font-size-sm);
    }

    .stats-grid-enhanced {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-box-enhanced {
        padding: 1.5rem 1.25rem;
    }

    .stat-icon {
        font-size: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .why-matters-box {
        padding: 1.5rem;
    }

    .why-matters-icon {
        font-size: 2rem;
    }

    .why-matters-title {
        font-size: var(--font-size-base);
    }

    .experience-link-card {
        padding: 1.5rem;
    }

    .link-card-icon {
        font-size: 2.5rem;
    }

    .link-card-title {
        font-size: var(--font-size-base);
    }
}

/* ==================== SECURITY SECTION ==================== */
.security-section {
    padding: 8rem 0;
    background: transparent;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(139, 111, 71, 0.15);
}

.security-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.security-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 25s ease-in-out infinite;
    animation-delay: -5s;
}

/* === SECTION HEADER === */
.security-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.security-subtitle {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 4rem;
    font-weight: var(--font-weight-medium);
    position: relative;
    z-index: 1;
}

/* === SECURITY GRID === */
.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

/* === SECURITY CARDS === */
.security-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 4px solid;
    border-radius: var(--border-radius-xl);
    padding: 2.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.security-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left 0.7s ease;
    z-index: 1;
}

.security-card:hover::before {
    left: 100%;
}

.security-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(139, 115, 85, 0.25), 0 8px 20px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.98);
}

/* Couleurs par card - Toutes en violet */
.security-card:nth-child(1) {
    border-left-color: #8B6F47;
}

.security-card:nth-child(2) {
    border-left-color: #8B6F47;
}

.security-card:nth-child(3) {
    border-left-color: #8B6F47;
}

.security-card:nth-child(4) {
    border-left-color: #8B6F47;
}

.security-card:nth-child(5) {
    border-left-color: #8B6F47;
}

.security-card:nth-child(6) {
    border-left-color: #8B6F47;
}

/* === SECURITY ICON === */
.security-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: none;
    position: relative;
    z-index: 2;
}

.security-icon img {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.security-card:hover .security-icon {
    transform: none;
}

/* === SECURITY CARD TITLE === */
.security-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    line-height: var(--line-height-tight);
    position: relative;
    z-index: 2;
    text-align: center;
}

/* === SECURITY CARD DESCRIPTION === */
.security-card-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 1.25rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    position: relative;
    z-index: 2;
}

/* === SECURITY CHECK === */
.security-check {
    font-size: var(--font-size-sm);
    color: #8B6F47;
    font-weight: var(--font-weight-bold);
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.1), rgba(139, 115, 85, 0.05));
    border-radius: var(--border-radius-md);
    display: inline-block;
    border-left: 3px solid #8B6F47;
    position: relative;
    z-index: 2;
}

/* === SECURITY COMMITMENT BOX === */
.security-commitment-box {
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.08), rgba(168, 144, 128, 0.05));
    border: 3px solid rgba(139, 115, 85, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 4rem 3rem;
    margin-top: 4rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.security-commitment-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 115, 85, 0.1) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

/* === COMMITMENT TITLE === */
.commitment-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.commitment-title::before {
    content: '🔐';
    display: block;
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* === COMMITMENT INTRO === */
.commitment-intro {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    text-align: center;
    font-weight: var(--font-weight-medium);
    position: relative;
    z-index: 1;
}

/* === COMMITMENT LIST === */
.commitment-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.commitment-list li {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    padding: 1.25rem 1.5rem;
    padding-left: 3rem;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--primary);
    transition: all var(--transition-base);
}

.commitment-list li:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.1);
}

.commitment-list li::before {
    content: '✓';
    position: absolute;
    left: 1rem;
    color: var(--success);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
}

/* === COMMITMENT FINAL === */
.commitment-final {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    line-height: var(--line-height-relaxed);
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius-lg);
    border: 2px solid rgba(139, 115, 85, 0.2);
    position: relative;
    z-index: 1;
}

.commitment-final::before {
    content: '🛡️';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.5em;
    vertical-align: middle;
}

/* === RESPONSIVE SECURITY === */
@media (max-width: 1024px) {
    .commitment-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .security-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .security-section {
        padding: 4rem 0;
    }

    .security-title {
        font-size: var(--font-size-3xl);
    }

    .security-subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: 3rem;
    }

    .security-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .security-card {
        padding: 2rem;
    }

    .security-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .security-card-title {
        font-size: var(--font-size-lg);
    }

    .security-card-description {
        font-size: var(--font-size-sm);
    }

    .security-commitment-box {
        padding: 3rem 2rem;
        margin-top: 3rem;
    }

    .commitment-title {
        font-size: var(--font-size-2xl);
        margin-bottom: 1.5rem;
    }

    .commitment-title::before {
        font-size: 3rem;
    }

    .commitment-intro {
        font-size: var(--font-size-base);
        margin-bottom: 2rem;
    }

    .commitment-list {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .commitment-list li {
        font-size: var(--font-size-sm);
        padding: 1rem 1.25rem;
        padding-left: 2.5rem;
    }

    .commitment-list li::before {
        font-size: var(--font-size-lg);
        left: 0.75rem;
    }

    .commitment-final {
        font-size: var(--font-size-base);
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .security-section {
        padding: 3rem 0;
    }

    .security-title {
        font-size: var(--font-size-2xl);
    }

    .security-subtitle {
        font-size: var(--font-size-base);
    }

    .security-card {
        padding: 1.5rem;
    }

    .security-icon {
        font-size: 2.5rem;
    }

    .security-card-title {
        font-size: var(--font-size-base);
    }

    .security-card-description {
        font-size: var(--font-size-sm);
        max-width: 100%;
    }

    .security-commitment-box {
        padding: 2rem 1.5rem;
    }

    .commitment-title {
        font-size: var(--font-size-xl);
    }

    .commitment-title::before {
        font-size: 2.5rem;
    }

    .commitment-intro {
        font-size: var(--font-size-sm);
    }

    .commitment-list li {
        font-size: var(--font-size-xs);
        padding: 0.875rem 1rem;
        padding-left: 2.25rem;
    }

    .commitment-final {
        font-size: var(--font-size-sm);
        padding: 1.25rem;
    }
}

/* === SECURITY TRUST BADGES === */
.security-trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    margin-top: 3rem;
    padding: 2rem;
    flex-wrap: wrap;
}

.trust-badge {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
    padding: 0.75rem 1.5rem;
    background: rgba(139, 111, 71, 0.08);
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--primary);
    transition: all var(--transition-base);
}

.trust-badge:hover {
    background: rgba(139, 111, 71, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 111, 71, 0.2);
}

@media (max-width: 768px) {
    .security-trust-badges {
        gap: 1.5rem;
    }

    .trust-badge {
        font-size: var(--font-size-base);
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .security-trust-badges {
        flex-direction: column;
        gap: 1rem;
    }

    .trust-badge {
        width: 100%;
        text-align: center;
    }
}

/* ==================== CTA SECTION ==================== */
.cta-section {
    padding: 8rem 2rem;
    background: transparent;
    color: var(--text-primary);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(139, 111, 71, 0.15);
}

/* Animated background elements */
.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -20%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: rotate 40s linear infinite reverse;
}

/* === CTA CONTENT === */
.cta-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* === CTA TITLE === */
.cta-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-black);
    margin-bottom: 1.5rem;
    color: var(--primary);
    line-height: var(--line-height-tight);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease-out;
}

/* === CTA SUBTITLE === */
.cta-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: var(--font-weight-medium);
    margin-bottom: 2rem;
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

/* === CTA BADGES === */
.cta-badges {
    margin-bottom: 3rem;
    text-align: center;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.cta-badge-line {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
    line-height: var(--line-height-relaxed);
    margin: 0.5rem 0;
    display: inline-block;
    padding: 0.75rem 2rem;
    background: rgba(139, 111, 71, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-full);
    border: 2px solid var(--primary);
}

/* === CTA BUTTONS WRAPPER === */
.cta-buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* === CTA BUTTONS === */
.cta-button-primary,
.cta-button-secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.75rem 3rem;
    border-radius: var(--border-radius-full);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    width: 48%;
    max-width: 400px;
    position: relative;
    overflow: hidden;
}

/* Primary Button (Book Consultation) */
.cta-button-primary {
    background: #FFFFFF;
    color: #8B6F47;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.cta-button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 115, 85, 0.2), transparent);
    transition: left 0.5s;
}

.cta-button-primary:hover::before {
    left: 100%;
}

.cta-button-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    background: #FAFAFA;
}

.cta-button-primary:active {
    transform: translateY(-2px);
}

/* Secondary Button (FAQ) */
.cta-button-secondary {
    background: white;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.cta-button-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(139, 111, 71, 0.1);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.cta-button-secondary:hover::before {
    opacity: 1;
}

.cta-button-secondary:hover {
    background: rgba(139, 111, 71, 0.08);
    transform: translateY(-3px);
    border-color: var(--primary-dark);
    box-shadow: 0 15px 40px rgba(139, 111, 71, 0.25);
}

/* === BUTTON TEXT === */
.cta-main-text {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.cta-sub-text {
    display: block;
    font-size: clamp(0.75rem, 2vw, 0.9375rem);
    font-weight: var(--font-weight-semibold);
    opacity: 0.85;
}

.cta-button-secondary .cta-sub-text {
    opacity: 0.9;
}

/* === CTA PROCESS === */
.cta-process {
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.cta-process-title {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: 2rem;
    text-align: center;
}

.cta-process-list {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: 2;
    list-style: none;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-process-list li {
    margin: 0;
    padding: 1rem 1.25rem;
    padding-left: 3rem;
    background: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--primary);
    position: relative;
    transition: all var(--transition-base);
    width: fit-content;
    flex-shrink: 0;
    color: var(--text-primary);
}

.cta-process-list li:hover {
    transform: translateX(10px);
    background: rgba(139, 111, 71, 0.05);
}

.cta-process-list li::before {
    content: attr(data-number);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xs);
}

/* === CTA CONTACT BOX === */
.cta-contact-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-xl);
    padding: 2rem 2.5rem;
    max-width: 600px;
    margin: 0 auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.cta-contact-box p {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    font-weight: var(--font-weight-medium);
    color: #FFFFFF;
    line-height: var(--line-height-relaxed);
    margin: 0.5rem 0;
    text-align: center;
}

/* === RESPONSIVE CTA === */
@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 1.5rem;
    }

    .cta-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: 1.25rem;
    }

    .cta-subtitle {
        font-size: clamp(0.875rem, 3vw, 1.125rem);
        margin-bottom: 1.5rem;
    }

    .cta-badge-line {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
    }

    .cta-buttons-wrapper {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 3rem;
    }

    .cta-button-primary,
    .cta-button-secondary {
        width: 100%;
        padding: 1.5rem 2rem;
    }

    .cta-main-text {
        font-size: clamp(0.875rem, 3vw, 1.125rem);
    }

    .cta-sub-text {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
    }

    .cta-process-title {
        font-size: clamp(1rem, 3vw, 1.25rem);
        margin-bottom: 1.5rem;
    }

    .cta-process-list {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
        line-height: 2;
        text-align: center;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .cta-process-list li {
        padding: 0.5rem 0;
        padding-left: 1.5rem;
        margin: 0;
        width: auto;
        background: none;
        border: none;
        text-align: left;
        display: inline-block;
    }

    .cta-process-list li:hover {
        transform: none;
        background: none;
    }

    .cta-process-list li::before {
        content: attr(data-number) ".";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: none;
        color: var(--primary);
        font-weight: var(--font-weight-bold);
        font-size: 1rem;
        display: block;
        border-radius: 0;
    }

    .cta-contact-box {
        padding: 1.5rem 2rem;
    }

    .cta-contact-box p {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
        margin: 0.375rem 0;
    }
}

@media (max-width: 480px) {
    .cta-section {
        padding: 3rem 1rem;
    }

    .cta-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .cta-subtitle {
        font-size: clamp(0.8125rem, 2.5vw, 1rem);
    }

    .cta-badge-line {
        font-size: clamp(0.6875rem, 2vw, 0.875rem);
        padding: 0;
    }

    .cta-button-primary,
    .cta-button-secondary {
        padding: 1.25rem 1.5rem;
    }

    .cta-main-text {
        font-size: clamp(0.8125rem, 2.5vw, 1rem);
    }

    .cta-sub-text {
        font-size: clamp(0.6875rem, 2vw, 0.8125rem);
    }

    .cta-process-list {
        font-size: clamp(0.8125rem, 2vw, 0.9375rem);
        line-height: 1.75;
    }

    .cta-process-list li {
        padding: 0.375rem 0;
        padding-left: 1.25rem;
        margin: 0;
    }

    .cta-process-list li::before {
        font-size: 0.8125rem;
    }

    .cta-contact-box {
        padding: 1.25rem 1.5rem;
    }

    .cta-contact-box p {
        font-size: clamp(0.6875rem, 2vw, 0.875rem);
    }
}

/* ==================== RESPONSIVE SPÉCIFIQUE INDEX.HTML ==================== */
/* Note: Les media queries pour .hero-content et .hero-visual sont définies plus haut (lignes ~407-528) */

@media (min-width: 768px) and (max-width: 1023px) {
    .cta-section {
        padding: 4rem 1.5rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-subtitle {
        font-size: 1.125rem;
    }

    /* How It Works Section Responsive */
    .steps-container {
        grid-template-columns: 1fr;
    }

    .zero-effort-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Problem Section Responsive */
    .problem-grid {
        grid-template-columns: 1fr;
    }

    .impact-stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem; /* Améliore l'espacement vertical entre les cards */
    }

    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 2rem; /* Améliore l'espacement vertical entre les cards */
    }
}

/* Très petit mobile - Header ajustements supplémentaires */
@media (max-width: 480px) {
    /* How It Works Mobile */
    .step-card {
        padding: 2rem 1.5rem;
    }

    .zero-effort-box {
        padding: 2rem 1.5rem;
    }

    .zero-effort-title {
        font-size: 1.5rem;
    }

    .products-transition {
        padding: 2rem 1.5rem;
    }

    .transition-title {
        font-size: 1.5rem;
    }

    /* Problem Section Mobile */
    .problem-impact {
        padding: 1.5rem;
    }

    .impact-title {
        font-size: 1.25rem;
    }

    .solution-text {
        font-size: 1rem;
    }
}

/* Ultra petit mobile - iPhone SE et similaires (≤375px) */
@media (max-width: 375px) {
    /* Hero section ultra compact */
    .hero-section {
        padding: 90px 0 2rem !important;
    }

    h1, .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-title-line {
        font-size: 1.5rem !important;
    }

    p[style*="font-size: 1.5rem"] {
        font-size: 1rem !important;
    }

    /* Trial badge */
    .trial-badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.875rem;
    }

    /* Stats cards ultra compacts */
    div[style*="font-size: 1.5rem"][style*="font-weight: 900"] {
        font-size: 1.125rem !important;
    }

    div[style*="font-size: 0.875rem"][style*="font-weight: 600"] {
        font-size: 0.75rem !important;
    }

    /* Section titles */
    h2[style*="font-size: 3rem"],
    h2[style*="font-size: 3.5rem"],
    h2[style*="font-size: 2rem"] {
        font-size: 1.375rem !important;
    }

    .section-title {
        font-size: 1.375rem !important;
    }

    /* Buttons ultra compacts */
    button[style*="padding: 1.25rem 2.5rem"],
    button[style*="padding: 1rem 1.5rem"] {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.875rem !important;
    }

    button[style*="padding: 1.5rem 3rem"],
    button[style*="padding: 1.125rem 2rem"] {
        padding: 1rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }

    /* Phone mockup ultra petit */
    .phone-mockup {
        width: 180px !important;
        height: 370px !important;
    }

    .demo-badge-mobile {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .demo-subtitle-mobile {
        font-size: 0.75rem;
        max-width: 220px;
    }

    /* Sections padding ultra réduit */
    section {
        padding: 3rem 0 !important;
    }

    /* Cards padding */
    .service-card,
    .advantage-card,
    .faq-item {
        padding: 1rem !important;
    }
}

/* ========================================
   TRIAL OFFER SECTION
   ======================================== */

/* Trial Offer Styling */
.trial-offer {
    margin-top: 30px;
    padding: 15px 25px;
    background: linear-gradient(135deg, rgba(139, 111, 71, 0.08) 0%, rgba(166, 138, 92, 0.08) 100%);
    border: 1px solid rgba(139, 111, 71, 0.2);
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    min-height: 51px; /* Réserve l'espace pour éviter CLS */
    contain: layout style; /* Optimisation CLS */
}

.trial-text {
    font-size: 14px;
    color: #555;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
    min-height: 21px; /* 14px * 1.5 line-height - réserve l'espace */
}

.trial-text strong {
    color: var(--primary-color, #8B6F47);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .trial-offer {
        padding: 12px 20px;
        border-radius: 30px;
        margin-top: 20px;
    }

    .trial-text {
        font-size: 0.8125rem; /* 13px - meilleure lisibilité sur mobile */
        line-height: 1.6; /* Améliore l'espacement entre les lignes */
    }
}

/* ========================================
   TRIAL BADGE CONDITIONAL (Website Chatbot)
   ======================================== */

/* Trial Badge Conditional - Same style as LINE Chatbot */
.trial-badge-conditional {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    padding: 1.125rem 1.75rem;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-sm);
    color: #78350F;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
    border: 2px solid #FBBF24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Price Line */
.price-line {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 10px 0;
    text-align: center;
}

/* Setup Note - No background, directly on card */
.setup-note {
    font-size: 12px;
    color: #666;
    margin: 15px 0 10px 0;
    padding: 0;
    background: none;
    border: none;
    line-height: 1.7;
    text-align: center;
}

.setup-note a {
    color: var(--primary-color, #8B6F47);
    text-decoration: underline;
    font-weight: 600;
}

.setup-note a:hover {
    color: var(--primary-dark, #6B5537);
}

/* Responsive */
@media (max-width: 768px) {
    .trial-badge-conditional {
        padding: 0.875rem 1.25rem;
        font-size: var(--font-size-xs);
    }

    .setup-note {
        font-size: 11px;
        padding: 0;
        margin: 12px 0 8px 0;
    }
}