:root {
  --font-heading: "Barlow Condensed", "Segoe UI", sans-serif;
  --scene-bg: #2a2018;
  --surface-strong: linear-gradient(135deg, rgba(15, 12, 20, 0.97) 0%, rgba(20, 15, 20, 0.95) 30%, rgba(25, 21, 20, 0.93) 65%, rgba(32, 27, 26, 0.91) 100%);
  --surface-modal: linear-gradient(135deg, rgba(15, 12, 20, 0.98) 0%, rgba(20, 15, 20, 0.96) 50%, rgba(32, 27, 26, 0.94) 100%);
  --surface-header: linear-gradient(135deg, rgba(10, 8, 14, 0.95) 0%, rgba(16, 12, 18, 0.92) 100%);
  --surface-slot: rgba(8, 7, 12, 0.55);
  --surface-slot-active: linear-gradient(135deg, rgba(123, 108, 85, 0.18) 0%, rgba(15, 12, 20, 0.88) 100%);
  --surface-slot-hover: linear-gradient(135deg, rgba(123, 108, 85, 0.24) 0%, rgba(15, 12, 20, 0.9) 100%);
  --border-primary: #7b6c55;
  --border-secondary: #4a3e30;
  --border-subtle: #3a3020;
  --text-title: #cec8e0;
  --text-header: #c8c0d8;
  --text-body: #807888;
  --text-label: #605868;
  --text-muted: #908898;
  --text-inactive: #504858;
  --text-locked: #4a3e30;
  --accent-gold: #c89030;
  --accent-gold-soft: rgba(22, 18, 10, 0.8);
  --accent-gold-glow: rgba(200, 144, 48, 0.35);
  --accent-blue: #5a88b8;
  --accent-blue-border: #3a6090;
  --accent-blue-bg: rgba(10, 14, 22, 0.9);
  --accent-purple: #8860c0;
  --accent-purple-border: #58388a;
  --accent-purple-bg: rgba(18, 14, 26, 0.9);
  --accent: var(--accent-gold);
  --muted: var(--text-muted);
  --accent-35: rgba(123, 108, 85, 0.18);
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  --modal-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
  --radius-panel: 8px;
  --radius-card: 6px;
  --radius-badge: 5px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(136, 96, 192, 0.08) 0%, transparent 32%),
    radial-gradient(circle at 20% 20%, rgba(200, 144, 48, 0.08) 0%, transparent 24%),
    linear-gradient(180deg, #120f14 0%, #171117 46%, #211a19 100%);
  color: var(--text-body);
  font-family: var(--font-heading);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(42, 32, 24, 0.18), transparent 45%);
  opacity: 1;
  pointer-events: none;
  z-index: -2;
}

body::after {
  content: none;
}

.site-wallpaper {
  position: absolute;
  top: 100vh;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: -3;
  overflow: hidden;
}

.site-wallpaper__layer {
  position: absolute;
  left: 50%;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0.16;
  transform: translateX(-50%);
  filter: saturate(0.88) brightness(0.5);
}

.site-wallpaper__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 9, 14, 0.96) 0%, rgba(12, 9, 14, 0.58) 22%, rgba(12, 9, 14, 0.4) 50%, rgba(12, 9, 14, 0.58) 78%, rgba(12, 9, 14, 0.96) 100%);
}

.site-wallpaper__layer--1,
.site-wallpaper__layer--2,
.site-wallpaper__layer--3,
.site-wallpaper__layer--4 {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 18%, #000 38%, #000 62%, rgba(0, 0, 0, 0.9) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 18%, #000 38%, #000 62%, rgba(0, 0, 0, 0.9) 82%, transparent 100%);
}

.site-wallpaper__layer--1 {
  top: 6rem;
  height: 76rem;
  background-image: url("assets/1.jpg");
}

.site-wallpaper__layer--2 {
  top: 50rem;
  height: 78rem;
  background-image: url("assets/2.jpg");
}

.site-wallpaper__layer--3 {
  top: 96rem;
  height: 78rem;
  background-image: url("assets/3.jpg");
}

.site-wallpaper__layer--4 {
  top: 142rem;
  height: 76rem;
  background-image: url("assets/4.jpg");
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 7, 12, 0.45);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--border-primary), #9a8c72);
  border-radius: 999px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary) rgba(8, 7, 12, 0.45);
}

