@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

html,
body {
  overflow-x: hidden;
}

:root {
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-highlight: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 24px 48px rgba(9, 6, 20, 0.45);
}

.gradient-bg {
  background: linear-gradient(-45deg, #7547cd, #9e68a6, #6311d5, #2c0c4d);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.site-wordmark-gradient {
  background: linear-gradient(90deg, #7547cd 0%, #9e68a6 33%, #6311d5 66%, #2c0c4d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

body.global-chat-page {
  --glass-bg: rgba(89, 126, 217, 0.08);
  --glass-bg-strong: rgba(89, 126, 217, 0.12);
  --glass-border: rgba(89, 126, 217, 0.24);
  --glass-highlight: rgba(89, 126, 217, 0.34);
  --glass-shadow: 0 24px 48px rgba(4, 10, 26, 0.45);
}

body.global-chat-page .gradient-bg {
  background: linear-gradient(-45deg, #597ed9, #7ea0ee, #335fcb, #1d3f8f);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

body.global-chat-page .site-wordmark-gradient {
  background: linear-gradient(90deg, #597ed9 0%, #7ea0ee 33%, #335fcb 66%, #1d3f8f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

body.global-chat-page .glow {
  box-shadow: 0 0 20px rgba(89, 126, 217, 0.3);
}

body.global-chat-page .feature-card:hover {
  box-shadow:
    0 28px 54px rgba(89, 126, 217, 0.2),
    0 0 0 1px rgba(126, 160, 238, 0.18) inset;
  border-color: rgba(126, 160, 238, 0.38);
}

.features-page {
  --feature-accent: #9e68a6;
  --feature-accent-soft: rgba(158, 104, 166, 0.16);
  --feature-accent-strong: rgba(158, 104, 166, 0.24);
}

.feature-intro {
  box-shadow: none;
  background: transparent;
  border: none;
}

.feature-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feature-intro::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: none;
  pointer-events: none;
}

.feature-heading-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.feature-heading-gradient-global-chat {
  background-image: linear-gradient(90deg, #c79ad0 0%, #9e68a6 45%, #7b47b6 100%);
}

.feature-heading-gradient-moderation {
  background-image: linear-gradient(90deg, #9cc0ff 0%, #597ed9 45%, #355fcb 100%);
}

.feature-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 0.95rem 1.3rem;
  border-radius: 1rem;
  font-weight: 700;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.feature-hero-button:hover {
  transform: translateY(-2px);
}

.feature-hero-button-primary {
  background: linear-gradient(180deg, rgba(89, 126, 217, 0.95), rgba(57, 94, 196, 0.95));
  color: white;
  box-shadow: 0 14px 30px rgba(57, 94, 196, 0.28);
}

.feature-hero-button-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-intro-global-chat {
  background: transparent;
}

.feature-intro-global-chat::before {
  background: linear-gradient(135deg, rgba(158, 104, 166, 0.14), rgba(158, 104, 166, 0.05));
}

.feature-intro-moderation {
  background: transparent;
}

.feature-intro-moderation::before {
  background: linear-gradient(135deg, rgba(89, 126, 217, 0.14), rgba(89, 126, 217, 0.05));
}

.features-page .feature-link {
  transition: none;
}

.features-page .feature-link:hover,
.features-page .feature-link.is-active {
  color: var(--feature-accent);
  background-color: var(--feature-accent-soft);
}

.feature-section-global-chat {
  --feature-accent: #9e68a6;
  --feature-accent-soft: rgba(158, 104, 166, 0.16);
  --feature-accent-strong: rgba(158, 104, 166, 0.24);
}

.feature-section-moderation {
  --feature-accent: #597ed9;
  --feature-accent-soft: rgba(89, 126, 217, 0.16);
  --feature-accent-strong: rgba(89, 126, 217, 0.24);
}

.feature-section-global-chat .section-accent {
  color: var(--feature-accent);
}

.feature-section-moderation .section-accent {
  color: var(--feature-accent);
}

.feature-section-global-chat .feature-card:hover {
  box-shadow: 0 28px 54px rgba(158, 104, 166, 0.2);
}

.feature-section-moderation .feature-card:hover {
  box-shadow:
    0 28px 54px rgba(89, 126, 217, 0.2),
    0 0 0 1px rgba(126, 160, 238, 0.18) inset;
  border-color: rgba(126, 160, 238, 0.38);
}

.feature-section-global-chat .section-banner {
  background: rgba(158, 104, 166, 0.18);
  color: #ecdaf5;
}

.feature-section-moderation .section-banner {
  background: rgba(89, 126, 217, 0.18);
  color: #dbe7ff;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.loader-content {
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.glow {
  box-shadow: 0 0 20px rgba(117, 71, 205, 0.3);
}

.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.command-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.command-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(117, 71, 205, 0.2);
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.arrow-icon.active {
  transform: rotate(180deg);
}

.nav-blur {
  background: linear-gradient(
    180deg,
    rgba(10, 8, 20, 0.62) 0%,
    rgba(10, 8, 20, 0.42) 100%
  );
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.feature-card {
  background: linear-gradient(
    160deg,
    var(--glass-bg-strong) 0%,
    rgba(255, 255, 255, 0.03) 55%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

main h1,
main h2,
main h3,
main h4 {
  line-height: 1.25;
}

main p,
main li {
  line-height: 1.65;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 32%,
    rgba(255, 255, 255, 0.01) 100%
  );
  pointer-events: none;
}

.feature-heading-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.2;
  padding-bottom: 0.08em;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow:
    0 28px 54px rgba(117, 71, 205, 0.2),
    0 0 0 1px rgba(148, 107, 255, 0.18) inset;
}

.feature-list-card {
  overflow: hidden;
}

.feature-list-card::before {
  display: none;
}

.feature-list-card:hover {
  transform: none;
  box-shadow: var(--glass-shadow);
  border-color: var(--glass-border);
}

.feature-list-card.feature-list-active-global-chat,
.feature-list-card.feature-list-hover-global-chat {
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px rgba(190, 151, 214, 0.18) inset;
  border-color: var(--glass-border);
}

.feature-list-card.feature-list-active-moderation,
.feature-list-card.feature-list-hover-moderation {
  box-shadow:
    var(--glass-shadow),
    0 0 0 1px rgba(126, 160, 238, 0.18) inset;
  border-color: rgba(126, 160, 238, 0.38);
}

.feature-list-card .feature-link {
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-list-card .feature-link:hover,
.feature-list-card .feature-link.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.command-card,
.testimonial-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 58%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 36px rgba(8, 6, 18, 0.4);
}

#replyNotice p {
  line-height: 1.5;
}

#replyNotice button {
  line-height: 1;
}

.pulse-on-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  opacity: 0;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
}

.shine-effect:hover::before {
  animation: shine 1.5s ease-in-out;
}

@keyframes shine {
  100% {
    transform: translateX(100%);
  }
}

.gradient-bg {
  background: linear-gradient(45deg, #7547cd, #9e68a6, #6311d5, #2c0c4d);
}

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:gap-8 {
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:justify-start {
    justify-content: flex-start;
  }
  .lg\:mt-0 {
    margin-top: 0;
  }
  .lg\:block {
    display: block;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.menu-icon {
  transition: d 0.2s ease-in-out;
}

#mobileMenu {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.low-perf .gradient-bg {
  animation: none;
  background-size: 100% 100%;
}

.low-perf .nav-blur,
.low-perf .feature-card,
.low-perf .command-card,
.low-perf .testimonial-card,
.low-perf #mobileMenu {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.low-perf .feature-card::before,
.low-perf .shine-effect::before,
.low-perf .pulse-on-hover::after {
  display: none;
}

.low-perf .feature-card,
.low-perf .command-card,
.low-perf .testimonial-card {
  box-shadow: 0 10px 24px rgba(8, 6, 18, 0.28);
}

.low-perf .feature-card:hover,
.low-perf .command-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(8, 6, 18, 0.28);
}

@media (pointer: coarse), (max-width: 900px) {
  .gradient-bg {
    animation: none;
    background-size: 100% 100%;
  }

  .nav-blur,
  .feature-card,
  .command-card,
  .testimonial-card,
  #mobileMenu {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .feature-card::before {
    display: none;
  }

  .feature-card,
  .command-card,
  .testimonial-card {
    box-shadow: 0 10px 24px rgba(8, 6, 18, 0.28);
  }

  .feature-card:hover,
  .command-card:hover {
    transform: none;
    box-shadow: 0 10px 24px rgba(8, 6, 18, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-bg,
  .floating,
  .loader-content,
  .animate-fade-in,
  .pulse-on-hover::after,
  .shine-effect:hover::before {
    animation: none !important;
  }

  .command-card,
  .feature-card,
  .arrow-icon,
  .menu-icon {
    transition: none !important;
  }
}