:root{
  --bg:#0d0e10;
  --bg-elev:#14161a;
  --text:#d6d9dd;
  --muted:#9aa3ad;
  --accent:#7f8a95;
  --accent-2:#aeb6bf;
  --silver-dark:#8b9299;
  --silver-light:#cfd5dc;
  --ring:rgba(192,200,208,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(1200px 800px at 20% 0%, #111318, #0b0c0f 60%) fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1120px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(10,12,14,.9), rgba(10,12,14,.6));backdrop-filter:blur(10px);border-bottom:1px solid #16181c}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:28px;width:auto;filter:drop-shadow(0 2px 1px rgba(0,0,0,.5))}
.brand-name{font-weight:800;letter-spacing:.2px;background:linear-gradient(180deg,var(--silver-light),var(--silver-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-name{
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 2px 1px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.6);
}

.nav a{color:var(--muted);text-decoration:none;margin:0 10px}
.nav a:hover{color:var(--text)}

/* Mobile Navigation Styles */
.mobile-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  background: var(--bg-elev);
  border-top: 1px solid #1e2329;
  opacity: 0;
  visibility: hidden;
}

.mobile-drawer.open {
  max-height: 400px;
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  transform: translateY(-10px);
  transition: transform 0.3s ease-in-out;
}

.mobile-drawer.open .mobile-nav {
  transform: translateY(0);
}

.mobile-nav-link {
  color: var(--muted);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid #1e2329;
  transition: all 0.2s ease;
}

.mobile-nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

.mobile-nav-link:last-of-type {
  border-bottom: none;
}

.mobile-auth {
  padding: 1rem 1.5rem;
  border-top: 1px solid #1e2329;
  margin-top: 0.5rem;
}

.mobile-auth .btn {
  margin-bottom: 0.5rem;
}

.mobile-auth .btn:last-child {
  margin-bottom: 0;
}

/* Mobile menu button styling */
#mobile-menu-btn {
  display: none;
}

@media (max-width: 767px) {
  #mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

.btn{appearance:none;border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:all .15s ease;background:#1a1d22;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.7)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,#2a2f37,#1d2128);border:1px solid #2b3036}
.btn-secondary{background:linear-gradient(180deg,#3a414a,#2b3139);border:1px solid #3d444d}
.btn-ghost{background:transparent;border:1px solid #2a2f36}
.btn-accent{background:linear-gradient(180deg,var(--silver-light),var(--silver-dark));color:#0c0e12;border:1px solid #9aa2ab}

.hero{padding:96px 0;background:radial-gradient(800px 400px at 70% 10%, rgba(127,138,149,.15), transparent 60%)}
.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero h1{font-size:44px;line-height:1.1;margin:0;background:linear-gradient(180deg,#e6ebef,#aab2bb);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.35), 0 12px 36px rgba(0,0,0,.7)}
.hero p{max-width:720px;color:var(--muted)}
.hero-cta{display:flex;gap:12px;margin-top:6px}
.hero-badges{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.badge{border:1px solid #2b3036;padding:6px 10px;border-radius:999px;color:var(--muted);background:#121419}

.section{padding:72px 0}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.panel{background:var(--bg-elev);border:1px solid #1e2329;border-radius:16px;padding:22px}
.panel-raised{box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02)}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.feature-list h3{margin:0 0 6px;font-size:18px}
.feature-list p{margin:0;color:var(--muted)}

.cards .card{background:var(--bg-elev);border:1px solid #1f252b;border-radius:14px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.cards .card h3{margin:0 0 6px}
.cards .card p{margin:0;color:var(--muted)}

.join-inner{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.email-auth{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;margin-top:10px}
input,textarea{width:100%;background:#0e1014;border:1px solid #20262e;color:var(--text);border-radius:10px;padding:10px;outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 3px var(--ring);border-color:#333a44}
.waitlist-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;width:100%}

.contact .social{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:14px}
.contact-form{display:grid;gap:10px}
.muted{color:var(--muted)}

.site-footer{border-top:1px solid #161a1f;padding:20px 0;background:#0b0c0f}
.footer-inner{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--muted)}
.dot{opacity:.5}

/* Admin Styles */
.admin-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid #1e2329;
}

.admin-section {
  margin-top: 2rem;
}

.messages-container, .users-container {
  margin: 2rem 0;
}

.messages-list, .users-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.message-card, .user-card {
  background: var(--bg-elev);
  border: 1px solid #1e2329;
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.message-card:hover, .user-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.message-header, .user-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.message-info, .user-info {
  flex: 1;
}

.message-name, .user-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.message-email, .user-email {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.message-date, .user-date {
  color: var(--muted);
  font-size: 0.8rem;
}

.message-content {
  background: #0e1014;
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  margin: 1rem 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.message-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-respond, .btn-unrespond {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.btn-respond {
  background: #27ae60;
  color: white;
}

.btn-respond:hover {
  background: #2ecc71;
}

.btn-unrespond {
  background: #f39c12;
  color: white;
}

.btn-unrespond:hover {
  background: #e67e22;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-responded {
  background: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.status-unresponded {
  background: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--text);
}

@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .email-auth{grid-template-columns:1fr;}
  .waitlist-form{grid-template-columns:1fr}
  
  .admin-nav {
    flex-direction: column;
  }
  
  .message-header, .user-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .message-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .header-inner {
    height: 56px;
  }
  
  .brand-logo {
    height: 24px;
  }
  
  .brand-name {
    font-size: 1.1rem;
  }
  
  .hero h1 {
    font-size: 32px;
  }
  
  .hero p {
    font-size: 16px;
  }
}