body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;
background-image: url("../images/hero.png");
background-repeat: repeat;
background-size: 420px;

color: #2f6fff;

text-align: center;
margin: 0;

}

p {
margin: 0;
}

/* MAIN CONTENT CARD */

#siteContent {

position: relative;

display: flex;
flex-direction: column;
align-items: center;

background: rgba(255,255,255,0.55);

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

padding: 28px 16px;
max-width: 340px;
margin: 40px auto;

overflow: visible;

}

#siteContent::after {

content: "";

position: absolute;
inset: 0;

pointer-events: none;

background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0.35) 100%
);

}

/* TITLE */

h1 {

font-size: 48px;
font-weight: 900;

letter-spacing: 2px;

background: linear-gradient(
180deg,
#7fb2ff 0%,
#2f6fff 60%,
#1b3d9e 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

margin-bottom: 20px;

}

/* TAGLINE */

.tagline {

font-size: 20px;
opacity: 0.8;

}

/* DESCRIPTION */

.description {

max-width: 420px;
margin: 4px auto;
line-height: 1.25;

}

/* NEWSLETTER */

.newsletter {

max-width:380px;

display:flex;
flex-direction:column;
align-items:center;

gap:18px;

margin:20px auto 0 auto;

}

/* EMAIL INPUT */

.newsletter input[type="email"] {

width:100%;

padding:14px 18px;

box-sizing:border-box;

border-radius:16px;
border:1px solid rgba(0,0,0,0.15);

background:rgba(255,255,255,0.9);

font-size:16px;

text-align:center;

}

/* SITE BUTTONS ONLY */

.lang-switch button,
.age-box button {

background: linear-gradient(
180deg,
#5ea2ff,
#2f6fff
);

color: white;

border: none;

padding: 14px 26px;

border-radius: 30px;

font-weight: 700;
font-size: 16px;

cursor: pointer;

box-shadow:
0 6px 18px rgba(47,111,255,0.35);

}

.lang-switch button:hover,
.age-box button:hover {

transform: translateY(-1px);

}

/* FOOTER */

footer {

margin-top: 40px;
font-size: 14px;
opacity: 0.6;

}

/* LANGUAGE SWITCH */

.lang {
display:none;
}

.lang-switch {
margin-bottom:20px;
}

/* AGE GATE */

#ageGate {

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

background: rgba(255,255,255,0.95);

display:flex;
align-items:center;
justify-content:center;

z-index:999;

}

.age-box {

background: rgba(255,255,255,0.85);

backdrop-filter: blur(12px);

padding:28px;

border-radius:20px;

max-width:420px;

box-shadow:
0 10px 40px rgba(0,0,0,0.15);

}