html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top, rgba(213,255,47,0.08), transparent 32%),
        linear-gradient(180deg, #090a0c 0%, #0d0f14 100%);
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tech-grid {
    background-image:
        linear-gradient(rgba(213,255,47,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(213,255,47,0.08) 1px, transparent 1px);
    background-size: 120px 120px;
    animation: gridFade 14s linear infinite;
    mask-image: radial-gradient(circle at center, black 38%, transparent 85%);
}

.flagship-card {
    box-shadow:
        0 25px 80px rgba(0,0,0,0.45),
        0 0 0 1px rgba(213,255,47,0.06),
        0 0 35px rgba(213,255,47,0.08);
}

.product-card {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(213,255,47,0.30);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(213,255,47,0.10);
    background: rgba(20, 22, 29, 0.96);
}

@media (max-width: 767px) {
    .tech-grid {
        background-size: 78px 78px;
    }
}

.platform-option:has(input:checked) {
    border-color: rgba(213,255,47,0.75);
    background: rgba(213,255,47,0.10);
    box-shadow: 0 0 0 1px rgba(213,255,47,0.20), 0 18px 45px rgba(0,0,0,0.30);
}

input::placeholder,
textarea::placeholder {
    color: rgba(148, 163, 184, 0.72);
}

select option {
    color: #111827;
}


.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #d5ff2f 0%, #b8e61a 100%);
    color: #050505;
    font-weight: 900;
    box-shadow: 0 0 0 1px rgba(213,255,47,0.22), 0 12px 30px rgba(184,230,26,0.18), 0 0 24px rgba(213,255,47,0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 0 0 1px rgba(213,255,47,0.30), 0 16px 34px rgba(184,230,26,0.22), 0 0 30px rgba(213,255,47,0.16);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.input-glow:focus,
.select-glow:focus,
.textarea-glow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(213,255,47,0.14);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border-radius: 1rem;
    border: 1px solid rgba(213,255,47,0.30);
    background: rgba(255,255,255,0.05);
    color: #f8fafc;
    font-weight: 800;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(213,255,47,0.75);
    color: #d5ff2f;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22), 0 0 0 1px rgba(213,255,47,0.10);
}

.input-glow,
.select-glow,
.textarea-glow {
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.input-glow:focus,
.select-glow:focus,
.textarea-glow:focus {
    border-color: rgba(213,255,47,0.75) !important;
    background-color: rgba(0,0,0,0.48);
}

.info-card {
    border: 1px solid rgba(213,255,47,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
    box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}