/* ==========================
           VindXit Landing Styles
           ==========================
            • Palette + tokens live here for easy theming
            • Optimized for mobile-first with larger touch targets
        */
        :root {
            --vx-blue: #0047AB;          /* brand primary */
            --vx-sky: #00AEEF;           /* accent */
            --vx-yellow: #FFCC00;        /* accent */
            --vx-dark: #021c3a;          /* canvas */
            --vx-panel: #0f1a2b;         /* panels */
            --vx-text: #e9eef6;          /* body text */
            --vx-muted: #9fb0c6;         /* secondary text */
            --vx-success: #19c37d;       /* good result */
            --radius: 16px;              /* softer corners for mobile */
            --shadow: 0 8px 24px rgba(0,30,80,.35), inset 0 1px 0 rgba(255,255,255,.05);
        }

        /* 🔤 Base type + page canvas */
        html, body { height: 100%; }
        body {
            margin: 0;
            font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            color: var(--vx-text);
            background:
                radial-gradient(800px 400px at 15% -10%, rgba(255,204,0,.10), transparent 60%),
                radial-gradient(600px 300px at 85% 0%, rgba(0,174,239,.12), transparent 60%),
                linear-gradient(180deg, #0a2a76 0%, #0c43c4 60%, #0a3aa4 100%);
            min-height: 100svh;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        /* 🔲 Generic containers */
        .container { width: min(1200px, 90vw); margin-inline: auto; }
        .section { padding: clamp(24px, 1vw, 48px) 0; } /* Tighter padding for mobile */
        .card {
            background: linear-gradient(180deg, var(--vx-panel), #0d1630);
            border: 1px solid rgba(255,255,255,.07);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        /* =============== Header =============== */
        header.site {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: saturate(1.1) blur(6px);
            background: linear-gradient(180deg, rgba(3,16,40,.75), rgba(3,16,40,.35));
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .nav {
            display: flex;
            align-items: center;
            justify-content: center; /* Center logo on mobile */
            padding: 12px 0;
        }
        .logo {
            font-family: "Exo 2", sans-serif;
            font-weight: 800;
            letter-spacing: .5px;
            font-size: clamp(20px, 5vw, 28px); /* Smaller logo for mobile */
            color: white;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .logo .dot { color: var(--vx-yellow); }
        .logo-img {
            height: clamp(24px, 4vw, 32px);
            width: auto;
            display: block;
        }

        /* 🟡 Primary/secondary buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .6rem;
            padding: 1rem 1.5rem; /* Larger touch targets */
            border-radius: 12px;
            font-weight: 800;
            letter-spacing: .2px;
            border: 1px solid rgba(255,255,255,.12);
            box-shadow: var(--shadow);
            transition: transform .12s ease, filter .2s ease, background .2s ease;
            font-size: clamp(14px, 10vw, 16px); /* Readable button text */
            min-height: 44px; /* Minimum touch target size */
        }
        .btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
        .btn:active { transform: translateY(0px) scale(.98); }
        .btn.primary { background: linear-gradient(180deg, var(--vx-yellow), #e3b300); color: #14120a; }
        .btn.ghost { background: rgba(255,255,255,.07); color: #fff; }

        /* Double width for the "Score a car" button in hero CTA */
        .hero .cta .btn.primary {
            padding: 1rem 14rem; /* Doubled width via padding */
        }
      @media (max-width: 900px) {
            .hero .cta .btn.primary {
                padding: 1rem 8rem; /* Doubled width via padding */
        }
      }
        
        /* =============== Hero =============== */
        .hero {
            display: grid;
            gap: 16px;
            grid-template-columns: 1fr;
            align-items: center;
        }
        .hero .copy {
            text-align: center;
        }
        .hero h1 {
            font-family: "Exo 2", sans-serif;
            font-weight: 800;
            margin: 0;
            font-size: clamp(28px, 7vw, 40px); /* Smaller for mobile */
            text-shadow: 0 4px 20px rgba(0,0,0,.35);
        }
        .hero p {
            margin: 8px auto 0;
            max-width: 90%;
            font-size: clamp(14px, 4vw, 16px); /* Readable on small screens */
            color: var(--vx-muted);
        }
        .hero .cta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 16px;
        }
        .hero .screen {
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow);
            background: #0b1630;
            min-height: 180px; /* Smaller for mobile */
        }
        .hero img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* =============== Steps =============== */
        .steps {
            display: grid;
            gap: 12px;
            grid-template-columns: 1fr;
        }
        .step {
            padding: 6px;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 12px;
            align-items: center;
        }
        .step .num {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            font-weight: 900;
            font-size: 18px;
            color: #111;
            background: linear-gradient(180deg, #ffe577, #ffcc00);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,.35);
        }
        .step h3 {
            margin: 0;
            font-family: "Exo 2", sans-serif;
            letter-spacing: .2px;
            font-size: clamp(16px, 4.5vw, 18px); /* Adjusted for mobile */
        }
        .step p {
            margin: .25rem 0 0;
            color: var(--vx-muted);
            font-size: clamp(13px, 3.8vw, 14px);
        }
        .step .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

/* =============== Feature strip =============== */
.features {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
.feature {
    padding: 16px;
    display: flex;
    align-items: flex-start; /* Align items to top for image inclusion */
    gap: 12px;
}
.feature .badge {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
}
.feature b {
    font-family: "Exo 2", sans-serif;
    font-size: clamp(14px, 4vw, 16px);
}
.feature .caption {
    font-size: clamp(12px, 3.5vw, 13px);
}
.feature-shot {
    margin-top: 12px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: #0b1630;
}
.feature-shot img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    aspect-ratio: 16 / 9;
}

/* Hide gallery section on mobile */
.gallery-section {
    display: none;
}

/* Show gallery section and adjust features for desktop */
@media (min-width: 900px) {
    .features {
        grid-template-columns: repeat(3, 1fr);
    }
    .feature {
        align-items: center; /* Revert to center for desktop */
    }
    .feature-shot {
        display: none; /* Hide images in features on desktop */
    }
    .gallery-section {
        display: block; /* Show gallery on desktop */
    }
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .gallery .shot {
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.08);
        background: #0b1630;
    }
    .gallery img {
        width: 100%;
        height: auto;
        display: block;
    }
}
        /* 🧩 Responsive upgrades */
        @media (min-width: 900px) {
            .hero { grid-template-columns: 1.1fr .9fr; }
            .hero .copy { text-align: left; }
            .steps { grid-template-columns: repeat(3, 1fr); }
            .features { grid-template-columns: repeat(3, 1fr); }
            .gallery { grid-template-columns: repeat(3, 1fr); }
            .hero h1 { font-size: clamp(32px, 4.8vw, 56px); }
            .hero p { font-size: clamp(16px, 1.6vw, 20px); }
            .hero .screen { min-height: 220px; }
        }

        /* === Screenshot framing so images fit without warping === */
        .hero .screen,
        .gallery .shot { position: relative; overflow: hidden; }

        .hero .screen { aspect-ratio: 16 / 9; } /* Adjusted for mobile */
        .gallery .shot { aspect-ratio: 16 / 9; }

        .hero .screen img,
        .gallery .shot img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: radial-gradient(100px 60px at 50% 50%, rgba(255,255,255,.03), transparent 60%);
        }

        .shot.fill img { object-fit: cover; }
        .pos-top img { object-position: center top; }
        .pos-center img { object-position: center; }

        .ar-21x9 { aspect-ratio: 21 / 9; }
        .ar-16x9 { aspect-ratio: 16 / 9; }
        .ar-4x1 { aspect-ratio: 4 / 1; }

/* Mobile landscape: give screenshots more vertical room */
@media (max-width: 900px) and (orientation: landscape) {
	.feature-shot { 
		min-height: 260px;            /* was auto — gives it more depth */
	}
	.feature-shot img {
		aspect-ratio: 21 / 9;         /* wider frame helps in landscape */
		object-fit: contain;          /* keep the whole image visible */
	}
	/* If you also want the hero shot taller in landscape: */
	.hero .screen {
		min-height: 260px;
		aspect-ratio: 21 / 9;
	}
}
/* 🔍 Lightbox overlay */
.lightbox {
	display: none;              /* hidden until active */
	position: fixed;
	z-index: 99999;
	inset: 0;
	background: rgba(0,0,0,0.9);
	align-items: center;
	justify-content: center;
}

/* big image */
.lightbox-content {
	max-width: 95%;
	max-height: 95%;
	object-fit: contain;
	box-shadow: 0 0 20px rgba(0,0,0,.6);
	border-radius: 8px;
}

/* close (×) button */
.lightbox .close {
	position: absolute;
	top: 16px;
	right: 24px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
}

    @media screen and (max-width: 768px) and (orientation: landscape) {
	.logo-link { position: relative; top: 0; left: 0; transform: none; margin: 0 auto; }
	.logo-img { max-width: 140px; height: auto; }
}
/* —— VindXit: final-say for logo animation —— */
header .logo-img{
	/* make sure transforms can apply */
	display:inline-block;
	will-change: transform;

	/* re-assert both animations with higher specificity */
	animation:
		vxRunAcrossNoBlur 2.5s cubic-bezier(.2,1.1,.2,1) .2s both,
		vxBreath          6s   ease-in-out                 3s  infinite !important;
}

/* keep hover breathe without killing run-in afterward */
header .logo-img:hover{
	animation: vxBreath 6s ease-in-out 0s infinite !important;
}

/* (optional) if any ancestor accidentally clips during the run-in */
header { overflow: visible !important; }

  .logo-img {
    height: 150px !important;
  }