@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

html {
  scroll-behavior: smooth;
}

/* Inline style migrations */
body.page-accounts .slide-media--salary {
  background-image: url('public/assetssite/img/compte/fonctionneaire_salarie.jpg');
}

body.page-accounts .slide-media--personal {
  background-image: url('public/assetssite/img/compte/particulier_entreprise.jpg');
}

body.page-accounts .slide-media--retirement {
  background-image: url('public/assetssite/img/compte/retaite.jpg');
}

body.page-accounts .slide-media--business {
  background-image: url('public/assetssite/img/compte/entreprise_assosiation.jpg');
}

body.page-financing .result-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

body.page-contact .social-heading {
  margin-bottom: 0.6rem;
}

body.page-membership .upload-card-note {
  text-align: left;
  margin: 0;
  max-width: none;
  font-size: 1rem;
}

body.page-membership .form-card-note {
  text-align: left;
  margin: 0 0 1.1rem;
  max-width: none;
  font-size: 1rem;
}

/* index.html */
/* ==================== CSS VARIABLES ==================== */
        body.page-index {
            /* Primary Colors */
            --primary-yellow: #FFC20E;
            --primary-red: #E31E24;
            --primary-cream: #F5F1E8;
            
            /* Secondary Colors */
            --secondary-orange: #FF9500;
            --secondary-gold: #FFD700;
            --secondary-burgundy: #B71C1C;
            --accent-violet: #6A1B9A;
            
            /* Neutral Colors */
            --neutral-white: #FFFFFF;
            --neutral-light: #F8F8F8;
            --neutral-gray: #6B6B6B;
            --neutral-dark: #2C2C2C;
            --neutral-black: #1A1A1A;
            
            /* Functional Colors */
            --success-green: #4CAF50;
            --info-blue: #2196F3;
            --warning-orange: #FF9800;
            --error-red: #F44336;
            
            /* Typography */
            --font-heading: 'Montserrat', 'Roboto', sans-serif;
            --font-body: 'Open Sans', 'Lato', sans-serif;
            --h1-size: clamp(2rem, 5vw, 3.5rem);
            --h2-size: clamp(1.75rem, 4vw, 2.5rem);
            --h3-size: clamp(1.5rem, 3vw, 2rem);
            --body-size: clamp(1rem, 2vw, 1.125rem);
            --line-height: 1.6;
            
            /* Spacing */
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            
            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
            --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
            --shadow-primary: 0 10px 30px rgba(255,194,14,0.3);
            --shadow-red: 0 10px 30px rgba(227,30,36,0.3);
            
            /* Border Radius */
            --radius-sm: 0.25rem;
            --radius-md: 0.5rem;
            --radius-lg: 1rem;
            --radius-xl: 1.5rem;
            --radius-full: 9999px;
            
            /* Transitions */
            --transition-fast: 150ms ease-in-out;
            --transition-base: 300ms ease-in-out;
            --transition-slow: 500ms ease-in-out;
        }
        
        /* ==================== GLOBAL STYLES ==================== */
        body.page-index * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }
        
        body.page-index {
            font-family: var(--font-body);
            font-size: var(--body-size);
            line-height: var(--line-height);
            color: var(--neutral-dark);
            background-color: var(--neutral-white);
            overflow-x: hidden;
        }
        
        body.page-index h1, body.page-index h2, body.page-index h3, body.page-index h4, body.page-index h5, body.page-index h6 {
            font-family: var(--font-heading);
            font-weight: 700;
            line-height: 1.2;
            color: var(--neutral-black);
        }
        
        body.page-index h1 { font-size: var(--h1-size); }
        body.page-index h2 { font-size: var(--h2-size); }
        body.page-index h3 { font-size: var(--h3-size); }
        
        body.page-index a {
            text-decoration: none;
            color: inherit;
            transition: var(--transition-base);
        }
        
        body.page-index img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        body.page-index button {
            cursor: pointer;
            border: none;
            font-family: var(--font-body);
            transition: var(--transition-base);
        }
        
        /* Container */
        body.page-index .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }
        
        body.page-index .container-fluid {
            max-width: 100%;
            padding: 0 var(--spacing-lg);
        }
        
        /* ==================== HEADER ==================== */
        body.page-index .top-bar {
            background: var(--primary-red);
            color: var(--neutral-white);
            padding: var(--spacing-sm) 0;
            font-size: 0.875rem;
        }
        
        body.page-index .top-bar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-md);
        }
        
        body.page-index .top-bar-left, body.page-index .top-bar-right {
            display: flex;
            gap: var(--spacing-lg);
            align-items: center;
        }
        
        body.page-index .top-bar a {
            color: var(--neutral-white);
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }
        
        body.page-index .top-bar a:hover {
            color: var(--primary-yellow);
        }
        
        /* Main Header */
        body.page-index .main-header {
            background: var(--neutral-white);
            box-shadow: var(--shadow-md);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: var(--transition-base);
        }
        
        body.page-index .main-header.scrolled {
            box-shadow: var(--shadow-lg);
            background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
        }
        
        body.page-index .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-lg) 0;
            gap: var(--spacing-xl);
            min-height: 80px;
        }
        
        body.page-index .logo {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--primary-red);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        body.page-index .logo span:first-child {
            color: var(--primary-yellow);
        }
        
        /* Navigation */
        body.page-index nav {
            display: flex;
            align-items: center;
            gap: 0;
            flex: 1;
            justify-content: center;
            min-width: 0;
        }

        body.page-index .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-md);
            align-items: center;
            justify-content: center;
            margin: 0;
            white-space: nowrap;
        }
        
        body.page-index .nav-menu li {
            position: relative;
        }
        
        body.page-index .nav-menu a {
            color: var(--neutral-dark);
            font-weight: 600;
            position: relative;
            padding: var(--spacing-sm) 0;
            display: inline-block;
            text-decoration: none;
            transition: var(--transition-base);
            font-size: 0.95rem;
            white-space: nowrap;
        }
        
        body.page-index .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-yellow);
            transition: var(--transition-base);
        }
        
        body.page-index .nav-menu a:hover::after, body.page-index .nav-menu a.active::after {
            width: 100%;
        }
        
        body.page-index .nav-menu a:hover {
            color: var(--primary-red);
        }

        body.page-index .main-header.scrolled .nav-menu a {
            color: var(--neutral-white);
        }

        body.page-index .main-header.scrolled .nav-menu a:hover {
            color: var(--primary-yellow);
        }
        
        /* Header CTA Buttons */
        body.page-index .header-cta {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
        }

        body.page-index .nav-cta {
            margin-left: var(--spacing-xl);
            flex-shrink: 0;
        }

        body.page-index .header-cta .btn {
            padding: 0.65rem 1.25rem;
            font-size: 0.95rem;
        }
        
        /* Hamburger Menu */
        body.page-index .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: var(--spacing-sm);
        }
        
        body.page-index .hamburger span {
            width: 25px;
            height: 3px;
            background: var(--neutral-dark);
            transition: var(--transition-base);
            border-radius: var(--radius-sm);
        }
        
        body.page-index .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(8px, 8px);
        }
        
        body.page-index .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        body.page-index .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }
        
        /* ==================== BUTTONS ==================== */
        body.page-index .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-sm);
            padding: var(--spacing-md) var(--spacing-lg);
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.95rem;
            transition: var(--transition-base);
            position: relative;
            overflow: hidden;
            border: none;
            cursor: pointer;
            white-space: nowrap;
        }
        
        body.page-index .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            transition: var(--transition-base);
            z-index: -1;
        }
        
        body.page-index .btn:hover::before {
            left: 0;
        }
        
        body.page-index .btn-primary {
            background: var(--primary-yellow);
            color: var(--neutral-dark);
            box-shadow: var(--shadow-primary);
        }
        
        body.page-index .btn-primary::before {
            background: var(--primary-red);
        }
        
        body.page-index .btn-primary:hover {
            color: var(--neutral-white);
            transform: translateY(-2px);
            box-shadow: var(--shadow-red);
        }
        
        body.page-index .btn-secondary {
            background: transparent;
            color: var(--neutral-white);
            border: 2px solid var(--neutral-white);
        }
        
        body.page-index .btn-secondary::before {
            background: var(--primary-yellow);
        }
        
        body.page-index .btn-secondary:hover {
            color: var(--neutral-dark);
            border-color: var(--primary-yellow);
        }
        
        body.page-index .btn-outline {
            background: transparent;
            color: var(--primary-red);
            border: 2px solid var(--primary-red);
        }
        
        body.page-index .btn-outline::before {
            background: var(--primary-red);
        }
        
        body.page-index .btn-outline:hover {
            color: var(--neutral-white);
            border-color: var(--primary-red);
        }
        
        /* ==================== HERO SECTION ==================== */
        body.page-index .hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: left;
            overflow: hidden;
            isolation: isolate;
        }

        body.page-index .hero-content {
            position: relative;
            z-index: 2;
            color: var(--neutral-white);
            padding: var(--spacing-3xl) var(--spacing-lg);
            max-width: 1200px;
            margin: 0 auto;
        }

        body.page-index .hero-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-2xl);
            align-items: center;
        }

        body.page-index .hero-left {
            text-align: left;
            max-width: 760px;
        }

        body.page-index .hero-carousel {
            position: absolute;
            inset: 0;
            z-index: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(circle at 14% 16%, rgba(255, 194, 14, 0.22), transparent 42%),
                radial-gradient(circle at 82% 12%, rgba(227, 30, 36, 0.22), transparent 45%),
                linear-gradient(120deg, rgba(12, 12, 12, 0.74) 0%, rgba(37, 10, 20, 0.62) 50%, rgba(28, 20, 4, 0.58) 100%);
        }

        body.page-index .hero-carousel::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(10, 10, 10, 0.36), rgba(10, 10, 10, 0.2));
            pointer-events: none;
            z-index: 1;
        }

        body.page-index .hero-carousel .slider {
            max-width: none;
            margin: 0 auto;
            padding: 0;
            width: 100%;
            height: 100%;
            position: relative;
            perspective: 1200px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
        }

        body.page-index .hero-carousel .wrapper {
            transform-style: preserve-3d;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
            height: 100%;
        }

        body.page-index .hero-carousel .slide {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            aspect-ratio: auto;
            border-radius: 0;
            overflow: hidden;
            transform-origin: center center;
            --enter-x: 0px;
            --enter-y: 0px;
            opacity: 0;
            transform: translate3d(var(--enter-x), var(--enter-y), 0) scale(1.02);
            transition: opacity 760ms ease, transform 760ms ease;
            box-shadow: none;
            border: 0;
        }

        body.page-index .hero-carousel .slide:nth-child(1) {
            --enter-x: 140px;
            --enter-y: 0px;
        }

        body.page-index .hero-carousel .slide:nth-child(2) {
            --enter-x: 0px;
            --enter-y: 140px;
        }

        body.page-index .hero-carousel .slide:nth-child(3) {
            --enter-x: -140px;
            --enter-y: 0px;
        }

        body.page-index .hero-carousel .slide.is-active {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }

        body.page-index .hero-carousel .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        body.page-index .hero-carousel .slide-label {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0.55rem 0.8rem;
            color: #fff;
            font-weight: 700;
            letter-spacing: 0.02em;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.08));
            text-align: center;
            font-size: 0.9rem;
        }

        body.page-index .hero-carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 0;
            background: rgba(255, 255, 255, 0.22);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            cursor: pointer;
            transition: background 220ms ease, transform 220ms ease;
            backdrop-filter: blur(4px);
        }

        body.page-index .hero-carousel-control:hover {
            background: rgba(255, 194, 14, 0.9);
            color: #111;
        }

        body.page-index .hero-carousel-prev { left: 14px; }
        body.page-index .hero-carousel-next { right: 14px; }

        body.page-index .hero-carousel-dots {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            display: inline-flex;
            gap: 0.45rem;
            z-index: 3;
        }

        body.page-index .hero-carousel-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 0;
            background: rgba(255, 255, 255, 0.55);
            cursor: pointer;
            transition: transform 180ms ease, background 180ms ease;
        }

        body.page-index .hero-carousel-dot.is-active {
            background: var(--primary-yellow);
            transform: scale(1.2);
        }
        
        body.page-index .hero-logo {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: var(--spacing-lg);
            animation: fadeInDown 1s ease-out;
        }
        
        body.page-index .hero-title {
            font-size: var(--h1-size);
            margin-bottom: var(--spacing-lg);
            animation: fadeInUp 1s ease-out 0.2s both;
        }
        
        body.page-index .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: var(--spacing-2xl);
            opacity: 0.95;
            animation: fadeInUp 1s ease-out 0.4s both;
        }
        
        body.page-index .hero-cta {
            display: flex;
            gap: var(--spacing-lg);
            justify-content: flex-start;
            flex-wrap: wrap;
            animation: fadeInUp 1s ease-out 0.6s both;
        }
        
        /* Scroll Indicator */
        body.page-index .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }
        
        body.page-index .scroll-indicator i {
            font-size: 2rem;
            color: var(--neutral-white);
        }
        
        /* ==================== STATS SECTION ==================== */
        body.page-index .stats-section {
            background: var(--neutral-light);
            padding: var(--spacing-3xl) 0;
        }
        
        body.page-index .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-xl);
        }
        
        body.page-index .stat-card {
            background: var(--neutral-white);
            padding: var(--spacing-2xl);
            border-radius: var(--radius-lg);
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: var(--transition-base);
        }
        
        body.page-index .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-xl);
        }
        
        body.page-index .stat-icon {
            font-size: 3rem;
            color: var(--primary-yellow);
            margin-bottom: var(--spacing-md);
        }
        
        body.page-index .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-red);
            margin-bottom: var(--spacing-sm);
        }
        
        body.page-index .stat-label {
            font-size: 1.125rem;
            color: var(--neutral-gray);
            font-weight: 600;
        }
        
        /* ==================== SERVICES SECTION ==================== */
        body.page-index .services-section {
            padding: var(--spacing-3xl) 0;
            background: var(--neutral-white);
            position: relative;
            overflow: hidden;
        }

        body.page-index .services-section .container {
            position: relative;
            z-index: 1;
        }

        body.page-index .services-zigzag {
            position: absolute;
            left: 0;
            right: 0;
            top: 52%;
            transform: translateY(-50%);
            height: 160px;
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
        }

        body.page-index .services-zigzag svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        body.page-index .services-zigzag path {
            stroke: rgba(227, 30, 36, 0.7);
            stroke-width: 7;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        body.page-index .section-header {
            text-align: center;
            margin-bottom: var(--spacing-3xl);
        }
        
        body.page-index .section-title {
            margin-bottom: var(--spacing-md);
            position: relative;
            display: inline-block;
        }
        
        body.page-index .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
            border-radius: var(--radius-full);
        }
        
        body.page-index .section-subtitle {
            color: var(--neutral-gray);
            font-size: 1.125rem;
            max-width: 700px;
            margin: var(--spacing-lg) auto 0;
        }
        
        body.page-index .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-xl);
        }
        
        body.page-index .service-card {
            background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--secondary-orange) 100%);
            padding: var(--spacing-2xl);
            border-radius: var(--radius-xl);
            color: var(--neutral-white);
            position: relative;
            overflow: hidden;
            transition: var(--transition-base);
            cursor: pointer;
        }
        
        body.page-index .service-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transition: var(--transition-slow);
        }
        
        body.page-index .service-card:hover::before {
            transform: translate(-25%, -25%);
        }
        
        body.page-index .service-card:hover {
            transform: scale(1.05) rotate(-1deg);
            box-shadow: var(--shadow-xl);
        }
        
        body.page-index .service-card:nth-child(2) {
            background: linear-gradient(135deg, var(--primary-red) 0%, var(--secondary-burgundy) 100%);
        }
        
        body.page-index .service-card:nth-child(3) {
            background: linear-gradient(135deg, var(--secondary-orange) 0%, var(--secondary-gold) 100%);
        }
        
        body.page-index .service-icon {
            font-size: 3rem;
            margin-bottom: var(--spacing-lg);
        }
        
        body.page-index .service-title {
            font-size: 1.5rem;
            margin-bottom: var(--spacing-md);
            color: var(--neutral-white);
        }
        
        body.page-index .service-description {
            margin-bottom: var(--spacing-lg);
            opacity: 0.95;
        }
        
        body.page-index .service-features {
            list-style: none;
            margin-bottom: var(--spacing-lg);
        }
        
        body.page-index .service-features li {
            padding: var(--spacing-sm) 0;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        body.page-index .service-features li::before {
            content: '✓';
            font-weight: bold;
            font-size: 1.25rem;
        }
        
        /* ==================== WHY CHOOSE US ==================== */
        body.page-index .why-us-section {
            padding: var(--spacing-3xl) 0;
            background: var(--primary-cream);
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        
        body.page-index .why-us-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23FFC20E" opacity="0.1"/></svg>');
            background-size: 50px 50px;
            opacity: 0.3;
            z-index: 0;
            pointer-events: none;
        }

        body.page-index .why-us-section .container {
            position: relative;
            z-index: 2;
        }

        body.page-index .why-us-deco {
            position: absolute;
            top: 0;
            width: clamp(140px, 16vw, 240px);
            height: auto;
            z-index: 1;
            pointer-events: none;
            user-select: none;
        }

        body.page-index .why-us-deco-left {
            left: 0;
            transform: translate(-18%, -18%);
        }

        body.page-index .why-us-deco-right {
            right: 0;
            transform: translate(18%, -18%);
        }
        
        body.page-index .advantages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-xl);
            position: relative;
            z-index: 1;
        }
        
        body.page-index .advantage-card {
            background: var(--neutral-white);
            padding: var(--spacing-xl);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            transition: var(--transition-base);
            border-left: 4px solid var(--primary-yellow);
        }
        
        body.page-index .advantage-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
            border-left-color: var(--primary-red);
        }
        
        body.page-index .advantage-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-yellow), var(--secondary-orange));
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: var(--neutral-white);
            margin-bottom: var(--spacing-lg);
        }
        
        body.page-index .advantage-title {
            font-size: 1.25rem;
            margin-bottom: var(--spacing-md);
            color: var(--neutral-black);
        }
        
        body.page-index .advantage-description {
            color: var(--neutral-gray);
        }
        
        /* ==================== TESTIMONIALS ==================== */
        body.page-index .testimonials-section {
            padding: var(--spacing-3xl) 0;
            background: var(--neutral-white);
        }
        
        body.page-index .testimonials-container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        body.page-index .testimonial-card {
            background: var(--neutral-light);
            padding: var(--spacing-2xl);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            margin: var(--spacing-xl);
        }
        
        body.page-index .testimonial-content {
            font-size: 1.125rem;
            font-style: italic;
            color: var(--neutral-dark);
            margin-bottom: var(--spacing-xl);
            line-height: 1.8;
            position: relative;
        }
        
        body.page-index .testimonial-content::before {
            content: '"';
            font-size: 4rem;
            color: var(--primary-yellow);
            position: absolute;
            top: -20px;
            left: -10px;
            font-family: Georgia, serif;
        }
        
        body.page-index .testimonial-author {
            display: flex;
            align-items: center;
            gap: var(--spacing-lg);
        }
        
        body.page-index .testimonial-avatar {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--primary-yellow), var(--primary-red));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--neutral-white);
            font-size: 1.5rem;
            font-weight: 700;
            border: 3px solid var(--neutral-white);
        }
        
        body.page-index .testimonial-info h4 {
            margin-bottom: var(--spacing-xs);
            color: var(--neutral-black);
        }
        
        body.page-index .testimonial-info p {
            color: var(--neutral-gray);
            font-size: 0.875rem;
        }
        
        body.page-index .testimonial-rating {
            color: var(--secondary-gold);
            font-size: 1.25rem;
        }
        
        /* ==================== CTA SECTION ==================== */
        body.page-index .cta-section {
            background: linear-gradient(135deg, var(--primary-yellow) 0%, var(--primary-red) 60%, var(--secondary-burgundy) 100%);
            padding: var(--spacing-3xl) 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        body.page-index .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><path fill="rgba(255,255,255,0.05)" d="M0,300 Q300,200 600,300 T1200,300 L1200,600 L0,600 Z"/></svg>');
            background-size: cover;
        }
        
        body.page-index .cta-content {
            position: relative;
            z-index: 1;
            color: var(--neutral-white);
        }
        
        body.page-index .cta-title {
            font-size: var(--h2-size);
            margin-bottom: var(--spacing-xl);
            color: var(--neutral-white);
        }
        
        body.page-index .cta-button {
            background: var(--neutral-white);
            color: var(--primary-red);
            padding: var(--spacing-lg) var(--spacing-3xl);
            font-size: 1.25rem;
            font-weight: 700;
            border-radius: var(--radius-full);
        }
        
        body.page-index .cta-button:hover {
            background: var(--primary-yellow);
            color: var(--neutral-dark);
            transform: scale(1.05);
        }
        
        /* ==================== FOOTER ==================== */
        body.page-index .footer {
            background: var(--neutral-black);
            color: var(--neutral-white);
            padding: var(--spacing-3xl) 0 0;
        }
        
        body.page-index .footer-main {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-2xl);
            margin-bottom: var(--spacing-3xl);
        }
        
        body.page-index .footer-column h3 {
            color: var(--primary-yellow);
            margin-bottom: var(--spacing-lg);
            font-size: 1.25rem;
        }
        
        body.page-index .footer-logo {
            font-size: 1.75rem;
            font-weight: 800;
            margin-bottom: var(--spacing-lg);
        }
        
        body.page-index .footer-description {
            color: var(--neutral-gray);
            margin-bottom: var(--spacing-lg);
            line-height: 1.6;
        }
        
        body.page-index .footer-badges {
            display: flex;
            gap: var(--spacing-md);
            margin-top: var(--spacing-lg);
        }
        
        body.page-index .badge {
            background: var(--primary-red);
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        body.page-index .footer-links {
            list-style: none;
        }
        
        body.page-index .footer-links li {
            margin-bottom: var(--spacing-md);
        }
        
        body.page-index .footer-links a {
            color: var(--neutral-gray);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            transition: var(--transition-base);
        }
        
        body.page-index .footer-links a:hover {
            color: var(--primary-yellow);
            transform: translateX(5px);
        }
        
        body.page-index .footer-contact {
            list-style: none;
        }
        
        body.page-index .footer-contact li {
            margin-bottom: var(--spacing-md);
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-md);
        }
        
        body.page-index .footer-contact i {
            color: var(--primary-yellow);
            margin-top: 4px;
        }
        
        body.page-index .newsletter-form {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-lg);
        }
        
        body.page-index .newsletter-form input {
            flex: 1;
            padding: var(--spacing-md);
            border: none;
            border-radius: var(--radius-md);
            font-size: 1rem;
        }
        
        body.page-index .newsletter-form button {
            background: var(--primary-yellow);
            color: var(--neutral-dark);
            padding: var(--spacing-md) var(--spacing-xl);
            border-radius: var(--radius-md);
            font-weight: 600;
        }
        
        body.page-index .newsletter-form button:hover {
            background: var(--primary-red);
            color: var(--neutral-white);
        }
        
        body.page-index .social-links {
            display: flex;
            gap: var(--spacing-md);
            margin-top: var(--spacing-lg);
        }
        
        body.page-index .social-links a {
            width: 40px;
            height: 40px;
            background: var(--neutral-dark);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-base);
        }
        
        body.page-index .social-links a:hover {
            background: var(--primary-yellow);
            color: var(--neutral-black);
            transform: translateY(-3px);
        }
        
        body.page-index .footer-bottom {
            background: var(--neutral-dark);
            padding: var(--spacing-lg) 0;
            text-align: center;
        }
        
        body.page-index .footer-bottom-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
        }
        
        body.page-index .footer-bottom-links {
            display: flex;
            gap: var(--spacing-xl);
        }
        
        body.page-index .footer-bottom-links a {
            color: var(--neutral-gray);
            font-size: 0.875rem;
        }
        
        body.page-index .footer-bottom-links a:hover {
            color: var(--primary-yellow);
        }
        
        /* ==================== FLOATING ELEMENTS ==================== */
        body.page-index .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--primary-yellow);
            color: var(--neutral-dark);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-base);
            box-shadow: var(--shadow-lg);
            z-index: 999;
        }
        
        body.page-index .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
        }
        
        body.page-index .scroll-to-top:hover {
            background: var(--primary-red);
            color: var(--neutral-white);
            transform: translateY(-5px);
        }
        
        body.page-index .whatsapp-widget {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: #25D366;
            color: var(--neutral-white);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            cursor: pointer;
            box-shadow: var(--shadow-xl);
            z-index: 999;
            animation: pulse 2s infinite;
        }
        
        body.page-index .whatsapp-widget:hover {
            transform: scale(1.1);
        }
        
        /* ==================== ANIMATIONS ==================== */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-20px);
            }
            60% {
                transform: translateX(-50%) translateY(-10px);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
            }
        }
        
        /* ==================== RESPONSIVE DESIGN ==================== */
        @media (max-width: 1024px) {
            body.page-index .header-content {
                gap: var(--spacing-md);
            }
            
            body.page-index .logo {
                font-size: 1.5rem;
            }

            body.page-index .hero-layout {
                grid-template-columns: 1fr;
                text-align: center;
            }

            body.page-index .hero-left {
                text-align: center;
                max-width: none;
            }

            body.page-index .hero-carousel .slider {
                height: 100%;
            }

            body.page-index .hero-carousel .wrapper {
                width: 100%;
                height: 100%;
            }

            body.page-index .hero-carousel .slide {
                width: 100%;
            }

            body.page-index .hero-carousel-control {
                width: 38px;
                height: 38px;
            }
            
            body.page-index nav {
                position: fixed;
                top: calc(60px + 80px);
                right: -100%;
                width: 300px;
                height: calc(100vh - 140px);
                background: var(--neutral-white);
                flex-direction: column;
                padding: var(--spacing-2xl) var(--spacing-lg);
                box-shadow: var(--shadow-xl);
                transition: var(--transition-base);
                z-index: 1001;
                justify-content: flex-start;
                align-items: flex-start;
                gap: var(--spacing-lg);
                overflow-y: auto;
                flex: unset;
            }
            
            body.page-index nav.active {
                right: 0;
            }
            
            body.page-index .nav-menu {
                flex-direction: column;
                gap: var(--spacing-md);
                width: 100%;
                align-items: flex-start;
                justify-content: flex-start;
            }
            
            body.page-index .nav-menu li {
                width: 100%;
            }
            
            body.page-index .nav-menu a {
                padding: var(--spacing-md) 0;
                width: 100%;
                display: block;
                font-size: 1rem;
            }
            
            body.page-index .hamburger {
                display: flex;
                z-index: 1002;
            }
            
            body.page-index .header-cta {
                margin-left: 0;
                margin-top: var(--spacing-xl);
                flex-direction: column;
                width: 100%;
                gap: var(--spacing-sm);
            }
            
            body.page-index .header-cta .btn {
                width: 100%;
            }
        }
        
        @media (max-width: 767px) {
            body.page-index .top-bar .container {
                flex-direction: column;
                text-align: center;
            }
            
            body.page-index .hero-section {
                min-height: 70vh;
                padding: var(--spacing-2xl) var(--spacing-lg);
            }

            body.page-index .hero-carousel .slider {
                height: 100%;
            }

            body.page-index .hero-carousel .wrapper {
                width: 100%;
                height: 100%;
            }

            body.page-index .hero-carousel .slide {
                width: 100%;
            }
            
            body.page-index .hero-cta {
                flex-direction: column;
                width: 100%;
            }
            
            body.page-index .hero-cta .btn {
                width: 100%;
            }
            
            body.page-index .stats-grid {
                grid-template-columns: 1fr;
            }
            
            body.page-index .services-grid {
                grid-template-columns: 1fr;
            }
            
            body.page-index .advantages-grid {
                grid-template-columns: 1fr;
            }

            body.page-index .why-us-deco {
                width: clamp(100px, 26vw, 160px);
                opacity: 0.85;
            }

            body.page-index .why-us-deco-left {
                transform: translate(-28%, -14%);
            }

            body.page-index .why-us-deco-right {
                transform: translate(28%, -14%);
            }
            
            body.page-index .footer-main {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            body.page-index .footer-bottom-content {
                flex-direction: column;
                text-align: center;
            }
            
            body.page-index .newsletter-form {
                flex-direction: column;
            }
            
            body.page-index .social-links {
                justify-content: center;
            }
        }
        
        /* ==================== UTILITIES ==================== */
        body.page-index .text-center { text-align: center; }
        body.page-index .text-left { text-align: left; }
        body.page-index .text-right { text-align: right; }
        
        body.page-index .mt-1 { margin-top: var(--spacing-sm); }
        body.page-index .mt-2 { margin-top: var(--spacing-md); }
        body.page-index .mt-3 { margin-top: var(--spacing-lg); }
        body.page-index .mt-4 { margin-top: var(--spacing-xl); }
        
        body.page-index .mb-1 { margin-bottom: var(--spacing-sm); }
        body.page-index .mb-2 { margin-bottom: var(--spacing-md); }
        body.page-index .mb-3 { margin-bottom: var(--spacing-lg); }
        body.page-index .mb-4 { margin-bottom: var(--spacing-xl); }
        
        body.page-index .fade-in {
            opacity: 0;
            animation: fadeInUp 1s ease-out forwards;
        }

/* about.html */
body.page-about {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --primary-cream: #F5F1E8;
      --secondary-orange: #FF9500;
      --secondary-gold: #FFD700;
      --secondary-burgundy: #B71C1C;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 30px rgba(0,0,0,0.15);
      --shadow-primary: 0 10px 30px rgba(255,194,14,0.3);
      --shadow-red: 0 10px 30px rgba(227,30,36,0.3);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --transition-slow: 500ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-about * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body.page-about {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-about h1, body.page-about h2, body.page-about h3, body.page-about h4, body.page-about h5, body.page-about h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-about a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }

    body.page-about img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    body.page-about button {
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      transition: var(--transition-base);
    }

    body.page-about .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-about .section {
      padding: var(--spacing-3xl) 0;
    }

    body.page-about .section.alt {
      background: var(--neutral-light);
    }

    body.page-about .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    body.page-about .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    body.page-about .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }

    body.page-about .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.1rem;
      max-width: 750px;
      margin: 0 auto;
    }

    /* Top Bar */
    body.page-about .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }

    body.page-about .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    body.page-about .top-bar-left, body.page-about .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-about .top-bar a {
      color: var(--neutral-white);
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    body.page-about .top-bar a:hover {
      color: var(--primary-yellow);
    }

    /* Header */
    body.page-about .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }

    body.page-about .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-about .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-about .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-about .logo span:first-child {
      color: var(--primary-yellow);
    }

    body.page-about nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-about .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-about .nav-menu li {
      position: relative;
    }

    body.page-about .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-about .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-about .nav-menu a:hover::after, body.page-about .nav-menu a.active::after {
      width: 100%;
    }

    body.page-about .nav-menu a:hover {
      color: var(--primary-red);
    }

    body.page-about .main-header.scrolled .nav-menu a {
      color: var(--neutral-white);
    }

    body.page-about .main-header.scrolled .nav-menu a:hover {
      color: var(--primary-yellow);
    }

    body.page-about .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-about .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-about .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
    }

    body.page-about .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-about .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    body.page-about .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    body.page-about .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Buttons */
    body.page-about .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-about .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-about .btn:hover::before {
      left: 0;
    }

    body.page-about .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: var(--shadow-primary);
    }

    body.page-about .btn-primary::before {
      background: var(--primary-red);
    }

    body.page-about .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: var(--shadow-red);
    }

    body.page-about .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-about .btn-outline::before {
      background: var(--primary-red);
    }

    body.page-about .btn-outline:hover {
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-about .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }

    body.page-about .btn-light::before {
      background: var(--primary-yellow);
    }

    body.page-about .btn-light:hover {
      color: var(--neutral-dark);
    }

    /* Hero */
    body.page-about .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(135deg, rgba(26, 26, 26, 0.356), rgba(84, 81, 81, 0.35)),
        url('../img/hero-1.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-about .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.2), transparent 45%),
                  radial-gradient(circle at 80% 10%, rgba(255,255,255,0.18), transparent 50%);
      opacity: 0.8;
    }

    body.page-about .page-hero::after {
      content: '';
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      right: -120px;
      bottom: -120px;
    }

    body.page-about .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-about .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-about .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-about .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: var(--spacing-sm);
    }

    body.page-about .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-about .hero-subtitle {
      font-size: 1.15rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.9);
    }

    body.page-about .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-about .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-about .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-about .panel-item:last-child {
      margin-bottom: 0;
    }

    body.page-about .panel-icon {
      font-size: 1.7rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-about .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-about .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.95rem;
    }

    body.page-about .panel-stats {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      margin-top: var(--spacing-md);
    }

    body.page-about .stat-chip {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--neutral-white);
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-full);
      font-size: 0.85rem;
      font-weight: 600;
    }

    /* Stats */
    body.page-about .stats-section {
      background: var(--neutral-light);
      padding: var(--spacing-3xl) 0;
    }

    body.page-about .history-section {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      --history-scale: 1;
    }

    body.page-about .history-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(135deg, rgba(26, 26, 26, 0.74), rgba(106, 27, 154, 0.42)),
        url('../img/hero-1.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(var(--history-scale));
      transform-origin: center center;
      transition: transform 0.18s linear;
      z-index: -2;
    }

    body.page-about .history-section::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 20%, rgba(255, 194, 14, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.3));
      z-index: -1;
    }

    body.page-about .history-section .section-title, body.page-about .history-section .section-subtitle {
      color: var(--neutral-white);
    }

    body.page-about .history-section .section-title::after {
      background: linear-gradient(90deg, var(--primary-yellow), var(--neutral-white));
    }

    body.page-about .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-about .stat-card {
      background: var(--neutral-white);
      padding: var(--spacing-2xl);
      border-radius: var(--radius-lg);
      text-align: center;
      box-shadow: var(--shadow-md);
      transition: var(--transition-base);
    }

    body.page-about .stat-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-xl);
    }

    body.page-about .stat-icon {
      font-size: 2.8rem;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-about .stat-number {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    body.page-about .stat-label {
      font-size: 1.05rem;
      color: var(--neutral-gray);
      font-weight: 600;
    }

    /* Timeline */
    body.page-about .timeline {
      position: relative;
      max-width: 920px;
      margin: var(--spacing-3xl) auto 0;
    }

    body.page-about .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, var(--primary-yellow), var(--primary-red));
      transform: translateX(-50%);
    }

    body.page-about .timeline-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: var(--spacing-2xl);
      position: relative;
      width: 100%;
    }

    body.page-about .timeline-item:nth-child(odd) {
      flex-direction: row;
    }

    body.page-about .timeline-item:nth-child(even) {
      flex-direction: row-reverse;
    }

    body.page-about .timeline-card {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(6px);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-2xl);
      width: 46%;
      position: relative;
      transition: var(--transition-base);
      border-left: 5px solid var(--primary-yellow);
    }

    body.page-about .timeline-card::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--primary-red);
      border: 4px solid var(--neutral-white);
      border-radius: 50%;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    body.page-about .timeline-item:nth-child(even) .timeline-card {
      text-align: right;
      border-left: none;
      border-right: 5px solid var(--primary-red);
    }

    body.page-about .timeline-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
    }

    body.page-about .timeline-item::before {
      content: none;
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--primary-red);
      border: 4px solid var(--neutral-white);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    body.page-about .timeline-card strong {
      display: block;
      font-size: 1.3rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    /* Mission / Vision */
    body.page-about .mission-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-xl);
    }

    body.page-about .mission-card {
      padding: var(--spacing-2xl);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-about .mission-card:hover {
      transform: translateY(-8px);
    }

    body.page-about .mission-card h3 {
      font-size: 1.8rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-about .mission-card.mission {
      background: linear-gradient(135deg, var(--primary-yellow), var(--secondary-orange));
      color: var(--neutral-dark);
    }

    body.page-about .mission-card.vision {
      background: linear-gradient(135deg, var(--primary-red), var(--secondary-burgundy));
      color: var(--neutral-white);
    }

    body.page-about .mission-card.vision h3 {
      color: var(--neutral-white);
    }

    /* Values */
    body.page-about .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: var(--spacing-xl);
      margin-top: var(--spacing-2xl);
    }

    body.page-about .value-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: var(--spacing-xl);
      box-shadow: var(--shadow-md);
      text-align: center;
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-red);
    }

    body.page-about .value-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-about .value-icon {
      font-size: 2.4rem;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-about .value-card strong {
      display: block;
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
      color: var(--primary-red);
    }

    /* Certifications */
    body.page-about .cert-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--spacing-xl);
      margin-top: var(--spacing-2xl);
    }

    body.page-about .cert-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-md);
      text-align: center;
      transition: var(--transition-base);
      border-bottom: 5px solid var(--primary-yellow);
    }

    body.page-about .cert-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-about .cert-card strong {
      display: block;
      font-size: 1.4rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    /* CTA */
    body.page-about .cta-section {
      background: linear-gradient(120deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
      color: var(--neutral-white);
      padding: var(--spacing-3xl) 0;
      text-align: center;
    }

    body.page-about .cta-content {
      max-width: 820px;
      margin: 0 auto;
    }

    body.page-about .cta-title {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-about .cta-button {
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 2rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      box-shadow: var(--shadow-lg);
    }

    body.page-about .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    /* Footer */
    body.page-about .footer {
      background: var(--neutral-black);
      color: var(--neutral-white);
    }

    body.page-about .footer-main {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-2xl);
      padding: var(--spacing-3xl) 0;
    }

    body.page-about .footer-logo {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-about .footer-description {
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: var(--spacing-lg);
    }

    body.page-about .footer-badges {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
    }

    body.page-about .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.85rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.1);
      color: var(--neutral-white);
      font-size: 0.8rem;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    body.page-about .footer-column h3 {
      font-size: 1.2rem;
      margin-bottom: var(--spacing-md);
      color: var(--neutral-white);
    }

    body.page-about .footer-links, body.page-about .footer-contact {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    body.page-about .footer-links a {
      color: rgba(255, 255, 255, 0.8);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    body.page-about .footer-links a:hover {
      color: var(--primary-yellow);
      transform: translateX(5px);
    }

    body.page-about .footer-contact li {
      display: flex;
      gap: var(--spacing-sm);
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.5;
    }

    body.page-about .newsletter-form {
      display: flex;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-md);
    }

    body.page-about .newsletter-form input {
      flex: 1;
      padding: 0.65rem 0.9rem;
      border-radius: var(--radius-md);
      border: none;
      font-family: var(--font-body);
    }

    body.page-about .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      padding: 0.65rem 1.1rem;
      font-weight: 700;
    }

    body.page-about .newsletter-form button:hover {
      background: var(--secondary-orange);
      color: var(--neutral-white);
    }

    body.page-about .social-links {
      display: flex;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-lg);
    }

    body.page-about .social-links a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--neutral-white);
    }

    body.page-about .social-links a:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-about .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: var(--spacing-md) 0;
    }

    body.page-about .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-md);
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-about .footer-bottom-links {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-about .footer-bottom-links a {
      color: rgba(255, 255, 255, 0.7);
    }

    body.page-about .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    /* Scroll to top */
    body.page-about .scroll-to-top {
      position: fixed;
      right: 30px;
      bottom: 30px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-about .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Reveal */
    body.page-about .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    body.page-about .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      body.page-about .header-content {
        gap: var(--spacing-md);
      }

      body.page-about .logo {
        font-size: 1.5rem;
      }

      body.page-about .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-about .hero-cta {
        justify-content: center;
      }

      body.page-about nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-about nav.active {
        right: 0;
      }

      body.page-about .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-about .nav-menu li, body.page-about .nav-menu a {
        width: 100%;
      }

      body.page-about .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-about .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-about .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-about .header-cta .btn {
        width: 100%;
      }

      body.page-about .mission-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      body.page-about .timeline::before {
        left: 20px;
      }

      body.page-about .timeline-item {
        justify-content: flex-start;
        padding-left: 60px;
      }

      body.page-about .timeline-item::before {
        content: none;
      }

      body.page-about .timeline-card {
        width: 100%;
        text-align: left;
        border-left: 5px solid var(--primary-yellow);
        border-right: none;
      }

      body.page-about .timeline-item:nth-child(even) .timeline-card {
        text-align: left;
        border-right: none;
      }
    }

    @media (max-width: 767px) {
      body.page-about .top-bar .container {
        flex-direction: column;
        text-align: center;
      }

      body.page-about .hero-cta {
        flex-direction: column;
      }

      body.page-about .hero-cta .btn {
        width: 100%;
      }

      body.page-about .stats-grid, body.page-about .values-grid, body.page-about .cert-grid, body.page-about .footer-main {
        grid-template-columns: 1fr;
      }

      body.page-about .footer-bottom-content {
        flex-direction: column;
        text-align: center;
      }

      body.page-about .newsletter-form {
        flex-direction: column;
      }

      body.page-about .social-links {
        justify-content: center;
      }
    }

/* network.html */
body.page-network {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
      --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-network * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body.page-network {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-network h1, body.page-network h2, body.page-network h3, body.page-network h4, body.page-network h5, body.page-network h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-network a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }

    body.page-network button, body.page-network input, body.page-network select, body.page-network textarea {
      font-family: var(--font-body);
    }

    body.page-network button {
      border: none;
      cursor: pointer;
      transition: var(--transition-base);
    }

    body.page-network .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-network .section {
      padding: var(--spacing-3xl) 0;
    }

    body.page-network .section.alt {
      background: var(--neutral-light);
    }

    body.page-network .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    body.page-network .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    body.page-network .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }

    body.page-network .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.08rem;
      max-width: 760px;
      margin: 0 auto;
    }

    body.page-network .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }

    body.page-network .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    body.page-network .top-bar-left, body.page-network .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-network .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    body.page-network .top-bar a:hover {
      color: var(--primary-yellow);
    }

    body.page-network .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }

    body.page-network .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-network .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-network .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-network .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-network nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-network .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-network .nav-menu li {
      position: relative;
    }

    body.page-network .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-network .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-network .nav-menu a:hover::after, body.page-network .nav-menu a.active::after {
      width: 100%;
    }

    body.page-network .nav-menu a:hover {
      color: var(--primary-red);
    }

    body.page-network .main-header.scrolled .nav-menu a {
      color: var(--neutral-white);
    }

    body.page-network .main-header.scrolled .nav-menu a:hover {
      color: var(--primary-yellow);
    }

    body.page-network .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-network .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-network .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }

    body.page-network .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-network .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    body.page-network .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    body.page-network .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    body.page-network .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-network .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-network .btn:hover::before {
      left: 0;
    }

    body.page-network .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }

    body.page-network .btn-primary::before {
      background: var(--primary-red);
    }

    body.page-network .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-network .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-network .btn-outline::before {
      background: var(--primary-red);
    }

    body.page-network .btn-outline:hover {
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-network .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }

    body.page-network .btn-light::before {
      background: var(--primary-yellow);
    }

    body.page-network .btn-light:hover {
      color: var(--neutral-dark);
    }

    body.page-network .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(120deg, rgba(106, 27, 154, 0.72) 0%, rgba(227, 30, 36, 0.68) 45%, rgba(255, 194, 14, 0.62) 100%),
        url('../img/resseau.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-network .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }

    body.page-network .page-hero::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      right: -120px;
      bottom: -120px;
    }

    body.page-network .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-network .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-network .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-network .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: var(--spacing-sm);
    }

    body.page-network .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-network .hero-subtitle {
      font-size: 1.12rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.92);
      max-width: 660px;
    }

    body.page-network .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-network .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-network .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-network .panel-item:last-child { margin-bottom: 0; }

    body.page-network .panel-icon {
      font-size: 1.65rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-network .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-network .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.94rem;
    }

    body.page-network .network-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-network .stat-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      text-align: center;
      border-top: 4px solid var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-network .stat-card:nth-child(2) { border-top-color: var(--secondary-orange); }
    body.page-network .stat-card:nth-child(3) { border-top-color: var(--primary-red); }
    body.page-network .stat-card:nth-child(4) { border-top-color: var(--accent-violet); }

    body.page-network .stat-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-network .stat-icon {
      font-size: 2rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    body.page-network .stat-number {
      font-size: 1.85rem;
      font-weight: 800;
      color: var(--neutral-black);
      margin-bottom: 0.2rem;
    }

    body.page-network .stat-label {
      color: var(--neutral-gray);
      font-weight: 600;
    }

    body.page-network .agency-toolbar {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: var(--spacing-xl);
    }

    body.page-network .filter-btn {
      border: 1px solid rgba(227, 30, 36, 0.2);
      background: var(--neutral-white);
      color: var(--neutral-dark);
      border-radius: var(--radius-full);
      padding: 0.45rem 0.9rem;
      font-weight: 700;
      font-size: 0.9rem;
    }

    body.page-network .filter-btn.active, body.page-network .filter-btn:hover {
      background: var(--primary-red);
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-network .agency-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-network .agency-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-yellow);
      position: relative;
      overflow: hidden;
    }

    body.page-network .agency-card:nth-child(even) {
      border-top-color: var(--primary-red);
    }

    body.page-network .agency-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-network .agency-city {
      font-size: 1.2rem;
      margin-bottom: 0.25rem;
    }

    body.page-network .agency-location {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-sm);
      font-size: 0.95rem;
    }

    body.page-network .agency-lines {
      list-style: none;
      display: grid;
      gap: 0.52rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-network .agency-lines li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      color: var(--neutral-dark);
      font-size: 0.93rem;
    }

    body.page-network .agency-lines i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-network .agency-actions {
      display: flex;
      gap: 0.65rem;
      flex-wrap: wrap;
    }

    body.page-network .agency-tag {
      position: absolute;
      top: 14px;
      right: 14px;
      border-radius: var(--radius-full);
      background: rgba(255, 194, 14, 0.22);
      color: var(--neutral-dark);
      font-size: 0.76rem;
      font-weight: 700;
      padding: 0.28rem 0.68rem;
    }

    body.page-network .map-shell {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    body.page-network .map-frame {
      width: 100%;
      min-height: 400px;
      border: 0;
      display: block;
    }

    body.page-network .map-footer {
      padding: var(--spacing-lg);
      background: var(--neutral-light);
      border-top: 1px solid #ececec;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-network .coverage-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-network .coverage-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      border-left: 5px solid var(--primary-yellow);
    }

    body.page-network .coverage-card:nth-child(2) { border-left-color: var(--secondary-orange); }
    body.page-network .coverage-card:nth-child(3) { border-left-color: var(--primary-red); }

    body.page-network .coverage-card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.45rem;
    }

    body.page-network .coverage-card p {
      color: var(--neutral-gray);
      font-size: 0.94rem;
    }

    body.page-network .cta-section {
      position: relative;
      padding: var(--spacing-3xl) 0;
      overflow: hidden;
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: var(--neutral-white);
    }

    body.page-network .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.24), transparent 48%);
      opacity: 0.8;
    }

    body.page-network .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xl);
      flex-wrap: wrap;
    }

    body.page-network .cta-title {
      color: var(--neutral-white);
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      max-width: 720px;
    }

    body.page-network .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 1.4rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-network .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-network .footer {
      background: #111;
      color: #d7d7d7;
    }

    body.page-network .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-network .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-network .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-network .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-network .footer-links, body.page-network .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-network .footer-links a, body.page-network .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-network .footer-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-network .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-network .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-network .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-network .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-network .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-network .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-network .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-network .social-links a:hover {
      background: var(--primary-red);
    }

    body.page-network .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-network .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-network .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-network .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-network .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-network .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-network .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-network .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-network .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    body.page-network *::selection {
      background: rgba(227, 30, 36, 0.2);
      color: var(--neutral-black);
    }

    body.page-network a:focus-visible, body.page-network button:focus-visible, body.page-network input:focus-visible, body.page-network select:focus-visible, body.page-network textarea:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.2), 0 0 0 6px rgba(255, 194, 14, 0.16);
      border-radius: var(--radius-sm);
    }

    body.page-network section[id] {
      scroll-margin-top: 120px;
    }

    @media (prefers-reduced-motion: reduce) {
      body.page-network *, body.page-network *::before, body.page-network *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1024px) {
      body.page-network .header-content { gap: var(--spacing-md); }
      body.page-network .logo { font-size: 1.5rem; }
      body.page-network .hero-layout, body.page-network .coverage-grid { grid-template-columns: 1fr; }
      body.page-network .hero-cta { justify-content: center; }

      body.page-network nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-network nav.active { right: 0; }

      body.page-network .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-network .nav-menu li, body.page-network .nav-menu a { width: 100%; }

      body.page-network .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-network .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-network .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-network .header-cta .btn { width: 100%; }
    }

    @media (max-width: 768px) {
      body.page-network .container { padding: 0 var(--spacing-md); }
      body.page-network .section { padding: var(--spacing-2xl) 0; }
      body.page-network .cta-content { flex-direction: column; align-items: flex-start; }
      body.page-network .newsletter-form { flex-direction: column; }
      body.page-network .map-footer { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 560px) {
      body.page-network .top-bar .container, body.page-network .top-bar-left, body.page-network .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      body.page-network .logo { font-size: 1.35rem; }
      body.page-network .agency-toolbar { justify-content: flex-start; }
    }

/* accounts.html */
body.page-accounts {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --primary-cream: #F5F1E8;
      --secondary-orange: #FF9500;
      --secondary-gold: #FFD700;
      --secondary-burgundy: #B71C1C;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 30px rgba(0,0,0,0.15);
      --shadow-primary: 0 10px 30px rgba(255,194,14,0.3);
      --shadow-red: 0 10px 30px rgba(227,30,36,0.3);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --transition-slow: 500ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
      --hero-service-size: clamp(250px, 24vw, 380px);
      --hero-service-right: -220px;
      --hero-service-bottom: -12px;
    }

    body.page-accounts * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body.page-accounts {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-accounts h1, body.page-accounts h2, body.page-accounts h3, body.page-accounts h4, body.page-accounts h5, body.page-accounts h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-accounts a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }

    body.page-accounts img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    body.page-accounts button {
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      transition: var(--transition-base);
    }

    body.page-accounts .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-accounts .section {
      padding: var(--spacing-3xl) 0;
    }

    body.page-accounts .section.alt {
      background: var(--neutral-light);
    }

    body.page-accounts .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    body.page-accounts .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    body.page-accounts .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }

    body.page-accounts .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.1rem;
      max-width: 750px;
      margin: 0 auto;
    }

    /* Top Bar */
    body.page-accounts .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }

    body.page-accounts .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    body.page-accounts .top-bar-left, body.page-accounts .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-accounts .top-bar a {
      color: var(--neutral-white);
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    body.page-accounts .top-bar a:hover {
      color: var(--primary-yellow);
    }

    /* Header */
    body.page-accounts .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }

    body.page-accounts .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-accounts .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-accounts .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-accounts .logo span:first-child {
      color: var(--primary-yellow);
    }

    body.page-accounts nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-accounts .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-accounts .nav-menu li {
      position: relative;
    }

    body.page-accounts .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-accounts .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-accounts .nav-menu a:hover::after, body.page-accounts .nav-menu a.active::after {
      width: 100%;
    }

    body.page-accounts .nav-menu a:hover {
      color: var(--primary-red);
    }

    body.page-accounts .main-header.scrolled .nav-menu a {
      color: var(--neutral-white);
    }

    body.page-accounts .main-header.scrolled .nav-menu a:hover {
      color: var(--primary-yellow);
    }

    body.page-accounts .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-accounts .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-accounts .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
    }

    body.page-accounts .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-accounts .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    body.page-accounts .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    body.page-accounts .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Buttons */
    body.page-accounts .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-accounts .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-accounts .btn:hover::before {
      left: 0;
    }

    body.page-accounts .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: var(--shadow-primary);
    }

    body.page-accounts .btn-primary::before {
      background: var(--primary-red);
    }

    body.page-accounts .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: var(--shadow-red);
    }

    body.page-accounts .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-accounts .btn-outline::before {
      background: var(--primary-red);
    }

    body.page-accounts .btn-outline:hover {
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-accounts .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }

    body.page-accounts .btn-light::before {
      background: var(--primary-yellow);
    }

    body.page-accounts .btn-light:hover {
      color: var(--neutral-dark);
    }

    /* Hero */
    body.page-accounts .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background: linear-gradient(120deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-accounts .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.2), transparent 45%),
                  radial-gradient(circle at 80% 10%, rgba(255,255,255,0.18), transparent 50%);
      opacity: 0.8;
    }

    body.page-accounts .page-hero::after {
      content: '';
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      right: -120px;
      bottom: -120px;
    }

    body.page-accounts .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-accounts .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-accounts .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-accounts .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: var(--spacing-sm);
    }

    body.page-accounts .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-accounts .hero-subtitle {
      font-size: 1.15rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.9);
    }

    body.page-accounts .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-accounts .hero-right {
      position: relative;
      overflow: visible;
    }

    body.page-accounts .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
      position: relative;
      z-index: 1;
    }

    body.page-accounts .hero-service-image {
      position: absolute;
      right: var(--hero-service-right);
      bottom: var(--hero-service-bottom);
      width: var(--hero-service-size);
      height: auto;
      z-index: 2;
      filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.45)) drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.25));
      pointer-events: none;
    }

    body.page-accounts .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-accounts .panel-item:last-child {
      margin-bottom: 0;
    }

    body.page-accounts .panel-icon {
      font-size: 1.7rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-accounts .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-accounts .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.95rem;
    }

    body.page-accounts .panel-stats {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      margin-top: var(--spacing-md);
    }

    body.page-accounts .stat-chip {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--neutral-white);
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-full);
      font-size: 0.85rem;
      font-weight: 600;
    }

    /* Stats */
    body.page-accounts .stats-section {
      background: var(--neutral-light);
      padding: var(--spacing-3xl) 0;
    }

    body.page-accounts .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-accounts .stat-card {
      background: var(--neutral-white);
      padding: var(--spacing-2xl);
      border-radius: var(--radius-lg);
      text-align: center;
      box-shadow: var(--shadow-md);
      transition: var(--transition-base);
    }

    body.page-accounts .stat-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-xl);
    }

    body.page-accounts .stat-icon {
      font-size: 2.8rem;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .stat-number {
      font-size: 2.2rem;
      font-weight: 800;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    body.page-accounts .stat-label {
      font-size: 1.05rem;
      color: var(--neutral-gray);
      font-weight: 600;
    }

    /* Accounts */
    body.page-accounts .account-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--spacing-xl);
      margin-top: var(--spacing-2xl);
    }

    body.page-accounts .account-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-md);
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-yellow);
      position: relative;
    }

    body.page-accounts .account-card.alt {
      border-top-color: var(--primary-red);
    }

    body.page-accounts .account-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-accounts .account-icon {
      font-size: 2.4rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .account-card h3 {
      font-size: 1.3rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-accounts .account-text {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .account-list {
      list-style: none;
      display: grid;
      gap: 0.5rem;
    }

    body.page-accounts .account-list span {
      font-weight: 600;
      color: var(--neutral-dark);
    }

    body.page-accounts .account-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.85rem;
      border-radius: var(--radius-full);
      background: rgba(227, 30, 36, 0.1);
      color: var(--primary-red);
      font-size: 0.85rem;
      font-weight: 600;
      margin-top: var(--spacing-sm);
    }

    body.page-accounts .account-note {
      font-size: 0.9rem;
      color: var(--neutral-gray);
      margin-top: var(--spacing-sm);
    }

    body.page-accounts .collecte-section {
      position: relative;
      overflow: hidden;
    }

    body.page-accounts .collecte-figure {
      position: absolute;
      right: -40px;
      bottom: -10px;
      width: min(360px, 40vw);
      opacity: 0.35;
      z-index: 0;
      pointer-events: none;
      filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));
    }

    body.page-accounts .collecte-figure img {
      width: 100%;
      height: auto;
      display: block;
    }

    body.page-accounts .collecte-section .account-grid {
      position: relative;
      z-index: 1;
    }

    body.page-accounts .depots-section {
      position: relative;
      overflow: hidden;
    }

    body.page-accounts .depots-figure {
      position: absolute;
      left: -40px;
      bottom: -10px;
      width: min(360px, 40vw);
      opacity: 0.35;
      z-index: 0;
      pointer-events: none;
      filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));
    }

    body.page-accounts .depots-figure img {
      width: 100%;
      height: auto;
      display: block;
    }

    body.page-accounts .depots-section .account-grid {
      position: relative;
      z-index: 1;
    }

    body.page-accounts .account-slider {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
      background: var(--neutral-white);
      box-shadow: var(--shadow-lg);
    }

    body.page-accounts .account-slides {
      display: flex;
      transition: transform 600ms ease;
    }


    body.page-accounts .account-slide {
      min-width: 100%;
      display: flex;
      align-items: stretch;
    }

    body.page-accounts .slide-content {
      flex: 0 0 45%;
      padding: var(--spacing-2xl);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
    }

    body.page-accounts .slide-title {
      font-size: 1.6rem;
      margin-bottom: 0.25rem;
    }

    body.page-accounts .slide-text {
      color: var(--neutral-gray);
    }

    body.page-accounts .slide-media {
      flex: 0 0 55%;
      position: relative;
      background-size: cover;
      background-position: center;
      min-height: 440px;
    }

    body.page-accounts .slide-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
    }

    body.page-accounts .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      z-index: 2;
    }

    body.page-accounts .slider-btn:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-accounts .slider-btn.prev {
      left: -18px;
    }

    body.page-accounts .slider-btn.next {
      right: -18px;
    }

    body.page-accounts .slider-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: var(--spacing-lg);
    }

    body.page-accounts .slider-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      border: none;
      cursor: pointer;
    }

    body.page-accounts .slider-dot.active {
      background: var(--primary-red);
    }


    body.page-accounts .account-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 2.6rem;
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
      box-shadow: var(--shadow-md);
    }

    body.page-accounts .epargne-section {
      position: relative;
      overflow: hidden;
      color: var(--neutral-white);
    }

    body.page-accounts .epargne-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(120deg, rgba(0, 0, 0, 0.45), rgba(227, 30, 36, 0.35)),
        url('../img/epargne.png');
      background-size: cover;
      background-position: center;
      transform: scale(1);
      transition: transform 1.2s ease;
      z-index: 0;
    }

    body.page-accounts .epargne-section.zoom::before {
      transform: scale(1.08);
    }

    body.page-accounts .epargne-section .container {
      position: relative;
      z-index: 1;
    }

    body.page-accounts .epargne-section .account-card {
      color: var(--neutral-dark);
    }

    body.page-accounts .epargne-section .account-list li {
      color: var(--neutral-dark);
    }

    body.page-accounts .epargne-section .section-title {
      color: var(--neutral-white);
    }

    body.page-accounts .epargne-section .section-subtitle {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Timeline */
    body.page-accounts .timeline {
      position: relative;
      max-width: 920px;
      margin: var(--spacing-3xl) auto 0;
    }

    body.page-accounts .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(180deg, var(--primary-yellow), var(--primary-red));
      transform: translateX(-50%);
    }

    body.page-accounts .timeline-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: var(--spacing-2xl);
      position: relative;
      width: 100%;
    }

    body.page-accounts .timeline-item:nth-child(odd) {
      flex-direction: row;
    }

    body.page-accounts .timeline-item:nth-child(even) {
      flex-direction: row-reverse;
    }

    body.page-accounts .timeline-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-2xl);
      width: 46%;
      position: relative;
      transition: var(--transition-base);
      border-left: 5px solid var(--primary-yellow);
    }

    body.page-accounts .timeline-item:nth-child(even) .timeline-card {
      text-align: right;
      border-left: none;
      border-right: 5px solid var(--primary-red);
    }

    body.page-accounts .timeline-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
    }

    body.page-accounts .timeline-item::before {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--primary-red);
      border: 4px solid var(--neutral-white);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    body.page-accounts .timeline-card strong {
      display: block;
      font-size: 1.3rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    /* Mission / Vision */
    body.page-accounts .mission-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-xl);
    }

    body.page-accounts .mission-card {
      padding: var(--spacing-2xl);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-accounts .mission-card:hover {
      transform: translateY(-8px);
    }

    body.page-accounts .mission-card h3 {
      font-size: 1.8rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .mission-card.mission {
      background: linear-gradient(135deg, var(--primary-yellow), var(--secondary-orange));
      color: var(--neutral-dark);
    }

    body.page-accounts .mission-card.vision {
      background: linear-gradient(135deg, var(--primary-red), var(--secondary-burgundy));
      color: var(--neutral-white);
    }

    body.page-accounts .mission-card.vision h3 {
      color: var(--neutral-white);
    }

    /* Values */
    body.page-accounts .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: var(--spacing-xl);
      margin-top: var(--spacing-2xl);
    }

    body.page-accounts .value-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: var(--spacing-xl);
      box-shadow: var(--shadow-md);
      text-align: center;
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-red);
    }

    body.page-accounts .value-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-accounts .value-icon {
      font-size: 2.4rem;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .value-card strong {
      display: block;
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
      color: var(--primary-red);
    }

    /* Certifications */
    body.page-accounts .cert-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--spacing-xl);
      margin-top: var(--spacing-2xl);
    }

    body.page-accounts .cert-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-md);
      text-align: center;
      transition: var(--transition-base);
      border-bottom: 5px solid var(--primary-yellow);
    }

    body.page-accounts .cert-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-accounts .cert-card strong {
      display: block;
      font-size: 1.4rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    /* CTA */
    body.page-accounts .cta-section {
      background: linear-gradient(120deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
      color: var(--neutral-white);
      padding: var(--spacing-3xl) 0;
      text-align: center;
    }

    body.page-accounts .cta-content {
      max-width: 820px;
      margin: 0 auto;
    }

    body.page-accounts .cta-title {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-accounts .cta-button {
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 2rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      box-shadow: var(--shadow-lg);
    }

    body.page-accounts .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    /* Footer */
    body.page-accounts .footer {
      background: var(--neutral-black);
      color: var(--neutral-white);
    }

    body.page-accounts .footer-main {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-2xl);
      padding: var(--spacing-3xl) 0;
    }

    body.page-accounts .footer-logo {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--primary-yellow);
      margin-bottom: var(--spacing-md);
    }

    body.page-accounts .footer-description {
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: var(--spacing-lg);
    }

    body.page-accounts .footer-badges {
      display: flex;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
    }

    body.page-accounts .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.85rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.1);
      color: var(--neutral-white);
      font-size: 0.8rem;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    body.page-accounts .footer-column h3 {
      font-size: 1.2rem;
      margin-bottom: var(--spacing-md);
      color: var(--neutral-white);
    }

    body.page-accounts .footer-links, body.page-accounts .footer-contact {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
    }

    body.page-accounts .footer-links a {
      color: rgba(255, 255, 255, 0.8);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
    }

    body.page-accounts .footer-links a:hover {
      color: var(--primary-yellow);
      transform: translateX(5px);
    }

    body.page-accounts .footer-contact li {
      display: flex;
      gap: var(--spacing-sm);
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.5;
    }

    body.page-accounts .newsletter-form {
      display: flex;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-md);
    }

    body.page-accounts .newsletter-form input {
      flex: 1;
      padding: 0.65rem 0.9rem;
      border-radius: var(--radius-md);
      border: none;
      font-family: var(--font-body);
    }

    body.page-accounts .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      padding: 0.65rem 1.1rem;
      font-weight: 700;
    }

    body.page-accounts .newsletter-form button:hover {
      background: var(--secondary-orange);
      color: var(--neutral-white);
    }

    body.page-accounts .social-links {
      display: flex;
      gap: var(--spacing-sm);
      margin-top: var(--spacing-lg);
    }

    body.page-accounts .social-links a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--neutral-white);
    }

    body.page-accounts .social-links a:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-accounts .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: var(--spacing-md) 0;
    }

    body.page-accounts .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-md);
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-accounts .footer-bottom-links {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-accounts .footer-bottom-links a {
      color: rgba(255, 255, 255, 0.7);
    }

    body.page-accounts .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    /* Scroll to top */
    body.page-accounts .scroll-to-top {
      position: fixed;
      right: 30px;
      bottom: 30px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-accounts .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    /* Reveal */
    body.page-accounts .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    body.page-accounts .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      body.page-accounts {
        --hero-service-size: clamp(200px, 29vw, 280px);
        --hero-service-right: calc(var(--hero-service-size) * -0.58);
        --hero-service-bottom: calc(var(--hero-service-size) * -0.032);
      }

      body.page-accounts .header-content {
        gap: var(--spacing-md);
      }

      body.page-accounts .logo {
        font-size: 1.5rem;
      }

      body.page-accounts .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
      }

      body.page-accounts .hero-cta {
        justify-content: center;
      }

      body.page-accounts .hero-right {
        max-width: 620px;
        margin: 0 auto;
      }

      body.page-accounts nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-accounts nav.active {
        right: 0;
      }

      body.page-accounts .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-accounts .nav-menu li, body.page-accounts .nav-menu a {
        width: 100%;
      }

      body.page-accounts .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-accounts .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-accounts .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-accounts .header-cta .btn {
        width: 100%;
      }

      body.page-accounts .mission-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      body.page-accounts .timeline::before {
        left: 20px;
      }

      body.page-accounts .timeline-item {
        justify-content: flex-start;
        padding-left: 60px;
      }

      body.page-accounts .timeline-item::before {
        left: 20px;
      }

      body.page-accounts .timeline-card {
        width: 100%;
        text-align: left;
        border-left: 5px solid var(--primary-yellow);
        border-right: none;
      }

      body.page-accounts .timeline-item:nth-child(even) .timeline-card {
        text-align: left;
        border-right: none;
      }
    }

    @media (max-width: 767px) {
      body.page-accounts {
        --hero-service-size: clamp(140px, 38vw, 220px);
        --hero-service-right: calc(var(--hero-service-size) * -0.58);
        --hero-service-bottom: calc(var(--hero-service-size) * -0.032);
      }

      body.page-accounts .top-bar .container {
        flex-direction: column;
        text-align: center;
      }

      body.page-accounts .hero-cta {
        flex-direction: column;
      }

      body.page-accounts .hero-cta .btn {
        width: 100%;
      }

      body.page-accounts .hero-right {
        max-width: 520px;
        margin: 0 auto;
      }

      body.page-accounts .stats-grid, body.page-accounts .values-grid, body.page-accounts .cert-grid, body.page-accounts .footer-main {
        grid-template-columns: 1fr;
      }

      body.page-accounts .footer-bottom-content {
        flex-direction: column;
        text-align: center;
      }

      body.page-accounts .newsletter-form {
        flex-direction: column;
      }

      body.page-accounts .social-links {
        justify-content: center;
      }

      body.page-accounts .account-slide {
        flex-direction: column;
      }

      body.page-accounts .slide-content, body.page-accounts .slide-media {
        flex: 0 0 100%;
      }

      body.page-accounts .slide-media {
        min-height: 220px;
      }

      body.page-accounts .slider-btn.prev {
        left: 6px;
      }

      body.page-accounts .slider-btn.next {
        right: 6px;
      }
    }

    @media (max-width: 575px) {
      body.page-accounts {
        --hero-service-size: clamp(120px, 44vw, 170px);
        --hero-service-right: calc(var(--hero-service-size) * -0.58);
        --hero-service-bottom: calc(var(--hero-service-size) * -0.032);
      }

      body.page-accounts .hero-right {
        max-width: 100%;
      }
    }

/* financing.html */
body.page-financing {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
      --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --transition-slow: 500ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-financing * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body.page-financing {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-financing h1, body.page-financing h2, body.page-financing h3, body.page-financing h4, body.page-financing h5, body.page-financing h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-financing a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }

    body.page-financing img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    body.page-financing button, body.page-financing input, body.page-financing select, body.page-financing textarea {
      font-family: var(--font-body);
    }

    body.page-financing button {
      border: none;
      cursor: pointer;
      transition: var(--transition-base);
    }

    body.page-financing .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-financing .section {
      padding: var(--spacing-3xl) 0;
    }

    body.page-financing .section.alt {
      background: var(--neutral-light);
    }

    body.page-financing .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    body.page-financing .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    body.page-financing .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }

    body.page-financing .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.08rem;
      max-width: 760px;
      margin: 0 auto;
    }

    body.page-financing .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }

    body.page-financing .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    body.page-financing .top-bar-left, body.page-financing .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-financing .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    body.page-financing .top-bar a:hover {
      color: var(--primary-yellow);
    }

    body.page-financing .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }

    body.page-financing .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-financing .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-financing .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-financing .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-financing nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-financing .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-financing .nav-menu li {
      position: relative;
    }

    body.page-financing .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-financing .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-financing .nav-menu a:hover::after, body.page-financing .nav-menu a.active::after {
      width: 100%;
    }

    body.page-financing .nav-menu a:hover {
      color: var(--primary-red);
    }

    body.page-financing .main-header.scrolled .nav-menu a {
      color: var(--neutral-white);
    }

    body.page-financing .main-header.scrolled .nav-menu a:hover {
      color: var(--primary-yellow);
    }

    body.page-financing .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-financing .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-financing .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }

    body.page-financing .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-financing .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    body.page-financing .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    body.page-financing .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    body.page-financing .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-financing .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-financing .btn:hover::before {
      left: 0;
    }

    body.page-financing .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }

    body.page-financing .btn-primary::before {
      background: var(--primary-red);
    }

    body.page-financing .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-financing .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-financing .btn-outline::before {
      background: var(--primary-red);
    }

    body.page-financing .btn-outline:hover {
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-financing .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }

    body.page-financing .btn-light::before {
      background: var(--primary-yellow);
    }

    body.page-financing .btn-light:hover {
      color: var(--neutral-dark);
    }

    body.page-financing .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(120deg, rgba(106, 27, 154, 0.72) 0%, rgba(227, 30, 36, 0.68) 45%, rgba(255, 194, 14, 0.62) 100%),
        url('../img/financement.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-financing .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }

    body.page-financing .page-hero::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      right: -120px;
      bottom: -120px;
    }

    body.page-financing .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-financing .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-financing .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-financing .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-financing .hero-subtitle {
      font-size: 1.12rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.92);
      max-width: 660px;
    }

    body.page-financing .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-financing .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-financing .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-financing .panel-item:last-child {
      margin-bottom: 0;
    }

    body.page-financing .panel-icon {
      font-size: 1.65rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-financing .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-financing .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.94rem;
    }

    body.page-financing .finance-stats {
      margin-top: var(--spacing-2xl);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-financing .stat-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      text-align: center;
      transition: var(--transition-base);
      border-top: 4px solid var(--primary-yellow);
    }

    body.page-financing .stat-card:nth-child(2) { border-top-color: var(--secondary-orange); }
    body.page-financing .stat-card:nth-child(3) { border-top-color: var(--primary-red); }
    body.page-financing .stat-card:nth-child(4) { border-top-color: var(--accent-violet); }

    body.page-financing .stat-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-financing .stat-icon {
      font-size: 2rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .stat-number {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--neutral-black);
      margin-bottom: 0.2rem;
    }

    body.page-financing .stat-label {
      color: var(--neutral-gray);
      font-weight: 600;
    }

    body.page-financing .solutions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-financing .solution-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-yellow);
      position: relative;
      overflow: hidden;
    }

    body.page-financing .solution-card.alt {
      border-top-color: var(--primary-red);
    }

    body.page-financing .solution-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-financing .solution-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(227, 30, 36, 0.1);
      color: var(--primary-red);
      font-size: 1.4rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-financing .solution-card h3 {
      font-size: 1.22rem;
      margin-bottom: var(--spacing-xs);
    }

    body.page-financing .solution-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
    }

    body.page-financing .solution-list {
      list-style: none;
      display: grid;
      gap: 0.45rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-financing .solution-list li {
      display: flex;
      gap: 0.45rem;
      font-size: 0.93rem;
      color: var(--neutral-dark);
      align-items: flex-start;
    }

    body.page-financing .solution-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-financing .solution-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      border-radius: var(--radius-full);
      background: rgba(255, 194, 14, 0.24);
      color: var(--neutral-dark);
      padding: 0.28rem 0.7rem;
      font-size: 0.76rem;
      font-weight: 700;
    }

    body.page-financing .process-shell {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-financing .process-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-financing .process-step {
      border-radius: var(--radius-lg);
      background: var(--neutral-light);
      padding: var(--spacing-lg);
      position: relative;
    }

    body.page-financing .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .process-step h4 {
      margin-bottom: var(--spacing-xs);
    }

    body.page-financing .process-step p {
      color: var(--neutral-gray);
      font-size: 0.94rem;
    }

    body.page-financing .simulator-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1.05fr) minmax(260px, 0.95fr);
      gap: var(--spacing-xl);
    }

    body.page-financing .sim-card {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-financing .sim-card h3 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .sim-note {
      color: var(--neutral-gray);
      font-size: 0.95rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-financing .sim-form {
      display: grid;
      gap: var(--spacing-md);
    }

    body.page-financing .sim-field {
      display: grid;
      gap: 0.4rem;
    }

    body.page-financing .sim-field label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--neutral-dark);
    }

    body.page-financing .sim-field input, body.page-financing .sim-field select {
      border: 1px solid #ddd;
      border-radius: var(--radius-md);
      padding: 0.72rem 0.8rem;
      font-size: 0.95rem;
      color: var(--neutral-dark);
      background: #fff;
    }

    body.page-financing .sim-field input:focus, body.page-financing .sim-field select:focus {
      border-color: var(--primary-red);
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.12);
    }

    body.page-financing .range-readout {
      margin-top: 0.3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-weight: 700;
      color: var(--primary-red);
      font-size: 0.95rem;
    }

    body.page-financing .result-grid {
      display: grid;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-lg);
    }

    body.page-financing .result-item {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      background: var(--neutral-light);
      border-radius: var(--radius-md);
      padding: 0.75rem 0.9rem;
      font-size: 0.95rem;
    }

    body.page-financing .result-item strong {
      color: var(--primary-red);
      font-size: 1.03rem;
    }

    body.page-financing .result-highlight {
      margin-top: var(--spacing-md);
      border-radius: var(--radius-md);
      border: 1px solid rgba(227, 30, 36, 0.2);
      background: linear-gradient(90deg, rgba(255, 194, 14, 0.15), rgba(227, 30, 36, 0.08));
      padding: 0.8rem 0.9rem;
      font-weight: 700;
      color: var(--neutral-dark);
    }

    body.page-financing .docs-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-financing .doc-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      border-top: 5px solid var(--primary-yellow);
    }

    body.page-financing .doc-card.alt {
      border-top-color: var(--primary-red);
    }

    body.page-financing .doc-card h3 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .doc-list {
      list-style: none;
      display: grid;
      gap: 0.55rem;
      margin-top: var(--spacing-sm);
    }

    body.page-financing .doc-list li {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      color: var(--neutral-dark);
      font-size: 0.94rem;
    }

    body.page-financing .doc-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-financing .cta-section {
      position: relative;
      padding: var(--spacing-3xl) 0;
      overflow: hidden;
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: var(--neutral-white);
    }

    body.page-financing .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.24), transparent 48%);
      opacity: 0.8;
    }

    body.page-financing .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xl);
      flex-wrap: wrap;
    }

    body.page-financing .cta-title {
      color: var(--neutral-white);
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      max-width: 720px;
    }

    body.page-financing .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 1.4rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-financing .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-financing .footer {
      background: #111;
      color: #d7d7d7;
    }

    body.page-financing .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-financing .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-financing .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-financing .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-financing .footer-links, body.page-financing .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-financing .footer-links a, body.page-financing .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-financing .footer-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-financing .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-financing .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-financing .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-financing .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-financing .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-financing .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-financing .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-financing .social-links a:hover {
      background: var(--primary-red);
    }

    body.page-financing .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-financing .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-financing .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-financing .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-financing .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-financing .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-financing .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-financing .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-financing .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    body.page-financing *::selection {
      background: rgba(227, 30, 36, 0.2);
      color: var(--neutral-black);
    }

    body.page-financing a:focus-visible, body.page-financing button:focus-visible, body.page-financing input:focus-visible, body.page-financing select:focus-visible, body.page-financing textarea:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.2), 0 0 0 6px rgba(255, 194, 14, 0.16);
      border-radius: var(--radius-sm);
    }

    body.page-financing section[id] {
      scroll-margin-top: 120px;
    }

    @media (prefers-reduced-motion: reduce) {
      body.page-financing *, body.page-financing *::before, body.page-financing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1024px) {
      body.page-financing .header-content {
        gap: var(--spacing-md);
      }

      body.page-financing .logo {
        font-size: 1.5rem;
      }

      body.page-financing .hero-layout, body.page-financing .simulator-grid, body.page-financing .docs-grid {
        grid-template-columns: 1fr;
      }

      body.page-financing .hero-cta {
        justify-content: center;
      }

      body.page-financing nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-financing nav.active {
        right: 0;
      }

      body.page-financing .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-financing .nav-menu li, body.page-financing .nav-menu a {
        width: 100%;
      }

      body.page-financing .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-financing .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-financing .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-financing .header-cta .btn {
        width: 100%;
      }
    }

    @media (max-width: 768px) {
      body.page-financing .container {
        padding: 0 var(--spacing-md);
      }

      body.page-financing .section {
        padding: var(--spacing-2xl) 0;
      }

      body.page-financing .cta-content {
        flex-direction: column;
        align-items: flex-start;
      }

      body.page-financing .newsletter-form {
        flex-direction: column;
      }
    }

    @media (max-width: 560px) {
      body.page-financing .top-bar .container, body.page-financing .top-bar-left, body.page-financing .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      body.page-financing .logo {
        font-size: 1.35rem;
      }
    }

