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

:root{
  --bg:#030306;
  --panel:rgba(8,9,18,.82);
  --panel-solid:#0a0b14;
  --text:#f3f4ff;
  --muted:#aeb6d9;
  --soft:#6f77a4;
  --purple:#8b42ff;
  --purple-2:#bb5dff;
  --blue:#236dff;
  --cyan:#6da5ff;
  --line:rgba(151,103,255,.34);
  --glow-purple:0 0 18px rgba(139,66,255,.55),0 0 42px rgba(139,66,255,.18);
  --glow-blue:0 0 18px rgba(35,109,255,.45),0 0 42px rgba(35,109,255,.15);
  --radius:24px;
}

*{box-sizing:border-box;}
html{min-height:100%; background:#030306;}
body{
  min-height:100vh;
  margin:0;
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.82)),
    url('../img/backgrounds/smoky-bg.jpg') center center / cover fixed no-repeat,
    #030306;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 18%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.75) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 110px);
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.32));
  z-index:0;
}

a{color:inherit;}
img{max-width:100%;}

.site-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  width:min(1180px,92vw);
  margin:0 auto;
  padding:26px 0 46px;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0 24px;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  min-width:240px;
}

.header-brand img{
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(139,66,255,.7));
}

.brand-text strong{
  display:block;
  font-size:1.05rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:var(--glow-purple);
}

.brand-text span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.top-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.top-nav a{
  display:block;
  position:relative;
  width:118px;
  opacity:.78;
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
  text-decoration:none;
}

.top-nav a:hover,
.top-nav a.active{
  transform:translateY(-2px) scale(1.03);
  opacity:1;
  filter:drop-shadow(0 0 10px rgba(139,66,255,.7));
}

.top-nav img{
  display:block;
  width:100%;
}

.hero{
  min-height:calc(100vh - 170px);
  display:grid;
  place-items:center;
  text-align:center;
  padding:12px 0 28px;
}

.hero-title{
  margin:0 auto 8px;
  font-family:'Orbitron', Arial, Helvetica, sans-serif;
  font-size:clamp(1.8rem,5vw,4.3rem);
  line-height:1.05;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(139,66,255,.62), 0 0 42px rgba(35,109,255,.24);
}

.hero-subtitle{
  margin:0 auto;
  color:var(--muted);
  max-width:650px;
  line-height:1.7;
  font-size:1.05rem;
}

.hub-wrap{
  width:min(800px,100%);
  margin:34px auto 20px;
  position:relative;
  height:560px;
}

.logo-hub{
  position:absolute;
  inset:0;
  margin:auto;
  width:250px;
  height:250px;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,66,255,.14),rgba(0,0,0,.25) 58%,transparent 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  z-index:4;
  transition:transform .3s ease, filter .3s ease;
}

.logo-hub::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid rgba(139,66,255,.45);
  box-shadow:inset 0 0 24px rgba(35,109,255,.28),0 0 24px rgba(139,66,255,.34);
  animation:pulseRing 3.6s ease-in-out infinite;
}

.logo-hub img{
  width:92%;
  height:92%;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(139,66,255,.76));
  user-select:none;
}

.logo-hub:hover{
  transform:scale(1.035);
  filter:brightness(1.12);
}

@keyframes pulseRing{
  0%,100%{opacity:.55; transform:scale(1);}
  50%{opacity:1; transform:scale(1.035);}
}

