body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #121212; /* lifted from pure black */
color: #f5f5f5; /* softer white */
line-height: 1.7;
}

/* HERO */
.hero {
padding: 80px 20px;
text-align: center;
background: radial-gradient(circle at top, #222, #0a0a0a);
}

.hero h1 {
font-size: 2.4rem;
margin-bottom: 12px;
}

.hero p {
max-width: 720px;
margin: 0 auto;
opacity: 1; /* important for mobile */
}

/* CTA */
.cta {
display: inline-block;
margin-top: 24px;
padding: 14px 26px;
background: #00ffe1;
color: #000;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
}

/* SECTIONS */
.section {
padding: 50px 20px;
max-width: 900px;
margin: auto;
background: #181818; /* readable contrast */
border-radius: 12px;
margin-bottom: 30px;
}

/* DARK ACCENT SECTION */
.section.dark {
background: #0f0f0f;
}

/* FOOTER */
footer {
text-align: center;
padding: 30px 20px;
font-size: 0.9rem;
color: #aaa;
}

/* MOBILE READABILITY */
@media (max-width: 768px) {
body {
font-size: 17px;
}

h1 {
font-size: 1.8rem;
}

h2 {
font-size: 1.3rem;
}
}
/* LOGO */
.site-logo {
display: block;
max-width: 120px;
margin: 20px auto 12px;
opacity: 0.95;
}

/* MOBILE TUNING */
@media (max-width: 768px) {
body {
font-size: 17px;
}

h1 {
font-size: 1.8rem;
}

h2 {
font-size: 1.3rem;
}

.site-logo {
max-width: 100px;
margin-bottom: 16px;
}
}
.footer-logo {
max-width: 90px;
margin: 0 auto 12px;
display: block;
opacity: 0.6;
}

@media (max-width: 768px) {
.footer-logo {
max-width: 70px;
}
}