/* GOOGLE FONTS avec optimisations modernes */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap&swap=swap");
@supports (font-variation-settings: normal) {
    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
}

/* VARIABLES CSS MODERNES */
:root {
    color-scheme: dark;
    
    /* Viewport Units Modernes */
    --header-height: clamp(2.5rem, 4vw, 4rem);
    --viewport-height: 100dvh; /* Dynamic Viewport Height */
    --viewport-width: 100dvw;  /* Dynamic Viewport Width */
    --large-viewport-height: 100lvh; /* Large Viewport Height */
    --small-viewport-height: 100svh; /* Small Viewport Height */

    /* Colors - Conservation de vos couleurs avec amélioration */
    --hue-color: 250; 
    --first-color: hsl(var(--hue-color), 69%, 61%);
    --first-color-second: hsl(var(--hue-color), 69%, 61%);
    --first-color-alt: hsl(var(--hue-color), 57%, 53%);
    --first-color-lighter: hsl(var(--hue-color), 92%, 85%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 75%);
    --text-color-light: hsl(var(--hue-color), 8%, 65%);
    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 20%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);

    /* Container Queries Support */
    container-type: inline-size;
    container-name: main-container;
    /* Gradient Colors Modernisés */
    --gradient-primary: linear-gradient(135deg, var(--first-color) 0%, hsl(var(--hue-color), 69%, 70%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(var(--hue-color), 69%, 61%) 0%, hsl(var(--hue-color), 57%, 53%) 100%);
    --gradient-accent: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    --gradient-background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    --gradient-conic: conic-gradient(from 45deg, var(--first-color), var(--first-color-alt), var(--first-color));
    --gradient-radial: radial-gradient(circle at center, var(--first-color) 0%, transparent 70%);
    
    /* Shadow Variables Avancées */
    --shadow-light: 0 2px 12px hsla(var(--hue-color), 48%, 8%, 0.1);
    --shadow-medium: 0 4px 25px hsla(var(--hue-color), 48%, 8%, 0.15);
    --shadow-strong: 0 8px 32px hsla(var(--hue-color), 48%, 8%, 0.25);
    --shadow-inset: inset 0 1px 0 hsla(0, 0%, 100%, 0.1);
    --shadow-glow: 0 0 20px hsla(var(--hue-color), 69%, 61%, 0.3);
    --shadow-hover: 0 10px 40px hsla(var(--hue-color), 48%, 8%, 0.2);
    --shadow-colored: 0 8px 32px color-mix(in srgb, var(--first-color) 25%, transparent);
    --shadow-realistic: 
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086),
        0 100px 80px rgba(0, 0, 0, 0.12);
    
    /* Custom Properties Avancées */
    --surface-glass: color-mix(in srgb, var(--container-color) 80%, transparent);
    --surface-elevated: color-mix(in srgb, var(--container-color) 90%, var(--first-color) 10%);
    --accent-mix: color-mix(in oklch, var(--first-color), var(--first-color-alt));
    --color-scheme: light;
    
    /* Animation Variables */
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --animation-slower: 0.8s;
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Border Radius */
    --border-radius-sm: 0.375rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-full: 9999px;
    
    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-dark: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-backdrop: blur(10px);
    --glass-backdrop-strong: blur(20px);
    
    /* Advanced Gradients */
    /* Advanced Gradients */
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    --gradient-mesh: radial-gradient(circle at 25% 25%, var(--first-color) 0%, transparent 50%), 
                     radial-gradient(circle at 75% 75%, var(--first-color-alt) 0%, transparent 50%);

    /* Font et Typography Modernisés */
    --body-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --heading-font: 'Poppins', 'Inter', system-ui, sans-serif;
    --font-display: swap;
    
    /* Fluid Typography Ultra-Moderne */
    --fluid-min-width: 320;
    --fluid-max-width: 1140;
    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
    
    --biggest-font-size: clamp(2.5rem, calc(2.5rem + (5 - 2.5) * var(--fluid-bp)), 5rem);
    --big-font-size: clamp(1.75rem, calc(1.75rem + (3.5 - 1.75) * var(--fluid-bp)), 3.5rem);
    --h1-font-size: clamp(1.5rem, calc(1.5rem + (2.25 - 1.5) * var(--fluid-bp)), 2.25rem);
    --h2-font-size: clamp(1.25rem, calc(1.25rem + (1.5 - 1.25) * var(--fluid-bp)), 1.5rem);
    --h3-font-size: clamp(1.125rem, calc(1.125rem + (1.25 - 1.125) * var(--fluid-bp)), 1.25rem);
    --normal-font-size: clamp(0.875rem, calc(0.875rem + (1 - 0.875) * var(--fluid-bp)), 1rem);
    --small-font-size: clamp(0.75rem, calc(0.75rem + (0.875 - 0.75) * var(--fluid-bp)), 0.875rem);
    --smaller-font-size: clamp(0.675rem, calc(0.675rem + (0.813 - 0.675) * var(--fluid-bp)), 0.813rem);

    /* Typography Scale - Golden Ratio */
    --type-scale-ratio: 1.618;
    --type-scale-base: 1rem;
    --type-scale-xs: calc(var(--type-scale-base) / var(--type-scale-ratio) / var(--type-scale-ratio));
    --type-scale-sm: calc(var(--type-scale-base) / var(--type-scale-ratio));
    --type-scale-md: var(--type-scale-base);
    --type-scale-lg: calc(var(--type-scale-base) * var(--type-scale-ratio));
    --type-scale-xl: calc(var(--type-scale-base) * var(--type-scale-ratio) * var(--type-scale-ratio));
    --type-scale-2xl: calc(var(--type-scale-base) * var(--type-scale-ratio) * var(--type-scale-ratio) * var(--type-scale-ratio));

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 2;

    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;

    /* Font weight */
    --font-light: 300;
    --font-medium: 500;
    --font-semi-bold: 600;

    /* Margins Bottom - Harmonious Spacing */
    --mb-0-25: 0.25rem;
    --mb-0-5: 0.5rem;
    --mb-0-75: 0.75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    --mb-4: 4rem;
    --mb-5: 5rem;
    --mb-6: 6rem;

    /* Spacing Scale (Golden Ratio inspired) */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 0.75rem;   /* 12px */
    --space-lg: 1rem;      /* 16px */
    --space-xl: 1.5rem;    /* 24px */
    --space-2xl: 2rem;     /* 32px */
    --space-3xl: 3rem;     /* 48px */
    --space-4xl: 4rem;     /* 64px */
    --space-5xl: 6rem;     /* 96px */
    --space-6xl: 8rem;     /* 128px */

    /* z-index */
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
    
    /* Breakpoints */
    --breakpoint-xs: 475px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Dark theme */