/* services.html */
body.page-services {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
      --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-services * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body.page-services {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-services h1, body.page-services h2, body.page-services h3, body.page-services h4, body.page-services h5, body.page-services h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-services a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-base);
    }

    body.page-services button, body.page-services input, body.page-services select, body.page-services textarea {
      font-family: var(--font-body);
    }

    body.page-services button {
      border: none;
      cursor: pointer;
      transition: var(--transition-base);
    }

    body.page-services .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-services .section {
      padding: var(--spacing-3xl) 0;
    }

    body.page-services .section.alt {
      background: var(--neutral-light);
    }

    body.page-services .section-header {
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    body.page-services .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    body.page-services .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }

    body.page-services .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.08rem;
      max-width: 760px;
      margin: 0 auto;
    }

    body.page-services .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }

    body.page-services .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    body.page-services .top-bar-left, body.page-services .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-services .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }

    body.page-services .top-bar a:hover {
      color: var(--primary-yellow);
    }

    body.page-services .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }

    body.page-services .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-services .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-services .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-services .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-services nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-services .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-services .nav-menu li {
      position: relative;
    }

    body.page-services .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-services .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-services .nav-menu a:hover::after, body.page-services .nav-menu a.active::after {
      width: 100%;
    }

    body.page-services .nav-menu a:hover {
      color: var(--primary-red);
    }

    body.page-services .main-header.scrolled .nav-menu a {
      color: var(--neutral-white);
    }

    body.page-services .main-header.scrolled .nav-menu a:hover {
      color: var(--primary-yellow);
    }

    body.page-services .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-services .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-services .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }

    body.page-services .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-services .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(8px, 8px);
    }

    body.page-services .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    body.page-services .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    body.page-services .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-services .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-services .btn:hover::before {
      left: 0;
    }

    body.page-services .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }

    body.page-services .btn-primary::before {
      background: var(--primary-red);
    }

    body.page-services .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-services .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-services .btn-outline::before {
      background: var(--primary-red);
    }

    body.page-services .btn-outline:hover {
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-services .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }

    body.page-services .btn-light::before {
      background: var(--primary-yellow);
    }

    body.page-services .btn-light:hover {
      color: var(--neutral-dark);
    }

    body.page-services .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(120deg, rgba(106, 27, 154, 0.72) 0%, rgba(227, 30, 36, 0.68) 45%, rgba(255, 194, 14, 0.62) 100%),
        url('../img/financement.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-services .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }

    body.page-services .page-hero::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      right: -120px;
      bottom: -120px;
    }

    body.page-services .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-services .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-services .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-services .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: var(--spacing-sm);
    }

    body.page-services .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-services .hero-subtitle {
      font-size: 1.12rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.92);
      max-width: 660px;
    }

    body.page-services .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-services .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-services .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-services .panel-item:last-child { margin-bottom: 0; }

    body.page-services .panel-icon {
      font-size: 1.65rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-services .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-services .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.94rem;
    }

    body.page-services .service-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-services .stat-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      text-align: center;
      border-top: 4px solid var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-services .stat-card:nth-child(2) { border-top-color: var(--secondary-orange); }
    body.page-services .stat-card:nth-child(3) { border-top-color: var(--primary-red); }
    body.page-services .stat-card:nth-child(4) { border-top-color: var(--accent-violet); }

    body.page-services .stat-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-services .stat-icon {
      font-size: 2rem;
      color: var(--primary-red);
      margin-bottom: var(--spacing-sm);
    }

    body.page-services .stat-number {
      font-size: 1.85rem;
      font-weight: 800;
      color: var(--neutral-black);
      margin-bottom: 0.2rem;
    }

    body.page-services .stat-label {
      color: var(--neutral-gray);
      font-weight: 600;
    }

    body.page-services .service-filters {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: var(--spacing-xl);
    }

    body.page-services .service-filter {
      border: 1px solid rgba(227, 30, 36, 0.2);
      background: var(--neutral-white);
      color: var(--neutral-dark);
      border-radius: var(--radius-full);
      padding: 0.45rem 0.9rem;
      font-weight: 700;
      font-size: 0.9rem;
    }

    body.page-services .service-filter.active, body.page-services .service-filter:hover {
      background: var(--primary-red);
      color: var(--neutral-white);
      border-color: var(--primary-red);
    }

    body.page-services .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-services .service-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-yellow);
      position: relative;
      overflow: hidden;
    }

    body.page-services .service-card.alt {
      border-top-color: var(--primary-red);
    }

    body.page-services .service-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-services .service-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(227, 30, 36, 0.1);
      color: var(--primary-red);
      font-size: 1.4rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-services .service-card h3 {
      font-size: 1.2rem;
      margin-bottom: var(--spacing-xs);
    }

    body.page-services .service-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
    }

    body.page-services .service-list {
      list-style: none;
      display: grid;
      gap: 0.45rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-services .service-list li {
      display: flex;
      gap: 0.45rem;
      font-size: 0.93rem;
      color: var(--neutral-dark);
      align-items: flex-start;
    }

    body.page-services .service-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-services .service-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      border-radius: var(--radius-full);
      background: rgba(255, 194, 14, 0.22);
      color: var(--neutral-dark);
      font-size: 0.76rem;
      font-weight: 700;
      padding: 0.28rem 0.68rem;
    }

    body.page-services .package-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-services .package-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      border-left: 5px solid var(--primary-yellow);
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
    }

    body.page-services .package-card:nth-child(2) { border-left-color: var(--secondary-orange); }
    body.page-services .package-card:nth-child(3) { border-left-color: var(--primary-red); }

    body.page-services .package-card::before, body.page-services .package-card::after {
      content: "";
      position: absolute;
      top: 0;
      width: clamp(56px, 7vw, 88px);
      height: clamp(56px, 7vw, 88px);
      background-repeat: no-repeat;
      background-size: contain;
      pointer-events: none;
      z-index: 0;
      opacity: 0.9;
    }

    body.page-services .package-card::before {
      left: 0;
      transform: translate(-22%, -22%);
      background-image: url('../img/Form_gauche.png');
    }

    body.page-services .package-card::after {
      right: 0;
      transform: translate(22%, -22%);
      background-image: url('../img/Form_droite.png');
    }

    body.page-services .package-card > * {
      position: relative;
      z-index: 1;
    }

    body.page-services .package-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
    }

    body.page-services .package-card h3 {
      margin-bottom: 0.5rem;
      font-size: 1.12rem;
    }

    body.page-services .package-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-services .package-list {
      list-style: none;
      display: grid;
      gap: 0.5rem;
    }

    body.page-services .package-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
      font-size: 0.93rem;
    }

    body.page-services .package-list i {
      color: var(--primary-red);
      margin-top: 0.18rem;
      flex-shrink: 0;
    }

    body.page-services .process-shell {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-services .process-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-services .process-step {
      border-radius: var(--radius-lg);
      background: var(--neutral-light);
      padding: var(--spacing-lg);
      position: relative;
    }

    body.page-services .step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-bottom: var(--spacing-sm);
    }

    body.page-services .process-step h4 {
      margin-bottom: var(--spacing-xs);
    }

    body.page-services .process-step p {
      color: var(--neutral-gray);
      font-size: 0.94rem;
    }

    body.page-services .digital-shell {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
      gap: var(--spacing-xl);
    }

    body.page-services .digital-card {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-services .digital-card h3 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-services .digital-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
    }

    body.page-services .digital-list {
      list-style: none;
      display: grid;
      gap: 0.55rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-services .digital-list li {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
      font-size: 0.94rem;
    }

    body.page-services .digital-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-services .cta-section {
      position: relative;
      padding: var(--spacing-3xl) 0;
      overflow: hidden;
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: var(--neutral-white);
    }

    body.page-services .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.24), transparent 48%);
      opacity: 0.8;
    }

    body.page-services .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xl);
      flex-wrap: wrap;
    }

    body.page-services .cta-title {
      color: var(--neutral-white);
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      max-width: 720px;
    }

    body.page-services .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 1.4rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-services .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-services .footer {
      background: #111;
      color: #d7d7d7;
    }

    body.page-services .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-services .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-services .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-services .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-services .footer-links, body.page-services .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-services .footer-links a, body.page-services .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-services .footer-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-services .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-services .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-services .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-services .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-services .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-services .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-services .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-services .social-links a:hover {
      background: var(--primary-red);
    }

    body.page-services .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-services .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-services .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-services .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-services .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-services .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-services .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-services .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-services .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    body.page-services *::selection {
      background: rgba(227, 30, 36, 0.2);
      color: var(--neutral-black);
    }

    body.page-services a:focus-visible, body.page-services button:focus-visible, body.page-services input:focus-visible, body.page-services select:focus-visible, body.page-services textarea:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.2), 0 0 0 6px rgba(255, 194, 14, 0.16);
      border-radius: var(--radius-sm);
    }

    body.page-services section[id] {
      scroll-margin-top: 120px;
    }

    @media (prefers-reduced-motion: reduce) {
      body.page-services *, body.page-services *::before, body.page-services *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1024px) {
      body.page-services .header-content { gap: var(--spacing-md); }
      body.page-services .logo { font-size: 1.5rem; }
      body.page-services .hero-layout, body.page-services .package-grid, body.page-services .digital-shell { grid-template-columns: 1fr; }
      body.page-services .hero-cta { justify-content: center; }

      body.page-services nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-services nav.active { right: 0; }

      body.page-services .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-services .nav-menu li, body.page-services .nav-menu a { width: 100%; }

      body.page-services .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-services .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-services .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-services .header-cta .btn { width: 100%; }
    }

    @media (max-width: 768px) {
      body.page-services .container { padding: 0 var(--spacing-md); }
      body.page-services .section { padding: var(--spacing-2xl) 0; }
      body.page-services .cta-content { flex-direction: column; align-items: flex-start; }
      body.page-services .newsletter-form { flex-direction: column; }
      body.page-services .service-filters { justify-content: flex-start; }

      body.page-services .package-card::before, body.page-services .package-card::after {
        width: 60px;
        height: 60px;
        opacity: 0.8;
      }
    }

    @media (max-width: 560px) {
      body.page-services .top-bar .container, body.page-services .top-bar-left, body.page-services .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      body.page-services .logo { font-size: 1.35rem; }
    }

