/* Reset & Base */

{ margin:0; padding:0; box-sizing:border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
padding: 2rem;
}

.container {
text-align: center;
padding: 2rem;
max-width: 900px;
width: 100%;
animation: fadeIn 1s ease-out;
}

h1 { font-size:3rem; margin-bottom:1rem; font-weight:700; }
.subtitle { font-size:1.2rem; margin-bottom:2rem; opacity:0.9; font-weight:300; }

.coming-soon {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 2rem;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.2);
margin-bottom: 2rem;
}

.email-form { display:flex; gap:1rem; max-width:400px; margin:0 auto 2rem auto; }
.email-input {
flex:1; padding:1rem 1.5rem; border:none; border-radius:50px;
background:rgba(255,255,255,0.9); color:#333; font-size:1rem;
}
.email-input:focus { outline:none; background:white; transform:scale(1.02); }

.submit-btn {
padding:1rem 2rem; border:none; border-radius:50px;
background:white; color:#667eea; font-weight:600; cursor:pointer;
}
.submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,0.2); }

.nav-link {
display:inline-block; margin:0.5rem; padding:0.5rem 1rem;
background:rgba(255,255,255,0.1); color:white; border-radius:20px;
text-decoration:none; border:1px solid rgba(255,255,255,0.2);
}
.nav-link:hover { background:rgba(255,255,255,0.2); }

.back-btn {
display: block; /* Take full line /
margin: 2rem auto 0 auto; / Push it down a bit, center horizontally /
padding: 0.75rem 1.5rem;
border: none;
border-radius: 30px;
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-align: center; / Makes sure text is centered inside /
width: fit-content; / Shrink to button size instead of stretching */
}

.back-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}

.social-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-links a {
  color: white;              /* Default text/icon color */
  text-decoration: none;     /* Removes underlines */
  transition: transform 0.3s ease, color 0.3s ease;  /* Smooth hover animation */
}

.social-links a:hover {
  color: #ffcc00;   /* Choose a bright contrast color on hover (change as needed) */
  transform: scale(1.2);  /* Slight zoom-in for a fun effect */
}

/* Terms scroll box /
.terms-box {
background: white;
color: #333;
border-radius: 10px;
padding: 2rem;
max-height: 120vh; / enlarge content box /
overflow-y: auto; / keep it scrollable /
text-align: left;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
line-height: 1.6;
font-size: 0.95rem;
margin-bottom: 2rem; / space below, so back button never overlaps */
}

.terms-box h2 {
margin-bottom: 1rem;
font-size: 1.25rem;
color: #667eea;
}

.terms-box h3 {
margin-top: 1rem;
font-size: 1.1rem;
color: #764ba2;
}

.terms-box p,
.terms-box ul {
margin-bottom: 1rem;
}

/* Particles */
.particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; }
.particle {
position:absolute; border-radius:50%; background:rgba(255,255,255,0.1);
animation: float 20s infinite;
}

@keyframes float {
0%,100%{transform:translate(0,0);}
33%{transform:translate(100px,-100px);}
66%{transform:translate(-100px,100px);}
}

@keyframes fadeIn {
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}