[data-theme="dark"] {
    --first-color-second: hsl(var(--hue-color), 30%, 8%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 75%);
    --input-color: hsl(var(--hue-color), 29%, 16%);
    --body-color: hsl(var(--hue-color), 28%, 12%);
    --container-color: hsl(var(--hue-color), 29%, 16%);
    --scroll-bar-color: hsl(var(--hue-color), 12%, 48%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 36%);
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
    :root {
        --biggest-font-size: 5rem;
        --big-font-size: 3.5rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*==================== BASE MODERNE ====================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    /* Support pour CSS Nesting natif */
    color-scheme: var(--color-scheme);
    
    @media (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    transition: all var(--animation-normal) ease;
    
    /* Optimisations typographiques modernes */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1;
    font-variant-numeric: proportional-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    
    /* Performance et accessibilité */
    overscroll-behavior: none;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    
    /* Support pour les nouvelles unités viewport */
    min-height: var(--viewport-height);
    
    /* CSS Grid au niveau body pour un layout moderne */
    display: grid;
    grid-template-rows: auto 1fr auto;
    isolation: isolate;
}

/*==================== TYPOGRAPHIE MODERNE AVANCÉE ====================*/
h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    font-family: var(--heading-font);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    position: relative;
    transition: all var(--animation-normal) var(--ease-in-out-smooth);
    margin-block: var(--space-lg) var(--space-md);
    
    /* Typographie moderne */
    text-wrap: balance;
    font-variant-numeric: lining-nums;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6:hover {
    color: color-mix(in srgb, var(--title-color) 80%, var(--first-color) 20%);
    transform: translateX(2px);
}

h1 {
    font-size: var(--biggest-font-size);
    font-weight: 700;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Fallback pour navigateurs sans support background-clip: text */
@supports not (background-clip: text) {
    h1 {
        color: var(--title-color);
        background: none;
    }
}

h2 {
    font-size: var(--h1-font-size);
    position: relative;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width var(--animation-slow) var(--ease-out-back);
}

h2:hover::after {
    width: 100%;
}

h3 {
    font-size: var(--h2-font-size);
    text-decoration: underline;
    text-decoration-color: var(--first-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: auto;
}

/* Paragraphes optimisés */
p {
    color: var(--text-color);
    margin-block: var(--space-md);
    max-width: 65ch; /* Longueur de ligne optimale */
    text-wrap: pretty;
    hanging-punctuation: first last;
    hyphens: auto;
    line-height: var(--line-height-relaxed);
}

/*==================== EFFETS VISUELS MODERNES ====================*/

/* Glassmorphism moderne */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-realistic);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-shimmer);
    opacity: 0.5;
}

/* Neumorphism soft */
.neomorphism {
    background: var(--body-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 
        8px 8px 16px color-mix(in srgb, var(--body-color) 50%, #000000 10%),
        -8px -8px 16px color-mix(in srgb, var(--body-color) 50%, #ffffff 10%);
    border: 1px solid color-mix(in srgb, var(--body-color) 90%, transparent);
}

.neomorphism-inset {
    background: var(--body-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 
        inset 8px 8px 16px color-mix(in srgb, var(--body-color) 50%, #000000 10%),
        inset -8px -8px 16px color-mix(in srgb, var(--body-color) 50%, #ffffff 10%);
}

/* Effet de parallax moderne avec scroll-timeline */
@supports (animation-timeline: scroll()) {
    .parallax-element {
        animation: parallax-move linear;
        animation-timeline: scroll(root);
        animation-range: 0% 100%;
    }
    
    @keyframes parallax-move {
        from { transform: translateY(0); }
        to { transform: translateY(-50px); }
    }
}

/* Gradients animés modernes */
.gradient-animated {
    background: linear-gradient(-45deg, 
        var(--first-color), 
        var(--first-color-alt), 
        var(--first-color-lighter), 
        var(--first-color)
    );
    background-size: 400% 400%;
    animation: gradient-flow 6s ease infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Effet de shimmer/loading moderne */
.shimmer {
    position: relative;
    overflow: hidden;
    background: var(--container-color);
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--gradient-shimmer);
    transform: translateX(-100%);
    animation: shimmer-effect 1.5s infinite;
}

@keyframes shimmer-effect {
    100% { transform: translateX(100%); }
}

/* Hover effects modernes */
.modern-hover {
    position: relative;
    transition: all var(--animation-normal) var(--ease-out-back);
    transform-style: preserve-3d;
}

.modern-hover:hover {
    transform: translateY(-4px) rotateX(5deg) rotateY(5deg);
    box-shadow: var(--shadow-hover);
}

.modern-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--animation-normal);
    z-index: -1;
}

.modern-hover:hover::before {
    opacity: 0.1;
}

/* Morphing borders */
.morphing-border {
    position: relative;
    border: 2px solid transparent;
    background: var(--container-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.morphing-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-conic);
    border-radius: inherit;
    animation: border-rotation 3s linear infinite;
    z-index: -1;
}

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

/* Floating animation moderne */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* Text reveal animation */
.text-reveal {
    overflow: hidden;
    position: relative;
}

.text-reveal span {
    display: inline-block;
    opacity: 0;
    animation: text-reveal-anim 0.8s ease forwards;
}

.text-reveal span:nth-child(n) {
    animation-delay: calc(0.1s * var(--i, 0));
}

@keyframes text-reveal-anim {
    from {
        opacity: 0;
        transform: translateY(20px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/*==================== ANIMATIONS PERFORMANTES ====================*/

/* Optimisations de performance avec will-change et contain */
.performance-optimized {
    /* Isolation de layer pour de meilleures performances */
    will-change: transform, opacity;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px; /* Taille estimée pour content-visibility */
}

/* Animation GPU accelerated */
.gpu-accelerated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Animations avec préférence pour motion réduit */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .parallax-element,
    .gradient-animated,
    .floating,
    .shimmer::after {
        animation: none !important;
    }
}

/* Intersection Observer pour animations au scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity var(--animation-slow) var(--ease-out-back),
        transform var(--animation-slow) var(--ease-out-back);
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Lazy loading pour images */
.lazy-load {
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
    /* loading: lazy est un attribut HTML, pas CSS */
}

/* Critical path optimization */
.above-fold {
    content-visibility: visible;
}

.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* Font loading optimization */
.font-loading {
    font-display: swap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Contain layout shifts */
.layout-stable {
    contain: layout style;
    aspect-ratio: var(--aspect-ratio, auto);
}

/* Smooth scrolling moderne */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--header-height);
    }
}

@supports (scroll-snap-type: y mandatory) {
    .scroll-snap-container {
        scroll-snap-type: y mandatory;
        scrollbar-width: thin;
        scrollbar-color: var(--scroll-thumb-color) var(--scroll-bar-color);
    }
    
    .scroll-snap-item {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* Custom scrollbar moderne */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-bar-color);
    border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--border-radius-full);
    transition: background var(--animation-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-secondary);
}

/* Focus visible moderne */
:focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Skip link pour accessibilité */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--first-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: var(--border-radius);
    z-index: var(--z-modal);
    transition: top var(--animation-fast);
}

.skip-link:focus {
    top: 6px;
}

/*==================== UTILITAIRES TYPOGRAPHIQUES MODERNES ====================*/

.text-large {
    font-size: var(--h3-font-size);
    line-height: var(--line-height-normal);
    font-weight: var(--font-medium);
}

.text-small {
    font-size: var(--small-font-size);
    line-height: var(--line-height-normal);
}

.text-xs {
    font-size: var(--smaller-font-size);
    line-height: var(--line-height-tight);
}

/* Text utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semi-bold); }
.font-bold { font-weight: 700; }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }

/* Enhanced readability */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

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

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--first-color), 0 0 10px var(--first-color), 0 0 15px var(--first-color);
    }
    50% {
        box-shadow: 0 0 10px var(--first-color), 0 0 20px var(--first-color), 0 0 30px var(--first-color);
    }
}

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

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% {
        border-color: transparent;
    }
    51%, 100% {
        border-color: var(--first-color);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Animation utilities */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--animation-slow) var(--ease-out-back);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.hover-lift {
    transition: transform var(--animation-normal) var(--ease-out-back);
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-scale {
    transition: transform var(--animation-normal) var(--ease-in-out-smooth);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow var(--animation-normal) var(--ease-in-out-smooth);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow);
}

/*==================== IMPROVED TRANSITIONS ====================*/
* {
    transition: color var(--animation-fast) ease,
                background-color var(--animation-fast) ease,
                border-color var(--animation-fast) ease,
                box-shadow var(--animation-normal) ease,
                transform var(--animation-normal) var(--ease-in-out-smooth);
}

/*==================== GLASS MORPHISM EFFECTS ====================*/
.glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
}

.glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-shimmer);
    transition: left var(--animation-slower) ease;
}

.glass:hover::before {
    left: 100%;
}

.glass-strong {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: var(--glass-backdrop-strong);
    -webkit-backdrop-filter: var(--glass-backdrop-strong);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-strong);
}

.glass-dark {
    background: var(--glass-bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/*==================== ADVANCED CARD EFFECTS ====================*/
.card-modern {
    background: var(--container-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-light);
    transition: all var(--animation-normal) var(--ease-out-back);
    position: relative;
    overflow: hidden;
}

.card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--animation-normal) var(--ease-out-back);
}

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

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

.card-gradient {
    background: var(--gradient-mesh);
    color: white;
    position: relative;
}

.card-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: var(--gradient-primary);
    border-radius: inherit;
    mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
    mask-composite: exclude;
}

/*==================== MODERN BUTTONS ====================*/
.btn-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-full);
    font-weight: var(--font-semi-bold);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--animation-normal) var(--ease-out-back);
    box-shadow: var(--shadow-medium);
}

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

.btn-modern:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-strong);
}

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

.btn-modern:active {
    transform: translateY(0) scale(0.98);
}

.btn-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    color: var(--title-color);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--first-color);
    color: var(--first-color);
}

.btn-outline:hover {
    background: var(--first-color);
    color: white;
}

h1, h2, h3, h4 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    font-family: var(--heading-font);
    line-height: 1.2;
    position: relative;
    transition: all var(--animation-normal) var(--ease-in-out-smooth);
}

h1:hover, h2:hover, h3:hover {
    color: var(--first-color);
    transform: translateY(-2px);
}

/* Typing effect for main titles */
.typing-effect {
    overflow: hidden;
    border-right: 3px solid var(--first-color);
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* Gradient text effect */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Underline animation */
.animated-underline {
    position: relative;
    display: inline-block;
}

.animated-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background: var(--gradient-primary);
    border-radius: var(--border-radius-full);
    transition: width var(--animation-normal) var(--ease-out-back);
}

.animated-underline:hover::after {
    width: 100%;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

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

/*==================== REUSABLE CSS CLASSES ====================*/
.section {
    padding: 2rem 0 4rem;
}

.section__title {
    font-size: var(--h1-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: var(--mb-3);
}

.section__subtitle {
    display: block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-3);
    color: var(--first-color);
    text-align: center;
}

/*==================== LAYOUT MODERNE ====================*/
.container {
    /* Container moderne avec fluid width */
    max-width: min(90vw, 1200px);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1rem, 5vw, 2rem);
    
    /* Container queries pour le responsive */
    container-type: inline-size;
    container-name: layout-container;
}

/* Container queries - Responsive basé sur le container */
@container layout-container (max-width: 768px) {
    .container {
        padding-inline: 1rem;
    }
}

@container layout-container (min-width: 1024px) {
    .container {
        max-width: 1140px;
        padding-inline: 2rem;
    }
}

.grid {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    
    /* Grid moderne avec auto-fit et minmax */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    
    /* Amélioration avec subgrid quand supporté */
    @supports (grid-template-rows: subgrid) {
        grid-template-rows: subgrid;
    }
}

/* Grid utilities modernes */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

/* Flexbox moderne avec gap */
.flex {
    display: flex;
    gap: var(--space-md);
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Layout avec aspect-ratio moderne */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }
.aspect-golden { aspect-ratio: 1.618; }

/* Stack layout moderne (inspiré de Stack de chez Every Layout) */
.stack > * + * {
    margin-block-start: var(--space-md);
}

.stack-sm > * + * {
    margin-block-start: var(--space-sm);
}

.stack-lg > * + * {
    margin-block-start: var(--space-lg);
}

/* Cluster layout pour groupes d'éléments */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

/* Sidebar layout moderne */
.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.sidebar > :first-child {
    flex-basis: 250px;
    flex-grow: 1;
}

.sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 50%;
}

