@media (max-width: 700px) {
  html, body {
    scroll-behavior: auto !important;
    overscroll-behavior: contain !important;
  }
}
@media (max-width: 700px) {
  #discord-cards {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  #discord-cards>div[id^="card-"] {
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 700px) {
  #discord-cards {
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #discord-cards>div[id^="card-"] {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}

/* Always keep navbar burger icon white */
.navbar-burger span {
  background-color: #fff !important;
}
html { overflow-x: hidden; }
body { overflow-x: hidden; }

@media (max-width: 900px) {
  #discord-cards>div[id^="card-"] {
    flex-basis: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 700px) {
  .navbar-menu {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    top: 3.5rem !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box;
    border-radius: 0 0 12px 12px;
    z-index: 1001;
  }
  #discord-cards {
    width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #discord-cards>div[id^="card-"] {
    max-width: 98vw;
    min-width: 0;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Always keep navbar burger icon white */
.navbar-burger span { background-color: #fff !important; }

/* Add more spacing between scan your server feature text and image group */
.single-feature .scan-feature-img-group {
  margin-top: 3.5rem !important;
}
/* Prevent navbar from overlapping section titles when using anchor links */
section[id] {
  scroll-margin-top: 5.5rem;
}
/* Fix: Prevent white square on active/focused navbar tab */
.navbar-item.is-tab.is-active,
.navbar-item.is-tab:focus {
  background: none !important;
  box-shadow: none !important;
}
/* Navbar underline animation: from center to borders */
.navbar-item.is-tab {
  position: relative;
  overflow: hidden;
}

.navbar-item.is-tab::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0.3em;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: left 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1);
  border-radius: 1px;
}

.navbar-item.is-tab:hover::after,
.navbar-item.is-tab:focus::after,
.navbar-item.is-tab.is-active::after {
  left: 0;
  width: 100%;
}
/* Distinct style for external contact links */
.external-contact-link {
  color: #fff !important;
  background: #4158d4;
  border-radius: 5px;
  padding: 0.13em 0.7em 0.13em 0.55em;
  font-weight: 600;
  box-shadow: 0 2px 8px 0 rgba(65,88,212,0.10);
  display: inline-block;
  transition: background 0.18s, color 0.18s;
  text-decoration: none !important;
  margin-left: 0.18em;
}
.external-contact-link:hover {
  background: #234a8c;
  color: #bfc8e6 !important;
}
/* Custom strong and code styles for legal/policy paragraphs */
.privacy-content p strong,
.tos-list strong,
p.mb-6 strong,
p.mb-5 strong {
  color: #6ec1ff;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: none;
}

.privacy-content p code,
.tos-list code,
p.mb-6 code,
p.mb-5 code {
  color: #4158d4;
  background: #23224a;
  border-radius: 4px;
  padding: 0.13em 0.45em;
  font-size: 0.98em;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Major section title underline and centering */
.major-section-title {
  text-align: center !important;
  margin-top: 4.5rem !important;
  margin-bottom: 2.2rem !important;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  color: #4a7fff !important;
  /* A blue that matches the underline gradient */
  background: linear-gradient(90deg, #4158d4 60%, #234a8c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.major-section-title::after {
  content: '';
  display: block;
  margin: 0.5rem auto 0 auto;
  width: 60%;
  max-width: 180px;
  height: 3px;
  background: linear-gradient(90deg, #4158d4 60%, #234a8c 100%);
  border-radius: 2px;
}
/* Custom highlight styles for privacy/terms */
.tos-list strong, .privacy-content strong {
  color: #4158d4;
  font-weight: 700;
}
.tos-list code, .privacy-content code {
  color: #4158d4;
  background: #23224a;
  border-radius: 0.3em;
  padding: 0.1em 0.4em;
  font-size: 0.98em;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
}
/* Light blue dot for privacy lists */
.light-blue-dot li::before {
  background: #6ec1ff !important;
}
/* Custom ToS highlight styles */
.tos-list strong {
  color: #4158d4;
  font-weight: 700;
}
.tos-list code {
  color: #fff;
  background: #2836d1;
  border-radius: 0.3em;
  padding: 0.1em 0.4em;
  font-size: 0.98em;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
}
/* Blue circle bullet for ToS lists */
.tos-list {
  list-style: none;
  padding-left: 0;
}
.tos-list li {
  position: relative;
  padding-left: 1.5em;
}
.tos-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.7em;
  height: 0.7em;
  background: #4158d4;
  border-radius: 50%;
  display: inline-block;
}
#dashboard-button {
  min-width: 10.5rem;
  text-align: center;
}
/* Dashboard button animated red fill on hover */
#dashboard-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.4,0,0.2,1);
}
#dashboard-button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: #ff3b3b;
  z-index: 0;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
#dashboard-button:hover::before {
  width: 100%;
}
#dashboard-button:hover {
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(255,59,59,0.25), 0 1.5px 6px rgba(255,59,59,0.18);
}
#dashboard-button > * {
  position: relative;
  z-index: 1;
}
/* Dashboard button red hover with animation */
#dashboard-button {
  transition: background 0.7s cubic-bezier(0.4,0,0.2,1), color 0.6s cubic-bezier(0.4,0,0.2,1);
}
#dashboard-button:hover {
  background: #ff3b3b !important;
  color: #fff !important;
}