/* client.html */
body.page-client {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 30px rgba(0,0,0,0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-client * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body.page-client {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-client h1, body.page-client h2, body.page-client h3, body.page-client h4, body.page-client h5, body.page-client h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-client a { text-decoration: none; color: inherit; transition: var(--transition-base); }
    body.page-client button, body.page-client input, body.page-client select, body.page-client textarea { font-family: var(--font-body); }
    body.page-client button { border: none; cursor: pointer; transition: var(--transition-base); }

    body.page-client .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }

    body.page-client .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }
    body.page-client .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }
    body.page-client .top-bar-left, body.page-client .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }
    body.page-client .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }
    body.page-client .top-bar a:hover { color: var(--primary-yellow); }

    body.page-client .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }
    body.page-client .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-client .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }

    body.page-client .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-client .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-client nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }

    body.page-client .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }

    body.page-client .nav-menu li { position: relative; }
    body.page-client .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }

    body.page-client .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-client .nav-menu a:hover::after, body.page-client .nav-menu a.active::after { width: 100%; }
    body.page-client .nav-menu a:hover { color: var(--primary-red); }
    body.page-client .main-header.scrolled .nav-menu a { color: var(--neutral-white); }
    body.page-client .main-header.scrolled .nav-menu a:hover { color: var(--primary-yellow); }

    body.page-client .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    body.page-client .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-client .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }

    body.page-client .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }

    body.page-client .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    body.page-client .hamburger.active span:nth-child(2) { opacity: 0; }
    body.page-client .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    body.page-client .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    body.page-client .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }

    body.page-client .btn:hover::before { left: 0; }

    body.page-client .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }

    body.page-client .btn-primary::before { background: var(--primary-red); }

    body.page-client .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-client .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }

    body.page-client .btn-outline::before { background: var(--primary-red); }
    body.page-client .btn-outline:hover { color: var(--neutral-white); border-color: var(--primary-red); }

    body.page-client .section { padding: var(--spacing-3xl) 0; }

    body.page-client .client-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background: linear-gradient(120deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-client .client-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }

    body.page-client .client-hero-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(300px, 0.95fr) minmax(300px, 1.05fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-client .login-card {
      background: rgba(255,255,255,0.96);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      padding: var(--spacing-2xl);
      color: var(--neutral-dark);
    }

    body.page-client .login-card h2 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-client .login-note {
      color: var(--neutral-gray);
      font-size: 0.94rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-client .login-form {
      display: grid;
      gap: var(--spacing-md);
    }

    body.page-client .field {
      display: grid;
      gap: 0.42rem;
    }

    body.page-client .field label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--neutral-dark);
    }

    body.page-client .field input {
      border: 1px solid #ddd;
      border-radius: var(--radius-md);
      padding: 0.72rem 0.8rem;
      font-size: 0.95rem;
      color: var(--neutral-dark);
      background: #fff;
    }

    body.page-client .field input:focus {
      border-color: var(--primary-red);
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.12);
    }

    body.page-client .login-row {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-sm);
      align-items: center;
      flex-wrap: wrap;
      font-size: 0.9rem;
    }

    body.page-client .login-links {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      font-size: 0.9rem;
    }

    body.page-client .hero-info {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
      padding: var(--spacing-2xl);
    }

    body.page-client .hero-info h2 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-sm);
      font-size: clamp(1.6rem, 4vw, 2.3rem);
    }

    body.page-client .hero-info p {
      color: rgba(255,255,255,0.9);
      margin-bottom: var(--spacing-lg);
    }

    body.page-client .hero-points {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-client .hero-points li {
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
    }

    body.page-client .hero-points i { color: var(--primary-yellow); margin-top: 0.2rem; }

    body.page-client .dashboard-section { background: var(--neutral-light); }

    body.page-client .dashboard-layout {
      display: grid;
      grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
      gap: var(--spacing-xl);
    }

    body.page-client .sidebar {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-xl);
      align-self: start;
      position: sticky;
      top: 120px;
    }

    body.page-client .profile-box {
      background: linear-gradient(135deg, rgba(255, 194, 14, 0.25), rgba(227,30,36,0.1));
      border: 1px solid rgba(227, 30, 36, 0.12);
      border-radius: var(--radius-md);
      padding: var(--spacing-md);
      margin-bottom: var(--spacing-md);
    }

    body.page-client .profile-box strong { display: block; margin-bottom: 0.2rem; }
    body.page-client .profile-box small { color: var(--neutral-gray); }

    body.page-client .sidebar nav {
      display: grid;
      gap: 0.45rem;
    }

    body.page-client .sidebar nav a {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.55rem 0.65rem;
      border-radius: var(--radius-md);
      color: var(--neutral-dark);
      font-weight: 600;
      font-size: 0.93rem;
    }

    body.page-client .sidebar nav a:hover, body.page-client .sidebar nav a.active {
      background: rgba(227, 30, 36, 0.1);
      color: var(--primary-red);
    }

    body.page-client .content-panel {
      display: grid;
      gap: var(--spacing-xl);
    }

    body.page-client .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-client .summary-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-lg);
      border-top: 4px solid var(--primary-yellow);
    }

    body.page-client .summary-card:nth-child(2) { border-top-color: var(--secondary-orange); }
    body.page-client .summary-card:nth-child(3) { border-top-color: var(--primary-red); }

    body.page-client .summary-card strong {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 0.25rem;
    }

    body.page-client .summary-card p {
      color: var(--neutral-gray);
      font-size: 0.93rem;
    }

    body.page-client .table-card {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-xl);
    }

    body.page-client .table-card h3 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-client .table-wrap {
      overflow-x: auto;
    }

    body.page-client .table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
      min-width: 560px;
    }

    body.page-client .table th, body.page-client .table td {
      padding: 0.75rem;
      border-bottom: 1px solid #eee;
      text-align: left;
    }

    body.page-client .table th {
      color: var(--neutral-dark);
      font-size: 0.84rem;
      text-transform: uppercase;
      letter-spacing: 0.04rem;
    }

    body.page-client .status-pill {
      border-radius: var(--radius-full);
      padding: 0.2rem 0.65rem;
      font-size: 0.78rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    body.page-client .status-ok {
      background: rgba(27, 152, 80, 0.14);
      color: #1b9850;
    }

    body.page-client .status-pending {
      background: rgba(245, 158, 11, 0.18);
      color: #c77b00;
    }

    body.page-client .footer {
      background: #111;
      color: #d7d7d7;
      margin-top: var(--spacing-3xl);
    }

    body.page-client .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-client .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-client .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-client .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-client .footer-links, body.page-client .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-client .footer-links a, body.page-client .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-client .footer-links a:hover { color: var(--primary-yellow); }

    body.page-client .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-client .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-client .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-client .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-client .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-client .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-client .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-client .social-links a:hover { background: var(--primary-red); }

    body.page-client .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-client .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-client .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-client .footer-bottom-links a:hover { color: var(--primary-yellow); }

    body.page-client .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-client .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-client .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-client .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-client .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1024px) {
      body.page-client .header-content { gap: var(--spacing-md); }
      body.page-client .logo { font-size: 1.5rem; }
      body.page-client .client-hero-content, body.page-client .dashboard-layout { grid-template-columns: 1fr; }

      body.page-client .sidebar {
        position: static;
      }

      body.page-client nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-client nav.active { right: 0; }

      body.page-client .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-client .nav-menu li, body.page-client .nav-menu a { width: 100%; }

      body.page-client .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-client .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-client .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-client .header-cta .btn { width: 100%; }
    }

    @media (max-width: 768px) {
      body.page-client .container { padding: 0 var(--spacing-md); }
      body.page-client .section { padding: var(--spacing-2xl) 0; }
      body.page-client .newsletter-form { flex-direction: column; }
      body.page-client .login-links { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 560px) {
      body.page-client .top-bar .container, body.page-client .top-bar-left, body.page-client .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      body.page-client .logo { font-size: 1.35rem; }
    }

/* membership.html */
body.page-membership {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.14);
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 3rem;
      --space-3xl: 4rem;
      --transition: 300ms ease;
    }

    body.page-membership * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body.page-membership {
      font-family: 'Open Sans', sans-serif;
      color: var(--neutral-dark);
      line-height: 1.6;
      background: var(--neutral-white);
      overflow-x: hidden;
    }
    body.page-membership h1, body.page-membership h2, body.page-membership h3, body.page-membership h4 { font-family: 'Montserrat', sans-serif; line-height: 1.2; color: var(--neutral-black); }
    body.page-membership a { color: inherit; text-decoration: none; }
    body.page-membership .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }

    body.page-membership .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      font-size: 0.875rem;
      padding: var(--space-sm) 0;
    }
    body.page-membership .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-md);
      flex-wrap: wrap;
    }
    body.page-membership .top-links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
    body.page-membership .top-links a, body.page-membership .top-links span { display: inline-flex; align-items: center; gap: 0.35rem; }

    body.page-membership .main-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #fff;
      box-shadow: var(--shadow-md);
      transition: var(--transition);
    }
    body.page-membership .main-header.scrolled {
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
    }
    body.page-membership .header-content {
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xl);
      padding: var(--space-lg) 0;
    }
    body.page-membership .logo {
      display: inline-flex;
      gap: 0.45rem;
      align-items: center;
      font-weight: 800;
      font-size: 1.7rem;
      color: var(--primary-red);
      white-space: nowrap;
    }
    body.page-membership .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.65rem;
    }

    body.page-membership nav {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }
    body.page-membership .nav-menu {
      list-style: none;
      display: flex;
      gap: var(--space-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }
    body.page-membership .nav-menu li { position: relative; }
    body.page-membership .nav-menu a {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--neutral-dark);
      position: relative;
      padding: var(--space-sm) 0;
      display: inline-block;
    }
    body.page-membership .nav-menu a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition);
    }
    body.page-membership .nav-menu a:hover::after, body.page-membership .nav-menu a.active::after { width: 100%; }
    body.page-membership .nav-menu a:hover { color: var(--primary-red); }
    body.page-membership .main-header.scrolled .nav-menu a { color: #fff; }
    body.page-membership .main-header.scrolled .nav-menu a:hover { color: var(--primary-yellow); }

    body.page-membership .header-cta {
      display: flex;
      gap: var(--space-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.page-membership .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }
    body.page-membership .btn {
      border: none;
      border-radius: var(--radius-md);
      padding: 0.7rem 1.2rem;
      font-weight: 700;
      font-size: 0.92rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      cursor: pointer;
      transition: var(--transition);
    }
    body.page-membership .btn-primary { background: var(--primary-yellow); color: var(--neutral-dark); box-shadow: 0 8px 22px rgba(255,194,14,.35); }
    body.page-membership .btn-primary:hover { background: var(--primary-red); color: #fff; transform: translateY(-2px); }
    body.page-membership .btn-outline { background: transparent; color: var(--primary-red); border: 2px solid var(--primary-red); }
    body.page-membership .btn-outline:hover { background: var(--primary-red); color: #fff; }
    body.page-membership .btn-light { background: #fff; color: var(--primary-red); box-shadow: var(--shadow-md); }

    body.page-membership .hamburger {
      display: none;
      background: transparent;
      border: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--space-sm);
    }
    body.page-membership .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition);
      border-radius: var(--radius-md);
      display: block;
    }
    body.page-membership .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    body.page-membership .hamburger.active span:nth-child(2) { opacity: 0; }
    body.page-membership .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    body.page-membership .page-hero {
      position: relative;
      padding: var(--space-3xl) 0 var(--space-2xl);
      background: linear-gradient(120deg, #6A1B9A 0%, #E31E24 45%, #FFC20E 100%);
      color: #fff;
      overflow: hidden;
    }
    body.page-membership .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.2), transparent 45%), radial-gradient(circle at 80% 10%, rgba(255,255,255,.18), transparent 50%);
    }
    body.page-membership .hero-content { position: relative; z-index: 1; }
    body.page-membership .breadcrumb {
      display: inline-flex;
      gap: 0.5rem;
      align-items: center;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.2);
      padding: 0.45rem 0.9rem;
      border-radius: var(--radius-full);
      font-size: .85rem;
      margin-bottom: var(--space-xl);
    }
    body.page-membership .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px,1.15fr) minmax(260px,.85fr);
      gap: var(--space-2xl);
      align-items: center;
    }
    body.page-membership .hero-kicker { text-transform: uppercase; letter-spacing: .15rem; font-size: .84rem; color: rgba(255,255,255,.88); }
    body.page-membership .hero-title { color: #fff; font-size: clamp(2.2rem,5vw,3.2rem); margin: .4rem 0 1rem; }
    body.page-membership .hero-subtitle { color: rgba(255,255,255,.92); margin-bottom: var(--space-xl); max-width: 620px; }
    body.page-membership .hero-cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }

    body.page-membership .hero-panel {
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: var(--radius-xl);
      padding: var(--space-xl);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(8px);
    }
    body.page-membership .panel-item { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
    body.page-membership .panel-item:last-child { margin-bottom: 0; }
    body.page-membership .panel-icon { color: var(--primary-yellow); font-size: 1.5rem; }
    body.page-membership .panel-item h4 { color: #fff; margin-bottom: .2rem; }
    body.page-membership .panel-item p { color: rgba(255,255,255,.86); font-size: .94rem; }

    body.page-membership .section { padding: var(--space-3xl) 0; }
    body.page-membership .section.alt { background: var(--neutral-light); }
    body.page-membership .section-header { text-align: center; margin-bottom: var(--space-2xl); }
    body.page-membership .section-title {
      display: inline-block;
      font-size: clamp(1.85rem,4vw,2.6rem);
      margin-bottom: .85rem;
      position: relative;
    }
    body.page-membership .section-title::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      border-radius: var(--radius-full);
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
    }
    body.page-membership .section-subtitle { color: var(--neutral-gray); max-width: 760px; margin: 0 auto; }

    body.page-membership .process-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-xl);
    }
    body.page-membership .process-visual {
      position: relative;
      width: min(860px, 98%);
      margin: -6rem auto -10.1rem;
      display: flex;
      justify-content: center;
      pointer-events: none;
      z-index: 3;
    }
    body.page-membership .process-visual img {
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 22px 34px rgba(227, 30, 36, 0.18));
    }
    body.page-membership .process-visual.process-visual--profile {
      width: min(760px, 96%);
      margin: -6rem auto -9rem;
    }
    body.page-membership .process-card {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--space-xl);
      position: relative;
      z-index: 1;
      border-top: 5px solid var(--primary-yellow);
      transition: var(--transition);
    }
    body.page-membership .process-card:nth-child(2) { border-top-color: #FF9500; }
    body.page-membership .process-card:nth-child(3) { border-top-color: var(--primary-red); }
    body.page-membership .process-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
    body.page-membership .process-number {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(227,30,36,.1);
      color: var(--primary-red);
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    body.page-membership .process-icon { color: var(--primary-red); font-size: 2rem; margin-bottom: .6rem; }

    body.page-membership .profile-shell {
      background: #fff;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xl);
    }
    body.page-membership .profile-switch {
      display: grid;
      grid-template-columns: repeat(4, minmax(140px, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-xl);
    }
    body.page-membership .profile-btn {
      border: 1px solid #e7e7e7;
      background: #fff;
      border-radius: var(--radius-md);
      font-weight: 700;
      color: var(--neutral-dark);
      padding: .75rem .8rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: .45rem;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
      transition: var(--transition);
    }
    body.page-membership .profile-btn i { color: var(--primary-red); }
    body.page-membership .profile-btn.active, body.page-membership .profile-btn:hover {
      background: var(--primary-red);
      color: #fff;
      border-color: var(--primary-red);
      transform: translateY(-2px);
    }
    body.page-membership .profile-btn.active i, body.page-membership .profile-btn:hover i { color: var(--primary-yellow); }

    body.page-membership .profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: var(--space-xl);
    }
    body.page-membership .profile-card {
      background: var(--neutral-light);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
    }
    body.page-membership .profile-card .subtitle { color: var(--neutral-gray); margin-bottom: .8rem; }
    body.page-membership .info-list { list-style: none; display: grid; gap: .55rem; }
    body.page-membership .info-list li { display: flex; align-items: center; gap: .5rem; }
    body.page-membership .info-list i { width: 18px; text-align: center; color: var(--primary-red); }

    body.page-membership .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: var(--space-xl);
    }
    body.page-membership .pricing-card {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--space-xl);
      border-top: 5px solid var(--primary-yellow);
      transition: var(--transition);
    }
    body.page-membership .pricing-card.alt { border-top-color: var(--primary-red); }
    body.page-membership .pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
    body.page-membership .pricing-kicker {
      display: inline-flex;
      gap: .35rem;
      align-items: center;
      background: rgba(227,30,36,.1);
      color: var(--primary-red);
      border-radius: var(--radius-full);
      padding: .35rem .7rem;
      font-size: .84rem;
      font-weight: 700;
      margin-bottom: .6rem;
    }
    body.page-membership .pricing-total { font-size: 2rem; color: var(--primary-red); font-weight: 800; line-height: 1.05; }
    body.page-membership .pricing-total span { display: block; color: var(--neutral-gray); font-size: .95rem; font-weight: 600; margin-top: .4rem; }
    body.page-membership .pricing-card ul { list-style: none; margin-top: .8rem; display: grid; gap: .5rem; }
    body.page-membership .pricing-card strong { color: var(--primary-red); }

    body.page-membership .notice-band {
      margin-top: var(--space-xl);
      padding: var(--space-md) var(--space-lg);
      border-radius: var(--radius-md);
      border: 1px solid rgba(227,30,36,.15);
      background: linear-gradient(90deg, rgba(255,194,14,.15), rgba(227,30,36,.1));
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }

    body.page-membership .docs-layout {
      display: grid;
      grid-template-columns: minmax(220px,.85fr) minmax(260px,1.15fr);
      gap: var(--space-xl);
      align-items: start;
    }
    body.page-membership .doc-tabs {
      display: grid;
      gap: .55rem;
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--space-md);
      position: sticky;
      top: 110px;
    }
    body.page-membership .doc-tab {
      text-align: left;
      border: 1px solid #e8e8e8;
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--neutral-dark);
      font-weight: 700;
      padding: .75rem .85rem;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      gap: .4rem;
      transition: var(--transition);
    }
    body.page-membership .doc-tab i { color: var(--primary-red); }
    body.page-membership .doc-tab.active, body.page-membership .doc-tab:hover { background: var(--primary-red); color: #fff; border-color: var(--primary-red); }
    body.page-membership .doc-tab.active i, body.page-membership .doc-tab:hover i { color: var(--primary-yellow); }
    body.page-membership .doc-content {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--space-xl);
    }
    body.page-membership .doc-panel { display: none; }
    body.page-membership .doc-panel.active { display: block; animation: fadeIn .35s ease; }
    body.page-membership .doc-panel p { color: var(--neutral-gray); margin-bottom: .75rem; }
    body.page-membership .doc-list { list-style: none; display: grid; gap: .5rem; margin-bottom: .8rem; }
    body.page-membership .doc-list li { display: flex; gap: .55rem; }
    body.page-membership .doc-list i { color: var(--primary-red); margin-top: .2rem; }
    body.page-membership .doc-tag {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      background: rgba(255,194,14,.2);
      border-radius: var(--radius-full);
      padding: .35rem .75rem;
      font-size: .84rem;
      font-weight: 700;
    }

    body.page-membership .application-grid {
      display: grid;
      grid-template-columns: minmax(250px,.95fr) minmax(280px,1.05fr);
      gap: var(--space-xl);
    }
    body.page-membership .upload-card, body.page-membership .form-card {
      background: #fff;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--space-xl);
    }
    body.page-membership .upload-card {
      border: 1px dashed rgba(227,30,36,.25);
      background: linear-gradient(160deg, #fff7dd 0%, #fff 60%);
    }
    body.page-membership .upload-drop {
      margin-top: .8rem;
      border: 2px dashed rgba(227,30,36,.3);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      text-align: center;
      background: rgba(255,255,255,.75);
    }
    body.page-membership .upload-drop i { color: var(--primary-red); font-size: 2rem; margin-bottom: .5rem; }
    body.page-membership .upload-drop p { color: var(--neutral-gray); margin-bottom: .8rem; }
    body.page-membership .upload-drop .upload-field {
      margin-top: 1rem;
      text-align: left;
    }
    body.page-membership .upload-drop .upload-field label {
      color: var(--neutral-dark);
      margin-bottom: .35rem;
      font-size: .9rem;
      font-weight: 700;
    }
    body.page-membership .upload-drop .upload-field input[type="file"] {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: var(--radius-md);
      padding: .55rem .65rem;
      font-size: .9rem;
      width: 100%;
    }
    body.page-membership .upload-drop .upload-help {
      display: block;
      margin-top: .35rem;
      color: var(--neutral-gray);
      font-size: .82rem;
      line-height: 1.35;
    }
    body.page-membership .contact-mini { margin-top: 1rem; display: grid; gap: .55rem; }
    body.page-membership .contact-mini a, body.page-membership .contact-mini span { display: inline-flex; gap: .45rem; align-items: center; font-weight: 600; }
    body.page-membership .contact-mini i { color: var(--primary-red); }

    body.page-membership .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); }
    body.page-membership .field { display: grid; gap: .35rem; }
    body.page-membership .field label { font-size: .9rem; font-weight: 700; }
    body.page-membership .field input, body.page-membership .field select, body.page-membership .field textarea {
      border: 1px solid #ddd;
      border-radius: var(--radius-md);
      padding: .72rem .8rem;
      font-size: .95rem;
    }
    body.page-membership .field input:focus, body.page-membership .field select:focus, body.page-membership .field textarea:focus {
      border-color: var(--primary-red);
      outline: none;
      box-shadow: 0 0 0 3px rgba(227,30,36,.12);
    }
    body.page-membership .field.full { grid-column: 1 / -1; }
    body.page-membership .field textarea { resize: vertical; min-height: 110px; }
    body.page-membership .form-note { color: var(--neutral-gray); font-size: .84rem; margin: .35rem 0 .2rem; }

    body.page-membership .cta-section {
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: #fff;
      padding: var(--space-3xl) 0;
      position: relative;
      overflow: hidden;
    }
    body.page-membership .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.24), transparent 48%);
    }
    body.page-membership .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-xl);
    }
    body.page-membership .cta-title { color: #fff; font-size: clamp(1.75rem,4vw,2.5rem); max-width: 690px; }
    body.page-membership .cta-button {
      background: #fff;
      color: var(--primary-red);
      border-radius: var(--radius-full);
      padding: .9rem 1.35rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      transition: var(--transition);
    }
    body.page-membership .cta-button:hover { background: var(--primary-yellow); color: var(--neutral-dark); transform: translateY(-2px); }

    body.page-membership .footer { background: #111; color: #d7d7d7; }
    body.page-membership .footer-main {
      padding: var(--space-3xl) 0 var(--space-2xl);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--space-xl);
    }
    body.page-membership .footer-logo { color: #fff; font-weight: 800; font-family: 'Montserrat', sans-serif; margin-bottom: .5rem; }
    body.page-membership .footer-description { color: #c7c7c7; font-size: .94rem; margin-bottom: .8rem; }
    body.page-membership .footer h3 { color: #fff; margin-bottom: .8rem; }
    body.page-membership .footer-links, body.page-membership .footer-contact { list-style: none; display: grid; gap: .5rem; }
    body.page-membership .footer-links a, body.page-membership .footer-contact li { color: #d2d2d2; display: inline-flex; gap: .4rem; align-items: flex-start; font-size: .92rem; }
    body.page-membership .footer-links a:hover { color: var(--primary-yellow); }
    body.page-membership .footer-badges { display: flex; gap: .45rem; flex-wrap: wrap; }
    body.page-membership .badge {
      background: rgba(255,194,14,.2);
      color: var(--primary-yellow);
      border-radius: var(--radius-full);
      padding: .28rem .68rem;
      font-size: .74rem;
      font-weight: 700;
    }
    body.page-membership .newsletter-form { display: flex; gap: .5rem; margin-bottom: .8rem; }
    body.page-membership .newsletter-form input {
      flex: 1;
      border-radius: var(--radius-md);
      border: 1px solid #333;
      background: #1c1c1c;
      color: #fff;
      padding: .65rem .75rem;
    }
    body.page-membership .newsletter-form button {
      border: none;
      border-radius: var(--radius-md);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      padding: .65rem .85rem;
      font-weight: 700;
    }
    body.page-membership .social-links { display: flex; gap: .55rem; }
    body.page-membership .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    body.page-membership .social-links a:hover { background: var(--primary-red); }

    body.page-membership .footer-bottom { border-top: 1px solid #242424; padding: var(--space-md) 0; color: #acacac; font-size: .85rem; }
    body.page-membership .footer-bottom-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
    body.page-membership .footer-bottom-links { display: inline-flex; gap: .9rem; flex-wrap: wrap; }
    body.page-membership .footer-bottom-links a:hover { color: var(--primary-yellow); }

    body.page-membership .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: #fff;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: var(--transition);
      z-index: 999;
    }
    body.page-membership .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    body.page-membership .scroll-to-top:hover { background: var(--primary-yellow); color: var(--neutral-dark); }

    body.page-membership .reveal:not([data-aos]) { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
    body.page-membership .reveal.active:not([data-aos]) { opacity: 1; transform: translateY(0); }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    body.page-membership *::selection { background: rgba(227, 30, 36, 0.2); color: var(--neutral-black); }

    body.page-membership a:focus-visible, body.page-membership button:focus-visible, body.page-membership input:focus-visible, body.page-membership select:focus-visible, body.page-membership textarea:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.2), 0 0 0 6px rgba(255, 194, 14, 0.16);
      border-radius: var(--radius-sm);
    }

    body.page-membership section[id] { scroll-margin-top: 120px; }

    @media (prefers-reduced-motion: reduce) {
      body.page-membership *, body.page-membership *::before, body.page-membership *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1080px) {
      body.page-membership .hero-layout, body.page-membership .profile-grid, body.page-membership .docs-layout, body.page-membership .application-grid { grid-template-columns: 1fr; }
      body.page-membership .doc-tabs { position: static; }
    }
    @media (max-width: 1024px) {
      body.page-membership .header-content { gap: var(--space-md); }
      body.page-membership .logo { font-size: 1.5rem; }
      body.page-membership nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: #fff;
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        padding: var(--space-2xl) var(--space-lg);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--space-lg);
        overflow-y: auto;
        transition: var(--transition);
      }
      body.page-membership nav.active { right: 0; }
      body.page-membership .nav-menu {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
        align-items: flex-start;
      }
      body.page-membership .nav-menu li, body.page-membership .nav-menu a { width: 100%; }
      body.page-membership .nav-menu a {
        padding: var(--space-md) 0;
        font-size: 1rem;
      }
      body.page-membership .hamburger {
        display: flex;
        z-index: 1002;
      }
      body.page-membership .header-cta {
        margin-left: 0;
        margin-top: var(--space-lg);
        flex-direction: column;
        width: 100%;
      }
      body.page-membership .header-cta .btn { width: 100%; }
      body.page-membership .main-header.scrolled .hamburger span { background: #fff; }
      body.page-membership .process-visual.process-visual--profile {
        width: min(640px, 94%);
        margin: -4rem auto -6.2rem;
      }
    }
    @media (max-width: 768px) {
      body.page-membership .container { padding: 0 var(--space-md); }
      body.page-membership .section { padding: var(--space-2xl) 0; }
      body.page-membership .process-visual { width: min(700px, 98%); margin: -0.35rem auto -1.2rem; }
      body.page-membership .process-visual.process-visual--profile {
        width: min(520px, 92%);
        margin: -4rem auto -6rem;
      }
      body.page-membership .profile-switch { grid-template-columns: 1fr 1fr; }
      body.page-membership .field-grid { grid-template-columns: 1fr; }
      body.page-membership .newsletter-form { flex-direction: column; }
    }
    @media (max-width: 560px) {
      body.page-membership .top-bar .container, body.page-membership .top-links { flex-direction: column; align-items: flex-start; gap: .35rem; }
      body.page-membership .logo { font-size: 1.45rem; }
      body.page-membership .process-visual { width: min(460px, 100%); margin: 0 auto -0.9rem; }
      body.page-membership .process-visual.process-visual--profile {
        width: min(340px, 90%);
        margin: -4rem auto -4rem;
      }
      body.page-membership .profile-switch { grid-template-columns: 1fr; }
    }

/* news.html */
body.page-news {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 30px rgba(0,0,0,0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-news * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body.page-news {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-news h1, body.page-news h2, body.page-news h3, body.page-news h4, body.page-news h5, body.page-news h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-news a { text-decoration: none; color: inherit; transition: var(--transition-base); }
    body.page-news button, body.page-news input, body.page-news select, body.page-news textarea { font-family: var(--font-body); }
    body.page-news button { border: none; cursor: pointer; transition: var(--transition-base); }

    body.page-news .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }
    body.page-news .section { padding: var(--spacing-3xl) 0; }
    body.page-news .section.alt { background: var(--neutral-light); }

    body.page-news .section-header { text-align: center; margin-bottom: var(--spacing-2xl); }
    body.page-news .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }
    body.page-news .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }
    body.page-news .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.08rem;
      max-width: 760px;
      margin: 0 auto;
    }

    body.page-news .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }
    body.page-news .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }
    body.page-news .top-bar-left, body.page-news .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }
    body.page-news .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }
    body.page-news .top-bar a:hover { color: var(--primary-yellow); }

    body.page-news .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }
    body.page-news .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-news .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }
    body.page-news .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.page-news .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-news nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }
    body.page-news .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }
    body.page-news .nav-menu li { position: relative; }
    body.page-news .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }
    body.page-news .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }
    body.page-news .nav-menu a:hover::after, body.page-news .nav-menu a.active::after { width: 100%; }
    body.page-news .nav-menu a:hover { color: var(--primary-red); }
    body.page-news .main-header.scrolled .nav-menu a { color: var(--neutral-white); }
    body.page-news .main-header.scrolled .nav-menu a:hover { color: var(--primary-yellow); }

    body.page-news .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.page-news .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-news .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }
    body.page-news .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }
    body.page-news .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    body.page-news .hamburger.active span:nth-child(2) { opacity: 0; }
    body.page-news .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    body.page-news .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    body.page-news .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }
    body.page-news .btn:hover::before { left: 0; }

    body.page-news .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }
    body.page-news .btn-primary::before { background: var(--primary-red); }
    body.page-news .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-news .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }
    body.page-news .btn-outline::before { background: var(--primary-red); }
    body.page-news .btn-outline:hover { color: var(--neutral-white); border-color: var(--primary-red); }

    body.page-news .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }
    body.page-news .btn-light::before { background: var(--primary-yellow); }
    body.page-news .btn-light:hover { color: var(--neutral-dark); }

    body.page-news .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(120deg, rgba(106, 27, 154, 0.72) 0%, rgba(227, 30, 36, 0.68) 45%, rgba(255, 194, 14, 0.62) 100%),
        url('../img/actualite.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }
    body.page-news .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }
    body.page-news .page-hero::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      right: -120px;
      bottom: -120px;
    }

    body.page-news .hero-content { position: relative; z-index: 1; }
    body.page-news .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-news .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-news .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: var(--spacing-sm);
    }

    body.page-news .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-news .hero-subtitle {
      font-size: 1.12rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.92);
      max-width: 660px;
    }

    body.page-news .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-news .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-news .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-news .panel-item:last-child { margin-bottom: 0; }

    body.page-news .panel-icon {
      font-size: 1.65rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-news .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-news .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.94rem;
    }

    body.page-news .news-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-news .edu-grid, body.page-news .download-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-news .news-card, body.page-news .edu-card, body.page-news .download-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      transition: var(--transition-base);
      border-top: 5px solid var(--primary-yellow);
      position: relative;
    }

    body.page-news .news-card:nth-child(even), body.page-news .edu-card:nth-child(even), body.page-news .download-card:nth-child(even) {
      border-top-color: var(--primary-red);
    }

    body.page-news .news-card:hover, body.page-news .edu-card:hover, body.page-news .download-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-news .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      border-radius: var(--radius-full);
      background: rgba(227, 30, 36, 0.1);
      color: var(--primary-red);
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.3rem 0.72rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-news .news-card h3, body.page-news .edu-card h3, body.page-news .download-card h3 {
      font-size: 1.12rem;
      margin-bottom: 0.45rem;
    }

    body.page-news .news-card p, body.page-news .edu-card p, body.page-news .download-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
    }

    body.page-news .news-card {
      display: flex;
      flex-direction: column;
    }

    body.page-news .news-card-media {
      border-radius: 0.8rem;
      overflow: hidden;
      margin: calc(var(--spacing-xl) * -1) calc(var(--spacing-xl) * -1) var(--spacing-md);
      border: 10px solid #1b1b1b;
      background: #111;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    body.page-news .catalog-board {
      display: grid;
      gap: 2px;
      background: #1b1b1b;
      height: 320px;
      grid-auto-rows: minmax(0, 1fr);
      align-content: stretch;
      align-items: stretch;
    }

    body.page-news .catalog-board--count-1 {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr);
    }

    body.page-news .catalog-board--count-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: minmax(0, 1fr);
    }

    body.page-news .catalog-board--count-3,
    body.page-news .catalog-board--count-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    body.page-news .catalog-board--count-5 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    body.page-news .catalog-board--count-6 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    body.page-news .catalog-tile {
      margin: 0;
      position: relative;
      overflow: hidden;
      background: #e9e9e9;
      min-width: 0;
      min-height: 0;
    }

    body.page-news .catalog-board--count-1 .catalog-tile:nth-child(1) {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
    }

    body.page-news .catalog-board--count-2 .catalog-tile:nth-child(1) {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-2 .catalog-tile:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-3 .catalog-tile:nth-child(1) {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }

    body.page-news .catalog-board--count-3 .catalog-tile:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-3 .catalog-tile:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-4 .catalog-tile:nth-child(1) {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-4 .catalog-tile:nth-child(2) {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-4 .catalog-tile:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-4 .catalog-tile:nth-child(4) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-5 .catalog-tile:nth-child(1) {
      grid-column: 1 / 4;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-5 .catalog-tile:nth-child(2) {
      grid-column: 4 / 7;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-5 .catalog-tile:nth-child(3) {
      grid-column: 1 / 3;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-5 .catalog-tile:nth-child(4) {
      grid-column: 3 / 5;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-5 .catalog-tile:nth-child(5) {
      grid-column: 5 / 7;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(1) {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(3) {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(4) {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(5) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-board--count-6 .catalog-tile:nth-child(6) {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
    }

    body.page-news .catalog-media-item {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 420ms ease, filter 420ms ease;
      filter: saturate(1.06) contrast(1.02);
    }

    body.page-news .news-card:hover .catalog-media-item {
      transform: scale(1.03);
      filter: saturate(1.12) contrast(1.06);
    }

    body.page-news .catalog-tile-more::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.55));
    }

    body.page-news .catalog-more {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: clamp(1.4rem, 2.2vw, 2rem);
      font-weight: 800;
      letter-spacing: 0.03em;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }

    body.page-news .news-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1rem;
      margin-bottom: var(--spacing-sm);
      color: #6f6f6f;
      font-size: 0.82rem;
      font-weight: 600;
    }

    body.page-news .news-meta span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    body.page-news .news-detail-btn {
      margin-top: auto;
      align-self: flex-start;
    }

    body.page-news .news-detail-modal .modal-dialog {
      max-width: min(880px, calc(100% - 0.5rem));
      margin: 0.25rem auto;
    }

    body.page-news .news-detail-modal .modal-content {
      border: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      max-height: 78vh;
    }

    body.page-news .news-detail-modal .modal-header {
      border-bottom: 1px solid #efefef;
      background: #fff;
      align-items: flex-start;
      padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
    }

    body.page-news .news-detail-modal .modal-body {
      padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    }

    body.page-news .news-detail-modal .modal-header .close {
      opacity: 1;
      color: var(--primary-red);
      text-shadow: none;
    }

    body.page-news .news-detail-modal .modal-title {
      margin: 0.35rem 0 0.25rem;
      font-size: 1.35rem;
      color: var(--neutral-black);
    }

    body.page-news .news-detail-chip {
      margin-bottom: 0;
    }

    body.page-news .news-detail-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem 1rem;
      color: #676767;
      font-size: 0.88rem;
      font-weight: 600;
    }

    body.page-news .news-detail-meta span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    body.page-news .news-detail-carousel {
      background: #0f0f0f;
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: var(--spacing-lg);
    }

    body.page-news .news-detail-media-item {
      width: 100%;
      height: clamp(240px, 48vw, 460px);
      object-fit: cover;
      display: block;
    }

    body.page-news .news-detail-carousel .carousel-indicators {
      margin-bottom: 0.35rem;
    }

    body.page-news .news-detail-carousel .carousel-indicators li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, 0.55);
    }

    body.page-news .news-detail-carousel .carousel-indicators .active {
      background: var(--primary-yellow);
    }

    body.page-news .news-detail-content {
      padding-inline: 0.2rem;
    }

    body.page-news .news-detail-content p {
      color: #4a4a4a;
      line-height: 1.75;
      margin-bottom: var(--spacing-md);
    }

    body.page-news .news-detail-content p:last-child {
      margin-bottom: 0;
    }

    body.page-news .faq-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
      gap: var(--spacing-xl);
      align-items: stretch;
    }

    body.page-news .faq-shell {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-news .faq-list {
      display: grid;
      gap: var(--spacing-md);
    }

    body.page-news .faq-media {
      margin: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #fff;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
      border: 1px solid #ececec;
      justify-self: stretch;
      width: 100%;
      min-height: 100%;
    }

    body.page-news .faq-media img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 420px;
      object-fit: contain;
    }

    body.page-news .faq-item {
      border-radius: var(--radius-md);
      border: 1px solid #efefef;
      background: #fff;
      overflow: hidden;
    }

    body.page-news .faq-header {
      width: 100%;
      text-align: left;
      padding: var(--spacing-md) var(--spacing-lg);
      background: #fff;
      color: var(--neutral-dark);
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
    }

    body.page-news .faq-header i {
      color: var(--primary-red);
      transition: var(--transition-fast);
    }

    body.page-news .faq-item.active .faq-header i {
      transform: rotate(180deg);
    }

    body.page-news .faq-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--transition-base), padding var(--transition-base);
      padding: 0 var(--spacing-lg);
      color: var(--neutral-gray);
      font-size: 0.95rem;
      background: var(--neutral-light);
    }

    body.page-news .faq-item.active .faq-body {
      max-height: 200px;
      padding: var(--spacing-md) var(--spacing-lg);
    }

    body.page-news .cta-section {
      position: relative;
      padding: var(--spacing-3xl) 0;
      overflow: hidden;
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: var(--neutral-white);
    }

    body.page-news .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.24), transparent 48%);
      opacity: 0.8;
    }

    body.page-news .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xl);
      flex-wrap: wrap;
    }

    body.page-news .cta-title {
      color: var(--neutral-white);
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      max-width: 720px;
    }

    body.page-news .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 1.4rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-news .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-news .footer {
      background: #111;
      color: #d7d7d7;
    }

    body.page-news .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-news .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-news .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-news .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-news .footer-links, body.page-news .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-news .footer-links a, body.page-news .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-news .footer-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-news .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-news .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-news .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-news .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-news .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-news .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-news .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-news .social-links a:hover {
      background: var(--primary-red);
    }

    body.page-news .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-news .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-news .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-news .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-news .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-news .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-news .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-news .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-news .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1024px) {
      body.page-news .header-content { gap: var(--spacing-md); }
      body.page-news .logo { font-size: 1.5rem; }
      body.page-news .hero-layout { grid-template-columns: 1fr; }
      body.page-news .hero-cta { justify-content: center; }

      body.page-news nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-news nav.active { right: 0; }

      body.page-news .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-news .nav-menu li, body.page-news .nav-menu a { width: 100%; }

      body.page-news .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-news .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-news .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-news .header-cta .btn { width: 100%; }
    }

    @media (max-width: 768px) {
      body.page-news .container { padding: 0 var(--spacing-md); }
      body.page-news .section { padding: var(--spacing-2xl) 0; }
      body.page-news .cta-content { flex-direction: column; align-items: flex-start; }
      body.page-news .newsletter-form { flex-direction: column; }
      body.page-news .news-grid { grid-template-columns: 1fr; }
      body.page-news .faq-layout {
        grid-template-columns: 1fr;
      }
      body.page-news .faq-media {
        justify-self: center;
        max-width: 560px;
        min-height: 0;
      }
      body.page-news .faq-media img {
        min-height: 300px;
      }
      body.page-news .news-card-media {
        margin: calc(var(--spacing-xl) * -1) calc(var(--spacing-xl) * -1) 0.85rem;
      }
      body.page-news .catalog-board {
        height: 254px;
      }
      body.page-news .news-detail-modal .modal-header {
        padding: var(--spacing-md);
      }
      body.page-news .news-detail-modal .modal-body {
        padding: var(--spacing-md);
      }
      body.page-news .news-detail-modal .modal-dialog {
        max-width: calc(100% - 0.25rem);
        margin: 0.125rem auto;
      }
    }

    @media (max-width: 560px) {
      body.page-news .news-card-media {
        border-width: 7px;
      }
      body.page-news .catalog-board {
        height: 220px;
      }
      body.page-news .top-bar .container, body.page-news .top-bar-left, body.page-news .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }
      body.page-news .logo { font-size: 1.35rem; }
    }

