/* SploitHen visual theme integrated into the Afterglow landing page. */
:root {
  color-scheme: dark;
  --bg: #050b1b;
  --panel: rgba(8, 18, 42, .90);
  --line: rgba(0, 139, 255, .48);
  --blue: #079cff;
  --cyan: #19d7ff;
  --muted: #8ea6c7;
  --white: #f4f8ff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--white);
  font: 15px/1.5 "Segoe UI", system-ui, sans-serif;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(0,77,180,.20), transparent 42%),
    linear-gradient(180deg, #050a18 0%, #07132d 55%, #050b1b 100%);
}
body:before {
  content: "";
  position: fixed;
  inset: 38% -10% 10%;
  pointer-events: none;
  opacity: .72;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath stroke='%230078ff' d='M-40 210 C180 40 330 40 520 180 S900 340 1120 180 1450 30 1650 160'/%3E%3Cpath stroke='%2300baff' d='M-40 250 C180 410 350 40 600 180 S950 390 1200 220 1450 70 1650 210' opacity='.8'/%3E%3Cpath stroke='%234c5cff' d='M-40 300 C180 100 360 360 620 250 S980 80 1220 240 1450 370 1650 260' opacity='.65'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
  animation: waveDrift 18s ease-in-out infinite alternate;
}
body:after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(1,5,16,.52) 100%);
}
@keyframes waveDrift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { transform: translate3d(1.5%, -2%, 0) scale(1.04); }
}
#brand {
  position: relative;
  z-index: 1;
  width: min(92%, 1040px);
  margin: 14px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(31,126,226,.35);
  border-radius: 18px;
  background: rgba(5,13,31,.72);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  font-weight: 750;
  letter-spacing: .02em;
}
#brand:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px var(--blue);
}
.shell {
  position: relative;
  z-index: 1;
  width: min(92%, 900px);
  margin: clamp(48px, 9vh, 96px) auto 70px;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 17px;
  border: 1px solid rgba(0,157,255,.5);
  border-radius: 999px;
  background: rgba(4,18,43,.72);
  color: #dceaff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 22px rgba(0,124,255,.12);
}
.badge-dot, .instruction-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #00e6a0;
  box-shadow: 0 0 12px #00e6a0;
}
h1 {
  margin: 17px 0 2px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 850;
}
h1 span {
  background: linear-gradient(100deg, #f7faff 12%, #dcecff 48%, #078fff 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle {
  margin: 12px 0 36px;
  color: #9db3d3;
  font-size: clamp(14px, 2vw, 18px);
}
.panel {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 27px 30px 25px;
  text-align: left;
  border: 1px solid rgba(0,145,255,.65);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(8,20,46,.96), rgba(5,13,31,.92));
  box-shadow: 0 0 0 1px rgba(0,93,255,.08), 0 0 38px rgba(0,103,255,.16), inset 0 1px rgba(255,255,255,.04);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.panel h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.025em;
}
.panel-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.host-status {
  white-space: nowrap;
  border: 1px solid rgba(0,220,160,.45);
  border-radius: 999px;
  padding: 6px 13px;
  color: #39e5b0;
  background: rgba(0,180,130,.08);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.host-status:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #00e6a0;
  box-shadow: 0 0 10px #00e6a0;
}
.instruction {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 23px 0 17px;
  font-size: 16px;
  font-weight: 650;
}
.instruction-dot {
  margin-top: 7px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}
#start {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 15px 20px;
  border: 1px solid rgba(90,197,255,.8);
  border-radius: 13px;
  background: linear-gradient(105deg, #087be0, #079cff 55%, #087be0);
  color: #fff;
  font: 800 16px/1.2 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .075em;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 8px 24px rgba(0,117,255,.25), inset 0 1px rgba(255,255,255,.25);
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
#start:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,117,255,.36), inset 0 1px rgba(255,255,255,.25);
}
#start:active:not(:disabled) { transform: translateY(1px); }
#start:disabled { opacity: .72; cursor: wait; }
.count {
  margin: 13px 0 0;
  color: #8ea6c7;
  text-align: center;
  font-size: 13px;
}
.credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 34px auto 0;
  color: #dbe8fb;
  font-size: 15px;
}
.credit:before, .credit:after {
  content: "";
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--blue));
}
.credit:after { transform: rotate(180deg); }
.credit strong { color: #19bfff; font-weight: 800; }
@media (max-width: 600px) {
  #brand { margin-top: 8px; }
  .panel { padding: 22px 18px; }
  .panel-head { align-items: center; }
  .panel h2 { font-size: 19px; }
  .instruction { font-size: 14px; }
  .credit { gap: 10px; font-size: 13px; }
  .credit:before, .credit:after { width: 28px; }
  .host-status { padding: 5px 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body:before { animation: none; }
  #start { transition: none; }
}