/*==================== HEADER MODERNE ====================*/
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(102, 126, 234, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scroll-header {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    box-shadow: 0 6px 35px rgba(102, 126, 234, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Progress Bar */
.header__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
}

.header__progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f093fb, #ffffff, #f5af19, #f093fb);
    background-size: 300% 100%;
    animation: gradientShift 4s ease infinite;
    transition: width 0.1s ease-out;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/*==================== NAV MODERNE ====================*/
.nav {
    max-width: 1200px;
    height: 4.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

/* Logo */
.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    z-index: 100;
}

.nav__logo-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.nav__logo:hover .nav__logo-icon {
    transform: rotate(-10deg) scale(1.05);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.nav__logo-text {
    display: flex;
    align-items: baseline;
}

.nav__logo-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.nav__logo-dot {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f093fb;
    margin-left: 2px;
}

/* Navigation Menu */
.nav__menu {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
}

.nav__link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.nav__link:hover::before {
    width: 60%;
}

.nav__link.active-link {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.nav__link.active-link::before {
    width: 60%;
}

.nav__icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.nav__link:hover .nav__icon {
    transform: translateY(-2px);
}

/* Nav Actions */
.nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* CTA Button */
.nav__cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: #764ba2;
}

.nav__cta i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.nav__cta:hover i {
    transform: translateX(3px);
}

/* Mobile Toggle */
.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.nav__toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.nav__toggle-bar {
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

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

.nav__toggle.active .nav__toggle-bar:nth-child(2) {
    opacity: 0;
}

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

/* Close Button */
.nav__close {
    display: none;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(102, 126, 234, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--title-color);
    transition: all 0.3s ease;
}

.nav__close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    transform: rotate(90deg);
}

/*==================== RESPONSIVE HEADER ====================*/
@media screen and (max-width: 992px) {
    .nav__cta {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .nav {
        padding: 0 1.25rem;
        height: 3.75rem;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #5a4a8a 100%);
        box-shadow: -15px 0 50px rgba(0, 0, 0, 0.3);
        padding: 6rem 1.5rem 2rem;
        flex-direction: column;
        align-items: flex-start;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 99;
        overflow-y: auto;
    }

    .nav__menu.show-menu {
        right: 0;
    }

    .nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav__close:hover {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        transform: rotate(90deg);
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        width: 100%;
        padding: 1rem 1.5rem;
        border-radius: 14px;
        font-size: 1.05rem;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav__link::before {
        display: none;
    }

    .nav__link:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateX(5px);
    }

    .nav__link.active-link {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .nav__icon {
        font-size: 1.15rem;
        width: 28px;
    }

    /* Mobile Menu Overlay */
    .nav__menu::before {
        content: '';
        position: fixed;
        top: 0;
        left: -100vw;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0);
        transition: background 0.4s ease;
        pointer-events: none;
        z-index: -1;
    }

    .nav__menu.show-menu::before {
        background: rgba(0, 0, 0, 0.6);
        pointer-events: auto;
    }

    /* Mobile Menu Footer */
    .nav__menu::after {
        content: '© 2026 Portfolio';
        position: absolute;
        bottom: 2rem;
        left: 1.5rem;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    .nav {
        padding: 0 1rem;
        height: 3.5rem;
    }

    .nav__logo-name {
        font-size: 1.1rem;
    }

    .nav__logo-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .nav__toggle {
        width: 38px;
        height: 38px;
    }

    .nav__menu {
        width: 90%;
        max-width: 300px;
        padding: 5rem 1.25rem 2rem;
    }

    .nav__link {
        padding: 0.9rem 1.25rem;
        font-size: 1rem;
    }

    .nav__close {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}

/* Fix pour petites hauteurs d'écran */
@media screen and (max-width: 768px) and (max-height: 500px) {
    .nav__menu {
        padding: 4rem 1.25rem 1.5rem;
    }

    .nav__list {
        gap: 0.4rem;
    }

    .nav__link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .nav__icon {
        font-size: 1rem;
        width: 24px;
    }

    .nav__close {
        top: 1rem;
        right: 1rem;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .nav__menu::after {
        bottom: 1rem;
        font-size: 0.7rem;
    }
}

/* Fix pour très petites hauteurs */
@media screen and (max-width: 768px) and (max-height: 400px) {
    .nav__menu {
        padding: 3.5rem 1rem 1rem;
        overflow-y: auto;
    }

    .nav__list {
        gap: 0.25rem;
    }

    .nav__link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .nav__menu::after {
        display: none;
    }
}

@media screen and (max-width: 350px) {
    .nav__logo-text {
        display: none;
    }

    .nav__menu {
        width: 100%;
        max-width: none;
    }
}

/* Active link */
.active-link {
    color: #ffffff;
}

/* Change background header */
.scroll-header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/*==================== HOME ====================*/
#home {
    padding-top: 6rem; /* Compenser le header fixe */
}

.home__container {
    gap: 1rem;
}

.home__content {
    grid-template-columns: .5fr 3fr;
    padding-top: 3.5rem;
    align-items: center;
}

.home__social {
    display: grid;
    grid-template-columns: max-content;
    row-gap: 1rem;
}

.home__social-icon {
    font-size: 1.25rem;
    color: var(--first-color);
}

.home__social-icon:hover {
    color: var(--first-color-alt);
}

.home__blob {
    width: 200px;
    fill: var(--first-color);
}

.home__blob-img {
    width: 170px;
}

.home__data {
    grid-column: 1/3;
}

.home__title {
    font-size: var(--big-font-size);
    margin-bottom: var(--mb-0-5);
}

.home__subtitle {
    font-size: var(--h3-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-75);
}

/*==================== TYPING TEXT ANIMATION ====================*/
.home__profession {
    margin-bottom: var(--mb-1);
    position: relative;
    display: block;
    width: 100%;
    min-height: 2.5em;
}

.typing-text {
    font-size: var(--h2-font-size);
    display: inline;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
}

/* Curseur séparé pour éviter les glitches */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1.2em;
    background-color: var(--first-color);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.7s infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* Responsive pour le typing text */
@media screen and (max-width: 768px) {
    .typing-text {
        font-size: var(--h3-font-size);
    }
    .typing-cursor {
        width: 2px;
        height: 1em;
    }
}

@media screen and (max-width: 480px) {
    .typing-text {
        font-size: var(--normal-font-size);
    }
    .typing-cursor {
        width: 2px;
        height: 0.9em;
    }
}

.home__description {
    margin-bottom: var(--mb-2);
}

.home__scroll {
    display: none;
}

.home__scroll-button {
    color: var(--first-color);
    transition: .3s;
}

.home__scroll-button:hover {
    transform: translateY(0.25rem);
}

.home__scroll-mouse {
    font-size: 2rem;
}

.home__scroll-name {
    font-size: var(--small-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
    margin-right: var(--mb-0-25);
}

.home__scroll-arrow {
    font-size: 1.25rem;
}

/*==================== HOME STATS ====================*/
.home__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--mb-2);
    margin-top: var(--mb-2-5);
    padding: var(--mb-1-5) 0;
}

.home__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--mb-1) var(--mb-1-5);
    background: var(--container-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    transition: all var(--animation-normal) ease;
    position: relative;
    overflow: hidden;
    min-width: 120px;
}

.home__stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 0 0 50px 50px;
    transform: translateX(-50%);
    transition: width var(--animation-normal) ease;
}

.home__stat:hover::before {
    width: 80%;
}

.home__stat:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    background: linear-gradient(135deg, var(--container-color) 0%, rgba(var(--hue-color), 69%, 61%, 0.05) 100%);
}

.home__stat-number {
    font-size: var(--h1-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--first-color);
    margin-bottom: var(--mb-0-25);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    transition: all var(--animation-normal) ease;
}

.home__stat:hover .home__stat-number {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 8px rgba(var(--hue-color), 69%, 61%, 0.3));
}

.home__stat-text {
    font-size: var(--small-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    transition: all var(--animation-normal) ease;
}

.home__stat:hover .home__stat-text {
    color: var(--title-color);
    opacity: 1;
}

/*==================== ENHANCED BUTTONS ====================*/
.button {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFF;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: var(--font-semi-bold);
    font-size: var(--normal-font-size);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    letter-spacing: var(--letter-spacing-wide);
    z-index: 1;
}

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

.button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    border-radius: 50px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -2;
}

.button:hover {
    color: #FFF;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5), 0 0 20px rgba(118, 75, 162, 0.3);
}

.button:hover::before {
    left: 100%;
}

.button:hover::after {
    opacity: 1;
}

.button:active {
    transform: translateY(-2px) scale(0.98);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.button__icon {
    font-size: 1.1rem;
    margin-left: 0.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button--flex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.button:hover .button__icon {
    transform: translateX(5px) rotate(-15deg);
}

/* Button variants */
.button--small {
    padding: 0.75rem 1.5rem;
    font-size: var(--small-font-size);
}

.button--large {
    padding: 1.25rem 2.5rem;
    font-size: var(--h3-font-size);
}

.button--secondary {
    background: var(--container-color);
    color: var(--first-color);
    border: 2px solid var(--first-color);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.button--secondary:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFF;
    border-color: transparent;
}

.button--ghost {
    background: transparent;
    color: #FFF;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.button--ghost::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.button--ghost::after {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
    border-radius: 50px;
}

.button--ghost:hover {
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.button--ghost:hover::after {
    opacity: 0;
}

.button--ghost .button__icon {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button--ghost:hover .button__icon {
    transform: translateX(8px);
}

/* Primary button with pulse effect */
.button--primary {
    animation: buttonPulse 2s ease-in-out infinite;
}

.button--primary:hover {
    animation: none;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(102, 126, 234, 0.6), 0 0 30px rgba(118, 75, 162, 0.3);
    }
}

/* Home buttons container */
.home__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

@media screen and (max-width: 576px) {
    .home__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .home__buttons .button {
        text-align: center;
        justify-content: center;
    }
}

/*==================== MODERN ABOUT SECTION ====================*/
.about__container {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---- Left column ---- */
.about__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.about__img-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
}

.about__img-glow {
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2, #667eea);
    background-size: 200% 200%;
    animation: aboutGlowShift 4s ease infinite;
    z-index: 0;
    opacity: 0.6;
}

@keyframes aboutGlowShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.about__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    transition: transform 0.5s ease;
}

.about__img-card:hover .about__img {
    transform: scale(1.03);
}

.about__img-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border-radius: 50px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about__img-badge i {
    color: #34d399;
    font-size: 0.9rem;
}

/* Stats row */
.about__stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: 16px;
    width: 100%;
    justify-content: center;
}

.about__stat {
    text-align: center;
}

.about__stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.about__stat-label {
    font-size: 0.75rem;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.about__stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(102, 126, 234, 0.3), transparent);
}

/* ---- Right column ---- */
.about__right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #667eea;
}

.about__label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #667eea;
    animation: aboutPulse 2s ease-in-out infinite;
}

@keyframes aboutPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(102, 126, 234, 0); }
}

.about__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--title-color);
    line-height: 1.2;
    margin: 0;
}

.about__title-accent {
    display: block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 4px;
}

.about__description {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.8;
    margin: 0;
}

.about__description strong {
    color: var(--title-color);
    font-weight: 600;
}

/* Info cards grid */
.about__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.about__info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(102, 126, 234, 0.08);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.about__info-card:hover {
    background: rgba(102, 126, 234, 0.06);
    border-color: rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.about__info-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #667eea;
    flex-shrink: 0;
}

.about__info-card h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--title-color);
    margin-bottom: 2px;
}

.about__info-card span {
    font-size: 0.78rem;
    color: var(--text-color);
}

/* Tech tags */
.about__techs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.about__tech-tag {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 50px;
    background: rgba(102, 126, 234, 0.08);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.15);
    transition: all 0.3s ease;
    cursor: default;
}

.about__tech-tag:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}

