:root {
    --color-bg: #050505;
    --color-card-bg: #0A0A0A;
    --color-text: #FFFFFF;
    --color-text-muted: #A0A0A0;
    --color-accent: #C5A059;
    /* Gold */
    --color-border: #222222;
    --color-primary: #C5A059;
    --gradient-primary: linear-gradient(135deg, #C5A059 0%, #F5D061 50%, #C5A059 100%);

    /* Glassmorphism Tokens */
    --glass-bg: rgba(10, 10, 10, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 15px;
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);

    /* Typography */
    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;

    /* Spacing & Misc */
    --spacing-container: 1200px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@import url('loaders.css');

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

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

html {
    scroll-behavior: smooth;
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: all;
}

.scroll-top-btn:hover {
    background: var(--color-accent);
    color: black;
    transform: translateY(-5px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

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

ul {
    list-style: none;
}

/* --- Glassmorphism Utilities --- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-hover:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(197, 160, 89, 0.3);
    transform: translateY(-5px);
}

/* --- Utilities --- */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 40px;
}

.section {
    padding: 100px 0;
}

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

.section-header h2 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 20px;
}

.section-header p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    max-width: 600px;
    margin: 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn-primary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent);
    color: black;
}

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

/* --- Header --- */
header {
    padding: 15px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: rgba(5, 5, 5, 0.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

header.scrolled {
    padding: 10px 0;
    background: rgba(5, 5, 5, 0.9);
}

nav {
    justify-content: space-between;
    /* Changed from center to space-between to accommodate logo */
    align-items: center;
    /* gap: 40px;  Removed gap since we are spacing with between */
}

.logo-link {
    display: flex;
    align-items: center;
}

.nav-logo {
    height: 40px;
    /* Adjust size as needed */
    width: auto;
}

/* Mobile Nav Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    cursor: pointer;
    z-index: 1001;
    /* Explicit dimensions to ensure clickability if icon fails */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-items {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: #000;
        /* Solid black for contrast */
        border-left: 1px solid var(--color-border);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* Perf */
        gap: 40px;
    }

    .nav-items.active {
        right: 0;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    }

    .nav-link {
        font-size: 1.2rem;
        /* Larger tap targets */
    }
}

.nav-items {
    /* Wrapper for links */
    display: flex;
    gap: 40px;
}

.nav-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent);
}

/* --- Hero --- */
/* --- Hero --- */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* For absolute positioning of bottom elements */
    padding-top: 80px;
    /* Offset for fixed header */
}

.hero-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    width: 100%;
}

.hero-content {
    /* Centered vertically in the available space above the trusted bar */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    /* Space for bottom elements */
}

.hero-overline {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 20px;
    font-weight: 700;
    background: linear-gradient(180deg, #FFFFFF 30%, #C5A059 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(197, 160, 89, 0.2));
}



.work-bg-backdoor {
    background-image: url('assets/images/backdoor-neon.svg');
    background-size: cover;
    background-position: center;
}

/* Card Visual Pop */
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
    border-color: var(--gold);
}

.work-card {
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

/* Rotating Text Cursor */
.txt-rotate {
    color: var(--color-text);
    /* Keep standard initially */
    border-right: 0.08em solid #666;
    animation: blink 0.7s infinite;
    -webkit-text-fill-color: var(--color-text);
    /* Override generic gradient */
}

@keyframes blink {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #666
    }
}

.hero p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    /* Slightly larger */
    max-width: 500px;
    margin-bottom: 40px;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 140px;
    /* Above trusted bar */
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: bounce 2s infinite;
}

@keyframes bounce {

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

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-3px);
    }
}

/* Trusted Bar */
.trusted-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid var(--color-border);
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(5, 5, 5, 0.5);
    /* Subtle background */
}

.trusted-bar p {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    margin: 0;
    /* Reset generic p style */
}

.trusted-logos {
    display: flex;
    gap: 40px;
    font-size: 1.5rem;
    color: #444;
    /* Dimmed logos */
}

