/* ============================================
   METINGZ ABOUT US PAGE STYLESHEET
   Version: 2.1 | Modern, Responsive, Accessible
   Fixes: hero text contrast, visual polish pass
   ============================================ */

/* --------------------------------------------
   1. DESIGN TOKENS & CUSTOM PROPERTIES
   -------------------------------------------- */
:root {
    /* Primary Brand Palette (Metingz Blue) */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;

    /* Accent Palette (Emerald / Growth) */
    --accent-50: #ecfdf5;
    --accent-100: #d1fae5;
    --accent-200: #a7f3d0;
    --accent-300: #6ee7b7;
    --accent-400: #34d399;
    --accent-500: #10b981;
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065f46;

    /* Warm Accent (Amber / Energy) */
    --warm-50: #fffbeb;
    --warm-100: #fef3c7;
    --warm-200: #fde68a;
    --warm-400: #fbbf24;
    --warm-500: #f59e0b;
    --warm-600: #d97706;

    /* Neutral Grays */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* Semantic Colors */
    --white: #ffffff;
    --black: #000000;
    --success: #10b981;
    --error: #ef4444;

    /* Text-on-dark helpers (used on the hero / mission / contact sections).
       Defined explicitly as rgba instead of relying on element opacity, so
       nothing further down the cascade can accidentally wash them out. */
    --on-dark-100: rgba(255, 255, 255, 1);
    --on-dark-90: rgba(255, 255, 255, 0.92);
    --on-dark-75: rgba(255, 255, 255, 0.78);

    /* Typography Scale (Fluid) */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.35rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.75vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
    --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.25rem);

    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Section Padding */
    --section-padding-y: clamp(3rem, 6vw, 7rem);
    --section-padding-x: clamp(1rem, 3vw, 2.5rem);

    /* Border Radius */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 10px 25px -5px rgba(37, 99, 235, 0.35);
    --shadow-accent: 0 10px 25px -5px rgba(16, 185, 129, 0.35);

    /* Transitions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --transition-fast: 150ms var(--ease-in-out);
    --transition-base: 250ms var(--ease-in-out);
    --transition-slow: 400ms var(--ease-in-out);

    /* Container */
    --container-max: 1280px;
    --container-narrow: 960px;
}

/* --------------------------------------------
   2. GLOBAL RESETS & BASE STYLES
   Scoped to this page's own sections only, so nothing here
   leaks into the navbar/footer supplied by base.html.
   -------------------------------------------- */
.about-hero,
.company-info-section,
.quote-section,
.about-section,
.mission-section,
.features-section,
.how-it-works-section,
.team-section,
.contact-section {
    box-sizing: border-box;
}

.about-hero *,
.company-info-section *,
.quote-section *,
.about-section *,
.mission-section *,
.features-section *,
.how-it-works-section *,
.team-section *,
.contact-section * {
    box-sizing: border-box;
}

.about-hero img,
.company-info-section img,
.team-section img {
    max-width: 100%;
    height: auto;
    display: block;
}

.about-hero a,
.company-info-section a,
.contact-section a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

/* --------------------------------------------
   3. UTILITY ANIMATIONS
   -------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

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

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

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

/* --------------------------------------------
   4. HERO SECTION
   FIX: the badge, title, description and stats used to rely on the
   whole section's white text color plus a low element opacity
   (0.85-0.92) sitting on top of a busy multi-layer background
   (two radial glows + a diagonal SVG triangle + a separate overlay).
   Stacking several semi-transparent layers under semi-transparent text
   is what was washing the copy out in places, especially the
   description line right under the heading.
   Fix: flatten the background to a single reliable dark gradient,
   push the decorative glows behind it at low, fixed opacity, set text
   colors as explicit solid/near-solid values instead of compounding
   opacity, and add a soft text-shadow for extra legibility.
   -------------------------------------------- */
.about-hero {
    position: relative;
    min-height: clamp(560px, 78vh, 760px);
    display: flex;
    align-items: center;
    padding: var(--section-padding-y) 0;
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-950) 100%);
    color: var(--on-dark-100);
    overflow: hidden;
    isolation: isolate;
}

