:root{

  --bg:#07090d;

  --panel:#101318;

  --panel-2:#14181e;

  --border:rgba(255,255,255,.085);

  --text:#f5f7f8;

  --muted:#858d94;

  --green:#72ec68;

  --green-dark:#0f2915;

  --purple:#8c72ff;

  --youtube:#ff0033;

  --discord:#5865f2;

}


*{
  box-sizing:border-box;
}


html{
  background:#050609;
}


body{

  margin:0;

  min-height:100vh;

  color:var(--text);

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(75,220,88,.09),
      transparent 24rem
    ),
    var(--bg);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    Arial,
    sans-serif;

  -webkit-font-smoothing:antialiased;

}


a{
  color:inherit;
  text-decoration:none;
}


img{
  display:block;
}


.page-shell{

  width:100%;

  max-width:560px;

  min-height:100vh;

  margin:0 auto;

  padding:
    env(safe-area-inset-top)
    16px
    calc(30px + env(safe-area-inset-bottom));

}


/* TOP */

.topbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  height:58px;

  margin-bottom:15px;

}


.brand{

  color:#fff;

  font-size:23px;

  font-weight:900;

  letter-spacing:-1px;

}


.brand span{
  color:var(--green);
}


.home-link{

  padding:8px 11px;

  color:#89928c;

  font-size:11px;

  font-weight:750;

  border:1px solid var(--border);

  border-radius:10px;

  background:rgba(255,255,255,.025);

}



/* HERO */

.hero{

  padding:25px 12px 31px;

  text-align:center;

}


.hero-logo-wrap{

  position:relative;

  width:90px;

  height:90px;

  margin:0 auto 16px;

}


.hero-logo{

  width:90px;

  height:90px;

  object-fit:cover;

  border-radius:23px;

  box-shadow:
    0 15px 45px rgba(0,0,0,.38),
    0 0 35px rgba(93,225,88,.10);

}


.online-dot{

  position:absolute;

  right:-1px;

  bottom:6px;

  width:15px;

  height:15px;

  border:3px solid var(--bg);

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 13px rgba(114,236,104,.7);

}


.return-badge{

  display:inline-flex;

  margin-bottom:10px;

  padding:5px 9px;

  border:1px solid rgba(114,236,104,.18);

  border-radius:999px;

  color:#9cf894;

  background:rgba(114,236,104,.07);

  font-size:8px;

  font-weight:950;

  letter-spacing:1.1px;

}


.hero h1{

  margin:0;

  font-size:35px;

  line-height:1;

  letter-spacing:-1.7px;

  font-weight:900;

}


.hero h1 span{
  color:var(--green);
}


.hero-copy{

  max-width:380px;

  margin:13px auto 0;

  color:#90979d;

  font-size:13px;

  line-height:1.55;

}


.hero-copy strong{
  color:#d8dcdf;
}


.hero-tags{

  display:flex;

  justify-content:center;

  gap:6px;

  margin-top:16px;

}


.hero-tags span{

  padding:6px 9px;

  color:#89918c;

  background:rgba(255,255,255,.035);

  border:1px solid rgba(255,255,255,.06);

  border-radius:999px;

  font-size:9px;

  font-weight:750;

}


.hero-tags .green-tag{

  color:#8ff486;

  background:rgba(114,236,104,.06);

  border-color:rgba(114,236,104,.13);

}



/* SECTION */

.install-section,
.versions-section,
.community{

  margin-bottom:24px;

  padding:18px;

  border:1px solid var(--border);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 15px 45px rgba(0,0,0,.15);

}


.section-eyebrow{

  margin-bottom:5px;

  color:#778079;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.1px;

}


.install-section h2,
.versions-section h2{

  margin:0 0 15px;

  font-size:20px;

  letter-spacing:-.5px;

}



/* DNS */

.dns-card{

  display:flex;

  align-items:center;

  gap:11px;

  min-height:75px;

  padding:11px;

  border:1px solid rgba(114,236,104,.18);

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(114,236,104,.08),
      rgba(255,255,255,.018)
    );

}


.dns-card img{

  flex:0 0 52px;

  width:52px;

  height:52px;

  object-fit:cover;

  border-radius:14px;

}


.app-info{

  min-width:0;

  flex:1;

}


.required-label{

  display:block;

  margin-bottom:3px;

  color:#83ed79;

  font-size:7px;

  font-weight:950;

  letter-spacing:.75px;

}


.app-info strong{

  display:block;

  font-size:14px;

}


.app-info small{

  display:block;

  margin-top:3px;

  color:#778079;

  font-size:9px;

}


.chevron{

  padding-right:5px;

  color:#78e86e;

  font-size:24px;

}



/* STEP */

.step-line{

  display:flex;

  align-items:center;

  gap:8px;

  margin-top:10px;

  color:#7c847f;

  font-size:9px;

  font-weight:650;

}


.step-line span{

  display:grid;

  place-items:center;

  width:19px;

  height:19px;

  color:#9ceb94;

  background:rgba(114,236,104,.07);

  border:1px solid rgba(114,236,104,.12);

  border-radius:50%;

  font-size:8px;

  font-weight:900;

}



/* DIRECT */

.direct-button{

  display:flex;

  align-items:center;

  gap:10px;

  width:100%;

  min-height:67px;

  margin-top:14px;

  padding:10px 14px;

  color:#071008;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #84f778,
      #55cf62
    );

  box-shadow:
    0 12px 28px rgba(78,205,83,.16);

}


.direct-button img{

  width:43px;

  height:43px;

  object-fit:cover;

  border-radius:11px;

}


.direct-button > span:nth-child(2){

  min-width:0;

  flex:1;

  text-align:left;

}


.direct-button strong{

  display:block;

  font-size:14px;

  font-weight:900;

}


.direct-button small{

  display:block;

  margin-top:3px;

  color:rgba(4,20,7,.62);

  font-size:9px;

  font-weight:750;

}


.button-arrow{

  font-size:20px;

  font-weight:900;

}


.direct-note{

  margin:12px 2px 0;

  color:#747d77;

  font-size:9px;

  line-height:1.55;

}


.direct-note strong{
  color:#a3e99d;
}



/* IPA */

.version-divider{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:16px;

  color:#677069;

  font-size:8px;

  font-weight:900;

  letter-spacing:1px;

}


.version-divider::before,
.version-divider::after{

  content:"";

  flex:1;

  height:1px;

  background:
    rgba(255,255,255,.06);

}


.section-description{

  margin:-7px 0 15px;

  color:#747d83;

  font-size:10px;

}



/* VERSION CARD */

.version-card{

  margin-top:10px;

  padding:13px;

  border:1px solid rgba(255,255,255,.075);

  border-radius:17px;

  background:
    rgba(255,255,255,.022);

}


.version-top{

  display:flex;

  align-items:center;

  gap:12px;

}


.version-top img{

  flex:0 0 57px;

  width:57px;

  height:57px;

  object-fit:cover;

  border-radius:14px;

}


.version-info{

  min-width:0;

  flex:1;

}


.version-badges{

  display:flex;

  gap:5px;

  margin-bottom:4px;

}


.badge{

  padding:3px 6px;

  color:#7d8580;

  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.06);

  border-radius:999px;

  font-size:7px;

  font-weight:900;

}


.badge.green{

  color:#85ee7b;

  border-color:
    rgba(114,236,104,.13);

  background:
    rgba(114,236,104,.055);

}


.badge.purple{

  color:#ab99ff;

  border-color:
    rgba(140,114,255,.18);

  background:
    rgba(140,114,255,.07);

}


.version-info h3{

  margin:0;

  font-size:15px;

  letter-spacing:-.2px;

}


.version-info p{

  margin:3px 0 0;

  color:#747d83;

  font-size:9px;

}


.version-description{

  margin:12px 1px;

  color:#81898f;

  font-size:10px;

  line-height:1.5;

}


.version-download{

  display:flex;

  align-items:center;

  justify-content:space-between;

  min-height:43px;

  padding:0 13px;

  color:#dce0dd;

  border:1px solid rgba(114,236,104,.14);

  border-radius:12px;

  background:
    rgba(114,236,104,.055);

  font-size:10px;

  font-weight:850;

}


.amethyst-card{

  border-color:
    rgba(140,114,255,.12);

}


.amethyst-download{

  border-color:
    rgba(140,114,255,.18);

  background:
    rgba(140,114,255,.07);

}



/* SOCIAL */

.community{

  padding:18px;

}


.social-row{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

}


.social-button{

  display:flex;

  align-items:center;

  gap:8px;

  min-width:0;

  min-height:54px;

  padding:8px;

  border-radius:14px;

}


.social-logo{

  display:grid;

  place-items:center;

  flex:0 0 34px;

  width:34px;

  height:34px;

  border-radius:9px;

}


.social-logo svg{

  width:18px;

  height:18px;

  fill:#fff;

}


.youtube{

  border:
    1px solid
    rgba(255,0,51,.15);

  background:
    rgba(255,0,51,.055);

}


.youtube .social-logo{
  background:var(--youtube);
}


.discord{

  border:
    1px solid
    rgba(88,101,242,.17);

  background:
    rgba(88,101,242,.065);

}


.discord .social-logo{
  background:var(--discord);
}


.social-button strong{

  display:block;

  font-size:10px;

}


.social-button small{

  display:block;

  margin-top:2px;

  color:#767f79;

  font-size:7.5px;

}



/* FOOTER */

footer{

  padding:13px 12px 18px;

  text-align:center;

  color:#5f6862;

}


footer strong{

  color:#858e88;

  font-size:11px;

}


footer p{

  margin:6px auto 0;

  max-width:390px;

  font-size:8px;

  line-height:1.55;

}


.disclaimer{

  opacity:.68;

}



/* TAP */

a{

  -webkit-tap-highlight-color:
    transparent;

}


.dns-card:active,
.direct-button:active,
.version-download:active,
.social-button:active{

  transform:
    scale(.985);

}



/* SMALL IPHONE */

@media(max-width:360px){

  .page-shell{
    padding-left:11px;
    padding-right:11px;
  }


  .hero h1{
    font-size:31px;
  }


  .install-section,
  .versions-section,
  .community{
    padding:14px;
    border-radius:18px;
  }


  .social-button{
    padding:7px;
  }


  .social-logo{

    flex-basis:30px;

    width:30px;

    height:30px;

  }


  .social-logo svg{

    width:16px;

    height:16px;

  }


  .social-button small{
    display:none;
  }

}



/* LARGER MOBILE / TABLET */

@media(min-width:600px){

  .page-shell{
    padding-left:20px;
    padding-right:20px;
  }


  .hero{
    padding-top:36px;
  }


  .hero h1{
    font-size:42px;
  }

}