@media (max-width: 700px) {

  /* Ensure parent column is full width */
  .single-feature>.columns>.column[data-aos="fade-right"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    display: block !important;
  }

  .scan-feature-img-group {
    margin-left: 0 !important;
    position: relative !important;
    left: -10rem !important;

    /* Remove padding from parent column to allow full left movement */
    .single-feature>.columns>.column[data-aos="fade-right"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    margin-right: 0 !important;
    justify-content: flex-start !important;
    display: flex !important;
  }
}

@media (max-width: 700px) {
  .scan-feature-img-group {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}

/* Extra margin and centering for 'scan your server' feature image group */
.scan-feature-img-group {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-top: 2.5rem !important;
}

.scan-feature-img-group img {
  margin-top: 1.2rem !important;
}

/* On mobile, always stack feature image below text for all .single-feature rows */
@media (max-width: 700px) {
  .single-feature>.columns {
    display: flex !important;
    flex-direction: column !important;
  }

  .single-feature>.columns>.column[data-aos] {
    order: 2 !important;
  }

  .single-feature>.columns>.column:not([data-aos]) {
    order: 1 !important;
  }
}

/* On mobile, stack feature image below text for right-aligned features */
@media (max-width: 700px) {
  .single-feature .columns {
    flex-direction: column !important;
  }

  /* For right-aligned features, reverse the order so image is below text */
  .single-feature .columns[data-aos="fade-right"] {
    flex-direction: column-reverse !important;
  }
}

/* Hide splash SVG and background images on mobile */
@media (max-width: 700px) {

  /* Hide splash <img> backgrounds in features */
  .single-feature img[alt*="splash background"],
  .single-feature img[alt*="scan splash background"] {
    display: none !important;
  }

  /* Hide pseudo-element splashes */
  .feature-splash-bg::before,
  .feature-splash-bg-1::before,
  .feature-splash-bg-2::before,
  .feature-splash-bg-3::before {
    display: none !important;
  }
}

html {
  background-color: #1d1a46;
}

.feature-splash-bg-3 {
  min-height: 30rem;
  position: relative;
  z-index: 1;
}

/* Splash for ALT-1 feature */
.feature-splash-bg-3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 57.2rem;
  height: 57.2rem;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop stop-color="%231a1a1e" offset="0%"></stop><stop stop-color="%231a1a1e" offset="100%"></stop></linearGradient></defs><path fill="url(%23sw-gradient)" d="M25.3,-32.8C29.7,-26.5,28,-15.6,27.3,-6.7C26.6,2.2,27,9,25.2,17C23.5,25,19.6,34.1,13.1,37C6.5,39.9,-2.8,36.4,-10.1,31.9C-17.4,27.5,-22.9,21.9,-27.3,15.3C-31.8,8.6,-35.2,0.9,-34.5,-6.6C-33.9,-14.2,-29.1,-21.6,-22.6,-27.6C-16.2,-33.5,-8.1,-38.1,1.2,-39.5C10.5,-40.9,20.9,-39.2,25.3,-32.8Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition:0.3s;" stroke="url(%23sw-gradient)"/></svg>') no-repeat center/contain;
  pointer-events: none;
}

.feature-splash-bg-2 {
  position: relative;
}

/* Splash for VPN-2 feature */
.feature-splash-bg-2::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 57.2rem;
  height: 57.2rem;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop stop-color="%231a1a1e" offset="0%"></stop><stop stop-color="%231a1a1e" offset="100%"></stop></linearGradient></defs><path fill="url(%23sw-gradient)" d="M26.4,-28.3C33.9,-25.1,39.6,-16.5,40.3,-7.8C40.9,0.9,36.6,9.8,30.3,14.4C24,19.1,15.6,19.6,8.3,21.9C1,24.1,-5.3,28.1,-12.6,28.2C-19.9,28.3,-28.1,24.6,-33.3,18C-38.5,11.4,-40.7,1.9,-38.5,-6.2C-36.3,-14.3,-29.8,-21,-22.6,-24.2C-15.5,-27.5,-7.7,-27.3,0.8,-28.3C9.4,-29.3,18.8,-31.5,26.4,-28.3Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition:0.3s;" stroke="url(%23sw-gradient)"/></svg>') no-repeat center/contain;
  pointer-events: none;
}

