*{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --bg:#050714;
  --text:#fff;
  --muted:#b8c4ff;
  --cyan:#00e7ff;
  --purple:#7c3cff;
  --pink:#ff4fd8;
  --line:rgba(255,255,255,.12);
}
body{
  margin:0;
  background:#02030a;
  color:var(--text);
  font-family:Tahoma, Arial, sans-serif;
}
a{text-decoration:none;color:inherit}
.page{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 20% 0%,rgba(124,60,255,.30),transparent 30%),
    radial-gradient(circle at 100% 24%,rgba(0,231,255,.18),transparent 28%),
    linear-gradient(180deg,#070a1f,#050714 52%,#07091b);
}
.glow{
  position:fixed;
  width:230px;
  height:230px;
  border-radius:50%;
  filter:blur(62px);
  opacity:.35;
  pointer-events:none;
  animation:float 8s ease-in-out infinite;
}
.glow-a{right:-75px;top:120px;background:var(--purple)}
.glow-b{left:-90px;bottom:120px;background:var(--cyan);animation-delay:2s}
@keyframes float{50%{transform:translateY(42px) scale(1.12)}}
.top{
  height:66px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(5,7,20,.76);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:3;
}
.brand{display:flex;align-items:center;gap:9px}
.brand span,.app-icon{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 30px rgba(124,60,255,.45);
  font-weight:900;
}
.brand span{width:40px;height:40px;border-radius:14px}
.brand b{font-size:21px}
.download-mini{
  border:0;
  color:#fff;
  font-family:inherit;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
}
.tabs{
  z-index:3;
  margin:10px 12px 0;
  padding:7px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  border-radius:23px;
  background:rgba(12,16,42,.82);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 45px rgba(0,0,0,.22);
}
.tab{
  height:40px;
  border:0;
  border-radius:17px;
  color:#dfe5ff;
  background:transparent;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
}
.tab.active{
  color:#001016;
  background:linear-gradient(135deg,var(--cyan),#8ff7ff);
  box-shadow:0 0 24px rgba(0,231,255,.25);
}
.content{
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  padding:18px 16px 12px;
  display:grid;
}
.panel{
  grid-area:1/1;
  opacity:0;
  pointer-events:none;
  transform:translateX(-22px) scale(.985);
  filter:blur(6px);
  transition:.36s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:calc(100svh - 190px);
}
.panel.active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  filter:blur(0);
}
.label{
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  color:var(--cyan);
  background:rgba(0,231,255,.09);
  border:1px solid rgba(0,231,255,.18);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
}
h1{
  margin:15px 0 10px;
  font-size:58px;
  line-height:.9;
  letter-spacing:-2px;
}
h1 small{
  display:block;
  margin-top:12px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.7px;
  background:linear-gradient(90deg,#fff,var(--cyan),#fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h2{
  margin:14px 0 10px;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-.8px;
}
.lead{
  margin:0;
  color:var(--muted);
  line-height:1.8;
  font-size:15px;
}
.phone-card{
  position:relative;
  width:100%;
  max-width:350px;
  margin:18px auto 0;
  padding:18px;
  min-height:330px;
  text-align:center;
  overflow:hidden;
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border:1px solid var(--line);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}
.light{
  position:absolute;
  inset:-45% -20% auto;
  height:240px;
  background:radial-gradient(circle,rgba(0,231,255,.28),transparent 60%);
  animation:screenGlow 5s ease-in-out infinite;
}
@keyframes screenGlow{50%{transform:translateY(25px);opacity:.5}}
.notch{
  width:90px;
  height:5px;
  border-radius:999px;
  margin:0 auto 27px;
  background:rgba(255,255,255,.25);
}
.app-icon{
  position:relative;
  z-index:1;
  width:86px;
  height:86px;
  border-radius:28px;
  margin:0 auto 15px;
  font-size:43px;
}
.phone-card h2{
  position:relative;
  z-index:1;
  margin:0 0 5px;
  font-size:31px;
}
.phone-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--muted);
}
.bars{
  position:relative;
  z-index:1;
  height:66px;
  display:flex;
  justify-content:center;
  align-items:end;
  gap:7px;
  margin:18px 0;
}
.bars i{
  width:10px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--cyan),var(--purple));
  animation:bars 1s ease-in-out infinite;
}
.bars i:nth-child(1){height:22px}
.bars i:nth-child(2){height:50px;animation-delay:.1s}
.bars i:nth-child(3){height:64px;animation-delay:.2s}
.bars i:nth-child(4){height:40px;animation-delay:.3s}
.bars i:nth-child(5){height:56px;animation-delay:.4s}
@keyframes bars{50%{transform:scaleY(.42);opacity:.58}}
.phone-card button{
  position:relative;
  z-index:1;
  width:100%;
  height:50px;
  border:0;
  border-radius:18px;
  color:#fff;
  font-family:inherit;
  font-weight:900;
  background:linear-gradient(135deg,var(--purple),var(--pink));
}
.cards{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.card,.motion-box,.download-box{
  border-radius:24px;
  padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  border:1px solid var(--line);
  box-shadow:0 20px 55px rgba(0,0,0,.23);
}
.card b{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:25px;
  background:rgba(0,231,255,.10);
  margin-bottom:11px;
}
.card h3{
  margin:0 0 6px;
  font-size:20px;
}
.card p,.motion-row span{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.motion-box{
  margin-top:20px;
  display:grid;
  gap:10px;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,79,216,.16),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
}
.motion-row{
  padding:14px;
  border-radius:17px;
  background:rgba(255,255,255,.065);
}
.motion-row strong{
  display:block;
  margin-bottom:5px;
}
.download-box{
  margin-top:22px;
  display:grid;
  gap:11px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 0%,rgba(0,231,255,.22),transparent 34%),
    linear-gradient(135deg,rgba(124,60,255,.35),rgba(255,79,216,.14));
}
.download-box a{
  min-height:52px;
  border-radius:17px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:rgba(255,255,255,.09);
  border:1px solid var(--line);
}
.download-box button{
  min-height:52px;
  border:1px solid var(--line);
  color:#fff;
  background:rgba(255,255,255,.08);
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
}
.download-box a span,
.download-box a small{
  display:block;
}
.download-box a small{
  margin-top:3px;
  opacity:.75;
  font-size:11px;
}
.release-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:18px;
  border:1px solid var(--line);
  background:var(--line);
}
.release-details div{
  min-width:0;
  padding:12px 8px;
  text-align:center;
  background:rgba(7,10,31,.94);
}
.release-details span,
.release-details strong{
  display:block;
}
.release-details span{
  color:var(--muted);
  font-size:10px;
}
.release-details strong{
  margin-top:4px;
  font-size:12px;
  overflow-wrap:anywhere;
}
.download-box a:first-child{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border:0;
}
footer{
  z-index:2;
  padding:12px 16px 18px;
  display:flex;
  justify-content:space-between;
  color:#aeb8ea;
  font-size:13px;
}
@media(max-height:760px){
  .panel{justify-content:flex-start;min-height:auto}
  .phone-card{min-height:300px}
  h1{font-size:52px}
}
@media(max-width:365px){
  .tab{font-size:11px}
  h1{font-size:50px}
  h2{font-size:28px}
  .phone-card{min-height:300px}
}
@media(min-width:700px){
  body{display:flex;justify-content:center}
  .page{
    width:430px;
    max-width:100%;
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 100px rgba(0,0,0,.45);
  }
}


/* BONO uploaded logo */
.brand-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 18px rgba(255,79,216,.38));
}
.hero-logo{
  position:relative;
  z-index:1;
  width:130px;
  height:130px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
  filter:drop-shadow(0 18px 34px rgba(255,79,216,.28));
}
@media(max-height:760px){
  .hero-logo{width:110px;height:110px}
}
@media(max-width:365px){
  .brand-logo{width:46px;height:46px}
  .hero-logo{width:108px;height:108px}
}