:root{
  --bg: #0b1020;
  --bg-grad-1: #0b1020;
  --bg-grad-2: #111a3a;
  --card: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.12);
  --text: #eef2ff;
  --muted: #b6c2e2;
  --primary: #0ea5e9;
  --primary-2: #38bdf8;
  --accent: #a78bfa;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1000px 600px at -10% -20%, #1b2360 0%, transparent 55%), 
              radial-gradient(800px 500px at 120% 10%, #0b7ca8 0%, transparent 60%),
              linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
}

/* General text & links */
h1,h2,h3{ margin: 8px 0; }
a{ color: var(--primary-2); text-decoration: none; }
a:hover{ text-decoration: underline; }

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

.page{ padding: 28px 0 64px; }

/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index:20;
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(10, 15, 35, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px;
}
.brand{
  font-weight: 700; letter-spacing: 0.2px; color: var(--text); text-decoration:none;
  font-size: 20px;
}
.nav-links{ display:flex; align-items:center; flex:1; justify-content:center; gap:14px 18px; flex-wrap: wrap; }
/* Text links in navbar (exclude buttons) */
.nav-links a:not(.btn){ color: var(--text); text-decoration:none; opacity:.9; position: relative; padding: 6px 4px; }
.nav-links a:not(.btn):hover{ opacity:1; color:#93c5fd; }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: linear-gradient(90deg, var(--primary), #93c5fd); transition: width .2s ease; opacity:.9; border-radius:2px; }
.nav-links a:not(.btn):hover::after{ width:100%; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.card + .card{ margin-top: 16px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#001018;
  font-weight:600;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 0;
  box-shadow: 0 4px 18px rgba(56,189,248,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 26px rgba(56,189,248,.35); }
.btn:active{ transform: translateY(0); }
.btn.secondary{ background: linear-gradient(180deg, #64748b, #475569); color: #e5e7eb; }
.btn.ghost{
  background: transparent; color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.btn.small{ padding: 8px 12px; font-size: 14px; border-radius: 8px; }
.btn.danger{ background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }
/* Live button variant */
.btn.live{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(239,68,68,.25), transparent 60%),
    linear-gradient(180deg, #ff4d4f, #b91c1c);
  color:#fff;
  border: 1px solid rgba(239,68,68,.35);
  box-shadow: 0 4px 22px rgba(239,68,68,.35), 0 0 22px rgba(239,68,68,.22);
}
.btn.live:hover{ box-shadow: 0 6px 28px rgba(239,68,68,.45), 0 0 30px rgba(239,68,68,.28); }

/* Forms */
form label{ display:block; margin-bottom: 6px; color: var(--muted); font-size: 14px; }
form input, form select, form textarea{
  width:100%;
  padding: 12px 12px;
  margin: 6px 0 14px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  outline: none;
}
form input:focus, form select:focus, form textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}

/* Grid & avatars */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.avatar{ width:84px; height:84px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,0.2); }

/* Toasts */
.toasts{ display:grid; gap:10px; margin-bottom:16px; }
.toast{
  background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(56,189,248,.06));
  border:1px solid rgba(56,189,248,.25);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background: rgba(10, 15, 35, 0.5);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.muted{ color: var(--muted); }

/* Home hero */
.hero{
  display:grid; gap:16px;
  align-items:center; justify-items:start;
  padding: 36px 24px;
  background: linear-gradient(140deg, rgba(14,165,233,.14), rgba(167,139,250,.12));
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.hero h1{ margin:0; font-size: 38px; line-height:1.15; letter-spacing: .3px; }
.hero p{ margin:0; color: var(--muted); font-size: 18px; }
.hero .actions{ display:flex; gap:12px; flex-wrap: wrap; margin-top: 8px; }

/* Hero enhanced */
.hero-decor{ position: relative; overflow: hidden; }
.hero-inner{ position: relative; z-index: 2; width: 100%; }
.hero-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background: rgba(56,189,248,.18); color:#dff6ff; border:1px solid rgba(56,189,248,.35);
}
.pill.soft{ background: rgba(167,139,250,.14); color:#f2eaff; border-color: rgba(167,139,250,.35); }
.icon-circle{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
}
.trust{ display:flex; align-items:center; gap:8px; margin-top: 8px; }
.orb{
  position:absolute; border-radius:50%; filter: blur(36px); opacity:.7; z-index:1;
}
.orb-a{ width:220px; height:220px; right:-60px; top:-60px; background: radial-gradient(circle at 30% 30%, #38bdf8, transparent 70%); }
.orb-b{ width:260px; height:260px; left:-80px; bottom:-80px; background: radial-gradient(circle at 70% 70%, #a78bfa, transparent 70%); }

/* Features */
.features{ margin-top:18px; }
.feature h3{ margin:8px 0 4px; }
.feature .icon-circle{ width:40px; height:40px; }

/* Steps */
.steps{ margin-top:18px; }
.step-num{
  width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(56,189,248,.12); color:#c8f0ff; border:1px solid rgba(56,189,248,.28); font-weight:700;
  box-shadow: inset 0 0 20px rgba(56,189,248,.12);
}

/* Filters bar */
.filters{
  display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.filters .btn{ align-self: end; }

/* Cards users */
.user-card .meta{ color: var(--muted); font-size: 14px; }
.user-card .actions{ margin-top: 10px; display:flex; gap:8px; }

/* Auth card */
.auth-card{
  max-width: 560px;
  margin: 0 auto;
}

/* Responsive tweaks */
@media (max-width: 600px){
  .nav{ height: 72px; }
  .brand{ font-size: 18px; }
  .hero{ padding: 22px 16px; }
  .hero h1{ font-size: 30px; }
}

/* Mobile & accessibility enhancements */
/* Respect iOS safe areas (notches) */
@supports (padding: max(0px)) or (padding: env(safe-area-inset-top)){
  .site-header{ padding-top: max(0px, env(safe-area-inset-top)); }
  body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}

/* Make focus visible for keyboard users */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skip link */
.skip-link{
  position: absolute; left: 8px; top: -40px; z-index: 10000;
  background:#111827; color:#e5e7eb; border:1px solid #374151; border-radius:8px;
  padding:8px 12px; text-decoration:none; transition: top .2s ease;
}
.skip-link:focus{ top: 8px; }

/* Ensure media scales on small screens */
img, video{ max-width:100%; height:auto; }

/* Larger tap targets on touch devices */
@media (pointer: coarse){
  .btn{ min-height: 44px; }
  .btn.small{ min-height: 36px; }
  input, select, textarea{ min-height: 40px; }
}

/* Avoid motion for users that prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* Prevent horizontal scroll on mobile */
html, body{ overflow-x: hidden; }

/* Utility: clamp page padding on smaller screens */
@media (max-width: 900px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .page{ padding-top: 18px; }
}


/* Sticky navbar: elevated state when scrolling */
.site-header.scrolled{
  background: rgba(10, 15, 35, 0.82);
  border-bottom-color: rgba(255,255,255,0.14);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* Anchor offset so sticky header doesn't cover targets */
:target{ scroll-margin-top: 86px; }