.trusted-logos i:hover {
    color: white;
    transition: color 0.3s;
}

/* --- Selected Work --- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.work-card {
    background: var(--color-card-bg);
    border: 1px solid var(--glass-border);
    padding: 25px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

.work-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition-smooth);
    pointer-events: none;
}

.work-card:hover::after {
    opacity: 1;
}

.work-card:hover {
    border-color: var(--color-accent);
}

.work-overlay {
    background: #111;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.work-info h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.work-info p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    align-self: flex-start;
}

/* --- Services --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    background: var(--color-card-bg);
    border: 1px solid var(--glass-border);
    padding: 40px;
    transition: var(--transition-smooth);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

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

.service-icon {
    font-size: 2rem;
    color: var(--color-accent);
    margin-bottom: 10px;
    background: linear-gradient(135deg, #C5A059 0%, #F5D061 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

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

.testimonial-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    transition: transform 0.3s, border-color 0.3s;
}

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

.stars {
    color: var(--color-accent);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.quote {
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    min-height: 80px;
    /* Alignment */
}

.client-info {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-weight: 600;
    color: white;
}

.client-role {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* --- FAQ Section --- */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: white;
    font-family: var(--font-body);
    font-weight: 500;
    text-align: left;
    transition: color 0.3s;
}

.faq-question:hover {
    color: var(--color-accent);
}

.faq-question i {
    transition: transform 0.3s;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.faq-item.active .faq-question {
    color: var(--color-accent);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-content {
    padding-bottom: 25px;
    color: var(--color-text-muted);
    line-height: 1.7;
}


/* --- Form Section --- */
.contact-section .form-section {
    /* Increased specificity */
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 60px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Ensure padding doesn't break width */
}

.contact-section .form-grid {
    /* Increased specificity */
    display: grid;
    grid-template-columns: 100%;
    /* Explicit single column */
    width: 100%;
    gap: 20px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .contact-section .form-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet+ */
        gap: 30px;
    }
}

/* Input Group & Floating Labels */
.contact-section .form-field {
    margin-bottom: 0;
    /* Let grid handle gap */
    position: relative;
    text-align: left;
    width: 100%;
    /* Ensure full width in grid cell */
    min-width: 0;
    /* Prevent grid blowout */
}

/* Span full width for Message field (assuming it's the last child or specifically targeted) */
.form-field:last-child {
    grid-column: 1 / -1;
}

.input-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-md);
    transition: background 0.3s ease;
    width: 100%;
}

.input-wrapper:hover {
    background: rgba(255, 255, 255, 0.05);
}

.input-wrapper input,
.input-wrapper textarea,
.input-wrapper select {
    width: 100%;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: white;
    padding: 24px 16px 8px;
    /* Adjusted padding */
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
    /* Reset potential shadows */
    -webkit-appearance: none;
    appearance: none;
    /* remove default appearance */
}

.input-wrapper textarea {
    resize: vertical;
    min-height: 120px;
}

/* Switch from 'placeholder' to Floating Label */
.floating-label {
    position: absolute;
    left: 16px;
    top: 18px;
    /* Center-ish when placeholder shown */
    color: var(--color-text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease-out;
    transform-origin: left top;
    line-height: 1;
}

/* Float State */
.input-wrapper input:focus~.floating-label,
.input-wrapper input:not(:placeholder-shown)~.floating-label,
.input-wrapper textarea:focus~.floating-label,
.input-wrapper textarea:not(:placeholder-shown)~.floating-label,
.input-wrapper select:focus~.floating-label,
.input-wrapper select:valid~.floating-label,
/* Ensure label stays up if select has value (browser dependent on :valid, using :not([value=""]) logic in styling is tricky without JS, but :valid on required empty select works if placeholder is disabled selected) */
.input-wrapper select:required:valid~.floating-label {
    top: 8px;
    transform: scale(0.75);
    /* Use transform for smoother font sizing */
    color: var(--color-accent);
}

/* Focus State */
.input-wrapper input:focus,
.input-wrapper textarea:focus,
.input-wrapper select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
    /* Subtle glow */
}

