:root{
  --green:#9cff19;
  --green-soft:#79c613;
  --gold:#d8b24c;
  --ink:#020503;
  --panel:rgba(3,10,5,.86);
  --page-max:1920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:var(--ink);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
.topbar{
  position:absolute;
  z-index:20;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,var(--page-max));
  min-height:clamp(72px,5.2vw,100px);
  padding:0 clamp(18px,4vw,78px);
  display:grid;
  grid-template-columns:minmax(180px,280px) 1fr minmax(125px,190px);
  align-items:center;
  border-bottom:1px solid rgba(216,178,76,.38);
  background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.44));
}
.brand{
  text-decoration:none;
  width:max-content;
  text-align:center;
  line-height:1;
  filter:drop-shadow(0 4px 10px #000);
}
.brand-main{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.35vw,46px);
  font-weight:800;
  letter-spacing:-1px;
  color:#e5bd54;
  background:linear-gradient(#fff0a1 10%,#dbac36 48%,#7a4d0f 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.brand-sub{
  display:block;
  margin-top:clamp(5px,.55vw,10px);
  color:#aecd43;
  font-size:clamp(7px,.55vw,11px);
  letter-spacing:clamp(2px,.25vw,5px);
}
nav{
  display:flex;
  justify-content:center;
  gap:clamp(18px,2.6vw,52px);
}
nav a{
  text-decoration:none;
  color:#f3ecd6;
  font-size:clamp(10px,.72vw,14px);
  font-weight:700;
  letter-spacing:1px;
  transition:.2s;
}
nav a:hover{color:var(--green);text-shadow:0 0 12px rgba(156,255,25,.4)}
.status-badge{
  justify-self:end;
  border:1px solid rgba(216,178,76,.68);
  background:rgba(3,9,4,.72);
  color:#eed06c;
  padding:clamp(9px,.8vw,15px) clamp(12px,1.3vw,26px);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(10px,.7vw,14px);
  letter-spacing:2px;
  white-space:nowrap;
}
.hero{
  position:relative;
  width:min(100%,var(--page-max));
  margin:0 auto;
  min-height:clamp(720px,76vw,980px);
  height:100vh;
  max-height:1080px;
  overflow:hidden;
  border-bottom:1px solid rgba(216,178,76,.45);
  background:
    url("assets/background.jpg") center center / cover no-repeat;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 29% 46%,rgba(108,219,0,.08),transparent 26%),
    linear-gradient(90deg,
      rgba(2,5,3,.99) 0%,
      rgba(2,5,3,.96) 21%,
      rgba(2,5,3,.83) 38%,
      rgba(2,5,3,.34) 55%,
      rgba(0,0,0,.03) 79%);
}
.hero-content{
  position:relative;
  z-index:3;
  width:clamp(420px,42vw,760px);
  margin-left:clamp(24px,5vw,95px);
  padding-top:clamp(130px,10vw,190px);
}
.domain{
  margin-bottom:clamp(8px,.7vw,14px);
  color:#efd069;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(12px,.8vw,16px);
  letter-spacing:clamp(5px,.5vw,10px);
}
h1{
  margin:0;
  color:#f4f2e7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(76px,7.1vw,138px);
  line-height:.78;
  letter-spacing:clamp(-6px,-.28vw,-3px);
  text-shadow:0 4px 0 rgba(0,0,0,.72),0 0 24px rgba(145,255,34,.09);
}
h2{
  margin:clamp(24px,2vw,38px) 0 clamp(10px,.8vw,15px);
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(23px,2vw,38px);
  letter-spacing:clamp(2px,.25vw,5px);
  text-shadow:0 0 14px rgba(156,255,25,.22);
}
.intro{
  max-width:clamp(420px,33vw,620px);
  margin:0 0 clamp(16px,1.2vw,23px);
  color:#eee;
  font-size:clamp(13px,.9vw,17px);
  line-height:1.6;
}
.count-title{
  margin-bottom:clamp(8px,.6vw,12px);
  color:#e9c761;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(12px,.8vw,16px);
  font-weight:700;
  letter-spacing:2px;
}
.countdown{
  display:flex;
  gap:clamp(7px,.55vw,11px);
}
.count-box{
  width:clamp(72px,5.2vw,102px);
  height:clamp(65px,4.7vw,90px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(151,224,39,.62);
  background:linear-gradient(180deg,rgba(11,26,7,.9),rgba(1,7,3,.93));
  box-shadow:inset 0 0 20px rgba(121,255,0,.05),0 5px 18px rgba(0,0,0,.42);
}
.count-box strong{
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,2.3vw,44px);
  line-height:1;
  text-shadow:0 0 14px rgba(156,255,25,.52);
}
.count-box span{
  margin-top:clamp(5px,.35vw,8px);
  color:#e2c65d;
  font-size:clamp(8px,.48vw,10px);
  letter-spacing:1.5px;
}
.launch-date{
  margin:clamp(8px,.6vw,12px) 0 clamp(14px,1vw,20px);
  color:#aeb7ad;
  font-size:clamp(8px,.5vw,10px);
  letter-spacing:2px;
}
.socials{
  display:flex;
  gap:clamp(7px,.55vw,11px);
}
.social{
  min-width:clamp(136px,10vw,190px);
  height:clamp(46px,3.5vw,66px);
  padding:0 clamp(10px,.8vw,16px);
  display:flex;
  align-items:center;
  gap:clamp(9px,.7vw,14px);
  text-decoration:none;
  color:#fff;
  border:1px solid;
  background:rgba(0,6,3,.88);
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.social:hover{
  transform:translateY(-3px);
  filter:brightness(1.2);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.social-icon{font-size:clamp(19px,1.45vw,28px);font-weight:800}
.social b{
  display:block;
  font-size:clamp(9px,.62vw,12px);
  letter-spacing:1.4px;
}
.social small{
  display:block;
  margin-top:3px;
  font-size:clamp(8px,.5vw,10px);
  font-weight:700;
}
.youtube{border-color:#ef2929}.youtube .social-icon{color:#ff3030}
.tiktok{border-color:#37d7d3}
.kick{border-color:#74e800}.kick .social-icon{color:#84ff00}
.features{
  width:min(100%,var(--page-max));
  margin:0 auto;
  min-height:clamp(128px,9.2vw,175px);
  padding:clamp(22px,2vw,38px) clamp(24px,5vw,95px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#020704;
  border-bottom:1px solid rgba(216,178,76,.34);
}
.features article{
  padding:0 clamp(20px,2vw,38px);
  border-right:1px solid rgba(216,178,76,.22);
}
.features article:first-child{padding-left:0}
.features article:last-child{border-right:0}
.features strong{
  color:var(--green);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,1.8vw,34px);
}
.features h3{
  margin:clamp(8px,.6vw,12px) 0;
  color:#dfbd56;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(11px,.75vw,14px);
}
.features p{
  margin:0;
  color:#b9c0ba;
  font-size:clamp(9px,.62vw,12px);
  line-height:1.6;
}
footer{
  width:min(100%,var(--page-max));
  margin:0 auto;
  padding:clamp(17px,1.4vw,26px);
  text-align:center;
  color:#7d877f;
  background:#010302;
  font-size:clamp(8px,.52vw,10px);
  line-height:1.8;
}
footer small{font-size:inherit}
.embers{
  position:fixed;
  z-index:30;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle,rgba(160,255,33,.55) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(230,176,42,.4) 0 1px,transparent 1.5px);
  background-size:91px 97px,143px 151px;
  animation:embers 22s linear infinite;
}
@keyframes embers{
  from{background-position:0 0,0 0}
  to{background-position:20px -260px,-25px -340px}
}
@media (min-width:2100px){
  :root{--page-max:100%}
  .hero{max-height:none}
}
@media (max-width:1050px){
  .topbar{grid-template-columns:minmax(170px,230px) 1fr}
  .status-badge{display:none}
  nav{justify-content:flex-end}
  .hero{background-position:62% center}
  .hero-overlay{
    background:linear-gradient(90deg,rgba(2,5,3,.98),rgba(2,5,3,.89) 48%,rgba(2,5,3,.22));
  }
}
@media (max-width:760px){
  .topbar{
    min-height:72px;
    padding:0 18px;
    grid-template-columns:175px 1fr;
  }
  nav{gap:15px}
  nav a{font-size:9px}
  nav a:nth-child(2){display:none}
  .hero{
    height:auto;
    min-height:780px;
    max-height:none;
    background-position:64% center;
  }
  .hero-overlay{
    background:linear-gradient(90deg,rgba(2,5,3,.98),rgba(2,5,3,.85) 62%,rgba(2,5,3,.28));
  }
  .hero-content{
    width:auto;
    margin:0;
    padding:118px 24px 55px;
  }
  h1{font-size:clamp(62px,18vw,90px)}
  .features{grid-template-columns:1fr 1fr}
  .features article{
    padding:18px;
    border-bottom:1px solid rgba(216,178,76,.16);
  }
}
@media (max-width:520px){
  nav{display:none}
  .topbar{grid-template-columns:1fr}
  .hero{background-position:67% center}
  h1{font-size:clamp(56px,19vw,76px)}
  h2{font-size:20px}
  .intro{max-width:100%}
  .count-box{
    width:calc((100vw - 72px)/4);
    min-width:60px;
  }
  .socials{flex-wrap:wrap}
  .social{flex:1 1 calc(50% - 6px)}
  .features{grid-template-columns:1fr}
  .features article{
    border-right:0;
    padding:18px 0;
  }
}


.logo{
  display:block;
  height:clamp(58px,4.8vw,86px);
  width:auto;
}