.page-glyphs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.decor-glyph {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 12px rgba(200, 144, 48, 0.12));
  mix-blend-mode: screen;
  animation: glyph-float 11s ease-in-out infinite;
}

.decor-glyph::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(123, 108, 85, 0.16);
  border-radius: 18%;
  opacity: 0.24;
}

.decor-glyph--skull {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 0.034668C7.58171 0.0346494 3.99997 3.61637 3.99997 8.03467V11.1676C3.4725 11.2483 2.80957 11.4137 2.17083 11.7568C1.08501 12.3401 0.50669 13.3461 0.233669 14.274C-0.0362926 15.1914 -0.0467 16.1531 0.113639 16.8458C0.118576 16.8671 0.124212 16.8883 0.130538 16.9092C0.218209 17.1997 0.354168 17.4516 0.529981 17.6665C0.403319 17.8344 0.330281 18.004 0.289019 18.1107C0.193097 18.3589 0.134008 18.6372 0.0963214 18.9034C0.019985 19.4427 0.0101057 20.0899 0.0599281 20.7115C0.109221 21.3265 0.222428 21.9868 0.429691 22.5314C0.532653 22.802 0.678474 23.097 0.892953 23.346C1.11234 23.6006 1.45661 23.8639 1.93303 23.9095C4.23932 24.1307 5.4901 23.767 6.37946 23.0827C6.65738 22.8689 6.92378 22.5927 7.099 22.4111C7.15333 22.3548 7.19889 22.3075 7.23331 22.2741C7.41386 22.0985 7.5401 22.0118 7.71766 21.9583L7.71848 21.958L11.9945 20.6636L15.7347 21.8385L15.7461 21.842C15.8997 21.8883 16.1091 21.9976 16.4573 22.214C16.5334 22.2613 16.6161 22.3137 16.7045 22.3697C16.9809 22.5448 17.3112 22.7541 17.6633 22.9496C18.634 23.4884 19.8954 23.9999 21.5872 23.9999C22.5574 23.9999 23.1504 23.3076 23.4545 22.7074C23.7665 22.0916 23.9174 21.3329 23.9575 20.6153C23.9982 19.8892 23.9306 19.1154 23.7354 18.4403C23.6616 18.1849 23.5589 17.9075 23.4155 17.6421C24.0268 16.8215 24.0539 15.7398 23.8913 14.8992C23.6653 13.7309 23.0074 12.5018 22.2171 11.861C21.5427 11.3142 20.6057 11.1603 20 11.1074V8.03467C20 3.6164 16.4183 0.0346866 12 0.034668ZM5.07993 13.0901L5.09652 13.0906C5.11981 13.092 5.1432 13.0927 5.16663 13.0927C5.67074 13.0927 5.99996 13.4718 5.99996 13.8436V14.6496C5.99996 15.0944 6.29378 15.4857 6.72093 15.6099L8.52353 16.1336L6.48292 16.7515C5.2744 16.5242 4.05304 16.5428 3.03394 16.6916C2.58867 16.6355 2.33176 16.5563 2.188 16.4802C2.09581 16.4315 2.06934 16.3975 2.05409 16.358C1.98354 16.0142 1.97995 15.4244 2.15233 14.8385C2.32797 14.2416 2.64696 13.7713 3.11731 13.5187C3.55209 13.2851 4.04812 13.1722 4.46185 13.1229C4.66381 13.0988 4.83426 13.0912 4.95099 13.0895C5.00906 13.0887 5.053 13.0894 5.07993 13.0901ZM14.9059 16.3199L12.2848 17.0844L6.82116 18.7388C6.65783 18.7882 6.48455 18.7951 6.31783 18.7586C5.25172 18.5256 4.12357 18.5411 3.21081 18.6878C2.75081 18.7618 2.37932 18.8636 2.11626 18.9644C2.10306 19.0216 2.08923 19.0943 2.07658 19.1837C2.02497 19.5484 2.01289 20.0445 2.05353 20.5517C2.09471 21.0654 2.1844 21.5192 2.29891 21.8201C2.31664 21.8667 2.33361 21.906 2.34924 21.9385C4.20552 22.0865 4.83662 21.7463 5.15988 21.4976C5.31575 21.3777 5.41118 21.278 5.54345 21.1399C5.62213 21.0577 5.71384 20.9619 5.83905 20.8402C6.13969 20.5479 6.53666 20.2256 7.13986 20.0435L11.7102 18.6601C11.7259 18.6553 11.7416 18.651 11.7574 18.647L18.4002 16.986C18.5496 16.9487 18.7056 16.9463 18.856 16.9792C19.642 17.1507 20.753 17.0449 21.5612 16.6422C21.8688 16.4889 22.0891 16.1131 21.9277 15.279C21.7684 14.4556 21.2995 13.6918 20.9574 13.4145C20.7755 13.267 20.3573 13.1439 19.8017 13.0977C19.5548 13.0772 19.3277 13.0752 19.1621 13.0786C19.0799 13.0803 19.0147 13.0833 18.9718 13.0857L18.9435 13.0874C18.907 13.0909 18.8702 13.0927 18.8333 13.0927C18.3292 13.0927 18 13.4718 18 13.8436V14.6017V14.6496C18 15.0915 17.7099 15.481 17.2866 15.6076L14.9126 16.3179L14.9059 16.3199ZM15 13V14.2042L16 13.905V13.8436C16 12.577 16.8628 11.5559 18 11.2148V8.03467C18 4.72097 15.3137 2.03468 12 2.03467C8.68627 2.03465 5.99997 4.72095 5.99997 8.03467V11.2148C7.13715 11.5559 7.99996 12.577 7.99996 13.8436V13.8988L8.99997 14.1894V13C8.99997 12.4477 9.44768 12 9.99997 12C10.5523 12 11 12.4477 11 13V14.3599H12H13V13C13 12.4477 13.4477 12 14 12C14.5523 12 15 12.4477 15 13ZM11 9.00003C11 10.1046 9.10583 11 8.00199 11C6.98775 11 6.99365 10.2441 7.00129 9.26451C7.00196 9.17792 7.00265 9.08966 7.00265 9.00003C7.00265 7.89546 7.89749 7.00003 9.00133 7.00003C10.1052 7.00003 11 7.89546 11 9.00003ZM16.9974 9.00003C16.9974 9.08969 16.998 9.17797 16.9987 9.26451C17.0064 10.2441 17.0123 11 15.998 11C14.8942 11 13 10.1046 13 9.00003C13 7.89546 13.8948 7.00003 14.9987 7.00003C16.1025 7.00003 16.9974 7.89546 16.9974 9.00003Z' fill='%237b6c55'/%3E%3C/svg%3E");
}