/* Validation Icons */
.field-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.field-icon svg {
    display: none;
}

/* Validation States */
.form-field.success input {
    border-color: #4CAF50;
}

.form-field.success .floating-label {
    color: #4CAF50;
}

.form-field.success .icon-valid {
    display: block;
    color: #4CAF50;
}

.form-field.error input {
    border-color: #f44336;
}

.form-field.error .floating-label {
    color: #f44336;
}

.form-field.error .icon-invalid {
    display: block;
    color: #f44336;
}

.form-field.error .error-message {
    opacity: 1;
    transform: translateY(0);
    max-height: 20px;
}

.error-message {
    display: block;
    color: #f44336;
    font-size: 0.8rem;
    margin-top: 5px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
    padding-left: 20px;
}

/* Select Arrow Customization */
.select-wrapper .select-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted);
}

.input-wrapper select {
    appearance: none;
    cursor: pointer;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Fix for Select Options being white on white in some browsers */
.form-group select option {
    background-color: var(--color-card-bg);
    color: white;
}

.full-width {
    grid-column: 1 / -1;
}

/* --- Quick Estimate (Timeline) --- */
.quick-estimate-wrapper {
    max-width: 600px;
    margin: 60px auto 0;
    padding: 40px;
    background: #080808;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.quick-estimate-header {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Adapting the timeline-estimator.js output via CSS */
.estimator-ui {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Override inserted styles from JS with important or specificity if strictly needed,
   but better to rely on class structure if possible. Refactoring JS might be cleaner,
   but we will try to style the existing structure first. */
.btn-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.select-btn {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
}

.select-btn.active {
    background: white !important;
    color: black !important;
    border-color: white !important;
}

.slider-container {
    margin: 20px 0;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    cursor: pointer;
    border-radius: 50%;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-item {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.estimator-result {
    text-align: center;
    background: #0A0A0A;
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.big-number {
    font-size: 5rem;
    line-height: 1;
    color: white;
    font-weight: 400;
}

.unit {
    font-size: 1rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.timeline-bar-fill {
    background: var(--color-accent) !important;
}

/* Footer & Copyright */
.copyright {
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    padding-bottom: 40px;
}

/* Responsive */
@media (min-width: 1600px) {
    .container {
        max-width: 1400px;
    }
}

@media (max-width: 900px) {
    .hero h1 {
        font-size: 3rem;
    }

    .work-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

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

    .estimator-ui {
        grid-template-columns: 1fr;
    }
}

/* --- Notification Popup --- */
.notification-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #111;
    border: 1px solid var(--color-accent);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.notification-popup.active {
    transform: translateX(0);
}

.notif-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.notif-content h4 {
    margin: 0;
    font-size: 1rem;
    color: white;
}

.notif-content p {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Portfolio Link Wrapper */
.work-card-link {
    display: block;
    height: 100%;
}

/* ===========================
   Exit Modal Variables
   =========================== */
:root {
    --bg-dark: #0A0A0A;
    --bg-card: rgba(20, 20, 20, 0.95);
    --bg-glass: rgba(30, 30, 30, 0.6);
    --gold: #C9A227;
    --gold-light: #D4AF37;
    --gold-glow: rgba(201, 162, 39, 0.4);
    --text-light: #F5F0E6;
    --border-subtle: rgba(201, 162, 39, 0.2);
    --font-main: 'Inter', sans-serif;
    --font-display: 'Outfit', sans-serif;
}

/* ===========================
   Modal Overlay
   =========================== */
.exit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

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

/* ===========================
   Modal Container
   =========================== */
.exit-modal {
    display: flex;
    max-width: 900px;
    width: 90%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s ease;
    box-shadow:
        0 0 60px rgba(201, 162, 39, 0.15),
        0 25px 50px rgba(0, 0, 0, 0.5);
}

.exit-modal-overlay.active .exit-modal {
    transform: scale(1) translateY(0);
}

/* ===========================
   Glowing Orb Effect
   =========================== */
.modal-glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* ===========================
   Close Button
   =========================== */
.exit-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.exit-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold);
    transform: rotate(90deg);
}

.exit-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--text-light);
    transition: background 0.3s ease;
}

.exit-modal-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.exit-modal-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.exit-modal-close:hover span {
    background: var(--gold);
}

/* ===========================
   Modal Content (Left Side)
   =========================== */
.exit-modal-content {
    flex: 1;
    padding: 3rem;
    position: relative;
    z-index: 1;
}

.modal-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
}

.modal-icon svg {
    width: 100%;
    height: auto;
}

.modal-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.modal-headline {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.exit-modal .gold-text {
    text-shadow: 0 0 20px var(--gold-glow);
}

.modal-subheadline {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ===========================
   Benefits List
   =========================== */
.modal-benefits {
    list-style: none;
    margin-bottom: 2rem;
}

.modal-benefits li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.benefit-icon {
    color: var(--gold);
    font-weight: bold;
}

/* ===========================
   Modal Form
   =========================== */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 0.75rem;
}

.modal-form input {
    flex: 1;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.modal-form input::placeholder {
    color: var(--text-muted);
}

.modal-form input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.05);
    box-shadow: 0 0 20px rgba(201, 162, 39, 0.1);
}

/* ===========================
   Primary CTA Button
   =========================== */
.modal-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.1rem 2rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--bg-dark);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px var(--gold-glow);
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--gold-glow);
}

