*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#191127;
  --bg2:#23133a;
  --bg3:#1f1232;
  --accent:#883CF0;
  --accent2:#7c4dff;
  --accent3:#ff3d71;
  --green:#00e676;
  --amber:#ffc400;
  --text:#e8e8f0;
  --text-dim:#d6d6d6;
  --border:#3a1c63;
  --glow:0 0 30px rgba(162, 0, 255, 0.15);
  --radius:12px;
}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Outfit',sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--accent);color:var(--bg)}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:2rem;
}
.hero::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(149, 0, 255, 0.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(157, 77, 255, 0.06) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(197, 61, 255, 0.03) 0%,transparent 40%);
  animation:nebula 20s ease-in-out infinite alternate;
}
@keyframes nebula{
  0%{transform:rotate(0deg) scale(1)}
  100%{transform:rotate(5deg) scale(1.05)}
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(136, 0, 255, 0.058) 1px,transparent 1px),
    linear-gradient(90deg,rgba(191, 0, 255, 0.057) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);
}
.hero-badge{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid #3a1c63;
  padding:.5rem 1.5rem;
  border-radius:50px;
  margin-bottom:2rem;
  position:relative;
  z-index:2;
  animation:fadeSlideUp .8s ease both;
}
.hero h1{
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:clamp(3rem,10vw,8rem);
  text-align:center;
  line-height:.95;
  position:relative;z-index:2;
  animation:fadeSlideUp 1s ease .2s both;
}
.hero h1 .dot{color:var(--accent)}
.hero h1 .ms{
  color:var(--accent);
}
.hero-sub{
  font-size:clamp(1rem,2.5vw,1.35rem);
  color:var(--text-dim);
  text-align:center;
  max-width:600px;
  margin-top:1.5rem;
  position:relative;z-index:2;
  animation:fadeSlideUp 1s ease .4s both;
}
.hero-stats{
  display:flex;gap:3rem;
  margin-top:3rem;
  position:relative;z-index:2;
  animation:fadeSlideUp 1s ease .6s both;
}
.hero-stat{text-align:center}
.hero-stat .num{
  font-family:'JetBrains Mono',monospace;
  font-size:2rem;font-weight:700;
  color:var(--accent);
  display:block;
}
.hero-stat .label{
  font-size:.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.scroll-indicator{
  position:absolute;
  bottom:2rem;
  left:50%;transform:translateX(-50%);
  z-index:2;
  animation:bounce 2s ease infinite;
}
.scroll-indicator svg{width:24px;height:24px;stroke:var(--text-dim);fill:none;stroke-width:2}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ===== NAV ===== */
.sticky-nav{
  position:sticky;top:0;z-index:100;
  background:#180f26;
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:.75rem 2rem;
  display:flex;align-items:center;justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}
.nav-btn{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5rem 1rem;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:all .25s ease;
}
.nav-btn:hover,.nav-btn.active{
  color:var(--accent);
  border-color:#5e309d;
  background:#1f1232;
}

/* ===== SECTIONS ===== */
section{padding:5rem 2rem}
section .section-header{
  text-align:center;
  margin-bottom:4rem;
}
section .section-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.75rem;
  display:block;
}
section .section-title{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.1;
}
.container{max-width:1200px;margin:0 auto}

/* ===== SERVER TYPES ===== */
.server-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.server-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  cursor:pointer;
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.server-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:0;
  transition:opacity .35s ease;
}
.server-card:hover{
  border-color:#5e309d;
  transform:translateY(-4px);
  box-shadow:var(--glow);
}
.server-card:hover::before{opacity:1}
.server-card .icon{
  width:48px;height:48px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.25rem;
}
.server-card h3{
  font-family:'Outfit',sans-serif;
  font-weight:700;font-size:1.25rem;
  margin-bottom:.5rem;
}
.server-card p{
  color:var(--text-dim);
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:1rem;
}
.card-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.card-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.05em;
  padding:.25rem .6rem;
  border-radius:4px;
  background:#1f1232;
  color:var(--accent);
  border:1px solid #3a1c63;
}

/* ===== TIMELINE ===== */
.timeline{
  position:relative;
  padding:2rem 0;
}
.timeline::before{
  content:'';
  position:absolute;
  left:50%;top:0;bottom:0;
  width:2px;
  background:linear-gradient(to bottom,transparent,var(--accent),var(--accent2),transparent);
  transform:translateX(-50%);
}
.timeline-item{
  display:flex;
  align-items:center;
  margin-bottom:3rem;
  position:relative;
}
.timeline-item:nth-child(odd){flex-direction:row}
.timeline-item:nth-child(even){flex-direction:row-reverse}
.timeline-content{
  width:45%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 2rem;
  transition:all .35s ease;
}
.timeline-content:hover{
  border-color:#5e309d;
  box-shadow:var(--glow);
}
.timeline-dot{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:16px;height:16px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--bg);
  z-index:2;
  box-shadow:0 0 15px rgba(153, 0, 255, 0.4);
}
.timeline-year{
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  color:var(--accent);
  font-weight:700;
  margin-bottom:.25rem;
}
.timeline-content h4{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
.timeline-content p{font-size:.85rem;color:var(--text-dim);line-height:1.5}

/* ===== MONITOR ===== */
.monitor-panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.monitor-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.monitor-header h3{
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;
  font-weight:600;
}
.status-light{
  display:flex;align-items:center;gap:.5rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  color:var(--green);
}
.status-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--green);
  animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(184, 0, 230, 0.4)}50%{box-shadow:0 0 0 8px rgba(0,230,118,0)}}
