:root{
  --bg:#ffffff;
  --bg-soft:#f7f7f8;
  --red-700:#7a0e1c;
  --red-600:#a11322;
  --red:#c8102e;
  --red-light:#e2263f;
  --text-main:#181818;
  --text-muted:#1e3a5c;
  --line:#e6e6e8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text-main);
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

/* subtle grid pattern background */
.circuit-bg{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:0.05;
  pointer-events:none;
  background-image:
    linear-gradient(var(--red) 1px, transparent 1px),
    linear-gradient(90deg, var(--red) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%);
}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.3px;
  white-space:nowrap;
  text-decoration:none;
  color:var(--text-main);
}
.logo .bolt{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, var(--red-light), var(--red-700));
  border-radius:8px;
  box-shadow:0 4px 14px rgba(200,16,46,0.35);
  flex-shrink:0;
}
.logo .bolt svg{width:20px;height:20px;fill:#ffffff;}
.logo span.rs{color:var(--red);}

nav.links{
  display:flex;
  gap:28px;
  font-size:15px;
  color:var(--text-muted);
}
nav.links a{color:var(--text-muted); text-decoration:none; transition:color .2s;}
nav.links a:hover{color:var(--text-main);}

.auth-buttons{display:flex; gap:12px; align-items:center;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 18px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-outline{
  color:var(--text-main);
  border-color:var(--line);
  background:transparent;
}
.btn-outline:hover{border-color:var(--red); color:var(--red);}
.btn-solid{
  background:linear-gradient(145deg, var(--red-light), var(--red-600));
  color:#ffffff;
  box-shadow:0 4px 16px rgba(200,16,46,0.28);
}
.btn-solid:hover{box-shadow:0 6px 22px rgba(200,16,46,0.4);}
.btn-lg{padding:13px 28px; font-size:15px; border-radius:10px;}
.btn[disabled], .btn.is-disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  padding:28px 24px;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
  background:var(--bg-soft);
}