.decor-glyph--mask {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237b6c55' d='M181.78 33v51.53h149.407V33H181.78zm14.19 70.22c-.66 2.9-1.554 5.263-2.75 6.936-2.684 3.75-7.033 6.594-19.5 6.594-21.54 0-40.804 5.862-55.157 16.094-14.353 10.232-23.907 25.398-23.907 42.5V426.75c0 32.34 26.255 58.625 58.594 58.625h213.47c32.338 0 58.592-26.286 58.592-58.625V175.344c0-17.102-9.527-32.2-23.593-42.438-14.067-10.237-32.83-16.156-53.44-16.156-16.69 0-23.62-3.488-26.874-7.188-1.41-1.604-2.43-3.698-3.156-6.343h-19.125c1.073 6.658 3.37 13.137 8.25 18.686 8.11 9.223 21.523 13.53 40.906 13.53 16.978 0 32.056 5.008 42.44 12.564 10.38 7.556 15.905 17.1 15.905 27.344V426.75c0 22.355-17.55 39.938-39.906 39.938H153.25c-22.355 0-39.906-17.583-39.906-39.938V175.344c0-10.245 5.455-19.72 16.062-27.28 10.607-7.563 26.22-12.626 44.313-12.626 15.962 0 28.056-5.142 34.686-14.407 3.904-5.455 5.733-11.545 6.625-17.81h-19.06zm66.093 45.405c-30.545 0-50.062 12.865-63.282 32.313-12.295 18.09-18.387 42.315-19.186 66.062 25.033 12.795 39.555 27.632 43.844 44.97.734 2.967 1.173 5.942 1.312 8.905 9.01 5.134 23.22 8.44 37.813 8.438 12.935-.002 26.08-2.538 36.093-6.875.152-3.325.617-6.662 1.47-10 4.486-17.583 19.028-33.2 44.405-45.563-.838-22.46-6.793-46.595-19-64.938-13.2-19.84-32.745-33.312-63.467-33.312zM232.188 223.5c9.157 0 16.593 7.405 16.593 16.563 0 9.157-7.435 16.593-16.593 16.593-9.157 0-16.562-7.436-16.562-16.594 0-9.157 7.405-16.562 16.563-16.562zm55.437 0c9.158 0 16.594 7.405 16.594 16.563 0 9.157-7.438 16.593-16.595 16.593-9.158 0-16.563-7.436-16.563-16.594 0-9.157 7.405-16.562 16.563-16.562zm-28.844 33.594c6.275 13.248 11.25 26.503 13.72 39.75-9.148-3.022-18.29-3.426-27.438 0 3.34-13.25 7.352-26.504 13.72-39.75zm-37.03 63.47c-2.136 6.42-5.285 12.778-9.188 19.03 11.93 7.99 31.58 12.81 50.875 12.594 18.97-.214 36.878-5.57 46.22-12.407-3.55-5.764-6.412-11.8-8.344-18-11.947 4.416-25.424 6.375-38.75 6.376-14.447.002-28.77-2.222-40.813-7.594zm-70.656 17.06c-8.9 11.268-12.694 22.493-10.03 36.313 68.925 5.54 164.194 31.92 226.686 60.75 9.16-11.166 12.518-22.67 9.97-36.78-67.77-6.867-164.135-28.736-226.626-60.282zm216.594 0c-20.79 10.496-45.326 19.907-71.313 28.063 20.298 4.434 40.253 8.04 58.72 10.688 7.782-1.026 15.357-1.853 22.624-2.438 2.66-13.82-1.133-25.045-10.033-36.312zm-203.75 57.532c-7.904 1.084-15.56 2.01-22.875 2.75-2.55 14.11.81 25.615 9.968 36.78 21.375-9.86 46.575-19.447 73.25-27.998-20.87-4.912-41.385-8.868-60.343-11.532z'/%3E%3C/svg%3E");
}

