/* =========================================
   Glass Connect - Landing Page V2
   Dark/Light Theme with Glassmorphism
   Typography: Syne (Display) + Plus Jakarta Sans (Body)
   ========================================= */
@font-face {
    font-family: "SpaceGrotesk-VariableFont_wght";
    /* font-weight: 400; */
    src: local("SpaceGrotesk-VariableFont_wght"),url('./fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  }

@font-face {
    font-family: 'PowerrMedium-rgVwO';
    src: local('PowerrMedium-rgVwO'),url('./fonts/PowerrMedium-rgVwO.ttf') format('truetype');
}
/* Variables */
:root {
    /* Dark Theme Colors */
    
    --bg-dark: rgb(9, 32, 58);
    --bg-dark-secondary: #0d1f35;
    --bg-card-dark: rgba(13, 31, 53, 0.8);
    --bg-glass-dark: rgba(255, 255, 255, 0.03);
    --bg-glass-dark-hover: rgba(255, 255, 255, 0.06);

    /* Light Theme Colors */
    --bg-light: #fafbfc;
    --bg-light-secondary: #f1f5f9;
    --bg-card-light: #ffffff;
    --bg-glass-light: rgba(10, 22, 40, 0.02);
    --bg-glass-light-hover: rgba(10, 22, 40, 0.04);

    /* Accent Colors */
    --primary: #168aff;
    --primary-dark: #1d4ed8;
    --primary-light: #4490fb;
    --secondary: #10b981;
    --secondary-light: #aae5d2;
    --secondary-dark: #059669;
    --accent-gold: #c9a227;
    --accent-gold-light: #e5c76b;
    --orange: #f1ddb8;
    --orange-dark: #a06d0e;

    /* Text Colors */
    --text-light: #f1f5f9;
    --text-light-secondary: #94a3b8;
    --text-light-muted: #64748b;
    --text-dark: #1f2a47;
    --text-dark-secondary: #2d3642;
    --text-dark-muted: #64748b;

    /* Border Colors */
    --border-dark: rgba(255, 255, 255, 0.08);
    --border-dark-hover: rgba(255, 255, 255, 0.15);
    --border-light: rgba(10, 22, 40, 0.08);
    --border-light-hover: rgba(10, 22, 40, 0.15);

    /* Status Colors */
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;

    /* Typography */
    --font-logo: 'PowerrMedium-rgVwO';
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Effects */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);

    /* Border Radius */
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-light-secondary);
    background: var(--bg-dark);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul { list-style: none; }

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== TOP BAR ========== */
.top-bar {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-dark);
    padding: 8px 0;
    display: none;
}

.top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 13px;
}

.top-bar-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-weight: 600;
}

.top-bar-text {
    color: var(--text-light-muted);
}

@media (min-width: 768px) {
    .top-bar {
        display: block;
    }
}

/* ========== NAVBAR ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-dark);
    transition: var(--transition);
}

.navbar.scrolled {
    top: 0;
    background: rgba(10, 22, 40, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
    .navbar {
        top: 36px;
    }
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    display: flex;
}

.logo-text {
    margin-top: 5px;
    font-family: var(--font-logo);
    font-size: 28px;
    font-weight: 700;
    color: #dff1ff;
}

.logo-text span {
    background: linear-gradient(135deg, #0174d1 0%, #4cc0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Nav Menu */
.nav-menu {
    display: none;
    gap: 32px;
}

.nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-light-secondary);
}

.nav-link:hover {
    color: var(--text-light);
}

@media (min-width: 1024px) {
    .nav-menu {
        display: flex;
    }
}

/* Nav Actions */
.nav-actions {
    display: none;
    align-items: center;
    gap: 12px;
}

.btn-login {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light-secondary);
    border-radius: 50px;
}

.btn-login:hover {
    color: var(--text-light);
    background: var(--bg-glass-dark);
}

.btn-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-cta.blue {
    color: var(--text-light);
    background: linear-gradient(135deg, rgb(25, 146, 252) 0%, rgb(0, 107, 165) 100%);
    text-align: center;
    box-shadow: 0 4px 14px rgba(16, 126, 185, 0.4);
    border: none
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.btn-cta.blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 145, 185, 0.5);
}

@media (min-width: 768px) {
    .nav-actions {
        display: flex;
    }
}

/* Menu Toggle */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-light);
    border-radius: 2px;
    transition: var(--transition);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: rgb(9, 32, 58);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transform: translateX(100%);
    transition: var(--transition);
    z-index: 999;
    opacity: 1;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-link {
    display: block;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 1px solid var(--border-dark);
}

.mobile-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
}

.btn-login-mobile {
    display: block;
    padding: 14px;
    text-align: center;
    font-weight: 600;
    color: var(--text-light-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius);
}

.btn-cta-mobile {
    display: block;
    padding: 14px;
    text-align: center;
    font-weight: 600;
    color: var(--text-light);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: var(--radius);
}

/* ========== HERO - CENTERED ========== */
.hero {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    background: var(--bg-dark);
}

@media (min-width: 768px) {
    .hero {
        padding: 100px 0 120px;
    }
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 100%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, rgba(201, 162, 39, 0.08) 0%, transparent 40%),
        var(--bg-dark);
    z-index: 0;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-centered {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-light);
    margin-bottom: 32px;
}

.pulse {
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

.hero h1 {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-light);
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

@media (min-width: 640px) {
    .hero h1 {
        font-size: 56px;
    }
}

@media (min-width: 1024px) {
    .hero h1 {
        font-size: 72px;
    }
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero h1 .greenly {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.testimonials-container {
    display: flex
;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.testimonials-images {
    display: flex
;
    position: relative;
}
.testimonials-text {
    font-size: 1rem;
    line-height: 1rem;
    margin-left: 15px;
    color: #fff;
    font-family: 'Roboto Condensed', 'Roboto', arial;
}
.testimonials-face {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    position: relative;
    margin-left: -10px;
}
@media (max-width: 600px) {
    .testimonials-container {
        flex-direction: column;
        text-align: center;
    }
    .testimonials-images {
        justify-content: center;
        margin-bottom: 10px;
    }
    .testimonials-text {
        margin-left: 0;
        /* font-size: 0.75em; */
    }
}
.hero-desc {
    font-size: 18px;
    color: var(--text-light-secondary);
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .hero-desc {
        font-size: 16px;
    }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 60px;
    justify-content: center;
}

@media (min-width: 480px) {
    .hero-buttons {
        flex-direction: row;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    transition: var(--transition);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light-secondary);
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: 50px;
    transition: var(--transition);
}
.btn-secondary.blue {
    border-color: var(--border-dark-hover);
    color: var(--text-light);
    background: linear-gradient(135deg, rgb(25, 146, 252) 0%, rgb(0, 107, 165) 100%);
    transition: background-color 1s;
}
.btn-secondary.blue:hover {
    border-color:var(--border-dark-hover);
    color: var(--text-light);
   background: linear-gradient(135deg, rgb(25, 146, 252) 0%, rgb(51, 184, 255) 100%);
}
.btn-secondary:hover {
    border-color: var(--border-dark-hover);
    color: var(--text-light);
    background: var(--bg-glass-dark-hover);
}

.btn-secondary.dark:hover {
    border-color: var(--text-dark);
    color: var(--text-dark);
    background: var(--bg-glass-dark-hover);
}

/* Button Group with Arrow Animation - Style GoodCircle */
.btn-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-group:hover {
    transform: translateY(-2px);
}

.btn-group-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #0a1628;
    background: var(--secondary);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-group-main:hover {
    background: #0ea472;
}

.btn-group-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--secondary);
    border-radius: 50%;
    color: #0a1628;
    cursor: pointer;
    transition: var(--transition);
}

.btn-group-arrow:hover {
    background: #0ea472;
    rotate: -45deg;
}

.btn-group-arrow svg {
    transition: transform 0.3s ease;
}

.btn-group:hover .btn-group-arrow svg {
    transform: translateX(3px);
}

/* Hero Metrics */
.hero-metrics {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .metric-value {
        font-size: 40px;
    }
}

.metric-label {
    font-size: 14px;
    color: var(--text-light-muted);
}

.metric-divider {
    width: 1px;
    height: 50px;
    background: var(--border-dark);
    display: none;
}

@media (min-width: 480px) {
    .metric-divider {
        display: block;
    }
}

/* Hero Trust */
.hero-trust {
    position: relative;
    z-index: 1;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--border-dark);
    text-align: center;
}

.hero-trust p {
    font-size: 13px;
    color: var(--text-light-muted);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.trust-logos-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 50px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trust-logos-track {
    display: flex;
    gap: 48px;
    animation: scroll-logos 30s linear infinite;
    width: max-content;
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.trust-logos-track:hover {
    animation-play-state: paused;
}

.trust-logos-track img {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.6) invert(0);
    opacity: 0.5;
    transition: var(--transition);
}

.trust-logos-track img:hover {
    filter: grayscale(0%) brightness(1) invert(0);
    opacity: 1;
}

@media (min-width: 640px) {
    .trust-logos-track img {
        height: 40px;
    }

    .trust-logos-track {
        gap: 48px;
    }
}

/* Legacy text support */
.trust-logos-track span {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-light-muted);
    letter-spacing: 0.02em;
    opacity: 0.5;
    white-space: nowrap;
    padding: 8px 16px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: 50px;
    transition: var(--transition);
}

.trust-logos-track span:hover {
    opacity: 1;
    color: var(--text-light);
    border-color: var(--primary);
}

/* Legacy support */
.trust-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

@media (min-width: 640px) {
    .trust-logos {
        gap: 48px;
    }
}

.trust-logos span {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-light-muted);
    letter-spacing: 0.02em;
    opacity: 0.4;
}

@media (min-width: 640px) {
    .trust-logos span {
        font-size: 20px;
    }
}

/* ========== BENEFITS - LIGHT SECTION ========== */
.benefits {
    padding: 80px 0;
    background: var(--bg-light);
}

@media (min-width: 768px) {
    .benefits {
        padding: 100px 0;
    }
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.benefit-card {
    padding: 32px 20px;
    text-align: center;
    background: var(--bg-light-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.benefit-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.benefit-card:hover {
    background: var(--bg-light);
    border-color: var(--border-light-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0775cf82 0%, #076dc112 100%);
    color: #0775cff3;
    border: 2.5px solid #0775cfa9;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

@media (min-width: 640px) {
    .benefit-card h3 {
        font-size: 20px;
    }
}

.benefit-card p {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.6;
}

/* ========== PROBLEM SECTION - DARK ========== */
.problem-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #102642 0%, #0A1628 100%);
    
}

@media (min-width: 768px) {
    .problem-section {
        padding: 120px 0;
    }
}

.problem-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 768px) {
    .problem-content {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
}

.section-tag {
    display: inline-block;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 50px;
    margin-bottom: 20px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.section-tag.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--secondary);
    border-color: rgba(16, 185, 129, 0.3);
}

.problem-text h2,
.solution-text h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .problem-text h2,
    .solution-text h2 {
        font-size: 32px;
    }
}

.problem-list,
.solution-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.problem-list li,
.solution-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.problem-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--danger);
}

.solution-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--secondary);
}

.problem-list li span,
.solution-list li span {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.6;
}

/* ========== FEATURES SECTION - LIGHT ========== */
.features-section {
    padding: 80px 0;
    background: var(--bg-light);
}

@media (min-width: 768px) {
    .features-section {
        padding: 120px 0;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .section-header {
        margin-bottom: 80px;
    }
}

/* Light section header */
.features-section .section-header .section-tag,
.testimonials-section .section-header .section-tag {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    border-color: rgba(59, 130, 246, 0.2);
}

.features-section .section-header h2,
.testimonials-section .section-header h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .features-section .section-header h2,
    .testimonials-section .section-header h2 {
        font-size: 36px;
    }
}

.features-section .section-header p,
.testimonials-section .section-header p {
    font-size: 18px;
    color: var(--text-dark-muted);
    max-width: 500px;
    margin: 0 auto;
}

/* Dark section header */
.pricing-section .section-header .section-tag,
.faq-section .section-header .section-tag {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-light);
    border-color: rgba(59, 130, 246, 0.3);
}

.pricing-section .section-header h2,
.faq-section .section-header h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .pricing-section .section-header h2,
    .faq-section .section-header h2 {
        font-size: 36px;
    }
}

.pricing-section .section-header p,
.faq-section .section-header p {
    font-size: 18px;
    color: var(--text-light-muted);
    max-width: 500px;
    margin: 0 auto;
}

.features-showcase {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

@media (min-width: 768px) {
    .features-showcase {
        gap: 120px;
    }
}

.feature-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.feature-item.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .feature-item {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    .feature-item.reverse {
        direction: rtl;
    }

    .feature-item.reverse > * {
        direction: ltr;
    }
}

.feature-visual {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

.feature-visual img {
    width: 100%;
}

.feature-info {
    padding: 0;
}

@media (min-width: 768px) {
    .feature-info {
        padding: 20px 0;
    }
}

.feature-number {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-gold);
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.2);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.feature-info h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .feature-info h3 {
        font-size: 30px;
    }
}

.feature-info > p {
    font-size: 16px;
    color: var(--text-dark-secondary);
    margin-bottom: 24px;
    line-height: 1.7;
}

.feature-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text-dark-secondary);
}

.feature-points li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ========== PRICING SECTION - DARK ========== */
.pricing-section {
    padding: 80px 0;
    background: var(--bg-dark);
}

@media (min-width: 768px) {
    .pricing-section {
        padding: 120px 0;
    }
}

.price-hero {
    text-align: center;
    margin-bottom: 60px;
}

.price-main {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 24px 48px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: 60px;
}

.price-amount {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: -0.03em;
}

@media (min-width: 640px) {
    .price-amount {
        font-size: 64px;
    }
}

.price-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.price-currency {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light-muted);
}

.price-per {
    font-size: 13px;
    color: var(--text-light-muted);
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 60px;
}

@media (min-width: 640px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pricing-card {
    position: relative;
    background: var(--bg-card-dark);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-dark);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.pricing-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-dark-hover);
    box-shadow: var(--shadow-xl);
}

.pricing-card.featured {
    border: 2px solid var(--secondary);
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.2);
}

.pricing-card.featured:hover {
    box-shadow: 0 0 70px rgba(16, 185, 129, 0.3);
}

.featured-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    background: var(--secondary);
    color: var(--text-light);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 0 0 10px 10px;
}

.card-header {
    padding: 36px 28px;
    text-align: center;
}

.card-header.basic {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.card-header.premium {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
}

.card-header.facture {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.03) 100%);
    border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}

.card-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light-secondary);
    border-radius: 50px;
    margin-bottom: 14px;
}