.modal-btn-primary svg {
    transition: transform 0.3s ease;
}

.modal-btn-primary:hover svg {
    transform: translateX(4px);
}

/* ===========================
   Trust & Decline
   =========================== */
.modal-trust {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1rem;
}

.modal-decline {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.modal-decline:hover {
    color: var(--text-light);
}

/* ===========================
   Visual Side (Right)
   =========================== */
.exit-modal-visual {
    width: 280px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.shape-2 {
    width: 120px;
    height: 120px;
    top: 50%;
    right: 10%;
    animation-delay: 2s;
}

.shape-3 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 30%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

.visual-text {
    text-align: center;
    position: relative;
    z-index: 1;
}

.big-number {
    display: block;
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 40px var(--gold-glow);
    line-height: 1;
}

.big-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
    .exit-modal {
        flex-direction: column;
        max-height: 90vh;
        overflow-y: auto;
    }

    .exit-modal-content {
        padding: 2rem;
    }

    .modal-headline {
        font-size: 1.5rem;
    }

    .form-row {
        flex-direction: column;
    }

    .exit-modal-visual {
        width: 100%;
        height: 150px;
        order: -1;
    }

    .big-number {
        font-size: 2.5rem;
    }
}

/* ===========================
   Premium Form Variables
   =========================== */
:root {
    --bg-input: rgba(255, 255, 255, 0.03);
    --bg-input-focus: rgba(201, 162, 39, 0.05);
    --text-label: #8A8A8A;
    --border-default: rgba(255, 255, 255, 0.08);
    --success: #22c55e;
    --success-glow: rgba(34, 197, 94, 0.3);
    --error: #ef4444;
    --error-glow: rgba(239, 68, 68, 0.3);
    --warning: #f59e0b;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================
   Progress Bar
   =========================== */
.form-progress {
    margin-bottom: 2rem;
    position: relative;
}

.progress-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--gold-glow);
}

.progress-text {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#progressPercent {
    color: var(--gold);
    font-weight: 600;
}

/* ===========================
   Form Field
   =========================== */
.form-field {
    margin-bottom: 1.75rem;
    position: relative;
}

.input-wrapper {
    position: relative;
}

/* ===========================
   Input Styling
   =========================== */
.input-wrapper input,
.input-wrapper textarea,
.input-wrapper select {
    width: 100%;
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-family: var(--font-main);
    transition: all var(--transition-normal);
    outline: none;
}

.input-wrapper textarea {
    resize: vertical;
    min-height: 120px;
    padding-right: 1.25rem;
}

.input-wrapper select {
    cursor: pointer;
    appearance: none;
    padding-right: 3.5rem;
}

