:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --muted:rgba(255,255,255,0.6);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  background:#000;
  color:var(--fg);
  font-family:'Space Mono','Inter',Segoe UI,Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;flex-direction:column;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

.grain{
  position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:4px 4px;
  mix-blend-mode:overlay;opacity:0.4;z-index:1;
}

.animated-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%),
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.03) 50%,transparent 100%);
  background-size:100% 100%;
  animation:shimmer 12s ease-in-out infinite;
}

@keyframes shimmer{
  0%{opacity:0.5}
  50%{opacity:1}
  100%{opacity:0.5}
}

.navbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 48px;position:relative;z-index:10;
}

.logo-text{
  font-size:18px;font-weight:700;letter-spacing:0.08em;
}

.sign-in{
  background:#fff;color:#000;padding:10px 20px;
  border-radius:999px;text-decoration:none;font-weight:700;
  font-size:12px;letter-spacing:0.06em;transition:all 0.3s ease;
  cursor:pointer;
}

.sign-in:hover{
  background:#f0f0f0;transform:scale(1.05);
}

.container{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:40px 24px;position:relative;z-index:5;
}

.badge{
  display:inline-block;padding:8px 16px;border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;font-size:11px;letter-spacing:0.08em;
  color:rgba(255,255,255,0.7);margin-bottom:32px;
  animation:fadeInDown 0.8s ease;
}

.title{
  font-size:clamp(48px,12vw,140px);font-weight:900;
  margin:0 0 24px;font-style:italic;letter-spacing:-0.02em;
  line-height:1;animation:fadeInUp 0.8s ease 0.1s both;
}

.subtitle{
  font-size:clamp(14px,2vw,16px);color:var(--muted);
  max-width:520px;margin:0 0 40px;line-height:1.6;
  font-style:italic;animation:fadeInUp 0.8s ease 0.2s both;
}

.actions{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  animation:fadeInUp 0.8s ease 0.3s both;
}

.btn{
  padding:12px 28px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:12px;letter-spacing:0.08em;
  border:1px solid transparent;transition:all 0.3s ease;
  cursor:pointer;display:inline-block;
}

.btn-primary{
  background:#fff;color:#000;
}

.btn-primary:hover{
  transform:scale(1.08);box-shadow:0 12px 30px rgba(255,255,255,0.15);
}

.btn-secondary{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4);
}

.btn-secondary:hover{
  border-color:#fff;background:rgba(255,255,255,0.05);
  transform:scale(1.08);
}

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

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

@media (max-width:640px){
  .navbar{padding:16px 24px}
  .container{padding:24px 16px}
  .title{font-size:clamp(36px,10vw,80px)}
  .actions{gap:12px}
}