/* assets/css/landing.css — стилі лендінга index.php (поверх Tailwind CDN). */

* { box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; background: #0F172A; color: #E2E8F0; overflow-x: hidden; }
h1, h2, h3, h4, .font-display { font-family: 'Syne', sans-serif; }

/* Grid background */
.grid-bg {
    background-image:
        linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* Glow effects */
.glow-blue {
    box-shadow: 0 0 80px rgba(59,130,246,0.25), 0 0 160px rgba(59,130,246,0.1);
}
.glow-card {
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(59,130,246,0.15), 0 20px 60px rgba(0,0,0,0.4);
}
.glow-card-featured {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(59,130,246,0.5), 0 20px 80px rgba(59,130,246,0.2), 0 40px 120px rgba(0,0,0,0.5);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #60A5FA 0%, #93C5FD 40%, #BFDBFE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-white {
    background: linear-gradient(135deg, #ffffff 0%, #93C5FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated border */
.animated-border {
    position: relative;
    background: linear-gradient(135deg, #1E293B, #0F172A);
    border: 1px solid transparent;
    background-clip: padding-box;
}
.animated-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(59,130,246,0.05), rgba(59,130,246,0.2));
    z-index: -1;
}

/* Nav blur */
.nav-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(15,23,42,0.85);
    border-bottom: 1px solid rgba(59,130,246,0.1);
}

/* Noise overlay for texture */
.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    border-radius: inherit;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Feature card hover */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.3), 0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(59,130,246,0.1);
}

/* Pricing card hover */
.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-6px);
}

/* Button styles */
.btn-primary {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    box-shadow: 0 4px 24px rgba(59,130,246,0.35), 0 0 0 1px rgba(59,130,246,0.3);
    transition: all 0.2s ease;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #60A5FA, #2563EB);
    box-shadow: 0 6px 32px rgba(59,130,246,0.5), 0 0 0 1px rgba(96,165,250,0.4);
    transform: translateY(-1px);
}
.btn-ghost {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    transition: all 0.2s ease;
}
.btn-ghost:hover {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
}

/* Divider with glow */
.divider-glow {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.3), transparent);
}

/* Tag/badge */
.badge-blue {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.25);
    color: #93C5FD;
}
.badge-featured {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(29,78,216,0.15));
    border: 1px solid rgba(59,130,246,0.4);
    color: #60A5FA;
}

/* Stat counter */
.stat-value {
    font-family: 'Syne', sans-serif;
    background: linear-gradient(135deg, #60A5FA, #BFDBFE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero orb */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

/* Scroll behavior */
html { scroll-behavior: smooth; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid rgba(59,130,246,0.1); }
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.2s ease; }

/* Mockup terminal */
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Platform logos */
.platform-badge {
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(59,130,246,0.15);
    transition: all 0.2s ease;
}
.platform-badge:hover {
    border-color: rgba(59,130,246,0.35);
    background: rgba(59,130,246,0.08);
}

/* Step connector */
.step-line {
    background: linear-gradient(180deg, rgba(59,130,246,0.4), rgba(59,130,246,0.05));
}

/* Auth modal — input autofill стиль і placeholder колір */
#auth-modal { flex-direction: column; }
::placeholder { color: #334155 !important; }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #131e30 inset !important;
    -webkit-text-fill-color: white !important;
}