.input-wrapper select option {
    background: #0A0A0A;
    color: white;
    padding: 1rem;
}

/* ===========================
   Floating Label
   =========================== */
.floating-label {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-label);
    font-size: 1rem;
    pointer-events: none;
    transition: all var(--transition-smooth);
    background: transparent;
    padding: 0 0.25rem;
}

.textarea-wrapper .floating-label {
    top: 1.25rem;
    transform: translateY(0);
}

/* Label Float State */
.input-wrapper input:focus~.floating-label,
.input-wrapper input:not(:placeholder-shown)~.floating-label,
.input-wrapper input.has-value~.floating-label,
.input-wrapper textarea:focus~.floating-label,
.input-wrapper textarea:not(:placeholder-shown)~.floating-label,
.input-wrapper select:focus~.floating-label,
.input-wrapper select:valid~.floating-label,
.input-wrapper select.has-value~.floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--gold);
    background: #0A0A0A;
    /* Fallback/Blend */
    letter-spacing: 0.5px;
}

.textarea-wrapper textarea:focus~.floating-label,
.textarea-wrapper textarea:not(:placeholder-shown)~.floating-label {
    top: -0.5rem;
    transform: translateY(0);
}

/* ===========================
   Field Highlight (Bottom Border Effect)
   =========================== */
.field-highlight {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transition: all var(--transition-smooth);
    transform: translateX(-50%);
    border-radius: 2px;
}

.input-wrapper input:focus~.field-highlight,
.input-wrapper textarea:focus~.field-highlight,
.input-wrapper select:focus~.field-highlight {
    width: calc(100% - 2px);
    box-shadow: 0 2px 15px var(--gold-glow);
}

/* ===========================
   Focus State
   =========================== */
.input-wrapper input:focus,
.input-wrapper textarea:focus,
.input-wrapper select:focus {
    background: var(--bg-input-focus);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.1);
}

/* ===========================
   Field Icons
   =========================== */
.field-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.field-icon svg {
    position: absolute;
    transition: all var(--transition-normal);
}

.field-icon .icon-default {
    color: var(--color-text-muted);
    opacity: 1;
}

.field-icon .icon-valid,
.field-icon .icon-invalid {
    opacity: 0;
    transform: scale(0.5);
}

.field-icon .icon-valid {
    color: var(--success);
}

.field-icon .icon-invalid {
    color: var(--error);
}

/* ===========================
   Validation States
   =========================== */

/* Valid State */
.form-field.valid .input-wrapper input,
.form-field.valid .input-wrapper textarea,
.form-field.valid .input-wrapper select {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.03);
}

.form-field.valid .floating-label {
    color: var(--success);
}

.form-field.valid .field-highlight {
    background: var(--success);
    width: calc(100% - 2px);
    box-shadow: 0 2px 15px var(--success-glow);
}

.form-field.valid .field-icon .icon-default {
    opacity: 0;
    transform: scale(0.5);
}

.form-field.valid .field-icon .icon-valid {
    opacity: 1;
    transform: scale(1);
    animation: popIn 0.3s ease;
}

/* Invalid State */
.form-field.invalid .input-wrapper input,
.form-field.invalid .input-wrapper textarea,
.form-field.invalid .input-wrapper select {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.03);
    animation: shake 0.4s ease;
}

.form-field.invalid .floating-label {
    color: var(--error);
}

.form-field.invalid .field-highlight {
    background: var(--error);
    width: calc(100% - 2px);
    box-shadow: 0 2px 15px var(--error-glow);
}

.form-field.invalid .field-icon .icon-default {
    opacity: 0;
    transform: scale(0.5);
}

.form-field.invalid .field-icon .icon-invalid {
    opacity: 1;
    transform: scale(1);
    animation: popIn 0.3s ease;
}

.form-field.invalid .error-message {
    opacity: 1;
    transform: translateY(0);
    max-height: 50px;
}

/* ===========================
   Error Message
   =========================== */
.error-message {
    display: block;
    font-size: 0.8rem;
    color: var(--error);
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-normal);
}

