/* Landing page (index.html), on Bootstrap 5 like the app; colours and brand from css/style.css. */
:root {
    --brand-green: #3d6b35;
    --brand-green-dark: #2f552a;
    --brand-orange: #d95a2b;
    --brand-bg: #e8e4dc;
    --nav-height: 64px;
}

html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #222; }
section[id], aside[id] { scroll-margin-top: var(--nav-height); }

.material-symbols-outlined { vertical-align: middle; user-select: none; }

/* Navbar: the app's top bar */
.navbar-branding { background-color: var(--brand-bg); min-height: var(--nav-height); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.navbar-branding .navbar-brand { display: flex; align-items: center; gap: 0.5rem; }
.brand-logo { height: 30px; width: auto; }
.brand-text { font-family: 'Arvo', serif; font-size: 1.15rem; line-height: 1; letter-spacing: 0.2px; }
.brand-route, .brand-maker { color: var(--brand-green); font-weight: 700; }
.brand-maker { font-weight: 600; }
.brand-card { color: var(--brand-orange); font-weight: 700; }
.navbar-branding .nav-link { color: var(--brand-green); font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }
.navbar-branding .nav-link:hover, .navbar-branding .nav-link:focus-visible, .navbar-branding .nav-link.active { color: var(--brand-orange); }
.navbar-branding .navbar-toggler { border-color: var(--brand-green); color: var(--brand-green); padding: 0.25rem 0.5rem; }
.navbar-branding .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(61, 107, 53, 0.35); }

/* Buttons */
.btn-brand { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.btn-brand:hover, .btn-brand:focus-visible, .btn-brand:active { background: var(--brand-green-dark); border-color: var(--brand-green-dark); color: #fff; }
.btn-xl { padding: 0.9rem 2rem; border-radius: 300px; font-weight: 700; text-transform: uppercase; }

/* Hero */
.hero {
    min-height: 100vh;
    padding: calc(var(--nav-height) + 2rem) 1rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    background: url(../img/header.jpg) center / cover no-repeat;
}
.hero-intro { max-width: 1000px; margin: 0 auto 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.hero-intro h1 { text-transform: uppercase; font-weight: 700; font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 6px; }
.hero-intro h2 { font-size: clamp(1.1rem, 3.5vw, 1.4rem); font-weight: 300; color: rgba(255, 255, 255, 0.9); margin: 0; }
.hero-oval {
    background: radial-gradient(120% 120% at 50% 35%, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));
    padding: 28px 40px;
    border-radius: 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 1000px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.hero-oval p { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; line-height: 1.6; margin-bottom: 18px; }
.hero-oval p.subtle { color: rgba(255, 255, 255, 0.75); margin-bottom: 0; }
.hero-cta { margin-top: 22px; }
.hero-cta-btn { animation: brand-pulse 1.8s ease-in-out infinite; }
@keyframes brand-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 90, 43, 0.55); }
    50% { box-shadow: 0 0 0 22px rgba(217, 90, 43, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-cta-btn { animation: none; } html { scroll-behavior: auto; } }
/* Phones: the hero text is long, so the app button goes above it instead of below. */
@media (max-width: 767.98px) {
    .hero-cta { order: 1; margin: 0 0 22px; }
    .hero-oval { order: 2; padding: 22px 20px; }
}

/* Sections */
.page-section { padding: 90px 0; }
.section-heading { font-weight: 700; margin-top: 0; }
hr.brand { border: 0; border-top: 3px solid var(--brand-green); opacity: 1; max-width: 50px; margin: 1.25rem auto 2rem; }
.feature { max-width: 400px; margin: 1.5rem auto 0; }
.feature-icon { font-size: 56px; color: var(--brand-green); }
.feature h3 { font-size: 1.15rem; font-weight: 700; margin-top: 0.75rem; }
.bg-ink { background: #222; color: #fff; }
.bg-brand { background: var(--brand-green); color: #fff; }
.text-faded { color: rgba(255, 255, 255, 0.78); }
.cta-band { padding: 60px 0; }
.cta-band .btn { margin: 0.35rem; }

footer.site-footer { background: #222; padding: 20px 0; text-align: center; color: #999; }
footer.site-footer a { color: #bbb; }
footer.site-footer small { color: #777; }