:root{
  --bg-dark:#05070b !important;
  --card-bg:#0c1119 !important;
  --primary-cyan:#38d9ff !important;
  --primary-purple:#6f45ff !important;
  --gold-accent:#d9a441 !important;
  --text-light:#f4f7fb !important;
  --text-gray:#99a6b7 !important;
  --border-color:#223044 !important;
  --mu-blue:#2aa9ff;
  --mu-violet:#6f45ff;
  --mu-gold:#d9a441;
  --mu-panel:rgba(8,13,21,.88);
}

html{scroll-behavior:smooth;background:#05070b}
body{
  position:relative;
  background:
    radial-gradient(circle at 50% -10%,rgba(43,131,255,.16),transparent 34%),
    radial-gradient(circle at 10% 28%,rgba(111,69,255,.10),transparent 28%),
    radial-gradient(circle at 90% 55%,rgba(217,164,65,.06),transparent 24%),
    linear-gradient(180deg,#05070b 0%,#070b11 46%,#05070b 100%) !important;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.28;
  background-image:
    linear-gradient(rgba(56,217,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,217,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 76%);
}
body::after{
  content:"";position:fixed;left:50%;top:110px;width:760px;height:760px;transform:translateX(-50%) rotate(45deg);z-index:-1;pointer-events:none;opacity:.08;
  border:1px solid rgba(56,217,255,.8);box-shadow:0 0 90px rgba(56,217,255,.12),inset 0 0 80px rgba(111,69,255,.07);
}

h1,h2,h3{letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.35)}

header{
  min-height:74px;padding:12px 4% !important;
  background:linear-gradient(180deg,rgba(4,7,12,.98),rgba(7,11,18,.94)) !important;
  border-bottom:1px solid rgba(56,217,255,.18) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.28),0 1px 0 rgba(217,164,65,.06) inset;
}
.logo{font-size:27px !important;letter-spacing:.08em;position:relative;padding-right:10px}
.logo i{color:var(--mu-gold) !important;filter:drop-shadow(0 0 8px rgba(217,164,65,.28))}
.logo span{color:var(--primary-cyan) !important}
.logo::after{content:"MUONLINE SOLUTIONS";display:block;position:absolute;left:34px;top:29px;font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:.20em;color:#718299;white-space:nowrap}
nav{gap:8px !important}
nav a{position:relative;padding:9px 10px;border-radius:6px;font-weight:700;letter-spacing:.04em !important}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,var(--primary-cyan),transparent);transform:scaleX(0);transition:.25s}
nav a:hover,nav a.active{color:#fff !important;background:rgba(56,217,255,.055)}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}

.btn-cta,.btn-promo{
  border:1px solid rgba(77,221,255,.28) !important;
  background:linear-gradient(135deg,#178bc4 0%,#4e38c8 100%) !important;
  box-shadow:0 8px 24px rgba(32,111,183,.18),inset 0 1px 0 rgba(255,255,255,.12);
  text-transform:uppercase;letter-spacing:.04em;border-radius:7px !important;
}
.btn-cta:hover,.btn-promo:hover{transform:translateY(-2px) !important;box-shadow:0 12px 32px rgba(44,148,221,.28)}
.btn-instagram{border:1px solid rgba(255,255,255,.10);box-shadow:0 8px 20px rgba(0,0,0,.16);border-radius:7px !important}

.hero{
  position:relative;overflow:hidden;padding-top:150px !important;padding-bottom:54px !important;
  border-bottom:1px solid rgba(56,217,255,.08);
  background:
    linear-gradient(180deg,rgba(5,8,13,.12),rgba(5,8,13,.82)),
    radial-gradient(ellipse at 50% 10%,rgba(56,217,255,.15),transparent 45%),
    radial-gradient(ellipse at 76% 40%,rgba(111,69,255,.12),transparent 30%) !important;
}
.hero::before{
  content:"";position:absolute;left:50%;top:82px;width:min(880px,88vw);height:280px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(217,164,65,.14),transparent);filter:blur(46px);opacity:.55;
}
.hero::after{
  content:"";position:absolute;left:50%;bottom:0;width:min(920px,90vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(56,217,255,.65),rgba(217,164,65,.38),transparent);
  box-shadow:0 0 22px rgba(56,217,255,.35);
}
.hero h1{font-size:clamp(34px,4.4vw,62px) !important;line-height:1.02 !important;max-width:1000px;margin-left:auto;margin-right:auto}
.hero h1 span,.section-title span,.faq-title span{color:var(--primary-cyan) !important;text-shadow:0 0 22px rgba(56,217,255,.18)}
.hero p{max-width:850px;margin-left:auto;margin-right:auto;color:#a9b6c7 !important;font-size:16px}
.hero-badge{border:1px solid rgba(217,164,65,.28) !important;background:rgba(217,164,65,.07) !important;color:#e9c46d !important;box-shadow:inset 0 0 18px rgba(217,164,65,.05)}

section{position:relative}
.section-title,.faq-title{font-size:clamp(28px,3vw,42px) !important;letter-spacing:.035em}
.section-title::after,.faq-title::after{content:"";display:block;width:86px;height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--mu-gold),var(--primary-cyan),transparent);box-shadow:0 0 12px rgba(56,217,255,.18)}

.card,.card-hub,.service-card,.pricing-card,.video-card,.metric-card,.feature-item,.hosting-card,.vps-card,.faq-item,.promo-card,.consulting-box,.events-box,.simulator-box,.video-process-box{
  background:
    linear-gradient(145deg,rgba(13,20,31,.96),rgba(7,11,18,.96)) padding-box,
    linear-gradient(135deg,rgba(56,217,255,.22),rgba(111,69,255,.10),rgba(217,164,65,.14)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:0 14px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
}
.card:hover,.card-hub:hover,.service-card:hover,.pricing-card:hover,.video-card:hover,.metric-card:hover,.hosting-card:hover,.vps-card:hover,.faq-item:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.30),0 0 28px rgba(56,217,255,.10) !important;
}
.card-icon,.consulting-icon{background:linear-gradient(145deg,rgba(56,217,255,.13),rgba(111,69,255,.10)) !important;border:1px solid rgba(56,217,255,.18);box-shadow:0 0 22px rgba(56,217,255,.08) inset}
.card-icon i,.consulting-icon i,.service-card>i{filter:drop-shadow(0 0 10px rgba(56,217,255,.20))}