.hero-background {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(96, 165, 250, 0.16) 0%, transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.14) 0%, transparent 55%);
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Darker, flatter overlay so every child element has guaranteed
       contrast, regardless of where the radial glows land. */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.82) 100%);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 var(--space-4);
    animation: fadeInUp 0.8s var(--ease-out) both;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    padding: 0.6rem 1.5rem;
    margin-bottom: var(--space-8);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark-100);
    animation: fadeInUp 0.8s var(--ease-out) 0.1s both;
}

.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-400);
    box-shadow: 0 0 12px var(--accent-400);
    animation: pulseGlow 2.2s infinite;
}

.hero-title {
    font-family: var(--font-family-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-6);
    color: var(--on-dark-100);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    animation: fadeInUp 0.8s var(--ease-out) 0.15s both;
}

.hero-description {
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    line-height: 1.6;
    margin-bottom: var(--space-12);
    /* Explicit near-white, not an inherited/compounded opacity value. */
    color: var(--on-dark-90);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s var(--ease-out) 0.25s both;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6);
    max-width: 42rem;
    margin: 0 auto;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.8s var(--ease-out) 0.35s both;
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
    transition: transform var(--transition-base);
}

.stat-item:hover {
    transform: translateY(-4px);
}

.stat-number {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    line-height: 1.1;
    margin-bottom: var(--space-2);
    color: var(--on-dark-100);
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-dark-75);
}

/* --------------------------------------------
   5. COMPANY INFORMATION SECTION
   -------------------------------------------- */
.company-info-section {
    padding: var(--section-padding-y) 0;
    background: var(--neutral-50);
    position: relative;
}

.company-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neutral-200), transparent);
}

.company-card {
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--neutral-200);
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    animation: fadeInUp 0.7s var(--ease-out) both;
}

.company-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500), var(--warm-500));
    background-size: 200% 100%;
    animation: gradientShift 7s ease infinite;
}

.company-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2xl);
}

.company-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.company-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base);
}

.company-card:hover .company-icon {
    transform: rotate(-4deg) scale(1.04);
}

.company-header h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    letter-spacing: -0.02em;
    margin: 0;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.company-details p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--neutral-600);
    margin: 0;
}

.company-details p:first-child {
    font-size: var(--text-lg);
    color: var(--neutral-700);
}

/* --------------------------------------------
   6. QUOTE SECTION
   -------------------------------------------- */
.quote-section {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(135deg, var(--accent-50) 0%, var(--primary-50) 55%, var(--warm-50) 100%);
    position: relative;
    overflow: hidden;
}

.quote-section::before,
.quote-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.4;
    pointer-events: none;
}

.quote-section::before {
    width: 380px;
    height: 380px;
    background: var(--primary-200);
    top: -180px;
    left: -100px;
}

.quote-section::after {
    width: 280px;
    height: 280px;
    background: var(--accent-200);
    bottom: -140px;
    right: -80px;
}

.quote-card {
    position: relative;
    z-index: 2;
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: clamp(2rem, 5vw, 4rem);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--neutral-200);
    text-align: center;
    max-width: 52rem;
    margin: 0 auto;
    overflow: hidden;
    transition: transform var(--transition-base);
    animation: scaleIn 0.7s var(--ease-out) both;
}

.quote-card:hover {
    transform: scale(1.008);
}

.quote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-500), var(--primary-500));
}

.quote-card::after {
    content: '\201C';
    position: absolute;
    top: -2.5rem;
    right: 2rem;
    font-size: 10rem;
    font-family: Georgia, serif;
    color: var(--primary-50);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.quote-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, var(--accent-50), var(--accent-100));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    color: var(--accent-600);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-md);
    animation: float 4s ease-in-out infinite;
}

.quote-text {
    position: relative;
    z-index: 1;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: 1.6;
    color: var(--neutral-800);
    margin-bottom: var(--space-6);
    font-style: italic;
    letter-spacing: -0.01em;
}

.quote-author {
    position: relative;
    z-index: 1;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--primary-600);
    letter-spacing: 0.02em;
}