/* About buttons */
.about__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ---- About Responsive ---- */
@media screen and (max-width: 900px) {
    .about__container {
        grid-template-columns: 320px 1fr;
        gap: 2.5rem;
    }

    .about__img {
        height: 380px;
    }

    .about__title {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    .about__container {
        grid-template-columns: 1fr;
        max-width: 520px;
        gap: 2rem;
    }

    .about__left {
        order: 1;
    }

    .about__right {
        order: 2;
        text-align: center;
        align-items: center;
    }

    .about__img {
        height: 350px;
    }

    .about__img-card {
        max-width: 340px;
    }

    .about__info-grid {
        max-width: 400px;
    }

    .about__techs {
        justify-content: center;
    }

    .about__buttons {
        justify-content: center;
    }

    .about__description {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .about__container {
        padding: 0 1rem;
    }

    .about__img {
        height: 300px;
    }

    .about__title {
        font-size: 1.5rem;
    }

    .about__title-accent {
        font-size: 1.15rem;
    }

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

    .about__stats {
        padding: 1rem 1.25rem;
        gap: 1rem;
    }

    .about__stat-number {
        font-size: 1.4rem;
    }

    .about__buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .about__buttons .button {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .about__floating-shape {
        display: none;
    }
    
    .about__img {
        width: 200px;
        height: 250px;
        margin: 0 auto var(--mb-1);
    }
    
    .about__timeline {
        max-width: 100%;
        padding: 0 var(--mb-0-5);
    }
    
    .about__timeline::before {
        left: 15px;
    }
    
    .about__timeline-item {
        padding-left: 50px;
        margin-bottom: var(--mb-1);
    }
    
    .about__timeline-marker {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        box-shadow: 0 0 0 3px var(--body-color), 0 0 0 6px var(--first-color-lighter);
    }
    
    .about__timeline-content {
        margin-left: var(--mb-0-75);
        padding: var(--mb-0-5) var(--mb-0-75);
    }
    
    .about__info {
        grid-template-columns: 1fr;
        gap: var(--mb-0-75);
    }
    
    .about__info-item {
        padding: var(--mb-0-75);
    }
    
    .about__info-icon {
        font-size: 1.3rem;
        margin-bottom: var(--mb-0-25);
    }
    
    .about__detail-item {
        flex-direction: column;
        text-align: center;
        padding: var(--mb-1);
    }
    
    .about__detail-icon-wrapper {
        width: 35px;
        height: 35px;
        margin-bottom: var(--mb-0-5);
    }
    
    .about__detail-icon {
        font-size: 1rem;
    }
    
    .about__description {
        font-size: var(--smaller-font-size);
        line-height: 1.6;
        padding: 0 var(--mb-0-5);
    }
    
    .about__title-highlight {
        font-size: var(--h4-font-size);
    }
    
    .about__title-text {
        font-size: var(--small-font-size);
    }
    
    .about__buttons .button {
        max-width: 280px;
        padding: var(--mb-0-5) var(--mb-1);
        font-size: var(--small-font-size);
    }
}

/* Extra small screens */
@media screen and (max-width: 320px) {
    .about__img {
        width: 180px;
        height: 220px;
    }
    
    .about__timeline-item {
        padding-left: 40px;
    }
    
    .about__timeline-marker {
        width: 25px;
        height: 25px;
        font-size: 0.7rem;
    }
    
    .about__timeline-content {
        margin-left: var(--mb-0-5);
        padding: var(--mb-0-25) var(--mb-0-5);
    }
    
    .about__info-item {
        padding: var(--mb-0-5);
    }
    
    .about__buttons .button {
        max-width: 250px;
    }
}

/*=============== SKILLS ===============*/
.skills {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.skills .section__title,
.skills .section__subtitle {
  position: relative;
  z-index: 2;
}

/* Container */
.skills__container.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Pillars grid — 3 columns */
.skills__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}

/* Single pillar card */
.skills__pillar {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
}

/* Top gradient accent line */
.skills__pillar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.skills__pillar:hover::after {
  opacity: 1;
}

/* Hover glow */
.skills__pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  background: radial-gradient(500px circle at 50% 0%, rgba(102, 126, 234, 0.07), transparent 60%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.skills__pillar:hover::before {
  opacity: 1;
}

.skills__pillar:hover {
  transform: translateY(-8px);
  border-color: rgba(102, 126, 234, 0.2);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18),
              0 0 40px rgba(102, 126, 234, 0.06);
}

/* Inner wrapper for padding (keeps gradient line edge-to-edge) */
.skills__pillar-header,
.skills__pillar-desc,
.skills__tags {
  position: relative;
  z-index: 1;
}

/* Pillar header */
.skills__pillar-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 1.75rem 0;
  margin-bottom: 0.75rem;
}

.skills__pillar-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
  color: #667eea;
  font-size: 1.3rem;
  transition: all 0.4s ease;
}

.skills__pillar:hover .skills__pillar-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.skills__pillar-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.skills__pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.12);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

/* Description */
.skills__pillar-desc {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.65;
  padding: 0 1.75rem;
  margin-bottom: 1.25rem;
}

/* Divider before tags */
.skills__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1.25rem 1.75rem 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: auto;
}

.skills__tag {
  font-size: 0.73rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  transition: all 0.25s ease;
  cursor: default;
}

.skills__tag:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.18), rgba(118, 75, 162, 0.18));
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

/* Pillar reveal animation */
.skills__pillar {
  opacity: 0;
  transform: translateY(30px);
}

.skills__pillar--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.skills__pillar--visible:hover {
  transform: translateY(-8px);
}

/* Skills Responsive */
@media screen and (max-width: 1024px) {
  .skills__pillars {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
}

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

  .skills__pillar-header {
    padding: 1.5rem 1.5rem 0;
  }
  
  .skills__pillar-desc {
    padding: 0 1.5rem;
  }

  .skills__tags {
    padding: 1rem 1.5rem 1.5rem;
  }

  .skills__pillar-title {
    font-size: 1.05rem;
  }
}

@media screen and (max-width: 480px) {
  .skills {
    padding: 3rem 0;
  }
  
  .skills__pillars {
    gap: 1rem;
  }

  .skills__pillar-header {
    padding: 1.25rem 1.25rem 0;
    gap: 0.75rem;
  }

  .skills__pillar-desc {
    padding: 0 1.25rem;
    font-size: 0.8rem;
  }

  .skills__tags {
    padding: 1rem 1.25rem 1.25rem;
    gap: 0.35rem;
  }

  .skills__pillar-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.1rem;
  }

  .skills__tag {
    font-size: 0.68rem;
    padding: 0.3rem 0.55rem;
  }
}

/*==================== QUALIFICATION ====================*/
.qualification__tabs {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: var(--mb-2);
}

.qualification__button {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    cursor: pointer;
    background: none;
    border: none;
    color: var(--text-color);
}

.qualification__button:hover {
    color: var(--first-color);
}

.qualification__icon {
    font-size: 1.8rem;
    margin-right: var(--mb-0-25);
}

.qualification__data {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    column-gap: 1.5rem;
}

.qualification__title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}

.qualification__subtitle {
    display: inline-block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-1);
}

.qualification__calendar {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
}

.qualification__rounder {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: var(--first-color);
    border-radius: 50%;
}

.qualification__line {
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--first-color);
    transform: translate(6px, -7px);
}

.qualification [data-content] {
    display: none;
}

.qualification__active[data-content] {
    display: block;
}

.qualification__button.qualification__active {
    color: var(--first-color);
}

/*==================== MODERN SERVICES SECTION ====================*/
.services {
    padding: 6rem 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
}

/* ---- Card ---- */
.services__card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
}

.services__card-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(102, 126, 234, 0.12), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.services__card:hover .services__card-glow {
    opacity: 1;
}

.services__card:hover {
    border-color: rgba(102, 126, 234, 0.25);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
                0 0 30px rgba(102, 126, 234, 0.08);
}

/* Card number */
.services__card-number {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.04);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.services__card-inner {
    position: relative;
    z-index: 1;
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Icon box */
.services__icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #667eea;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    transition: all 0.4s ease;
}

.services__card:hover .services__icon-box {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #FFF;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* Badge */
.services__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #FFF;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Title */
.services__title {
    font-size: 1.2rem;
    color: #FFF;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

/* Description */
.services__description {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* Features list */
.services__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-grow: 1;
}

.services__features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    text-align: left;
}

.services__features li i {
    color: #667eea;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Bottom: price + button */
.services__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.services__price {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82rem;
}

.services__price strong {
    color: #FFF;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #667eea;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.services__btn i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.services__btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #FFF;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.services__btn:hover i {
    transform: translateX(4px);
}

/* ---- Featured card ---- */
.services__card--featured {
    border-color: rgba(102, 126, 234, 0.2);
    background: linear-gradient(165deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 100%);
}

.services__card--featured .services__card-number {
    color: rgba(102, 126, 234, 0.08);
}

/* ---- Services CTA ---- */
.services__cta {
    margin-top: 3rem;
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.services__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.08), transparent 70%);
    pointer-events: none;
}

.services__cta-content {
    position: relative;
    z-index: 1;
}

.services__cta-title {
    font-size: 1.5rem;
    color: #FFF;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.services__cta-description {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.services__cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Services Responsive ---- */
@media screen and (max-width: 1024px) {
    .services__container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
    }
}

@media screen and (max-width: 768px) {
    .services__container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
    }
}

