/* Single-color icons use stroke currentColor via inline SVG sprite in index.html */
svg[aria-hidden="true"] {
  flex-shrink: 0;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --void-dark: #050a08;
    --void-green: #45bb6f;
    --void-light: #eff6f3;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.025em;
}

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

/* Tailwind custom button and card styles */
.btn-primary {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    box-shadow: 0 0 0 4px rgba(69, 187, 111, 0.15);
}

/* Scan line animation for hero mock */
@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(400%); }
}

.animate-\[scan_4s_linear_infinite\] {
    animation: scan 4s linear infinite;
}

/* Card hover lift */
.card-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgb(69 187 111 / 0.15);
}

/* Form styling for ConvertKit */
#ck-form-container form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ck-form-container input[type="email"] {
    background-color: #111;
    border: 1px solid #333;
    color: #eff6f3;
    padding: 16px 20px;
    border-radius: 9999px;
    font-size: 15px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

#ck-form-container input[type="email"]:focus {
    border-color: #45bb6f;
    box-shadow: 0 0 0 3px rgba(69, 187, 111, 0.2);
}

#ck-form-container button {
    background-color: #45bb6f;
    color: #050a08;
    padding: 16px 32px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

#ck-form-container button:hover {
    background-color: #3da45f;
    transform: scale(1.02);
}

/* Success state */
.ck-success {
    background: linear-gradient(90deg, #45bb6f, #8de2b8);
    color: #050a08;
    padding: 2rem;
    border-radius: 1.5rem;
    text-align: center;
    font-weight: 600;
}