:root{
  --gold:#f5b61c;
  --gold-soft:#ffd56a;
  --white:#ffffff;
  --muted:rgba(255,255,255,.78);
  --dark:#040505;
  --line:rgba(245,182,28,.45);
}

*{box-sizing:border-box}

html{
  height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:#030404;
  color:var(--white);
  overflow-x:hidden;
}

.page{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(14px,2.2vw,32px);
}

.bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.16)),
    url('assets/background-elkubo-dark.png') center/cover no-repeat;
  z-index:-5;
  transform:scale(1.03);
  animation:bgFloat 16s ease-in-out infinite alternate;
}

.bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 54%,rgba(0,0,0,.04),rgba(0,0,0,.42) 62%,rgba(0,0,0,.68));
}

.grain{
  position:absolute;
  inset:0;
  opacity:.18;
  z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
  animation:grain 1.4s steps(3) infinite;
}

.glow{
  position:absolute;
  border-radius:999px;
  filter:blur(46px);
  z-index:-2;
  opacity:.65;
}

.glow-one{
  width:36vw;
  height:9vw;
  left:30%;
  bottom:13%;
  background:rgba(245,182,28,.25);
  animation:pulse 3.8s ease-in-out infinite;
}

.glow-two{
  width:20vw;
  height:20vw;
  right:7%;
  top:24%;
  background:rgba(245,182,28,.10);
  animation:pulse 5.5s ease-in-out infinite reverse;
}

.particles{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 6%,var(--gold) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 34%,var(--gold) 0 1px,transparent 3px),
    radial-gradient(circle at 31% 61%,var(--gold) 0 1px,transparent 3px),
    radial-gradient(circle at 88% 81%,var(--gold) 0 1px,transparent 3px);
  animation:particles 7s ease-in-out infinite alternate;
}

.hero{
  width:min(1050px,94vw);
  text-align:center;
  display:grid;
  justify-items:center;
  align-content:center;
  min-height:auto;
  padding-top:0;
}

.logo{
  width:clamp(340px,38vw,560px);
  height:auto;
  margin-bottom:clamp(24px,3vw,42px);
  filter:
    drop-shadow(0 0 22px rgba(255,255,255,.13))
    drop-shadow(0 0 34px rgba(245,182,28,.16));
  opacity:0;
  animation:
    logoIn 1.1s ease-out .1s forwards,
    logoFloat 4.8s ease-in-out 1.3s infinite;
}

.eyebrow{
  margin:0 0 clamp(12px,1.5vw,18px);
  font-family:Orbitron,sans-serif;
  text-transform:uppercase;
  letter-spacing:clamp(5px,.9vw,10px);
  font-size:clamp(12px,.95vw,17px);
  font-weight:800;
  color:var(--gold-soft);
  text-shadow:0 0 18px rgba(245,182,28,.45);
  opacity:0;
  animation:fadeUp .8s ease-out .4s forwards;
}

h1{
  margin:0;
  font-family:Orbitron,sans-serif;
  font-size:clamp(78px,8vw,140px);
  line-height:.88;
  letter-spacing:clamp(8px,1vw,16px);
  font-weight:900;
  color:#fff;
  text-shadow:
    0 0 14px rgba(255,255,255,.75),
    0 0 36px rgba(245,182,28,.58),
    0 10px 32px rgba(0,0,0,.65);
  opacity:0;
  animation:
    bigIn 1s cubic-bezier(.2,.85,.2,1) .65s forwards,
    titleGlow 2.8s ease-in-out 1.7s infinite alternate;
}

.lead{
  width:min(620px,90%);
  margin:clamp(20px,2vw,28px) 0 clamp(22px,2.5vw,32px);
  font-size:clamp(15px,1.1vw,19px);
  line-height:1.7;
  color:var(--muted);
  text-wrap:balance;
  opacity:0;
  animation:fadeUp .8s ease-out .9s forwards;
}

.launch{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(4,5,5,.3);
  backdrop-filter:blur(14px);
  color:#fff;
  border-radius:999px;
  padding:clamp(14px,1.5vw,19px) clamp(30px,3.2vw,56px);
  font-family:Orbitron,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:clamp(2px,.45vw,6px);
  font-size:clamp(12px,.85vw,15px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 26px rgba(245,182,28,.17);
  position:relative;
  overflow:hidden;
  opacity:0;
  animation:
    fadeUp .8s ease-out 1.15s forwards,
    buttonBreath 2.7s ease-in-out 2s infinite;
}

.launch:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(100deg,transparent 20%,rgba(255,213,106,.55),transparent 80%);
  transform:translateX(-120%);
  animation:shine 3.3s ease-in-out infinite;
}

.bell{
  color:var(--gold);
  margin-right:14px;
}

