/* ===== Variables ===== */
:root {
    --bg-dark: #070707;
    --bg-card: #121212;
    --bg-card-hover: #1b1b1b;
    --text-primary: #ffffff;
    --text-muted: #c6c6c6;
    --accent: #facc15;
    --accent-dim: #eab308;
    --accent-glow: rgba(250, 204, 21, 0.32);
    --purple: #fde047;
    --purple-dim: #ca8a04;
    --border: rgba(255, 255, 255, 0.12);
    --font-sans: 'Outfit', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 14px;
    --radius-lg: 22px;
    --header-height: 72px;
    --play-btn-size: 52px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

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

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Play Store Button - Top Right ===== */
.playstore-btn {
    position: fixed;
    top: 10px;
    right: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
    color: #0a0b0f;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    box-shadow: 0 4px 24px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.playstore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--accent-glow);
}

.playstore-btn .playstore-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.playstore-text {
    display: none;
}

@media (min-width: 640px) {
    .playstore-btn .playstore-text {
        display: inline;
    }
}

/* ===== Header ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 100;
    background: rgba(10, 11, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    height: 100%;
}

.nav-logo-block {
    padding: 8px 15px;
    background: transparent;
    border: none;
    border-radius: 12px;
    margin-left: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

.logo {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-logo-img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.nav-links {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 32px;
    justify-self: center;
}

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

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

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

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

    .mobile-menu-btn {
        display: none;
    }
}

.mobile-menu-btn {
    justify-self: end;
}

/* ===== Hero ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-height) + 48px) 24px 0;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 12s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--accent);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 320px;
    height: 320px;
    background: var(--purple);
    bottom: -80px;
    left: -80px;
    animation-delay: -4s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
}

/* Hero: animated road strip + car/bike */
.hero-road {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 0;
    overflow: hidden;
}

.hero-road-lines {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(0, 212, 170, 0.4);
    transform: translateY(-50%);
    animation: roadMove 4s linear infinite;
}

@keyframes roadMove {
    0% { transform: translateY(-50%) translateX(0); }
    100% { transform: translateY(-50%) translateX(-60px); }
}

.hero-vehicle {
    position: absolute;
    bottom: 24px;
    width: 48px;
    height: 24px;
    color: var(--accent);
    opacity: 0.85;
    z-index: 1;
}

.hero-vehicle svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-car {
    left: 15%;
    animation: heroCarDrive 8s ease-in-out infinite;
}

.hero-bike {
    left: 55%;
    animation: heroBikeDrive 10s ease-in-out infinite 1s;
}

@keyframes heroCarDrive {
    0%, 100% { left: 15%; opacity: 0.85; }
    50% { left: 75%; opacity: 0.9; }
}

@keyframes heroBikeDrive {
    0%, 100% { left: 55%; opacity: 0.85; }
    50% { left: 20%; opacity: 0.9; }
}

/* ===== Traffic Play Section (interactive) ===== */
.traffic-play-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.25);
}

.traffic-play-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.traffic-light-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.traffic-light {
    width: 72px;
    padding: 12px 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 3px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.traffic-light:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 212, 170, 0.2);
}