.decor-glyph--warning {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M12 10L12 13' stroke='%237b6c55' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='12' y1='16' x2='12' y2='16' stroke='%237b6c55' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M12.8619342 4.46528817L21.1135176 18.4929799C21.3935371 18.969013 21.2346366 19.5819147 20.7586035 19.8619342C20.6049268 19.9523322 20.4298761 20 20.2515834 20L3.74841664 20C3.19613189 20 2.74841664 19.5522847 2.74841664 19C2.74841664 18.8217072 2.7960844 18.6466565 2.88648243 18.4929799L11.1380658 4.46528817C11.4180853 3.98925504 12.030987 3.83035459 12.5070201 4.11037408C12.6535738 4.19658212 12.7757262 4.3187345 12.8619342 4.46528817Z' stroke='%237b6c55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero-glyph {
  z-index: 1;
}

@keyframes glyph-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -10px;
  }
}

nav {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 0px);
  max-width: none;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 48px;
  background: rgba(12, 10, 16, 0.78);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(130%);
  will-change: width, top, padding, border-radius, background, box-shadow;
  transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1), width 0.55s cubic-bezier(0.22, 1, 0.36, 1), padding 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease, box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, gap 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

nav.nav-scrolled {
  top: 20px;
  width: min(980px, calc(100% - 32px));
  gap: 10px;
  padding: 10px 12px 10px 18px;
  background: rgba(12, 10, 16, 0.5);
  border: 1px solid rgba(123, 108, 85, 0.12);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.nav-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img,
.hero-logo,
.discord-box-logo,
.footer-logo img {
  filter: drop-shadow(0 0 10px rgba(200, 144, 48, 0.35))
    brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(578%) hue-rotate(353deg) brightness(87%) contrast(89%);
}

.nav-logo img {
  width: 34px;
  height: 34px;
}

.nav-wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-header);
}

.nav-wordmark span {
  color: var(--accent-gold);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(123, 108, 85, 0.24);
  border-radius: 14px;
  background: rgba(8, 7, 12, 0.58);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 144, 48, 0.45);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-header);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: gap 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

nav.nav-scrolled .nav-links {
  gap: 4px;
}

.nav-links a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover {
  color: var(--text-title);
  background: rgba(255, 255, 255, 0.05);
}

