/* ── Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
::selection { background: #a7f3d0; color: #064e3b; }

/* ── Hero ─────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(145deg, #064e3b 0%, #047857 30%, #059669 55%, #34d399 80%, #6ee7b7 100%);
}
.hero-scrim {
    background: linear-gradient(to bottom, rgba(6,78,59,0.55) 0%, rgba(6,78,59,0.35) 50%, rgba(6,78,59,0.65) 100%);
}
.hero-pattern {
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 24px 24px;
}
.hero-img {
    opacity: 0;
    animation: heroImgIn 1.4s ease forwards;
}
.hero-eyebrow {
    opacity: 0;
    animation: fadeUp 0.9s 0.3s ease forwards;
}
.hero-headline {
    opacity: 0;
    animation: fadeUp 1s 0.5s ease forwards;
}
.hero-subtext {
    opacity: 0;
    animation: fadeUp 1s 0.7s ease forwards;
}
.hero-ctas {
    opacity: 0;
    animation: fadeUp 1s 0.9s ease forwards;
}
@keyframes heroImgIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Buttons ──────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 32px; border-radius: 9999px;
    background: #10b981; color: #fff;
    font-weight: 600; font-size: 0.95rem;
    text-decoration: none; border: none; cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(16,185,129,0.35);
}
.btn-primary:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(16,185,129,0.4); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 32px; border-radius: 9999px;
    background: rgba(255,255,255,0.12); color: #fff;
    font-weight: 600; font-size: 0.95rem;
    text-decoration: none; border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }

/* ── Section Eyebrow ──────────────────────────────── */
.section-eyebrow { letter-spacing: 0.2em; }

/* ── Inputs ───────────────────────────────────────── */
.input-field {
    background: #fefdf8; border: 1.5px solid #d1fae5;
    border-radius: 12px; padding: 13px 16px;
    font-family: inherit, Inter, system-ui, sans-serif;
    font-size: 0.95rem; color: #064e3b;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none; width: 100%;
}
.input-field::placeholder { color: #9ca3af; }
.input-field:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
select.input-field { 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='%23047857' 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 12px center; background-size: 18px; padding-right: 40px; }

/* ── Scroll Reveal ────────────────────────────────── */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
}
@media (prefers-reduced-motion: no-preference) {
    .reveal[data-reveal] { opacity: 0; transform: translateY(32px); }
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── Scroll Indicator ─────────────────────────────── */
.scroll-indicator { animation: scrollBounce 2s infinite; }
@keyframes scrollBounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50%       { transform: translate(-50%, 8px); opacity: 1; }
}

/* ── Mobile Menu ──────────────────────────────────── */
.mobile-link { text-decoration: none; }

/* ── Utility ──────────────────────────────────────── */
@media (max-width: 639px) {
    .hero-headline { font-size: 2.75rem; }
    .hero-subtext  { font-size: 1.05rem; }
}