/*
 * Copyright (c) 2026 Polat Demir. All rights reserved.
 * Ford Mustang Dark Horse Landing Page Project.
 * Unauthorized copying or distribution of this code is strictly prohibited.
 */
*, *::before, *::after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
}

body {
    font-family: 'Inter', sans-serif;
    background: #0a0a0a;
    color: #f5f5f5;
    line-height: 1.6;
    overflow-x: hidden;
}

a { 
    text-decoration: none; 
    color: inherit; 
}

/* ──────────────── Navbar ──────────────── */
.navbar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    padding: 1.2rem 5%; 
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    z-index: 1000;
    transition: background 0.4s ease, padding 0.3s ease;
}

.navbar.scrolled {
    background: rgba(36, 36, 36, 0.95);
    -webkit-backdrop-filter: blur(12px); /* Safari / iOS Support */
    backdrop-filter: blur(12px);
    padding: 0.8rem 5%;
    border-bottom: 1px solid rgba(245, 197, 24, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Syncopate', 'Oswald', sans-serif;
    font-size: 1.4rem; 
    font-weight: 700;
    letter-spacing: 3px; 
    text-transform: uppercase;
    color: #000000; /* DARK text BLACK */
}

.logo-icon {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.logo span { 
    color: #ffffff; /* HORSE text WHITE */
    font-size: inherit;
    font-weight: inherit;
    text-transform: uppercase;
}

.nav-links { 
    display: flex; 
    gap: 2rem; 
    list-style: none; 
}
.nav-links a {
    font-size: 0.85rem; 
    font-weight: 600; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    color: #aaa;
    transition: color 0.3s; 
    position: relative;
}
.nav-links a::after {
    content: ''; 
    position: absolute; 
    bottom: -4px; 
    left: 0;
    width: 0; 
    height: 2px; 
    background: #fffffd;
    transition: width 0.3s;
}
.nav-links a:hover { 
    color: #fffefc; 
}
.nav-links a:hover::after { 
    width: 100%; 
}

.hamburger { 
    display: none; 
    flex-direction: column; 
    cursor: pointer; 
    gap: 5px; 
}
.hamburger span {
    display: block; 
    width: 28px; 
    height: 2px; 
    background: #f5f5f5;
    transition: all 0.3s;
}

/* ──────────────── Hero ──────────────── */
.hero {
    position: relative; 
    width: 100%; 
    height: 100vh;
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    overflow: hidden;
}

.hero-bg-tech { /* ──────────────── Technical Specifications Hero ──────────────── */
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 50%, rgba(245,197,24,0.15) 100%),
        radial-gradient(ellipse at 30% 50%, rgba(245,197,24,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, #0a0a0a 0%, transparent 70%),
        url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_10.jpg');
    background-size: cover; 
    background-position: center 30%;
    background-repeat: no-repeat;
}

.hero-bg {
    position: absolute; 
    inset: 0;
    background:
        linear-gradient(135deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 50%, rgba(245,197,24,0.15) 100%),
        radial-gradient(ellipse at 30% 50%, rgba(245,197,24,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, #0a0a0a 0%, transparent 70%),
        url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_1.jpg');
    background-size: cover; 
    background-position: center 30%;
    background-repeat: no-repeat;
    animation: heroZoom 12s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-overlay {
    position: absolute; 
    inset: 0;
    background: linear-gradient(to top, #0a0a0a 0%, transparent 50%, rgba(10,10,10,0.3) 100%);
}

.hero-content {
    position: relative; 
    z-index: 2; 
    max-width: 900px; 
    padding: 0 2rem;
}

.hero-badge {
    display: inline-block;
    font-family: 'Oswald', sans-serif; 
    font-size: 0.8rem;
    letter-spacing: 4px; 
    text-transform: uppercase;
    color: #ffffff; 
    border: 1px solid #000000;
    padding: 0.4rem 1.2rem; 
    margin-bottom: 1.5rem;
    animation: fadeDown 1s ease;
}

.hero h1 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.8rem, 8vw, 6rem);
    font-weight: 700; 
    line-height: 1.1; 
    text-transform: uppercase;
    animation: fadeUp 1s ease 0.2s both;
}

.hero h1 span { 
    color: #000000; 
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #ccc; 
    margin: 1.5rem auto 2.5rem;
    max-width: 600px; 
    font-weight: 300;
    animation: fadeUp 1s ease 0.4s both;
}

.hero-cta {
    display: inline-flex; 
    align-items: center; 
    gap: 0.8rem;
    font-family: 'Inter', sans-serif; 
    font-weight: 700;
    font-size: 0.9rem; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    padding: 1rem 2.5rem; 
    border: 4px solid #030302;
    background: transparent; 
    color: #f5f3ed;
    cursor: pointer; 
    transition: all 0.4s;
    animation: fadeUp 1s ease 0.6s both;
}

.hero-cta:hover {
    background: #f3f1f1; 
    color: #0a0a0a;
    box-shadow: 0 0 40px rgba(252, 252, 252, 0.3);
}

.hero-scroll {
    position: absolute; 
    bottom: 2rem; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 2;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    gap: 0.5rem; 
    color: #888; 
    font-size: 0.7rem;
    letter-spacing: 2px; 
    text-transform: uppercase;
    animation: bounce 2s infinite;
}
.hero-scroll i { 
    font-size: 1rem; 
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* ──────────────── Section Shared ──────────────── */
section { 
    padding: 6rem 5%; 
}

.section-header {
    text-align: center; 
    margin-bottom: 4rem;
}

.section-tag {
    display: inline-block;
    font-family: 'Arial Narrow Bold', sans-serif; 
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fffef9; 
    margin-bottom: 0.8rem;
}

.section-about {
    display: inline-block;
    font-family: 'Arial Narrow Bold', sans-serif; 
    font-weight: normal;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #fffef9; 
    margin-top: 1rem;
    margin-bottom: 0.8rem;
}

.section-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700; 
    text-transform: uppercase;
}

.section-header h2 span { 
    color: #ebe9e1; 
}

.section-header p {
    color: #888; 
    max-width: 500px; 
    margin: 0.8rem auto 0;
    font-weight: 300;
}

.section-divider {
    width: 60px; 
    height: 3px; 
    background: #ffffff;
    margin: 0.8rem auto 0;
}

/* ──────────────── Specs and Cards ──────────────── */
.specs { 
    background: #0f0f0f; 
    position: relative; 
}

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

.spec-card-1:hover, .spec-card-2:hover, .spec-card-3:hover, 
.spec-card-4:hover, .spec-card-5:hover, .spec-card-6:hover,
.spec-card-7:hover, .spec-card-8:hover {
    border-color: rgba(252, 251, 247, 0.938);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 197, 24, 0.15);
    filter: brightness(1.15);
}

.spec-card-1 {
    background-image: url('https://www.bennaford.com/blogs/2469/wp-content/uploads/2023/01/2024-Ford-Mustang-Engine-768x500_oem.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-2 {
    background-image: url('https://hips.hearstapps.com/hmg-prod/images/24-darkhourse-blueember-mediadrive-nc-34-64c81233d2466.jpeg?resize=980:*');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-3 {
    background-image: url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_25.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-4 {
    background-image: url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_21.jpg');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s ease; 
    position: relative;
    overflow: hidden;
}

.spec-card-5 {
    background-image: url('https://hips.hearstapps.com/mtg-prod/65a436637d3f4d00081300b6/012-2024-mustang-dark-horse-ford-track-impressions-dislikes-likes-charlotte-handling.jpg?w=768&width=768&q=75&format=webp');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-6 {
    background-image: url('https://cdn11.bigcommerce.com/s-eq0qefkn64/images/stencil/1280x1280/products/18117/19705/Screenshot_2025-06-13_124828__57144.1749845460.png?c=1');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-7 {
    background-image: url('https://tyre24.pirelli.com/dynamic_engine/assets/visori/3_4/pzeroPZ4.png');
    background-size: cover;       
    background-position: center; 
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

.spec-card-8 {
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQK766MrI83Aq2AzzSQnd_VKpiQiG2juS1_KM3BoKKqMh3r7jGgm8D9wYLn&s=10');
    background-size: cover;       
    background-position: center;  
    background-repeat: no-repeat; 
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem 2rem; 
    text-align: center;
    color: #ffffff;
    transition: all 0.4s; 
    position: relative;
    overflow: hidden;
}

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

.spec-icon {
    font-size: 3rem; 
    color: #f5f1f1; 
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 2;
}

.spec-icon .material-symbols-outlined {
    font-size: 3rem; 
}

.spec-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem; 
    text-transform: uppercase;
    margin-bottom: 0.5rem; 
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.spec-card-1 .spec-value,
.spec-card-2 .spec-value,
.spec-card-3 .spec-value,
.spec-card-4 .spec-value,
.spec-card-5 .spec-value,
.spec-card-6 .spec-value,
.spec-card-7 .spec-value,
.spec-card-8 .spec-value {
    font-size: 1.05rem;
    color: #fffbfb;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
    -webkit-font-smoothing: antialiased;
    position: relative;
    z-index: 2;
}

.spec-card .spec-number {
    font-family: 'Syncopate', sans-serif;
    font-size: 2.5rem; 
    font-weight: 700;
    color: #ffffff; 
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 2;
}


/* ──────────────── Gallery ──────────────── */
.gallery { 
    background: #0a0a0a; 
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 1rem; 
    max-width: 1200px; 
    margin: 0 auto;
}

.gallery-item {
    position: relative; 
    overflow: hidden; 
    cursor: pointer;
    background: #1a1a1a; 
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    transition: all 0.4s;
    display: flex; 
    align-items: flex-end;
    padding: 1.5rem;
}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(4) { grid-column: span 2; }

.gallery-item .placeholder-bg {
    position: absolute; 
    inset: 0;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s;
    z-index: 1;
}

.gallery-item:hover .placeholder-bg {
    transform: scale(1.05);
}

.gallery-item .gallery-overlay {
    position: absolute; 
    inset: 0;
    z-index: 3;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
    padding: 1.5rem; 
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    text-align: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.3) 100%);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay span {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem; 
    text-transform: uppercase; 
    color: #fffefa;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.gallery-overlay small { 
    font-family: 'Arial Narrow Bold', sans-serif;
    font-weight: 700;
    color: #f1f1f1; 
    font-size: 0.9rem; 
    letter-spacing: 0.5px;
}

.gallery-bg-1 {
    background:
            url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_8.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gallery-bg-2 {
     background:
            url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_10.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    }

.gallery-bg-3 {
     background:
            url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_12.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    }

.gallery-bg-4 {
     background:
            url('https://hips.hearstapps.com/hmg-prod/images/2026-ford-mustang-dark-horse-sc-125-69680bf05c1a9.jpg?crop=1xw:1xh;center,top');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    }

.gallery-bg-5 {
     background: 
            url('https://www.fromtheroad.ford.com/content/dam/fordmediasite/us/en/library/2026/the-new-mustang-dark-horse-sc--a-new-standard-for-race-bred-engineering/2026_Mustang_Dark_Horse_SC_Track_Pack_18.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    }

.gallery-item .gallery-overlay {
    position: absolute; 
    inset: 0;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
    padding: 1.5rem; 
    opacity: 0;
    transition: opacity 0.4s;
    text-align: center;
}

/* ──────────────── Test Drive ──────────────── */
.test-drive {
    background: #0f0f0f; 
    position: relative;
}

.test-drive::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 1px;
    background: linear-gradient(to right, transparent, #fffefb, transparent);
}

.form-wrapper {
    max-width: 620px; 
    margin: 0 auto;
    background: linear-gradient(145deg, #1a1a1a, #111);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 3rem;
}

.form-row { 
    display: flex; 
    gap: 1rem; 
}
.form-group { 
    flex: 1; 
    margin-bottom: 1.5rem; 
}

.form-group label {
    display: block; 
    font-size: 0.75rem; 
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: 1px;
    color: #888; 
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; 
    padding: 0.9rem 1rem;
    background: #0a0a0a4b; 
    border: 1px solid rgba(255,255,255,0.08);
    color: #f5f5f5; 
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem; 
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #fdf9eb;
}

.form-group textarea { 
    resize: vertical; 
    min-height: 100px; 
}

.form-group select { 
    appearance: none; 
    cursor: pointer; 
}
.form-group select option { 
    background: #0a0a0a; 
    color: #f5f5f5; 
}

.submit-btn {
    width: 100%; 
    padding: 1rem;
    font-family: 'Oswald', sans-serif; 
    font-weight: 700;
    font-size: 0.85rem; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    background: #3b3939; 
    color: #000000; 
    border: none;
    cursor: pointer; 
    transition: all 0.4s;
}

.submit-btn:hover {
    background: #fffffc;
    box-shadow: 0 0 40px rgba(245,197,24,0.2);
}

.form-success {
    display: none; 
    text-align: center; 
    padding: 2rem 0;
}

.success-icon {
    font-size: 3rem; 
    color: #49d649; 
    margin-bottom: 1rem;
}

.success-title {
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase;
}

.success-text {
    color: #aaa;
}

/* ──────────────── Footer ──────────────── */
footer {
    text-align: center; 
    padding: 2.5rem 5%;
    border-top: 1px solid rgba(255,255,255,0.05);
}

footer p { 
    color: #fcfafa; 
    font-size: 0.8rem; 
    font-weight: 300; 
}

footer .footer-logo {
    display: inline-block;
    width: 120px;          
    height: 40px;   
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3e/Ford_logo_flat.svg?utm_source=tr.wikipedia.org&utm_campaign=index&utm_content=original');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;  
    
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem; 
    letter-spacing: 2px; 
    margin-bottom: 0.5rem;
    text-indent: -9999px;
}

footer .footer-logo span { 
    color: #f8f7f3; 
}

footer .social-links { 
    display: flex; 
    justify-content: center; 
    gap: 1.5rem; 
    margin: 1rem 0; 
}

footer .social-links a { 
    color: #555; 
    font-size: 1.2rem; 
    transition: color 0.3s; 
}

footer .social-links a:hover { 
    color: #fafaf9; 
}

.footer-subtext {
    margin-top: 0.3rem;
}

/* ──────────────── Responsive ──────────────── */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }
    .gallery-item:nth-child(1) { grid-column: span 2; }
    .gallery-item:nth-child(4) { grid-column: span 2; }

    section { padding: 4rem 5%; }
    .form-wrapper { padding: 2rem; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .nav-links.active {
        display: flex; 
        flex-direction: column;
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%;
        background: rgba(10,10,10,0.98);
        padding: 1.5rem 5%; 
        gap: 1.2rem;
        border-bottom: 1px solid rgba(245,197,24,0.1);
    }

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

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }
    .gallery-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
    .gallery-item:nth-child(4) { grid-column: span 1; }

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

    .form-wrapper { padding: 1.5rem; }

    .hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (max-width: 480px) {
    section { padding: 3rem 5%; }
    .hero-cta { padding: 0.8rem 1.8rem; font-size: 0.8rem; }
    .navbar { padding: 0.8rem 5%; }
    .logo { font-size: 1.3rem; }
}