.card-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 10px;
}

.card-price {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-light);
    margin: 0;
}

.card-price span {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light-muted);
}

.card-body {
    padding: 28px;
}

.card-desc {
    text-align: center;
    font-size: 14px;
    color: var(--text-light-muted);
    margin-bottom: 24px;
}

.card-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.card-features li.included {
    color: var(--text-light-secondary);
}

.card-features li.included svg {
    color: var(--secondary);
}

.card-features li.highlight {
    font-weight: 600;
    color: var(--text-light);
}

.card-features li.excluded {
    color: var(--text-light-muted);
    opacity: 0.5;
}

.card-features li.excluded svg {
    color: var(--text-light-muted);
}

.btn-card {
    display: block;
    padding: 16px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-light-secondary);
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    transition: var(--transition);
}

.btn-card:hover {
    background: var(--bg-glass-dark-hover);
    border-color: var(--border-dark-hover);
    color: var(--text-light);
}

.btn-card-primary {
    display: block;
    padding: 16px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-light);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    border-radius: var(--radius);
    transition: var(--transition);
}

.btn-card-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

/* Pricing Reassurance */
.pricing-reassurance {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

@media (min-width: 640px) {
    .pricing-reassurance {
        gap: 56px;
    }
}

.reassurance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-light-secondary);
}

.reassurance-item svg {
    color: var(--secondary);
}

/* ========== TESTIMONIALS - LIGHT ========== */
.testimonials-section {
    padding: 80px 0;
    background: var(--bg-light-secondary);
}

@media (min-width: 768px) {
    .testimonials-section {
        padding: 120px 0;
    }
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    padding: 32px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.testimonial-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-card:hover {
    border-color: var(--border-light-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    color: var(--accent-gold);
}

.testimonial-card blockquote {
    font-size: 15px;
    color: var(--text-dark-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--text-light);
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    font-size: 15px;
    color: var(--text-dark);
}

.author-info span {
    font-size: 13px;
    color: var(--text-dark-muted);
}

/* ========== TARGET AUDIENCE SECTION ========== */
.gc-target-audience {
    padding: 80px 0;
    background: linear-gradient(180deg,var(--orange)  0%,var(--bg-light-secondary) 60%, var(--bg-light-secondary) 100%);
}

@media (min-width: 768px) {
    .gc-target-audience {
        padding: 120px 0;
    }
}

.gc-audience-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 60px;
}

@media (min-width: 640px) {
    .gc-audience-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gc-audience-grid .gc-audience-card {
        flex: 1 1 calc(50% - 12px);
    }
    
}

@media (min-width: 1024px) {
    .gc-audience-grid {
        flex-wrap: nowrap;
        gap: 28px;
    }

    .gc-audience-grid .gc-audience-card {
        flex: 1;
    }
}

.gc-audience-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    text-align: center;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gc-audience-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(59, 130, 246, 0.05);
}

/* Image toujours visible en haut de la carte */
.gc-audience-image {
    width: 100%;
    height: 180px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.gc-audience-card:nth-child(1) .gc-audience-image {
    background-image: url('img/sections/section-2.webp');
}

.gc-audience-card:nth-child(2) .gc-audience-image {
    background-image: url('img/sections/section-1.webp');
}

.gc-audience-card:nth-child(3) .gc-audience-image {
    background-image: url('img/team/testimonial-4.webp');
}

.gc-audience-content {
    padding: 28px 24px 32px;
}

.gc-audience-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(59, 131, 246, 0.539) 0%, rgba(255, 255, 255, 0.196) 100%);
    border: 1px solid rgba(59, 131, 246, 0.738);
    border-radius: 14px;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.gc-audience-card:hover .gc-audience-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

.gc-audience-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.gc-audience-card:hover h3 {
    color: #3b82f6;
}

.gc-audience-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Bandeau logos garages déjà inscrits */
.gc-garages-trust {
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.gc-garages-trust p {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark-muted);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.gc-garages-trust .trust-logos-track img {
    height: 40px;
}

.gc-garages-trust .trust-logos-track img:hover {
    transform: scale(1.06);
}

/* ========== ABOUT SECTION ========== */
.gc-about-section {
    padding: 80px 0;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .gc-about-section {
        padding: 120px 0;
    }
}

.gc-about-section::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -15%;
    width: 60%;
    height: 90%;
    background: radial-gradient(ellipse, rgba(234, 153, 53, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.gc-about-section::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -15%;
    width: 45%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(160, 109, 14, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 640px) {
    .gc-about-section::before {
        top: -60px;
        right: -20vw;
        width: 90vw;
        height: 320px;
    }

    .gc-about-section::after {
        bottom: -40px;
        left: -20vw;
        width: 80vw;
        height: 260px;
    }
}

.gc-about-section .container {
    position: relative;
    z-index: 1;
}

.gc-about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .gc-about-content {
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
    }
}

.gc-about-text .gc-section-title {
    text-align: left;
    margin-bottom: 24px;
}

.gc-about-desc {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.gc-about-desc strong {
    color: var(--text-light);
}

.gc-about-values {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 32px 0;
}

.gc-value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.gc-value-item svg {
    color: var(--secondary);
    flex-shrink: 0;
}

.gc-about-image {
    display: flex;
    justify-content: center;
}

.gc-about-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}

.gc-about-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    background: linear-gradient(135deg, var(--bg-glass-dark) 0%, rgba(22, 138, 255, 0.05) 100%);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xl);
}

.gc-about-stat {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-dark);
}

.gc-about-stat:last-child {
    border-bottom: none;
}

.gc-about-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.gc-about-stat-label {
    font-size: 14px;
    color: var(--text-light-secondary);
    font-weight: 500;
}

/* ========== STATS SECTION - GRADIENT ========== */
.stats-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

@media (min-width: 768px) {
    .stats-section {
        padding: 100px 0;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.stat-card.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .stat-card {
        flex-direction: row;
        text-align: left;
        padding: 28px;
    }
}

.stat-card:hover {
    background: var(--bg-glass-dark-hover);
    border-color: var(--border-dark-hover);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b9816e 0%, #10b9812f 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--secondary);
    color: var(--secondary-light);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .stat-number {
        font-size: 36px;
    }
}

.stat-label {
    font-size: 14px;
    color: var(--text-light-muted);
}

/* ========== FAQ SECTION - DARK ========== */
.faq-section {
    padding: 80px 0;
    background: var(--bg-dark-secondary);
}

@media (min-width: 768px) {
    .faq-section {
        padding: 120px 0;
    }
}

.faq-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(10px);
}

.faq-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.faq-item:hover {
    border-color: var(--border-dark-hover);
}

.faq-item.active {
    border-color: var(--primary);
    background: var(--bg-glass-dark-hover);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    font-family: inherit;
}

@media (min-width: 640px) {
    .faq-question {
        font-size: 17px;
        padding: 24px 28px;
    }
}

.faq-question svg {
    flex-shrink: 0;
    color: var(--text-light-muted);
    transition: var(--transition);
}

.faq-item.active .faq-question svg {
    transform: rotate(45deg);
    color: var(--primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 24px 20px;
    font-size: 15px;
    color: var(--text-light-secondary);
    line-height: 1.7;
}

@media (min-width: 640px) {
    .faq-answer p {
        padding: 0 28px 24px;
        font-size: 16px;
    }
}

/* ========== CTA SECTION ========== */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    .cta-section {
        padding: 100px 0;
    }
}

.cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--text-light);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .cta-content h2 {
        font-size: 42px;
    }
}

.cta-content p {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

@media (min-width: 480px) {
    .cta-buttons {
        flex-direction: row;
    }
    .btn-cta {

        justify-content: center;
    }
}

.btn-cta-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    background: var(--text-light);
    border-radius: 50px;
    transition: var(--transition);
}

.btn-cta-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 36px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    transition: var(--transition);
}

.btn-cta-outline:hover {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.1);
}

/* ========== PAGE HERO (About, etc.) ========== */
.gc-page-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--bg-dark);
    overflow: hidden;
}

@media (min-width: 768px) {
    .gc-page-hero {
        padding: 180px 0 100px;
    }
}

.gc-page-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.gc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.gc-breadcrumb a {
    color: var(--text-light-muted);
}

.gc-breadcrumb a:hover {
    color: var(--primary);
}

.gc-breadcrumb svg {
    color: var(--text-light-muted);
}

.gc-breadcrumb span {
    color: var(--text-light-secondary);
}

.gc-page-hero h1 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--text-light);
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

@media (min-width: 640px) {
    .gc-page-hero h1 {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .gc-page-hero h1 {
        font-size: 48px;
    }
}

.gc-page-hero p {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.7;
    max-width: 600px;
}

/* ========== STORY SECTION ========== */
.gc-story-section {
    padding: 80px 0;
    background: var(--bg-dark);
}

@media (min-width: 768px) {
    .gc-story-section {
        padding: 120px 0;
    }
}

.gc-story-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .gc-story-content {
        grid-template-columns: 1.5fr 1fr;
        gap: 80px;
    }
}

.gc-story-text .gc-section-title {
    text-align: left;
    margin-bottom: 24px;
}

.gc-story-text p {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
}

.gc-story-text p strong {
    color: var(--text-light);
}

.gc-story-image img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    object-fit: cover;
}

.gc-story-card {
    background: linear-gradient(135deg, var(--bg-glass-dark) 0%, rgba(22, 138, 255, 0.08) 100%);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xl);
    padding: 40px;
    text-align: center;
}

.gc-story-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
    color: var(--secondary);
}

.gc-story-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 12px;
}

.gc-story-card p {
    font-size: 15px;
    color: var(--text-light-secondary);
    line-height: 1.6;
}

/* ========== VALUES SECTION ========== */
.gc-values-section {
    padding: 80px 0;
    background: var(--bg-light);
}

@media (min-width: 768px) {
    .gc-values-section {
        padding: 120px 0;
    }
}

.gc-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 60px;
}

@media (min-width: 640px) {
    .gc-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gc-values-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }
}

.gc-value-card {
    background: var(--bg-card-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.gc-value-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.gc-value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.gc-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius);
    color: var(--secondary);
}

.gc-value-icon.blue {
    background: linear-gradient(135deg, rgba(22, 138, 255, 0.15) 0%, rgba(22, 138, 255, 0.05) 100%);
    border-color: rgba(22, 138, 255, 0.25);
    color: var(--primary);
}

.gc-value-icon.orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--warning);
}

.gc-value-icon.purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.25);
    color: #8b5cf6;
}

.gc-value-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.gc-value-card p {
    font-size: 14px;
    color: var(--text-dark-muted);
    line-height: 1.6;
}

/* ========== NUMBERS SECTION ========== */
.gc-numbers-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
}

@media (min-width: 768px) {
    .gc-numbers-section {
        padding: 120px 0;
    }
}

.gc-numbers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 60px;
}

@media (min-width: 768px) {
    .gc-numbers-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

.gc-number-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-glass-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.gc-number-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.gc-number-card:hover {
    background: var(--bg-glass-dark-hover);
    border-color: var(--border-dark-hover);
}

.gc-number-value {
    display: block;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

@media (min-width: 640px) {
    .gc-number-value {
        font-size: 56px;
    }
}

.gc-number-label {
    font-size: 14px;
    color: var(--text-light-secondary);
    line-height: 1.5;
}

/* ========== COMMITMENT SECTION ========== */
.gc-commitment-section {
    padding: 80px 0;
    background: var(--bg-light);
}

@media (min-width: 768px) {
    .gc-commitment-section {
        padding: 120px 0;
    }
}

.gc-commitment-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .gc-commitment-content {
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
    }
}

.gc-commitment-text .gc-section-title-dark {
    text-align: left;
    margin-bottom: 24px;
}

.gc-commitment-text p {
    font-size: 16px;
    color: var(--text-dark-muted);
    line-height: 1.8;
    margin-bottom: 16px;
}

.gc-commitment-text p strong {
    color: var(--text-dark);
}

.gc-commitment-list {
    list-style: none;
    margin-top: 32px;
}

.gc-commitment-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    color: var(--text-dark-secondary);
    border-bottom: 1px solid var(--border-light);
}

.gc-commitment-list li:last-child {
    border-bottom: none;
}

.gc-commitment-list svg {
    color: var(--secondary);
    flex-shrink: 0;
}

.gc-commitment-card {
    display: flex;
    justify-content: center;
}

.gc-commitment-quote {
    background: var(--bg-card-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 40px;
    position: relative;
}

.gc-commitment-quote svg {
    position: absolute;
    top: 24px;
    left: 24px;
    color: var(--primary);
}

.gc-commitment-quote p {
    font-size: 18px;
    font-style: italic;
    color: var(--text-dark-secondary);
    line-height: 1.7;
    margin-top: 40px;
    margin-bottom: 24px;
}

.gc-commitment-author {
    display: flex;
    flex-direction: column;
}

.gc-commitment-name {
    font-weight: 700;
    color: var(--text-dark);
}

/* ========== FOOTER ========== */
.footer {
    padding: 80px 0 40px;
    background: var(--bg-dark);
    border-top: 1px solid var(--border-dark);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 48px;
    }
}

.footer-brand {
    grid-column: span 2;
}

@media (min-width: 768px) {
    .footer-brand {
        grid-column: span 1;
    }
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand .logo-text span {
    color: var(--text-light-muted);
}

.footer-brand p {
    font-size: 14px;
    color: var(--text-light-muted);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 280px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 21, 41, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: rgb(243, 248, 254);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
}

.footer-social a[href*="linkedin"]:hover {
    background: #0A66C2;
    border-color: #0A66C2;
    color: #fff;
}

.footer-social a[href*="instagram"]:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border: none;
    color: #fff;
}

.footer-social a[href*="tiktok"]:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.footer-links h4,
.footer-contact h4 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-links ul,
.footer-contact ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 14px;
    color: var(--text-light-muted);
}

.footer-links a:hover {
    color: var(--primary-light);
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-light-muted);
}

.footer-contact li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact a {
    color: var(--text-light-muted);
}

.footer-contact a:hover {
    color: var(--primary-light);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 40px;
    border-top: 1px solid var(--border-dark);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-bottom p {
    font-size: 13px;
    color: var(--text-light-muted);
}

.footer-platforms {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-light-muted);
}

.footer-platforms svg {
    opacity: 0.6;
}

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

/* Staggered animations */
.benefit-card:nth-child(1).visible { transition-delay: 0s; }
.benefit-card:nth-child(2).visible { transition-delay: 0.1s; }
.benefit-card:nth-child(3).visible { transition-delay: 0.2s; }
.benefit-card:nth-child(4).visible { transition-delay: 0.3s; }