.traffic-dome {
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

.traffic-bulb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid rgba(255,255,255,0.1);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.traffic-red { background: #2a1515; }
.traffic-yellow { background: #2a2a15; }
.traffic-green { background: #152a15; }

.traffic-light.state-red .traffic-red { background: #e53935; box-shadow: 0 0 20px rgba(229, 57, 53, 0.6); }
.traffic-light.state-yellow .traffic-yellow { background: #fdd835; box-shadow: 0 0 20px rgba(253, 216, 53, 0.6); }
.traffic-light.state-green .traffic-green { background: #00d4aa; box-shadow: 0 0 20px rgba(0, 212, 170, 0.6); }

.traffic-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.traffic-road {
    position: relative;
    width: 100%;
    height: 70px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

.traffic-road-lines {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(255,255,255,0.2);
    transform: translateY(-50%);
    animation: roadMove 3s linear infinite;
}

.traffic-vehicle {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 22px;
    color: var(--accent);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.traffic-vehicle svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.traffic-vehicle.go {
    opacity: 1;
}

.traffic-run-car {
    left: 0;
}

.traffic-run-car.run {
    animation: trafficCarRun 2.5s ease-out forwards;
}

.traffic-run-bike {
    left: 0;
    top: 60%;
}

.traffic-run-bike.run {
    animation: trafficBikeRun 2.8s ease-out 0.2s forwards;
}

@keyframes trafficCarRun {
    0% { left: 0; opacity: 1; }
    100% { left: calc(100% - 44px); opacity: 1; }
}

@keyframes trafficBikeRun {
    0% { left: 0; opacity: 1; }
    100% { left: calc(100% - 44px); opacity: 1; }
}

@media (min-width: 640px) {
    .traffic-play-zone {
        flex-direction: row;
        max-width: 640px;
        padding: 32px 40px;
    }

    .traffic-road {
        flex: 1;
        height: 80px;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 24px;
}

.hero-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 212, 170, 0.15);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 212, 170, 0.3);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--text-primary);
    background: linear-gradient(135deg, #fff 0%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero title: exactly two lines */
.hero-title-two-lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05em;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    margin: 0 auto;
}

.hero-title-two-lines .hero-title-line1,
.hero-title-two-lines .hero-title-line2 {
    display: block;
    text-align: center;
    color: #f0f2f5;

    /* Make text visually wider */
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 0.03em;

    /* Prevent unnecessary wrapping */
    white-space: normal;
    line-height: 1.1;

    -webkit-text-fill-color: initial;
    background: none;
    background-clip: unset;
}

@media (max-width: 480px) {
    .hero-title-two-lines { font-size: 1.65rem; }
}

/* Hero interactive: entrance + hover */
.hero-badge-animate {
    animation: heroFadeIn 0.6s ease-out;
}

.hero-title-two-lines .hero-title-line1 {
    animation: heroFadeIn 0.7s ease-out 0.1s both;
}

.hero-title-two-lines .hero-title-line2 {
    animation: heroFadeIn 0.7s ease-out 0.2s both;
}

.hero-tagline-animate {
    animation: heroFadeIn 0.6s ease-out 0.35s both;
}

.hero-content .hero-desc { animation: heroFadeIn 0.6s ease-out 0.4s both; }
.hero-content .hero-desc-sub { animation: heroFadeIn 0.6s ease-out 0.5s both; }
.hero-content .hero-badge-platform { animation: heroFadeIn 0.6s ease-out 0.55s both; }
.hero-ctas { animation: heroFadeIn 0.6s ease-out 0.65s both; }

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

.hero-content::before {
    content: none;
}

.cta-primary {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-primary:active {
    transform: translateY(0) scale(0.98);
}

.hero-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
}

.hero-desc {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.7;
}

.hero-desc-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.7;
}

.hero-badge-platform {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 28px;
    font-family: var(--font-mono);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

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

.cta-appstore {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

.cta-appstore:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

.hero-compact {
    min-height: 50vh;
    padding: calc(var(--header-height) + 40px) 24px 60px;
}

.hero-compact .scroll-indicator {
    display: none;
}

.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
    color: #0a0b0f;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    box-shadow: 0 4px 24px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--accent-glow);
}

.cta-large {
    padding: 18px 32px;
    font-size: 1.1rem;
}

.scroll-indicator {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0 32px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font-mono);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    border-radius: 2px;
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ===== Content blocks (Why exists, etc.) ===== */
.content-block {
    padding: 80px 24px;
}

/* Prevent content overlapping the fixed Play Store button */
@media (min-width: 640px) {
    .content-block .container {
        padding-right: 50px;
    }
}

.content-block-alt {
    background: rgba(0, 0, 0, 0.2);
}

/* ===== Why Urgeon Exists: attractive card + animations ===== */
.why-exists-section {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.2) 100%);
    position: relative;
    overflow: hidden;
}

.why-exists-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.3), transparent);
    opacity: 0.6;
}

.why-exists-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(145deg, rgba(18, 20, 28, 0.95) 0%, rgba(10, 11, 15, 0.98) 100%);
    border: 1px solid rgba(0, 212, 170, 0.15);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.why-exists-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 212, 170, 0.08) 0%, transparent 60%);
    pointer-events: none;
    animation: whyExistsGlow 4s ease-in-out infinite;
}

