/* ---------- Variables, reset & font stacks ---------- */
:root {
    --brand: #10b981;
    /* emerald-500 */
    --brand-dark: #059669;
    --text: #ffffff;
    --bg: #0d0d0d;
    font-family: 'Inter', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0
}

/* ---------- Layout ---------- */
body {
    min-height: 100vh;
    /* always at least full viewport */
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Full-viewport hero */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    min-height: 100vh;
    /* 100% of any screen */
    overflow: hidden;
}

.hero::before {
    /* background image */
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/bg.webp') center/cover no-repeat;
    /* ‘cover’ stretches to fill; remove `fixed` to avoid mobile jank */
    z-index: -2;
}

.hero::after {
    /* dark overlay */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: -1;
}

/* Typography -------------------------------------------------------- */
.hero h1 {
    font-family: "DIN Condensed", "Bebas Neue", sans-serif;
    /* custom heading font */
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: .5px;
}

/* ---------- Logo ---------- */
.logo img {
    width: clamp(160px, 25vw, 260px);
    /* responsive: min 160px, max 260px */
    height: auto;
    display: block;
    /* removes the tiny extra baseline gap */
    margin: 0 auto;
    /* keeps it centred */
    user-select: none;
}

.tagline {
    margin-top: 1rem;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    max-width: 32ch;
}

/* Call-to-action button */
.cta {
    margin-top: 2rem;
    padding: .9rem 2.5rem;
    border: 2px solid var(--brand);
    color: var(--brand);
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    transition: .25s;
}

.cta:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, .35);
}

/* Contact card ------------------------------------------------------ */
.contact {
    width: 90%;
    max-width: 960px;
    /* wider on desktop */
    margin: 4rem auto 2rem;
    padding: 2rem 2.5rem;
    background: #ffffff;
    color: #111;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    display: grid;
    /* two-column on ≥ 640 px */
    gap: 1.5rem;
}

@media(min-width:640px) {
    .contact {
        grid-template-columns: 1fr 1fr;
    }

    .contact h2 {
        grid-column: 1 / -1;
    }

    /* span both columns */
}

.contact h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.contact input,
.contact textarea {
    padding: .9rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    font-size: 1rem;
}

.contact button {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: .9rem;
    border-radius: .5rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.contact button:hover {
    background: var(--brand-dark);
}

/* --- final tidy-up: unify textarea font --- */
.contact textarea {
    width: 100%;
    /* keeps the left edge aligned */
    font-family: inherit;
    /* inherit the body font instead of monospace */
    font-size: 1rem;
    /* match inputs */
}

.alt {
    align-self: center;
    /* centres the alt text in its column */
    font-size: .9rem;
    text-align: center;
}