:root{
--accent-blue:#1f6fff;
--text-main:#ffffff;
--text-muted:#cfd4df;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Segoe UI',sans-serif;
background:#050814;
color:#fff;
overflow-x:hidden;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  padding: 0 70px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  z-index: 1000;
}

.logo{
height:38px;
}

.nav{
justify-self:center;
}

.nav ul{
display:flex;
list-style:none;
gap:28px;
}

.nav a{
color:#d0d3e0;
text-decoration:none;
font-size:12px;
font-weight:600;
}

.member-btn{
justify-self:end;
background:var(--accent-blue);
padding:10px 22px;
font-size:12px;
color:white;
text-decoration:none;
font-weight:700;
}

.hero{
position:relative;
min-height:100vh;
background-image:url('hero1.png');
background-size:cover;
background-position:center;
display:flex;
align-items:flex-end;
padding-left:490px;
padding-bottom:180px;
transition:background-image 1s ease-in-out;
}

.hero-controls{
    position:absolute;
    bottom:30px;
    right:50px;
    display:flex;
    gap:12px;
}

.hero-slider-progress{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:rgba(255,255,255,0.15);
    z-index:20;
}

.hero-slider-progress-fill{
    height:100%;
    width:0%;
    background:#1f6fff;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,.82) 0%,
rgba(0,0,0,.72) 45%,
rgba(0,0,0,.40) 100%
);
}

.hero-inner{
position:relative;
z-index:2;
max-width:650px;
}

.hero-tagline{
font-size:11px;
letter-spacing:2px;
color:#4c8dff;
margin-bottom:16px;
}

.hero-title{
font-family:'Oswald',sans-serif;
font-size:92px;
line-height:.95;
letter-spacing:3px;
margin-bottom:18px;
}

.powered{
display:flex;
align-items:center;
gap:12px;
margin-bottom:24px;
}

.powered-logo{
height:44px;
}

.hero-text{
max-width:620px;
font-size:18px;
line-height:1.7;
color:var(--text-muted);
}

.hero-buttons{
display:flex;
gap:12px;
margin-top:28px;
}

.btn{
padding:15px 28px;
text-decoration:none;
font-size:12px;
font-weight:700;
}

.primary-btn{
background:var(--accent-blue);
color:#fff;
}

.secondary-btn{
border:1px solid rgba(255,255,255,.4);
color:#fff;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.register-btn {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
}

.member-btn {
  background: #1f6fff;
  border: 1px solid #1f6fff;
}

.page-loader {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.page-loader.active {
    display: flex;
}

.loader-ring {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    to {
        transform: rotate(360deg);
    }
}