@keyframes whyExistsGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.why-exists-inner {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* Staggered reveal: start hidden, animate in when .in-view */
.why-exists-title,
.why-exists-problem,
.why-exists-solution,
.why-exists-body {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-exists-card.in-view .why-exists-title {
    transition-delay: 0.05s;
}
.why-exists-card.in-view .why-exists-problem {
    transition-delay: 0.2s;
}
.why-exists-card.in-view .why-exists-solution {
    transition-delay: 0.4s;
}
.why-exists-card.in-view .why-exists-body {
    transition-delay: 0.6s;
}

.why-exists-card.in-view .why-exists-title,
.why-exists-card.in-view .why-exists-problem,
.why-exists-card.in-view .why-exists-solution,
.why-exists-card.in-view .why-exists-body {
    opacity: 1;
    transform: translateY(0);
}

.why-exists-title {
    margin-bottom: 36px;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-exists-problem {
    margin-bottom: 28px;
}

.why-exists-lead {
    font-size: 1.2rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 0;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

.why-exists-solution {
    position: relative;
    text-align: center;
    margin-bottom: 36px;
}

.why-exists-highlight {
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0;
    display: inline-block;
    position: relative;
    letter-spacing: -0.02em;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.why-exists-highlight:hover {
    transform: scale(1.02);
    text-shadow: 0 0 30px rgba(0, 212, 170, 0.4);
}

.why-exists-highlight-line {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 120%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 2px;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
    box-shadow: 0 0 12px rgba(0, 212, 170, 0.5);
    transform-origin: center;
}

.why-exists-card.in-view .why-exists-highlight-line {
    transform: translateX(-50%) scaleX(1);
}

.why-exists-body .content-body {
    margin-bottom: 20px;
    transition: opacity 0.5s ease 0.85s;
}

.why-exists-body .content-body:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .why-exists-card {
        padding: 40px 24px;
    }
}

/* Shared content block styles */
.content-block .section-title {
    margin-bottom: 32px;
}

.content-lead {
    font-size: 1.25rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.7;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.content-highlight {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    margin-bottom: 32px;
}

.content-body {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    line-height: 1.8;
    text-align: left;
}

.content-block .content-body {
    text-align: left;
}

.content-body:last-child {
    margin-bottom: 0;
}

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

.content-body.max-w {
    max-width: 720px;
    margin-bottom: 40px;
    text-align: center;
}

.content-body-wrap {
    max-width: 600px;
    margin: 0 auto;
}

.content-body-wrap .content-body {
    margin-bottom: 24px;
}

.content-body-wrap .content-body:last-child {
    margin-bottom: 0;
}

.content-muted {
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 0.8;
    font-style: italic;
    margin-top: 24px;
}

.container-narrow {
    max-width: 640px;
}

.page-main {
    padding-bottom: 0;
}

/* ===== Profile cards (Team & Partner) ===== */
.profiles-section {
    padding: 80px 0;
}

.profiles-section .section-title {
    margin-bottom: 48px;
}

/* ============================= */
/* Dealer profiles scroll slider */
/* ============================= */

.profiles-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 10px 4px 20px;
    max-width: 100%;
}

/* Scrollbar styling */
.profiles-grid::-webkit-scrollbar {
    height: 8px;
}

.profiles-grid::-webkit-scrollbar-thumb {
    background: rgba(0,212,170,0.3);
    border-radius: 10px;
}

/* Each profile becomes a slide */
.profiles-grid .profile-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
}


.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.profile-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 212, 170, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 3px solid rgba(0, 212, 170, 0.3);
}

.profile-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 3px solid rgba(0, 212, 170, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(0, 212, 170, 0.12);
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.profile-intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 320px;
}



/* ===== Features ===== */
.features {
    padding: 100px 0;
}

.features-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.features-grid-wide .feature-card p {
    display: none;
}

.features-grid-wide .feature-card h3 {
    font-size: 1rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 12px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 56px;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(0, 212, 170, 0.2);
    transform: translateY(-4px);
}

/* Staggered entrance when in view */
.features-grid .feature-card.in-view:nth-child(1) { transition-delay: 0s; }
.features-grid .feature-card.in-view:nth-child(2) { transition-delay: 0.08s; }
.features-grid .feature-card.in-view:nth-child(3) { transition-delay: 0.16s; }
.features-grid .feature-card.in-view:nth-child(4) { transition-delay: 0.24s; }
.features-grid .feature-card.in-view:nth-child(5) { transition-delay: 0.32s; }
.features-grid .feature-card.in-view:nth-child(6) { transition-delay: 0.4s; }
.features-grid .feature-card.in-view:nth-child(7) { transition-delay: 0.48s; }
.features-grid .feature-card.in-view:nth-child(8) { transition-delay: 0.56s; }
.steps .step.in-view:nth-child(1) { transition-delay: 0s; }
.steps .step.in-view:nth-child(2) { transition-delay: 0.1s; }
.steps .step.in-view:nth-child(3) { transition-delay: 0.2s; }
.steps .step.in-view:nth-child(4) { transition-delay: 0.3s; }
.steps .step.in-view:nth-child(5) { transition-delay: 0.4s; }
.steps .step.in-view:nth-child(6) { transition-delay: 0.5s; }
.steps .step.in-view:nth-child(7) { transition-delay: 0.6s; }
.steps .step.in-view:nth-child(8) { transition-delay: 0.7s; }

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 170, 0.12);
    border-radius: var(--radius);
    margin-bottom: 20px;
    color: var(--accent);
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== How it works ===== */
.how-it-works {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.2);
}

