/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* PREMIUM PALETTE V2 - High Contrast */
    --bg-dark: #0E0E0E;
    --bg-grey: #1F1F1F;
    --bg-card: #222222;
    --bg-card-hover: #2A2A2A;

    --bg-light: #F4F4F4;
    /* Process/Results */
    --bg-portfolio: #F1ECE6;
    /* Warm Beige */

    --primary-orange: #FF6A00;
    --primary-orange-hover: #E65A00;

    --white: #FFFFFF;
    --text-main: #F8F8F8;
    --text-muted: #888888;

    --text-dark-main: #111111;
    /* For light sections */
    --text-dark-muted: #444444;
    /* For light sections */

    --border-dark: #222222;
    --border-light: #E0E0E0;
    /* For light sections */

    /* GRADIENTS */
    --gradient-orange: linear-gradient(135deg, #FF6A00 0%, #FF8A00 100%);
    --gradient-dark: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 1) 100%);

    /* SHADOWS & RADIUS */
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 50px rgba(255, 106, 0, 0.15);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;

    /* LAYOUT */
    --container-width: 1240px;
    --font-heading: 'Satoshi', 'Inter', sans-serif;
    --font-body: 'Poppins', 'Inter', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

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

/* =========================================
   2. UTILITIES & ANIMATIONS
   ========================================= */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.text-gradient {
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* New Logic for Light Sections */
.light-mode {
    color: var(--text-dark-main);
}

.light-mode .section-title {
    color: var(--text-dark-main);
}

.light-mode .section-desc,
.light-mode p {
    color: var(--text-dark-muted);
}

.light-mode .btn-outline {
    border-color: var(--text-dark-main);
    color: var(--text-dark-main);
}

.light-mode .btn-outline:hover {
    background: var(--text-dark-main);
    color: var(--white);
}

.text-center {
    text-align: center;
}

.mt-5 {
    margin-top: 3rem;
}

/* =========================================
   3. BUTTONS
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

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

.btn-primary:hover {
    background: var(--primary-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 106, 0, 0.4);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1.1rem;
}

/* =========================================
   4. HEADER
   ========================================= */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(14, 14, 14, 0.85);
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

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

.nav-links a {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
}

.nav-link-highlight {
    color: var(--primary-orange) !important;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--white);
}

/* =========================================
   5. HERO SECTION
   ========================================= */
.hero-section {
    padding: 160px 0 100px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Background Glow - Intensified */
.hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -15%;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.25) 0%, rgba(0, 0, 0, 0) 75%);
    z-index: -1;
    filter: blur(120px);
}

/* Particles Texture - More Intense */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    /* Increased opacity */
    z-index: -2;
    background-image:
        radial-gradient(#666 1.5px, transparent 1.5px),
        radial-gradient(#666 1.5px, transparent 1.5px);
    /* Slightly brighter dots */
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
    mask-image: linear-gradient(to bottom, black 20%, transparent 95%);
}


.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--primary-orange);
    margin-bottom: 24px;
    font-weight: 500;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 60px;
}

.hero-metrics {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 5px;
}

.metric-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.metric-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* Hero Visual */
.hero-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-card {
    position: absolute;
    padding: 24px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-soft);
    animation: float 6s ease-in-out infinite;
}

.card-1 {
    top: 20%;
    left: 10%;
    z-index: 2;
}

.card-2 {
    bottom: 20%;
    right: 10%;
    z-index: 1;
    animation-delay: 3s;
}

.card-icon {
    font-size: 2rem;
}

.glass-card h4 {
    font-size: 1rem;
    font-weight: 600;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* =========================================
   6. LOGOS SECTION
   ========================================= */
.logos-section {
    padding: 80px 0;
    overflow: hidden;
    background: transparent;
    border-bottom: 1px solid var(--border-dark);
}

.logos-title {
    text-align: center;
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    width: 100%;
}

.logos-marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right,
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 10%,
            hsl(0 0% 0% / 1) 90%,
            hsl(0 0% 0% / 0));
}

.marquee-track {
    display: flex;
    flex-shrink: 0;
    gap: 120px;
    /* More breathing room */
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    animation: scroll 40s linear infinite;
    /* Slower */
    padding: 10px 0;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 60px));
    }
}

.client-logo img {
    height: 95px;
    /* Much bigger */
    width: auto;
    filter: none;
    /* Original colors */
    opacity: 0.8;
    transition: all 0.4s ease;
    object-fit: contain;
}

.client-logo img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* =========================================
   7. SERVICES SECTION
   ========================================= */
.services-section {
    padding: 120px 0;
    background: var(--bg-grey);
    /* V2: Intermediate Grey */
}

.section-header {
    margin-bottom: 80px;
    max-width: 700px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.section-title.text-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
}

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

.service-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.4s ease;
}

.service-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-8px);
    border-color: rgba(255, 106, 0, 0.2);
}

