html {
    scroll-behavior: smooth;
}

:root {
    --color-bg-dark: #19203A;
    --color-blue: #5A81FF;
    --color-accent: #73D2FF;
    --color-primary: #32D5AD;
    --color-text: #E2E8F0;
}

/* Use cases scrollbar */
.use-cases-scroll::-webkit-scrollbar {
    height: 6px;
}
.use-cases-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.use-cases-scroll::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}
.use-cases-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) rgba(255, 255, 255, 0.05);
}

/* Video mockup glow */
.video-mockup-glow {
    box-shadow: 0 0 40px rgba(90, 129, 255, 0.15), 0 0 80px rgba(115, 210, 255, 0.08);
    animation: video-glow 3s ease-in-out infinite alternate;
}
@keyframes video-glow {
    from { box-shadow: 0 0 40px rgba(90, 129, 255, 0.15), 0 0 80px rgba(115, 210, 255, 0.08); }
    to { box-shadow: 0 0 60px rgba(90, 129, 255, 0.25), 0 0 100px rgba(115, 210, 255, 0.15); }
}

/* Contact form inputs */
.form-input {
    width: 100%;
    background: rgba(30, 38, 66, 0.8);
    border: 1px solid rgba(90, 129, 255, 0.15);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}
.form-input:hover {
    border-color: rgba(90, 129, 255, 0.3);
    background: rgba(35, 44, 75, 0.9);
}
.form-input:focus {
    outline: none;
    background: rgba(35, 44, 75, 1);
    border-color: rgba(50, 213, 173, 0.5);
    box-shadow: 0 0 0 3px rgba(50, 213, 173, 0.08), 0 0 20px rgba(50, 213, 173, 0.05);
}
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
select.form-input:hover,
select.form-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(50,213,173,0.6)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
textarea.form-input {
    resize: vertical;
    min-height: 100px;
}

/* Country dropdown */
.country-dropdown {
    background: rgba(30, 38, 66, 0.95);
    border: 1px solid rgba(90, 129, 255, 0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.country-dropdown::-webkit-scrollbar {
    width: 6px;
}
.country-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.country-dropdown::-webkit-scrollbar-thumb {
    background: rgba(90, 129, 255, 0.3);
    border-radius: 3px;
}

/* Mobile menu utilities (JS-toggled, not in Tailwind output) */
.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-45 {
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
    --tw-translate-y: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.opacity-0 {
    opacity: 0;
}

/* Honeypot field */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}