.services{
  width:min(820px,92%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:clamp(40px,5vw,65px);
  opacity:0;
  animation:fadeUp .8s ease-out 1.35s forwards;
}

.service{
  min-height:86px;
  padding:0 clamp(10px,1.5vw,28px);
  display:grid;
  place-items:center;
  gap:10px;
  position:relative;
}

.service:not(:last-child):after{
  content:"";
  position:absolute;
  right:0;
  top:10%;
  height:80%;
  width:1px;
  background:linear-gradient(transparent,var(--line),transparent);
}

.icon{
  font-size:clamp(30px,3vw,44px);
  line-height:1;
  color:var(--gold);
  text-shadow:0 0 16px rgba(245,182,28,.55);
  animation:iconFloat 3.3s ease-in-out infinite;
}

.service:nth-child(2) .icon{animation-delay:.45s}
.service:nth-child(3) .icon{animation-delay:.9s}

.service h2{
  margin:0;
  font-family:Orbitron,sans-serif;
  text-transform:uppercase;
  letter-spacing:clamp(2px,.4vw,5px);
  font-size:clamp(11px,.85vw,14px);
  line-height:1.35;
  font-weight:800;
}

.down{
  width:24px;
  height:24px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  margin-top:clamp(16px,2vw,30px);
  filter:drop-shadow(0 0 10px rgba(245,182,28,.75));
  animation:arrow 1.7s ease-in-out infinite;
}

@keyframes logoIn{
  from{
    opacity:0;
    transform:translateY(-22px) scale(.94);
    filter:blur(6px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 22px rgba(255,255,255,.13))
      drop-shadow(0 0 34px rgba(245,182,28,.16));
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes bigIn{
  from{
    opacity:0;
    transform:translateY(28px) scale(.94);
    letter-spacing:24px;
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes titleGlow{
  from{
    text-shadow:
      0 0 12px rgba(255,255,255,.55),
      0 0 26px rgba(245,182,28,.4);
  }
  to{
    text-shadow:
      0 0 18px rgba(255,255,255,.9),
      0 0 48px rgba(245,182,28,.75);
  }
}

@keyframes logoFloat{
  50%{transform:translateY(-8px)}
}

@keyframes iconFloat{
  50%{transform:translateY(-8px) scale(1.06)}
}

@keyframes arrow{
  50%{
    transform:rotate(45deg) translate(8px,8px);
    opacity:.45;
  }
}

@keyframes bgFloat{
  from{transform:scale(1.03) translate3d(-6px,0,0)}
  to{transform:scale(1.07) translate3d(10px,-6px,0)}
}

@keyframes pulse{
  50%{
    opacity:.95;
    transform:scale(1.08);
  }
}

@keyframes particles{
  to{transform:translateY(-18px)}
}

@keyframes grain{
  to{transform:translate(1%,1%)}
}

@keyframes shine{
  0%,45%{transform:translateX(-120%)}
  70%,100%{transform:translateX(120%)}
}

@keyframes buttonBreath{
  50%{
    box-shadow:
      0 0 36px rgba(245,182,28,.26),
      inset 0 0 20px rgba(245,182,28,.08);
  }
}

@media (min-width:1600px){
  .hero{
    width:min(1120px,92vw);
  }

  h1{
    font-size:clamp(92px,7.2vw,138px);
  }

  .logo{
    width:clamp(380px,31vw,540px);
  }

  .services{
    margin-top:50px;
  }
}

@media (max-width:900px){
  .bg{
    background-position:35% center;
  }

  .hero{
    width:min(760px,94vw);
  }

  .logo{
    width:clamp(290px,58vw,480px);
  }

  h1{
    font-size:clamp(64px,11vw,104px);
  }

  .services{
    width:100%;
    margin-top:44px;
  }

  .service{
    padding-inline:12px;
  }
}

@media (max-width:640px){
  .page{
    padding:22px 16px;
  }

  .bg{
    background-position:30% center;
  }

  .bg:after{
    background:
      linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.36)),
      radial-gradient(circle at 50% 48%,rgba(0,0,0,.1),rgba(0,0,0,.68) 70%);
  }

  .hero{
    width:100%;
  }

  .logo{
    width:min(88vw,380px);
    margin-bottom:34px;
  }

  .eyebrow{
    letter-spacing:5px;
    font-size:12px;
  }

  h1{
    font-size:clamp(48px,15vw,74px);
    letter-spacing:6px;
  }

  .lead{
    font-size:15px;
    line-height:1.62;
  }

  .services{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:36px;
  }

  .service{
    min-height:auto;
    padding:14px 12px;
    border:1px solid rgba(245,182,28,.18);
    border-radius:18px;
    background:rgba(0,0,0,.24);
    backdrop-filter:blur(10px);
  }

  .service:not(:last-child):after{
    display:none;
  }

  .service h2 br{
    display:none;
  }

  .icon{
    font-size:32px;
  }

  .down{
    display:none;
  }
}

@media (max-width:420px){
  h1{
    font-size:clamp(44px,16vw,64px);
    letter-spacing:5px;
  }

  .launch{
    width:100%;
    padding-inline:18px;
  }

  .logo{
    width:92vw;
  }
}

@media (max-height:760px) and (min-width:700px){
  .page{
    padding:12px 24px;
  }

  .logo{
    width:clamp(280px,30vw,430px);
    margin-bottom:20px;
  }

  .eyebrow{
    margin-bottom:10px;
    font-size:clamp(11px,.8vw,14px);
  }

  h1{
    font-size:clamp(64px,6.4vw,104px);
  }

  .lead{
    margin:16px 0 18px;
    line-height:1.5;
  }

  .services{
    margin-top:28px;
  }

  .service{
    min-height:70px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation:none!important;
    transition:none!important;
  }

  .logo,
  .eyebrow,
  h1,
  .lead,
  .launch,
  .services{
    opacity:1!important;
  }
}