/* --------------------------------------------
   7. ABOUT / WHY SECTION
   -------------------------------------------- */
.about-section {
    padding: var(--section-padding-y) 0;
    background: var(--white);
}

.section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.7s var(--ease-out) both;
}

.section-header h2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    color: var(--neutral-900);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: var(--space-4);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
}

.section-header p {
    font-size: var(--text-lg);
    color: var(--neutral-500);
    line-height: 1.6;
    margin-top: var(--space-6);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
    max-width: 72rem;
    margin: 0 auto;
}

.content-text {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--neutral-600);
    animation: slideInLeft 0.7s var(--ease-out) both;
}

.content-text p {
    margin-bottom: var(--space-6);
}

.content-text p:last-child {
    margin-bottom: 0;
}

.content-text strong {
    color: var(--primary-700);
    font-weight: var(--font-semibold);
}

.content-visual {
    animation: slideInRight 0.7s var(--ease-out) both;
}

.visual-card {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--accent-50) 100%);
    border-radius: var(--radius-2xl);
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
    border: 1px solid var(--primary-100);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.visual-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.visual-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.visual-icon {
    width: 5.5rem;
    height: 5.5rem;
    background: var(--white);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    color: var(--primary-600);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    transition: transform var(--transition-base);
}

.visual-card:hover .visual-icon {
    transform: scale(1.08) rotate(4deg);
}

.visual-card h3 {
    position: relative;
    z-index: 1;
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}

.visual-card p {
    position: relative;
    z-index: 1;
    font-size: var(--text-base);
    color: var(--neutral-600);
    line-height: 1.6;
}

/* --------------------------------------------
   8. MISSION SECTION
   -------------------------------------------- */
.mission-section {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
    position: relative;
    overflow: hidden;
}

.mission-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(96, 165, 250, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 42%);
    pointer-events: none;
}

.mission-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: clamp(2rem, 5vw, 4rem);
    box-shadow: var(--shadow-2xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    max-width: 60rem;
    margin: 0 auto;
    overflow: hidden;
    animation: scaleIn 0.7s var(--ease-out) both;
}

.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500), var(--warm-500));
    background-size: 200% 100%;
    animation: gradientShift 7s ease infinite;
}

.mission-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.mission-header h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--neutral-900);
    letter-spacing: -0.02em;
    margin: 0;
}

.mission-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    box-shadow: var(--shadow-md);
    animation: float 4s ease-in-out infinite;
}

.mission-content p {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--neutral-700);
    margin: 0;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------
   9. FEATURES SECTION
   -------------------------------------------- */
.features-section {
    padding: var(--section-padding-y) 0;
    background: var(--neutral-50);
    position: relative;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 80rem;
    margin: 0 auto;
}

.feature-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-200);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.55s var(--ease-out) both;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

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

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

.feature-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    color: var(--primary-600);
    flex-shrink: 0;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: var(--white);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: var(--shadow-primary);
}

.feature-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.feature-card p {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------
   10. HOW IT WORKS SECTION
   -------------------------------------------- */
.how-it-works-section {
    padding: var(--section-padding-y) 0;
    background: var(--white);
    position: relative;
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 80rem;
    margin: 0 auto;
    position: relative;
}

.step-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-200);
    text-align: center;
    position: relative;
    transition: all var(--transition-base);
    animation: fadeInUp 0.55s var(--ease-out) both;
    overflow: hidden;
}

.step-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

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

.step-card:hover::after {
    transform: scaleX(1);
}

.step-number {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: var(--white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    margin: 0 auto var(--space-5);
    box-shadow: var(--shadow-primary);
    transition: transform var(--transition-base);
}

.step-card:hover .step-number {
    transform: scale(1.08) rotate(8deg);
}

.step-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}

.step-card p {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------
   11. TEAM SECTION
   Photo boxes are 4:3 and fully responsive (object-fit: cover), so
   there is no single fixed pixel size the image is displayed at.
   See the note at the end of this file for the recommended upload
   dimensions and resolution for the Davis and Akhira photos.
   -------------------------------------------- */
.team-section {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(180deg, var(--neutral-50) 0%, var(--white) 100%);
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    max-width: 64rem;
    margin: 0 auto;
}

.team-member {
    background: var(--white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-200);
    transition: all var(--transition-base);
    animation: fadeInUp 0.6s var(--ease-out) both;
}

.team-member:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2xl);
    border-color: var(--primary-200);
}

.member-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--neutral-100);
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* If default_image.webp is a small placeholder graphic rather than a
       photo, "cover" can crop or blur it. Swap in real photos sized as
       described at the end of this file for the sharpest result. */
    transition: transform var(--transition-slow);
}

.team-member:hover .member-image img {
    transform: scale(1.06);
}

.member-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.team-member:hover .member-overlay,
.team-member:focus-within .member-overlay {
    opacity: 1;
}

.social-links {
    display: flex;
    gap: var(--space-3);
    transform: translateY(0.75rem);
    transition: transform var(--transition-base);
}

.team-member:hover .social-links,
.team-member:focus-within .social-links {
    transform: translateY(0);
}

.social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    transition: all var(--transition-fast);
    backdrop-filter: blur(10px);
}

.social-link:hover {
    background: var(--white);
    color: var(--primary-700);
    transform: translateY(-2px) scale(1.08);
    box-shadow: var(--shadow-lg);
}

.member-info {
    padding: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
}

.member-info h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
    letter-spacing: -0.01em;
}

.member-role {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--primary-600);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.member-bio {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: 1.7;
    margin: 0;
}

/* --------------------------------------------
   12. CONTACT CTA SECTION
   -------------------------------------------- */
.contact-section {
    padding: var(--section-padding-y) 0;
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-950) 100%);
    color: var(--on-dark-100);
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(96, 165, 250, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 85% 75%, rgba(16, 185, 129, 0.14) 0%, transparent 42%);
    pointer-events: none;
}

.contact-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 52rem;
    margin: 0 auto;
    animation: scaleIn 0.7s var(--ease-out) both;
}

.contact-content h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--on-dark-100);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.contact-content p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-8);
    color: var(--on-dark-90);
    line-height: 1.6;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
}

.contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--white);
    color: var(--primary-700);
    padding: 1rem 2rem;
    border-radius: var(--radius-xl);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 20rem;
    position: relative;
    overflow: hidden;
}

.contact-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.contact-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2xl);
}

.contact-button:hover::before {
    opacity: 1;
}

.contact-button > * {
    position: relative;
    z-index: 1;
}

.contact-button svg {
    transition: transform var(--transition-base);
}

.contact-button:hover svg {
    transform: translateX(3px);
}

.contact-button.secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
}

.contact-button.secondary::before {
    background: rgba(255, 255, 255, 0.12);
}

.contact-button.secondary:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------
   13. RESPONSIVE BREAKPOINTS
   -------------------------------------------- */

/* Small Tablets & Large Phones (>= 480px) */
@media (min-width: 480px) {
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-button {
        width: auto;
        min-width: 12rem;
    }
}

/* Tablets (>= 640px) */
@media (min-width: 640px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .mission-header {
        flex-direction: row;
    }
}

/* Small Laptops (>= 768px) */
@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

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

/* Desktops (>= 1024px) */
@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .step-card {
        padding: var(--space-6) var(--space-4);
    }

    .step-card h3 {
        font-size: var(--text-base);
    }

    .step-card p {
        font-size: var(--text-xs);
    }

    .step-number {
        width: 3rem;
        height: 3rem;
        font-size: var(--text-lg);
    }
}

/* Large Desktops (>= 1280px) */
@media (min-width: 1280px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }

    .team-grid {
        gap: var(--space-10);
    }
}

/* --------------------------------------------
   14. ACCESSIBILITY & PREFERENCES
   -------------------------------------------- */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .about-hero *,
    .company-info-section *,
    .quote-section *,
    .about-section *,
    .mission-section *,
    .features-section *,
    .how-it-works-section *,
    .team-section *,
    .contact-section * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .company-card,
    .quote-card,
    .mission-card,
    .feature-card,
    .step-card,
    .team-member,
    .contact-card {
        border: 2px solid var(--neutral-900);
    }

    .hero-badge {
        border: 2px solid var(--white);
    }

    .contact-button {
        border: 2px solid var(--primary-700);
    }

    .contact-button.secondary {
        border: 2px solid var(--white);
    }
}

