/* FazeDevs landing page: restrained depth, motion and product presentation. */
body {
  background: #08090e;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 62% at 50% 5%, #51298225, transparent 76%),
    radial-gradient(ellipse 48% 54% at 5% 67%, #45277018, transparent 74%),
    radial-gradient(ellipse 58% 60% at 97% 87%, #27245b21, transparent 75%),
    #08090e;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(#baa0f006 1px, transparent 1px),
    linear-gradient(90deg, #baa0f006 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(
    ellipse 80% 70% at 50% 28%,
    #000,
    transparent 78%
  );
}
.site-header {
  min-height: 78px;
  background: #090a10d9;
  border-bottom-color: #b092dd13;
  backdrop-filter: blur(20px);
}
.hero-new {
  position: relative;
  max-width: 1200px;
  padding: clamp(64px, 8vw, 112px) 24px 0;
  background: none;
}
.hero-new::before,
.hero-new::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(35px);
}
.hero-new::before {
  width: min(76vw, 850px);
  height: 430px;
  left: 50%;
  top: 60px;
  background: radial-gradient(ellipse, #7441ab26, transparent 68%);
  transform: translateX(-50%);
  animation: hero-aura 16s ease-in-out infinite alternate;
}
.hero-new::after {
  width: 200px;
  height: 200px;
  right: 8%;
  top: 28%;
  background: #6f39a512;
  animation: hero-orbit 18s ease-in-out infinite alternate;
}
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #b2a3c8;
  font-size: 0.72rem;
  font-weight: 550;
  letter-spacing: 0.065em;
  margin-bottom: 27px;
}
.hero-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b898f0;
  box-shadow: 0 0 16px #a581f180;
}
.hero-overline-divider {
  color: #635b70;
  margin-inline: 1px;
}
.hero-title {
  font-size: clamp(2.55rem, 5.6vw, 5.1rem);
  line-height: 1.08;
  letter-spacing: -0.052em;
  font-weight: 760;
}
.hero-title-fixed {
  display: block;
  color: #f2eff8;
}
.hero-title-rotator {
  display: block;
  min-height: 1.2em;
  padding: 0 0.05em 0.12em;
  color: #c3a7f4;
  background: linear-gradient(
    110deg,
    #f0e9fb 10%,
    #c8a9f9 42%,
    #a789dd 72%,
    #ebe3fa
  );
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-new .lead {
  margin-top: 23px;
  max-width: 650px;
  color: #a39dab;
  font-size: clamp(0.92rem, 1.35vw, 1.05rem);
  line-height: 1.85;
  white-space: pre-line;
}
.hero-new .hero-actions {
  gap: 12px;
  margin-top: 31px;
}
.hero-primary,
.hero-secondary {
  position: relative;
  min-height: 54px;
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 999px;
  padding: 14px 23px;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    background 0.25s;
}
.hero-primary {
  border: 1px solid #9671d579;
  color: #f6f0ff;
  background:
    radial-gradient(
      ellipse at var(--mx, 70%) var(--my, 50%),
      #8e56da66,
      transparent 72%
    ),
    linear-gradient(135deg, #302047, #191322);
  box-shadow:
    0 0 0 1px #a483e00b,
    inset 0 1px 0 #ddc6ff18,
    0 8px 35px #49287120;
}
.hero-primary::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 44%;
  top: 0;
  left: 5%;
  background: linear-gradient(90deg, transparent, #e1c9ff, transparent);
  opacity: 0.8;
  animation: button-orbit 5s ease-in-out infinite alternate;
}
.hero-primary:hover {
  transform: translateY(-2px);
  border-color: #b898f0a0;
  box-shadow:
    0 8px 30px #5d3b882d,
    inset 0 1px 0 #ddc6ff2b;
}
.hero-button-arrow {
  color: #cab3eb;
  font-size: 1.05rem;
  transition: transform 0.25s;
}
.hero-primary:hover .hero-button-arrow {
  transform: translate(2px, -2px);
}
.hero-secondary {
  border: 1px solid #a491bd25;
  background: #0c0c12a3;
  color: #bfb7ca;
}
.hero-secondary:hover {
  transform: translateY(-2px);
  background: #181220;
  border-color: #a491bd52;
  color: #eee7f9;
}
.hero-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}
.hero-tour-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #10101587;
  border: 1px solid #a594be23;
  border-radius: 999px;
  padding: 8px 13px 8px 9px;
  color: #b9b1c5;
  font-size: 0.72rem;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.hero-tour-button:hover {
  border-color: #a991ce60;
  color: #f4eefe;
}
.hero-play {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d5c2f520;
}
.hero-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #cfb9ee;
}
.hero-tour-time {
  padding-left: 9px;
  border-left: 1px solid #a594be25;
  color: #777080;
  font-size: 0.65rem;
}
.home-motion-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 8px 2px;
  color: #756c84;
  font-size: 0.65rem;
  transition: color 0.2s;
}
.home-motion-control:hover {
  color: #bca9d4;
}
.motion-pause {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 13px;
}
.motion-pause::before,
.motion-pause::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
}
.motion-pause::before {
  left: 3px;
}
.motion-pause::after {
  right: 3px;
}
[aria-pressed="false"].home-motion-control .motion-pause::before,
[aria-pressed="true"]#tour-pause .motion-pause::before {
  left: 3px;
  top: 3px;
  bottom: auto;
  width: 0;
  height: 0;
  background: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  border-radius: 0;
}
[aria-pressed="false"].home-motion-control .motion-pause::after,
[aria-pressed="true"]#tour-pause .motion-pause::after {
  display: none;
}
.hero-feature-chips {
  gap: 12px;
  margin: 36px auto 39px;
  flex-wrap: wrap;
}
.hero-feature-chips a {
  flex-direction: row;
  gap: 7px;
  padding: 5px 9px;
  color: #8c839b;
  font-size: 0.7rem;
  border-radius: 7px;
  transition:
    color 0.2s,
    background 0.2s;
}
.hero-feature-chips a > span {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: inherit;
}
.hero-feature-chips a:hover {
  color: #d4c6e6;
  background: #a78bfa09;
}
.hero-feature-chips img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.home-showcase {
  position: relative;
  width: min(1120px, calc(100% - 64px));
  border: 1px solid #9e80c82f;
  border-radius: 16px;
  margin-bottom: 76px;
  background: #101017ec;
  box-shadow:
    0 24px 90px #0005,
    0 0 85px #6739960e;
}
.home-showcase::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    circle 340px at var(--spot-x, 50%) var(--spot-y, 0%),
    #b286e209,
    transparent 75%
  );
  transition: opacity 0.3s;
}
.home-showcase:hover::before {
  opacity: 1;
}
.showcase-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 55px;
  padding: 11px 20px;
  border-bottom: 1px solid #81729920;
  background: #0b0b11d9;
  color: #a797bb;
  font-size: 0.7rem;
}
.showcase-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9cee8;
  font-weight: 600;
}
.showcase-brand img {
  object-fit: contain;
}
.showcase-address {
  color: #665d77;
  font-weight: 400;
}
.showcase-demo-label {
  font-size: 0.62rem;
  color: #7e748e;
  letter-spacing: 0.025em;
}
.showcase-chrome a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ad95cd;
}
.showcase-chrome a:hover {
  color: #dbbaff;
}
.showcase-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}
.showcase-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #8072931d;
  padding: 22px 14px;
  background: #111018bb;
}
.showcase-server {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px 18px;
  border-bottom: 1px solid #7967891c;
}
.showcase-server img {
  object-fit: contain;
  padding: 3px;
  border-radius: 10px;
  background: #a888d512;
}
.showcase-server b {
  font-size: 0.75rem;
  color: #dcd4e6;
}
.showcase-server small {
  display: block;
  margin-top: 3px;
  color: #756b84;
  font-size: 0.62rem;
}
.showcase-nav-label {
  margin: 22px 9px 10px;
  color: #6d627e;
  letter-spacing: 0.08em;
  font-size: 0.56rem;
  font-weight: 600;
}
.showcase-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.showcase-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  padding: 9px 8px;
  text-align: left;
  color: #8e839e;
  font-size: 0.73rem;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.showcase-tabs button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.showcase-tabs button:hover {
  color: #d4c5e8;
  background: #7e58a310;
}
.showcase-tabs button[aria-selected="true"] {
  border-color: #ae85e337;
  background: #9767ca14;
  color: #d8c3f1;
}
.showcase-chevron {
  margin-left: auto;
  color: #8865b8;
  font-size: 0.9rem;
  opacity: 0;
}
.showcase-tabs button[aria-selected="true"] .showcase-chevron {
  opacity: 1;
}
.showcase-all-modules {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 22px 7px 2px;
  color: #9d8cb8;
  font-size: 0.62rem;
}
.showcase-main {
  padding: 27px 30px 22px;
  min-width: 0;
}
.showcase-eyebrow {
  color: #a489c7;
  letter-spacing: 0.09em;
  font-size: 0.55rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.showcase-heading h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.035em;
  color: #eee7f8;
}
.showcase-heading > p:last-child {
  margin-top: 8px;
  color: #8d849b;
  font-size: 0.76rem;
}
.showcase-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 17px;
  margin-top: 23px;
}
.showcase-config {
  border: 1px solid #9c86b520;
  border-radius: 11px;
  background: #14121c;
}
.showcase-card-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 13px;
  border-bottom: 1px solid #8f7ba81a;
  font-size: 0.67rem;
  color: #bfb1d1;
}
.showcase-card-label img {
  object-fit: contain;
}
.showcase-enabled {
  margin-left: auto;
  padding: 3px 5px;
  color: #a3c3b5;
  background: #71938a12;
  border-radius: 4px;
  font-size: 0.52rem;
}
.showcase-field {
  padding: 12px 13px 0;
}
.showcase-field > span {
  display: block;
  margin-bottom: 6px;
  color: #82758f;
  font-size: 0.57rem;
}
.showcase-field > strong {
  display: block;
  padding: 8px 9px;
  font-size: 0.65rem;
  color: #b0a2c6;
  font-weight: 500;
  border: 1px solid #9380ad23;
  border-radius: 6px;
  background: #0c0b1287;
}
.showcase-config-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px 13px;
  font-size: 0.55rem;
  color: #877796;
}
.showcase-config-footer img {
  object-fit: contain;
}
.showcase-discord {
  border: 1px solid #6e5c8b24;
  border-radius: 11px;
  overflow: hidden;
  background: #25242d;
}
.showcase-discord-channel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 13px;
  border-bottom: 1px solid #17161d66;
  font-size: 0.6rem;
  color: #9a96a6;
  background: #22212a;
}
.showcase-discord-channel > span:first-child {
  color: #77707f;
  font-size: 0.95rem;
}
.showcase-discord-channel > span:last-child {
  margin-left: auto;
  font-size: 0.53rem;
  color: #7c7589;
}
.showcase-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 15px 13px 19px;
}
.showcase-bot-avatar {
  flex-shrink: 0;
  object-fit: contain;
  margin-top: 2px;
}
.showcase-message-content {
  min-width: 0;
  flex: 1;
}
.showcase-bot-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #eee9f4;
  font-size: 0.67rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.showcase-bot-name > span {
  border-radius: 3px;
  background: #7160bf;
  padding: 1px 4px;
  font-size: 0.4rem;
  color: #faf8ff;
}
.showcase-message-container {
  border: 1px solid #b19ac925;
  border-left: 3px solid #a285d0;
  border-radius: 7px;
  background: #2c2a35;
  padding: 13px 12px 11px;
}
.showcase-message-container h3 {
  color: #eee9f6;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
}
.showcase-message-container p {
  margin: 9px 0 14px;
  color: #b4adbf;
  font-size: 0.65rem;
  line-height: 1.85;
  white-space: pre-line;
}
.showcase-message-container p img {
  display: inline;
  vertical-align: text-bottom;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  object-fit: contain;
}
.showcase-message-footer {
  border-top: 1px solid #9990a327;
  padding-top: 9px;
  color: #797080;
  font-size: 0.45rem;
}
.showcase-message-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid #b8a1d726;
  border-radius: 5px;
  background: #746099;
  color: #f1e9fd;
  font-size: 0.62rem;
}
.showcase-message-action img {
  object-fit: contain;
}
.showcase-caption {
  margin-top: 19px;
  color: #665b76;
  font-size: 0.57rem;
}
.section {
  border-top-color: #9781b419;
}
.feature-grid > a,
.home-server-card,
.plan-card {
  background: linear-gradient(130deg, #17121d9e, #111018e6);
  border-color: #a993c520;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s;
}
.feature-grid > a:hover,
.home-server-card:hover,
.plan-card:hover {
  transform: translateY(-3px);
  border-color: #b093d34d;
  box-shadow: 0 12px 26px #0003;
}
.final-cta {
  position: relative;
  border-radius: 22px;
  margin-top: 25px;
  margin-bottom: 55px;
  background: radial-gradient(ellipse at 50% 0, #7c42bc18, transparent 65%);
  border: 1px solid #9b79c425;
}
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.faze-tour {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #ece5f7;
  background: #08080df5;
  overflow: auto;
}
.faze-tour::backdrop {
  background: #050509dc;
  backdrop-filter: blur(12px);
}
.faze-tour[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: tour-enter 0.35s ease both;
}
.tour-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 70% at 50% 47%,
    #53258332,
    transparent 76%
  );
}
.tour-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px;
  z-index: 1;
}
.tour-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.tour-brand img {
  object-fit: contain;
}
.tour-brand span {
  margin-left: 8px;
  color: #7b6d8b;
  font-size: 0.72rem;
}
.tour-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}
.tour-tools button {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid #a487c22a;
  border-radius: 50%;
  background: #12101896;
  color: #bba7d4;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.tour-tools button:hover {
  background: #8b5caf19;
  border-color: #b992e84d;
}
.tour-tools img {
  object-fit: contain;
}
.tour-content {
  position: relative;
  width: min(900px, calc(100% - 48px));
  margin: auto;
  padding: 25px 0;
  text-align: center;
  z-index: 1;
}
.tour-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: #a687ce;
  margin-bottom: 20px;
}
.tour-content h2 {
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  max-width: 780px;
  margin: auto;
}
.tour-content > p:not(.tour-eyebrow) {
  max-width: 590px;
  margin: 19px auto 0;
  color: #9a8daa;
  font-size: 0.9rem;
  line-height: 1.85;
}
.tour-visual {
  width: min(530px, 100%);
  margin: 32px auto 0;
  min-height: 165px;
}
.tour-server-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(335px, 100%);
  margin: auto;
  padding: 18px 20px;
  border: 1px solid #b08cda43;
  border-radius: 14px;
  background: linear-gradient(135deg, #281b38b8, #121018);
  text-align: left;
  box-shadow: 0 15px 50px #0003;
}
.tour-server-card img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}
.tour-server-card strong {
  display: block;
  font-size: 0.9rem;
}
.tour-server-card small {
  display: block;
  margin-top: 5px;
  color: #967faa;
  font-size: 0.7rem;
}
.tour-server-card > span:last-child {
  margin-left: auto;
  color: #b891e3;
  font-size: 1.3rem;
}
.tour-module-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tour-module-list > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #a384c736;
  border-radius: 13px;
  background: #181120a6;
  padding: 24px 9px;
  font-size: 0.73rem;
  color: #ccbbe0;
}
.tour-module-list img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.tour-module-list span {
  font-size: 0.6rem;
  color: #82718f;
}
.tour-message {
  width: min(395px, 100%);
  border: 1px solid #a184c640;
  border-left: 3px solid #ad83e3;
  border-radius: 12px;
  text-align: left;
  padding: 22px;
  margin: auto;
  background: #211829cf;
}
.tour-message-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
}
.tour-message-title img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.tour-message > p {
  font-size: 0.78rem;
  line-height: 1.8;
  margin-top: 13px;
  color: #b09abe;
}
.tour-message > small {
  display: block;
  font-size: 0.57rem;
  border-top: 1px solid #a285ba2b;
  margin-top: 18px;
  padding-top: 10px;
  color: #73607f;
}
.tour-erlc {
  width: min(385px, 100%);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid #a889d035;
  background: #181221c4;
  text-align: left;
}
.tour-erlc img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}
.tour-erlc b {
  color: #d4bee8;
}
.tour-erlc span {
  display: block;
  margin-top: 7px;
  color: #8b759c;
  font-size: 0.73rem;
}
.tour-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  padding: 24px 20px 32px;
}
.tour-footer > button {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid #a487c22b;
  border-radius: 50%;
  background: #12101780;
  color: #a98abf;
}
.tour-footer > button:hover {
  border-color: #bd95e951;
  color: #e4cdf6;
}
.tour-dots {
  display: flex;
  gap: 11px;
}
.tour-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #55415f;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.tour-dots button[aria-current="step"] {
  background: #d1a0fa;
  box-shadow: 0 0 12px #b076dd4d;
}
.tour-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #33203e6e;
  z-index: 2;
}
.tour-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8455ba, #d6a8ff);
}
.home-motion-off .hero-new::before,
.home-motion-off .hero-new::after,
.home-motion-off .hero-primary::before {
  animation-play-state: paused;
}
.home-motion-off [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
@keyframes hero-aura {
  from {
    opacity: 0.65;
    transform: translateX(-51%) translateY(-10px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(-48%) translateY(14px) scale(1.05);
  }
}
@keyframes hero-orbit {
  from {
    transform: translate(-10px, -15px);
  }
  to {
    transform: translate(18px, 22px);
  }
}
@keyframes button-orbit {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(110%);
  }
}
@keyframes tour-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 900px) {
  .showcase-layout {
    grid-template-columns: 165px minmax(0, 1fr);
  }
  .showcase-main {
    padding: 24px 20px;
  }
  .showcase-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .showcase-config {
    display: none;
  }
  .showcase-heading h2 {
    font-size: 1.3rem;
  }
  .showcase-discord {
    max-width: 420px;
  }
  .hero-title {
    font-size: clamp(2.65rem, 7.6vw, 4.6rem);
  }
  .showcase-demo-label {
    display: none;
  }
}
@media (max-width: 600px) {
  .site-header {
    min-height: 70px;
  }
  .hero-new {
    padding: 54px 20px 0;
  }
  .hero-title {
    font-size: clamp(2.3rem, 9vw, 3.5rem);
  }
  .hero-title-rotator {
    min-height: 2.25em;
    max-width: 460px;
    margin: auto;
  }
  .hero-overline {
    font-size: 0.62rem;
    margin-bottom: 22px;
  }
  .hero-new .lead {
    margin-top: 8px;
    font-size: 0.87rem;
  }
  .hero-new .hero-actions {
    gap: 9px;
    margin-top: 25px;
  }
  .hero-primary,
  .hero-secondary {
    min-width: 155px;
    min-height: 49px;
    padding: 12px 18px;
    font-size: 0.8rem;
  }
  .hero-feature-chips {
    gap: 5px;
    margin-top: 28px;
    margin-bottom: 26px;
  }
  .hero-feature-chips a {
    padding: 5px;
    font-size: 0.62rem;
  }
  .hero-feature-chips img {
    width: 19px;
    height: 19px;
  }
  .home-showcase {
    width: calc(100% - 30px);
    margin-bottom: 45px;
    border-radius: 12px;
  }
  .showcase-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .showcase-sidebar {
    padding: 13px;
    border-right: 0;
    border-bottom: 1px solid #8f79b11c;
  }
  .showcase-server,
  .showcase-nav-label,
  .showcase-all-modules {
    display: none;
  }
  .showcase-tabs {
    flex-direction: row;
    gap: 5px;
  }
  .showcase-tabs button {
    flex: 1;
    justify-content: center;
    padding: 7px 4px;
    font-size: 0.6rem;
    gap: 5px;
  }
  .showcase-tabs button img {
    width: 19px;
    height: 19px;
  }
  .showcase-chevron {
    display: none;
  }
  .showcase-chrome {
    padding: 10px 13px;
    font-size: 0.58rem;
    min-height: 48px;
  }
  .showcase-brand img {
    width: 22px;
    height: 22px;
  }
  .showcase-main {
    padding: 20px 16px;
  }
  .showcase-heading h2 {
    font-size: 1.4rem;
  }
  .showcase-heading > p:last-child {
    font-size: 0.72rem;
  }
  .showcase-workspace {
    margin-top: 17px;
  }
  .showcase-discord {
    max-width: none;
  }
  .showcase-caption {
    font-size: 0.55rem;
  }
  .tour-header {
    padding: 17px 18px;
  }
  .tour-content {
    width: calc(100% - 36px);
    padding: 16px 0;
  }
  .tour-content h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
  .tour-content > p:not(.tour-eyebrow) {
    font-size: 0.82rem;
  }
  .tour-eyebrow {
    font-size: 0.58rem;
    margin-bottom: 15px;
  }
  .tour-visual {
    margin-top: 25px;
  }
  .tour-module-list > div {
    padding: 20px 7px;
    font-size: 0.65rem;
  }
  .tour-module-list span {
    font-size: 0.55rem;
  }
  .tour-module-list img {
    width: 32px;
    height: 32px;
  }
  .tour-footer {
    padding-bottom: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-new::before,
  .hero-new::after,
  .hero-primary::before,
  .faze-tour[open] {
    animation: none;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-primary,
  .hero-secondary,
  .feature-grid > a,
  .home-server-card,
  .plan-card {
    transition: none;
  }
  .tour-progress i {
    transition: none;
  }
}

.hero-new .hero-title-fixed {
  color: #f2eff8;
}

/* Keep the compact product presentation readable and the mobile header complete. */
.showcase-field > span {
  font-size: 0.68rem;
  color: #a095af;
}
.showcase-field > strong {
  font-size: 0.76rem;
}
.showcase-config-footer {
  font-size: 0.65rem;
  color: #a294b4;
}
.showcase-message-container p {
  font-size: 0.75rem;
  color: #c1b8ce;
}
.showcase-message-footer {
  font-size: 0.6rem;
  color: #a298ae;
}
.showcase-caption {
  font-size: 0.66rem;
  color: #9689a8;
}
.hero-feature-chips img,
.showcase-tabs img,
.showcase-message-action img,
.tour-visual img[src*="faze-emojis"],
.showcase-config img {
  mix-blend-mode: screen;
}
@media (max-width: 480px) {
  .site-header {
    padding-inline: 12px;
    gap: 8px;
  }
  .header-actions {
    gap: 8px;
    margin-left: auto;
  }
  .brand {
    font-size: 1.03rem;
    gap: 5px;
  }
  .brand img {
    width: 29px;
    height: 29px;
  }
  .discord-account {
    width: 31px;
    gap: 0;
  }
  .discord-account .account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .header-actions .text-button {
    font-size: 0.68rem;
  }
  .language-switch {
    gap: 0;
    padding: 3px;
  }
  .language-switch button {
    min-width: 27px;
    padding: 7px 5px;
  }
  .hero-new .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-primary,
  .hero-secondary {
    min-width: 0;
    padding-inline: 12px;
    font-size: 0.74rem;
    gap: 6px;
  }
  .hero-feature-chips {
    justify-content: center;
  }
  .hero-feature-chips a {
    font-size: 0.66rem;
  }
  .showcase-tabs button {
    font-size: 0.68rem;
  }
  .showcase-caption {
    font-size: 0.62rem;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-title {
    font-size: clamp(2.6rem, 6.4vw, 3.7rem);
  }
}

.home-showcase .discord-container{max-width:none;padding:14px;font-size:12px}.home-showcase .discord-markdown h2,.home-showcase .discord-markdown h3{font-size:15px}.home-showcase .discord-select{font-size:12px}.home-showcase .discord-subtext{font-size:10px}

@media(min-width:851px) and (max-width:1100px){.site-header .nav>a[href="/owner/"]{display:none}}