/* Brand Colors Variables */
:root {
--dark-red: #923435;
--deep-orange: #a24a10;
--clay: #cb5e20;
--honey: #fdb547;
--cream: #fef9e2;
--coral: #ff6063;
}

body {
background-color: var(--cream);
color: var(--dark-red);
font-family: 'Lora', serif;
margin: 0;
line-height: 1.6;
}

header {
padding: 60px 20px;
text-align: center;
background: linear-gradient(180deg, #fef9e2 0%, #fdb54722 100%);
}

.main-logo {
display: block;
margin: 0 auto 15px auto;
max-width: 350px;
width: 85%;
height: auto;
}

.tagline {
font-family: 'Jua', sans-serif;
font-size: 1.6rem;
color: var(--clay);
margin: 0;
letter-spacing: 0.5px;
}

section {
max-width: 800px;
margin: 60px auto;
padding: 0 20px;
}

h2 {
font-family: 'Jua', sans-serif;
color: var(--deep-orange);
font-size: 2rem;
text-align: center;
}

.about-text {
font-size: 1.25rem;
text-align: center;
border-top: 2px solid var(--honey);
border-bottom: 2px solid var(--honey);
padding: 30px 0;
margin-top: 25px;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}

.card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(162, 74, 16, 0.08);
border-left: 6px solid var(--coral);
}

.card h3 {
font-family: 'Jua', sans-serif;
margin-top: 0;
color: var(--clay);
}

.gatekeeper {
background-color: var(--dark-red);
color: var(--cream);
padding: 60px 30px;
border-radius: 20px;
text-align: center;
margin-bottom: 80px;
}

.gatekeeper h2 {
color: var(--honey);
}

.btn {
display: inline-block;
background-color: #25D366;
color: white;
padding: 16px 40px;
border-radius: 50px;
text-decoration: none;
font-family: 'Jua', sans-serif;
font-size: 1.2rem;
margin-top: 25px;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
transform: scale(1.03);
background-color: #128C7E;
}

footer {
text-align: center;
padding-bottom: 50px;
color: var(--clay);
font-size: 0.9rem;
opacity: 0.8;
}

@media (max-width: 600px) {
.tagline { font-size: 1.3rem; }
.main-logo { max-width: 280px; }
}