.pricing-card:nth-child(1).visible { transition-delay: 0s; }
.pricing-card:nth-child(2).visible { transition-delay: 0.15s; }
.pricing-card:nth-child(3).visible { transition-delay: 0.3s; }

.testimonial-card:nth-child(1).visible { transition-delay: 0s; }
.testimonial-card:nth-child(2).visible { transition-delay: 0.1s; }
.testimonial-card:nth-child(3).visible { transition-delay: 0.2s; }

.stat-card:nth-child(1).visible { transition-delay: 0s; }
.stat-card:nth-child(2).visible { transition-delay: 0.1s; }
.stat-card:nth-child(3).visible { transition-delay: 0.2s; }
.stat-card:nth-child(4).visible { transition-delay: 0.3s; }

.faq-item:nth-child(1).visible { transition-delay: 0s; }
.faq-item:nth-child(2).visible { transition-delay: 0.05s; }
.faq-item:nth-child(3).visible { transition-delay: 0.1s; }
.faq-item:nth-child(4).visible { transition-delay: 0.15s; }
.faq-item:nth-child(5).visible { transition-delay: 0.2s; }
.faq-item:nth-child(6).visible { transition-delay: 0.25s; }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark-hover);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light-muted);
}

/* ========== SELECTION ========== */
::selection {
    background: var(--primary);
    color: var(--text-light);
}

/* ==========================================
   GLASS CONNECT - NEW SECTIONS
   Adapted to match Frontend App Design System
   Colors: #10B981 (green), #3B82F6 (blue)
   Style: Glassmorphism, gradients, dark theme
   ========================================== */

/* Common Section Styles */
.gc-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 16px;
    color: #106ab9;
    background: rgba(16, 120, 185, 0.1);
    border: 1px solid rgba(16, 120, 185, 0.2);
    border-radius: 50px;
}

.gc-subtitle.green {
    color: #10b970;
    background: rgba(16, 185, 117, 0.1);
    border: 1px solid rgba(16, 185, 112, 0.2);
}

.gc-section-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-light);
    margin-bottom: 20px;
}

.gc-section-title-dark {
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--bg-dark-secondary);
    margin-bottom: 10px;
}

.gc-title-accent {
    background: linear-gradient(135deg, #2f63b6 0%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gc-title-accent.green {
    background: linear-gradient(135deg, #2fb682 0%, #3bf6ab 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gc-section-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
}

.desc-dark {
    color: rgba(9, 18, 33, 0.553);
}

.gc-section-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 48px auto;
}

.gc-section-content .gc-section-desc {
    margin: 0 auto;
}

/* ========== SOLUTION SECTION ========== */
.gc-solution {
    background: linear-gradient(180deg, var(--bg-light-secondary) 0%,var(--bg-light-secondary) 40%, var(--orange) 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.gc-solution::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.gc-solution::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 50%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.gc-solution .container {
    position: relative;
    z-index: 1;
}

.gc-dashboard-preview {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 3px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(16, 185, 129, 0.1);
}

.gc-dashboard-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

/* ========== REASSURANCE SECTION - LIGHT VERSION ========== */
.gc-reassurance {
    background: var(--bg-light-secondary);
    padding: 100px 0 100px 0;
    position: relative;
}

.gc-reassurance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gc-reassurance-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    z-index: 99;
}

.gc-reassurance-card:hover {
    transform: translateY(-6px);
    border-color: rgba(16, 185, 129, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(16, 185, 129, 0.05);
}

.gc-reassurance-icon {
    width: 54px;
    height: 54px;
    background: linear-gradient(135deg, #10b98164 0%, #05966817 100%);
    border: 1px solid #059668c0;
    color: #26ad80;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    /* box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25); */
}

.blue {
    background: linear-gradient(135deg, #1067b950 0%, #1067b91b 100%);
    border: 1px solid #1067b9b7;
    color: #308ee6;
}

.orange {
    background: linear-gradient(135deg, #de8f215a 0%, #965a0514 100%);
    border: 1px solid #f09920;
    color: #ffa220;
}

.gc-reassurance-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    /* letter-spacing: 0.02em; */
}

.gc-reassurance-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dark-secondary);
}

/* ========== FEATURES SECTION ========== */
.gc-features {
    background: linear-gradient(180deg, #0A1628 0%, #0d1f35 100%);
    padding: 100px 0;
    position: relative;
}

.gc-features::before {
    content: '';
    position: absolute;
    top: 20%;
    right: -10%;
    width: 40%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.gc-features .container {
    position: relative;
    z-index: 1;
}

.gc-features-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    gap: 40px;
    flex-wrap: wrap;
}

.gc-features-header-text {
    flex: 1;
    min-width: 300px;
}

.gc-features-header-text .gc-section-desc {
    max-width: 500px;
}

/* Button Group - Gradient Style */
.gc-btn-group {
    display: flex;
    align-items: center;
    gap: 0;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.gc-btn-text {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    gap: 10px;
    display: flex;
    align-items: center;

    background: linear-gradient(135deg, #1075b9 0%, #055596 100%);
    color: white;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.gc-btn-text.green {
    background: linear-gradient(135deg, #10b978 0%, #05966d 100%) !important;
}

.gc-btn-arrow {
    width: 52px;
    height: 52px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gc-btn-arrow svg {
    transition: transform 0.3s ease;
}

.gc-btn-group:hover {
    transform: translateY(-2px);
}

.gc-btn-group:hover .gc-btn-arrow svg {
    transform: translateX(4px);
}

/* Features Grid */
.gc-features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

.gc-features-grid .gc-feature-card:nth-child(1),
.gc-features-grid .gc-feature-card:nth-child(2) {
    grid-column: span 3;
}

.gc-features-grid .gc-feature-card:nth-child(3),
.gc-features-grid .gc-feature-card:nth-child(4),
.gc-features-grid .gc-feature-card:nth-child(5) {
    grid-column: span 2;
}

.gc-feature-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 10px;
    transition: all 0.3s ease;
}

.gc-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(59, 130, 246, 0.1);
}

.gc-feature-image {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.9) 100%);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px;
}

.gc-feature-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(10, 22, 40, 0.18);
}

/* Reflet verre, meme traitement que les mockups du hero */
.gc-feature-image::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 2;
    pointer-events: none;
    border-radius: 8px;
    background:
        linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0) 66%),
        radial-gradient(130% 90% at 12% 6%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%);
}

.gc-feature-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #F9FAFB;
    margin-left: 10px;
    margin-bottom: 8px;
}

.gc-feature-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 10px;
    margin-bottom: 16px;
    flex: 1;
}

.gc-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #105cb9;
    transition: all 0.3s ease;
}

.gc-feature-link:hover {
    gap: 12px;
    color: #347ed3;
}

.gc-feature-link svg {
    transition: transform 0.3s ease;
}

.gc-feature-link:hover svg {
    transform: translateX(4px);
}

/* ========== RESPONSIVE - NEW SECTIONS ========== */
@media (max-width: 1024px) {
    .gc-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gc-features-grid .gc-feature-card:nth-child(1),
    .gc-features-grid .gc-feature-card:nth-child(2),
    .gc-features-grid .gc-feature-card:nth-child(3),
    .gc-features-grid .gc-feature-card:nth-child(4),
    .gc-features-grid .gc-feature-card:nth-child(5) {
        grid-column: span 1;
    }

    .gc-reassurance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gc-reassurance-grid .gc-reassurance-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .gc-solution,
    .gc-features {
        padding: 80px 0;
    }

    .gc-reassurance {
        padding: 80px 0 80px 0;
    }

    .gc-section-title {
        font-size: clamp(32px, 7vw, 48px);
    }

    .gc-features-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .gc-features-header-text {
        text-align: center;
    }

    .gc-features-header-text .gc-section-desc {
        margin: 0 auto;
    }

    .gc-features-grid,
    .gc-reassurance-grid {
        grid-template-columns: 1fr;
    }

    .gc-features-grid .gc-feature-card:nth-child(1),
    .gc-features-grid .gc-feature-card:nth-child(2),
    .gc-features-grid .gc-feature-card:nth-child(3),
    .gc-features-grid .gc-feature-card:nth-child(4),
    .gc-features-grid .gc-feature-card:nth-child(5) {
        grid-column: span 1;
    }

    .gc-reassurance-grid .gc-reassurance-card:last-child {
        grid-column: span 1;
    }

    .gc-reassurance-title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .gc-solution,
    .gc-features {
        padding: 60px 0;
    }

    .gc-reassurance {
        padding: 60px 0 60px 0;
    }

    .gc-section-content {
        margin-bottom: 32px;
    }

    .gc-subtitle {
        font-size: 12px;
    }

    .gc-section-desc {
        font-size: 15px;
    }

    .gc-btn-text {
        padding: 12px 20px;
        font-size: 14px;
    }

    .gc-btn-arrow {
        width: 44px;
        height: 44px;
    }

    .gc-reassurance-card {
        padding: 24px;
    }

    .gc-reassurance-icon {
        width: 56px;
        height: 56px;
    }

    .gc-reassurance-icon svg {
        width: 28px;
        height: 28px;
    }

    .gc-reassurance-title {
        font-size: 20px;
    }

    .gc-feature-card {
        padding: 10px;
    }
}

/* Animation classes for new sections */
.gc-reassurance-card,
.gc-feature-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gc-reassurance-card.visible,
.gc-feature-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.gc-reassurance-card:nth-child(1).visible { transition-delay: 0s; }
.gc-reassurance-card:nth-child(2).visible { transition-delay: 0.1s; }
.gc-reassurance-card:nth-child(3).visible { transition-delay: 0.2s; }

.gc-feature-card:nth-child(1).visible { transition-delay: 0s; }
.gc-feature-card:nth-child(2).visible { transition-delay: 0.1s; }
.gc-feature-card:nth-child(3).visible { transition-delay: 0.15s; }
.gc-feature-card:nth-child(4).visible { transition-delay: 0.2s; }
.gc-feature-card:nth-child(5).visible { transition-delay: 0.25s; }

/* Shimmer effect on dashboard preview */
.gc-dashboard-preview {
    position: relative;
    overflow: hidden;
}

.gc-dashboard-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: shimmer 3s infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Glow effect on hover for reassurance icons */
.gc-reassurance-card:hover .gc-reassurance-icon {
    /* box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4); */
}

/* Second card with blue accent */
.gc-reassurance-card:nth-child(2) .gc-reassurance-icon {
    /* box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25); */
}

.gc-reassurance-card:nth-child(2):hover .gc-reassurance-icon {
    /* box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4); */
}

.gc-reassurance-card:nth-child(2):hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(59, 130, 246, 0.05);
}

/* Third card with orange accent */
.gc-reassurance-card:nth-child(3) .gc-reassurance-icon {
    /* box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25); */
}

.gc-reassurance-card:nth-child(3):hover .gc-reassurance-icon {
    /* box-shadow: 0 12px 32px rgba(245, 158, 11, 0.4); */
}

.gc-reassurance-card:nth-child(3):hover {
    border-color: rgba(245, 158, 11, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(245, 158, 11, 0.05);
}

/* ==========================================
   GC-FEATURES SECTION - LIGHT VERSION
   ========================================== */
.gc-features {
    background: linear-gradient(180deg, var(--bg-light-secondary) 80%, var(--secondary-light) 100% )!important;
}

.gc-features::before {
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
}

.gc-features .gc-section-title {
    color: var(--text-dark);
}

.gc-features .gc-title-accent {
    background: linear-gradient(135deg, #2755a0 0%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gc-features .gc-section-desc {
    color: var(--text-dark-secondary);
}

.gc-features .gc-subtitle {
    color: #106ab9;
    background: rgba(16, 120, 185, 0.1);
    border: 1px solid rgba(16, 120, 185, 0.2);
}

/* Feature Cards - Light Version */
.gc-feature-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.gc-feature-card:hover {
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(59, 130, 246, 0.05);
}

.gc-feature-image {
    background: linear-gradient(135deg, #EAF4FF 0%, #EAFBF3 100%) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}

.gc-feature-title {
    color: var(--text-dark) !important;
}

.gc-feature-desc {
    color: var(--text-dark-secondary) !important;
}

/* Button Group - Light Version */
.gc-features .gc-btn-group {

}

/* ==========================================
   GC-PRICING SECTION
   Inspired by GoodCircle, adapted to Glass Connect
   ========================================== */
.gc-pricing {
    background: linear-gradient(180deg, var(--secondary-light) 0%, var(--bg-light-secondary) 20%)!important;
    padding: 100px 0;
    position: relative;
}

.gc-pricing-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.gc-pricing-header .gc-subtitle {
    color: #106ab9;
    background: rgba(16, 120, 185, 0.1);
    border: 1px solid rgba(16, 120, 185, 0.2);
}

.gc-pricing-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 0px;
}

.gc-pricing-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark-secondary);
    margin: 0 auto 40px auto;
    max-width: 500px;
    padding-bottom: 20px;
}

/* Pricing Grid */
.gc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;

    align-items: stretch;
}

/* Pricing Card Wrapper (for featured with badge) */
.gc-pricing-card-wrapper {
        /* margin-top: 30px; */
    position: relative;
    transform: scale(1.05);
    z-index: 2;
}

/* Pricing Card */
.gc-pricing-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.gc-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Featured Card (Premium) */
.gc-pricing-card.featured {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: none;
    box-shadow: 0 8px 40px rgba(16, 185, 129, 0.3);
}

.gc-pricing-card.featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(16, 185, 129, 0.4);
}

/* Recommended Badge */
.gc-recommended-badge {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0f724f 0%, #096148 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 16px rgba(11, 245, 132, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 10;
}

.gc-recommended-badge svg {
    width: 12px;
    height: 12px;
}

/* Card Header */
.gc-pricing-card-header {
    text-align: left;
    padding: 20px;
    background-color: var(--bg-light-secondary);
    border-radius: 14px;
    margin-bottom: 16px;
}

.gc-pricing-card.featured .gc-pricing-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.gc-plan-name {
    font-family: var(--font-body);
    font-size: 44px;
    font-weight: 700;
    
    /* margin-bottom: 8px; */
}

.gc-pricing-card.featured .gc-plan-name {
   color: #096148;
}

.gc-plan-subtitle {
    font-size: 16px;
    color: var(--text-dark-secondary);
    margin-top: -5px;
}

.gc-pricing-card.featured .gc-plan-subtitle {
    color: rgba(12, 73, 52, 0.8);
}

/* Pricing Price */
.gc-pricing-price {
    text-align: left;
    margin-bottom: 8px;
}

.gc-price-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 10px;
}