.service-icon {
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: rgba(255, 106, 0, 0.08);
    /* Faint glow */
    border-radius: var(--radius-lg);
    color: var(--primary-orange);
    transition: all 0.4s ease;
}

.service-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 2px;
    /* Thicker lines for more impact */
}

.service-card:hover .service-icon {
    background: var(--primary-orange);
    color: var(--white);
    transform: scale(1.1) rotate(5deg);
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

.service-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.7;
}

.service-list {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.service-list li {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-list li::before {
    content: '•';
    color: var(--primary-orange);
}

/* =========================================
   8. PROCESS SECTION
   ========================================= */
.process-section {
    padding: 120px 0;
    background: var(--bg-light);
    /* V2: Light Grey */
}

.process-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 80px;
    position: relative;
    gap: 20px;
}

/* Light mode overrides for process */
.process-section .step-number {
    color: rgba(0, 0, 0, 0.1);
    /* Subtle dark number */
}

.process-section h3 {
    color: var(--text-dark-main);
}

.process-section p {
    color: var(--text-dark-muted);
}

.process-section .step-line {
    background: var(--border-light);
}

.step {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-orange);
    position: relative;
    /* Ensure relative positioning for pseudo-element */
}

/* Orange Diamond Accent in Center */
.step-number::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background-color: var(--primary-orange);
    z-index: 1;
    /* Above the number if needed, or adjust opacity */
    opacity: 0.8;
}

/* Ensure number is visible or adjust if user wants it hidden behind accent? 
   User said "por ultimo un ponto... en el centro naranja". 
   If the number is there, the dot might cover it.
   Let's check if the user wants the number GONE. 
   "se ve mal que sea solo negro... un punto ... en el centro".
   I will make the dot small enough or behind the number?
   Actually, usually this replaces the number or sits with it.
   Given the "01" is dark/subtle, putting a bright orange dot might clash if on top.
   But the user said "en el centro".
   I'll put the dot slightly lower or just centered. 
   If I center it, it covers the text.
   
   Wait, the user said "se ve mal que sea solo negro". 
   Currently the text color is rgba(0,0,0,0.1) in light mode. It's almost invisible.
   Maybe the user thinks it's JUST a black circle.
   I will make the number slightly more visible AND add the orange accent?
   Or just add the accent.
   
   Let's try adding the accent as a small dot.
*/

.step h3 {
    margin-bottom: 12px;
    font-size: 1.25rem;
}

.step p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.step-line {
    position: absolute;
    top: 25px;
    width: 100%;
    height: 1px;
    background: var(--border-dark);
    z-index: 1;
    left: 0;
    display: none;
    /* Hidden on mobile */
}

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

/* =========================================
   9. ABOUT SECTION (Nosotros)
   ========================================= */
.about-section {
    padding: 120px 0;
    background: var(--bg-grey);
    /* V2: Intermediate Grey for separation */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.about-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.director-card {
    position: relative;
    width: 100%;
}

.director-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    z-index: 2;
}