@media screen and (max-width: 480px) {
    .services__container {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .services__card-inner {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .services__cta {
        padding: 2rem 1.25rem;
        margin-top: 2rem;
    }

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

@media screen and (max-width: 380px) {
    .services__container {
        max-width: 100%;
        padding: 0 0.75rem;
    }

    .services__bottom {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}

/*==================== PORTFOLIO ====================*/
.portfolio {
    padding: 6rem 0;
    width: 100%;
}

.portfolio__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Override .container when used with .portfolio__container */
.portfolio__container.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Filtres Portfolio */
.portfolio__filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    width: 100%;
}

.portfolio__filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--container-color);
    border: 2px solid transparent;
    border-radius: 50px;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.portfolio__filter-btn:hover {
    color: var(--first-color);
    border-color: var(--first-color);
    transform: translateY(-2px);
}

.portfolio__filter-btn--active {
    background: linear-gradient(135deg, var(--first-color), var(--first-color-alt));
    color: #fff;
    box-shadow: 0 4px 20px rgba(var(--hue-color), 69%, 61%, 0.3);
}

.portfolio__filter-btn--active:hover {
    color: #fff;
    border-color: transparent;
}

/* Grille Portfolio */
.portfolio__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

/* Cartes Portfolio */
.portfolio__card {
    background: var(--container-color);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    flex: 0 0 350px;
}

.portfolio__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.portfolio__card.hidden {
    opacity: 0;
    transform: scale(0.8);
    position: absolute;
    pointer-events: none;
}

/* Image avec overlay */
.portfolio__img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.portfolio__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio__card:hover .portfolio__img {
    transform: scale(1.1);
}

.portfolio__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--hue-color), 69%, 61%, 0.9), rgba(var(--hue-color), 57%, 53%, 0.9));
    background: linear-gradient(135deg, hsla(var(--hue-color), 69%, 61%, 0.9), hsla(var(--hue-color), 57%, 53%, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio__card:hover .portfolio__overlay {
    opacity: 1;
}

.portfolio__actions {
    display: flex;
    gap: 1rem;
}

.portfolio__action-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
}

.portfolio__card:hover .portfolio__action-btn {
    transform: translateY(0);
    opacity: 1;
}

.portfolio__card:hover .portfolio__action-btn:nth-child(2) {
    transition-delay: 0.1s;
}

.portfolio__action-btn:hover {
    background: #fff;
    color: var(--first-color);
    transform: scale(1.1);
}

/* Contenu des cartes */
.portfolio__data {
    padding: 1.5rem;
}

.portfolio__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.portfolio__tag {
    padding: 0.25rem 0.75rem;
    background: var(--first-color-lighter);
    color: var(--first-color);
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.portfolio__tag:hover {
    background: var(--first-color);
    color: #fff;
}

.portfolio__title {
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: 0.5rem;
    font-weight: var(--font-semi-bold);
}

.portfolio__description {
    color: var(--text-color);
    font-size: var(--small-font-size);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.portfolio__footer {
    display: flex;
    justify-content: flex-start;
}

.portfolio__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--first-color);
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
    text-decoration: none;
    transition: all 0.3s ease;
}

.portfolio__link i {
    transition: transform 0.3s ease;
}

.portfolio__link:hover {
    color: var(--first-color-alt);
}

.portfolio__link:hover i {
    transform: translateX(5px);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: '';
}

.swiper-portfolio-icon {
    font-size: 2rem;
    color: var(--first-color);
}

.swiper-button-prev {
    left: -.5rem;
}

.swiper-button-next {
    right: -.5rem;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -2.5rem;
}

.swiper-pagination-bullet-active {
    background-color: var(--first-color);
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination-bullet {
    outline: none;
}

/*==================== PROJECT IN MIND ====================*/
.project {
    text-align: center;
}

.project__bg {
    background-color: var(--first-color-second);
    padding-top: 3rem;
}

.project__title {
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-0-75);
}

.project__description {
    margin-bottom: var(--mb-1-5);
}

.project__title,
.project__description {
    color: #FFF;
}

.project__img {
    width: 232px;
    justify-self: center;
}

/*==================== TESTIMONIAL ====================*/
.testimonial__data,
.testimonial__header {
    display: flex;
}

.testimonial__data {
    justify-content: space-between;
    margin-bottom: var(--mb-1);
}

.testimonial__img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: var(--mb-0-75);
}

.testimonial__name {
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
}

.testimonial__client {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
}

.testimonial__description {
    margin-bottom: var(--mb-2-5);
}

.testimonial__icon-star {
    color: var(--first-color);
}

.swiper-container .swiper-pagination-testimonial {
    bottom: 0;
}

/*==================== SUPPORT & DONATION SECTION - IMPROVED ====================*/
.support {
    background: linear-gradient(180deg, var(--body-color) 0%, rgba(102, 126, 234, 0.03) 50%, var(--body-color) 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.support__bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.support__floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.15));
    filter: blur(40px);
    animation: supportFloat 8s ease-in-out infinite;
}

.support__floating-shape--1 {
    width: 300px;
    height: 300px;
    top: -5%;
    left: -5%;
    animation-delay: 0s;
}

.support__floating-shape--2 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: -5%;
    animation-delay: 2s;
}

.support__floating-shape--3 {
    width: 250px;
    height: 250px;
    bottom: -5%;
    left: 30%;
    animation-delay: 4s;
}

.support__floating-shape--4 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 20%;
    animation-delay: 6s;
}

@keyframes supportFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Header */
.support__header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.support__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 50px;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--first-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.support__label i {
    animation: pulse 2s ease-in-out infinite;
}

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

/* Container */
.support__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Intro Message */
.support__intro {
    width: 100%;
    max-width: 700px;
    margin-bottom: 3rem;
}

.support__message {
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    text-align: center;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.support__heart-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.support__heart {
    font-size: 2.5rem;
    color: #ff6b6b;
    animation: heartbeat 2s ease-in-out infinite;
}

.support__heart--secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: heartbeatSecondary 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes heartbeatSecondary {
    0% { transform: scale(1); opacity: 0; }
    14% { transform: scale(1.6); opacity: 0.3; }
    28% { transform: scale(1.8); opacity: 0; }
    42% { transform: scale(1.6); opacity: 0.3; }
    70% { transform: scale(1.8); opacity: 0; }
}

.support__message h3 {
    font-size: var(--h2-font-size);
    color: var(--title-color);
    margin-bottom: 0.75rem;
}

.support__message p {
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Progress Bar */
.support__progress {
    background: rgba(102, 126, 234, 0.05);
    padding: 1rem;
    border-radius: 1rem;
}

.support__progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: var(--small-font-size);
}

.support__progress-info span:first-child {
    color: var(--text-color);
}

.support__progress-amount {
    font-weight: var(--font-semi-bold);
    color: var(--first-color);
}

.support__progress-bar {
    height: 8px;
    background: rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.support__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--first-color), #764ba2);
    border-radius: 10px;
    transition: width 1.5s ease-out;
    position: relative;
}

.support__progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Cards Grid */
.support__options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    width: 100%;
}

/* Cards */
.support__card {
    background: var(--container-color);
    padding: 2rem 1.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 260px;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
}

.support__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--first-color), #764ba2);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.support__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(102, 126, 234, 0.2);
}

.support__card:hover::before {
    transform: scaleX(1);
}

/* Featured Card */
.support__card--featured {
    border: 2px solid var(--first-color);
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--container-color), rgba(102, 126, 234, 0.03));
}

.support__card--featured::before {
    transform: scaleX(1);
}

.support__card--featured:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Sponsor Card */
.support__card--sponsor {
    background: linear-gradient(135deg, var(--container-color), rgba(255, 215, 0, 0.03));
}

.support__card--sponsor .support__card-icon i {
    color: #ffd700;
}

.support__card--sponsor .support__price {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Badge */
.support__badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-semi-bold);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.support__badge i {
    font-size: 0.7rem;
}

/* Card Icon */
.support__card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.4s ease;
}

.support__card-icon i {
    font-size: 1.75rem;
    color: var(--first-color);
    transition: transform 0.4s ease;
}

.support__card:hover .support__card-icon {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
}

.support__card:hover .support__card-icon i {
    color: white;
    transform: scale(1.1);
}

/* Card Content */
.support__card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.support__card h4 {
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: 0.5rem;
}

.support__price {
    font-size: 2.5rem;
    font-weight: var(--font-semi-bold);
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.support__price small {
    font-size: 1.25rem;
}

.support__description {
    color: var(--text-color);
    font-size: var(--small-font-size);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Features List */
.support__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.support__features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    padding: 0.35rem 0;
}

.support__features li i {
    color: #28a745;
    font-size: 0.7rem;
}

/* Buttons */
.support__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--container-color);
    border: 2px solid var(--first-color);
    border-radius: 50px;
    color: var(--first-color);
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
    text-decoration: none;
}

.support__btn:hover {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.support__btn i {
    transition: transform 0.3s ease;
}

.support__btn:hover i {
    transform: translateX(3px);
}

.support__btn--featured {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    color: white;
    border-color: transparent;
}

.support__btn--featured:hover {
    transform: translateY(-2px) scale(1.02);
}

.support__btn--sponsor {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #333;
    border-color: transparent;
}

.support__btn--sponsor:hover {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

/* Payment Methods */
.support__payment {
    text-align: center;
    margin-bottom: 3rem;
    width: 100%;
}

.support__payment h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--normal-font-size);
    color: var(--title-color);
    margin-bottom: 1.25rem;
}

.support__payment h4 i {
    color: #28a745;
}

