.security-page { background: #000; }
.security-page__hero { min-height: 100svh; }
.security-page__title { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: min(90%, 70rem); margin: 0; color: #fff; font-family: "Orbitron", sans-serif; font-size: clamp(2rem, 6vw, 5.5rem); font-weight: 500; line-height: 1.08; text-align: center; transform: translate(-50%, -50%); }
.security-page__training { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 8vw, 8rem); min-height: 100svh; box-sizing: border-box; padding: clamp(2rem, 8vw, 7rem); background: #1e1e1e; }
.security-page__training-copy { max-width: 34rem; color: #fff; }
.security-page__training-copy h2 { margin: 0 0 1rem; font-family: "Orbitron", sans-serif; font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 500; line-height: 1.1; }
.security-page__training-copy p { margin: 0; font-family: "Inter", sans-serif; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.security-page__discord-button { display: inline-flex; margin-top: 1.5rem; padding: .75rem 1.35rem; border-radius: 999px; background: #505DDF; color: #fff; font-family: "Inter", sans-serif; font-weight: 600; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease; }
.security-page__discord-button:hover { background: #414fc7; transform: translateY(-2px); }
.security-page__trainers { position: relative; display: flex; flex-direction: column; min-height: 100svh; box-sizing: border-box; padding: clamp(5rem, 10vw, 8rem) 1.5rem 2rem; background: #1e1e1e; text-align: center; }
.security-page__trainers h2 { margin: clamp(2rem, 5vh, 4rem) 0 0; color: #fff; font-family: "Orbitron", sans-serif; font-size: clamp(1.8rem, 4vw, 4rem); font-weight: 500; }
.security-page__trainer-rows { --trainer-row-height: clamp(5rem, 8vw, 7rem); display: grid; width: calc(100% + 3rem); gap: 4rem; margin: auto 0; margin-left: -1.5rem; overflow: hidden; }
.security-page__trainer-row { position: relative; height: var(--trainer-row-height); overflow: hidden; }
.security-page__trainer-image { position: absolute; top: 0; width: auto; height: var(--trainer-row-height); object-fit: contain; }
.security-page__trainer-image { cursor: pointer; }
.security-page__trainer-disclaimer { position: absolute; right: 1.5rem; bottom: 1.25rem; left: 1.5rem; margin: 0; color: rgb(255 255 255 / 0.65); font-family: "Inter", sans-serif; font-size: 0.85rem; text-align: center; }
.security-page__training-image { width: min(23rem, 28vw); margin-left: 0; }
.security-page__training-image .home-scroller__feature-image { transform: perspective(45rem) scale(0.97) rotate(-7deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }

@media (max-width: 40rem) {
  .security-page__training { flex-direction: column; justify-content: center; gap: 7rem; }
  .security-page__training-image { width: min(13rem, 58vw); margin: 0; }
}
.security-page__placeholder {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(5rem, 10vw, 8rem) 1.5rem 2rem;
  background: #1e1e1e;
  overflow: visible;
}

.security-page__placeholder h2 {
	position: absolute;
	top: clamp(10rem, 24vh, 16rem);
	right: 1.5rem;
	left: 1.5rem;
	margin: 0;
  color: #fff;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 500;
  text-align: center;
}

.security-page__placeholder .news-page__panel {
	position: absolute;
	top: 58%;
	right: 1.5rem;
	left: 1.3rem;
	width: auto;
	margin: 0;
	transform: translateY(-50%);
}

.security-page__placeholder-panel {
  position: absolute;
  right: 1.5rem;
  bottom: 8%;
  left: 1.3rem;
  width: auto;
  min-height: min(42vh, 24rem);
  border-radius: 1.5rem;
  background: #000;
}

.security-page__placeholder-panel::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  width: 0;
  height: 0;
  border-right: 1.25rem solid transparent;
  border-bottom: 1.25rem solid #000;
  border-left: 1.25rem solid transparent;
}

.security-page__placeholder-trainer {
  position: absolute;
  top: -6.25rem;
  left: 1.3rem;
  width: auto;
  height: 4rem;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  object-fit: cover;
  z-index: 2;
}

.security-page__faq {
  display: flex;
  height: auto;
  min-height: 100svh;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(4rem, 8vw, 7rem) 1.5rem clamp(6rem, 12vw, 10rem);
  background: #151515;
}

.security-page__faq-card {
  width: min(54rem, 100%);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 2rem;
  background: #0d0d0d;
  color: #fff;
}

.security-page__faq-card h2 {
  margin: 0 0 1.5rem;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500;
  text-align: center;
}

.security-page__faq-list details {
  border-top: 1px solid rgb(255 255 255 / 0.45);
  font-family: "Inter", sans-serif;
}

.security-page__faq-list details:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.45); }
.security-page__faq-list summary { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 0; cursor: pointer; font-size: clamp(1.05rem, 2vw, 1.35rem); list-style: none; }
.security-page__faq-list summary::-webkit-details-marker { display: none; }
.security-page__faq-list summary::after { content: "expand_more"; font-family: "Material Icons Round"; font-size: 1.6rem; transition: transform 180ms ease; }
.security-page__faq-list details[open] summary::after { transform: rotate(180deg); }
.security-page__faq-list p { margin: -0.25rem 0 1.2rem; color: rgb(255 255 255 / 0.75); }
.security-page__faq-desktop-only { display: none; }
.security-page__faq-list a,
.security-page__rules-link { color: #1880F7; }
.security-page__brand-hover { position: relative; }
.security-page__brand-hover .site-header__logo { transition: opacity 180ms ease; }
.security-page__logo-alt { position: absolute; inset: 0 auto auto 0; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.security-page__brand-hover.is-logo-hovered .site-header__logo { opacity: 0; }
.security-page__brand-hover.is-logo-hovered .security-page__logo-alt { opacity: 1; }
