*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07070a;color:#f7f7fb;font-family:Inter,Segoe UI,system-ui,sans-serif}a{color:inherit;text-decoration:none}.orb{position:fixed;width:500px;height:500px;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:-1}.orb.a{background:#ff238015;right:-180px;top:-170px}.orb.b{background:#795cff12;left:-250px;top:600px}header,main>section,footer{width:min(1180px,calc(100% - 40px));margin:auto}body>header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c}.brand{display:flex;align-items:center;gap:8px}.brand img{width:145px;max-height:46px;object-fit:contain}.brand b{font-size:8px;padding:5px 7px;border:1px solid #ffffff16;border-radius:6px;color:#999}nav{display:flex;gap:32px}nav a{font-size:9px;font-weight:900;letter-spacing:1px;color:#70707c}.join{font-size:9px;font-weight:900;border:1px solid #ffffff17;padding:11px 14px;border-radius:9px}.hero{min-height:680px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.live{display:inline-block;font-size:8px;letter-spacing:1.2px;color:#87f4cd;border:1px solid #63f2bd25;background:#63f2bd08;border-radius:99px;padding:7px 10px}.copy h1{font-size:70px;line-height:.95;letter-spacing:-4px;margin:20px 0}.copy em,.head em,.signal em,.final em,.mock h2 em{font-style:normal;background:linear-gradient(90deg,#ff66ae,#9a76ff);background-clip:text;-webkit-background-clip:text;color:transparent}.copy>p{font-size:15px;line-height:1.7;color:#858591}.buttons{display:flex;gap:10px;margin:28px 0 13px}.primary,.ghost{padding:15px 17px;border-radius:10px;font-size:9px;font-weight:950;letter-spacing:.8px}.primary{background:linear-gradient(100deg,#ff3e9d,#8d5cff);box-shadow:0 14px 40px #bd338e26}.ghost{border:1px solid #ffffff15;background:#ffffff04}.copy>small{font-size:7px;color:#555560}.mock{padding:16px;border:1px solid #ffffff18;border-radius:20px;background:linear-gradient(145deg,#111117,#09090d);box-shadow:0 45px 110px #000a;transform:rotateY(-3deg)}.top{display:flex;justify-content:space-between;color:#555;font-size:6px;padding-bottom:12px}.top i{color:#63f2bd;font-style:normal}.tabs{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:5px;background:#0c0c11;border:1px solid #ffffff0d;border-radius:10px;font-size:7px;color:#666}.tabs>*{padding:9px}.tabs b{color:#ddd;background:#ff3e9d0c;border-radius:7px}.mock>label{display:block;margin-top:23px;font-size:6px;color:#666;letter-spacing:1.4px}.mock>h2{font-size:22px;margin:5px 0}.mock>p{font-size:7px;color:#666}.account,.quota,.cards article{border:1px solid #ffffff0d;background:#ffffff025;border-radius:11px}.account{display:flex;align-items:center;gap:10px;padding:11px}.pfp{width:42px;height:42px;border-radius:12px;background:#22222d;display:grid;place-items:center;font-weight:900}.account>div:nth-child(2){display:flex;flex-direction:column;flex:1}.account small,.quota small{font-size:5px;color:#666}.account b{font-size:8px}.account span{font-size:6px;color:#666}.account button{font-size:5px;color:#63f2bd;background:#63f2bd08;border:1px solid #63f2bd20;border-radius:6px;padding:7px}.quota{padding:12px;margin-top:8px}.quota h3{font-size:8px;margin:2px 0}.quota strong{display:block;font-size:31px;margin:10px 0}.quota strong i{font-size:10px;color:#666;font-style:normal}.quota>div{height:5px;border-radius:99px;background:#22222a;margin-bottom:7px}.quota>div span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff3e9d,#8d5cff,#63f2bd);border-radius:99px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.cards article{padding:12px;color:#ff66ae}.cards b,.cards small{display:block;margin-left:20px}.cards b{font-size:7px;color:#fff}.cards small{font-size:5px;color:#666}.ticker{max-width:none!important;width:100%!important;height:65px;border-top:1px solid #ffffff09;border-bottom:1px solid #ffffff09;display:flex;justify-content:center;align-items:center;gap:35px;color:#5d5d68;font-size:7px;font-weight:900;letter-spacing:1.1px}.ticker:not(span){color:#ff4fa4}.ticker span{color:#5d5d68}.section{padding-top:110px;padding-bottom:110px}.head{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:38px}.head small,.signal>div>small,.final>small{font-size:7px;color:#ff65ad;font-weight:900;letter-spacing:1.5px}.head h2,.signal h2,.final h2{font-size:43px;letter-spacing:-2px;margin:6px 0;grid-row:2}.head p{max-width:430px;color:#73737e;font-size:12px;line-height:1.7;grid-column:2;grid-row:1/3}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.grid article,.steps article{padding:23px;border:1px solid #ffffff0d;background:linear-gradient(145deg,#101015,#0b0b10);border-radius:15px;min-height:245px;position:relative}.grid .wide{grid-column:span 2;grid-row:span 2;min-height:500px}.grid article>i,.steps article>i{display:grid;width:42px;height:42px;place-items:center;border:1px solid #ffffff0f;background:#ff3e9d0a;border-radius:12px;color:#ff67ae;font-style:normal;margin-bottom:43px}.grid article>small{font-size:6px;color:#5c5c67;letter-spacing:1px}.grid h3,.steps h3{font-size:19px}.grid p,.steps p{font-size:10px;line-height:1.7;color:#71717c}.wide h3{font-size:29px}.wide p{font-size:12px;max-width:450px}.progress{position:absolute;bottom:23px;left:23px;right:23px;padding:13px;border:1px solid #ffffff0d;background:#09090d;border-radius:10px}.progress b{display:flex;justify-content:space-between;font-size:6px;color:#777}.progress b span{color:#63f2bd}.progress i{display:block;width:100%;height:5px;border-radius:99px;background:linear-gradient(90deg,#ff3e9d,#8d5cff,#63f2bd);margin:10px 0}.progress small{font-size:5px;color:#63f2bd}.how{max-width:none!important;width:100%!important;background:#0a0a0e;border-block:1px solid #ffffff08;padding-inline:max(20px,calc((100% - 1180px)/2))}.center{display:block;text-align:center}.center p{margin:8px auto}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.steps article>b{position:absolute;right:17px;color:#444;font-size:8px}.signal{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.signal>div>p{max-width:500px;color:#777;line-height:1.8}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags b{font-size:6px;letter-spacing:.7px;padding:7px 9px;border:1px solid #ffffff10;border-radius:7px;color:#888}.panel{padding:18px;border:1px solid #ffffff18;background:linear-gradient(145deg,#111117,#08080c);border-radius:18px;box-shadow:0 35px 90px #0008}.panel header{width:100%;height:auto;display:flex;border:0}.panel header b{font-size:8px}.panel header span{font-size:7px;color:#63f2bd}.panel>strong{display:block;font-size:60px;letter-spacing:-4px;margin-top:24px}.panel>strong small{font-size:8px;color:#666}.panel>p{font-size:6px;color:#666;display:flex;justify-content:space-between}.rainbow{height:5px;background:linear-gradient(90deg,#ff3e9d,#8d5cff,#63f2bd);border-radius:99px;margin:17px 0}.panel section{display:grid;grid-template-columns:1fr 1fr;gap:6px}.panel section div{font-size:5px;color:#555;padding:11px;border:1px solid #ffffff0b;border-radius:8px}.panel section b{display:block;color:#ddd;font-size:8px;margin-top:5px}.final{text-align:center;padding:120px 0;border-top:1px solid #ffffff08}.final h2{font-size:56px}.final p{color:#777;margin-bottom:28px}.final>a{display:inline-block}.final>small:last-child{display:block;color:#555;margin-top:16px}body>footer{height:105px;border-top:1px solid #ffffff0b;display:flex;align-items:center;justify-content:space-between;color:#555;font-size:7px}footer .brand img{width:115px}@media(max-width:850px){nav{display:none}.hero{grid-template-columns:1fr;padding:65px 0}.copy h1{font-size:55px}.mock{transform:none}.grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.signal{grid-template-columns:1fr;gap:45px}.head{display:block}.head p{margin-top:15px}.ticker{overflow:hidden;justify-content:flex-start;padding-left:20px;white-space:nowrap}}@media(max-width:560px){body>header,main>section,body>footer{width:min(100% - 28px,1180px)}body>header{height:68px}.brand img{width:115px}.join{font-size:7px;padding:9px}.hero{min-height:auto}.copy h1{font-size:45px;letter-spacing:-2px}.copy>p{font-size:12px}.buttons{flex-direction:column}.buttons a{width:100%;text-align:center}.grid{grid-template-columns:1fr}.grid .wide{grid-column:auto;grid-row:auto;min-height:430px}.steps{grid-template-columns:1fr}.section{padding-top:75px;padding-bottom:75px}.head h2,.signal h2{font-size:33px}.final h2{font-size:40px}.cards{grid-template-columns:1fr}.mock{padding:11px}body>footer{height:auto;padding:30px 0;flex-direction:column;gap:13px}}
/* ===== kir0Qual Motion Remaster ===== */
body{position:relative;background:
radial-gradient(circle at 50% -15%,rgba(255,62,157,.055),transparent 32%),
#07070a}
#scrollProgress{position:fixed;top:0;left:0;height:2px;width:0;z-index:99999;background:linear-gradient(90deg,#ff3e9d,#8d5cff,#63f2bd);box-shadow:0 0 16px rgba(255,62,157,.6);pointer-events:none}
#cursorGlow{position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:-1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,62,157,.085),rgba(141,92,255,.035) 38%,transparent 70%);filter:blur(8px);opacity:.9;transition:opacity .25s}
.grain{position:fixed;inset:0;z-index:99990;pointer-events:none;opacity:.018;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:
radial-gradient(circle at 10% 20%,rgba(255,255,255,.18) 0 1px,transparent 1.5px),
radial-gradient(circle at 40% 70%,rgba(255,255,255,.09) 0 1px,transparent 1.5px),
radial-gradient(circle at 78% 25%,rgba(255,255,255,.12) 0 1px,transparent 1.5px),
radial-gradient(circle at 90% 80%,rgba(255,255,255,.08) 0 1px,transparent 1.5px);
background-size:210px 210px,260px 260px,320px 320px,390px 390px;animation:starDrift 28s linear infinite}
@keyframes starDrift{to{background-position:120px 180px,-100px 140px,180px -120px,-160px -80px}}
.orb{animation:orbFloat 8s ease-in-out infinite alternate;will-change:transform}
.orb.b{animation-delay:-3s}
@keyframes orbFloat{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(45px,35px,0) scale(1.14)}}
body>header{position:sticky;top:0;z-index:1000;background:rgba(7,7,10,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.copy{animation:heroCopyIn .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.copy h1 em,.head em,.signal em,.final em,.mock h2 em{background-size:220% auto;animation:textShimmer 4.5s linear infinite}
@keyframes textShimmer{0%{background-position:0% center}100%{background-position:220% center}}
.live{position:relative;overflow:hidden}
.live:after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18),transparent 65%);transform:translateX(-70%);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%,65%{transform:translateX(-70%)}100%{transform:translateX(75%)}}
.mock{position:relative;transform-style:preserve-3d;transition:transform .16s ease-out,box-shadow .2s ease;will-change:transform}
.mock:before{content:"";position:absolute;inset:-1px;border-radius:20px;padding:1px;background:linear-gradient(120deg,rgba(255,62,157,.48),rgba(141,92,255,.22),rgba(99,242,189,.22),rgba(255,62,157,.48));background-size:300% 300%;animation:borderFlow 7s linear infinite;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes borderFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.mock:hover{box-shadow:0 55px 130px #000c,0 0 90px rgba(255,62,157,.13)}
.floatBadge{position:absolute;z-index:5;display:grid;grid-template-columns:26px 1fr;column-gap:7px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(14,14,20,.74);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.42);animation:badgeFloat 4.8s ease-in-out infinite}
.floatBadge span{grid-row:1/3;color:#ff67ae;font-size:13px}.floatBadge b{font-size:8px}.floatBadge small{font-size:5px;color:#6d6d78;letter-spacing:.7px}
.fb1{right:-35px;top:90px}.fb2{left:-35px;bottom:110px;animation-delay:-1.6s}.fb3{right:15px;bottom:-20px;animation-delay:-3s}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ticker{overflow:hidden!important;justify-content:flex-start!important;padding:0!important}
.tickerTrack{display:flex;align-items:center;gap:35px;width:max-content;white-space:nowrap;animation:tickerMove 26s linear infinite}
@keyframes tickerMove{to{transform:translateX(-50%)}}
.grid article,.steps article{transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.grid article:hover,.steps article:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.16);background:linear-gradient(145deg,#13131a,#0d0d12);box-shadow:0 22px 55px rgba(0,0,0,.28)}
.grid article>i,.steps article>i{transition:transform .25s ease,box-shadow .25s ease}
.grid article:hover>i,.steps article:hover>i{transform:scale(1.08) rotate(-4deg);box-shadow:0 0 24px rgba(255,62,157,.14)}
.progress i{background-size:200% 100%;animation:progressFlow 2.3s linear infinite}
@keyframes progressFlow{to{background-position:200% 0}}
.panel{position:relative;overflow:hidden;animation:signalFloat 5.5s ease-in-out infinite}
.panel:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-90px;top:-90px;background:rgba(141,92,255,.12);filter:blur(45px)}
@keyframes signalFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.rainbow{background-size:250% 100%;animation:rainbowMove 2.5s linear infinite}
@keyframes rainbowMove{to{background-position:250% 0}}
.primary,.ghost,.join{position:relative;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.primary:after,.join:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);transform:translateX(-120%);transition:transform .55s ease}
.primary:hover:after,.join:hover:after{transform:translateX(120%)}
.primary:hover,.join:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 18px 48px rgba(198,54,157,.27)}
.ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24);color:#fff}
.reveal-section{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal-section.visible{opacity:1;transform:none}
@media(max-width:850px){#cursorGlow{display:none}.floatBadge{display:none}.mock{transform:none!important}.stars{opacity:.55}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== V3 DESKTOP LAYOUT FIX ===== */

/* Prevent accidental horizontal overflow from animated/decorative elements */
html,body{overflow-x:hidden}
body{max-width:100vw}

/* Header: cleaner / larger / less empty */
body>header{
  width:min(1320px,calc(100% - 48px));
  height:72px;
}
body>header .brand img{
  width:160px;
  max-height:54px;
}
body>header nav{
  gap:38px;
}
body>header nav a{
  font-size:10px;
  letter-spacing:1.25px;
}

/* Minimal Discord CTA in nav — no chunky box */
.navDiscord{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 2px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#f5f5f8;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
  transition:color .2s ease,transform .2s ease;
  overflow:visible!important;
}
.navDiscord:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:1px;
  transform:scaleX(.28);
  transform-origin:left;
  background:linear-gradient(90deg,#ff3e9d,#8d5cff);
  opacity:.8;
  transition:transform .25s ease,opacity .25s ease;
}
.navDiscord:after{display:none!important}
.navDiscord:hover{
  color:#ff86c4;
  transform:translateY(-1px);
  box-shadow:none!important;
  filter:none!important;
}
.navDiscord:hover:before{
  transform:scaleX(1);
  opacity:1;
}

/* Hero: remove the giant empty vertical gap */
.hero{
  min-height:0!important;
  height:auto!important;
  padding-top:58px!important;
  padding-bottom:58px!important;
  align-items:center!important;
  gap:56px!important;
}
.copy h1{
  margin-top:18px!important;
  margin-bottom:20px!important;
}
.copy>p{
  margin-bottom:0!important;
}
.product,.mock{
  margin-bottom:0!important;
}

/* Keep product UI contained in viewport */
.product{
  min-width:0;
  max-width:100%;
}
.mock{
  width:100%;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

/* Remove old badge space/overflow */
.floatBadge,.fc1,.fc2,.fb1,.fb2,.fb3{
  display:none!important;
}

/* Ticker sits directly beneath hero */
.ticker{
  margin-top:0!important;
  height:54px!important;
  min-height:54px!important;
}

/* Pull first content section upward */
#features.section,
.section.reveal-section:first-of-type{
  padding-top:72px!important;
}
.section{
  padding-top:86px!important;
  padding-bottom:86px!important;
}

/* No excessive gap before heading inside sections */
.sectionHead,
.head{
  margin-top:0!important;
  margin-bottom:32px!important;
}

/* Fix animated ticker overflow cleanly */
.tickerTrack{
  max-width:none;
  will-change:transform;
}

/* More sensible wide-screen scaling */
@media (min-width:1400px){
  .wrap,
  main>section:not(.ticker):not(.how),
  body>footer{
    width:min(1320px,calc(100% - 64px));
  }
  .hero{
    grid-template-columns:.88fr 1.12fr;
  }
  .copy h1{
    font-size:76px;
  }
}

/* 1080p desktop: fill the screen better without shrinking content */
@media (min-width:901px) and (max-height:900px){
  .hero{
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  .copy h1{
    font-size:64px!important;
  }
  .mock{
    max-width:630px;
  }
  .section{
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
}

@media(max-width:900px){
  body>header{
    width:min(100% - 30px,1320px);
  }
  .hero{
    padding-top:48px!important;
    padding-bottom:48px!important;
  }
}

@media(max-width:600px){
  body>header{
    width:min(100% - 24px,1320px);
    height:64px;
  }
  body>header .brand img{
    width:126px;
  }
  .navDiscord{
    font-size:7px;
  }
  .hero{
    padding-top:40px!important;
    padding-bottom:40px!important;
  }
  .section{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
}