.support__payment-methods {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.support__payment-method {
    width: 60px;
    height: 45px;
    background: var(--container-color);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.support__payment-method::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 0.75rem;
    background: var(--title-color);
    color: var(--container-color);
    font-size: var(--smaller-font-size);
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.support__payment-method:hover::before {
    opacity: 1;
    visibility: visible;
}

.support__payment-method:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.support__payment-method i {
    font-size: 1.5rem;
    color: var(--text-color);
}

/* Stats */
.support__stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    width: 100%;
}

.support__stat {
    text-align: center;
    padding: 1.5rem 2rem;
    background: var(--container-color);
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    min-width: 150px;
    transition: transform 0.3s ease;
}

.support__stat:hover {
    transform: translateY(-5px);
}

.support__stat-icon {
    font-size: 1.5rem;
    color: var(--first-color);
    margin-bottom: 0.5rem;
    display: block;
}

.support__stat-number {
    display: block;
    font-size: var(--h1-font-size);
    font-weight: var(--font-semi-bold);
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.support__stat-text {
    font-size: var(--small-font-size);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Thanks Section */
.support__thanks {
    text-align: center;
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1.25rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    width: 100%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.support__thanks-stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.support__thanks-stars i {
    font-size: 1.25rem;
    color: #ffd700;
    animation: twinkle 1.5s ease-in-out infinite;
}

.support__thanks-stars i:nth-child(2) {
    animation-delay: 0.3s;
}

.support__thanks-stars i:nth-child(3) {
    animation-delay: 0.6s;
}

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

.support__thanks h4 {
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: 0.75rem;
}

.support__thanks p {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Avatars */
.support__avatars {
    display: flex;
    justify-content: center;
    gap: 0;
}

.support__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-semi-bold);
    border: 3px solid var(--container-color);
    margin-left: -10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.support__avatar:first-child {
    margin-left: 0;
}

.support__avatar:hover {
    transform: translateY(-5px);
    z-index: 10;
}

.support__avatar--more {
    background: var(--text-color-light);
    font-size: 0.65rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .support__options {
        flex-direction: column;
        align-items: center;
    }
    
    .support__card {
        width: 100%;
        max-width: 300px;
    }
    
    .support__card--featured {
        transform: none;
        order: -1;
    }
    
    .support__card--featured:hover {
        transform: translateY(-10px);
    }
    
    .support__stats {
        gap: 1rem;
    }
    
    .support__stat {
        min-width: 130px;
        padding: 1rem 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    .support__floating-shape {
        opacity: 0.5;
    }
    
    .support__message {
        padding: 1.5rem 1rem;
    }
    
    .support__card {
        padding: 1.5rem 1rem;
        width: 100%;
    }
    
    .support__payment-method {
        width: 50px;
        height: 40px;
    }
    
    .support__stat {
        min-width: 100%;
    }
}

/*==================== ENHANCED CONTACT FORMS ====================*/
.contact__content {
    background-color: var(--input-color);
    border-radius: var(--border-radius);
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    position: relative;
    transition: all var(--animation-normal) ease;
    border: 2px solid transparent;
}

.contact__content:focus-within {
    border-color: var(--first-color);
    box-shadow: 0 0 0 3px rgba(var(--hue-color), 69%, 61%, 0.1);
    transform: translateY(-2px);
}

.contact__label {
    font-size: var(--smaller-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
    transition: all var(--animation-fast) ease;
}

.contact__content:focus-within .contact__label {
    color: var(--first-color);
    transform: translateY(-2px);
}

.contact__input {
    width: 100%;
    background-color: var(--input-color);
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    border: none;
    outline: none;
    padding: var(--space-sm) var(--space-md) var(--space-md) 0;
    resize: vertical;
    transition: all var(--animation-fast) ease;
}

.contact__input::placeholder {
    color: var(--text-color-light);
    transition: opacity var(--animation-fast) ease;
}

.contact__input:focus::placeholder {
    opacity: 0.5;
}

/* Enhanced form states */
.form-group {
    position: relative;
    margin-bottom: var(--space-xl);
}

.form-input {
    width: 100%;
    padding: var(--space-lg);
    border: 2px solid var(--input-color);
    border-radius: var(--border-radius);
    background-color: var(--container-color);
    color: var(--text-color);
    font-size: var(--normal-font-size);
    transition: all var(--animation-normal) ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--first-color);
    box-shadow: 0 0 0 3px rgba(var(--hue-color), 69%, 61%, 0.1);
    transform: translateY(-2px);
}

.form-input:invalid {
    border-color: #ef4444;
}

.form-input:valid {
    border-color: #10b981;
}

.form-label {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    color: var(--text-color-light);
    font-size: var(--normal-font-size);
    transition: all var(--animation-normal) var(--ease-out-back);
    pointer-events: none;
    background-color: var(--container-color);
    padding: 0 var(--space-sm);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    top: -var(--space-sm);
    left: var(--space-md);
    font-size: var(--small-font-size);
    color: var(--first-color);
    font-weight: var(--font-medium);
}

/* Floating label effect */
.floating-label {
    position: relative;
}

.floating-label .form-input {
    padding-top: var(--space-xl);
}

.floating-label .form-label {
    top: var(--space-xl);
    transition: all var(--animation-normal) var(--ease-out-back);
}

.floating-label .form-input:focus + .form-label,
.floating-label .form-input:not(:placeholder-shown) + .form-label {
    top: var(--space-sm);
    font-size: var(--smaller-font-size);
    color: var(--first-color);
}

/* Checkbox and radio enhancements */
.form-checkbox,
.form-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    user-select: none;
}

.form-checkbox input,
.form-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.form-checkbox .checkmark,
.form-radio .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-color-light);
    border-radius: var(--border-radius-sm);
    background-color: var(--container-color);
    transition: all var(--animation-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-radio .checkmark {
    border-radius: 50%;
}

.form-checkbox input:checked ~ .checkmark,
.form-radio input:checked ~ .checkmark {
    background-color: var(--first-color);
    border-color: var(--first-color);
}

.form-checkbox .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    opacity: 0;
    transition: opacity var(--animation-normal) ease;
}

.form-checkbox input:checked ~ .checkmark::after {
    opacity: 1;
}

.form-radio .checkmark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    opacity: 0;
    transition: opacity var(--animation-normal) ease;
}

.form-radio input:checked ~ .checkmark::after {
    opacity: 1;
}

/*==================== CONTACT SECTION - IMPROVED ====================*/
.contact {
    background: linear-gradient(180deg, var(--body-color) 0%, rgba(102, 126, 234, 0.02) 50%, var(--body-color) 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem;
    width: 100%;
}

.contact__bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.contact__shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.1));
    filter: blur(60px);
}

.contact__shape--1 {
    width: 400px;
    height: 400px;
    top: -10%;
    right: -10%;
}

.contact__shape--2 {
    width: 300px;
    height: 300px;
    bottom: -5%;
    left: -5%;
}

/* Header */
.contact__header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 50px;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--first-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact__label i {
    animation: pulse 2s ease-in-out infinite;
}

/* Container - Override ALL global container styles */
.contact__container,
.contact__container.container,
.contact .contact__container {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    container-type: normal !important;
}

.contact__content-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 2.5rem;
    align-items: start;
    width: 100%;
    min-width: 0;
}

/* Force form section to take full width of grid cell */
.contact__content-wrapper > .contact__form-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

/* Info Section */
.contact__info-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact__info-card {
    background: var(--container-color);
    padding: 1.5rem;
    border-radius: 1rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact__info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(102, 126, 234, 0.2);
}

.contact__info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact__info-icon i {
    font-size: 1.25rem;
    color: var(--first-color);
    transition: all 0.3s ease;
}

.contact__info-card:hover .contact__info-icon {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
}

.contact__info-card:hover .contact__info-icon i {
    color: white;
}

.contact__info-content {
    flex: 1;
}

.contact__info-title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: 0.25rem;
}

.contact__info-text {
    font-size: var(--small-font-size);
    color: var(--text-color);
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.contact__info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--smaller-font-size);
    color: var(--first-color);
    font-weight: var(--font-medium);
    transition: all 0.3s ease;
}

.contact__info-link:hover {
    gap: 0.75rem;
}

.contact__info-link i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.contact__info-link:hover i {
    transform: translateX(3px);
}

/* Availability */
.contact__availability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--smaller-font-size);
    color: #10b981;
    font-weight: var(--font-medium);
}

.contact__availability-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: availabilityPulse 2s ease-in-out infinite;
}

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