.gc-price-amount {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.gc-pricing-card.featured .gc-price-amount {
    color: #ffffff;
}

.gc-price-period {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark-secondary);
}

.gc-pricing-card.featured .gc-price-period {
    color: rgba(255, 255, 255, 0.8);
}

.gc-price-billing {
    font-size: 14px;
    color: var(--text-dark-secondary);
    margin: 1px 0 0 8px;
}

.gc-pricing-card.featured .gc-price-billing {
    color: rgba(255, 255, 255, 0.7);
}

/* Features List */
.gc-pricing-features {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0 0px 28px 10px;
}

.gc-pricing-feature {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 0;
    font-size: 15px;
    color: var(--text-dark-secondary);
    line-height: 1.5;
}

.gc-pricing-card.featured .gc-pricing-feature {
    color: rgba(255, 255, 255, 0.95);
}

.gc-feature-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    color: #10B981;
    margin-top: 1px;
}

.gc-feature-icon svg {
    width: 12px;
    height: 12px;
}

.gc-pricing-card.featured .gc-feature-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}


.gc-feature-icon.disabled svg {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}
/* Feature Badge */
.gc-feature-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 4px;
}

/* Pricing CTA */
.gc-pricing-cta {
    margin-top: auto;
}

.gc-pricing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.gc-pricing-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.gc-pricing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.gc-pricing-btn:hover svg {
    transform: translateX(4px);
}

/* Featured card button - white style */
.gc-pricing-card.featured .gc-pricing-btn {
    background: #ffffff;
    color: #059669;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.gc-pricing-card.featured .gc-pricing-btn:hover {
    background: #F9FAFB;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ========== CARD COLORS - BLUE (BASIC) ========== */

.gc-pricing-card.card-blue:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
}

.gc-pricing-card.card-blue .gc-plan-name {
    color: #2b518e;
}

.gc-pricing-card.card-blue .gc-feature-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.gc-pricing-card.card-blue .gc-pricing-btn {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.gc-pricing-card.card-blue .gc-pricing-btn:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* ========== CARD COLORS - GREEN (PREMIUM/FEATURED) ========== */
/* Already styled as featured - keeping green */

/* ========== CARD COLORS - ORANGE (CHIFFRAGE) ========== */

.gc-pricing-card.card-orange:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.15);
}

.gc-pricing-card.card-orange .gc-plan-name  {
    color: #574524;
}

.gc-pricing-card.card-orange .gc-feature-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.gc-pricing-card.card-orange .gc-pricing-btn {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.gc-pricing-card.card-orange .gc-pricing-btn:hover {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}

/* Pricing Reassurance */
.gc-pricing-reassurance {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.gc-reassurance-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dark-secondary);
    font-size: 15px;
    font-weight: 500;
}

.gc-reassurance-item svg {
    flex-shrink: 0;
}

/* ========== PRICING RESPONSIVE ========== */
@media (max-width: 1024px) {
    .gc-pricing-grid {
        gap: 20px;
    }

    .gc-pricing-card {
        padding: 12px;
    }

    .gc-pricing-card-wrapper {
        transform: scale(1.02);
    }

    .gc-price-amount {
        font-size: 48px;
    }
}

@media (max-width: 900px) {
    .gc-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    .gc-pricing-card-wrapper {
        transform: none;
        order: -1;
    }

    .gc-pricing-card {
        padding: 12px;
    }

    .gc-price-amount {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .gc-pricing {
        padding: 80px 0;
    }

    .gc-pricing-header {
        margin-bottom: 48px;
    }

    .gc-pricing-reassurance {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 48px;
    }
}

@media (max-width: 480px) {
    .gc-pricing {
        padding: 60px 0;
    }

    .gc-pricing-card {
        padding: 12px;
    }

    .gc-price-amount {
        font-size: 44px;
    }

    .gc-pricing-feature {
        font-size: 14px;
    }

    .gc-pricing-btn {
        padding: 14px 20px;
        font-size: 14px;
    }

    .gc-reassurance-item {
        font-size: 14px;
    }

    .gc-pricing-title {
        font-size: 28px;
    }
}

/* Pricing Card Animations */
.gc-pricing-card,
.gc-pricing-card-wrapper {
    opacity: 1;
}

.gc-pricing-grid > .gc-pricing-card,
.gc-pricing-grid > .gc-pricing-card-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.gc-pricing-grid > .gc-pricing-card-wrapper {
    transform: scale(1.05) translateY(30px);
}

.gc-pricing-grid > .gc-pricing-card.visible,
.gc-pricing-grid > .gc-pricing-card-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

.gc-pricing-grid > .gc-pricing-card-wrapper.visible {
    transform: scale(1.05) translateY(0);
}

.gc-pricing-grid > :nth-child(1).visible { transition-delay: 0s; }
.gc-pricing-grid > :nth-child(2).visible { transition-delay: 0.15s; }
.gc-pricing-grid > :nth-child(3).visible { transition-delay: 0.3s; }

@media (max-width: 900px) {
    .gc-pricing-grid > .gc-pricing-card-wrapper,
    .gc-pricing-grid > .gc-pricing-card-wrapper.visible {
        transform: translateY(0);
    }
}

/* ==========================================
   FEATURE DETAIL PAGES
   ========================================== */

/* Feature Hero - Light Theme */
.feature-hero {
    position: relative;
    padding: 120px 24px 80px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-light);
}

.bg-blue {
    background: linear-gradient(0deg, transparent 20%, var(--primary-light) 100%);
}

.bg-green {
    background: linear-gradient(0deg, transparent 20%, var(--secondary-light) 100%);
}

.bg-orange {
    background: linear-gradient(0deg, transparent 20%, var(--orange) 100%);
}

.feature-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(22, 138, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
    z-index: 0;
}

.feature-hero-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.feature-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Decorative watermark icon in the hero corner - subtle, non-structural */
.feature-hero-glyph {
    position: absolute;
    top: -60px;
    right: -40px;
    width: 420px;
    height: 420px;
    opacity: 0.07;
    color: var(--primary);
    pointer-events: none;
    z-index: 0;
}

.feature-hero-glyph svg,
.feature-hero-glyph img {
    width: 100%;
    height: 100%;
    display: block;
}

.feature-hero-glyph.green {
    color: var(--secondary-dark);
}

.feature-hero-glyph.orange {
    color: var(--orange-dark);
}

.feature-hero-glyph.gray {
    color: #64748b;
}

.feature-hero-glyph.dark {
    color: #171b21;
}

@media (max-width: 900px) {
    .feature-hero-glyph {
        width: 260px;
        height: 260px;
        top: -30px;
        right: -30px;
    }
}

@media (max-width: 600px) {
    .feature-hero-glyph {
        width: 150px;
        height: 150px;
        top: 400px;
        right: -20px;
    }
}

/* Offer hero glyph - more present than the default feature-page watermark:
   solid white so it reads clearly against the offer's colored gradient bg */
.feature-hero-glyph.offer-hero-glyph {
    opacity: 0.16;
    width: 460px;
    height: 460px;
    top: 50px;
    right: -50px;
    color: #ffffff;
}

@media (max-width: 900px) {
    .feature-hero-glyph.offer-hero-glyph {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 600px) {
    .feature-hero-glyph.offer-hero-glyph {
        width: 170px;
        height: 170px;
        top: 150px;
        right: -20px;
    }
}

.feature-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
}

.feature-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.feature-hero-image.ratio-16-9 {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.feature-hero-image.ratio-16-9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   HERO PARALLAX CONTAINER - Parallax in Hero
   ============================================ */

.hero-parallax-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 480px;
    overflow: visible;
}

/* Premium specific - 16:9 ratio */
.hero-parallax-container.ratio-16-9 {
    max-width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
}

.hero-parallax-container .parallax-widget {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.hero-parallax-container .parallax-widget-1 {
    top: 5%;
    left: -10%;
}

.hero-parallax-container .parallax-widget-2 {
    top: 15%;
    right: -15%;
}

.hero-parallax-container .parallax-widget-3 {
    bottom: 10%;
    left: -5%;
}

.hero-parallax-container .parallax-main-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    z-index: 5;
}

.hero-parallax-container .parallax-main-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Responsive Hero Parallax */
@media (max-width: 1200px) {
    .hero-parallax-container {
        max-width: 500px;
        height: 350px;
    }

    .hero-parallax-container .parallax-widget {
        transform: scale(0.9);
    }

    .hero-parallax-container .parallax-widget-1 {
        left: -5%;
    }

    .hero-parallax-container .parallax-widget-2 {
        right: -10%;
    }
}

@media (max-width: 968px) {
    .hero-parallax-container {
        max-width: 100%;
        height: 320px;
        margin-top: 40px;
    }

    .hero-parallax-container .parallax-widget {
        transform: scale(0.85);
        padding: 12px 16px;
    }

    .hero-parallax-container .parallax-widget-1 {
        top: 0;
        left: 0;
    }

    .hero-parallax-container .parallax-widget-2 {
        top: 5%;
        right: 0;
    }

    .hero-parallax-container .parallax-widget-3 {
        bottom: 5%;
        left: 5%;
    }
}

@media (max-width: 640px) {
    .hero-parallax-container {
        height: 280px;
    }

    .hero-parallax-container .parallax-widget {
        transform: scale(0.7);
        padding: 10px 14px;
    }

    .hero-parallax-container .parallax-widget-1 {
        top: -5%;
        left: -8%;
    }

    .hero-parallax-container .parallax-widget-2 {
        top: 0;
        right: -8%;
    }

    .hero-parallax-container .parallax-widget-3 {
        bottom: 0;
        left: -3%;
    }

    .hero-parallax-container .parallax-main-image {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .hero-parallax-container {
        height: 240px;
    }

    .hero-parallax-container .parallax-widget {
        transform: scale(0.6);
    }

    .hero-parallax-container .parallax-widget-1 {
        top: -10%;
        left: -12%;
    }

    .hero-parallax-container .parallax-widget-2 {
        top: -5%;
        right: -12%;
    }

    .hero-parallax-container .parallax-widget-3 {
        bottom: -5%;
        left: -8%;
    }
}

/* ============================================
   OFFER STEPS SECTION - Step by Step Process
   ============================================ */

.offer-steps-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle grid + halo to break up the white background, echoing the
   home page's CTA/hero pattern but toned down for a light section */
.offer-steps-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(10, 22, 40, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 40, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 30%, transparent 78%);
}

.offer-steps-section::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translateX(-50%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.offer-steps-section.theme-blue::after {
    background: radial-gradient(circle, rgba(22, 138, 255, 0.10), transparent 65%);
}

.offer-steps-section.theme-green::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.10), transparent 65%);
}

.offer-steps-section.theme-orange::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.10), transparent 65%);
}

.offer-steps-section > .container {
    position: relative;
    z-index: 1;
}

.offer-steps-header {
    text-align: center;
    margin-bottom: 80px;
}

.offer-steps-header .gc-subtitle {
    display: inline-block;
    margin-bottom: 16px;
}

.offer-steps-header .gc-section-title {
    margin-bottom: 20px;
}

.offer-steps-header p {
    font-size: 18px;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
}

/* Timeline Container */
.offer-steps-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Vertical Line */
.offer-steps-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 3px;
}

/* Single Step */
.offer-step {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
}

.offer-step:last-child {
    margin-bottom: 0;
}

.offer-step:nth-child(odd) {
    flex-direction: row;
}

.offer-step:nth-child(even) {
    flex-direction: row-reverse;
}

/* Step Number Badge */
.offer-step-number {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: white;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(22, 138, 255, 0.3);
}