/* Splash SVG background for feature images */
.feature-splash-bg {
  position: relative;
  z-index: 1;
}

.feature-splash-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44rem;
  height: 28rem;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: none;
  pointer-events: none;
}

.feature-splash-bg-1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 57.2rem;
  height: 57.2rem;
  transform: translate(-50%, -50%);
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"><stop stop-color="%231a1a1e" offset="0%"></stop><stop stop-color="%231a1a1e" offset="100%"></stop></linearGradient></defs><path fill="url(%23sw-gradient)" d="M17.7,-22.4C22,-17.6,23.7,-11,26.1,-3.7C28.5,3.7,31.6,11.9,29.3,18C27,24.1,19.4,28.1,11.8,29.6C4.3,31.1,-3.1,30.1,-10,27.6C-16.9,25.1,-23.2,21.1,-28.4,15C-33.6,8.9,-37.6,0.8,-35.5,-5.5C-33.5,-11.8,-25.4,-16.2,-18.4,-20.5C-11.5,-24.9,-5.8,-29.2,0.5,-29.8C6.7,-30.4,13.5,-27.3,17.7,-22.4Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition:0.3s;" stroke="url(%23sw-gradient)"/></svg>') no-repeat center/contain;
  pointer-events: none;
}

.feature-splash-bg img {
  position: relative;
  z-index: 1;
}

/* Hide splash backgrounds on mobile */
@media (max-width: 700px) {

  .feature-splash-bg::before,
  .feature-splash-bg-1::before,
  .feature-splash-bg-2::before,
  .feature-splash-bg-3::before {
    display: none !important;
  }
}

/* Premium Modal: add margin-top to boards for close button space on mobile */
@media (max-width: 700px) {
  #premium-modal>div>div {
    margin-top: 3.5rem !important;
  }
}

/* Premium Modal: force 1 board per row on mobile, stricter */
@media (max-width: 700px) {
  #premium-modal>div {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.2rem !important;
    padding-top: 2.5rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  #premium-modal>div>div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Premium Modal: force 1 board per row on mobile */
@media (max-width: 700px) {
  #premium-modal>div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.2rem !important;
    padding-top: 2.5rem !important;
  }

  #premium-modal>div>div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Premium Modal Responsive Fixes */
@media (max-width: 700px) {
  #premium-modal>div {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.2rem !important;
    padding-top: 1.5rem !important;
    /* Prevent title cut-off */
  }

  #premium-modal>div>div {
    min-width: 90vw !important;
    max-width: 98vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* --- Double Carousel Layout Styles --- */
#double-carousel-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
  margin-top: 5rem;
}

.carousel-outer {
  position: relative;
  width: 80vw;
  max-width: 1100px;
  overflow: hidden;
  margin: 0 auto;
}

/* Center hero-content */
#hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* --- Double Carousel Styles --- */
.carousel-outer {
  position: relative;
  width: 90vw;
  max-width: 1300px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
}

.carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, #191736 70%, transparent 100%);
}

.carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, #191736 70%, transparent 100%);
}

@media (max-width: 900px) {
  .carousel-outer {
    width: 98vw !important;
    max-width: 100vw !important;
  }

  .carousel-fade {
    width: 30px;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* --- Discord Cards Grid --- */
#discord-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

/* Badge alignment styles */
#discord-cards>div[id^="card-"] {
  flex: 1 1 calc(50% - 2rem);
  max-width: calc(50% - 2rem);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  #discord-cards>div[id^="card-"] {
    flex-basis: 100%;
    max-width: 100%;
  }
}

* {
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.blurple {
  color: #7289da;
}

.bg-base {
  background-color: #191736 !important;
}


#backtotop {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #191736;
  width: 56px;
  height: 56px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  overflow: visible;
}

#backtotop .backtotop-progress {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

#backtotop .backtotop-bg {
  stroke: #191736;
}

#backtotop .backtotop-bar {
  stroke: #2017c9;
  transition: stroke-dashoffset 0.2s linear;
}

#backtotop .backtotop-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

#backtotop i {
  margin: 0;
  position: relative;
  left: 0;
  top: 0;
}

#backtotop:hover {
  cursor: pointer;
  background-color: #333;
}

#backtotop:active {
  background-color: #555;
}

#backtotop.show {
  opacity: 0.4;
  visibility: visible;
}

.navbar-item,
.navbar-link {
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.navbar-item:hover {
  background-color: transparent !important;
  color: #7289da !important;
}

.navbar-link:hover {
  background-color: transparent !important;
  color: #7289da !important;
}

.navbar-menu {
  animation: navAnimOpen 0.2s ease-in-out;
}

@keyframes navAnimOpen {
  0% {
    display: none;
    opacity: 0;
    max-height: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    opacity: 1;
    max-height: 396px;
  }

  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

nav,
.navbar-menu {
  background-color: #191736 !important;
}

.navbar-item.nav-dark,
.navbar-link.nav-dark {
  color: #fff !important;
}

.navbar-item,
.navbar-link {
  color: white !important;
}

nav.nav-w {
  background: #1d1a46 !important;
  color: #fff !important;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.nav-w {
  background: #1d1a46 !important;
  color: #fff !important;
  box-shadow: 100px 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.mb-12 {
  margin-bottom: 6rem;
}

.mt-12 {
  margin-top: 6rem;
}

.ml-12 {
  margin-left: 6rem;
}

.mr-12 {
  margin-right: 6rem;
}

.img-col-ml-13 {
  margin-left: 13rem;
}

.img-col-mr-13 {
  margin-right: 13rem;
}

.has-image-centered {
  margin-left: auto;
  margin-right: auto;
}

.line {
  background: #00d1b2;
  background: #00d1b2;
  width: 150px;
  height: 5px;
}

.line2 {
  background: #00d1b2;
  background: #00d1b2;
  width: 75px;
  height: 5px;
}

.line-center {
  margin: 0 auto;
}

.line.blurple {
  background: #7289da;
}

.title.lined {
  margin-bottom: 0px;
}

.vert-move {
  -webkit-animation: mover 1s infinite alternate;
  animation: mover 1s infinite alternate;
}

.vert-move2 {
  -webkit-animation: mover 0.5s infinite alternate;
  animation: mover 0.5s infinite alternate;
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

.button.is-blurple {
  background-color: #2836d1;
  border-color: transparent;
  color: #fff;
}

.single-feature {
  position: relative;
  z-index: 5;
  margin-top: 100px;
}

.shape-right {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40%;
  height: 100%;
  z-index: -1;
  opacity: 30%;
}

.shape-right img {
  width: 100%;
}

@media (max-width: 767px) {
  .shape-right {
    display: none;
  }
}

.shape-left {
  position: absolute;
  top: -80px;
  left: 90px;
  width: 35%;
  height: 100%;
  z-index: -1;
  opacity: 30%;
}

.shape-left img {
  width: 100%;
}

@media (max-width: 767px) {
  .shape-left {
    display: none;
  }
}