/* ===========================
   Character Counter
   =========================== */
.char-counter {
    position: absolute;
    bottom: 0.75rem;
    right: 1rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.char-counter.warning {
    color: var(--warning);
}

.char-counter.limit {
    color: var(--error);
}

/* ===========================
   Select Arrow
   =========================== */
.select-wrapper .select-arrow {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

.select-wrapper select:focus~.select-arrow {
    color: var(--gold);
    transform: translateY(-50%) rotate(180deg);
}

/* ===========================
   Submit Button
   =========================== */
.submit-btn {
    width: 100%;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #0A0A0A;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 20px var(--gold-glow);
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--gold-glow);
}

.submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-btn .btn-arrow {
    transition: transform var(--transition-normal);
}

.submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Button States */
.submit-btn .btn-loading,
.submit-btn .btn-success {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.submit-btn.loading .btn-text,
.submit-btn.loading .btn-arrow {
    display: none;
}

.submit-btn.loading .btn-loading {
    display: flex;
}

.submit-btn.success .btn-text,
.submit-btn.success .btn-arrow,
.submit-btn.success .btn-loading {
    display: none;
}

.submit-btn.success .btn-success {
    display: flex;
}

.submit-btn.success {
    background: var(--success);
    box-shadow: 0 4px 20px var(--success-glow);
}

/* Spinner Animation */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shake {

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

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ===========================
   Footer Styles
   =========================== */
.site-footer {
    background-color: var(--bg-color);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6rem 0 2rem;
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col h4 {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

/* Brand Column */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 1rem;
}

.footer-logo .brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 1px;
}

.brand-tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 280px;
}

/* Links */
.footer-link {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--gold);
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.social-link:hover {
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold);
    border-color: rgba(201, 162, 39, 0.3);
    transform: translateY(-2px);
}

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

/* Newsletter */
.newsletter-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.newsletter-form .input-group {
    display: flex;
    position: relative;
}

.newsletter-form input {
    width: 100%;
    padding: 12px 45px 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.08);
}