.how-it-works .section-title {
    margin-bottom: 56px;
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.step:hover {
    border-color: rgba(124, 92, 255, 0.25);
    transform: translateY(-2px);
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dim) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.35rem;
    font-family: var(--font-mono);
    border-radius: 50%;
    margin-bottom: 20px;
}

.step h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

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

.steps-8 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.steps-8 .step p {
    display: none;
}

@media (min-width: 768px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .steps-8 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Core Services ===== */
.core-services {
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.2);
}

.core-services .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

.core-services .section-title {
    grid-column: 1 / -1;
    margin-bottom: 0;
    padding-bottom: 48px;
}

.service-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    margin-bottom: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.core-services .service-block {
    margin-bottom: 0;
}

.service-block:hover {
    border-color: rgba(0, 212, 170, 0.15);
}

.service-block-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-emoji {
    font-style: normal;
}

.service-list {
    list-style: none;
    margin-bottom: 16px;
}

.service-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.service-list-benefits {
    max-width: 480px;
    margin: 0 auto 24px;
}

.service-tagline {
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: 500;
    margin: 0;
}

@media (max-width: 768px) {
    .core-services .container {
        grid-template-columns: 1fr;
    }
}

/* ===== Dealers ===== */
.dealers {
    padding: 10px 0;
}

.dealers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.dealer-pill {
    text-align: center;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dealer-pill:hover {
    border-color: rgba(0, 212, 170, 0.3);
    background: var(--bg-card-hover);
}

.dealers-profiles-wrap {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}

.dealers-profiles-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.dealers-profiles-wrap .section-subtitle {
    margin-bottom: 40px;
}

.dealers-profiles-wrap .profiles-grid {
    margin-bottom: 0;
}

/* Enhanced dealer profile cards */
.dealer-profile {
    position: relative;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.dealer-profile:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 24px rgba(0, 212, 170, 0.1);
}

.dealer-badge {
    display: inline-block;
    width: 100%;
    margin-bottom: 8px !important;
}

.dealer-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.dealer-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 6px 0;
    line-height: 1.4;
}

/* Dealer Leaderboard Styles */
.dealer-leaderboard {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid var(--accent);
}

