/* --- 1. CORE VARIABLES & RESET --- */
        :root {
            --bg-dark: #0a192f;       /* Deep Midnight Blue */
            --bg-card: rgba(255, 255, 255, 0.05); /* Glass Effect */
            --text-light: #e6e6e6;    /* Platinum Silver */
            --accent-blue: #007bff;   /* Electric Sapphire */
            --accent-gold: #c5a059;   /* Matte Gold */
            --font-head: 'Montserrat', sans-serif;
            --font-body: 'Open Sans', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

        h1, h2, h3, h4 {
            font-family: var(--font-head);
            color: white;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        a { text-decoration: none; color: white; transition: 0.3s; }
        ul { list-style: none; }

        /* --- 2. UTILITY CLASSES --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            border-radius: 4px;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--accent-blue);
            color: white;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
            background-color: #0056b3;
        }

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

        .btn-outline:hover {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .gold-text { color: var(--accent-gold); }
        .blue-text { color: var(--accent-blue); }

        /* --- 3. NAVIGATION (STICKY) --- */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(10, 25, 47, 0.95);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

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

        /* LOGO DESIGN: Stacked Monogram Style */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon i {opacity:0}
        .logo-icon {
            font-size: 2rem;
            color: var(--accent-blue);
            background-image: url('../images/badge-logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            /*border: 1px solid var(--accent-gold);*/
        }
        .logo img{

            width:100px;
            height:100px;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .logo-main {
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 1.2rem;
            letter-spacing: 1px;
        }

        .logo-sub {
            font-size: 0.7rem;
            color: var(--accent-gold);
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            font-size: 0.9rem;
            font-weight: 600;
        }

        .nav-links a:hover { color: var(--accent-gold); }

        /* --- 4. HERO SECTION --- */
        .hero {
            height: 90vh;
            background: linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.8)), url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: 80px;
        }

        .hero-content {
            max-width: 800px;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 40px;
            color: #ccc;
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
        }

        /* --- 5. LOGO TRUST BAR --- */
        .trust-bar {
            padding: 40px 0;
            background: white;
            text-align: center;
        }

        .trust-bar p {
            color: #666;
            font-weight: 700;
            margin-bottom: 20px;
            font-size: 0.8rem;
            text-transform: uppercase;
        }

        .logo-grid {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            opacity: 0.6;
            filter: grayscale(100%);
        }

        .logo-placeholder {
            font-weight: 800;
            color: #333;
            font-size: 1.5rem;
            font-family: var(--font-head);
        }

        /* --- 6. PROBLEM SECTION --- */
        .problem-section {
            padding: 80px 0;
            background: var(--bg-dark);
            text-align: center;
        }

        .problem-section h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .problem-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .problem-card {
            padding: 20px;
        }

        .problem-card i {
            font-size: 2rem;
            color: #ff4d4d;
            margin-bottom: 20px;
        }

        /* --- 7. SERVICES (GLASSMORPHISM) --- */
        .services {
            padding: 100px 0;
            background: linear-gradient(180deg, var(--bg-dark) 0%, #0d213f 100%);
            position: relative;
        }

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

        .section-header h2 { font-size: 2.5rem; }
        .section-header .line {
            width: 60px;
            height: 3px;
            background: var(--accent-gold);
            margin: 15px auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .glass-card {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 12px;
            transition: 0.3s;
        }

        .glass-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
        }

        .glass-card i {
            font-size: 2.5rem;
            color: var(--accent-blue);
            margin-bottom: 20px;
        }

        .glass-card h3 { font-size: 1.2rem; margin-bottom: 15px; }
        .glass-card p { font-size: 0.95rem; color: #aaa; }

        /* --- 8. PORTFOLIO MASONRY --- */
        .portfolio {
            padding: 80px 0;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }

        .portfolio-item {
            position: relative;
            height: 300px;
            overflow: hidden;
            border-radius: 4px;
        }

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

        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            opacity: 0;
            transition: 0.3s;
        }

        .portfolio-item:hover img { transform: scale(1.1); }
        .portfolio-item:hover .overlay { opacity: 1; }

        .overlay h4 { font-size: 1rem; }
        .overlay p { font-size: 0.8rem; color: var(--accent-gold); text-transform: uppercase; font-weight: 700;}

        /* --- 9. THE PROCESS (PLAN) --- */
        .process {
            padding: 100px 0;
            background: #0d213f;
            text-align: center;
        }

        .process-steps {
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .step {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        .step-number {
            font-size: 4rem;
            font-weight: 800;
            color: rgba(255,255,255,0.05);
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
        }

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

        .step h3 { margin-bottom: 15px; color: var(--accent-blue); }

        /* --- 10. FOOTER --- */
        footer {
            background: black;
            padding: 80px 0 20px;
            border-top: 3px solid var(--accent-blue);
        }

        .footer-cta {
            text-align: center;
            margin-bottom: 60px;
        }

        .footer-cta h2 { font-size: 2.5rem; margin-bottom: 20px; }
        .footer-links {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #333;
            padding-top: 40px;
            flex-wrap: wrap;
        }

        .footer-col { margin-bottom: 20px; }
        .footer-col h4 { font-size: 0.9rem; margin-bottom: 15px; color: #666; }
        .footer-col p, .footer-col a { font-size: 0.9rem; color: #999; display: block; margin-bottom: 10px; }

        /* --- MEDIA QUERIES --- */
        @media (max-width: 768px) {

            /* --- 4. HERO SECTION --- */
            .hero {
                height: 40vh;
            }


            .hero h1 { font-size: 2rem; }
            .nav-links { display: none; } /* Simplified mobile handling */
            .logo-icon { width: 40px; height: 40px; font-size: 1.5rem; }
            .process-steps { flex-direction: column; }
            .hero-buttons { flex-direction: column; }
        }





        /* --- 3. PAGE HEADER --- */
        .page-header {
            padding: 160px 0 60px;
            text-align: center;
            background: radial-gradient(circle at top, #112240 0%, var(--bg-dark) 70%);
        }

        .page-header h1 { font-size: 3rem; margin-bottom: 20px; }
        .page-header p { color: #aaa; max-width: 600px; margin: 0 auto; font-size: 1.1rem; }
        .line { width: 60px; height: 3px; background: var(--accent-gold); margin: 20px auto; }

        /* --- 4. FILTER SYSTEM --- */
        .filter-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        .nav-links { display: flex; gap: 30px; }
        .nav-links a { font-size: 0.9rem; font-weight: 600; }
        .nav-links a:hover, .nav-links a.active { color: var(--accent-gold); }

        .btn { padding: 12px 30px; border-radius: 4px; font-weight: 700; cursor: pointer; display: inline-block; }
        .btn-primary { background-color: var(--accent-blue); color: white; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); }
        .btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); }



        /* --- 4. FILTER SYSTEM --- */
        .filter-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            color: #ccc;
            padding: 10px 25px;
            border-radius: 30px;
            cursor: pointer;
            font-family: var(--font-head);
            font-size: 0.85rem;
            font-weight: 600;
            transition: 0.3s;
        }

        .filter-btn:hover, .filter-btn.active {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            color: white;
            box-shadow: 0 4px 15px rgba(0,123,255,0.4);
        }

        /* --- 5. PORTFOLIO GRID --- */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 25px;
            padding-bottom: 100px;
        }

        .project-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            overflow: hidden;
            transition: 0.4s;
            position: relative;
            /* For filtering animation */
            opacity: 1;
            transform: scale(1);
        }
        
        .project-card.hidden {
            display: none; 
        }

        .project-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-gold);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .card-image {
            height: 250px;
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .project-card:hover .card-image img { transform: scale(1.1); }

        /* Tag Overlay */
        .card-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0,0,0,0.7);
            color: var(--accent-gold);
            padding: 5px 12px;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 4px;
            text-transform: uppercase;
        }

        .card-content {
            padding: 25px;
        }

        .card-content h3 { font-size: 1.2rem; margin-bottom: 10px; }
        
        /* The "StoryBrand" approach: Focus on the Result */
        .result-text {
            font-size: 0.9rem;
            color: #ccc;
            margin-bottom: 15px;
            border-left: 2px solid var(--accent-blue);
            padding-left: 10px;
        }

        .client-logo {
            font-size: 0.8rem;
            color: #666;
            font-weight: 700;
            text-transform: uppercase;
            margin-top: auto;
        }




        .page-header h1 { font-size: 3rem; margin-bottom: 20px; }
        .page-header p { color: #aaa; max-width: 600px; margin: 0 auto; font-size: 1.1rem; }
        .line { width: 60px; height: 3px; background: var(--accent-gold); margin: 20px auto; }

        /* --- 4. VERTICAL TIMELINE --- */
        .timeline-section {
            padding: 50px 0 100px;
            position: relative;
        }

        /* The vertical line */
        .timeline-section::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, var(--accent-blue), var(--accent-gold));
            opacity: 0.3;
            z-index: 0;
        }

        .timeline-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }

        /* Even items reverse direction */
        .timeline-item:nth-child(even) { flex-direction: row-reverse; }

        .timeline-content {
            width: 45%;
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 12px;
            position: relative;
            transition: 0.3s;
        }

        .timeline-content:hover {
            border-color: var(--accent-gold);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        /* The Number Badge */
        .timeline-number {
            font-size: 4rem;
            font-weight: 800;
            color: rgba(255,255,255,0.05);
            position: absolute;
            top: 10px; right: 20px;
            line-height: 1;
        }

        .timeline-content h3 { color: var(--accent-blue); margin-bottom: 10px; font-size: 1.3rem; }
        .timeline-content h4 { font-size: 0.9rem; margin-bottom: 15px; color: white; }
        .timeline-content p { font-size: 0.9rem; color: #aaa; }

        /* The Center Dot */
        .timeline-dot {
            width: 20px; height: 20px;
            background: var(--bg-dark);
            border: 3px solid var(--accent-gold);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .spacer { width: 45%; } /* Keeps flex layout balanced */

        /* --- 5. FAQ SECTION (Accordion) --- */
        .faq-section {
            padding: 80px 0;
            background: #0d213f;
        }
        
        .faq-header { text-align: center; margin-bottom: 50px; }
        .faq-header h2 { font-size: 2rem; }

        .accordion { max-width: 800px; margin: 0 auto; }

        .accordion-item {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
        }

        .accordion-item summary {
            padding: 20px;
            font-weight: 600;
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .accordion-item summary:hover { color: var(--accent-gold); }
        
        .accordion-item summary::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--accent-blue);
        }

        details[open] summary::after { content: '-'; color: var(--accent-gold); }

        .accordion-content {
            padding: 0 20px 20px;
            color: #aaa;
            font-size: 0.95rem;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        /* --- 6. FOOTER --- */
        footer {
            background: black; padding: 80px 0 20px;
            border-top: 3px solid var(--accent-blue); text-align: center;
        }
        .footer-cta h2 { font-size: 2.5rem; margin-bottom: 20px; }
        .footer-links { display: flex; justify-content: center; gap: 40px; margin-top: 40px; border-top: 1px solid #333; padding-top: 40px;}
        .footer-links a { color: #666; font-size: 0.9rem; }
        .footer-links a:hover { color: white; }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .timeline-section::before { left: 20px; } /* Move line to left */
            
            .timeline-item { flex-direction: column; align-items: flex-start; margin-left: 50px; }
            .timeline-item:nth-child(even) { flex-direction: column; }
            
            .timeline-dot { left: -39px; } /* Align dot to left line */
            
            .timeline-content { width: 100%; margin-bottom: 20px; }
            .spacer { display: none; }
            
            .page-header h1 { font-size: 2rem; }
        }










        /* --- 4. DETAILED SERVICES (Alternating Layout) --- */
        .service-block {
            padding: 80px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .service-row {
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .service-row.reverse { flex-direction: row-reverse; }

        .service-text { flex: 1; }
        .service-img { flex: 1; height: 400px; border-radius: 8px; overflow: hidden; position: relative; }
        
        .service-img img {
            width: 100%; height: 100%; object-fit: cover;
            transition: 0.5s;
        }

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

        .service-text h2 { font-size: 2rem; margin-bottom: 15px; color: white; }
        .service-text h3 { font-size: 1rem; color: var(--accent-blue); margin-bottom: 20px; letter-spacing: 1px; }
        .service-text p { margin-bottom: 20px; color: #ccc; }
        
        .feature-list { margin-bottom: 30px; }
        .feature-list li { margin-bottom: 10px; color: #ddd; }
        .feature-list li i { color: var(--accent-gold); margin-right: 10px; }

        /* --- 5. ADD-ON GRID --- */
        .addons-section { padding: 100px 0; text-align: center; }
        .addons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .addon-card {
            background: var(--bg-card);
            padding: 30px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.05);
            transition: 0.3s;
        }

        .addon-card:hover { border-color: var(--accent-blue); transform: translateY(-5px); }
        .addon-card i { font-size: 2rem; color: var(--accent-blue); margin-bottom: 20px; }
        .addon-card h4 { font-size: 1.1rem; margin-bottom: 10px; }
        .addon-card p { font-size: 0.9rem; color: #aaa; }

        /* --- 6. PACKAGES (Pricing Tiers) --- */
        .packages-section {
            padding: 80px 0 120px;
            background: #0d213f;
        }

        .packages-grid {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            margin-top: 60px;
        }

        .package-card {
            background: var(--bg-dark);
            border: 1px solid rgba(255,255,255,0.1);
            padding: 40px 30px;
            border-radius: 12px;
            width: 350px;
            text-align: center;
            position: relative;
            transition: 0.3s;
        }

        /* The Popular Card */
        .package-card.popular {
            border: 1px solid var(--accent-gold);
            transform: scale(1.05);
            background: rgba(197, 160, 89, 0.05); /* Tinted Gold */
            box-shadow: 0 0 30px rgba(197, 160, 89, 0.1);
        }

        .popular-tag {
            position: absolute;
            top: -15px; left: 50%; transform: translateX(-50%);
            background: var(--accent-gold);
            color: black;
            padding: 5px 20px;
            font-size: 0.8rem;
            font-weight: 800;
            text-transform: uppercase;
            border-radius: 20px;
        }

        .package-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
        .package-card .desc { font-size: 0.9rem; color: #aaa; margin-bottom: 30px; height: 40px;}
        
        .pkg-list { text-align: left; margin-bottom: 30px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
        .pkg-list li { margin-bottom: 12px; font-size: 0.9rem; display: flex; align-items: flex-start; }
        .pkg-list li i { color: var(--accent-blue); margin-right: 10px; margin-top: 5px; }
        .package-card.popular .pkg-list li i { color: var(--accent-gold); }

        /* --- 7. SEO FOOTER BLOCK (Text Heavy) --- */
        .seo-block { padding: 60px 0; background: var(--bg-dark); color: #555; font-size: 0.8rem; text-align: center; }
        .seo-block h4 { color: #666; margin-bottom: 15px; }
        .seo-block p { max-width: 800px; margin: 0 auto 10px; }

        /* --- FOOTER --- */
        footer {
            background: black; padding: 80px 0 20px;
            border-top: 3px solid var(--accent-blue); text-align: center;
        }
        .footer-cta h2 { font-size: 2.5rem; margin-bottom: 20px; }
        .footer-links { display: flex; justify-content: center; gap: 40px; margin-top: 40px; border-top: 1px solid #333; padding-top: 40px;}
        .footer-links a { color: #666; font-size: 0.9rem; }
        .footer-links a:hover { color: white; }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .service-row, .service-row.reverse { flex-direction: column; }
            .service-img { width: 100%; height: 300px; }
            .package-card.popular { transform: scale(1); }
            .page-header h1 { font-size: 2.2rem; }
        }
    













        /* --- 3. HERO (The Story / Empathy) --- */
        .about-hero {
            padding: 180px 0 100px;
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .about-text { flex: 1; }
        .about-text h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.1; }
        .about-text .highlight { color: var(--accent-blue); }
        .about-text h4 { color: var(--accent-gold); margin-bottom: 20px; font-size: 0.9rem; letter-spacing: 2px; }

        .about-image {
            flex: 1;
            position: relative;
        }
        
        .about-image img {
            width: 100%;
            border-radius: 12px;
            box-shadow: 20px 20px 0px rgba(0, 123, 255, 0.1); /* Stylized shadow for modern look */
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* --- 4. STATS BAR (Authority) --- */
        .stats-bar {
            background: #0d213f;
            padding: 60px 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        
        .stats-grid {
            display: flex;
            justify-content: space-around;
            text-align: center;
            flex-wrap: wrap;
            gap: 30px;
        }

        .stat-item h2 { font-size: 3rem; color: var(--accent-gold); margin-bottom: 5px; }
        .stat-item p { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; color: white; margin: 0; }

        /* --- 5. TEAM SECTION --- */
        .team-section { padding: 100px 0; }
        .section-header { text-align: center; margin-bottom: 60px; }
        .section-header h2 { font-size: 2.5rem; }
        .line { width: 60px; height: 3px; background: var(--accent-gold); margin: 20px auto; }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

        .team-card {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            overflow: hidden;
            transition: 0.3s;
        }

        .team-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); }

        .member-img { height: 300px; width: 100%; overflow: hidden; background: #000; }
        .member-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: 0.3s; }
        .team-card:hover .member-img img { opacity: 1; transform: scale(1.05); }

        .member-info { padding: 25px; text-align: center; }
        .member-info h3 { font-size: 1.2rem; margin-bottom: 5px; }
        .member-info span { color: var(--accent-gold); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 15px; }
        .member-info p { font-size: 0.9rem; margin-bottom: 0; }

        /* --- 6. VALUES / MISSION --- */
        .values-section {
            padding: 80px 0;
            background: linear-gradient(90deg, #0d213f 0%, var(--bg-dark) 100%);
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .value-item i { font-size: 2rem; color: var(--accent-blue); margin-bottom: 20px; }
        .value-item h3 { margin-bottom: 15px; }

        /* --- 7. FOOTER --- */
        footer {
            background: black; padding: 80px 0 20px;
            border-top: 3px solid var(--accent-blue); text-align: center;
        }
        .footer-cta h2 { font-size: 2.5rem; margin-bottom: 20px; }
        .footer-links { display: flex; justify-content: center; gap: 40px; margin-top: 40px; border-top: 1px solid #333; padding-top: 40px;}
        .footer-links a { color: #666; font-size: 0.9rem; }
        .footer-links a:hover { color: white; }

        /* --- MOBILE --- */
        @media (max-width: 768px) {
            .about-hero { flex-direction: column; padding-top: 120px; }
            .nav-links { display: none; }
            .about-text h1 { font-size: 2.2rem; }
        }