.newsletter-form button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.newsletter-form button:hover {
    transform: translateY(-50%) translateX(2px);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.legal-links {
    display: flex;
    gap: 2rem;
}

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

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

/* Responsive */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* USER REQUESTED LAYOUT REWRITE */

/* Work Section */
.work-section {
    padding: 80px 0;
    position: relative;
    z-index: 10;
    background-color: var(--color-bg);
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.work-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

/* Featured Card Logic (Middle Item) */
@media (min-width: 992px) {
    .work-card.featured {
        transform: scale(1.05);
        border-color: var(--color-accent);
        z-index: 2;
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    }
}

.work-image-box {
    height: 250px;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

.work-image-box h3 {
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.work-details {
    padding: 2rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.work-details h4 {
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.work-details p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Services Section */
.services-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    margin-top: 2rem;
}

.bg-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    /* Subtly visible */
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-bg), rgba(5, 5, 5, 0.85) 20%, rgba(5, 5, 5, 0.85) 80%, var(--color-bg));
    z-index: 2;
}

.container.relative-z {
    position: relative;
    z-index: 3;
    /* Sit on top of image */
}

.section-title-center {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 4rem;
    color: var(--color-text);
    letter-spacing: 4px;
    font-weight: 700;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}

.service-card {
    background: rgba(15, 15, 15, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
    background: rgba(15, 15, 15, 0.8);
}

.icon-gold {
    font-size: 2.5rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.service-card h3 {
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* ===========================
   MOBILE OPTIMIZATIONS
   =========================== */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {

    /* Hero Section */
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero .subtitle {
        font-size: 1rem;
    }

    .cta-group {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-group .btn {
        width: 100%;
        justify-content: center;
    }

    /* Navigation */
    .nav-links {
        padding: 1rem;
    }

    .nav-links a {
        font-size: 1.1rem;
        padding: 1rem;
    }

    /* Work Section */
    .work-section {
        padding: 40px 1rem;
    }

    .work-card {
        margin: 0 auto;
    }

    .work-image-box {
        height: 200px;
    }

    .work-image-box h3 {
        font-size: 1.2rem;
    }

    /* Services Section */
    .services-section {
        padding: 60px 1rem;
    }

    .section-title-center {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

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

    /* Forward Motion Section */
    .forward-motion {
        padding: 3rem 1rem;
    }

    .action-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cards-divider {
        display: none;
    }

    .action-card {
        padding: 1.5rem;
    }

    .package-option {
        padding: 0.75rem;
    }

    .custom-amount-input input {
        width: 80px;
    }

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

    .form-field {
        margin-bottom: 1.5rem;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
        /* Prevents zoom on iOS */
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .action-cards {
        grid-template-columns: 1fr;
    }

    .cards-divider {
        display: none;
    }

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

/* Touch-friendly improvements for all mobile */
@media (max-width: 768px) {

    /* Ensure all clickable elements are at least 44x44px */
    button,
    a.btn,
    .card-cta,
    .slot-btn,
    .method-icon {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase spacing for better touch targets */
    .nav-links a {
        padding: 1rem 1.5rem;
    }

    /* Make hamburger menu more prominent */
    .hamburger {
        padding: 0.5rem;
    }

    .hamburger span {
        height: 3px;
        margin: 6px 0;
    }

    /* Improve form usability */
    .input-wrapper input,
    .input-wrapper textarea,
    .input-wrapper select {
        padding: 1rem;
        min-height: 48px;
    }

    /* Better spacing for cards */
    .work-card,
    .service-card,
    .action-card {
        margin-bottom: 1.5rem;
    }

    /* Optimize modal for mobile */
    .modal-content {
        width: 95%;
        max-width: 400px;
        margin: 1rem;
    }

    /* Stack FAQ items better */
    .faq-item {
        margin-bottom: 0.5rem;
    }

    .faq-question {
        padding: 1rem;
        font-size: 1rem;
    }

    /* Credit notice mobile optimization */
    .credit-notice {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .credit-notice span {
        font-size: 0.75rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        min-height: 0;
        /* Fallback */
        padding: 2rem 0;
    }

    .hero h1 {
        font-size: 2rem;
    }
}

/* Consultation Options */
.consultation-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.consult-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
}

.consult-option:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.consult-option input {
    display: none;
}

.consult-option.selected {
    background: var(--gold-subtle);
    border-color: var(--gold);
}

.consult-option.selected .option-check {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-dark);
}

.consult-option.selected .option-check svg {
    opacity: 1;
    transform: scale(1);
}

.option-card {
    flex: 1;
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.option-name {
    font-weight: 600;
    font-size: 1rem;
}

.option-badge.free {
    padding: 0.25rem 0.6rem;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.option-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold);
}

.option-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.option-features {
    list-style: none;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.option-features li {
    padding: 0.25rem 0;
}

.option-features li::before {
    color: var(--success);
}

.credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--gold);
}

.option-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--border-default);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.25rem;
    transition: all var(--transition-normal);
}

.option-check svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-normal);
}

/* Credit Tag */
.option-tag.credit {
    background: rgba(201, 162, 39, 0.15);
    color: var(--gold);
}

/* Utility Classes */
.parallax-bg-hidden {
    display: none;
}

.hidden-title {
    opacity: 0;
}

/* Utility & Specific Classes for Refactoring */
.work-bg-sg {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=1200&auto=format&fit=crop') center/cover;
}



.mt-1 {
    margin-top: 1rem;
}

.pt-0 {
    padding-top: 0 !important;
}

.hidden {
    display: none;
}

.form-container-styled {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* --- Work Backgrounds --- */
.work-bg-sg {
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-bg-sg::after {
    content: 'SG';
    position: absolute;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(197, 160, 89, 0.2);
    letter-spacing: 10px;
}

.work-bg-backdoor {
    background-image: url('assets/images/backdoor-neon.svg');
    background-size: cover;
    background-position: center;
    background-color: #0A0A0A;
}

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