.leaderboard-container {
    max-width: 600px;
    margin: 32px auto 0;
    max-height: 800px;
}

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.leaderboard-item:hover {
    background: rgba(0, 212, 170, 0.05);
    border-color: var(--accent);
    transform: translateX(4px);
}

.leaderboard-item.rank-1 {
    border: 2px solid #FFD700;
    background: rgba(255, 215, 0, 0.05);
}

.leaderboard-item.rank-2 {
    border: 2px solid #C0C0C0;
    background: rgba(192, 192, 192, 0.05);
}

.leaderboard-item.rank-3 {
    border: 2px solid #CD7F32;
    background: rgba(205, 127, 50, 0.05);
}

.leaderboard-rank {
    font-size: 1.5rem;
    min-width: 32px;
    text-align: center;
}

.leaderboard-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leaderboard-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.leaderboard-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.leaderboard-score {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .leaderboard-item {
        flex-wrap: wrap;
        gap: 12px;
    }

    .leaderboard-info {
        width: 100%;
    }

    .leaderboard-score {
        width: 100%;
    }
}

/* ===== Contact ===== */
.contact {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.2);
}

.contact-box {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.contact-item {
    display: block;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.contact-item:hover {
    color: var(--accent);
}

/* ===== Download CTA ===== */
.download {
    padding: 100px 0;
}

.download-box {
    text-align: center;
    padding: 64px 40px;
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(18, 20, 28, 0.9) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.download-box h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 12px;
}

.download-box p {
    color: var(--text-muted);
    margin-bottom: 32px;
    font-size: 1.05rem;
}

/* ===== Footer ===== */
.footer {
    padding: 48px 0;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

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

.footer-play {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-play:hover {
    color: var(--accent-dim);
}

/* ===== Mobile nav overlay ===== */
@media (max-width: 767px) {

    .nav-links.mobile-open {
        display: flex;
        position: fixed;
        top: 0;                 /* cover full screen */
        left: 0;
        right: 0;
        
        flex-direction: column;
        justify-content: center;
        gap: 24px;

        background: rgba(10, 11, 15, 0.92); /* dark glass */
        backdrop-filter: blur(16px);        /* premium blur */
        -webkit-backdrop-filter: blur(16px);

        padding: 32px 24px;
        height: 100vh;
        width: 100vw;
        z-index: 9999;
        overflow-y: auto;

    }
}

.nav-links.mobile-open a {
    font-size: 1.25rem;
}

/* =========================
   MOBILE HEADER FIX
   ========================= */
   @media (max-width: 767px) {

    .nav {
        grid-template-columns: auto auto; /* logo | hamburger */
        gap: 0;
    }

    .nav-logo-block {
        margin-left: 0;            /* RESET the -100px */
        padding: 8px 12px;         /* tighter padding */
        background: transparent;   /* cleaner mobile */
        border: none;
    }

    .logo {
        font-size: 1.2rem;
        line-height: 1;
    }
}

/* ==============================
   Hide Play Store button on mobile
   ============================== */
   @media (max-width: 767px) {
    .playstore-btn {
        display: none;
    }
}
/* Space between Leaderboard and Join as Dealer card */
.dealer-leaderboard {
    margin-bottom: 48px;
}

/* Extra breathing room for Join card */
.dealers .profile-card:last-child {
    margin-top: 24px;
}
/* ============================
   DEALER BENEFITS – UNIQUE STYLE
   ============================ */

.dealer-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 40px auto 32px;
    padding: 0;
    max-width: 900px;
}

.dealer-benefits li {
    background: linear-gradient(
        145deg,
        rgba(18, 20, 28, 0.95),
        rgba(10, 11, 15, 0.95)
    );
    border: 1px solid rgba(0, 212, 170, 0.25);
    border-radius: 18px;
    padding: 24px 22px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Accent icon */
.dealer-benefits li::before {
    content: "✔";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    background: rgba(0, 212, 170, 0.15);
    color: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Hover effect */
.dealer-benefits li:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 212, 170, 0.18);
}




/* ===== Dealer Table Styles ===== */

.dealer-table-wrap {
    overflow-x: auto;
    margin-top: 30px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.dealer-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.dealer-table th,
.dealer-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.dealer-table thead {
    background: rgba(0, 212, 170, 0.12);
}

.dealer-table tbody tr:hover {
    background: rgba(0, 212, 170, 0.05);
}

.status-badge {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(0, 212, 170, 0.2);
    color: var(--accent);
}

.status-badge.inactive {
    background: rgba(255, 80, 80, 0.2);
    color: #ff5050;
}
/* State Buttons */

.state-buttons {
display:flex;
gap:12px;
justify-content:center;
margin:20px 0;
}

.state-btn {
padding:10px 20px;
border-radius:50px;
border:none;
cursor:pointer;
background:var(--bg-card);
color:var(--text-primary);
font-weight:600;
}

.state-btn.active {
background:var(--accent);
color:black;
}

/* Summary */

.status-summary {
text-align:center;
margin-bottom:15px;
}

.summary-box {
display:inline-block;
padding:8px 14px;
border-radius:50px;
background:rgba(0,212,170,0.15);
font-weight:600;
}

/* Hide elements */

.hidden {
display:none;
}
/* ============================= */
/* MOBILE HORIZONTAL SCROLL UX */
/* ============================= */

@media (max-width: 768px) {

    /* Universal horizontal scroll container */
    .features-grid,
    .profiles-grid,
    .dealers-grid,
    .steps {

        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 16px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;
    }

    /* Hide scrollbar (clean mobile look) */
    .features-grid::-webkit-scrollbar,
    .profiles-grid::-webkit-scrollbar,
    .dealers-grid::-webkit-scrollbar,
    .steps::-webkit-scrollbar {
        display: none;
    }

    /* Each card becomes a slide */
    .feature-card,
    .profile-card,
    .dealer-pill,
    .step {

        flex: 0 0 85%;
        scroll-snap-align: center;
    }


    /* Add side padding for smooth scrolling */
    .features .container,
    .dealers .container,
    .how-it-works .container {

        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ============================= */
/* CORE SERVICES MOBILE SCROLL */
/* ============================= */

@media (max-width: 768px) {

    .core-services .container {
        display: block; /* cancel grid */
    }

    .core-services-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 16px 10px;
    }

    .core-services-scroll::-webkit-scrollbar {
        display: none;
    }

    .core-services-scroll .service-block {
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: center;
    }
}
/* ============================= */
/* CORE SERVICES DESKTOP FIX */
/* ============================= */

@media (min-width: 769px) {

    /* Restore 2-column desktop grid */
    .core-services .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        align-items: start;
    }

    /* Make scroll wrapper invisible on desktop */
    .core-services-scroll {
        display: contents;
    }

}
/* ============================= */
/* MOBILE FONT SIZE OPTIMIZATION */
/* ============================= */

@media (max-width: 768px) {

    /* Section titles */
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 28px;
    }

    /* Hero title */
    .hero-title-two-lines .hero-title-line1,
    .hero-title-two-lines .hero-title-line2 {
        font-size: 1.8rem;
        line-height: 1.15;
    }

    /* Hero text */
    .hero-desc,
    .hero-desc-sub {
        font-size: 0.95rem;
    }

    .hero-tagline {
        font-size: 1.05rem;
    }

    /* Feature cards */
    .feature-card h3 {
        font-size: 1rem;
    }

    /* Core services */
    .service-block-title {
        font-size: 1.1rem;
    }

    .service-list li {
        font-size: 0.9rem;
    }

    .service-tagline {
        font-size: 0.85rem;
    }

    /* Steps */
    .step h3 {
        font-size: 1rem;
    }

    /* Body text */
    .content-body {
        font-size: 0.95rem;
    }

}
/* ================================= */
/* PREMIUM MOBILE UX OPTIMIZATION */
/* ================================= */

@media (max-width: 768px) {

    /* ============================= */
    /* 1. Compress hero height */
    /* ============================= */

    .hero {
        min-height: 70vh;
        padding: calc(var(--header-height) + 20px) 16px 0;
    }

    .hero-content {
        padding-bottom: 8px;
    }

    .scroll-indicator {
        padding: 10px 0 16px;
    }

    /* ============================= */
    /* 2. Tighten section spacing */
    /* ============================= */

    .features,
    .core-services,
    .how-it-works,
    .dealers,
    .download,
    .contact,
    .content-block {

        padding: 48px 0;
    }

    .section-title {
        margin-bottom: 6px;
    }

    .section-subtitle {
        margin-bottom: 24px;
    }

    /* ============================= */
    /* 3. Reduce card padding */
    /* ============================= */

    .feature-card,
    .profile-card,
    .step,
    .service-block,
    .download-box,
    .contact-box {

        padding: 20px 18px;
        border-radius: 16px;
    }

    /* ============================= */
    /* 4. Core services scroll polish */
    /* ============================= */

    .core-services-scroll {
        gap: 14px;
        padding: 0 10px 8px;
        scroll-behavior: smooth;
    }

    .core-services-scroll .service-block {
        flex: 0 0 88%;
        min-width: 88%;
    }

    /* ============================= */
    /* 5. Smooth scrolling everywhere */
    /* ============================= */

    .features-grid,
    .profiles-grid,
    .dealers-grid,
    .steps {

        scroll-behavior: smooth;
        gap: 14px;
    }

    /* ============================= */
    /* 6. Thumb reach UX improvement */
    /* ============================= */

    .cta-primary {

        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 1rem;
    }

    .hero-ctas {
        width: 100%;
        gap: 12px;
    }

    /* Bigger tap targets */
    .dealer-pill,
    .step,
    .feature-card {

        min-height: 100px;
    }

    /* ============================= */
    /* 7. Cleaner text spacing */
    /* ============================= */

    .service-list li {
        margin-bottom: 6px;
    }

    .content-body {
        line-height: 1.6;
    }

}
/* ============================= */
/* DEALER SECTIONS MOBILE SCROLL */
/* ============================= */

@media (max-width: 768px) {

    /* Who can become dealer pills */
    .content-block .dealers-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding: 0 16px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .content-block .dealers-grid::-webkit-scrollbar {
        display: none;
    }

    .content-block .dealer-pill {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: center;
    }

    /* Dealer benefits cards scroll */
    .dealer-benefits {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 14px;
        padding: 0 16px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .dealer-benefits::-webkit-scrollbar {
        display: none;
    }

    .dealer-benefits li {
        flex: 0 0 80%;
        min-width: 80%;
        scroll-snap-align: center;
    }
}
/* ============================= */
/* DEALER BENEFITS MOBILE SCROLL */
/* ============================= */

@media (max-width: 768px) {

    .dealer-benefits {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;

        gap: 14px;
        padding: 0 16px 10px;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .dealer-benefits::-webkit-scrollbar {
        display: none;
    }

    .dealer-benefits li {
        flex: 0 0 80% !important;
        min-width: 80% !important;
        scroll-snap-align: center;
    }
}

/* ===== Urgeon premium theme overrides ===== */
.header {
    background: rgba(7, 7, 7, 0.88);
}


.hero-road-lines {
    border-top-color: rgba(250, 204, 21, 0.45);
}

.cta-primary,
.playstore-btn {
    border: 1px solid rgba(250, 204, 21, 0.3);
}

.feature-card,
.service-block,
.step,
.profile-card,
.download-box,
.contact-box,
.traffic-play-zone,
.why-exists-card {
    backdrop-filter: blur(2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

.feature-card:hover,
.service-block:hover,
.step:hover,
.profile-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(250, 204, 21, 0.42);
}

.section-title,
.content-highlight,
.service-tagline,
.footer-play {
    letter-spacing: 0.01em;
}

.section-title {
    text-wrap: balance;
}

.orb-2 {
    opacity: 0.25;
    background: #ffffff;
}

.traffic-light.state-green .traffic-green {
    background: #facc15;
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.6);
}

.dealer-profile:hover {
    box-shadow: 0 12px 24px rgba(250, 204, 21, 0.16);
}

.leaderboard-item:hover {
    background: rgba(250, 204, 21, 0.08);
}

.profile-photo,
.profile-photo-placeholder {
    border-color: rgba(250, 204, 21, 0.42);
}

.feature-icon {
    background: rgba(250, 204, 21, 0.14);
}

/* ===== Unique hero motion and boost game ===== */
.hero-road {
    height: 96px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 70%);
}

.hero-road-lines {
    top: 56%;
    border-top: 3px dotted rgba(250, 204, 21, 0.5);
    animation: pulseLane 1.2s ease-in-out infinite;
}

@keyframes pulseLane {
    0%, 100% { opacity: 0.35; transform: translateY(-50%) scaleX(0.98); }
    50% { opacity: 0.9; transform: translateY(-50%) scaleX(1.02); }
}

.hero-vehicle {
    bottom: 26px;
    width: 52px;
    height: 26px;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.3));
}

.hero-car {
    left: -10%;
    animation: convoySweep 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.hero-bike {
    left: -18%;
    animation: escortSweep 5.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.7s;
}

@keyframes convoySweep {
    0% { left: -10%; transform: translateY(0) rotate(0deg); opacity: 0; }
    12% { opacity: 0.95; }
    50% { transform: translateY(-4px) rotate(-1deg); }
    88% { opacity: 0.95; }
    100% { left: 108%; transform: translateY(0) rotate(0deg); opacity: 0; }
}

@keyframes escortSweep {
    0% { left: -18%; transform: translateY(2px) scale(0.92) rotate(0deg); opacity: 0; }
    14% { opacity: 0.92; }
    54% { transform: translateY(-6px) scale(1) rotate(2deg); }
    90% { opacity: 0.92; }
    100% { left: 112%; transform: translateY(2px) scale(0.9) rotate(0deg); opacity: 0; }
}

.launch-game {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.launch-hud {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.traffic-score {
    font-size: 0.95rem;
    color: var(--accent);
    font-family: var(--font-mono);
}

.boost-meter {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}

.boost-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3f1d1d 0%, #5d4b12 45%, #3b5916 100%);
    overflow: hidden;
}

.boost-target {
    position: absolute;
    left: 44%;
    width: 20%;
    top: 0;
    bottom: 0;
    background: rgba(250, 204, 21, 0.45);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}

.boost-cursor {
    position: absolute;
    top: -3px;
    width: 8px;
    height: 20px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    transform: translateX(-50%);
}

.boost-btn {
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.4);
    background: linear-gradient(145deg, var(--accent), var(--accent-dim));
    color: #101010;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boost-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(250, 204, 21, 0.26);
}

.boost-btn:active {
    transform: translateY(0) scale(0.98);
}

.launch-road {
    position: relative;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(10, 10, 10, 0.7));
    border-radius: 12px;
    overflow: hidden;
}

.launch-road-lines {
    position: absolute;
    inset: 50% 0 auto 0;
    border-top: 3px dashed rgba(250, 204, 21, 0.28);
}

.launch-vehicle {
    position: absolute;
    width: 48px;
    height: 24px;
    color: var(--accent);
    left: 14px;
    opacity: 0.7;
}

.launch-car { top: 24px; }
.launch-bike { top: 52px; transform: scale(0.9); }

.launch-road.launch-success .launch-car {
    animation: launchCarBurst 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.launch-road.launch-success .launch-bike {
    animation: launchBikeBurst 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.launch-road.launch-fail {
    animation: roadShake 0.28s linear 2;
}

@keyframes launchCarBurst {
    0% { left: 14px; opacity: 0.9; }
    100% { left: calc(100% - 58px); opacity: 1; }
}

@keyframes launchBikeBurst {
    0% { left: 14px; opacity: 0.85; }
    100% { left: calc(100% - 56px); opacity: 1; }
}

@keyframes roadShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (min-width: 640px) {
    .traffic-play-zone {
        max-width: 760px;
    }

    .launch-road {
        flex: 1;
    }
}