:root {
    --background: 14 17 22;
    --foreground: 230 230 230;
    --card: 26 29 36;
    --card-foreground: 230 230 230;
    --popover: 26 29 36;
    --popover-foreground: 230 230 230;
    --primary: 34 211 238;
    --primary-foreground: 14 17 22;
    --secondary: 42 47 58;
    --secondary-foreground: 230 230 230;
    --muted: 42 47 58;
    --muted-foreground: 156 163 175;
    --accent: 34 211 238;
    --accent-foreground: 14 17 22;
    --destructive: 127 29 29;
    --destructive-foreground: 248 250 252;
    --border: 42 47 58;
    --input: 42 47 58;
    --ring: 14 165 233;
}

@font-face {
    font-family: 'Outfit';
    src: url('/Outfit.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Outfit';
    background-color: rgb(var(--background));
    color: rgb(var(--foreground));
}

.bg-background {
    background-color: rgb(var(--background));
}

.bg-card {
    background-color: rgb(var(--card));
}

.bg-primary {
    background-color: rgb(var(--primary));
}

.bg-secondary {
    background-color: rgb(var(--secondary));
}

.bg-muted {
    background-color: rgb(var(--muted));
}

.bg-accent {
    background-color: rgb(var(--accent));
}

.text-foreground {
    color: rgb(var(--foreground));
}

.text-primary {
    color: rgb(var(--primary));
}

.text-primary-foreground {
    color: rgb(var(--primary-foreground));
}

.text-muted-foreground {
    color: rgb(var(--muted-foreground));
}

.text-secondary-foreground {
    color: rgb(var(--secondary-foreground));
}

.border-border {
    border-color: rgb(var(--border));
}

.border-primary {
    border-color: rgb(var(--primary));
}

/* Custom animations */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.gradient-text {
    background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--accent)));
}

.card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(var(--primary), 0.25);
}

.btn-primary {
    background-color: rgb(var(--primary));
    color: rgb(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: rgb(var(--primary) / 0.9);
    transform: scale(1.05);
}

.btn-outline {
    border: 1px solid rgb(var(--primary));
    color: rgb(var(--primary));
    background: transparent;
}

.btn-outline:hover {
    background-color: rgb(var(--primary));
    color: rgb(var(--primary-foreground));
}

.btn-ghost {
    color: rgb(var(--muted-foreground));
    background: transparent;
}

.btn-ghost:hover {
    color: rgb(var(--primary));
}

html {
    scroll-behavior: smooth;
}

/* Mobile-specific styles */
@media (max-width: 640px) {

    /* Mobile hero adjustments */
    .hero-content h1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }

    .hero-content p:first-of-type {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-content p:nth-of-type(2) {
        font-size: 0.875rem !important;
        margin-bottom: 2rem !important;
        padding: 0 0.5rem;
    }

    /* Mobile button adjustments */
    .hero-content .flex {
        gap: 0.75rem !important;
    }

    .hero-content a {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Mobile feature cards */
    .hero-content .grid {
        gap: 1rem !important;
        margin-top: 2rem !important;
    }

    .hero-content .grid>div {
        padding: 1rem !important;
    }

    .hero-content .grid h3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }

    .hero-content .grid p {
        font-size: 0.75rem !important;
    }

    /* Mobile section spacing */
    section {
        padding: 3rem 1rem !important;
    }

    /* Mobile section headings */
    section h2 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }

    section>div>div:first-child p {
        font-size: 1rem !important;
        padding: 0 0.5rem;
    }

    /* Mobile feature cards in sections */
    .feature-card {
        padding: 1.5rem !important;
    }

    .feature-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .feature-card p {
        font-size: 0.875rem !important;
    }

    /* Mobile steps */
    .step-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .step-card p {
        font-size: 0.75rem !important;
    }

    /* Mobile video section */
    #video-demo .grid {
        gap: 1rem !important;
        margin-top: 2rem !important;
    }

    #video-demo .grid>div {
        padding: 1rem !important;
    }

    /* Mobile footer */
    footer .grid {
        gap: 2rem !important;
    }

    footer .grid>div:first-child {
        grid-column: span 1 !important;
    }

    /* Mobile pro tip section */
    .max-w-4xl.mx-auto.p-8 {
        padding: 1.5rem !important;
        margin: 0 1rem !important;
    }

    .max-w-4xl.mx-auto.p-8 h3 {
        font-size: 1.125rem !important;
    }

    .max-w-4xl.mx-auto.p-8 p {
        font-size: 0.875rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Mobile why choose section */
    #why-choose .space-y-8>div {
        margin-bottom: 1.5rem !important;
    }

    #why-choose h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    #why-choose p {
        font-size: 0.875rem !important;
    }

    /* Hide desktop connecting lines on mobile */
    .step-card .absolute.hidden.lg\\:block {
        display: none !important;
    }

    /* Mobile background elements - reduce size */
    .absolute.inset-0.opacity-10>div {
        width: 4rem !important;
        height: 4rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3.5rem !important;
    }

    section {
        padding: 4rem 2rem !important;
    }

    .feature-card {
        padding: 2rem !important;
    }
}

.text-trustpilot {
    color: #00b67a;
}