.orbit-menu{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.orbit-tab{
  position:absolute;
  left:50%;
  top:50%;
  width:260px;
  transform:translate(-50%,-50%) scale(.35) rotate(-230deg);
  opacity:0;
  pointer-events:auto;
  transition:transform .8s cubic-bezier(.19,1,.22,1), opacity .35s ease, filter .2s ease;
  text-decoration:none;
  filter:drop-shadow(0 0 10px rgba(139,66,255,.35));
}

.orbit-tab img{
  display:block;
  width:100%;
}

.orbit-tab:hover{
  filter:drop-shadow(0 0 18px rgba(139,66,255,.8)) drop-shadow(0 0 16px rgba(35,109,255,.45));
}

.hub-wrap.is-open .orbit-tab{opacity:1;}
.hub-wrap.is-open .tab-info{transform:translate(-50%,-50%) translate(0,-218px) scale(1) rotate(360deg); transition-delay:.02s;}
.hub-wrap.is-open .tab-faqs{transform:translate(-50%,-50%) translate(246px,-96px) scale(1) rotate(360deg); transition-delay:.09s;}
.hub-wrap.is-open .tab-games{transform:translate(-50%,-50%) translate(200px,154px) scale(1) rotate(360deg); transition-delay:.16s;}
.hub-wrap.is-open .tab-about{transform:translate(-50%,-50%) translate(-200px,154px) scale(1) rotate(360deg); transition-delay:.23s;}
.hub-wrap.is-open .tab-email{transform:translate(-50%,-50%) translate(-246px,-96px) scale(1) rotate(360deg); transition-delay:.30s;}

.home-hint{
  margin:0;
  color:#929ac2;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.86rem;
}

.panel{
  width:min(920px,100%);
  margin:18px auto 0;
  background:linear-gradient(180deg,rgba(13,14,28,.88),rgba(5,6,12,.92));
  border:1px solid rgba(151,103,255,.28);
  border-radius:var(--radius);
  box-shadow:0 0 32px rgba(0,0,0,.35),0 0 38px rgba(139,66,255,.12), inset 0 0 0 1px rgba(255,255,255,.035);
  padding:30px;
  backdrop-filter:blur(8px);
}

.page-title{
  margin:12px auto 20px;
  text-align:center;
}

.page-title h1{
  margin:0;
  font-family:'Orbitron', Arial, Helvetica, sans-serif;
  font-size:clamp(2rem,4vw,3.5rem);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:var(--glow-purple);
}

.page-title p{
  color:var(--muted);
  max-width:760px;
  margin:14px auto 0;
  line-height:1.7;
}

.content-card{
  margin:0 auto;
  color:var(--muted);
  line-height:1.8;
  font-size:1rem;
}

.content-card h2,
.content-card h3{
  color:var(--text);
  text-shadow:0 0 16px rgba(139,66,255,.24);
}

.content-card h2{margin:0 0 12px;}
.content-card h3{margin:22px 0 8px;}
.content-card p{margin:0 0 14px;}
.content-card ul{margin:0; padding-left:20px;}
.content-card li{margin:8px 0;}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
  margin-top:20px;
}

.mini-card{
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(151,103,255,.20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.mini-card p:last-child{margin-bottom:0;}

.email-link{
  display:inline-block;
  margin-top:12px;
  padding:15px 18px;
  border-radius:14px;
  border:1px solid rgba(151,103,255,.36);
  background:linear-gradient(90deg,rgba(139,66,255,.16),rgba(35,109,255,.12));
  color:#eef1ff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:var(--glow-purple);
}
.email-link:hover{text-decoration:underline; filter:brightness(1.12);}

.footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(151,103,255,.12);
  color:#858db0;
  text-align:center;
  font-size:.9rem;
}

@media (max-width:900px){
  .site-header{flex-direction:column; align-items:center;}
  .header-brand{justify-content:center; min-width:auto;}
  .top-nav{justify-content:center;}
  .top-nav a{width:104px;}
  .hub-wrap{height:650px;}
  .orbit-tab{width:230px;}
  .hub-wrap.is-open .tab-info{transform:translate(-50%,-50%) translate(0,-235px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-faqs{transform:translate(-50%,-50%) translate(0,-122px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-games{transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(360deg); z-index:5;}
  .hub-wrap.is-open .tab-about{transform:translate(-50%,-50%) translate(0,122px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-email{transform:translate(-50%,-50%) translate(0,235px) scale(1) rotate(360deg);}
  .logo-hub{width:190px;height:190px;}
}

@media (max-width:560px){
  .site-shell{width:min(94vw,1180px); padding-top:14px;}
  .brand-text strong{font-size:.92rem;}
  .brand-text span{font-size:.72rem;}
  .top-nav a{width:88px;}
  .hero{min-height:auto; padding-top:18px;}
  .hub-wrap{height:590px; margin-top:22px;}
  .orbit-tab{width:205px;}
  .logo-hub{width:160px;height:160px;}
  .hub-wrap.is-open .tab-info{transform:translate(-50%,-50%) translate(0,-220px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-faqs{transform:translate(-50%,-50%) translate(0,-112px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-games{transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-about{transform:translate(-50%,-50%) translate(0,112px) scale(1) rotate(360deg);}
  .hub-wrap.is-open .tab-email{transform:translate(-50%,-50%) translate(0,220px) scale(1) rotate(360deg);}
  .panel{padding:22px 18px;}
}