@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@600;700&display=swap');

:root{
  --bg:#05080d;
  --bg2:#080d14;
  --panel:#0b1119;
  --panel2:#0d151f;
  --line:#1b2a3b;
  --line2:#173c6c;
  --text:#f2f6fb;
  --muted:#8e9bad;
  --blue:#1683ff;
  --blue2:#0a5fd6;
  --green:#22e77d;
  --shadow:0 24px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% -10%, rgba(13,91,179,.13), transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.55;
}
body::selection{background:var(--blue);color:#fff}
a{text-decoration:none;color:inherit}
button{font:inherit}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.025;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.topbar{
  height:82px;padding:0 clamp(20px,4vw,68px);
  display:grid;grid-template-columns:260px 1fr 220px;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(4,7,11,.86);backdrop-filter:blur(18px);
  position:sticky;top:0;z-index:50;
}
.brand{display:inline-flex;align-items:center;gap:12px;width:max-content}
.brand-mark{width:45px;height:45px;color:var(--blue);filter:drop-shadow(0 0 15px rgba(22,131,255,.25))}
.brand-mark svg{width:100%;height:100%}
.brand-text{display:flex;flex-direction:column;line-height:.83;font-family:Rajdhani,sans-serif;font-size:22px;letter-spacing:.5px}
.brand-text strong{font-style:normal}
.brand-text em{font-style:normal;color:var(--blue)}
.nav{display:flex;justify-content:center;gap:38px;height:100%}
.nav a{
  position:relative;display:grid;place-items:center;
  color:#aeb9c8;font-size:13px;font-weight:700;text-transform:uppercase;
  transition:.2s ease;
}
.nav a:hover{color:#fff}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transition:.2s}
.nav a:hover::after{transform:scaleX(1)}
.btn{
  border:1px solid #194f86;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 18px;color:#dceeff;font-weight:800;font-size:13px;letter-spacing:.2px;
  background:#0a111a;transition:.2s ease;cursor:pointer;
}
.btn:hover{transform:translateY(-1px);border-color:var(--blue);box-shadow:0 0 28px rgba(22,131,255,.15)}
.btn-outline{background:transparent;color:#4ca1ff}
.top-join{justify-self:end}
.btn-primary{
  background:linear-gradient(180deg,#106fe0,#0b56b7);
  color:#fff;border-color:#2a91ff;
  box-shadow:inset 0 1px rgba(255,255,255,.15),0 0 28px rgba(22,131,255,.18);
}
.btn-big{min-height:58px;padding:0 30px;font-size:16px}
.btn-small{min-height:41px;margin-top:18px}
.menu-btn{display:none;background:none;border:0;width:42px;height:42px;padding:9px;justify-self:end}
.menu-btn span{display:block;height:2px;background:#fff;margin:5px 0}

.hero{
  min-height:480px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr minmax(500px,720px) 1fr;
  align-items:center;border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 50% 35%, rgba(28,107,208,.14), transparent 30%),
    linear-gradient(180deg,#07101a 0%,#05080d 100%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.08;
  background-image:linear-gradient(rgba(38,125,225,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(38,125,225,.18) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black,transparent);
}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.18}
.orb-left{width:340px;height:340px;background:#074881;left:-100px;bottom:-80px}
.orb-right{width:380px;height:380px;background:#0065ff;right:-130px;top:90px}

.hero-content{position:relative;z-index:3;text-align:center;padding:54px 20px}
.eyebrow{color:#9ba8b8;font-size:13px;font-weight:800;letter-spacing:4px;margin-bottom:12px}
.hero h1{margin:0;font-family:Rajdhani,sans-serif;font-size:clamp(66px,7vw,112px);line-height:.75;letter-spacing:-3px}
.hero h1 span,.hero h1 strong{display:block}
.hero h1 span{color:#f4f7fb;text-shadow:0 10px 35px rgba(255,255,255,.08)}
.hero h1 strong{
  margin-top:18px;color:transparent;
  background:linear-gradient(180deg,#2d8dff 0%,#1168e7 55%,#0649ad 100%);
  background-clip:text;-webkit-background-clip:text;
  filter:drop-shadow(0 16px 28px rgba(16,95,212,.25));
}
.hero-copy{color:#aab5c3;font-size:16px;margin:30px auto 28px;max-width:600px}
.hero-actions{display:flex;align-items:center;flex-direction:column;gap:13px}
.copy-address,.address-box{
  background:transparent;border:0;color:#8aa6c6;cursor:pointer;
}
.copy-address:hover,.address-box:hover{color:#fff}

.hero-side{height:100%;position:relative;z-index:2;display:flex;align-items:flex-end}
.hero-side-left{justify-content:flex-start}
.soldier-shape{
  width:95%;height:92%;
  background:
    radial-gradient(circle at 43% 24%,rgba(21,105,197,.18),transparent 20%),
    linear-gradient(135deg,transparent 16%,rgba(10,25,39,.96) 17%,rgba(4,9,14,.98) 60%);
  clip-path:polygon(0 0,80% 0,98% 24%,73% 34%,94% 100%,0 100%);
  border-right:1px solid rgba(44,137,243,.08);
  opacity:.92;
}
.ts-orb{
  width:270px;height:270px;border:16px solid rgba(40,96,168,.18);border-radius:50%;
  margin:0 0 75px auto;transform:translateX(48px);
  display:grid;place-items:center;color:rgba(45,128,237,.25);
  box-shadow:0 0 70px rgba(16,99,226,.11);
}
.headphones{font-size:110px;font-weight:900;letter-spacing:-55px;transform:translateX(-20px)}

.status-wrap{position:relative;z-index:5;margin:-1px auto 0;max-width:1480px;padding:0 32px}
.status-card{
  transform:translateY(0);
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid #1a2b3c;background:linear-gradient(180deg,#090e14,#070b10);
  border-radius:8px;box-shadow:var(--shadow);overflow:hidden;
}
.status-item{display:flex;align-items:center;gap:16px;padding:21px 28px;border-right:1px solid #1a2734}
.status-item:last-child{border-right:0}
.status-icon{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#4f9dff;background:#07111d;border:1px solid #102d4c;font-size:24px;font-weight:700;
}
.status-item div:last-child{display:flex;flex-direction:column;min-width:0}
.status-item span{color:#8d9aab;font-size:11px;font-weight:700}
.status-item strong{font-family:Rajdhani,sans-serif;font-size:20px;color:#5da7ff;white-space:nowrap}
.status-item small{font-size:11px;color:#6f7c8c;white-space:nowrap}
.online{color:var(--green)!important}
.online i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}

.section{max-width:1480px;margin:0 auto;padding:28px 32px 72px}
.cards{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.05fr;gap:20px;padding-top:28px}
.panel{
  min-height:290px;background:linear-gradient(180deg,#0b1118,#080d13);border:1px solid #1a2836;border-radius:8px;
  padding:28px;position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.panel::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(20,113,230,.05);right:-80px;bottom:-80px;filter:blur(8px)}
.panel-topline{position:absolute;left:0;top:0;width:46%;height:2px;background:var(--blue)}
.panel-topline.right{left:auto;right:0}
.panel h2{margin:0 0 22px;font-size:16px;color:#c9d3df}
.panel-icon{color:#358ffd;font-size:24px;margin-right:10px}
.panel p{color:#9aa6b5;font-size:14px}
.feature-list,.link-list{list-style:none;padding:0;margin:0}
.feature-list li,.link-list li{padding:7px 0;color:#aab5c2;font-size:14px}
.feature-list li::before,.link-list li::before{content:"›";color:var(--blue);font-weight:900;font-size:20px;margin-right:12px}
.link-list a:hover{color:#fff}
.join-panel{display:flex;flex-direction:column;align-items:flex-start}
.join-panel .btn{width:100%;margin:10px 0 16px}
.join-panel small{color:#788596}
.address-box{width:100%;margin-top:8px;padding:10px 12px;text-align:left;border:1px solid #213448;border-radius:5px;background:#07101a;color:#aab6c4;display:flex;justify-content:space-between}

.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-top:78px}
.section-kicker{color:#2e8fff;font-weight:800;font-size:12px;letter-spacing:2.5px}
.section-title{font-family:Rajdhani,sans-serif;font-size:46px;margin:8px 0 12px}
.section-title span{color:#2f8fff}
.section-lead{color:#8f9baa;max-width:650px}
.rules{display:grid;gap:10px}
.rules div{display:flex;gap:18px;align-items:center;background:#091019;border:1px solid #172536;border-radius:7px;padding:16px 18px}
.rules b{font-family:Rajdhani,sans-serif;color:#318ffd;font-size:22px}
.rules p{margin:0;color:#aab4c0;font-size:14px}

.admin-section{padding-top:70px}
.section-head{text-align:center;margin-bottom:34px}
.section-head .section-lead{margin-left:auto;margin-right:auto}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto}
.admin-card{
  display:flex;gap:20px;padding:26px;border-radius:8px;border:1px solid #1b2b3e;background:#091019;
}
.admin-card.owner{border-color:#17477e;box-shadow:0 0 28px rgba(18,111,226,.07)}
.avatar{width:64px;height:64px;flex:0 0 64px;border-radius:10px;background:linear-gradient(135deg,#1c85ff,#0a47a2);display:grid;place-items:center;font-weight:900}
.avatar.ghost{background:#111b27;color:#4e6780}
.role{color:#348fff;font-weight:800;font-size:11px;letter-spacing:1.8px}
.admin-card h3{margin:3px 0 4px}
.admin-card p{margin:0;color:#8e9cac;font-size:13px}

.cta{
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  border:1px solid #153a67;border-radius:10px;margin-bottom:72px;padding:42px 46px;
  background:linear-gradient(120deg,#08111c,#09192b 60%,#08111c);
  box-shadow:0 0 50px rgba(19,110,226,.08);
}
.cta h2{font-family:Rajdhani,sans-serif;font-size:40px;margin:4px 0}
.cta p{color:#8e9baa;margin:0}

footer{
  border-top:1px solid #162331;min-height:110px;padding:24px clamp(24px,5vw,70px);
  display:flex;align-items:center;gap:45px;color:#718092;background:#05080c;
}
.footer-brand{margin-right:auto}
footer p{font-size:12px}
.footer-links{display:flex;gap:28px;font-size:13px;font-weight:600}
.footer-links a:hover{color:#fff}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:#0e1d2b;border:1px solid #1f5f9f;color:#d9edff;
  padding:11px 16px;border-radius:6px;opacity:0;pointer-events:none;transition:.2s;z-index:100;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1100px){
  .topbar{grid-template-columns:220px 1fr 180px}
  .nav{gap:18px}
  .nav a{font-size:11px}
  .hero{grid-template-columns:.4fr 1fr .4fr}
  .status-card{grid-template-columns:repeat(3,1fr)}
  .status-item:nth-child(3){border-right:0}
  .status-item:nth-child(n+4){border-top:1px solid #1a2734}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .topbar{height:70px;grid-template-columns:1fr auto}
  .top-join{display:none}
  .menu-btn{display:block}
  .nav{
    position:absolute;top:70px;left:0;right:0;height:auto;padding:14px 22px 20px;
    flex-direction:column;gap:0;background:#05090f;border-bottom:1px solid #1a2836;
    transform:translateY(-120%);opacity:0;pointer-events:none;transition:.2s;
  }
  .nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a{padding:12px 0;display:block}
  .nav a::after{display:none}
  .hero{min-height:600px;grid-template-columns:1fr}
  .hero-side{display:none}
  .hero-content{padding-top:72px}
  .eyebrow{font-size:10px;letter-spacing:2.3px}
  .hero h1{font-size:74px}
  .hero-copy{font-size:14px}
  .status-wrap{padding:0 14px}
  .status-card{grid-template-columns:1fr 1fr}
  .status-item{padding:16px 14px;border-right:1px solid #1a2734;border-top:1px solid #1a2734}
  .status-item:nth-child(odd){border-right:1px solid #1a2734}
  .status-item:nth-child(1),.status-item:nth-child(2){border-top:0}
  .status-item:last-child{grid-column:1/-1}
  .cards{grid-template-columns:1fr;padding-left:14px;padding-right:14px}
  .split{grid-template-columns:1fr;gap:25px;padding:55px 14px}
  .admin-grid{grid-template-columns:1fr}
  .admin-section{padding-left:14px;padding-right:14px}
  .cta{margin-left:14px;margin-right:14px;flex-direction:column;align-items:flex-start;padding:30px 24px}
  footer{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-brand{margin-right:0}
  .footer-links{flex-wrap:wrap}
}
.admin-card:not(.owner){
  border-color:#244d73;
  background:linear-gradient(135deg,rgba(15,30,48,.96),rgba(11,20,32,.96));
  box-shadow:0 0 20px rgba(46,143,255,.06);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}

.admin-card:not(.owner):hover{
  transform:translateY(-3px);
  border-color:#2e8fff;
  box-shadow:0 0 26px rgba(46,143,255,.16);
}

.admin-card:not(.owner) .avatar{
  border-color:#2e8fff;
  color:#66aaff;
  background:linear-gradient(135deg,#102b48,#163d68);
  box-shadow:0 0 18px rgba(46,143,255,.12);
}

.admin-card:not(.owner) .role{
  color:#66aaff;
}
.cta{
  position:relative;
  overflow:hidden;
  border-color:#1d5fa3;
  background:
    radial-gradient(circle at 15% 50%, rgba(46,143,255,.18), transparent 32%),
    linear-gradient(120deg,#08111c,#0b1d31 60%,#08111c);
  box-shadow:0 0 45px rgba(46,143,255,.12);
}

.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(46,143,255,.05),transparent);
  pointer-events:none;
}

.cta h2{
  color:#f2f8ff;
  text-shadow:0 0 18px rgba(46,143,255,.18);
}

.cta .btn-primary{
  box-shadow:0 0 24px rgba(46,143,255,.22);
}

.cta .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 32px rgba(46,143,255,.35);
}