/* Social Section */
.contact__social-section {
    background: var(--container-color);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.contact__social-section h4 {
    font-size: var(--small-font-size);
    color: var(--text-color);
    margin-bottom: 1rem;
    text-align: center;
}

.contact__social-links {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.contact__social-link {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.contact__social-link i {
    font-size: 1.1rem;
    color: var(--first-color);
    transition: all 0.3s ease;
}

.contact__social-link:hover {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    transform: translateY(-3px);
}

.contact__social-link:hover i {
    color: white;
}

/* Form Section */
.contact__form-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 1;
}

.contact__form-card {
    background: var(--container-color);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Target the actual form element */
.contact__form-card form,
.contact__form-card > form,
form.contact__form,
form#contact-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

.contact__form-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.contact__form-header h3 {
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.contact__form-header h3 i {
    color: var(--first-color);
}

.contact__form-header p {
    font-size: var(--small-font-size);
    color: var(--text-color);
}

/* Form Elements Box Sizing */
.contact__form *,
.contact__form *::before,
.contact__form *::after {
    box-sizing: border-box;
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

.contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.contact__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

.contact__form-label {
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact__form-label i {
    font-size: 0.8rem;
    color: var(--first-color);
}

.contact__form-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    background: var(--body-color);
    border: 2px solid transparent;
    border-radius: 0.75rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--text-color);
    transition: all 0.3s ease;
    outline: none;
}

.contact__form-input::placeholder {
    color: var(--text-color-light);
}

.contact__form-input:focus {
    border-color: var(--first-color);
    background: var(--container-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.contact__form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

.contact__form-textarea {
    resize: vertical;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
}

.contact__form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    border: none;
    border-radius: 50px;
    color: white;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
}

.contact__form-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.contact__form-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.contact__btn-text,
.contact__btn-loading,
.contact__btn-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact__btn-loading,
.contact__btn-success {
    display: none;
}

.contact__form-btn.loading .contact__btn-text,
.contact__form-btn.loading .contact__btn-icon {
    display: none;
}

.contact__form-btn.loading .contact__btn-loading {
    display: flex;
}

.contact__form-btn.success .contact__btn-text,
.contact__form-btn.success .contact__btn-icon {
    display: none;
}

.contact__form-btn.success .contact__btn-success {
    display: flex;
}

.contact__form-btn.success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.contact__btn-icon {
    transition: transform 0.3s ease;
}

.contact__form-btn:hover:not(:disabled) .contact__btn-icon {
    transform: translateX(3px);
}

/* Progress Bar */
.contact__form-progress {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 0.75rem;
}

.contact__form-progress-bar {
    height: 6px;
    background: rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    position: relative;
}

.contact__form-progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--first-color), #764ba2);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.contact__form-progress-text {
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
}

/* Input Wrapper */
.contact__input-wrapper {
    position: relative;
    width: 100%;
}

.contact__input-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.contact__form-textarea + .contact__input-icon--success,
.contact__form-textarea + .contact__input-icon--error {
    top: 1rem;
    transform: none;
}

.contact__input-icon--success {
    color: #10b981;
}

.contact__input-icon--error {
    color: #ef4444;
}

.contact__form-input.valid ~ .contact__input-icon--success {
    opacity: 1;
}

.contact__form-input.invalid ~ .contact__input-icon--error {
    opacity: 1;
}

.contact__form-input.valid {
    border-color: #10b981 !important;
}

.contact__form-input.invalid {
    border-color: #ef4444 !important;
}

/* Field Error */
.contact__field-error {
    display: block;
    font-size: var(--smaller-font-size);
    color: #ef4444;
    margin-top: 0.35rem;
    min-height: 1.2rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.contact__field-error.show {
    opacity: 1;
    transform: translateY(0);
}

/* Required indicator */
.required {
    color: #ef4444;
    font-weight: var(--font-semi-bold);
}

/* Textarea Footer */
.contact__textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.35rem;
}

.contact__char-count {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.contact__char-count.warning {
    color: #f59e0b;
}

.contact__char-count.danger {
    color: #ef4444;
}

/* Deadline Options */
.contact__deadline-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    width: 100%;
}

.contact__deadline-option {
    cursor: pointer;
    width: 100%;
}

.contact__deadline-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact__deadline-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--body-color);
    border: 2px solid transparent;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    text-align: center;
}

.contact__deadline-box i {
    font-size: 1.25rem;
    color: var(--text-color-light);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.contact__deadline-box span {
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
}

.contact__deadline-box small {
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
    margin-top: 0.25rem;
}

.contact__deadline-option:hover .contact__deadline-box {
    border-color: rgba(102, 126, 234, 0.3);
}

.contact__deadline-option input:checked + .contact__deadline-box {
    border-color: var(--first-color);
    background: rgba(102, 126, 234, 0.05);
}

.contact__deadline-option input:checked + .contact__deadline-box i {
    color: var(--first-color);
}

/* Urgent styling */
.contact__deadline-option input[value="urgent"]:checked + .contact__deadline-box {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.contact__deadline-option input[value="urgent"]:checked + .contact__deadline-box i {
    color: #f59e0b;
}

/* Checkbox */
.contact__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: var(--small-font-size);
    color: var(--text-color);
    line-height: 1.5;
}

.contact__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact__checkbox-custom {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--text-color-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 2px;
}

.contact__checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.contact__checkbox:checked + .contact__checkbox-custom {
    background: linear-gradient(135deg, var(--first-color), #764ba2);
    border-color: var(--first-color);
}

.contact__checkbox:checked + .contact__checkbox-custom::after {
    opacity: 1;
    transform: scale(1);
}

.contact__checkbox:focus + .contact__checkbox-custom {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.contact__privacy-link {
    color: var(--first-color);
    text-decoration: underline;
    transition: color 0.3s ease;
    cursor: pointer;
}

.contact__privacy-link:hover {
    color: #764ba2;
}

/* ===== Privacy Policy Modal ===== */
.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.privacy-modal.active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.privacy-modal__content {
    position: relative;
    width: 90%;
    max-width: 620px;
    max-height: 85vh;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.privacy-modal.active .privacy-modal__content {
    transform: translateY(0) scale(1);
}

.privacy-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.privacy-modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

.privacy-modal__title i {
    color: #667eea;
    font-size: 1.1rem;
}

.privacy-modal__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.privacy-modal__close:hover {
    background: rgba(255, 70, 70, 0.15);
    border-color: rgba(255, 70, 70, 0.2);
    color: #ff6b6b;
}

.privacy-modal__body {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex: 1;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.7;
}

.privacy-modal__body::-webkit-scrollbar {
    width: 5px;
}

.privacy-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.privacy-modal__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.privacy-modal__updated {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 1.25rem;
    font-style: italic;
}

.privacy-modal__body h3 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.privacy-modal__body h3:first-of-type {
    margin-top: 0;
}

.privacy-modal__body p {
    margin-bottom: 0.5rem;
}

.privacy-modal__body ul {
    padding-left: 1.25rem;
    margin: 0.5rem 0 0.75rem;
}

.privacy-modal__body ul li {
    margin-bottom: 0.3rem;
    position: relative;
}

.privacy-modal__body ul li::marker {
    color: #667eea;
}

.privacy-modal__body strong {
    color: #667eea;
    font-weight: 600;
}

.privacy-modal__footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.privacy-modal__btn {
    padding: 0.65rem 1.75rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.privacy-modal__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
}

@media screen and (max-width: 480px) {
    .privacy-modal__content {
        width: 95%;
        max-height: 90vh;
    }

    .privacy-modal__header,
    .privacy-modal__body,
    .privacy-modal__footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .privacy-modal__title {
        font-size: 1rem;
    }
}

.contact__form-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
    margin-top: 1rem;
    text-align: center;
}

.contact__form-note i {
    color: #10b981;
}

/* Response Section */
.contact__response {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.contact__response-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--container-color);
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-size: var(--small-font-size);
    color: var(--text-color);
}

.contact__response-item i {
    color: var(--first-color);
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .contact__content-wrapper {
        grid-template-columns: 350px 1fr;
        gap: 2rem;
    }
}

@media screen and (max-width: 968px) {
    .contact__content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact__info-section {
        order: 2;
    }
    
    .contact__form-section {
        order: 1;
    }
}

@media screen and (max-width: 576px) {
    .contact__form-row {
        grid-template-columns: 1fr;
    }
    
    .contact__form-card {
        padding: 1.5rem;
    }
    
    .contact__deadline-options {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .contact__deadline-box {
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .contact__deadline-box i {
        margin-bottom: 0;
    }
    
    .contact__deadline-box span,
    .contact__deadline-box small {
        margin-top: 0;
    }
    
    .contact__deadline-box small {
        display: inline;
        margin-left: 0.5rem;
    }
    
    .contact__form-progress {
        padding: 0.5rem 0.75rem;
    }
    
    .contact__response {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .contact__response-item {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/*==================== FOOTER ====================*/
.footer {
    padding-top: 0;
}

.footer__bg {
    background: linear-gradient(165deg, #0a0920 0%, #13102e 35%, #1a1040 70%, #24243e 100%);
    padding: 5rem 0 0;
    position: relative;
    overflow: hidden;
}

/* Top border gradient */
.footer__bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4), transparent);
}

/* Decorative glows */
.footer__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
}

.footer__glow--1 {
    width: 450px;
    height: 450px;
    background: #667eea;
    top: -150px;
    left: -120px;
}

.footer__glow--2 {
    width: 350px;
    height: 350px;
    background: #764ba2;
    bottom: -80px;
    right: -80px;
}

.footer__glow--3 {
    width: 200px;
    height: 200px;
    background: #667eea;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.05;
}

.footer__container {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    position: relative;
    z-index: 1;
}

/* Brand */
.footer__brand {
    max-width: 360px;
}

.footer__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFF;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
}

.footer__title-accent {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3rem;
}

.footer__subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.footer__description {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

/* Social icons */
.footer__socials {
    display: flex;
    gap: 0.6rem;
}

.footer__social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
}

.footer__social:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #FFF;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Links group */
.footer__links-title {
    color: #FFF;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
    letter-spacing: 0.3px;
}

.footer__links-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__link {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.footer__link-icon {
    font-size: 0.55rem;
    color: rgba(102, 126, 234, 0.5);
    transition: all 0.3s ease;
}

.footer__link:hover {
    color: #FFF;
    padding-left: 4px;
}

.footer__link:hover .footer__link-icon {
    transform: translateX(3px);
    color: #667eea;
}

/* Contact info */
.footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.84rem;
}

.footer__contact-item a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__contact-item a:hover {
    color: #FFF;
}

.footer__contact-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 0.15rem;
}

.footer__contact-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.footer__contact-item:hover .footer__contact-icon {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.2);
    transform: scale(1.05);
}

/* Bottom bar */
.footer__bottom {
    position: relative;
    z-index: 1;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer__copy {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
}

.footer__made {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
}

.footer__heart {
    color: #e74c3c;
    font-size: 0.65rem;
    animation: heartbeat 1.5s ease-in-out infinite;
}

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

.footer__back-top {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer__back-top:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #FFF;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* Footer responsive */
@media screen and (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer__brand {
        max-width: 100%;
    }

    .footer__socials {
        justify-content: center;
    }

    .footer__links-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__links {
        align-items: center;
    }

    .footer__link:hover {
        padding-left: 0;
    }

    .footer__contact-list {
        align-items: center;
    }

    .footer__bottom-inner {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

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

    .footer__title {
        font-size: 2rem;
    }

    .footer__title-accent {
        font-size: 2.5rem;
    }
}

/*========== SCROLL UP ==========*/
.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -20%;
    background-color: var(--first-color);
    opacity: .8;
    padding: 0 .3rem;
    border-radius: .4rem;
    z-index: var(--z-tooltip);
    transition: .4s;
}

.scrollup:hover {
    background-color: var(--first-color-alt);
}

.scrollup__icon {
    font-size: 1.5rem;
    color: #FFF;
}

/* Show scroll */
.show-scroll {
    bottom: 5rem;
}

/*========== SCROLL BAR ==========*/
::-webkit-scrollbar {
    width: .60rem;
    background-color: var(--scroll-bar-color);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: .5rem;
}

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

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 350px) {
    .container {
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .nav__menu {
        padding: 2rem .25rem 4rem;
    }

    .nav__close {
        right: 1rem;
        top: 0.75rem;
        font-size: 1.25rem;
    }

    .nav__list {
        column-gap: 0;
    }

    .home__content {
        grid-template-columns: .25fr 3fr;
    }

    .home__blob {
        width: 180px;
    }

    .qualification__data {
        gap: .5rem;
    }

    .services__content {
        padding-right: 3.5rem;
    }

    .services__modal {
        padding: 0 .5rem;
    }

    .project__img {
        width: 200px;
    }

    .testimonial__data,
    .testimonial__header {
        flex-direction: column;
        align-items: center;
    }

    .testimonial__img {
        margin-right: 0;
        margin-bottom: var(--mb-0-25);
    }

    .testimonial__data,
    .testimonial__description {
        text-align: center;
    }

    /* Home Stats Responsive - Small screens */
    .home__stats {
        flex-direction: column;
        gap: var(--mb-1);
        margin-top: var(--mb-1-5);
    }

    .home__stat {
        min-width: 100%;
        padding: var(--mb-0-75) var(--mb-1);
    }

    .home__stat-number {
        font-size: var(--h2-font-size);
    }

    .home__stat-text {
        font-size: var(--smaller-font-size);
    }

    /* Portfolio Responsive - Small screens */
    .portfolio__grid {
        justify-content: center !important;
    }

    .portfolio__card {
        width: 100%;
        flex: 0 0 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .portfolio__filters {
        gap: 0.5rem;
    }

    .portfolio__filter-btn {
        padding: 0.5rem 1rem;
        font-size: var(--smaller-font-size);
    }

    .portfolio__action-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* For medium devices */
@media screen and (min-width: 568px) {
    .home__content {
        grid-template-columns: max-content 1fr 1fr;
    }

    .home__data {
        grid-column: initial;
    }

    .home__img {
        order: 1;
        justify-self: center;
    }

    .project__container,
    .contact__container,
    .footer__container {
        grid-template-columns: repeat(2, 1fr);
    }

    .qualification__sections {
        display: grid;
        grid-template-columns: .6fr;
        justify-content: center;
    }

    /* Home Stats Responsive - Medium screens */
    .home__stats {
        flex-direction: row;
        gap: var(--mb-1-5);
        justify-content: space-around;
    }

    .home__stat {
        min-width: 140px;
        flex: 1;
        max-width: 160px;
    }
}

@media screen and (min-width: 768px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }

    body {
        margin: 0;
    }

    .section {
        padding: 6rem 0 2rem;
    }

    .section__subtitle {
        margin-bottom: 4rem;
    }

    .header {
        top: 0;
        bottom: initial;
    }

    .header,
    .main,
    .footer__container {
        padding: 0 1rem;
    }

    .nav {
        height: calc(var(--header-height) + 1.5rem);
        column-gap: 1rem;
    }

    .nav__icon,
    .nav__close,
    .nav__toggle {
        display: none;
    }

    .nav__list {
        display: flex;
        column-gap: 2rem;
    }

    .nav__menu {
        margin-left: auto;
    }

    .change-theme {
        margin: 0;
    }

    .home__container {
        row-gap: 5rem;
    }

    .home__content {
        padding-top: 5.5rem;
        column-gap: 2rem;
        grid-template-columns: max-content 1fr max-content;
        align-items: center;
        justify-items: center;
    }

    .home__social {
        justify-self: start;
        align-self: center;
    }

    .home__data {
        grid-column: 2;
        justify-self: center;
        text-align: center;
        max-width: 600px;
    }

    .home__img {
        grid-column: 3;
        justify-self: end;
        align-self: center;
    }

    .home__blob {
        width: 270px;
    }

    .home__scroll {
        display: block;
    }

    .home__scroll-button {
        margin-left: 3rem;
    }

    /* Home Stats Responsive - Large screens */
    .home__stats {
        gap: var(--mb-2-5);
        margin-top: var(--mb-3);
        justify-content: center;
    }

    .home__stat {
        min-width: 160px;
        padding: var(--mb-1-5) var(--mb-2);
    }

    .home__stat-number {
        font-size: var(--big-font-size);
        margin-bottom: var(--mb-0-5);
    }

    .home__stat-text {
        font-size: var(--normal-font-size);
    }



    .qualification__tabs {
        justify-content: center;
    }

    .qualification__button {
        margin: 0 var(--mb-1);
    }

    .qualification__sections {
        grid-template-columns: .5fr;
    }

    .services__icon {
        font-size: 2rem;
    }

    .services__content {
        padding: 6rem 0 2rem 2.5rem;
    }

    .services__modal-content {
        width: 450px;
    }

    .project {
        text-align: initial;
    }

    .project__bg {
        background: none;
    }

    .project__container {
        background-color: var(--first-color-second);
        border-radius: 1rem;
        padding: 3rem 2.5rem 0;
        grid-template-columns: 1fr max-content;
        column-gap: 3rem;
    }

    .project__data {
        padding-top: .8rem;
    }

    .footer__container {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
}

/* For large devices */
@media screen and (min-width: 1024px) {
    .header,
    .main,
    .footer__container {
        padding: 0;
    }

    .home__blob {
        width: 320px;
    }

    .home__content {
        grid-template-columns: max-content 1fr max-content;
        align-items: center;
        column-gap: 3rem;
        justify-content: space-between;
    }

    .home__social {
        justify-self: start;
        transform: none;
    }

    .home__data {
        justify-self: center;
        text-align: center;
        max-width: 600px;
    }

    .home__img {
        justify-self: end;
    }

    .swiper-portfolio-icon {
        font-size: 3.5rem;
    }

    .swiper-button-prev {
        left: -3.5rem;
    }

    .swiper-button-next {
        right: -3.5rem;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets {
        bottom: -4.5rem;
    }

    .contact__form {
        width: 460px;
    }

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

/*==================== ADDITIONAL RESPONSIVE BREAKPOINTS ====================*/

/* Extra small devices - 475px and up */
@media screen and (min-width: 475px) {
    .container {
        margin-left: var(--space-lg);
        margin-right: var(--space-lg);
    }
    
    .home__content {
        grid-template-columns: 0.3fr 3fr;
        gap: var(--space-lg);
    }
    
}

/* Small devices - 640px and up */
@media screen and (min-width: 640px) {
    .section {
        padding: var(--space-4xl) 0 var(--space-3xl);
    }
    
    .section__title {
        font-size: var(--h1-font-size);
        margin-bottom: var(--space-2xl);
    }
    
    .qualification__container {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Extra large devices - 1280px and up */
@media screen and (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
    
    .home__container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .home__content {
        padding-top: var(--space-6xl);
        column-gap: var(--space-4xl);
        grid-template-columns: max-content 1fr max-content;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
    }

    .home__social {
        justify-self: start;
    }

    .home__data {
        justify-self: center;
        text-align: center;
        max-width: 700px;
    }

    .home__img {
        justify-self: end;
    }
    
    .home__blob {
        width: 400px;
    }
    
    .about__container {
        max-width: 1200px;
        margin: 0 auto;
        column-gap: var(--space-5xl);
    }
    
    .services__content {
        padding: var(--space-4xl) var(--space-2xl) var(--space-xl) var(--space-2xl);
    }
    
    .contact__container {
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* 2XL devices - 1536px and up */
@media screen and (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
    
    .section {
        padding: var(--space-6xl) 0 var(--space-5xl);
    }
    
    .home__content {
        padding-top: 8rem;
        column-gap: 6rem;
    }
    
    .home__blob {
        width: 450px;
    }
    

    

}

/* Ultra-wide screens - 1920px and up */
@media screen and (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .home__container {
        max-width: 1600px;
    }
    
    .section {
        padding: 10rem 0 8rem;
    }
    

}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, 
    *::before, 
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/*==================== UTILITY CLASSES ====================*/
/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-xs); }
.m-2 { margin: var(--space-sm); }
.m-3 { margin: var(--space-md); }
.m-4 { margin: var(--space-lg); }
.m-5 { margin: var(--space-xl); }
.m-6 { margin: var(--space-2xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }
.p-6 { padding: var(--space-2xl); }

/* Flexbox utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }
.gap-5 { gap: var(--space-xl); }
.gap-6 { gap: var(--space-2xl); }

/* Color utilities */
.text-primary { color: var(--first-color); }
.text-secondary { color: var(--text-color); }
.text-light { color: var(--text-color-light); }
.text-title { color: var(--title-color); }
.text-white { color: #ffffff; }

.bg-primary { background-color: var(--first-color); }
.bg-container { background-color: var(--container-color); }
.bg-body { background-color: var(--body-color); }
.bg-transparent { background-color: transparent; }

/* Border utilities */
.border { border: 1px solid var(--text-color-light); }
.border-primary { border: 1px solid var(--first-color); }
.border-t { border-top: 1px solid var(--text-color-light); }
.border-b { border-bottom: 1px solid var(--text-color-light); }
.border-l { border-left: 1px solid var(--text-color-light); }
.border-r { border-right: 1px solid var(--text-color-light); }

.rounded { border-radius: var(--border-radius); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }

/* Shadow utilities */
.shadow { box-shadow: var(--shadow-light); }
.shadow-md { box-shadow: var(--shadow-medium); }
.shadow-lg { box-shadow: var(--shadow-strong); }
.shadow-none { box-shadow: none; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Display utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Z-index utilities */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Width and Height utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

/* Modern layout helpers */
.container-fluid {
    width: 100%;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-4-3 { aspect-ratio: 4/3; }

/* Focus utilities */
.focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*==================== CLASSES UTILITAIRES MODERNES ====================*/

/* Color utilities avec color-mix */
.text-primary { color: var(--first-color); }
.text-secondary { color: color-mix(in srgb, var(--first-color) 80%, var(--text-color) 20%); }
.text-muted { color: var(--text-color-light); }
.text-accent { color: var(--accent-mix); }

/* Background utilities modernes */
.bg-glass { background: var(--surface-glass); }
.bg-elevated { background: var(--surface-elevated); }
.bg-gradient { background: var(--gradient-primary); }
.bg-gradient-radial { background: var(--gradient-radial); }

/* Interactive states avec :is() et :where() */
:is(.btn, .card, .interactive):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

:is(.btn, .card, .interactive):focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
}

/* Modern spacing avec logical properties */
.p-block-sm { padding-block: var(--space-sm); }
.p-block-md { padding-block: var(--space-md); }
.p-block-lg { padding-block: var(--space-lg); }
.p-inline-sm { padding-inline: var(--space-sm); }
.p-inline-md { padding-inline: var(--space-md); }
.p-inline-lg { padding-inline: var(--space-lg); }

.m-block-sm { margin-block: var(--space-sm); }
.m-block-md { margin-block: var(--space-md); }
.m-block-lg { margin-block: var(--space-lg); }
.m-inline-sm { margin-inline: var(--space-sm); }
.m-inline-md { margin-inline: var(--space-md); }
.m-inline-lg { margin-inline: var(--space-lg); }

/* Container queries utilities */
@container (max-width: 600px) {
    .cq-small { font-size: var(--small-font-size); }
    .cq-hide-small { display: none; }
}

@container (min-width: 800px) {
    .cq-large { font-size: var(--h2-font-size); }
    .cq-show-large { display: block; }
}

/* Scroll animations avec scroll-timeline */
@supports (animation-timeline: scroll()) {
    .scroll-fade {
        animation: fade-out linear;
        animation-timeline: scroll(root);
        animation-range: 50% 100%;
    }
    
    @keyframes fade-out {
        to { opacity: 0; }
    }
}

@media (prefers-contrast: high) {
    :root {
        --shadow-light: 0 2px 12px rgba(0, 0, 0, 0.5);
        --shadow-medium: 0 4px 25px rgba(0, 0, 0, 0.6);
    }
}

/* Supports queries pour progressive enhancement */
@supports (backdrop-filter: blur(10px)) {
    .supports-backdrop-blur {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.1);
    }
}

@supports (display: grid) and (gap: 1rem) {
    .supports-grid-gap {
        display: grid;
        gap: var(--space-md);
    }
}

/* Utility classes pour debugging */
.debug { outline: 1px solid red !important; }
.debug-grid { background-image: linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px); background-size: 20px 20px; }