:root {
  --bg: #020713;
  --panel: rgba(3, 18, 42, 0.78);
  --line: rgba(67, 151, 255, 0.55);
  --text: #dff2ff;
  --muted: #95bce0;
  --accent: #1ea7ff;
  --accent-2: #2d5bff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: 'Rajdhani', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(45, 91, 255, 0.2), transparent 28%),
    radial-gradient(circle at 80% 28%, rgba(30, 167, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #01050f, #020b1c 40%, #020713);
}

.bg-grid,
.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-grid {
  background-image:
    linear-gradient(rgba(79, 171, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 171, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.3;
}

.bg-glow {
  background: radial-gradient(circle at 50% 0%, rgba(30, 167, 255, 0.18), transparent 45%);
}

.rust-shell {
  width: min(980px, 92vw);
  margin: 2.5rem auto 4rem;
  display: grid;
  gap: 1rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1rem, 2.2vw, 1.8rem);
  box-shadow: 0 0 0 1px rgba(160, 218, 255, 0.12) inset, 0 20px 50px rgba(0, 7, 20, 0.55), 0 0 28px rgba(30, 167, 255, 0.15);
  backdrop-filter: blur(6px);
}

.kicker {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

h1, h2 {
  margin: 0 0 0.45rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.02em;
}

h1 { font-size: clamp(1.9rem, 4.8vw, 3.5rem); text-shadow: 0 0 18px rgba(30, 167, 255, 0.4); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); }

p, li, ol { font-size: clamp(1.02rem, 2.3vw, 1.25rem); }
p { color: var(--muted); margin: 0.25rem 0 0; }

ol { margin: 0.5rem 0 0; padding-left: 1.2rem; }

.command-row {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

code {
  flex: 1;
  min-width: 250px;
  background: rgba(2, 10, 31, 0.95);
  border: 1px solid rgba(46, 171, 255, 0.65);
  border-radius: 12px;
  color: #8fd0ff;
  padding: 0.75rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 0 18px rgba(30, 167, 255, 0.25);
}

button {
  border: 1px solid #52b8ff;
  border-radius: 12px;
  background: linear-gradient(120deg, #1d45cc, #20adff);
  color: #ecf8ff;
  padding: 0.75rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
li { margin-bottom: 0.3rem; }
.hint { color: #c6e9ff; }

.promo-grid {
  margin-top: 0.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.promo-grid figure {
  margin: 0;
  padding: 0.65rem;
  border-radius: 14px;
  border: 1px solid rgba(82, 184, 255, 0.45);
  background: rgba(2, 9, 26, 0.7);
}

.promo-grid img {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(111, 197, 255, 0.45);
}

.promo-grid figcaption {
  margin-top: 0.55rem;
  color: #b7ddff;
}

@media (max-width: 640px) {
  .rust-shell { margin-top: 1rem; }
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  transition: opacity 1.15s ease-in-out;
}

.loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

.loading-radial,
.loading-linear,
.loading-lines,
.particles {
  position: absolute;
  inset: 0;
}

.loading-radial { background: radial-gradient(circle at center, rgba(0,132,255,0.32), rgba(0,0,0,0.94) 58%); }
.loading-linear { background: linear-gradient(135deg, rgba(0,78,160,0.18), rgba(0,0,0,0.6), rgba(0,174,255,0.12)); }

.loading-lines {
  inset: -6rem;
  opacity: 0.4;
  background-image: repeating-linear-gradient(115deg, transparent 0 18px, rgba(0, 174, 255, 0.18) 19px 20px);
  filter: blur(1px);
  animation: lines-shift 8s linear infinite;
}

.particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #67e8f9;
  box-shadow: 0 0 14px rgba(34,211,238,0.95);
  opacity: 0;
  animation: particle-rise infinite;
}

.loading-content { position: relative; z-index: 2; text-align: center; padding: 1.5rem; }
.logo-wrap { position: relative; margin-bottom: 2rem; }
.logo-glow {
  position: absolute;
  inset: -2rem;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.2);
  filter: blur(48px);
  animation: glow-pulse 2.2s ease-in-out infinite;
}
.loading-logo {
  position: relative;
  width: clamp(12rem, 28vw, 18rem);
  height: clamp(12rem, 28vw, 18rem);
  object-fit: contain;
  border-radius: 12px;
  background: #000;
  padding: 0.35rem;
  filter: drop-shadow(0 0 35px rgba(0,174,255,0.95));
  animation: logo-float 3.4s ease-in-out infinite;
}

.loading-kicker { margin: 0 0 .5rem; letter-spacing: 0.52em; text-transform: uppercase; color: #67e8f9; font-weight: 700; }
.loading-title { margin: 0; text-transform: uppercase; font-size: clamp(2rem, 8vw, 5rem); text-shadow: 0 0 22px rgba(0,132,255,0.85); }
.loading-tags { margin-top: 1.2rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; text-transform: uppercase; font-size: .82rem; letter-spacing: .24em; }
.loading-tags span { border: 1px solid rgba(34,211,238,.6); background: rgba(34,211,238,.1); padding: .55rem .9rem; border-radius: 999px; }
.loading-bar { margin: 2rem auto .8rem; width: min(24rem, 74vw); height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.loading-progress { height: 100%; width: 0%; border-radius: inherit; background: #67e8f9; box-shadow: 0 0 20px rgba(34,211,238,.95); animation: loading-progress 4.5s ease-in-out forwards 1.9s; }
.loading-status { margin: 0; color: #a1a1aa; text-transform: uppercase; letter-spacing: .38em; font-size: .75rem; animation: status-blink 2.2s infinite 2.1s; }

@keyframes lines-shift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes particle-rise { 0% { opacity: 0; transform: translateY(-8px) scale(0);} 35% {opacity:1; transform: translateY(-28px) scale(1.2);} 100% {opacity:0; transform: translateY(-76px) scale(0);} }
@keyframes glow-pulse { 0%,100% {opacity: .45; transform: scale(.95);} 50% {opacity: .95; transform: scale(1.08);} }
@keyframes logo-float { 0%,100% { transform: rotate(0deg) scale(1);} 33% { transform: rotate(.6deg) scale(1.025);} 66% { transform: rotate(-.6deg) scale(1.01);} }
@keyframes loading-progress { from { width: 0%; } to { width: 100%; } }
@keyframes status-blink { 0% {opacity:0;} 35% {opacity:1;} 65% {opacity:.75;} 100% {opacity:1;} }