/* Step Content */
.offer-step-content {
    width: calc(50% - 60px);
    padding: 28px 32px;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.offer-step:nth-child(odd) .offer-step-content {
    margin-right: auto;
    text-align: right;
}

.offer-step:nth-child(even) .offer-step-content {
    margin-left: auto;
    text-align: left;
}

.offer-step-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.offer-step-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.offer-step-icon {
    width: 44px;
    height: 44px;
    background: rgba(22, 138, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #168aff;
}

.offer-step:nth-child(odd) .offer-step-icon {
    margin-left: auto;
}

/* Themed icon styles - Blue (default) */
.offer-steps-section.theme-blue .offer-step-icon {
    background: rgba(22, 138, 255, 0.1);
    color: #168aff;
}

/* Themed icon styles - Green */
.offer-steps-section.theme-green .offer-step-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Themed icon styles - Orange (Chiffrage) */
.offer-steps-section.theme-orange .offer-step-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.offer-step-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.offer-step-description {
    font-size: 15px;
    color: #475569;
    line-height: 1.7;
}

/* Step Visual - a concrete mini preview of what the step produces (a real
   widget mock, not an abstract icon), revealed on the empty side of the
   timeline only while its card is the active (in-view) one */
.offer-step-visual {
    position: absolute;
    top: 50%;
    width: 230px;
    transform: translateY(-50%) scale(0.92);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: 1;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.14);
}

.offer-step:nth-child(odd) .offer-step-visual {
    right: 30px;
}

.offer-step:nth-child(even) .offer-step-visual {
    left: 30px;
}

.offer-step-content.in-view ~ .offer-step-visual {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.offer-steps-section.theme-blue .widget-progress-fill {
    background: linear-gradient(90deg, #168aff 0%, #3b82f6 100%);
}

.offer-steps-section.theme-green .widget-progress-fill {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.offer-steps-section.theme-orange .widget-progress-fill {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

@media (max-width: 968px) {
    .offer-step-visual {
        display: none;
    }
}

.price-unit {
    margin: 5px
}

/* ============================================
   OFFER THEME COLORS - Per offer customization
   ============================================ */

/* BASIC - Blue Theme */
.offer-steps-section.theme-blue .offer-steps-timeline::before {
    background: linear-gradient(180deg, #168aff 0%, #3b82f6 100%);
}

.offer-steps-section.theme-blue .offer-step-number {
    background: linear-gradient(135deg, #168aff 0%, #3b82f6 100%);
    box-shadow: 0 10px 30px rgba(22, 138, 255, 0.3);
}

.offer-steps-section.theme-blue .offer-step-content:hover,
.offer-steps-section.theme-blue .offer-step-content.in-view {
    border-color: #168aff;
}

/* PREMIUM - Green Theme */
.offer-steps-section.theme-green .offer-steps-timeline::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.offer-steps-section.theme-green .offer-step-number {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.offer-steps-section.theme-green .offer-step-content:hover,
.offer-steps-section.theme-green .offer-step-content.in-view {
    border-color: #10b981;
}

.offer-steps-section.theme-green .gc-title-accent {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CHIFFRAGE - Orange Theme */
.offer-steps-section.theme-orange .offer-steps-timeline::before {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
}

.offer-steps-section.theme-orange .offer-step-number {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.offer-steps-section.theme-orange .offer-step-content:hover,
.offer-steps-section.theme-orange .offer-step-content.in-view {
    border-color: #F59E0B;
}

.offer-steps-section.theme-orange .gc-title-accent {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   PARALLAX THEME COLORS - Per offer customization
   ============================================ */

/* BASIC - Blue Parallax */
.parallax-showcase.theme-blue {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%);
}

.parallax-showcase.theme-blue .widget-progress-fill {
    background: linear-gradient(90deg, #168aff 0%, #60a5fa 100%);
}

/* PREMIUM - Green Parallax */
.parallax-showcase.theme-green {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
}

.parallax-showcase.theme-green .gc-title-accent {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.parallax-showcase.theme-green .widget-progress-fill {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

/* CHIFFRAGE - Orange Parallax */
.parallax-showcase.theme-orange {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
}

.parallax-showcase.theme-orange .gc-title-accent {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.parallax-showcase.theme-orange .widget-progress-fill {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

/* ============================================
   FIX: Hero text contrast on colored backgrounds
   ============================================ */

.feature-hero.bg-blue .feature-hero-description,
.feature-hero.bg-green .feature-hero-description,
.feature-hero.bg-orange .feature-hero-description {
    color: rgba(255, 255, 255, 0.9);
}

.feature-hero.bg-blue .feature-hero-title,
.feature-hero.bg-green .feature-hero-title,
.feature-hero.bg-orange .feature-hero-title {
    color: white;
}

.feature-hero.bg-blue .feature-hero-badge,
.feature-hero.bg-green .feature-hero-badge,
.feature-hero.bg-orange .feature-hero-badge {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.feature-hero.bg-blue .feature-hero-badge svg,
.feature-hero.bg-green .feature-hero-badge svg,
.feature-hero.bg-orange .feature-hero-badge svg {
    stroke: white;
}

.feature-hero.bg-blue .price-amount,
.feature-hero.bg-green .price-amount,
.feature-hero.bg-orange .price-amount {
    color: white;
}

.feature-hero.bg-blue .price-unit,
.feature-hero.bg-green .price-unit,
.feature-hero.bg-orange .price-unit {
    color: rgba(255, 255, 255, 0.8);
}

.feature-hero.bg-blue .btn-secondary,
.feature-hero.bg-green .btn-secondary,
.feature-hero.bg-orange .btn-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.feature-hero.bg-blue .btn-secondary:hover,
.feature-hero.bg-green .btn-secondary:hover,
.feature-hero.bg-orange .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   PARALLAX WIDGETS - Floating Animated Widgets
   ============================================ */

.parallax-showcase {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
    min-height: 600px;
}

.parallax-showcase-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 10;
}

.parallax-showcase-header .gc-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.parallax-showcase-header .gc-section-title {
    color: white;
}

.parallax-showcase-header .gc-title-accent {
    background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Parallax Container */
.parallax-container {
    position: relative;
    height: 500px;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
    background-color: transparent;
}

/* Main Image */
.parallax-main-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 700px;
    z-index: 5;
}

.parallax-main-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Floating Widgets */
.parallax-widget {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.parallax-widget-1 {
    top: 10%;
    left: 5%;
}

.parallax-widget-2 {
    top: 20%;
    right: 5%;
}

.parallax-widget-3 {
    bottom: 15%;
    left: 10%;
}

/* Widget Content Styles */
.widget-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border-width: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-stat-icon.blue {
    background: linear-gradient(135deg, #168affcb 0%, #60a5fa2b 100%);
    color: #168aff;
    border-color: #168affcb;
}

.widget-stat-icon.green {
    background: linear-gradient(135deg, #10b981c0 0%, #34d3994b 100%);
    color: #10b981;
    border-color:#10b981c0;
}

.widget-stat-icon.orange {
    background: linear-gradient(135deg, #ff93358c 0%, #fb923c1f 100%);
    color: #ff9035d0;
    border-color:#ff8d35d0;
}

.widget-stat-content h4 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.widget-stat-content span {
    font-size: 13px;
    color: var(--text-dark-secondary);
}

/* Widget with progress */
.widget-progress {
    min-width: 180px;
}

.widget-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 3px;
}

.widget-progress-header span {
    font-size: 13px;
    color: var(--text-dark);
}

.widget-progress-header strong {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.widget-progress-bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.widget-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, #60a5fa 100%);
    border-radius: 4px;
    transition: width 1s ease;
}

/* Widget notification style */
.widget-notification {
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget-notification-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.widget-notification-content p {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.widget-notification-content span {
    font-size: 12px;
    color: var(--text-dark);
}

/* Responsive for steps and parallax */
@media (max-width: 968px) {
    .offer-steps-timeline::before {
        left: 30px;
    }

    .offer-step {
        flex-direction: column !important;
        padding-left: 80px;
    }

    .offer-step-number {
        left: 30px;
        transform: translateX(-50%);
    }

    .offer-step-content {
        width: 100%;
        text-align: left !important;
        margin: 0 !important;
    }

    .offer-step:nth-child(odd) .offer-step-icon {
        margin-left: 0;
    }

    .parallax-container {
        height: 400px;
    }

    .parallax-main-image {
        width: 85%;
    }

    .parallax-widget {
        padding: 14px 18px;
        transform: scale(0.85);
    }

    .parallax-widget-1 {
        top: 5%;
        left: 0;
    }

    .parallax-widget-2 {
        top: 10%;
        right: 0;
    }

    .parallax-widget-3 {
        bottom: 5%;
        left: 5%;
    }
}

@media (max-width: 640px) {
    .offer-steps-section {
        padding: 60px 0;
    }

    .offer-steps-header {
        margin-bottom: 50px;
    }

    .offer-step {
        margin-bottom: 50px;
        padding-left: 60px;
    }

    .offer-steps-timeline::before {
        left: 20px;
    }

    .offer-step-number {
        width: 40px;
        height: 40px;
        font-size: 18px;
        left: 20px;
    }

    .offer-step-content {
        padding: 20px 24px;
    }

    .parallax-showcase {
        padding: 60px 0;
        min-height: 450px;
    }

    .parallax-container {
        height: 350px;
    }

    .parallax-widget {
        transform: scale(0.7);
    }

    .parallax-widget-1 {
        top: 0;
        left: -5%;
    }

    .parallax-widget-2 {
        top: 5%;
        right: -5%;
    }

    .parallax-widget-3 {
        bottom: 0;
        left: 0;
    }
}

@media (max-width: 480px) {
    .parallax-showcase {
        padding: 50px 0;
        min-height: 380px;
    }

    .parallax-container {
        height: 300px;
    }

    .parallax-widget {
        transform: scale(0.6);
        padding: 10px 14px;
    }

    .parallax-widget-1 {
        top: -5%;
        left: -10%;
    }

    .parallax-widget-2 {
        top: 0;
        right: -10%;
    }

    .parallax-widget-3 {
        bottom: -5%;
        left: -5%;
    }

    .parallax-main-image {
        width: 90%;
    }

    .widget-stat-content h4 {
        font-size: 20px;
    }

    .widget-stat-content span {
        font-size: 11px;
    }

    .widget-progress-header span,
    .widget-progress-header strong {
        font-size: 11px;
    }

    .widget-notification-content p {
        font-size: 12px;
    }

    .widget-notification-content span {
        font-size: 10px;
    }
}

.feature-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(22, 138, 255, 0.1);
    border: 1px solid rgba(22, 138, 255, 0.2);
    border-radius: 50px;
    margin-bottom: 24px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
}

.feature-hero-badge svg {
    width: 18px;
    height: 18px;
}

.feature-hero-badge.badge-orange {
    background: rgba(160, 109, 14, 0.1);
    border-color: rgba(160, 109, 14, 0.2);
    color: var(--orange-dark);
}

.feature-hero-badge.badge-green {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.2);
    color: var(--secondary-dark);
}

.feature-hero-badge.badge-gray {
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.2);
    color: #64748b;
}

.feature-hero-badge.badge-dark {
    background: rgba(23, 27, 33, 0.08);
    border-color: rgba(23, 27, 33, 0.18);
    color: #171b21;
}

.feature-hero-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.15;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .feature-hero-title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .feature-hero-title {
        font-size: 48px;
    }
}

.feature-hero-title .highlight {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-hero-title .highlight-orange {
    background: linear-gradient(90deg, #dc8f0b 0%, #b96506 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-hero-title .highlight-green {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-hero-title .highlight-gray {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-hero-title .highlight-dark {
    background: linear-gradient(135deg, #3a4250 0%, #171b21 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-hero-description {
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.feature-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Feature Detail Sections */
.feature-detail-section {
    padding: 80px 24px;
    background: var(--bg-dark);
}

.feature-detail-section:nth-child(odd) {
    background: var(--bg-dark-secondary);
}

.feature-detail-row {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature-detail-row.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-detail-row.reverse {
    flex-direction: row-reverse;
}

.feature-detail-image {
    flex: 1;
    min-width: 0;
}

.feature-detail-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.feature-detail-content {
    flex: 1;
    min-width: 0;
}

.feature-detail-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 138, 255, 0.15);
    border: 1px solid rgba(22, 138, 255, 0.25);
    margin-bottom: 24px;
    color: var(--primary);
}

.feature-detail-icon.green {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--secondary);
}

.feature-detail-icon.orange {
    background: rgba(245, 186, 10, 0.15);
    border-color: rgba(245, 186, 10, 0.25);
    color: #f5ba0a;
}

.feature-detail-icon svg {
    width: 28px;
    height: 28px;
}

.feature-detail-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.feature-detail-description {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Feature Checklist */
.feature-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--text-light-secondary);
    font-size: 15px;
}

.feature-checklist li svg {
    color: var(--secondary);
    flex-shrink: 0;
}

/* Feature Grid Section */
.feature-grid-section {
    padding: 80px 24px;
    background: var(--bg-dark);
}

.feature-grid-header {
    text-align: center;
    margin-bottom: 48px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-grid-card {
    background: var(--bg-card-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
}

.feature-grid-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-grid-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-grid-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 138, 255, 0.15);
    border: 1px solid rgba(22, 138, 255, 0.25);
    margin-bottom: 20px;
    color: var(--primary);
}

.feature-grid-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 12px;
}

.feature-grid-card p {
    font-size: 14px;
    color: var(--text-light-muted);
    line-height: 1.6;
}

/* Theme color reminder - subtle background glow matching the page's identity color */
.feature-detail-section.accent-blue,
.feature-grid-section.accent-blue {
    background-image: radial-gradient(ellipse 900px 460px at 50% 0%, rgba(22, 138, 255, 0.12) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.feature-detail-section.accent-green,
.feature-grid-section.accent-green {
    background-image: radial-gradient(ellipse 900px 460px at 50% 0%, rgba(5, 150, 105, 0.12) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.feature-detail-section.accent-orange,
.feature-grid-section.accent-orange {
    background-image: radial-gradient(ellipse 900px 460px at 50% 0%, rgba(160, 109, 14, 0.14) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.feature-detail-section.accent-gray,
.feature-grid-section.accent-gray {
    background-image: radial-gradient(ellipse 900px 460px at 50% 0%, rgba(100, 116, 139, 0.12) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.feature-detail-section.accent-dark,
.feature-grid-section.accent-dark {
    background-image: radial-gradient(ellipse 900px 460px at 50% 0%, rgba(148, 163, 184, 0.1) 0%, transparent 70%);
    background-repeat: no-repeat;
}

/* Feature Grid - icon and hover accent match the page's theme color */
.feature-grid-section.accent-blue .feature-grid-icon {
    background: rgba(22, 138, 255, 0.15);
    border-color: rgba(22, 138, 255, 0.25);
    color: var(--primary);
}

.feature-grid-section.accent-blue .feature-grid-card:hover {
    border-color: var(--primary);
}

.feature-grid-section.accent-green .feature-grid-icon {
    background: rgba(5, 150, 105, 0.15);
    border-color: rgba(5, 150, 105, 0.25);
    color: var(--secondary-dark);
}

.feature-grid-section.accent-green .feature-grid-card:hover {
    border-color: var(--secondary-dark);
}

.feature-grid-section.accent-orange .feature-grid-icon {
    background: rgba(160, 109, 14, 0.15);
    border-color: rgba(160, 109, 14, 0.25);
    color: var(--orange-dark);
}

.feature-grid-section.accent-orange .feature-grid-card:hover {
    border-color: var(--orange-dark);
}

.feature-grid-section.accent-gray .feature-grid-icon {
    background: rgba(100, 116, 139, 0.15);
    border-color: rgba(100, 116, 139, 0.25);
    color: #64748b;
}

.feature-grid-section.accent-gray .feature-grid-card:hover {
    border-color: #64748b;
}

.feature-grid-section.accent-dark .feature-grid-icon {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.22);
    color: #cbd5e1;
}

.feature-grid-section.accent-dark .feature-grid-card:hover {
    border-color: #94a3b8;
}

/* Feature Grid header (gc-subtitle / gc-title-accent) - match the page's theme color */
.feature-grid-section.accent-blue .gc-subtitle {
    color: var(--primary);
    background: rgba(22, 138, 255, 0.1);
    border-color: rgba(22, 138, 255, 0.2);
}

.feature-grid-section.accent-blue .gc-title-accent {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-grid-section.accent-green .gc-subtitle {
    color: var(--secondary-dark);
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.2);
}

.feature-grid-section.accent-green .gc-title-accent {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-grid-section.accent-orange .gc-subtitle {
    color: var(--orange-dark);
    background: rgba(160, 109, 14, 0.1);
    border-color: rgba(160, 109, 14, 0.2);
}

.feature-grid-section.accent-orange .gc-title-accent {
    background: linear-gradient(90deg, #dc8f0b 0%, #b96506 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-grid-section.accent-gray .gc-subtitle {
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.2);
}

.feature-grid-section.accent-gray .gc-title-accent {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-grid-section.accent-dark .gc-subtitle {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.22);
}

.feature-grid-section.accent-dark .gc-title-accent {
    background: linear-gradient(135deg, #94a3b8 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Feature Pages */
@media (max-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .feature-hero {
        padding: 100px 20px 60px;
        min-height: auto;
    }

    .feature-detail-section {
        padding: 60px 20px;
    }

    .feature-detail-row,
    .feature-detail-row.reverse {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .feature-detail-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-checklist li {
        justify-content: center;
    }

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

    .feature-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .feature-hero-actions .btn-group,
    .feature-hero-actions .btn-secondary,
    .feature-hero-actions .btn-cta {
        width: 100%;
        max-width: 280px;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 16px;
        justify-content: center;
    }
}

/* Screen Reader Only - Pour SEO/IA (contenu invisible mais lisible par crawlers) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   Navigation Dropdowns (Desktop)
   ========================================= */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: red;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    padding: 10px 0px 10px 10px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(10px);
    z-index: 1000;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-light-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.nav-dropdown-menu a:hover {
    background: var(--bg-glass-dark-hover);
    color: var(--text-light);
}

.nav-dropdown-menu a svg,
.nav-dropdown-menu a img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nav-dropdown-menu a svg {
    stroke: var(--text-light-secondary);
}

.nav-dropdown-menu a svg[fill="currentColor"] {
    fill: var(--text-light-secondary);
    stroke: none;
}
.nav-dropdown-menu a svg[fill="greenColor"] {
    fill: var(--text-light-secondary);
    stroke: none;
}

.nav-dropdown-menu a svg[fill="orangeColor"] {
    fill: var(--text-light-secondary);
    stroke: none;
}

.nav-dropdown-menu a:hover svg {
    stroke: #FFF;
}

.nav-dropdown-menu a:hover svg[fill="currentColor"] {
    fill: #FFF;
}

.nav-dropdown-menu a:hover svg[fill="greenColor"] {
    fill: #FFF;
}

.nav-dropdown-menu a:hover svg[fill="orangeColor"] {
    fill: #FFF;
}
/* =========================================
   Mobile Collapse
   ========================================= */
.mobile-collapse {
    width: 100%;
}

.mobile-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 1px solid var(--border-dark);
}

.mobile-collapse-icon {
    transition: transform 0.3s ease;
}

.mobile-collapse.active .mobile-collapse-icon {
    transform: rotate(180deg);
}

.mobile-collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-collapse.active .mobile-collapse-content {
    max-height: 300px;
}

.mobile-collapse-content a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-light-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-dark);
}

.mobile-collapse-content a svg,
.mobile-collapse-content a img {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.mobile-collapse-content a svg {
    stroke: var(--text-light-secondary);
}

.mobile-collapse-content a svg[fill="currentColor"] {
    fill: var(--text-light-secondary);
    stroke: none;
}

.mobile-collapse-content a:hover {
    color: var(--primary);
}

/* Hide dropdown on mobile */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        display: none;
    }
}


/* ===== TYPOGRAPHIE GLOBALE : Outfit (--font-display) plafonné à 600 + échelle réduite (release@4.0.0) ===== */
.hero h1,.metric-value,.problem-text h2,.solution-text h2,.cta-content h2,
.gc-about-stat-value,.stat-number,.gc-section-title,.gc-section-title-dark,
.gc-reassurance-title,.gc-feature-title,.gc-pricing-title,.gc-price-amount,
.gc-number-value,.gc-page-hero h1,.card-price,.card-header h3,.feature-info h3,
.price-amount,.gc-audience-card h3,.gc-story-card h3,.gc-value-card h3,
.benefit-card h3,.feature-number,.footer-links h4,.footer-contact h4,
.offer-step-number,.offer-step-title,.widget-stat-content h4,
.feature-hero-title,.feature-detail-title,.feature-grid-card h3,
.features-section .section-header h2,.pricing-section .section-header h2{font-weight:600 !important;}
.gc-section-title,.gc-section-title-dark{font-size:clamp(25px,4.4vw,40px);}
.gc-pricing-title{font-size:clamp(25px,4.4vw,38px);}
.gc-reassurance-title{font-size:26px;}
.gc-feature-title{font-size:21px;}
.problem-text h2,.solution-text h2{font-size:24px;}
.cta-content h2{font-size:28px;}
.gc-about-stat-value,.gc-number-value{font-size:38px;}
.stat-number{font-size:27px;}
.gc-price-amount{font-size:44px;}
.gc-section-desc,.gc-about-desc{font-size:16px;}
@media (max-width:640px){
.gc-reassurance-title{font-size:22px;}
.gc-feature-title{font-size:20px;}
.problem-text h2,.solution-text h2{font-size:21px;}
.cta-content h2{font-size:24px;}
.gc-about-stat-value,.gc-number-value{font-size:32px;}
.stat-number{font-size:24px;}
.gc-price-amount{font-size:38px;}
}


/* ================================================================
   MENU DROPDOWN (mega-menu nav) - fusionné depuis les <style> inline
   ================================================================ */
.nav-dropdown{position:relative;}.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:6px;}.nav-dropdown-toggle::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;opacity:0.55;transition:var(--transition);}.nav-dropdown:hover .nav-dropdown-toggle::after{transform:rotate(225deg);margin-top:3px;opacity:1;}.nav-dropdown-menu{position:absolute;top:100%;left:50%;margin-top:0px;transform:translateX(-50%) translateY(6px) scale(0.98);transform-origin:top center;max-width:calc(100vw - 32px);background:rgba(19, 34, 58, 0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:10px;display:flex;align-items:stretch;gap:0px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s;z-index:1001;}.nav-dropdown-menu::before{content:'';position:absolute;top:-20px;left:0;right:0;height:16px;}.nav-dropdown-menu::after{content:'';position:absolute;top:-6px;left:50%;width:12px;height:12px;background:rgba(15, 33, 60, 0.98);border-left:1px solid var(--border-dark);border-top:1px solid var(--border-dark);transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0;}.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}.dropdown-list{display:flex;flex-direction:column;gap:2px;width:250px;flex-shrink:0;padding-right:10px;}.dropdown-item{position:relative;display:flex;align-items:flex-start;gap:12px;padding:9px 10px;border-radius:10px;transition:var(--transition);}.dropdown-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--item-color,var(--primary));opacity:0;transition:var(--transition);}.dropdown-item:hover,.dropdown-item.active{background:var(--bg-glass-dark-hover);}.dropdown-item:hover::before,.dropdown-item.active::before{opacity:1;}.dropdown-item-icon{flex-shrink:0;display:flex;width:16px;height:16px;padding:8px;box-sizing:content-box;background:var(--bg-glass-dark);border-radius:9px;color:var(--item-color,var(--primary-light));transition:var(--transition);}.dropdown-item:hover .dropdown-item-icon,.dropdown-item.active .dropdown-item-icon{background:var(--item-color,var(--primary));color:#fff;}.dropdown-item-text{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px;}.dropdown-item-title{font-size:14px;font-weight:600;color:var(--text-light);}.dropdown-item-subtitle{display:block;font-size:12px;color:var(--text-light-muted);line-height:1.4;max-height:0;opacity:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.3s ease,margin-top 0.3s ease;}.dropdown-item:hover .dropdown-item-subtitle,.dropdown-item.active .dropdown-item-subtitle{max-height:36px;opacity:1;margin-top:2px;}.dropdown-preview{position:relative;width:220px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--bg-glass-dark);margin-right: 0px;}.dropdown-preview-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;opacity:0;pointer-events:none;transform:scale(1.04);transition:opacity 0.35s ease,transform 0.35s ease;background-image:radial-gradient(rgba(255,255,255,0.16) 1px,transparent 1.4px),linear-gradient(145deg,var(--panel-color,var(--primary)) 0%,var(--panel-color-2,var(--primary-dark)) 100%);background-size:16px 16px,100% 100%;overflow:hidden;}.dropdown-preview-panel.active{opacity:1;pointer-events:auto;transform:scale(1);}.dropdown-preview-panel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:75%;background:linear-gradient(180deg,transparent 0%,rgba(4,10,20,0.65) 100%);pointer-events:none;}.dropdown-preview-icon{position:absolute;top:-22px;right:-22px;width:130px;height:130px;color:rgba(255,255,255,0.16);}.dropdown-preview-icon svg{width:100%;height:100%;}.dropdown-preview-body{position:relative;z-index:1;}.dropdown-preview-tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,0.22);backdrop-filter:blur(4px);margin-bottom:6px;}.dropdown-preview-body strong{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:3px;}.dropdown-preview-body span:last-child{display:block;font-size:11.5px;color:rgba(255,255,255,0.8);line-height:1.4;}@media (max-width:1180px){.dropdown-preview{display:none;}}

/* ================================================================
   HERO VISUAL UPGRADE - fusionné depuis index.html <style> inline
   Ces règles surchargent en cascade les règles .hero/.btn-primary/
   .trust-logos-track/.menu-toggle définies plus haut.
   ================================================================ */

    /* ===== HERO VISUAL UPGRADE ===== */
    .hero{padding:120px 0 90px;}
    @media (min-width:768px){.hero{padding:140px 0 130px;}}
    .hero-bg{background:
        radial-gradient(ellipse 180% 90% at 50% -10%,rgba(59,130,246,0.52),transparent 60%),
        radial-gradient(ellipse 60% 150% at 15% 110%,rgba(16,185,129,0.22),transparent 50%),
        radial-gradient(ellipse 60% 50% at 85% 110%,rgba(201,162,39,0.30),transparent 50%),
        var(--bg-dark);}
    .hero-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 75%);}
    .hero-bg::after{content:"";position:absolute;top:-140px;left:50%;width:620px;height:620px;background:radial-gradient(circle,rgba(59,130,246,0.28),transparent 65%);filter:blur(50px);transform:translateX(-50%);animation:heroGlow 9s ease-in-out infinite;}
    @keyframes heroGlow{0%,100%{opacity:.55;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.18);}}

    .hero-badge{background:linear-gradient(135deg,rgba(16,185,129,0.14),rgba(59,130,246,0.14));border:1px solid rgba(16,185,129,0.30);box-shadow:0 8px 24px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#eafff6;}

    .hero h1 .highlight{background:linear-gradient(120deg,var(--primary) 0%,var(--secondary) 45%,var(--primary-light) 90%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:heroShine 6s linear infinite;}
    @keyframes heroShine{to{background-position:220% center;}}

    /* preuve sociale : pilule de verre */
    .testimonials-container{background:var(--bg-glass-dark);border:1px solid var(--border-dark);border-radius:18px;padding:12px 22px;width:-moz-fit-content;width:fit-content;margin:0 auto 30px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,0.22);}
    @media (max-width:600px){.testimonials-container{padding:14px 18px;}}
    .hero-rating{display:flex;align-items:center;gap:8px;margin-bottom:2px;flex-wrap:wrap;justify-content:center;}
    .hero-rating .stars{color:var(--accent-gold-light);letter-spacing:2px;font-size:16px;line-height:1;}
    .hero-rating .rating-text{font-size:16px;color:var(--text-light-secondary);}
    .hero-rating .rating-text strong{color:var(--text-light);font-weight:700;}

    /* metrics : cartes glassmorphism */
    .hero-metrics{gap:16px;}
    .hero .metric{padding:18px 26px;min-width:118px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition);}
    .hero .metric:hover{transform:translateY(-4px);}
    .hero .metric-value{background:linear-gradient(135deg,#ffffff,#9fd8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
    .hero .metric-divider{display:none;}

    /* CTA : effet de brillance */
    .hero .btn-primary{position:relative;overflow:hidden;}
    .hero .btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.38),transparent);transform:skewX(-20deg);animation:ctaSweep 4s ease-in-out infinite;}
    @keyframes ctaSweep{0%,55%{left:-130%;}100%{left:140%;}}

    /* mockups produits : laptop (gauche) + téléphone (droite), desktop large uniquement */
    /* mouvement lié au scroll géré en JS (var --sx) : les écrans sortent par les bords */
    .hero-devices{display:none;}
    @media (min-width:1280px){
        .hero-centered{position:relative;z-index:2;margin-top: -50px;}
        .hero-devices{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;}
        .hero-laptop{position:absolute;top:52%;left:-140px;width:360px;will-change:transform,opacity;transform:translate(calc(var(--sx,0px) * -1),-50%) perspective(1600px) rotateY(13deg);animation:heroLaptopIn 1.3s cubic-bezier(0.22,1,0.36,1) 0.2s backwards;}
        .hero-laptop-screen{position:relative;border:6px solid #1b2a44;border-top-right-radius:12px;background:#0a1628;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.05);}
        .hero-laptop-screen img{display:block;width:100%;height:auto;}
        /* reflet de lumière : traînée diagonale + halo doux coin haut-gauche */
        .hero-laptop-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.05) 42%,rgba(255,255,255,0.16) 48%,rgba(255,255,255,0.04) 55%,rgba(255,255,255,0) 66%),radial-gradient(130% 90% at 12% 6%,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 42%);}
        .hero-laptop-base{width:124%;height:13px;margin:-1px 0 0 -12%;background:linear-gradient(#2b3a55,#141f33);border-radius:0 0 12px 12px;box-shadow:0 22px 34px rgba(0,0,0,0.45);}
        .hero-laptop-base::after{content:"";display:block;width:92px;height:6px;margin:0 auto;background:#0b1424;border-radius:0 0 8px 8px;}
        .hero-phone{position:absolute;top:67%;right:0;width:210px;will-change:transform,opacity;transform:translate(var(--sx,0px),-50%) perspective(1600px) rotateY(-13deg);animation:heroPhoneIn 1.3s cubic-bezier(0.22,1,0.36,1) 0.35s backwards;}
        .hero-phone-screen{position:relative;border:6px solid #1b2a44;border-radius:38px;background:#0a1628;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.05);}
        .hero-phone-screen > img{display:block;width:100%;height:auto;}
        .hero-phone-screen::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:transparent;border-radius:0 0 14px 14px;z-index:2;}
        /* reflet de lumière : traînée diagonale + halo doux coin haut-gauche */
        .hero-phone-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:32px;background:linear-gradient(125deg,rgba(255,255,255,0) 33%,rgba(255,255,255,0.05) 43%,rgba(255,255,255,0.18) 49%,rgba(255,255,255,0.04) 56%,rgba(255,255,255,0) 66%),radial-gradient(120% 80% at 14% 7%,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 45%);}
        /* boutons latéraux iPhone : silencieux + volume (gauche), verrouillage (droite) */
        .hp-key{position:absolute;z-index:1;border-radius:3px;background:linear-gradient(90deg,#141f33 0%,#3a4a66 50%,#141f33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 1px 2px rgba(0,0,0,0.5);}
        .hp-mute{left:-3px;width:4px;top:16%;height:22px;}
        .hp-volup{left:-3px;width:4px;top:24%;height:40px;}
        .hp-voldn{left:-3px;width:4px;top:34%;height:40px;}
        .hp-power{right:-3px;width:4px;top:26%;height:66px;}

        /* notifications iOS simulées sur le mockup téléphone : apparaissent une à une en boucle */
        /* tailles resserrées ici (téléphone 210px sur ce palier) puis agrandies dans les media queries suivantes */
        .hp-notif{position:absolute;top:14px;left:50%;width:86%;padding:7px 9px;display:flex;gap:7px;align-items:flex-start;background:rgba(255, 255, 255, 0.633);border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,0.26),0 0 0 1px rgba(255,255,255,0.5) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:4;opacity:0;transform:translate(-50%,-140%);animation:hpNotifCycle 15s ease-in-out infinite;}
        .hp-notif-icon{flex-shrink:0;width:19px;height:19px;border-radius:5px;object-fit:cover;}
        .hp-notif-body{min-width:0;}
        .hp-notif-title{display:flex;align-items:baseline;gap:5px;font-size:9px;font-weight:700;color:#0a1628;}
        .hp-notif-title span.hp-notif-time{margin-left:auto;font-weight:500;color:#717886;}
        .hp-notif-text{margin-top:1px;font-size:8.5px;line-height:1.3;color:#3a4456;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
        .hp-notif-1{animation-delay:0s;}
        .hp-notif-2{animation-delay:5s;}
        .hp-notif-3{animation-delay:10s;}
        @keyframes hpNotifCycle{
            0%{opacity:0;transform:translate(-50%,-140%);}
            3%{opacity:1;transform:translate(-50%,0);}
            14%{opacity:1;transform:translate(-50%,0);}
            19%,100%{opacity:0;transform:translate(-50%,-140%);}
        }
        @media (prefers-reduced-motion:reduce){.hp-notif{animation:none;opacity:0;}}
    }
    @media (min-width:1440px){
        .hero-laptop{left:-270px;width:510px;}
        .hero-phone{right:10px;width:280px;}
        .hero-phone-screen{border-radius:46px;}
        .hero-phone-screen::before{top:10px;width:92px;height:22px;border-radius:0 0 16px 16px;}
        .hero-phone-screen::after{border-radius:40px;}
        /* téléphone plus grand (280px) : notifications remises à leur taille de référence */
        .hp-notif{top:22px;width:88%;padding:10px 12px;gap:10px;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,0.28),0 0 0 1px rgba(255,255,255,0.5) inset;}
        .hp-notif-icon{width:26px;height:26px;border-radius:7px;}
        .hp-notif-title{gap:6px;font-size:11.5px;}
        .hp-notif-text{margin-top:2px;font-size:11px;line-height:1.35;}
    }
    @media (min-width:1680px){.hero-laptop{left:-210px;width:565px;}.hero-phone{right:10px;width:300px;}}

    /* Intro hero : devices légèrement écartés + opacité réduite, puis convergence vers l'état de repos */
    @keyframes heroLaptopIn{
        0%{opacity:0.25;transform:translate(-90px,-50%) perspective(1600px) rotateY(20deg);}
        100%{opacity:1;transform:translate(0,-50%) perspective(1600px) rotateY(13deg);}
    }
    @keyframes heroPhoneIn{
        0%{opacity:0.25;transform:translate(90px,-50%) perspective(1600px) rotateY(-20deg);}
        100%{opacity:1;transform:translate(0,-50%) perspective(1600px) rotateY(-13deg);}
    }

    @media (prefers-reduced-motion:reduce){.hero-bg::after,.hero h1 .highlight,.hero .btn-primary::after,.hero-laptop,.hero-phone{animation:none;}}

    /* ===== TRUST LOGOS SIZING ===== */
    .trust-logos-track img{height:48px;width:auto;object-fit:contain;opacity:0.85;filter:grayscale(30%) brightness(1.05);transition:opacity .3s ease,filter .3s ease,transform .3s ease;}
    .trust-logos-track img:hover{opacity:1;filter:grayscale(0) brightness(1.1);transform:scale(1.08);}
    @media (min-width:1024px){.trust-logos-track{gap:64px;}.trust-logos-track img{height:56px;}}
    @media (max-width:640px){.trust-logos-track img{height:36px;}}

    /* ===== TAP TARGET : bouton burger >=44px (accessibilité mobile) ===== */
    .menu-toggle{padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center;}

    /* ===== HERO EN FOND CLAIR + TYPOGRAPHIE RÉDUITE ===== */
    /* bandeau du haut : foncé plein pour rester lisible au-dessus d'un hero clair */
    .top-bar{background:var(--bg-dark);}

    .hero{background:var(--bg-light);}
    /* scopé à .hero > .hero-bg : la section Réassurance porte aussi .hero-bg, ne pas la toucher */
    .hero > .hero-bg{background:
        radial-gradient(ellipse 180% 90% at 50% -10%,rgba(59,130,246,0.12),transparent 60%),
        radial-gradient(ellipse 60% 150% at 15% 110%,rgba(16,185,129,0.08),transparent 50%),
        radial-gradient(ellipse 60% 50% at 85% 110%,rgba(201,162,39,0.10),transparent 50%),
        linear-gradient(180deg,#ffffff 0%,var(--bg-light) 55%,var(--bg-light-secondary) 100%);}
    /* grille : lignes sombres très subtiles (les blanches disparaîtraient sur fond clair) */
    .hero > .hero-bg::before{background-image:linear-gradient(rgba(10,22,40,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,22,40,0.05) 1px,transparent 1px);}
    .hero > .hero-bg::after{background:radial-gradient(circle,rgba(59,130,246,0.14),transparent 65%);}

    /* titres et texte en foncé + tailles réduites (live était 40/56/72) */
    .hero h1{color:var(--text-dark);font-size:28px;}
    @media (min-width:640px){.hero h1{font-size:38px;}}
    @media (min-width:1024px){.hero h1{font-size:48px;}}
    .hero-desc{color:var(--text-dark-secondary);font-size:16px;}
    @media (min-width:640px){.hero-desc{font-size:16px;}}

    /* badge : verre clair, texte vert foncé */
    .hero-badge{background:linear-gradient(135deg,rgba(16,185,129,0.10),rgba(59,130,246,0.10));border:1px solid rgba(16,185,129,0.28);color:#0d6b4f;box-shadow:0 6px 18px rgba(16,110,80,0.10),inset 0 1px 0 rgba(255,255,255,0.6);}
    /* badge secondaire : conformite reforme facturation electronique */
    .hero-badge-einvoice{font-size:12.5px;padding:8px 18px;background:linear-gradient(135deg,rgba(0,85,164,0.08),rgba(239,65,53,0.08));border:1px solid rgba(0,85,164,0.22);color:#1f2a47;}
    /* mention "sans abonnement" deplacee sous le bouton CTA */
    .hero-buttons{flex-wrap:wrap;}
    .hero-buttons-note{flex-basis:100%;width:100%;margin-top:-4px;font-size:13px;color:var(--text-dark-muted);text-align:center;}
    .hero .footer-platforms{color:#5b7a99 !important;}

    /* pilule preuve sociale : verre clair */
    .testimonials-container{background:rgba(255,255,255,0.72);border:1px solid var(--border-light);box-shadow:0 10px 30px rgba(10,22,40,0.08);}
    .testimonials-text{color:var(--text-dark-secondary);}
    .hero-rating .rating-text{color:var(--text-dark-secondary);}
    .hero-rating .rating-text strong{color:var(--text-dark);}
    .hero-rating .stars{color:var(--accent-gold);}
    .testimonials-face{border-color:#fff;}

    /* metrics : valeurs en dégradé bleu foncé, labels foncés, taille réduite */
    .hero .metric-value{font-size:24px;background:linear-gradient(135deg,var(--primary-dark),var(--primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
    @media (min-width:640px){.hero .metric-value{font-size:28px;}}
    .hero .metric-label{color:var(--text-dark-muted);}
    .hero .metric-divider{background:var(--border-light);}

    /* parcours simplifié (remplace les anciennes metrics) : mini-formulaires carrés + skeletons */
    .hero-steps{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;}
    .hero-step{display:flex;}
    .hero-step-card{width:140px;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;padding:14px;background:rgba(255,255,255,0.78);border:1px solid var(--border-light);border-radius:14px;box-shadow:0 8px 20px rgba(10,22,40,0.07);transition:var(--transition);}
    .hero-step:hover .hero-step-card{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,22,40,0.1);}
    .hero-step-card-label{font-size:12px;font-weight:700;color:var(--text-dark);line-height:1.3;text-align:left;}
    .hero-step-card-time{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;width:-moz-fit-content;width:fit-content;max-width:100%;box-sizing:border-box;white-space:nowrap;}
    .hero-step-card-time svg{width:10px;height:10px;flex-shrink:0;}
    .hero-step-card-blue .hero-step-card-time{color:var(--primary-dark);background:rgba(22,138,255,0.10);}
    .hero-step-card-mixed .hero-step-card-time{background:linear-gradient(135deg,rgba(22,138,255,0.12) 0%,rgba(16,185,129,0.12) 100%);}
    .hero-step-card-mixed .hero-step-card-time svg{color:var(--secondary-dark);}
    .hero-step-card-mixed .hero-step-card-time-value{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
    .hero-step-card-green .hero-step-card-time{color:var(--secondary-dark);background:rgba(16,185,129,0.10);}
    .hero-step-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;color:#fff;flex-shrink:0;margin-top:auto;align-self:flex-end;}
    .hero-step-icon svg{width:14px;height:14px;}
    .hero-step-icon-blue{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);}
    .hero-step-icon-mixed{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);}
    .hero-step-icon-green{background:linear-gradient(135deg,var(--secondary) 0%,var(--secondary) 100%);}
    .hero-step-card-blue{border-color:rgba(22,138,255,0.35);}
    .hero-step-card-mixed{border-color:rgba(16,185,129,0.30);}
    .hero-step-card-green{border-color:rgba(16,185,129,0.35);}
    .sk-line{display:block;height:7px;width:100%;border-radius:4px;background:linear-gradient(90deg,rgba(10,22,40,0.07) 25%,rgba(10,22,40,0.15) 37%,rgba(10,22,40,0.07) 63%);background-size:400% 100%;animation:skShimmer 1.8s ease-in-out infinite;}
    .sk-line.w-70{width:70%;}
    .sk-line.w-50{width:50%;}
    @keyframes skShimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
    .hero-step-arrow{display:flex;align-self:center;color:var(--text-dark-muted);opacity:0.4;flex-shrink:0;}
    /* étapes 2 et 3 : cartes grisées puis "débloquées" en couleur après un délai (parcours qui s'anime) */
    .hero-step-pending{filter:grayscale(1) opacity(0.55);transform:scale(0.94);animation:heroStepActivate 0.6s ease forwards;}
    .hero-step-pending.delay-2{animation-delay:2s;}
    .hero-step-pending.delay-4{animation-delay:4s;}
    @keyframes heroStepActivate{to{filter:grayscale(0) opacity(1);transform:scale(1);}}
    @media (prefers-reduced-motion:reduce){.hero-step-pending{animation:none;filter:none;transform:none;}.sk-line{animation:none;}}
    @media (max-width:640px){.hero-steps{flex-direction:column;gap:16px;}.hero-step-arrow{transform:rotate(90deg);}}

    /* bouton "Voir la démo" : texte foncé sur fond clair */
    .hero .btn-secondary{color:var(--text-dark-secondary);}
    .hero .btn-secondary:hover{color:var(--text-dark);background:var(--bg-glass-light-hover);}

    /* bandeau assurances : séparateur + texte foncés, logos adaptés au clair */
    .hero-trust{border-top:1px solid var(--border-light);}
    .hero-trust p{color:var(--text-dark-muted);}
    .trust-logos-track img{filter:grayscale(35%) brightness(0.95);opacity:0.82;}

    /* ===== STATS SECTION EN FOND CLAIR (alignée sur le hero) ===== */
    .stats-section{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-light) 0%,var(--bg-light-secondary) 100%);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);box-shadow:inset 0 30px 40px -30px rgba(22,138,255,0.35),inset 0 -30px 40px -30px rgba(22,138,255,0.35);}
    .stats-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(10,22,40,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,22,40,0.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,#000 35%,transparent 80%);}
    .stats-section .container{position:relative;z-index:1;}
    .stat-card{background:var(--bg-card-light);border:1px solid var(--border-light);box-shadow:0 10px 30px rgba(10,22,40,0.08);}
    .stat-card:hover{background:#ffffff;border-color:var(--border-light-hover);box-shadow:0 16px 36px rgba(10,22,40,0.12);}
    .stat-icon{color:var(--secondary-dark);}
    .stat-number{color:var(--text-dark);}
    .stat-label{color:var(--text-dark-muted);}

    /* Typo globale (Outfit plafonné à 600 + échelle réduite) : centralisée dans styles-v2.css / styles-v2.min.css */

    /* ========== AVANT / APRÈS — cartes en vis-à-vis + flèche ========== */
    .gc-ba-compare{display:grid;grid-template-columns:1fr;gap:40px;align-items:stretch;margin-top:8px;}
    @media (min-width:900px){.gc-ba-compare{grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;}}
    .gc-ba-card{position:relative;padding:32px 26px;border-radius:var(--radius-xl);background:var(--bg-glass-dark);border:1px solid var(--border-dark);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;transition:var(--transition);height:100%;}
    @media (min-width:768px){.gc-ba-card{padding:40px 36px;}}
    .gc-ba-card:hover{transform:translateY(-4px);}
    /* Avant : atténué, teinte rouge */
    .gc-ba-before{background:linear-gradient(180deg,rgba(239,68,68,0.06) 0%,rgba(255,255,255,0.02) 100%);border-color:rgba(239,68,68,0.18);}
    .gc-ba-before::before{content:"";position:absolute;top:-40%;right:-20%;width:260px;height:260px;background:radial-gradient(circle,rgba(239,68,68,0.16),transparent 70%);filter:blur(30px);pointer-events:none;z-index:0;}
    /* Après : lumineux, teinte verte + glow */
    .gc-ba-after{background:linear-gradient(180deg,rgba(16,185,129,0.10) 0%,rgba(255,255,255,0.03) 100%);border-color:rgba(16,185,129,0.32);box-shadow:0 20px 60px rgba(16,185,129,0.14);}
    .gc-ba-after::before{content:"";position:absolute;top:-40%;left:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(16,185,129,0.20),transparent 70%);filter:blur(34px);pointer-events:none;z-index:0;}
    .gc-ba-card > *{position:relative;z-index:1;}
    /* Badge Avant / Après */
    .gc-ba-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 11px;font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;border-radius:50px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
    .gc-ba-badge svg{width:16px;height:16px;flex-shrink:0;}
    .gc-ba-before .gc-ba-badge{background:rgba(98, 39, 39, 0.55);color:#f7a1a1;border:1px solid rgba(239,68,68,0.4);}
    .gc-ba-after .gc-ba-badge{background:rgba(23, 73, 56, 0.5);color:#6ee7b7;border:1px solid rgba(16,185,129,0.45);}
    /* Média (image) en bannière haut de carte */
    .gc-ba-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:-22px -16px 20px;aspect-ratio:3/2;border:1px solid rgba(255,255,255,0.06);}
    @media (min-width:768px){.gc-ba-media{margin:-28px -24px 20px;}}
    .gc-ba-media img{width:100%;height:100%;object-fit:cover;}
    .gc-ba-media::after{content:"";position:absolute;inset:0;pointer-events:none;}
    .gc-ba-before .gc-ba-media img{filter:grayscale(35%) brightness(0.9) contrast(0.95);}
    .gc-ba-before .gc-ba-media::after{background:linear-gradient(180deg,rgba(9,32,58,0) 45%,rgba(239,68,68,0.16) 100%);}
    .gc-ba-after .gc-ba-media::after{background:linear-gradient(180deg,rgba(9,32,58,0) 45%,rgba(16,185,129,0.18) 100%);}
    .gc-ba-media .gc-ba-badge{position:absolute;top:14px;left:14px;z-index:1;}
    /* Titre de carte */
    .gc-ba-card h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-light);line-height:1.3;margin-bottom:24px;letter-spacing:-0.01em;}
    @media (min-width:768px){.gc-ba-card h3{font-size:22px;}}
    /* Liste */
    .gc-ba-list{display:flex;flex-direction:column;gap:14px;}
    .gc-ba-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--text-light-secondary);}
    .gc-ba-after .gc-ba-list li{color:var(--text-light);}
    .gc-ba-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;margin-top:1px;}
    .gc-ba-ico svg{width:13px;height:13px;}
    .gc-ba-before .gc-ba-ico{background:rgba(239,68,68,0.14);color:var(--danger);}
    .gc-ba-after .gc-ba-ico{background:rgba(16,185,129,0.16);color:var(--secondary);}
    /* Flèche de transformation */
    .gc-ba-arrow{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,var(--danger) 0%,var(--secondary-dark) 100%);color:#fff;box-shadow:0 10px 30px rgba(16,185,129,0.35);z-index:2;}
    .gc-ba-arrow svg{width:26px;height:26px;transform:rotate(90deg);}
    @media (min-width:900px){.gc-ba-arrow svg{transform:rotate(0deg);}}
    @media (prefers-reduced-motion:reduce){.gc-ba-card,.gc-ba-card:hover{transition:none;transform:none;}}
    

/* ================================================================
   AVIS GOOGLE (.gr-reviews) - section page d'accueil
   ================================================================ */

    .gr-reviews{position:relative;background:var(--bg-light-secondary);overflow:hidden;}
    .gr-reviews .container{position:relative;z-index:1;}
    .gr-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:linear-gradient(to top,#000 0%,#000 80%,transparent 96%);-webkit-mask-image:linear-gradient(to top,#000 0%,#000 80%,transparent 96%);}
    .gr-bubbles svg{position:absolute;bottom:0;animation:gr-float ease-in-out infinite;}
    @keyframes gr-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-22px) rotate(var(--r,3deg));}}
    @media (prefers-reduced-motion:reduce){.gr-bubbles svg{animation:none;}}
    .gr-reviews .gr-rating-summary{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
    .gr-reviews .gr-rating-summary .gr-stars{color:#fabb05;font-size:20px;letter-spacing:2px;line-height:1;}
    .gr-reviews .gr-rating-summary strong{color:#202124;font-size:18px;font-weight:700;}
    .gr-reviews .gr-rating-meta{color:#5f6368;font-size:14px;}
    .gr-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:44px;}
    @media (min-width:600px){.gr-grid{grid-template-columns:repeat(2,1fr);}}
    @media (min-width:1024px){.gr-grid{grid-template-columns:repeat(4,1fr);}}
    .gr-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 8px 28px rgba(0,0,0,0.22);display:flex;flex-direction:column;gap:12px;transition:var(--transition);}
    .gr-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,0.30);}
    .gr-card-top{display:flex;align-items:center;gap:12px;}
    .gr-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;font-family:var(--font-display);flex-shrink:0;}
    .gr-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
    .gr-meta strong{color:#202124;font-size:15px;font-weight:600;}
    .gr-meta span{color:#5f6368;font-size:12.5px;}
    .gr-glogo-sm{margin-left:auto;flex-shrink:0;display:flex;}
    .gr-card .gr-stars{color:#fabb05;font-size:17px;letter-spacing:1px;line-height:1;}
    .gr-text{color:#3c4043;font-size:14.5px;line-height:1.65;margin:0;}
    .gr-cta{text-align:center;margin-top:40px;}
    .gr-cta .btn-secondary{display:inline-flex;color:var(--text-light);}
    

/* ================================================================
   CONFORMITÉ FACTURATION ÉLECTRONIQUE (.einvoice-*) - page feature-facturation
   ================================================================ */

    .einvoice-section{padding:60px 0;}
    .einvoice-card{position:relative;max-width:920px;margin:0 auto;padding:48px 32px;border-radius:var(--radius-xl);background:var(--bg-glass-dark);border:1px solid var(--border-dark);text-align:center;overflow:hidden;}
    .einvoice-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#0055A4 0%,#0055A4 33%,#ffffff 33%,#ffffff 66%,#EF4135 66%,#EF4135 100%);}
    .einvoice-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:50px;background:linear-gradient(135deg,rgba(0,85,164,0.16),rgba(239,65,53,0.16));border:1px solid rgba(0,85,164,0.35);color:#eaf2ff;font-size:13px;font-weight:600;margin-bottom:20px;}
    .einvoice-badge svg{flex-shrink:0;}
    .einvoice-title{font-family:var(--font-display);font-size:28px;color:var(--text-light);margin-bottom:14px;letter-spacing:-0.02em;}
    @media (min-width:640px){.einvoice-title{font-size:34px;}}
    .einvoice-desc{font-size:16px;color:var(--text-light-secondary);max-width:600px;margin:0 auto 36px;line-height:1.7;}
    .einvoice-milestones{display:grid;grid-template-columns:1fr;gap:20px;text-align:left;}
    @media (min-width:640px){.einvoice-milestones{grid-template-columns:repeat(2,1fr);}}
    .einvoice-milestone{padding:22px;border-radius:var(--radius-lg);background:var(--bg-glass-dark-hover);border:1px solid var(--border-dark);border-top:3px solid rgba(0,85,164,0.5);}
    .einvoice-milestone.einvoice-milestone-2027{border-top-color:rgba(239,65,53,0.5);}
    .einvoice-date{display:inline-block;font-family:var(--font-display);font-size:15px;font-weight:700;color:#6ea8dc;margin-bottom:10px;}
    .einvoice-milestone-2027 .einvoice-date{color:#ef8f88;}
    .einvoice-milestone p{font-size:14.5px;color:var(--text-light-secondary);line-height:1.6;margin:0;}
    .einvoice-note{margin-top:24px;font-size:13px;color:var(--text-light-muted);}

    /* Badge conformite reforme dans le hero (fond clair) */
    .feature-hero-badge-einvoice{background:linear-gradient(135deg,rgba(0,85,164,0.08),rgba(239,65,53,0.08));border:1px solid rgba(0,85,164,0.25);color:#1f2a47;}
    

/* ================================================================
   STYLES BLOG / ARTICLE - fusionné depuis styles-blog.css
   ================================================================ */
/* =========================================
   Glass Connect - Blog Styles
   ========================================= */

/* Blog Hero */
.blog-hero {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
    text-align: center;
}

.blog-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.1;
}

@media (min-width: 640px) {
    .blog-hero h1 {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .blog-hero h1 {
        font-size: 48px;
    }
}

.blog-hero .highlight {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero-desc {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.6;
}

/* Blog Filters */
.blog-filters {
    padding: 30px 0;
    background: var(--bg-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 70px;
    z-index: 90;
}

.blog-filters .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filters-wrapper {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.search-wrapper {
    position: relative;
    min-width: 280px;
}

.blog-search {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.blog-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 138, 255, 0.1);
}

.search-wrapper svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light-muted);
}

/* Blog Grid Section */
.blog-grid-section {
    padding: 60px 0;
    background: var(--bg-light);
    min-height: 60vh;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Blog Card */
.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-category {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-content {
    padding: 24px;
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-excerpt {
    font-size: 14px;
    color: var(--text-dark-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-light-muted);
}

.blog-card-read-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Loading & Empty States */
.blog-loading,
.blog-empty,
.blog-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-dark-secondary);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(22, 138, 255, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

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

.blog-empty svg,
.blog-error svg {
    color: var(--text-light-muted);
    margin-bottom: 20px;
}

.blog-empty h3,
.blog-error h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    gap: 5px;
}

.page-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-number:hover,
.page-number.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.page-dots {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light-muted);
}

/* Newsletter */
.blog-newsletter {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%);
}

.newsletter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.newsletter-text h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 10px;
}

.newsletter-text p {
    color: var(--text-light-secondary);
    font-size: 16px;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    flex: 1;
    max-width: 500px;
}

.newsletter-form input {
    flex: 1;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 15px;
}

.newsletter-form input::placeholder {
    color: var(--text-light-muted);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
}

/* =========================================
   Article Page Styles
   ========================================= */

/* Breadcrumb */
.article-breadcrumb {
    padding: 100px 0 20px;
    background: var(--bg-dark);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light-muted);
}

.breadcrumb-list li:not(:last-child)::after {
    content: '/';
    color: var(--text-light-muted);
}

.breadcrumb-list a {
    color: var(--text-light-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-list a:hover {
    color: var(--primary);
}

/* Article Hero */
.article-hero {
    padding: 40px 0 60px;
    background: var(--bg-dark);
}

.article-hero-content {
    max-width: 800px;
}

.article-meta-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.article-category {
    padding: 6px 14px;
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.article-read-time {
    color: var(--text-light-muted);
    font-size: 14px;
}

.article-hero h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
    margin-bottom: 20px;
}

@media (min-width: 640px) {
    .article-hero h1 {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .article-hero h1 {
        font-size: 48px;
    }
}

.article-excerpt {
    font-size: 16px;
    color: var(--text-light-secondary);
    line-height: 1.6;
    margin-bottom: 30px;
}

.article-author-date {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article-author .author-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.author-name {
    color: var(--text-light);
    font-weight: 600;
    font-size: 15px;
}

.author-role {
    color: var(--text-light-muted);
    font-size: 13px;
}

.article-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-light-secondary);
    font-size: 14px;
}

/* Featured Image */
.article-featured-image {
    background: var(--bg-dark);
    padding-bottom: 40px;
}

.article-featured-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
}

/* Article Body */
.article-body {
    padding: 60px 0;
    background: var(--bg-light);
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    align-items: start;
}

/* Article Content */
.article-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 40px 0 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.article-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 30px 0 15px;
}

.article-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark-secondary);
    margin-bottom: 20px;
}

.article-content a {
    color: var(--primary);
    text-decoration: underline;
}

.article-content strong {
    color: var(--text-dark);
    font-weight: 600;
}

.article-content ul,
.article-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.article-content li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark-secondary);
    margin-bottom: 10px;
}

.article-content blockquote {
    margin: 30px 0;
    padding: 25px 30px;
    background: linear-gradient(135deg, rgba(22, 138, 255, 0.05) 0%, rgba(22, 138, 255, 0.02) 100%);
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-dark);
}

.article-content pre {
    margin: 25px 0;
    padding: 20px;
    background: var(--bg-dark);
    border-radius: 12px;
    overflow-x: auto;
}

.article-content code {
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 14px;
    color: var(--text-light);
}

.article-content p code {
    background: rgba(22, 138, 255, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
}

.article-content table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}

.article-content th,
.article-content td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-content th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--text-dark);
}

.article-content hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-widget {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.sidebar-widget h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
}

/* TOC */
.toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-nav li {
    margin-bottom: 10px;
}

.toc-nav li.toc-sub {
    padding-left: 15px;
}

.toc-nav a {
    color: var(--text-dark-secondary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.2s;
    display: block;
}

.toc-nav a:hover {
    color: var(--primary);
}

/* Share */
.share-buttons {
    display: flex;
    gap: 10px;
}

.share-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: white;
    transition: transform 0.2s, opacity 0.2s;
}

.share-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.share-btn.linkedin { background: #0077B5; }
.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #000000; }
.share-btn.copy { 
    background: var(--bg-light); 
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* CTA Widget */
.cta-widget {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.cta-widget h3 {
    color: white;
}

.cta-widget p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.btn-cta-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    color: var(--primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn-cta-small:hover {
    transform: scale(1.02);
}

/* Tags */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 6px 14px;
    background: var(--bg-light);
    color: var(--text-dark-secondary);
    font-size: 13px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.tag:hover {
    background: var(--primary);
    color: white;
}

/* Author Bio */
.article-footer {
    padding: 0;
    background: var(--bg-light);
}

.author-bio {
    display: flex;
    gap: 25px;
    padding: 40px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.author-bio-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
}

.author-bio-content h3 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.author-bio-content p {
    font-size: 15px;
    color: var(--text-dark-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.author-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.author-link:hover {
    text-decoration: underline;
}

/* Article Navigation */
.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.article-nav-link {
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.3s ease;
}

.article-nav-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.article-nav-link.next {
    text-align: right;
    align-items: flex-end;
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light-muted);
    margin-bottom: 8px;
}

.nav-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
}

/* Related Articles */
.related-articles {
    padding: 60px 0;
    background: var(--bg-light);
}

.related-articles h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.related-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.related-card a {
    text-decoration: none;
    color: inherit;
}

.related-card-image {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.related-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-category {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 15px;
    text-transform: uppercase;
}

.related-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 20px 20px 10px;
    line-height: 1.4;
}

.related-card p {
    font-size: 14px;
    color: var(--text-dark-secondary);
    padding: 0 20px 20px;
    line-height: 1.5;
}

/* Article Loading/Error */
.article-loading,
.article-error {
    text-align: center;
    padding: 60px 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-sidebar {
        position: relative;
        top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 120px 0 40px;
    }
    
    .blog-filters .container {
        flex-direction: column;
    }
    
    .filters-wrapper {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        flex-wrap: nowrap;
    }
    
    .search-wrapper {
        width: 100%;
        min-width: auto;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
        max-width: 100%;
    }
    
    .article-sidebar {
        grid-template-columns: 1fr;
    }
    
    .article-content {
        padding: 25px;
    }
    
    .author-bio {
        flex-direction: column;
        text-align: center;
    }
    
    .article-navigation {
        grid-template-columns: 1fr;
    }
    
    .article-nav-link.next {
        text-align: left;
        align-items: flex-start;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .pagination-numbers {
        display: none;
    }
}