:root{
  --bg:#020702;
  --panel:#071008;
  --panel2:#0a160b;
  --text:#f1fff2;
  --muted:#9eafa0;
  --cyan:#58ff38;
  --amber:#baff4d;
  --line:rgba(105,255,70,.19);
}

body{
  background:
    radial-gradient(circle at 22% 16%,rgba(39,255,0,.075),transparent 27rem),
    linear-gradient(180deg,#020702,#030904 48%,#020502);
}

body,h1,h2,h3,.hero-display,.brand,.server-list span,.trust-strip strong{
  font-family:Oxanium,Inter,sans-serif;
}

.starfield{
  opacity:.55;
  filter:hue-rotate(65deg) saturate(1.7);
}

.site-header{
  height:88px;
  background:rgba(2,8,3,.9);
  border-bottom:1px solid rgba(90,255,57,.3);
  box-shadow:0 0 35px rgba(40,255,0,.06);
}

.brand-logo img{
  width:220px;
  height:62px;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:screen;
  filter:saturate(1.35) contrast(1.12) drop-shadow(0 0 10px rgba(57,255,25,.28));
}

.hero-image{
  filter:hue-rotate(58deg) saturate(1.45) brightness(.74);
  transform:scale(1.01);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.14;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(75,255,42,.13) 4px);
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}

.hero-overlay{
  background:linear-gradient(90deg,rgba(1,7,2,.97) 0%,rgba(2,12,3,.77) 48%,rgba(2,8,3,.15) 83%),linear-gradient(0deg,var(--bg),transparent 37%);
}

h1,h2,h3,.hero-display{
  letter-spacing:-.035em;
}

.hero-display em{
  color:#62ff3f;
  text-shadow:0 0 12px rgba(91,255,57,.55),0 0 38px rgba(48,255,12,.23);
}

.eyebrow,.kicker,.card-icon,.card-actions a:last-child,.option-label{
  color:#68ff47;
  text-shadow:0 0 14px rgba(74,255,38,.25);
}

.button-primary{
  color:#021002;
  background:linear-gradient(135deg,#78ff54,#32da19);
  box-shadow:0 0 22px rgba(75,255,40,.25),inset 0 1px rgba(255,255,255,.45);
}

.button-discord{
  background:linear-gradient(135deg,#6271e8,#4c56ad);
  box-shadow:0 0 18px rgba(105,117,232,.18);
}

.services,.order{
  background-image:linear-gradient(rgba(82,255,48,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(82,255,48,.035) 1px,transparent 1px);
  background-size:48px 48px;
}

.service-grid{
  border-color:rgba(94,255,58,.25);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}

.service-card{
  background:linear-gradient(145deg,rgba(8,21,9,.98),rgba(3,10,4,.98));
}

.service-card:hover{
  background:linear-gradient(145deg,rgba(16,39,17,.98),rgba(4,14,6,.98));
  box-shadow:inset 0 0 34px rgba(69,255,35,.06);
}

.service-card.featured{
  background:linear-gradient(135deg,rgba(31,78,24,.66),rgba(4,13,5,.98));
}

.servers{
  background:linear-gradient(90deg,rgba(9,27,9,.88),rgba(4,12,5,.76));
  border-color:rgba(91,255,54,.2);
}

.server-list span{
  background:rgba(7,20,7,.9);
  border-color:rgba(91,255,54,.28);
  box-shadow:inset 3px 0 #52f532;
}

.order-options article{
  background:linear-gradient(135deg,rgba(8,22,9,.98),rgba(3,10,4,.98));
  border-color:rgba(91,255,54,.2);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}

.direct-option{
  background:linear-gradient(135deg,rgba(70,83,198,.18),rgba(5,14,6,.98))!important;
}

.final-cta{
  background:radial-gradient(circle at 50% 100%,rgba(62,255,25,.16),transparent 52%);
}

@media(max-width:800px){
  .site-header{height:74px}
  .brand-logo img{width:170px;height:52px}
  .hero{padding-top:96px}
}

.server-list a{
  font-family:Oxanium,Inter,sans-serif;
  background:rgba(7,20,7,.9);
  border-color:rgba(91,255,54,.28);
  box-shadow:inset 3px 0 #52f532;
}