@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root{
  --bg:#0f0f10;
  --card: rgba(255,255,255,0.04);
  --muted: #9ca3af;
  --glass-border: rgba(255,255,255,0.06);
  --green: #22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

#background-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.top-nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(10,10,12,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.nav-left{display:flex; align-items:center; gap:12px}
.logo{width:36px;height:36px;object-fit:contain}
.brand{font-weight:700; letter-spacing:0.6px; font-size:18px}
.nav-right a{color:rgba(230,238,248,0.9); margin-left:18px; text-decoration:none; font-weight:600; font-size:14px; opacity:0.95}
.nav-right a:hover{opacity:1; transform:translateY(-1px)}

.hero-section{
  position:relative;
  height:86vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:64px; 
  z-index:10;
  background: linear-gradient(180deg, rgba(10,10,12,0.6), rgba(16,16,18,0.9));
  overflow:hidden;
}
.hero-content{position:relative; z-index:2; text-align:center; max-width:900px; padding:0 20px}
.hero-title{font-size:48px; line-height:1.02; margin:0 0 12px; font-weight:800}
.hero-sub{color:var(--muted); font-size:18px; margin:0}

.hero-decor{
  position:absolute; width:1400px; height:700px; border-radius:40%;
  background: radial-gradient(closest-side, rgba(59,130,246,0.08), rgba(99,102,241,0.00));
  filter: blur(40px); opacity:0.7; z-index:1; transform:translateY(-30px);
}

.section{padding:64px 0}
.small-pad{padding-top:40px; padding-bottom:40px}
.bg-section{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}

.glass-card{
  display:flex; align-items:center; gap:20px;
  padding:24px; border-radius:16px;
  background: var(--card);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 30px rgba(2,6,23,0.6);
}
.tf2-logo{width:88px;height:88px; object-fit:contain}
.card-body h3{margin:0 0 6px; font-size:20px}
.muted{color:var(--muted); margin:0}

.status-green{color:var(--green); font-weight:700; font-size:18px}

.faq-list{margin-top:18px}
.faq-item{padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.02)}
.faq-item h4{margin:0 0 6px; font-size:16px}

.footer{padding:20px 0; text-align:center; color:rgba(210,220,230,0.6); font-size:13px}

@media (max-width:768px){
  .nav-right{display:none}
  .glass-card{flex-direction:row; gap:14px}
  .hero-title{font-size:34px}
}

.hero-title, .hero-sub, .glass-card, .faq-item, .section h2 { transform:translateY(8px); opacity:0; animation:enter 0.8s ease forwards }
.hero-title{animation-delay:0.12s}
.hero-sub{animation-delay:0.22s}
.glass-card{animation-delay:0.2s}
.section h2{animation-delay:0.08s}
@keyframes enter{ to{ transform:none; opacity:1 } }

.global-success {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--green); /* #22c55e */
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
  animation: slideInGlobal 0.5s ease-out, fadeOutGlobal 0.5s ease-out 3s forwards;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  max-width: 90vw;
  text-align: center;
}

@keyframes slideInGlobal {
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOutGlobal {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

@media (max-width: 768px) {
  .global-success {
    font-size: 13px;
    padding: 10px 20px;
    left: 10px;
    right: 10px;
    transform: translateX(0) translateY(-10px);
    max-width: none;
  }

  @keyframes slideInGlobal {
    to {
      transform: translateX(0) translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeOutGlobal {
    to {
      opacity: 0;
      transform: translateX(0) translateY(-10px);
    }
  }
}