/* Focus Visible for Keyboard Navigation */
.about-hero a:focus-visible,
.about-hero button:focus-visible,
.team-section a:focus-visible,
.team-section button:focus-visible,
.social-link:focus-visible,
.contact-button:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* Print Styles */
@media print {
    .about-hero,
    .contact-section,
    .quote-section {
        background: var(--white) !important;
        color: var(--black) !important;
    }

    .hero-title,
    .hero-description,
    .contact-content h2,
    .contact-content p {
        text-shadow: none !important;
        color: var(--black) !important;
    }

    .feature-card,
    .step-card,
    .team-member,
    .company-card,
    .mission-card {
        box-shadow: none !important;
        border: 1px solid var(--neutral-300) !important;
    }

    .member-overlay,
    .social-links {
        display: none !important;
    }
}

/* --------------------------------------------
   15. SELECTION STYLING
   Scoped so it doesn't override selection styling elsewhere on the site.
   -------------------------------------------- */
.about-hero ::selection,
.company-info-section ::selection,
.quote-section ::selection,
.about-section ::selection,
.mission-section ::selection,
.features-section ::selection,
.how-it-works-section ::selection,
.team-section ::selection,
.contact-section ::selection {
    background-color: var(--primary-600);
    color: var(--white);
}

/* --------------------------------------------
   16. STAGGERED ANIMATION DELAYS
   -------------------------------------------- */
.feature-card:nth-child(1) { animation-delay: 0.05s; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.15s; }
.feature-card:nth-child(4) { animation-delay: 0.2s; }
.feature-card:nth-child(5) { animation-delay: 0.25s; }
.feature-card:nth-child(6) { animation-delay: 0.3s; }

.step-card:nth-child(1) { animation-delay: 0.05s; }
.step-card:nth-child(2) { animation-delay: 0.1s; }
.step-card:nth-child(3) { animation-delay: 0.15s; }
.step-card:nth-child(4) { animation-delay: 0.2s; }
.step-card:nth-child(5) { animation-delay: 0.25s; }

.team-member:nth-child(1) { animation-delay: 0.1s; }
.team-member:nth-child(2) { animation-delay: 0.2s; }
.team-member:nth-child(3) { animation-delay: 0.3s; }

/* --------------------------------------------
   17. SCROLL-REVEAL HOOK
   (Only takes effect if your JS adds "is-visible" via IntersectionObserver.
   If no such script exists, this rule never applies and can be ignored
   or removed -- it does not hide anything by itself.)
   -------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------
   18. HELPER UTILITIES
   -------------------------------------------- */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.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;
}

/* --------------------------------------------
   TEAM PHOTO GUIDANCE (Davis & Akhira)

   .member-image is set to aspect-ratio: 4 / 3 with object-fit: cover,
   and the box's on-screen WIDTH is fluid (it comes from .team-grid,
   which is 1 column on phones, 2 columns from 640px, inside a
   64rem / 1024px max-width container). There is therefore no single
   fixed pixel size the photo is displayed at -- it can render anywhere
   from roughly 300px to 480px wide depending on the viewport.

   Recommended source files to upload as default_image.webp
   replacements for Davis and Akhira:
     - Aspect ratio: 4:3 (matches .member-image exactly, so nothing
       gets cropped unexpectedly)
     - Minimum size:   800 x 600 px
     - Recommended:   1200 x 900 px (sharp on retina / high-DPI screens)
     - Format:        .webp (already used) or .jpg, sRGB color
     - File size:     aim for under ~200KB each after compression
     - Framing:       head-and-shoulders portrait, subject centred,
                       since object-fit: cover will crop the edges
                       first on very narrow or very wide screens
   -------------------------------------------- */

/* --------------------------------------------
   END OF STYLESHEET
   -------------------------------------------- */