.director-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.director-title {
    font-size: 0.9rem;
    color: var(--primary-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-img {
    width: 100%;
    height: auto;
    filter: grayscale(0.2) contrast(1.1);
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.8;
}

.about-text strong {
    color: var(--white);
    font-weight: 500;
}

.about-quote {
    margin-top: 40px;
    padding-left: 30px;
    border-left: 2px solid var(--primary-orange);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--white);
    font-style: italic;
    line-height: 1.5;
}

/* =========================================
   10. PROJECTS SECTION (Portfolio)
   ========================================= */
.projects-section {
    padding: 120px 0;
    background: var(--bg-portfolio);
    /* V2: Warm Beige */
}

.project-showcase {
    display: flex;
    flex-direction: column;
    gap: 100px;
    /* Increased spacing */
}

/* Update project text for light background */
.projects-section .project-category {
    color: var(--primary-orange);
}

.projects-section h3 {
    color: var(--text-dark-main);
}

.projects-section .project-summary {
    color: var(--text-dark-muted);
}

.projects-section .project-stats span {
    color: var(--text-dark-main);
}

.projects-section .project-stats div {
    color: var(--text-dark-muted);
}

.project-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.project-item.reverse {
    direction: rtl;
    /* Quick flip layout */
}

.project-item.reverse .project-details {
    direction: ltr;
    /* Reset text direction */
}

.project-image {
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 0;
    background: transparent;
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-item:hover .portfolio-img {
    transform: scale(1.05);
}

.project-placeholder {
    font-size: 2rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

.project-details {
    padding: 20px;
}

.project-category {
    font-size: 0.85rem;
    color: var(--primary-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}

.project-details h3 {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    margin-bottom: 20px;
}

.project-summary {
    color: var(--text-muted);
    margin-bottom: 30px;
}

.project-stats {
    display: flex;
    gap: 40px;
}

.project-stats div {
    display: flex;
    flex-direction: column;
}

.project-stats span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

/* =========================================
   10. FAQ SECTION
   ========================================= */

.faq-section {
    padding: 120px 0;
    background: var(--bg-dark);
    /* #0E0E0E */
}

.faq-container {
    max-width: 900px;
    /* Wider for better reading */
    margin: 0 auto;
}

.accordion {
    margin-top: 80px;
}

.accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: 16px;
    /* Rounded borders */
    margin-bottom: 24px;
    /* Spacing between questions */
    transition: all 0.3s ease;
    overflow: hidden;
}

.accordion-item:hover {
    border-color: rgba(255, 106, 0, 0.3);
    box-shadow: 0 0 25px rgba(255, 106, 0, 0.05);
    /* Subtle illumination */
}

.accordion-header {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 24px 30px;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    color: #F8F8F8;
    line-height: 1.5;
    padding-right: 20px;
}

.accordion-header .icon {
    font-size: 1.5rem;
    color: var(--primary-orange);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-item.active .accordion-header .icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: var(--bg-card);
}

.accordion-content p {
    padding: 0 30px 30px 30px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   11. AUTHORITY & RESULTS SECTION
   ========================================= */
.authority-section {
    padding: 120px 0;
    background: var(--bg-dark);
    /* #0E0E0E */
    border-top: 1px solid var(--border-dark);
}

.authority-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* Reduced from 80px to prevent wrapping */
    margin-top: 60px;
    flex-wrap: nowrap;
    /* Force single row on desktop */
}

.authority-card {
    text-align: center;
    flex: 1;
    /* Allow cards to shrink/grow evenly */
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ensure internal centering */
}

.big-metric {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #FFFFFF 0%, #AAAAAA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.authority-divider {
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #333, transparent);
}

/* =========================================
   12. TESTIMONIALS SECTION
   ========================================= */
.testimonials-section {
    padding: 120px 0;
    background: var(--bg-grey);
    /* #1F1F1F */
}

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

.testimonial-card {
    background: var(--bg-card);
    /* #222 */
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 106, 0, 0.2);
}

.stars {
    color: var(--primary-orange);
    letter-spacing: 2px;
    margin-bottom: 24px;
    font-size: 1.2rem;
}

.testimonial-text {
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
}

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

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--border-dark);
}

.testimonial-author h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 4px;
}

.testimonial-author span {
    color: var(--primary-orange);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

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

.footer-brand p {
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 300px;
}

.footer h4 {
    color: var(--white);
    margin-bottom: 24px;
    font-size: 1rem;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer ul li a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer ul li a:hover {
    color: var(--primary-orange);
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    color: var(--primary-orange);
    transform: translateX(5px);
}

.copy-bar {
    border-top: 1px solid var(--border-dark);
    padding-top: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =========================================
   12. CTA FINAL
   ========================================= */
.cta-final-section {
    padding: 100px 24px;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.1) 0%, rgba(14, 14, 14, 1) 80%);
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    /* Spacing added */
    line-height: 1.6;
}

/* =========================================
   13. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-metrics {
        justify-content: center;
    }

    .hero-visual {
        display: none;
        /* Simplified for mobile */
    }

    .nav-links,
    .btn-primary {
        display: none;
        /* Hide desktop menu */
    }

    .header-container .btn-primary {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .project-item {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .project-item.reverse {
        direction: ltr;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .about-quote {
        padding-left: 0;
        border-left: none;
        border-top: 2px solid var(--primary-orange);
        padding-top: 20px;
        margin-top: 30px;
    }

    /* Authority & Testimonials Mobile */
    .authority-grid {
        flex-direction: column;
        gap: 40px;
        flex-wrap: wrap;
        /* Restore wrapping for mobile */
    }

    .authority-divider {
        width: 100px;
        height: 1px;
        background: linear-gradient(to right, transparent, #333, transparent);
    }

    .big-metric {
        font-size: 3.5rem;
    }

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

/* =========================================
   14. LEGAL PAGES
   ========================================= */
.legal-section {
    padding: 100px 0;
    background: var(--bg-dark);
}

.legal-container {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--bg-card);
    padding: 60px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-dark);
}

.legal-content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--white);
    margin-top: 40px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 106, 0, 0.2);
}

.legal-content h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-top: 24px;
    margin-bottom: 12px;
}

.legal-content p,
.legal-content ul,
.legal-content li {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
}

.legal-content p {
    margin-bottom: 16px;
}

.legal-content ul {
    margin-bottom: 24px;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content a {
    color: var(--primary-orange);
    text-decoration: none;
    transition: color 0.3s;
}

.legal-content a:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .legal-container {
        padding: 30px 20px;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-field {
        grid-column: span 1 !important;
    }
}

/* =========================================
   15. CONTACT FORM STYLES
   ========================================= */
.contact-section {
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.05) 0%, transparent 70%);
    z-index: 0;
}

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

.form-field input,
.form-field select {
    transition: all 0.3s ease;
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1);
}

.hidden {
    display: none !important;
}