.tech-badge,.feature-item,.gift-tag,.event-tag,.spec-item,.filter-btn{
  border-color:rgba(56,217,255,.15) !important;
  background:rgba(10,16,25,.84) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.tech-badge:hover,.gift-tag:hover,.event-tag:hover,.filter-btn:hover,.filter-btn.active{border-color:rgba(56,217,255,.48) !important;box-shadow:0 0 20px rgba(56,217,255,.09)}

.featured{box-shadow:0 16px 46px rgba(0,0,0,.30),0 0 0 1px rgba(217,164,65,.34) inset,0 0 28px rgba(217,164,65,.06) !important}
.badge-top{background:linear-gradient(135deg,#e5bd62,#b57d23) !important;color:#080b0f !important;border-radius:4px !important}
.badge-promo{border-radius:4px !important;box-shadow:0 6px 18px rgba(0,0,0,.25)}

.commands-table{background:#080d15 !important;border:1px solid rgba(56,217,255,.14) !important;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.commands-table th{background:#0c1521 !important;color:#dce9f5 !important;border-bottom:1px solid rgba(56,217,255,.16) !important}
.commands-table td{border-color:rgba(56,217,255,.08) !important}

footer{
  margin-top:20px;padding:34px 5% !important;
  background:linear-gradient(180deg,rgba(7,11,17,.45),rgba(3,5,8,.95));
  border-top:1px solid rgba(56,217,255,.13) !important;
  color:#77869a !important;
}
footer::before{content:"";display:block;width:110px;height:2px;margin:0 auto 18px;background:linear-gradient(90deg,transparent,var(--mu-gold),var(--primary-cyan),transparent)}

@media(max-width:850px){
  header{min-height:auto !important;padding:12px 3.5% !important}
  .logo::after{display:none}
  .hero{padding-top:220px !important;padding-bottom:40px !important}
  .hero h1{font-size:34px !important}
  nav a{padding:7px 8px !important;font-size:12px !important}
  body::after{width:440px;height:440px}
}
@media(max-width:560px){
  .hero{padding-top:230px !important}
  .hero h1{font-size:30px !important}
  .btn-cta,.btn-instagram{font-size:12px !important;padding:9px 12px !important}
}
.mu-context-badge{display:inline-flex;align-items:center;gap:8px;margin:0 auto 16px;padding:7px 12px;border:1px solid rgba(217,164,65,.24);border-radius:999px;background:rgba(217,164,65,.055);color:#cfb36f;font:700 11px/1 'Rajdhani',sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 18px rgba(217,164,65,.035)}
.mu-context-badge i{color:#e3bd5f;filter:drop-shadow(0 0 8px rgba(217,164,65,.2))}