:root {
  --black: #070706;
  --black-soft: #0d0d0b;
  --panel: #12120f;
  --panel-light: #181713;
  --gold: #d6a84c;
  --gold-light: #f0d48f;
  --gold-dark: #806020;
  --white: #f7f3e9;
  --muted: #aaa69c;
  --line: rgba(214, 168, 76, .22);
  --container: 1180px;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Arial, Helvetica, sans-serif; line-height: 1.45; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; padding: 10px 16px; background: var(--gold); color: #080806; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(5,5,4,.92), rgba(5,5,4,.68)); backdrop-filter: blur(15px); transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(6,6,5,.95); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.header-inner { width: min(calc(100% - 40px), 1320px); height: 78px; margin: auto; display: flex; align-items: center; gap: 42px; }
.brand { width: 82px; height: 68px; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; }
.brand img { width: 92px; transform: scale(1.16); }
.main-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.main-nav a { position: relative; padding: 28px 0 24px; color: #c9c5bc; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.main-nav a::after { content: ''; position: absolute; left: 50%; bottom: 17px; width: 0; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width .25s; }
.main-nav a:hover, .main-nav a.active { color: var(--gold-light); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px 9px; border: 1px solid var(--line); color: white; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; transition: transform .25s, opacity .25s; }

.button { min-height: 52px; padding: 0 25px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; border: 1px solid var(--gold); background: linear-gradient(135deg, #f0d080, #bd8730); color: #100d06; font-size: .75rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; box-shadow: 0 8px 30px rgba(198,145,45,.15); transition: transform .2s, box-shadow .2s, filter .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(198,145,45,.26); filter: brightness(1.08); }
.button svg, .round-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button-small { min-height: 42px; padding: 0 17px; font-size: .67rem; }
.button-ghost { color: var(--white); background: rgba(10,10,8,.52); border-color: rgba(255,255,255,.35); box-shadow: none; }

.hero { position: relative; min-height: 720px; height: min(100svh, 880px); display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #090806 url('img/hero-perfect-world-heroes.jpg') center center / cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4,4,3,.5), rgba(4,4,3,.34) 30%, rgba(4,4,3,.42) 50%, rgba(4,4,3,.34) 70%, rgba(4,4,3,.5)), linear-gradient(180deg, rgba(4,4,3,.3) 25%, rgba(4,4,3,.93) 100%); }
.hero-video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .64; }
.hero-vignette { position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 180px 40px rgba(0,0,0,.7); pointer-events: none; }
.hero-particles { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-content { position: relative; top: -30px; z-index: 1; width: min(1100px, calc(100% - 32px)); margin-top: 58px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--gold-light); font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.hero .eyebrow { display: flex; align-items: center; gap: 14px; text-shadow: 0 2px 8px #000; }
.hero .eyebrow span { width: 42px; height: 1px; background: var(--gold); }
.hero-logo-wrap { position: relative; width: 330px; height: 270px; margin: 14px 0 24px; display: grid; place-items: center; animation: logoFloat 5s ease-in-out infinite; }
.hero-logo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 32px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(225,180,78,.18)); }
.logo-aura { position: absolute; left: 50%; top: 50%; width: 60%; height: 48%; border-radius: 50%; background: radial-gradient(circle, rgba(238,197,103,.3), rgba(214,168,76,.08) 42%, transparent 72%); filter: blur(20px); transform: translate(-50%, -50%); animation: auraPulse 3s ease-in-out infinite; }
.hero-logo-wrap::after { content: ''; position: absolute; z-index: 2; top: 12%; bottom: 12%; left: -35%; width: 18%; background: linear-gradient(90deg, transparent, rgba(255,244,203,.4), transparent); filter: blur(7px); opacity: 0; transform: skewX(-18deg); animation: logoShine 5s ease-in-out infinite 1.2s; pointer-events: none; }
.hero h1, .section-heading h2, .download h2, .community h2 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.04em; }
.hero h1 { max-width: none; white-space: nowrap; font-size: clamp(2.15rem, 3.7vw, 3.9rem); text-shadow: 0 3px 20px #000; }
em { color: var(--gold-light); font-style: italic; }
.hero-copy { max-width: 580px; margin: 12px auto 16px; color: #d1cec5; font-size: .92rem; text-shadow: 0 2px 8px #000; }
.hero-actions { display: flex; gap: 12px; }
.server-pill { margin-top: 12px; padding: 7px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; color: #c7c3ba; background: rgba(0,0,0,.4); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); }
.server-pill strong { color: #5d5a52; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 2s infinite; }
.status-dot.online { background: #55d47a; box-shadow: 0 0 12px #55d47a; }
.countdown { margin-top: 8px; padding: 9px 18px 10px; border: 1px solid rgba(214,168,76,.25); background: linear-gradient(90deg, rgba(0,0,0,.54), rgba(34,27,13,.58), rgba(0,0,0,.54)); backdrop-filter: blur(9px); box-shadow: 0 12px 45px rgba(0,0,0,.3); }
.countdown > p { margin: 0 0 5px; color: var(--gold); font-size: .52rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.countdown-grid { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.countdown-grid div { min-width: 48px; display: grid; }
.countdown-grid strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-grid span { margin-top: 4px; color: #88847a; font-size: .48rem; letter-spacing: .11em; text-transform: uppercase; }
.countdown-grid i { color: var(--gold-dark); font-family: var(--serif); font-size: 1.35rem; font-style: normal; line-height: 1; }
.countdown.finished { display: none; }
.scroll-cue { position: absolute; bottom: 25px; left: 50%; display: flex; flex-direction: column; align-items: center; color: #aaa69d; font-size: .59rem; letter-spacing: .2em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue svg { width: 18px; margin-top: 4px; fill: none; stroke: var(--gold); stroke-width: 1.5; animation: bob 1.8s infinite; }

.section { position: relative; padding: 52px 0; }
.section-heading { max-width: 680px; margin: 0 auto 27px; text-align: center; }
.section-heading h2, .download h2, .community h2 { font-size: clamp(1.9rem, 3.1vw, 2.85rem); }
.section-heading > p:last-child { max-width: 590px; margin: 10px auto 0; color: var(--muted); }
.intro { background: radial-gradient(circle at 50% 10%, rgba(164,116,32,.12), transparent 35%), var(--black-soft); border-top: 1px solid var(--line); }
.section-glow { position: absolute; top: 0; left: 50%; width: 300px; height: 1px; background: var(--gold); box-shadow: 0 0 30px 6px rgba(214,168,76,.3); transform: translateX(-50%); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 225px; padding: 24px 25px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.008)); overflow: hidden; transition: transform .3s, border-color .3s; }
.feature-card:hover { transform: translateY(-6px); border-color: var(--line); }
.feature-card.featured { border-color: rgba(214,168,76,.35); background: linear-gradient(145deg, rgba(214,168,76,.1), rgba(255,255,255,.01)); }
.feature-number { position: absolute; top: 15px; right: 22px; color: rgba(214,168,76,.24); font-family: var(--serif); font-size: 4.7rem; line-height: 1; }
.feature-image { width: 72px; height: 72px; margin: 0 0 15px; object-fit: cover; border: 1px solid rgba(214,168,76,.28); box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .35s, box-shadow .35s; }
.feature-card:hover .feature-image { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 35px rgba(214,168,76,.12); }
.feature-card h3, .news-card h3, .community-card h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 1.28rem; font-weight: 400; }
.feature-card p, .news-card p, .community-card p { margin: 0; color: var(--muted); font-size: .82rem; }

.news { background: #090908; }
.section-heading.horizontal { max-width: none; display: flex; justify-content: space-between; align-items: end; text-align: left; }
.section-heading.horizontal > p { max-width: 360px; margin: 0 0 4px; }
.news-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.news-card { display: grid; grid-template-columns: 150px 1fr; min-height: 180px; border: 1px solid rgba(255,255,255,.08); background: var(--panel); transition: border-color .25s, transform .25s; }
.news-card:hover { border-color: var(--line); transform: translateY(-3px); }
.news-main { grid-row: span 2; grid-template-columns: .92fr 1.08fr; }
.news-main .news-art { min-height: 100%; }
.news-main .news-body { align-self: center; }
.news-art { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(225,181,84,.35), transparent 40%), linear-gradient(135deg, #282014, #080807); }
.news-art::before, .news-art::after { content: ''; position: absolute; width: 130px; height: 130px; border: 1px solid rgba(214,168,76,.24); transform: rotate(45deg); }
.news-art::after { width: 80px; height: 80px; }
.news-art span { z-index: 1; color: var(--gold-light); font-family: var(--serif); font-size: 4rem; text-shadow: 0 0 30px rgba(214,168,76,.5); }
.news-art.has-image::before, .news-art.has-image::after { display: none; }
.news-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.05) brightness(.72); transition: transform .7s ease, filter .5s ease; }
.news-card:hover .news-art img { transform: scale(1.045); filter: saturate(.95) contrast(1.05) brightness(.86); }
.art-wings { background: radial-gradient(circle at 50% 50%, rgba(214,168,76,.22), transparent 45%), #0c0c0a; }
.art-dark { background: radial-gradient(circle, rgba(255,255,255,.08), transparent 45%), #090909; }
.news-body { padding: 18px 20px; }
.news-meta { margin-bottom: 11px; display: flex; justify-content: space-between; gap: 12px; color: #79766f; font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.news-meta span { color: var(--gold); }
.news-main h3 { max-width: 520px; font-size: 1.5rem; }
.news-body > a { margin-top: 15px; display: inline-flex; gap: 10px; color: var(--gold-light); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.download { border-block: 1px solid var(--line); background: linear-gradient(100deg, rgba(214,168,76,.1), transparent 45%), #10100d; overflow: hidden; }
.download-lines { position: absolute; inset: -70% -10% auto 45%; height: 400px; border: 1px solid rgba(214,168,76,.12); transform: rotate(-18deg); box-shadow: 0 0 0 55px rgba(214,168,76,.025), 0 0 0 110px rgba(214,168,76,.018); }
.download-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.download-copy { max-width: 730px; }
.download-copy > p:last-child { max-width: 620px; color: var(--muted); }
.download-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.text-link { color: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.heroes-showcase { background: radial-gradient(circle at 50% 0, rgba(214,168,76,.08), transparent 30%), #090908; }
.heroes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.hero-card { position: relative; aspect-ratio: 1.85 / 1; margin: 0; overflow: hidden; border: 1px solid rgba(214,168,76,.2); background: #111; }
.hero-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(5,5,4,.94) 100%); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82); transition: transform .65s ease, filter .45s ease; }
.hero-card:hover img { transform: scale(1.055); filter: saturate(1) brightness(.94); }
.hero-card figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 20px; display: grid; }
.hero-card figcaption span { margin-bottom: 4px; color: var(--gold); font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-card figcaption strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }

.community { background: radial-gradient(circle at 75% 50%, rgba(214,168,76,.09), transparent 32%), #080807; }
.community-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 42px; }
.community-copy > p:last-child { max-width: 540px; color: var(--muted); }
.community-stack { display: grid; gap: 10px; }
.community-card { position: relative; min-height: 150px; padding: 27px 82px 27px 125px; display: flex; align-items: center; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(214,168,76,.09), rgba(255,255,255,.01)); }
.community-card-copy > span { color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.community-card h3 { margin-top: 5px; font-size: 1.35rem; }
.community-mark { position: absolute; left: 30px; width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid var(--gold-dark); color: var(--gold-light); font-family: var(--serif); font-size: 2.3rem; transform: rotate(45deg); }
.community-mark span { transform: rotate(-45deg); }
.discord-card { position: relative; min-height: 215px; padding: 25px 28px; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 19px; border: 1px solid rgba(119,129,247,.65); background: radial-gradient(circle at 12% 50%, rgba(130,139,255,.25), transparent 28%), linear-gradient(135deg, rgba(88,101,242,.22), rgba(16,17,28,.95)); box-shadow: 0 20px 55px rgba(32,38,112,.2); overflow: hidden; }
.discord-card::after { content: ''; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border: 1px solid rgba(150,158,255,.13); border-radius: 50%; box-shadow: 0 0 0 42px rgba(150,158,255,.025), 0 0 0 84px rgba(150,158,255,.018); }
.discord-icon { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(174,180,255,.55); border-radius: 17px; color: white; background: #5865f2; box-shadow: 0 12px 40px rgba(88,101,242,.4); transform: rotate(-5deg); }
.discord-icon svg { width: 40px; fill: currentColor; }
.discord-content { position: relative; z-index: 1; }
.discord-content > span { color: #aeb4ff; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.discord-content h3 { margin: 5px 0 7px; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1.08; }
.discord-content p { margin: 0 0 14px; color: #aaaeca; font-size: .8rem; }
.discord-button { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #7d87ff; color: white; background: #5865f2; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s, background .2s; }
.discord-button:hover { background: #6d78fa; transform: translateY(-2px); }
.discord-button svg { width: 19px; fill: currentColor; }
.discord-button > span { margin-left: 2px; font-size: 1rem; }
.round-link { position: absolute; right: 28px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-light); border-radius: 50%; transition: background .2s, color .2s; }
.round-link:hover { color: #080806; background: var(--gold); }

.site-footer { padding: 36px 0 18px; border-top: 1px solid rgba(255,255,255,.07); background: #050504; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; padding-bottom: 26px; }
.footer-brand img { width: 120px; height: 95px; object-fit: contain; margin: -12px 0 10px; }
.footer-brand p { color: #77746d; font-size: .78rem; }
.social-links { margin-top: 22px; display: flex; gap: 9px; }
.social-link { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); color: #8d8a83; background: rgba(255,255,255,.025); transition: color .2s, border-color .2s, transform .2s, background .2s; }
.social-link:hover { color: var(--gold-light); border-color: var(--gold-dark); transform: translateY(-3px); }
.social-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.social-link .fill-icon, .social-link.discord svg { fill: currentColor; stroke: none; }
.social-link.discord { color: #aeb4ff; border-color: rgba(88,101,242,.5); background: rgba(88,101,242,.12); }
.social-link.discord:hover { color: white; background: #5865f2; }
.social-link.whatsapp-social:hover { color: white; border-color: #25d366; background: #25d366; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.footer-nav h3 { margin: 0 0 16px; color: var(--gold); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-nav a { display: block; width: max-content; margin: 8px 0; color: #99958c; font-size: .78rem; transition: color .2s; }
.footer-nav small { color: #66635c; font-size: .62rem; }
.footer-nav a:hover, .footer-bottom a { color: var(--gold-light); }
.footer-bottom { padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.06); color: #68665f; font-size: .66rem; }
.footer-bottom p { margin: 0; }
.floating-socials { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; gap: 10px; }
.floating-social { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; box-shadow: 0 12px 35px rgba(0,0,0,.45); transition: transform .2s, filter .2s; }
.floating-social:hover { transform: scale(1.08); filter: brightness(1.1); }
.floating-social svg { width: 27px; fill: currentColor; }
.floating-discord { background: #5865f2; }
.floating-whatsapp { background: #25d366; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 4px currentColor; } }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes logoFloat { 50% { transform: translateY(-8px) scale(1.015); } }
@keyframes auraPulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.2); } }
@keyframes logoShine { 0%, 62% { left: -35%; opacity: 0; } 70% { opacity: .85; } 88%, 100% { left: 120%; opacity: 0; } }

@media (max-width: 980px) {
  .header-inner { gap: 16px; }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: 78px; left: 0; right: 0; display: grid; gap: 0; max-height: 0; margin: 0; padding: 0 20px; overflow: hidden; background: rgba(6,6,5,.98); opacity: 0; transition: max-height .3s, opacity .2s, padding .3s; }
  .main-nav.open { max-height: 390px; padding-block: 12px 20px; border-bottom: 1px solid var(--line); opacity: 1; }
  .main-nav a { padding: 13px 4px; }
  .main-nav a::after { display: none; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 210px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-main { grid-row: auto; }
  .download-inner { align-items: flex-start; flex-direction: column; }
  .download-actions { align-items: flex-start; }
  .community-grid { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 700px) {
  .container, .header-inner { width: min(calc(100% - 28px), var(--container)); }
  .header-cta { display: none; }
  .hero { min-height: 700px; background-position: center center; }
  .hero::before { background: linear-gradient(180deg, rgba(2,2,2,.3), rgba(2,2,2,.48) 50%, rgba(2,2,2,.95)); }
  .hero-video { opacity: .5; }
  .hero-content { top: -20px; margin-top: 62px; }
  .hero .eyebrow span { width: 18px; }
  .hero-logo-wrap { width: 260px; height: 215px; margin: 10px 0 18px; }
  .hero h1 { font-size: clamp(1.62rem, 8.2vw, 3rem); }
  .hero-copy { font-size: .9rem; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .server-pill { font-size: .57rem; }
  .countdown { width: 100%; padding-inline: 10px; }
  .countdown-grid { gap: 7px; }
  .countdown-grid div { min-width: 43px; }
  .countdown-grid strong { font-size: 1.35rem; }
  .section { padding: 42px 0; }
  .section-heading.horizontal { align-items: flex-start; flex-direction: column; gap: 18px; }
  .news-card { grid-template-columns: 1fr; }
  .news-card:not(.news-main) .news-art { min-height: 125px; }
  .news-main .news-art { min-height: 155px; }
  .heroes-grid { display: flex; margin-right: -14px; padding-right: 14px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .heroes-grid::-webkit-scrollbar { display: none; }
  .hero-card { flex: 0 0 84%; scroll-snap-align: start; }
  .community-card { min-height: 135px; padding: 24px 66px 24px 96px; }
  .community-mark { top: 50%; left: 24px; width: 56px; height: 56px; font-size: 2rem; transform: translateY(-50%) rotate(45deg); }
  .round-link { top: 50%; right: 18px; width: 42px; height: 42px; transform: translateY(-50%); }
  .discord-card { min-height: 0; padding: 25px 23px; grid-template-columns: 1fr; gap: 18px; }
  .discord-icon { width: 62px; height: 62px; border-radius: 16px; }
  .discord-icon svg { width: 37px; }
  .discord-content h3 { font-size: 1.55rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-video { display: none; }
}