/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0b1220; }
a { color: inherit; text-decoration: none; }

/* HERO */
.hero { position: relative; height: 100vh; overflow: hidden; }
#tsparticles { position: absolute; inset: 0; }
.hero-content {
  position: relative; z-index: 2; text-align: center; top: 45%;
  transform: translateY(-50%);
  padding: 0 16px;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: 1px; margin: 0 0 8px; color: white; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero p { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.9); }
.scroll-cta { display: inline-block; margin-top: 18px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; backdrop-filter: blur(6px); color: white; }
.scroll-cta:hover { background: rgba(255,255,255,.12); }

.scroll-indicator {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 24px; color: white; opacity: .8; animation: float 1.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes float { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,-10px);} }

/* LOGIN SECTION */
.login-section {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 16px;
  background: linear-gradient(180deg, #EDF2F7 0%, #F9FAFB 100%);
}
.card {
  width: min(420px, 92vw); background: #fff; border-radius: 20px; padding: 28px;
  box-shadow: 0 20px 60px rgba(17,24,39,.12), 0 8px 16px rgba(17,24,39,.06);
}
.card h2 { margin: 0 0 12px; }
.card form { display: grid; gap: 12px; }
.card input {
  padding: 12px 14px; border-radius: 12px; border: 1px solid #d9dde5; outline: none;
}
.card input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.card button {
  padding: 12px 14px; border-radius: 12px; border: 0; background: #0f766e; color: white; cursor: pointer; font-weight: 600;
}
.card button:hover { filter: brightness(1.05); }
.muted { color: #6b7280; font-size: .9rem; margin-top: 6px; }

.footer { margin-top: 24px; text-align: center; }
.back-to-top { color: #0f766e; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }