:root {

  --bg: #07070d;

  --panel: #11101a;

  --panel2: #181622;

  --text: #f8fafc;

  --muted: #94a3b8;

  --purple: #a855f7;

  --pink: #ec4899;

  --cyan: #22d3ee;

  --rose: #f43f5e;

  --border: #252238;

  --mono: 'JetBrains Mono', monospace;

  --display: 'Space Grotesk', sans-serif;

  --sans: 'Inter', sans-serif;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  color: var(--text);

  font-family: var(--sans);

  overflow-x: hidden;

  background: 

    linear-gradient(180deg, rgba(7, 7, 13, 0.4), rgba(7, 7, 13, 0.85)), 

    url('1783951102866.jpg') center/cover no-repeat fixed;

}



button {

  font: inherit;

  color: inherit;

  border: 0;

}



button, a {

  cursor: pointer;

}



.container {

  width: min(1180px, calc(100% - 40px));

  margin: auto;

}



.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(7, 7, 13, 0.82);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid #211b35;

}



.nav-wrap {

  height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}



.brand {

  background: none;

  display: flex;

  align-items: center;

  gap: 10px;

  text-align: left;

  padding: 0;

}



.brand-img-wrap {

  position: relative;

}



.brand img {

  width: 42px;

  height: 42px;

  object-fit: cover;

  border-radius: 12px;

  border: 1px solid #a855f766;

}



.brand-img-wrap i {

  position: absolute;

  right: -4px;

  bottom: -4px;

  background: #d946ef;

  border: 2px solid #07070d;

  border-radius: 50%;

  font-style: normal;

  font-size: 9px;

  width: 15px;

  height: 15px;

  text-align: center;

}



.brand strong {

  display: block;

  font: 900 20px var(--display);

  letter-spacing: 2px;

  background: linear-gradient(90deg, #a78bfa, #e879f9, #f472b6);

  -webkit-background-clip: text;

  color: transparent;

}



.brand small {

  display: block;

  color: #a78bfa;

  font: 700 9px var(--mono);

  letter-spacing: 2px;

  text-transform: uppercase;

}



.desktop-nav {

  display: flex;

  gap: 22px;

}



.desktop-nav button {

  background: none;

  color: #cbd5e1;

  font-size: 13px;

  font-weight: 700;

}



.desktop-nav button:hover {

  color: #e879f9;

}



.online {

  font: 700 10px var(--mono);

  color: #34d399;

  background: #071510;

  border: 1px solid #10b98144;

  padding: 9px 13px;

  border-radius: 999px;

  white-space: nowrap;

}



.online b {

  display: inline-block;

  width: 7px;

  height: 7px;

  background: #10b981;

  border-radius: 50%;

  box-shadow: 0 0 12px #10b981;

  animation: pulse 1.5s infinite;

}



.hero {

  position: relative;

  min-height: 690px;

  padding: 100px 0 95px;

  overflow: hidden;

}



.hero-shade {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(7, 7, 13, 0.18), rgba(7, 7, 13, 0.66) 55%, #07070d 100%);

}



.hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1.35fr 0.75fr;

  gap: 65px;

  align-items: center;

}



.hero-copy {

  text-align: left;

}



.pill {

  display: inline-flex;

  align-items: center;

  padding: 7px 13px;

  border-radius: 999px;

  font: 800 10px var(--mono);

  letter-spacing: 1.2px;

}



.pill.purple {

  background: #a855f714;

  color: #d8b4fe;

  border: 1px solid #a855f74d;

}



.hero h1 {

  font: 900 clamp(48px, 6vw, 76px) / 1.02 var(--display);

  letter-spacing: -2px;

  margin: 20px 0;

}



.hero h1 span {

  background: linear-gradient(90deg, #a78bfa, #e879f9, #f472b6);

  -webkit-background-clip: text;

  color: transparent;

}



.hero-copy > p {

  max-width: 690px;

  color: #cbd5e1;

  font-size: 15px;

  line-height: 1.8;

}



.ip-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin: 25px 0 16px;

  max-width: 700px;

}



.ip-card {

  position: relative;

  background: rgba(9, 9, 16, 0.84);

  padding: 15px 45px 15px 16px;

  border-radius: 16px;

  text-align: left;

  border: 2px solid #a855f744;

}



.ip-card.pink-border {

  border-color: #ec489944;

}



.ip-card small {

  display: block;

  font: 800 8px var(--mono);

  color: #c084fc;

  letter-spacing: 1px;

}



.ip-card.pink-border small {

  color: #f0abfc;

}



.ip-card strong {

  display: block;

  font: 800 13px var(--mono);

  margin-top: 6px;

  white-space: nowrap;

}



.ip-card em {

  position: absolute;

  right: 14px;

  top: 50%;

  transform: translateY(-50%);

  font-style: normal;

  color: #c084fc;

  font-size: 20px;

}



.primary {

  background: linear-gradient(90deg, #8b5cf6, #d946ef, #ec4899);

  font-weight: 800;

  border-radius: 14px;

  padding: 14px 22px;

  box-shadow: 0 10px 35px #d946ef26;

}



.primary.big {

  width: 100%;

  max-width: 350px;

}



.primary span {

  margin-left: 8px;

}



.specs {

  display: flex;

  gap: 25px;

  flex-wrap: wrap;

  margin-top: 20px;

  color: #94a3b8;

  font: 10px var(--mono);

}



.glass {

  background: rgba(15, 14, 22, 0.72);

  backdrop-filter: blur(18px);

  border: 1px solid #a855f733;

}



.mascot-card {

  border-radius: 26px;

  padding: 18px;

  box-shadow: 0 25px 80px #0008;

}



.mascot-card img {

  width: 100%;

  height: 350px;

  object-fit: cover;

  border-radius: 18px;

  border: 1px solid #273044;

}



.mascot-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 15px;

}



.mascot-meta h3 {

  margin: 0;

  font: 700 20px var(--display);

}



.mascot-meta span {

  font: 800 8px var(--mono);

  color: #f0abfc;

  background: #d946ef14;

  border: 1px solid #d946ef4d;

  padding: 6px 9px;

  border-radius: 999px;

}



.mascot-card p {

  color: #cbd5e1;

  font-size: 11px;

  line-height: 1.7;

}



.section {

  padding: 75px 0;

  border-top: 1px solid #151521;

}



.section-head {

  text-align: center;

  max-width: 700px;

  margin: 0 auto 45px;

}



.section-head h2 {

  font: 900 40px var(--display);

  margin: 12px 0 8px;

}



.section-head p {

  color: #94a3b8;

  font-size: 13px;

}



.bento {

  display: grid;

  grid-template-columns: 7fr 5fr;

  gap: 18px;

}



.mode-card, .mode-small {

  background: rgba(16, 16, 26, 0.8);

  border: 1px solid #252238;

  border-radius: 24px;

  padding: 25px;

  transition: 0.25s;

}



.mode-card:hover, .mode-small:hover {

  transform: translateY(-3px);

  border-color: #a855f766;

}



.mode-card {

  min-height: 350px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.survival {

  background: linear-gradient(135deg, rgba(43, 18, 76, 0.6), rgba(11, 11, 18, 0.8));

}



.sky {

  background: linear-gradient(135deg, rgba(23, 37, 84, 0.6), rgba(11, 11, 18, 0.8));

}



.card-title {

  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 27px;

}



.card-title h3 {

  font: 800 19px var(--display);

  margin: 0;

}



.card-title span, .mode-small h4 span {

  font: 800 8px var(--mono);

  background: #a855f71c;

  color: #c4b5fd;

  border: 1px solid #a855f744;

  padding: 5px 7px;

  border-radius: 5px;

}



.mode-card p, .mode-small p {

  color: #cbd5e1;

  font-size: 12px;

  line-height: 1.8;

}



.mode-card ul {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin: 20px 0 0;

  padding: 0;

  list-style: none;

  color: #94a3b8;

  font: 10px var(--mono);

}



.mode-small {

  display: flex;

  align-items: center;

  gap: 15px;

  font-size: 35px;

}



.mode-small h4 {

  font: 800 15px var(--display);

  margin: 0;

}



.mode-small h4 span {

  color: #94a3b8;

  background: #1e293b;

  border-color: #334155;

  margin-left: 6px;

}



.mode-small p {

  margin-bottom: 0;

  color: #94a3b8;

  font-size: 11px;

}



.whitelist-card {

  max-width: 800px;

  margin: 0 auto;

  padding: 40px;

  border-radius: 24px;

}



.whitelist-form .form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;

  text-align: left;

}



.form-group label {

  font: 800 11px var(--mono);

  color: #cbd5e1;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.form-group input, .form-group select {

  background: rgba(9, 9, 16, 0.85);

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

  color: var(--text);

  padding: 14px 16px;

  border-radius: 12px;

  font-family: var(--sans);

  font-size: 14px;

  outline: none;

  transition: 0.2s;

}



.form-group input:focus, .form-group select:focus {

  border-color: var(--purple);

  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);

}



.form-group select option {

  background: #090910;

  color: #f8fafc;

}



.btn {

  background: #1a1725;

  border: 1px solid #312a45;

  border-radius: 10px;

  padding: 10px 13px;

  font: 800 10px var(--mono);

}



.discord-card {

  max-width: 900px;

  margin: auto;

  background: linear-gradient(135deg, rgba(24, 22, 34, 0.85), rgba(10, 9, 16, 0.85));

  border: 2px solid #5865f233;

  border-radius: 25px;

  padding: 40px;

}



.discord-grid {

  display: grid;

  grid-template-columns: 1.4fr 0.9fr;

  gap: 35px;

  align-items: center;

}



.discord-card h2 {

  font: 900 40px var(--display);

  margin: 15px 0;

}



.discord-card h2 span {

  color: #5865f2;

}



.discord-card p, .benefits {

  color: #cbd5e1;

  font-size: 12px;

  line-height: 1.8;

}



.benefits {

  list-style: none;

  padding: 0;

}



.discord-status {

  background: rgba(16, 14, 22, 0.9);

  border: 1px solid #252238;

  border-radius: 18px;

  padding: 18px;

}



.discord-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.discord-logo {

  width: 42px;

  height: 42px;

  background: #5865f2;

  border-radius: 12px;

  display: grid;

  place-items: center;

  font-weight: 900;

}



.toast {

  position: fixed;

  top: 90px;

  left: 50%;

  transform: translate(-50%, -20px);

  opacity: 0;

  pointer-events: none;

  z-index: 100;

  background: #090812;

  border: 1px solid #a855f777;

  padding: 12px 18px;

  border-radius: 12px;

  font: 700 11px var(--mono);

  transition: 0.25s;

}



.toast.show {

  opacity: 1;

  transform: translate(-50%, 0);

}



footer {

  text-align: center;

  border-top: 1px solid #151521;

  padding: 45px 20px;

  color: #64748b;

  font-size: 11px;

}



footer p {

  max-width: 550px;

  margin: 15px auto;

  line-height: 1.7;

}



.footer-brand {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

}



.footer-brand img {

  width: 32px;

  height: 32px;

  object-fit: cover;

  border-radius: 8px;

}



.footer-brand b {

  font: 900 14px var(--display);

  color: #fff;

  letter-spacing: 1.5px;

}



.footer-credit {

  color: #a78bfa;

  font: 10px var(--mono);

}



.footer-credit strong {

  color: #fb7185;

}



.footer-credit span {

  margin: 0 8px;

  color: #334155;

}



@keyframes pulse {

  50% { opacity: 0.35; }

}



@media (max-width: 1000px) {

  .desktop-nav { display: none; }

  .hero-grid { grid-template-columns: 1fr; }

  .mascot-card { max-width: 480px; margin: auto; }

  .bento, .discord-grid { grid-template-columns: 1fr; }

}



@media (max-width: 620px) {

  .container { width: min(100% - 24px, 1180px); }

  .nav-wrap { height: 65px; }

  .online { font-size: 8px; padding: 7px 9px; }

  .brand strong { font-size: 16px; }

  .hero { padding: 70px 0; }

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

  .ip-grid { grid-template-columns: 1fr; }

  .mode-card ul { grid-template-columns: 1fr; }

  .whitelist-card { padding: 25px; }

  .whitelist-form .form-grid { grid-template-columns: 1fr; }

  .discord-card { padding: 25px; }

  .discord-card h2 { font-size: 32px; }

  .section { padding: 55px 0; }

}



/* Fix mobile form layout */

@media (max-width: 768px) {

  .form-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 15px !important;

  }



  .form-group {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

  }



  /* Restore custom dark styling on mobile inputs */

  .form-group input,

  .form-group select {

    width: 100% !important;

    box-sizing: border-box !important;

    background-color: rgba(15, 15, 20, 0.8) !important; /* adjust to match dark theme */

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    border-radius: 8px !important;

    padding: 12px 16px !important;

    font-size: 14px !important;

    outline: none !important;

    -webkit-appearance: none; /* removes default iOS/Android native input styling */

    -moz-appearance: none;

    appearance: none;

  }



  .form-group label {

    margin-bottom: 6px !important;

    text-align: left !important;

  }

}