.monitor-body{padding:1.5rem}
.metric-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
.metric{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem;
  transition:all .3s ease;
}
.metric:hover{border-color:#5e309d}
.metric .metric-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.5rem;
}
.metric .metric-value{
  font-family:'JetBrains Mono',monospace;
  font-size:1.75rem;
  font-weight:700;
}
.metric .metric-bar{
  height:4px;
  background:var(--bg3);
  border-radius:2px;
  margin-top:.75rem;
  overflow:hidden;
  position:relative;
}
.metric .metric-bar .fill{
  height:100%;
  border-radius:2px;
  transition:width 1.5s ease;
}

/* ===== COMPARISON TABLE ===== */
.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.compare-table th{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dim);
  background:var(--bg3);
  padding:1rem 1.25rem;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.compare-table td{
  padding:1rem 1.25rem;
  font-size:.9rem;
  border-bottom:1px solid var(--border);
  background:var(--bg2);
  transition:background .2s ease;
}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:var(--bg3)}
.compare-table .highlight{color:var(--accent);font-weight:600}

/* ===== INTERACTIVE TERMINAL ===== */
.terminal{
  background:#0f0818;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  font-family:'JetBrains Mono',monospace;
}
.terminal-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;
  background:var(--bg3);
  border-bottom:1px solid var(--border);
}
.terminal-dot{width:12px;height:12px;border-radius:50%}
.terminal-dot.r{background:#ff5f57}
.terminal-dot.y{background:#ffbd2e}
.terminal-dot.g{background:#28c940}
.terminal-title{
  flex:1;text-align:center;
  font-size:.7rem;color:var(--text-dim);
}
.terminal-body{
  padding:1.5rem;
  font-size:.8rem;
  line-height:1.8;
  min-height:300px;
  max-height:400px;
  overflow-y:auto;
}
.terminal-line{margin-bottom:.25rem}
.terminal-line .prompt{color:var(--green)}
.terminal-line .cmd{color:var(--text)}
.terminal-line .output{color:var(--text-dim)}
.terminal-line .highlight{color:var(--accent)}
.terminal-line .warn{color:var(--amber)}
.terminal-line .err{color:var(--accent3)}
.terminal-input-row{
  display:flex;align-items:center;gap:.5rem;
  margin-top:.5rem;
}
.terminal-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;
  caret-color:var(--accent);
}

/* ===== INTERACTIVE RACK ===== */
.rack-container{
  display:flex;
  gap:3rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.rack{
  background:#0c0c12;
  border:2px solid var(--border);
  border-radius:8px;
  width:300px;
  padding:.5rem;
  flex-shrink:0;
}
.rack-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  text-align:center;
  padding:.5rem;
  color:var(--text-dim);
  letter-spacing:.15em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.rack-unit{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.6rem .8rem;
  margin-bottom:4px;
  display:flex;align-items:center;gap:.6rem;
  cursor:pointer;
  transition:all .25s ease;
  font-size:.75rem;
}
.rack-unit:hover{
  border-color:#5e309d;
  background:var(--bg3);
}
.rack-unit.active{
  border-color:var(--accent);
  box-shadow:0 0 15px rgba(132, 0, 255, 0.1);
}
.rack-led{
  width:6px;height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.rack-led.on{background:var(--green);box-shadow:0 0 6px rgba(0,230,118,0.5)}
.rack-led.warn{background:var(--amber);box-shadow:0 0 6px rgba(255,196,0,0.5)}
.rack-led.off{background:#333}
.rack-label{flex:1;font-family:'JetBrains Mono',monospace;font-size:.7rem}
.rack-load{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--text-dim)}
.rack-info{
  flex:1;
  min-width:280px;
}
.rack-info-panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
}
.rack-info-panel h4{
  font-size:1.1rem;font-weight:700;margin-bottom:1rem;
  display:flex;align-items:center;gap:.5rem;
}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}
.info-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.75rem 1rem;
}
.info-item .info-key{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.25rem;
}
.info-item .info-val{
  font-family:'JetBrains Mono',monospace;
  font-size:.9rem;
  font-weight:600;
}

/* ===== FOOTER ===== */
footer{
  text-align:center;
  padding:4rem 2rem;
  border-top:1px solid var(--border);
}
footer p{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  color:var(--text-dim);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero-stats{gap:1.5rem}
  .timeline::before{left:20px}
  .timeline-item,.timeline-item:nth-child(even){flex-direction:column;align-items:flex-start;padding-left:50px}
  .timeline-content{width:100%}
  .timeline-dot{left:20px;top:1.5rem;transform:translate(-50%,0)}
  .rack-container{flex-direction:column;align-items:stretch}
  .rack{width:100%}
  .info-grid{grid-template-columns:1fr}
  .compare-table{font-size:.8rem}
  .compare-table th,.compare-table td{padding:.75rem}
}