/* contact.html */
body.page-contact {
      --primary-yellow: #FFC20E;
      --primary-red: #E31E24;
      --secondary-orange: #FF9500;
      --accent-violet: #6A1B9A;
      --neutral-white: #FFFFFF;
      --neutral-light: #F8F8F8;
      --neutral-gray: #6B6B6B;
      --neutral-dark: #2C2C2C;
      --neutral-black: #1A1A1A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 30px rgba(0,0,0,0.15);
      --radius-sm: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 1rem;
      --radius-xl: 1.5rem;
      --radius-full: 9999px;
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --transition-fast: 150ms ease-in-out;
      --transition-base: 300ms ease-in-out;
      --font-heading: 'Montserrat', 'Roboto', sans-serif;
      --font-body: 'Open Sans', 'Lato', sans-serif;
    }

    body.page-contact * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body.page-contact {
      font-family: var(--font-body);
      line-height: 1.6;
      color: var(--neutral-dark);
      background: var(--neutral-white);
      overflow-x: hidden;
    }

    body.page-contact h1, body.page-contact h2, body.page-contact h3, body.page-contact h4, body.page-contact h5, body.page-contact h6 {
      font-family: var(--font-heading);
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-black);
    }

    body.page-contact a { text-decoration: none; color: inherit; transition: var(--transition-base); }
    body.page-contact img { max-width: 100%; height: auto; display: block; }
    body.page-contact button, body.page-contact input, body.page-contact select, body.page-contact textarea { font-family: var(--font-body); }
    body.page-contact button { border: none; cursor: pointer; transition: var(--transition-base); }

    body.page-contact .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--spacing-lg);
    }

    body.page-contact .section { padding: var(--spacing-3xl) 0; }
    body.page-contact .section.alt { background: var(--neutral-light); }

    body.page-contact .section-header { text-align: center; margin-bottom: var(--spacing-2xl); }
    body.page-contact .section-title {
      margin-bottom: var(--spacing-md);
      position: relative;
      display: inline-block;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
    }
    body.page-contact .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
      border-radius: var(--radius-full);
    }
    body.page-contact .section-subtitle {
      color: var(--neutral-gray);
      font-size: 1.08rem;
      max-width: 760px;
      margin: 0 auto;
    }

    body.page-contact .top-bar {
      background: var(--primary-red);
      color: var(--neutral-white);
      padding: var(--spacing-sm) 0;
      font-size: 0.875rem;
    }
    body.page-contact .top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }
    body.page-contact .top-bar-left, body.page-contact .top-bar-right {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
      flex-wrap: wrap;
    }
    body.page-contact .top-bar a {
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-xs);
    }
    body.page-contact .top-bar a:hover { color: var(--primary-yellow); }

    body.page-contact .main-header {
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: var(--transition-base);
    }
    body.page-contact .main-header.scrolled {
      box-shadow: var(--shadow-lg);
      background: linear-gradient(90deg, #6A1B9A 0%, #E31E24 40%, #FFC20E 75%, #FF9500 100%);
    }

    body.page-contact .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-lg) 0;
      gap: var(--spacing-xl);
      min-height: 80px;
    }
    body.page-contact .logo {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary-red);
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.page-contact .logo span:first-child {
      color: var(--primary-yellow);
      font-family: 'Cinzel Decorative', 'Montserrat', serif;
    }

    body.page-contact nav {
      display: flex;
      align-items: center;
      gap: var(--spacing-xl);
      flex: 1;
      justify-content: center;
      min-width: 0;
    }
    body.page-contact .nav-menu {
      display: flex;
      list-style: none;
      gap: var(--spacing-md);
      align-items: center;
      justify-content: center;
      margin: 0;
      white-space: nowrap;
    }
    body.page-contact .nav-menu li { position: relative; }
    body.page-contact .nav-menu a {
      color: var(--neutral-dark);
      font-weight: 600;
      position: relative;
      padding: var(--spacing-sm) 0;
      display: inline-block;
      font-size: 0.95rem;
    }
    body.page-contact .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-yellow);
      transition: var(--transition-base);
    }
    body.page-contact .nav-menu a:hover::after, body.page-contact .nav-menu a.active::after { width: 100%; }
    body.page-contact .nav-menu a:hover { color: var(--primary-red); }
    body.page-contact .main-header.scrolled .nav-menu a { color: var(--neutral-white); }
    body.page-contact .main-header.scrolled .nav-menu a:hover { color: var(--primary-yellow); }

    body.page-contact .header-cta {
      display: flex;
      gap: var(--spacing-md);
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.page-contact .header-cta .btn {
      padding: 0.65rem 1.25rem;
      font-size: 0.95rem;
    }

    body.page-contact .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: var(--spacing-sm);
      background: transparent;
    }
    body.page-contact .hamburger span {
      width: 25px;
      height: 3px;
      background: var(--neutral-dark);
      transition: var(--transition-base);
      border-radius: var(--radius-sm);
    }
    body.page-contact .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    body.page-contact .hamburger.active span:nth-child(2) { opacity: 0; }
    body.page-contact .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    body.page-contact .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 0.95rem;
      transition: var(--transition-base);
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    body.page-contact .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      transition: var(--transition-base);
      z-index: -1;
    }
    body.page-contact .btn:hover::before { left: 0; }

    body.page-contact .btn-primary {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      box-shadow: 0 10px 28px rgba(255, 194, 14, 0.35);
    }
    body.page-contact .btn-primary::before { background: var(--primary-red); }
    body.page-contact .btn-primary:hover {
      color: var(--neutral-white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
    }

    body.page-contact .btn-outline {
      background: transparent;
      color: var(--primary-red);
      border: 2px solid var(--primary-red);
    }
    body.page-contact .btn-outline::before { background: var(--primary-red); }
    body.page-contact .btn-outline:hover { color: var(--neutral-white); border-color: var(--primary-red); }

    body.page-contact .btn-light {
      background: var(--neutral-white);
      color: var(--primary-red);
      box-shadow: var(--shadow-md);
    }
    body.page-contact .btn-light::before { background: var(--primary-yellow); }
    body.page-contact .btn-light:hover { color: var(--neutral-dark); }

    body.page-contact .page-hero {
      position: relative;
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
      background-image:
        linear-gradient(120deg, rgba(106, 27, 154, 0.72) 0%, rgba(227, 30, 36, 0.68) 45%, rgba(255, 194, 14, 0.62) 100%),
        url('../img/contact.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: var(--neutral-white);
      overflow: hidden;
    }

    body.page-contact .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.2), transparent 45%),
                  radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.2), transparent 52%);
      opacity: 0.86;
    }

    body.page-contact .page-hero::after {
      content: '';
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      right: -120px;
      bottom: -120px;
    }

    body.page-contact .hero-content {
      position: relative;
      z-index: 1;
    }

    body.page-contact .breadcrumb {
      display: inline-flex;
      gap: var(--spacing-sm);
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-size: 0.85rem;
      margin-bottom: var(--spacing-xl);
    }

    body.page-contact .hero-layout {
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 0.9fr);
      gap: var(--spacing-2xl);
      align-items: center;
    }

    body.page-contact .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 0.15rem;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: var(--spacing-sm);
    }

    body.page-contact .hero-title {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      margin-bottom: var(--spacing-lg);
      color: var(--neutral-white);
    }

    body.page-contact .hero-subtitle {
      font-size: 1.12rem;
      margin-bottom: var(--spacing-xl);
      color: rgba(255, 255, 255, 0.92);
      max-width: 660px;
    }

    body.page-contact .hero-cta {
      display: flex;
      gap: var(--spacing-md);
      flex-wrap: wrap;
    }

    body.page-contact .hero-panel {
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: var(--radius-xl);
      padding: var(--spacing-2xl);
      box-shadow: var(--shadow-xl);
      backdrop-filter: blur(8px);
    }

    body.page-contact .panel-item {
      display: flex;
      gap: var(--spacing-md);
      align-items: flex-start;
      margin-bottom: var(--spacing-lg);
    }

    body.page-contact .panel-item:last-child { margin-bottom: 0; }

    body.page-contact .panel-icon {
      font-size: 1.65rem;
      color: var(--primary-yellow);
      flex-shrink: 0;
    }

    body.page-contact .panel-item h4 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-xs);
    }

    body.page-contact .panel-item p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.94rem;
    }

    body.page-contact .contact-channels {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-contact .channel-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      text-align: center;
      border-top: 4px solid var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-contact .channel-card:nth-child(2) { border-top-color: var(--secondary-orange); }
    body.page-contact .channel-card:nth-child(3) { border-top-color: var(--primary-red); }
    body.page-contact .channel-card:nth-child(4) { border-top-color: var(--accent-violet); }

    body.page-contact .channel-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-contact .channel-icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      margin: 0 auto var(--spacing-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      color: var(--primary-red);
      background: rgba(227, 30, 36, 0.1);
    }

    body.page-contact .channel-card h3 {
      margin-bottom: 0.4rem;
      font-size: 1.12rem;
    }

    body.page-contact .channel-card p {
      color: var(--neutral-gray);
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-contact .contact-shell {
      display: grid;
      grid-template-columns: minmax(300px, 1.08fr) minmax(260px, 0.92fr);
      gap: var(--spacing-xl);
    }

    body.page-contact .card {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: var(--spacing-2xl);
    }

    body.page-contact .card h3 {
      margin-bottom: var(--spacing-sm);
    }

    body.page-contact .card-note {
      color: var(--neutral-gray);
      font-size: 0.95rem;
      margin-bottom: var(--spacing-lg);
    }

    body.page-contact .contact-form {
      display: grid;
      gap: var(--spacing-md);
    }

    body.page-contact .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-md);
    }

    body.page-contact .field {
      display: grid;
      gap: 0.42rem;
    }

    body.page-contact .field.full { grid-column: 1 / -1; }

    body.page-contact .field label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--neutral-dark);
    }

    body.page-contact .field input, body.page-contact .field select, body.page-contact .field textarea {
      border: 1px solid #ddd;
      border-radius: var(--radius-md);
      padding: 0.72rem 0.8rem;
      font-size: 0.95rem;
      color: var(--neutral-dark);
      background: #fff;
      transition: var(--transition-base);
    }

    body.page-contact .field textarea {
      min-height: 120px;
      resize: vertical;
    }

    body.page-contact .field input:focus, body.page-contact .field select:focus, body.page-contact .field textarea:focus {
      border-color: var(--primary-red);
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.12);
    }

    body.page-contact .form-privacy {
      font-size: 0.84rem;
      color: var(--neutral-gray);
      margin-top: 0.2rem;
    }

    body.page-contact .contact-info-list {
      list-style: none;
      display: grid;
      gap: 0.75rem;
      margin: var(--spacing-md) 0 var(--spacing-lg);
    }

    body.page-contact .contact-info-list li {
      display: flex;
      gap: 0.58rem;
      align-items: flex-start;
      color: var(--neutral-dark);
      font-size: 0.95rem;
    }

    body.page-contact .contact-info-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-contact .social-buttons {
      display: flex;
      gap: 0.65rem;
      flex-wrap: wrap;
    }

    body.page-contact .social-buttons a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--neutral-light);
      color: var(--primary-red);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(227, 30, 36, 0.2);
    }

    body.page-contact .social-buttons a:hover {
      background: var(--primary-red);
      color: var(--neutral-white);
    }

    body.page-contact .agency-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-lg);
    }

    body.page-contact .agency-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      border-top: 4px solid var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-contact .agency-card:nth-child(even) { border-top-color: var(--primary-red); }
    body.page-contact .agency-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

    body.page-contact .agency-card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.45rem;
    }

    body.page-contact .agency-meta {
      color: var(--neutral-gray);
      font-size: 0.93rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-contact .map-card {
      background: var(--neutral-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }

    body.page-contact .map-frame {
      width: 100%;
      border: 0;
      min-height: 360px;
      display: block;
    }

    body.page-contact .map-footer {
      padding: var(--spacing-lg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-md);
      flex-wrap: wrap;
      background: var(--neutral-light);
      border-top: 1px solid #ececec;
    }

    body.page-contact .faq-list {
      display: grid;
      gap: var(--spacing-md);
    }

    body.page-contact .faq-item {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-md) var(--spacing-lg);
    }

    body.page-contact .faq-item summary {
      list-style: none;
      cursor: pointer;
      font-weight: 700;
      color: var(--neutral-dark);
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
    }

    body.page-contact .faq-item summary::-webkit-details-marker { display: none; }

    body.page-contact .faq-item summary i {
      color: var(--primary-red);
      transition: var(--transition-fast);
    }

    body.page-contact .faq-item[open] summary i { transform: rotate(180deg); }

    body.page-contact .faq-answer {
      margin-top: 0.7rem;
      color: var(--neutral-gray);
      font-size: 0.95rem;
    }

    body.page-contact .cta-section {
      position: relative;
      padding: var(--spacing-3xl) 0;
      overflow: hidden;
      background: linear-gradient(130deg, #1f1f1f 0%, #b71c1c 45%, #ffc20e 100%);
      color: var(--neutral-white);
    }

    body.page-contact .cta-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.24), transparent 48%);
      opacity: 0.8;
    }

    body.page-contact .cta-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-xl);
      flex-wrap: wrap;
    }

    body.page-contact .cta-title {
      color: var(--neutral-white);
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      max-width: 720px;
    }

    body.page-contact .cta-button {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      background: var(--neutral-white);
      color: var(--primary-red);
      padding: 0.9rem 1.4rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-base);
    }

    body.page-contact .cta-button:hover {
      transform: translateY(-3px);
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-contact .footer {
      background: #111;
      color: #d7d7d7;
    }

    body.page-contact .footer-main {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-xl);
      padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }

    body.page-contact .footer-logo {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      color: var(--neutral-white);
      font-size: 1.2rem;
      margin-bottom: var(--spacing-sm);
    }

    body.page-contact .footer-description {
      color: #c7c7c7;
      margin-bottom: var(--spacing-md);
      font-size: 0.94rem;
    }

    body.page-contact .footer h3 {
      color: var(--neutral-white);
      margin-bottom: var(--spacing-md);
      font-size: 1.05rem;
    }

    body.page-contact .footer-links, body.page-contact .footer-contact {
      list-style: none;
      display: grid;
      gap: 0.55rem;
    }

    body.page-contact .footer-links a, body.page-contact .footer-contact li {
      color: #d2d2d2;
      font-size: 0.93rem;
      display: inline-flex;
      gap: 0.45rem;
      align-items: flex-start;
    }

    body.page-contact .footer-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-contact .footer-badges {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    body.page-contact .badge {
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-full);
      padding: 0.3rem 0.7rem;
      background: rgba(255, 194, 14, 0.2);
      color: var(--primary-yellow);
      font-size: 0.75rem;
      font-weight: 700;
    }

    body.page-contact .newsletter-form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: var(--spacing-md);
    }

    body.page-contact .newsletter-form input {
      flex: 1;
      min-width: 0;
      border: 1px solid #333;
      border-radius: var(--radius-md);
      background: #1c1c1c;
      color: #fff;
      padding: 0.65rem 0.75rem;
    }

    body.page-contact .newsletter-form button {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
      border-radius: var(--radius-md);
      border: none;
      font-weight: 700;
      padding: 0.65rem 0.85rem;
    }

    body.page-contact .social-links {
      display: flex;
      gap: 0.55rem;
    }

    body.page-contact .social-links a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #262626;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.page-contact .social-links a:hover {
      background: var(--primary-red);
    }

    body.page-contact .footer-bottom {
      border-top: 1px solid #242424;
      padding: var(--spacing-md) 0;
      color: #acacac;
      font-size: 0.85rem;
    }

    body.page-contact .footer-bottom-content {
      display: flex;
      justify-content: space-between;
      gap: var(--spacing-md);
      align-items: center;
      flex-wrap: wrap;
    }

    body.page-contact .footer-bottom-links {
      display: inline-flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }

    body.page-contact .footer-bottom-links a:hover {
      color: var(--primary-yellow);
    }

    body.page-contact .scroll-to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--primary-red);
      color: var(--neutral-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: var(--transition-base);
      z-index: 999;
    }

    body.page-contact .scroll-to-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    body.page-contact .scroll-to-top:hover {
      background: var(--primary-yellow);
      color: var(--neutral-dark);
    }

    body.page-contact .reveal:not([data-aos]) {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    body.page-contact .reveal.active:not([data-aos]) {
      opacity: 1;
      transform: translateY(0);
    }

    body.page-contact *::selection {
      background: rgba(227, 30, 36, 0.2);
      color: var(--neutral-black);
    }

    body.page-contact a:focus-visible, body.page-contact button:focus-visible, body.page-contact input:focus-visible, body.page-contact select:focus-visible, body.page-contact textarea:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.2), 0 0 0 6px rgba(255, 194, 14, 0.16);
      border-radius: var(--radius-sm);
    }

    body.page-contact section[id] {
      scroll-margin-top: 120px;
    }

    @media (prefers-reduced-motion: reduce) {
      body.page-contact *, body.page-contact *::before, body.page-contact *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 1024px) {
      body.page-contact .header-content { gap: var(--spacing-md); }
      body.page-contact .logo { font-size: 1.5rem; }

      body.page-contact .hero-layout, body.page-contact .contact-shell { grid-template-columns: 1fr; }

      body.page-contact .hero-cta { justify-content: center; }

      body.page-contact nav {
        position: fixed;
        top: calc(60px + 80px);
        right: -100%;
        width: 300px;
        height: calc(100vh - 140px);
        background: var(--neutral-white);
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        transition: var(--transition-base);
        z-index: 1001;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--spacing-lg);
        overflow-y: auto;
      }

      body.page-contact nav.active { right: 0; }

      body.page-contact .nav-menu {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
        align-items: flex-start;
      }

      body.page-contact .nav-menu li, body.page-contact .nav-menu a { width: 100%; }

      body.page-contact .nav-menu a {
        padding: var(--spacing-md) 0;
        font-size: 1rem;
      }

      body.page-contact .hamburger {
        display: flex;
        z-index: 1002;
      }

      body.page-contact .header-cta {
        margin-left: 0;
        margin-top: var(--spacing-lg);
        flex-direction: column;
        width: 100%;
      }

      body.page-contact .header-cta .btn { width: 100%; }
    }

    @media (max-width: 768px) {
      body.page-contact .container { padding: 0 var(--spacing-md); }
      body.page-contact .section { padding: var(--spacing-2xl) 0; }
      body.page-contact .field-grid { grid-template-columns: 1fr; }
      body.page-contact .cta-content { flex-direction: column; align-items: flex-start; }
      body.page-contact .newsletter-form { flex-direction: column; }
      body.page-contact .map-footer { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 560px) {
      body.page-contact .top-bar .container, body.page-contact .top-bar-left, body.page-contact .top-bar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      body.page-contact .logo { font-size: 1.35rem; }
    }

/* ===== Migrated Inline Page Styles ===== */

/* Inline styles migrated from index.html */
body.page-index .hero-title.hero-title--styled {
          color: #fff36d;
          display: inline-block;
          letter-spacing: 0.02em;
      }

      body.page-index .hero-subtitle {
          color: #000000;
          opacity: 1;
      }

      @supports ((-webkit-background-clip: text) or (background-clip: text)) {
          body.page-index .hero-title.hero-title--styled {
              background: linear-gradient(100deg, #0a0a0a 0%, #1b1b1b 28%, #4a0000 62%, #7a0000 100%);
              background-size: 240% 240%;
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              animation: fadeInUp 1s ease-out 0.2s both, heroTitleShine 3.2s ease-in-out infinite alternate;
          }
      }

      @keyframes heroTitleShine {
          0% { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
      }

/* Inline styles migrated from about.html */
body.page-about .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-about .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-about .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

/* Inline styles migrated from services.html */
body.page-services .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-services .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-services .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

/* Inline styles migrated from network.html */
body.page-network .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-network .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-network .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

    body.page-network .agency-card.is-coming-soon {
      background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
      border-top-color: #cfcfcf;
    }

    body.page-network .agency-status-note {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.55rem 0.85rem;
      border-radius: 999px;
      background: rgba(227, 30, 36, 0.08);
      color: #7a1014;
      font-weight: 700;
      font-size: 0.9rem;
    }

    body.page-network .map-footer .btn.is-disabled {
      pointer-events: none;
      opacity: 0.6;
      background: #ececec;
      color: #555555;
      border-color: #ececec;
    }

    body.page-network .agency-preview {
      position: relative;
      margin: 0;
      background: #f5f5f5;
      overflow: hidden;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.page-network .agency-preview img {
      display: block;
      width: 100%;
      height: clamp(220px, 34vw, 320px);
      object-fit: cover;
    }

    body.page-network .agency-preview figcaption {
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      padding: 0.8rem 1rem;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.68);
      color: #ffffff;
      font-size: 0.92rem;
      line-height: 1.45;
      backdrop-filter: blur(4px);
    }

/* Inline styles migrated from accounts.html */
body.page-accounts .page-hero {
      background:
        linear-gradient(rgba(15, 18, 30, 0.48), rgba(15, 18, 30, 0.58)),
        url('../img/account.png') center / cover no-repeat;
    }

    body.page-accounts .page-hero::before {
      background: linear-gradient(120deg, rgba(10, 14, 24, 0.16), rgba(10, 14, 24, 0.32));
      opacity: 1;
    }

    body.page-accounts .page-hero::after {
      content: none;
    }

    body.page-accounts .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-accounts .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-accounts .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

    body.page-accounts #types-comptes .account-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 767px) {
      body.page-accounts #types-comptes .account-grid {
        grid-template-columns: 1fr;
      }
    }

/* Inline styles migrated from financing.html */
body.page-financing .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-financing .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-financing .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

    body.page-financing .solutions-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-financing .solution-card {
      padding: var(--spacing-lg);
    }

    body.page-financing .solution-card-body {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(200px, 0.85fr);
      gap: var(--spacing-lg);
      align-items: stretch;
      height: 100%;
    }

    body.page-financing .solution-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    body.page-financing .solution-badge {
      position: static;
      display: inline-flex;
      align-self: flex-start;
      margin-bottom: var(--spacing-md);
    }

    body.page-financing .solution-media {
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
    }

    body.page-financing .solution-media img {
      width: 100%;
      height: 100%;
      min-height: 220px;
      object-fit: cover;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    @media (max-width: 991px) {
      body.page-financing .solutions-grid {
        grid-template-columns: 1fr;
      }

      body.page-financing .solution-card-body {
        grid-template-columns: 1fr;
      }

      body.page-financing .solution-media img {
        min-height: 200px;
      }
    }

/* Inline styles migrated from membership.html */
body.page-membership .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-membership .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-membership .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

/* Inline styles migrated from news.html */
body.page-news .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-news .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-news .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

/* Inline styles migrated from contact.html */
body.page-contact .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-contact .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-contact .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

/* Inline styles migrated from transfert.html */
body.page-transfer .page-hero .hero-cta .btn.btn-outline {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
    }

    body.page-transfer .page-hero .hero-cta .btn.btn-outline:hover,
    body.page-transfer .page-hero .hero-cta .btn.btn-outline:focus-visible {
      background: #e31e24;
      color: #ffffff;
      border-color: #e31e24;
    }

    body.page-transfer .operator-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-xl);
    }

    body.page-transfer .operator-card {
      background: var(--neutral-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      padding: var(--spacing-xl);
      border-top: 5px solid var(--primary-yellow);
      transition: var(--transition-base);
    }

    body.page-transfer .operator-card-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(150px, 0.7fr);
      gap: var(--spacing-lg);
      align-items: center;
    }

    body.page-transfer .operator-card:nth-child(even) {
      border-top-color: var(--primary-red);
    }

    body.page-transfer .operator-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
    }

    body.page-transfer .operator-head {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 1rem;
    }

    body.page-transfer .operator-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(227, 30, 36, 0.08);
      color: var(--primary-red);
      font-size: 1.2rem;
    }

    body.page-transfer .operator-card h3 {
      margin: 0;
      font-size: 1.15rem;
    }

    body.page-transfer .operator-copy p {
      margin-bottom: 0;
    }

    body.page-transfer .operator-logo-panel {
      min-height: 150px;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(255, 194, 14, 0.12), rgba(227, 30, 36, 0.08));
      border: 1px solid rgba(227, 30, 36, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    body.page-transfer .operator-logo-image {
      max-width: 100%;
      max-height: 88px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08));
    }

    body.page-transfer .operator-logo-fallback {
      width: 100%;
      min-height: 88px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #e31e24, #ffc20e);
      color: #ffffff;
      font-weight: 800;
      font-size: 1.4rem;
      letter-spacing: 0.08em;
      text-align: center;
      padding: 1rem;
      box-shadow: var(--shadow-md);
    }

    body.page-transfer .operator-list {
      list-style: none;
      display: grid;
      gap: 0.55rem;
      margin: 1rem 0 0;
      padding: 0;
    }

    body.page-transfer .operator-list li {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
      color: var(--neutral-dark);
    }

    body.page-transfer .operator-list i {
      color: var(--primary-red);
      margin-top: 0.2rem;
      flex-shrink: 0;
    }

    body.page-transfer .transfer-banner {
      background: linear-gradient(135deg, rgba(255, 194, 14, 0.14), rgba(227, 30, 36, 0.08));
      border: 1px solid rgba(227, 30, 36, 0.12);
      border-radius: var(--radius-xl);
      padding: var(--spacing-xl);
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--spacing-xl);
      align-items: center;
    }

    body.page-transfer .transfer-banner ul {
      list-style: none;
      margin: 1rem 0 0;
      padding: 0;
      display: grid;
      gap: 0.55rem;
    }

    body.page-transfer .transfer-banner li {
      display: flex;
      gap: 0.55rem;
      align-items: flex-start;
    }

    body.page-transfer .transfer-banner li i {
      color: var(--primary-red);
      margin-top: 0.2rem;
    }

    body.page-transfer .transfer-badge-stack {
      display: grid;
      gap: 0.85rem;
    }

    body.page-transfer .transfer-badge {
      padding: 0.9rem 1rem;
      border-radius: 18px;
      background: var(--neutral-white);
      box-shadow: var(--shadow-md);
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.03em;
    }

    @media (max-width: 900px) {
      body.page-transfer .operator-grid {
        grid-template-columns: 1fr;
      }

      body.page-transfer .operator-card-inner {
        grid-template-columns: 1fr;
      }

      body.page-transfer .transfer-banner {
        grid-template-columns: 1fr;
      }
    }