:root {
    --bg-primary: #01040a;
    --bg-secondary: #030711;
    --bg-surface: rgba(255, 255, 255, 0.02);
    --bg-surface-hover: rgba(255, 255, 255, 0.05);
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-faint: rgba(255, 255, 255, 0.4);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(74, 222, 128, 0.4);
    --border-panel: rgba(255, 255, 255, 0.05);
    --nav-bg: rgba(1, 4, 10, 0.75);
    --nav-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(255, 255, 255, 0.02);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #ffffff;
    --progress-track: rgba(255, 255, 255, 0.1);
    --counter-num: rgba(255, 255, 255, 0.2);
    --tech-gradient: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, #01040a 70%);
    --overlay-shop: linear-gradient(to top, #01040a, transparent);
}

html.light {
    --bg-primary: #f0f4f0;
    --bg-secondary: #e6ede8;
    --bg-surface: rgba(0, 0, 0, 0.03);
    --bg-surface-hover: rgba(0, 0, 0, 0.06);
    --text-primary: #0d1f13;
    --text-muted: rgba(13, 31, 19, 0.6);
    --text-faint: rgba(13, 31, 19, 0.4);
    --border-color: rgba(16, 185, 129, 0.15);
    --border-hover: rgba(16, 185, 129, 0.5);
    --border-panel: rgba(16, 185, 129, 0.08);
    --nav-bg: rgba(240, 244, 240, 0.82);
    --nav-border: rgba(16, 185, 129, 0.2);
    --card-bg: rgba(255, 255, 255, 0.7);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(16, 185, 129, 0.2);
    --input-text: #0d1f13;
    --progress-track: rgba(13, 31, 19, 0.12);
    --counter-num: rgba(13, 31, 19, 0.3);
    --tech-gradient: radial-gradient(circle at center, rgba(16, 185, 129, 0.12) 0%, #f0f4f0 70%);
    --overlay-shop: linear-gradient(to top, #f0f4f0, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.glass-nav {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.gradient-text {
    background: linear-gradient(135deg, #4ade80, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.panel {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-panel);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.counter {
    position: fixed;
    bottom: 40px;
    left: 40px;
    font-size: 40px;
    font-weight: 300;
    z-index: 2000;
    color: var(--counter-num);
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s ease;
    pointer-events: none;
}

.counter.is-visible { opacity: 1; transform: translateX(0); }
.counter span { color: #4ade80; }

.progress-track {
    width: 2px;
    height: 60px;
    background: var(--progress-track);
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    transition: background 0.4s ease;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.scooter-hero {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    z-index: 1;
    filter: drop-shadow(0 20px 50px rgba(74, 222, 128, 0.15));
    pointer-events: none;
    border-radius: 1rem;
    transition: opacity 0.4s ease;
}

html.light .scooter-hero { opacity: 0.25; }

@media (min-width: 768px) {
    .scooter-hero {
        right: -5%;
        width: 55%;
        height: 70%;
        opacity: 1 !important;
        z-index: 0;
        border-radius: 24px;
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }
}

.img-rounded { border-radius: 1.5rem; overflow: hidden; }

.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.4s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(74, 222, 128, 0.12);
}

.service-node { position: absolute; opacity: 0; z-index: 30; }

.mask-fade {
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.tech-bg { background: var(--tech-gradient) !important; }

.themed-input {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease, background 0.4s ease, color 0.4s ease;
}

.themed-input:focus { border-color: #4ade80; }
.themed-input::placeholder { color: var(--text-faint); }

.shop-gradient-overlay {
    background: var(--overlay-shop);
    transition: background 0.4s ease;
}

#themeToggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

#themeToggle:hover {
    border-color: #4ade80;
    color: #4ade80;
    transform: rotate(20deg) scale(1.08);
}

#themeToggle .icon-dark { display: block; }
#themeToggle .icon-light { display: none; }
html.light #themeToggle .icon-dark { display: none; }
html.light #themeToggle .icon-light { display: block; }

html.light .nav-link-text { color: var(--text-primary); }
html.light .nav-brand-text { color: var(--text-primary); }

.themed-border-top {
    border-top: 1px solid var(--border-color);
    transition: border-color 0.4s ease;
}

.panel-cta {
    background: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary)) !important;
}

#main-nav {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s ease,
        border-color 0.4s ease;
}

#main-nav.nav-hidden {
    transform: translate(-50%, -120%);
    opacity: 0;
    pointer-events: none;
}

.brand-text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.4em;
    vertical-align: middle;
}

.brand-text-wrapper span {
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-text-wrapper span.slide-out { transform: translateY(-100%); opacity: 0; }
.brand-text-wrapper span.slide-in-prep { transform: translateY(100%); opacity: 0; }

.footer-bg-text {
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32vw;
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.05em;
    pointer-events: none;
    z-index: 0;
    text-transform: lowercase;
}

.dark .footer-bg-text { color: rgba(255, 255, 255, 0.03); }
.light .footer-bg-text { color: rgba(0, 0, 0, 0.03); }

.nock-footer {
    position: relative;
    padding: 120px 0 60px 0;
    overflow: hidden;
}

.dark .nock-footer { background: linear-gradient(180deg, #030711 0%, #01040a 100%); color: #ffffff; }
.light .nock-footer { background: #f0f4f0; color: #0d1f13; }

.dark .nock-footer a { color: rgba(255, 255, 255, 0.7); }
.dark .nock-footer a:hover { color: #4ade80; }
.light .nock-footer a { color: rgba(13, 31, 19, 0.6); }
.light .nock-footer a:hover { color: #10b981; }

.dark .nock-footer .footer-heading { color: #ffffff; }
.dark .nock-footer .footer-sub { color: rgba(255, 255, 255, 0.4); }
.light .nock-footer .footer-heading { color: #0d1f13; }
.light .nock-footer .footer-sub { color: rgba(13, 31, 19, 0.4); }

.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}