:root {
    --primary: #0e8a63;
    --primary-dark: #0b6b4d;
    --primary-light: #35c98e;
    --ink: #17211c;
    --ink-bg: #405b4bcc;
    --ink-secondary: #3c4640;
    --ink-muted: #66736c;
    --bg: #f5f7f6;
    --surface: #ffffff;
    --border: #e5eae7;
    --warning-bg: #fdf6e3;
    --warning-border: #f0dfae;
    --warning-ink: #8a6a0f;
}

* {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--ink-bg);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
        "Helvetica Neue", Arial, sans-serif;
}

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.grad-text {
    background: linear-gradient(
        90deg,
        var(--primary-dark),
        var(--primary-light)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(60px);
    opacity: 0.35;
    z-index: 0;
    animation: float 10s ease-in-out infinite;
}
@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(20px, -20px) scale(1.08);
    }
}

.phone-mock {
    animation: hover 5s ease-in-out infinite;
}
@keyframes hover {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.qr-dot {
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 1;
    }
}

.feature-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -12px rgba(14, 138, 99, 0.25);
    border-color: var(--primary);
}

.btn-primary {
    background-color: var(--primary);
    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
}

.nav-link {
    position: relative;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.2s ease;
}
.nav-link:hover::after {
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #35c98e;
        --primary-dark: #35c98e;
        --primary-light: #6fe0b4;
        --ink: #e9eeeb;
        --ink-secondary: #c4cec8;
        --ink-muted: #93a099;
        --bg: #131916;
        --surface: #1c231f;
        --border: #2a322d;
        --warning-bg: #2a2213;
        --warning-border: #5a4a1f;
        --warning-ink: #f0dfae;
    }
}