.nav-links .nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  color: var(--text-header);
  flex: 0 0 40px;
}

.nav-links .nav-icon-btn i {
  font-size: 17px;
  line-height: 1;
}

.nav-links .nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-title);
}

.nav-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 6px 12px;
  border: 1px solid rgba(123, 108, 85, 0.22);
  border-radius: 4px;
  background: rgba(12, 10, 16, 0.96);
  color: var(--text-title);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(12, 10, 16, 0.96);
}

.nav-icon-btn:hover .nav-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.nav-links .btn-primary {
  color: #f5f1ea;
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
}

.nav-links .btn-primary:hover {
  color: #f5f1ea;
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
}

.btn-primary,
.btn-hero,
.btn-ghost,
.btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary,
.btn-hero {
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
  color: #f5f1ea;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 0 18px var(--accent-gold-glow), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.btn-primary:hover,
.btn-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(200, 144, 48, 0.45), 0 8px 22px rgba(0, 0, 0, 0.45);
}

.btn-primary {
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links .btn-primary {
  min-height: 38px;
}

.btn-hero {
  padding: 15px 36px;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.btn-ghost {
  padding: 15px 30px;
  background: rgba(8, 7, 12, 0.58);
  color: var(--text-muted);
  border: 1px solid rgba(74, 62, 48, 0.2);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.btn-ghost:hover {
  background: var(--surface-slot-hover);
  color: var(--text-title);
  border-color: #9a8c72;
  transform: translateY(-1px);
}

.btn-discord {
  padding: 13px 36px;
  background: linear-gradient(180deg, #486b96 0%, var(--accent-blue-border) 100%);
  color: #d2deeb;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 0 24px rgba(58, 96, 144, 0.32);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.btn-discord:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(58, 96, 144, 0.42);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 64px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 8, 12, 0.76) 0%, rgba(18, 12, 14, 0.64) 45%, rgba(18, 12, 14, 0.82) 100%),
    url("assets/background.jpg") center 28% / cover no-repeat;
  opacity: 0.18;
  transform: scale(1.04);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(200, 144, 48, 0.08) 0%, transparent 42%),
    linear-gradient(90deg, rgba(8, 7, 12, 0.58) 0%, rgba(8, 7, 12, 0.16) 42%, rgba(8, 7, 12, 0.5) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr);
  align-items: center;
  gap: 32px;
  padding: 40px 28px 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}

.hero-eyebrow,
.section-label,
.store-tag,
.hero-ip,
footer small {
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.hero-eyebrow {
  color: var(--text-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.hero-ornament,
.hero-divider,
.ornament-h {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-ornament-line,
.hero-divider-line,
.ornament-h-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(123, 108, 85, 0.78) 100%);
}

.hero-ornament-line.right,
.hero-divider-line.right,
.ornament-h-line.right {
  background: linear-gradient(270deg, transparent 0%, rgba(123, 108, 85, 0.78) 100%);
}

.hero-logo {
  width: 82px;
  height: 82px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(52px, 10vw, 90px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--text-title);
  text-shadow: 0 0 24px rgba(136, 96, 192, 0.12);
}

.hero-title span {
  color: var(--accent-gold);
}

.hero-diamond,
.ornament-h-diamond {
  width: 8px;
  height: 8px;
  background: var(--accent-gold);
  box-shadow: 0 0 12px rgba(200, 144, 48, 0.55);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.hero-tagline {
  max-width: 700px;
  font-size: clamp(19px, 2.9vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-tagline em {
  font-style: normal;
  color: var(--text-header);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

.hero-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 560px;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 12% 8% 6%;
  background: radial-gradient(circle at center, rgba(200, 144, 48, 0.12) 0%, rgba(136, 96, 192, 0.08) 38%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.hero-character {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.42));
}

.hero-fade {
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  background: none;
  pointer-events: none;
}

section {
  position: relative;
  z-index: 0;
}

section:not(.hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(760px, calc(100% - 96px));
  height: 1px;
  background: linear-gradient(90deg, rgba(123, 108, 85, 0.12) 0%, rgba(123, 108, 85, 0.42) 46%, rgba(123, 108, 85, 0.42) 54%, rgba(123, 108, 85, 0.12) 100%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

section:not(.hero)::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--accent-gold);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(200, 144, 48, 0.25);
  pointer-events: none;
  z-index: 1;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  filter: blur(10px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.section-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 64px;
}

.section-label {
  margin-bottom: 10px;
  color: var(--text-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.section-title {
  margin-bottom: 30px;
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-title);
}

.accent-gradient {
  color: var(--accent-gold);
}

.ornament-h {
  display: none;
}

.img-placeholder {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.img-placeholder span {
  padding: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text-label);
  text-transform: uppercase;
}

.trailer-section .section-inner {
  text-align: center;
}

.trailer-copy {
  max-width: 720px;
  margin: 0 auto 36px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}

.trailer-embed {
  position: relative;
  width: min(100%, 960px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.trailer-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(123, 108, 85, 0.16);
  border-radius: inherit;
  pointer-events: none;
}

.trailer-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#lore .section-inner,
#como-jogar .section-inner,
#galeria .section-inner,
#loja .section-inner,
#faq .section-inner {
  position: relative;
}

#lore .section-inner::before,
#como-jogar .section-inner::before,
#galeria .section-inner::before,
#loja .section-inner::before,
#faq .section-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: -1;
}

#lore .section-inner::after,
#como-jogar .section-inner::after,
#galeria .section-inner::after,
#loja .section-inner::after,
#faq .section-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
  pointer-events: none;
}

#lore .section-inner,
#como-jogar .section-inner,
#galeria .section-inner,
#loja .section-inner,
#faq .section-inner {
  padding: 32px;
}

.lore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}

.lore-text p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  letter-spacing: 0.03em;
}

.lore-img-wrap {
  position: relative;
}

.lore-img-glow {
  position: absolute;
  inset: -12px;
  background: none;
  pointer-events: none;
}

.howto-bg {
  background: transparent;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.step-card,
.store-card,
.discord-box {
  position: relative;
  overflow: hidden;
}

.step-card {
  padding: 24px 20px;
  background: rgba(8, 7, 12, 0.28);
  border: 1px solid rgba(123, 108, 85, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 12px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.step-card:hover {
  background: rgba(10, 8, 14, 0.34);
  border-color: rgba(123, 108, 85, 0.16);
  transform: translateY(-2px);
}

.step-bg-num {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: rgba(123, 108, 85, 0.1);
  pointer-events: none;
}

.step-num {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
  border: 1px solid #e0b050;
  border-radius: var(--radius-card);
  color: #1a140e;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.step-card h3,
.store-item-name,
.faq-item-header span:first-child,
.discord-box h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.step-card h3 {
  margin-bottom: 10px;
  color: var(--text-header);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.step-card p {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
}

.step-links {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.step-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 14px;
  background: rgba(8, 7, 12, 0.44);
  border: 1px solid rgba(123, 108, 85, 0.18);
  border-radius: 8px;
  color: var(--text-header);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.step-links a:hover {
  background: rgba(20, 16, 14, 0.62);
  border-color: rgba(200, 144, 48, 0.28);
  color: var(--text-title);
  transform: translateY(-1px);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item .img-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 160px;
  border: 0;
  border-radius: 0;
}

.gallery-item:first-child .img-placeholder {
  height: 100%;
  min-height: 332px;
}

#loja {
  background: transparent;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.store-card {
  min-height: 100%;
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  background: linear-gradient(180deg, rgba(12, 10, 16, 0.92) 0%, rgba(18, 14, 20, 0.86) 100%);
  border: 1px solid rgba(123, 108, 85, 0.18);
  border-radius: 20px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.26);
}

.store-card--basic {
  border-color: rgba(92, 84, 72, 0.22);
}

.store-card--featured {
  padding-top: 20px;
  border-color: rgba(200, 144, 48, 0.56);
  box-shadow: 0 0 0 1px rgba(200, 144, 48, 0.12), 0 24px 48px rgba(0, 0, 0, 0.24);
}

.store-card--premium-plus {
  padding-top: 20px;
  border-color: rgba(200, 144, 48, 0.72);
  box-shadow: 0 0 0 1px rgba(200, 144, 48, 0.16), 0 24px 48px rgba(0, 0, 0, 0.24);
}

.store-banner {
  align-self: center;
  margin-top: -48px;
  padding: 7px 18px;
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
  border-radius: 999px;
  color: #1a140e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-banner--gold {
  background: linear-gradient(180deg, #e0b258 0%, #b87b24 100%);
  color: #181105;
}

.store-card__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-plan-kicker {
  color: var(--text-header);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-item-name {
  color: var(--text-title);
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.store-duration {
  align-self: flex-start;
  padding: 8px 12px;
  background: rgba(22, 18, 10, 0.72);
  border: 1px solid rgba(200, 144, 48, 0.2);
  border-radius: 10px;
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-copy {
  min-height: 88px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.7;
}

.store-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.store-features li {
  position: relative;
  padding-left: 30px;
  color: var(--text-header);
  font-size: 14px;
  line-height: 1.5;
}

.store-features li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(22, 18, 10, 0.48);
  box-shadow: inset 0 0 0 1px rgba(200, 144, 48, 0.16);
}

.store-features li::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-gold);
}

.store-cta {
  margin-top: auto;
  min-height: 48px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #d9a64b 0%, var(--accent-gold) 100%);
  color: #f5f1ea;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
}

.store-cta--gold {
  background: linear-gradient(180deg, #e0b258 0%, #b87b24 100%);
  color: #181105;
}

.store-card--basic .store-plan-kicker,
.store-card--basic .store-duration {
  color: var(--text-muted);
}

.store-card--basic .store-duration {
  background: rgba(20, 16, 14, 0.82);
  border-color: rgba(123, 108, 85, 0.18);
}

.store-card--basic .store-cta {
  background: rgba(12, 10, 16, 0.92);
  border: 1px solid rgba(123, 108, 85, 0.34);
  color: var(--text-title);
}

.store-card--premium-plus .store-plan-kicker,
.store-card--premium-plus .store-duration,
.store-card--premium-plus .store-item-name {
  color: #e0b258;
}

.store-card--premium-plus .store-duration {
  background: rgba(49, 37, 9, 0.72);
  border-color: rgba(200, 144, 48, 0.22);
}

.store-card--premium-plus .store-features li::before {
  background: rgba(49, 37, 9, 0.46);
  box-shadow: inset 0 0 0 1px rgba(200, 144, 48, 0.18);
}

.store-card--premium-plus .store-features li::after {
  background: #d9a64b;
}

.faq-discord-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
  gap: 32px;
  align-items: start;
}

.faq-item {
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.faq-item + .faq-item {
  margin-top: 10px;
}

.faq-item:hover,
.faq-item.open {
  background: transparent;
}

.faq-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-item-header span:first-child {
  color: var(--text-header);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.faq-toggle {
  color: var(--accent-gold);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-body {
  display: none;
  margin-top: 10px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
}

.faq-item.open .faq-body {
  display: block;
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

.discord-box {
  padding: 42px 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.discord-box-logo {
  width: 70px;
  height: 70px;
}

.discord-box h3 {
  color: var(--text-title);
  font-size: 34px;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.1em;
  text-align: center;
}

.discord-box p {
  max-width: 260px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.discord-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 4px;
}

.discord-stat {
  text-align: center;
}

.discord-stat-value {
  color: var(--accent-gold);
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.discord-stat-label {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.discord-divider {
  width: 1px;
  align-self: stretch;
  background: var(--accent-35);
}

.footer {
  width: 100%;
  max-width: none;
  margin: 48px 0 0;
  padding: 72px 48px 28px;
  background: rgba(5, 4, 8, 0.42);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.footer__grid {
  width: min(1180px, 100%);
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(160px, 220px));
  gap: 64px;
  align-items: start;
}

.footer__brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__brand-row img {
  width: 42px;
  height: 42px;
  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgba(200, 144, 48, 0.16))
    brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(578%) hue-rotate(353deg) brightness(87%) contrast(89%);
}

.footer__brand {
  color: var(--text-title);
  font-family: var(--font-heading);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}

.footer__tagline {
  margin-top: 12px;
  color: var(--text-label);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.footer__desc {
  max-width: 320px;
  margin-top: 22px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}

.footer__col h4 {
  margin-bottom: 16px;
  color: var(--text-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.footer__col a {
  display: block;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 17px;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer__col a:hover {
  color: var(--text-title);
  padding-left: 4px;
}

.footer__social-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 8px 0 !important;
}

.footer__social-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  flex-shrink: 0;
}

.footer__social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer__bottom {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(123, 108, 85, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__bottom span,
.footer__bottom small {
  color: var(--text-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  nav {
    padding: 14px 28px;
  }

  .hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 20px;
  }

  .hero-media {
    min-height: 460px;
  }

  .nav-links {
    gap: 10px;
  }

  .nav-links a {
    padding: 8px 12px;
    font-size: 12px;
  }

  .steps-grid,
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(140px, 1fr));
    gap: 36px;
  }
}

@media (max-width: 820px) {
  nav {
    top: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 14px 16px;
    border-radius: 24px;
    align-items: stretch;
    gap: 12px;
  }

  nav.nav-scrolled {
    top: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 14px 16px;
    border: 1px solid rgba(123, 108, 85, 0.12);
    border-radius: 24px;
  }

  .nav-topbar {
    align-items: center;
  }

  .nav-logo {
    justify-content: flex-start;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
  }

  .nav-open .nav-links {
    display: flex;
  }

  .nav-links a,
  nav .btn-primary {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }

  .nav-links .nav-icon-btn {
    flex: 0 0 40px;
  }

  .hero {
    min-height: auto;
    padding-top: 180px;
    padding-bottom: 48px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 34px 18px 28px;
  }

  .hero-copy {
    align-items: center;
    text-align: center;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-media {
    order: -1;
    min-height: auto;
    max-width: 520px;
    margin: 0 auto;
  }

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

  .trailer-embed {
    border-radius: 6px;
  }

  #lore .section-inner,
  #trailer .section-inner,
  #como-jogar .section-inner,
  #galeria .section-inner,
  #loja .section-inner,
  #faq .section-inner {
    padding: 24px 18px;
  }

  .gallery-grid,
  .steps-grid,
  .store-grid {
    grid-template-columns: 1fr;
  }

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

  .gallery-item:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .gallery-item:first-child .img-placeholder {
    min-height: 220px;
  }

  .footer {
    padding: 60px 24px 24px;
  }

  .footer__grid {
    gap: 32px;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {
  section:not(.hero)::before {
    width: calc(100% - 40px);
  }

  .hero-ornament-line,
  .hero-divider-line,
  .ornament-h-line {
    display: none;
  }

  .decor-glyph,
  .page-glyphs {
    display: none;
  }

  .hero-media {
    max-width: 360px;
  }

  .hero-character {
    width: 100%;
  }

  .hero-title {
    font-size: clamp(40px, 16vw, 58px);
    letter-spacing: 0.12em;
  }

  .hero-tagline {
    font-size: 17px;
    line-height: 1.45;
  }

  .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .hero-cta {
    width: 100%;
    flex-direction: column;
  }

  .nav-wordmark {
    font-size: 18px;
  }

  .nav-links a,
  nav .btn-primary {
    flex: 1 1 100%;
  }

  .nav-links .nav-icon-btn {
    flex: 0 0 40px;
  }

  .nav-links {
    gap: 6px;
  }

  .btn-hero,
  .btn-ghost,
  .btn-discord,
  .store-card .btn-primary {
    width: 100%;
  }

  .section-inner {
    width: calc(100% - 20px);
  }

  .section-title {
    font-size: clamp(28px, 10vw, 40px);
    line-height: 1;
  }

  .trailer-copy,
  .lore-text p,
  .step-card p,
  .faq-body,
  .discord-box p,
  .footer__desc {
    font-size: 15px;
  }

  .faq-item {
    padding-left: 0;
    padding-right: 0;
  }

  .faq-item-header span:first-child {
    font-size: 15px;
    line-height: 1.4;
  }

  .discord-stats {
    width: 100%;
    gap: 14px;
  }

  .discord-stat-value {
    font-size: 22px;
  }

  .discord-stat-label {
    letter-spacing: 0.18em;
  }

  .footer {
    padding: 56px 20px 24px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 28px;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 420px) {
  nav {
    padding: 12px;
  }

  nav.nav-scrolled {
    padding: 12px;
  }

  .hero {
    padding-top: 196px;
  }

  .hero-content {
    gap: 18px;
    padding: 24px 10px 20px;
  }

  .hero-logo {
    width: 68px;
    height: 68px;
  }

  .trailer-embed {
    border-radius: 4px;
  }

  .step-card,
  .store-card,
  .discord-box {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}