/* Layout ratios are taken from the owner's 1200 × 250 reference banner. */
.world-backdrop { position:fixed; inset:0; z-index:-4; pointer-events:none; background:url('/static/assets/world-blum-unified.webp') center top / cover no-repeat; }
.main-wrap,.shop-layout,.categories { background:transparent; }
.hero { container-type:inline-size; height:auto; aspect-ratio:24 / 5; border-radius:17px; }
.discord-slide { background:#494033; }
.discord-art { background-image:url('/static/assets/discord-reference-scene-clean.webp'); background-size:100% 100%; background-position:center; opacity:1; }
.discord-content { position:absolute; left:11.6667%; top:17.2%; width:auto; padding:0; }
.discord-heading { display:block; }
.discord-heading h2 { max-width:none; white-space:nowrap; font-size:2.3333cqw; font-weight:800; letter-spacing:0; line-height:1.5; }
.discord-heading h2>span { padding:0 .8333cqw; line-height:1.5; border:2px solid #9295ff; border-radius:1.1cqw; color:#fff; background:linear-gradient(140deg,#6165f8,#514bdb); box-shadow:inset 0 0 0 1px #aba3ff35,0 4px 10px #231d3a30; }
.discord-heading .discord-mark { display:none; }
.discord-stats { flex-direction:row; flex-wrap:nowrap; gap:1.25cqw; margin:1cqw 0 1.6667cqw; }
.discord-stats>span { font-size:1.3333cqw; line-height:1.5; gap:.75cqw; padding:.2cqw 1.1667cqw; border:2px solid #b88551; border-radius:1.25cqw; background:#8c684f77; color:#f8c693; white-space:nowrap; }
.discord-stats b { font-size:1.2cqw; line-height:1.5; padding:0 .5cqw; border-radius:4px; background:#c094693a; font-weight:700; }
.discord-stats>span+span { color:#bafda0; border-color:#619e4d; background:#507d3e8c; }
.discord-stats>span+span b { background:#90b96933; }
.discord-join { min-height:3.1667cqw; padding:.58cqw 1.25cqw; border-radius:1.1667cqw; font-size:1.1667cqw; font-weight:700; background:linear-gradient(110deg,#c8874b,#dc9b59); }
.discord-join>svg { display:none; }
.banner-brand { position:absolute; right:1.5%; bottom:5.2%; display:flex; align-items:center; gap:5px; padding:0; text-shadow:0 1px 3px #29221b80; }
.banner-brand img { width:2cqw; height:2cqw; border-radius:4px; }
.banner-brand b { padding:2px 5px; background:#ada18d80; font:italic 800 1.1667cqw/1.2 var(--body); color:#fff; white-space:nowrap; }
.hero-slide .hero-stamp { bottom:68px; }

/* Promo and online tiles sit inside one compact, warm reference frame. */
.server-strip { position:relative; padding:6px 12px; gap:14px; margin-top:12px; border-radius:17px; background:rgba(76,65,52,.94); box-shadow:inset 0 0 0 5px #e1bd900a; }
.starter-promo { position:relative; width:350px; gap:13px; padding:11px 15px 11px 18px; background:linear-gradient(90deg,#3e685e6b,transparent); border-radius:7px; }
.starter-promo b { font-size:15px; line-height:1.35; }
.starter-promo small { font-size:13px; color:#e1e0d2; line-height:1.35; margin-top:2px; }
.promo-decoration { position:absolute; left:-23px; top:-25px; width:48px; height:104px; pointer-events:none; }
.promo-badge { min-width:89px; padding:8px 11px; border-radius:10px; background:linear-gradient(115deg,#317d75,#49bba6); font-size:13px; font-weight:800; letter-spacing:0; box-shadow:inset 0 1px 0 #87d5c55c; }
.server-cards { gap:8px; }
.server-card { min-height:66px; padding:10px 15px; gap:12px; border-radius:16px; background:rgba(210,190,164,.08); }
.server-card.selected { background:rgba(210,190,164,.13); border-color:#d2b08045; }
.server-copy>b { font-size:17px; letter-spacing:0; }
.server-copy small { margin-top:4px; font-size:13px; }
.server-number { width:48px; height:48px; font-size:15px; }
.server-number::after { background:#574c3f; inset:4px; }
.server-number::before { background:conic-gradient(var(--ring-color) var(--online-progress),#ffffff1c 0); }
.server-rate { font-size:20px; color:#cdbc9f; }
.shop-layout { gap:12px; }
.sidebar,.catalog-panel { border-radius:18px; }
.nav-item { border-radius:12px; padding:8px 10px; gap:9px; }
.nav-item>svg:not(.nav-arrow) { width:31px; height:31px; padding:6px; border-radius:50%; background:#d8c7ad20; }
.nav-item.active { background:linear-gradient(110deg,#bd814d,#dc9659); }
.nav-copy { display:flex; flex-direction:column; min-width:0; line-height:1.4; text-align:left; }
.nav-copy small { font-size:10px; font-weight:500; color:#c9baa8; margin-top:2px; }
.nav-item:has(.nav-copy small) { min-height:57px; }
.section-status { display:inline-block; padding:5px 10px; border:1px solid #af96633b; border-radius:8px; background:#8c754329; color:#e7cf9c; font-size:12px; }
.server-tab { min-height:48px; padding:10px 16px; font-size:17px; font-weight:650; border-radius:17px; }
.server-tab.active { background:#756857; border-color:#c6b49662; }

@media(min-width:1001px) and (max-width:1199px) {
  .hero-content { padding:14px 28px; }
  .hero-content>.eyebrow { font-size:10px; }
  .hero h1 { font-size:44px; margin:6px 0; }
  .hero p { font-size:13px; line-height:1.45; }
  .hero-actions { margin-top:11px; }
  .hero-actions .button { min-height:38px; padding:8px 14px; font-size:13px; }
  .hero-actions .text-button { font-size:13px; }
  .hero-stamp b { font-size:14px; }
}
@media(max-width:1199px) {
  .starter-promo { width:300px; gap:10px; }
  .starter-promo b { font-size:13px; }
  .starter-promo small { font-size:12px; }
  .promo-badge { min-width:78px; font-size:12px; }
  .server-copy>b { font-size:16px; }
  .server-number { width:43px; height:43px; font-size:14px; }
}
@media(max-width:1000px) {
  .hero { height:300px; aspect-ratio:auto; }
  .discord-art { background-size:auto 100%; background-position:42% center; }
  .discord-content { left:8%; top:17%; }
  .discord-heading h2 { font-size:25px; max-width:560px; white-space:normal; }
  .discord-heading h2>span { padding:0 8px; border-radius:11px; }
  .discord-stats { flex-wrap:wrap; gap:9px; margin:17px 0 21px; }
  .discord-stats>span { font-size:14px; gap:8px; padding:3px 10px; border-radius:12px; }
  .discord-stats b { font-size:13px; padding:0 5px; }
  .discord-join { min-height:44px; padding:9px 17px; border-radius:13px; font-size:14px; }
  .banner-brand img { width:24px; height:24px; }
  .banner-brand b { font-size:14px; }
}
@media(max-width:850px) {
  .server-strip { gap:10px; padding:10px; }
  .starter-promo { width:100%; min-height:54px; padding:8px 12px 8px 28px; }
  .promo-decoration { width:41px; height:89px; left:-19px; top:-23px; }
  .starter-promo>span:not(.promo-badge) { display:block; }
  .server-card { padding:10px; }
  .server-rate { display:none; }
}
@media(max-width:700px) {
  .hero { height:318px; }
  .discord-art { opacity:.72; background-position:55% center; }
  .discord-slide::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#44364ae6,#44364a77 75%,#44364a20); }
  .discord-content { left:22px; top:25px; right:16px; }
  .discord-heading { display:flex; gap:10px; align-items:flex-start; }
  .discord-heading h2 { font-size:22px; line-height:1.45; }
  .discord-heading .discord-mark { display:block; width:49px; height:46px; flex-shrink:0; margin-top:5px; padding:0; border:0; background:none; box-shadow:none; transform:none; }
  .discord-mark img { width:49px; height:43px; filter:none; }
  .discord-stats { flex-direction:column; align-items:flex-start; gap:8px; margin:17px 0 19px; }
  .discord-stats>span { font-size:13px; padding:3px 9px; gap:8px; }
  .discord-stats b { font-size:12px; }
  .banner-brand { right:12px; bottom:12px; }
  .banner-brand b { font-size:12px; }
  .banner-brand img { width:20px; height:20px; }
  .server-strip { margin-top:13px; }
  .server-card { min-height:68px; gap:13px; padding:10px 13px; }
  .server-copy>b { font-size:17px; }
  .server-rate { display:block; }
  .server-tab { min-height:54px; font-size:15px; padding:9px; border-radius:14px; }
}
@media(max-width:370px) {
  .discord-content { left:17px; right:14px; }
  .discord-heading h2 { font-size:20px; }
  .discord-heading .discord-mark { width:43px; }
  .discord-mark img { width:43px; height:38px; }
  .starter-promo b { font-size:12px; }
  .starter-promo small { font-size:11px; }
  .promo-badge { min-width:69px; font-size:11px; padding:8px; }
  .server-tab { font-size:14px; }
}

/* Daily free crate: a preview until the opening feature is ready. */
.crate-promo { display:flex; width:350px; gap:15px; padding:8px 14px 8px 28px; background:linear-gradient(90deg,#3c4a3c,#354439 65%,#35423644); border-radius:4px; }
.crate-copy { flex:1; min-width:0; }
.crate-copy b { font-size:14px; }
.crate-promo .promo-badge { flex-shrink:0; min-width:0; max-width:121px; padding:8px 10px; font-size:12px; line-height:1.35; text-align:center; margin:0; background:linear-gradient(115deg,#3c9181,#62bfab); color:#f5fffb; }
.crate-preview { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.crate-preview img { width:160px; height:160px; object-fit:contain; }
.crate-preview span { color:#c5e5bb; border:1px solid #739b685e; background:#567a443a; border-radius:12px; padding:7px 11px; font-size:13px; white-space:nowrap; }
@media(max-width:1199px) {
  .crate-promo { width:325px; padding-right:12px; gap:12px; }
  .crate-copy b { font-size:13px; }
  .crate-promo .promo-badge { font-size:11px; max-width:110px; padding:8px; }
}
@media(max-width:850px) {
  .crate-promo { width:100%; padding:9px 12px 9px 28px; }
  .crate-promo .crate-copy { display:block; }
}
@media(max-width:370px) {
  .crate-promo { gap:9px; padding-left:24px; }
  .crate-promo .promo-badge { max-width:100px; font-size:11px; padding:7px; }
  .crate-preview { gap:10px; flex-wrap:wrap; justify-content:center; }
}
.server-rate { display:block; flex-shrink:0; white-space:nowrap; font:700 16px/1.4 var(--body); }
@media(max-width:1199px) { .server-rate { font-size:14px; } }
@media(max-width:370px) { .server-rate { font-size:13px; } }

/* Footer echoes the server strip with warm panels and official social marks. */
.community-links { display:grid; grid-template-columns:235px minmax(0,1fr); gap:12px; padding:11px 12px; margin-top:22px; border:1px solid var(--line); border-radius:17px; background:#4c4136f0; }
.community-label { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:90px; padding:9px 12px 9px 56px; background:linear-gradient(90deg,#3c4a3c,#354439 65%,#35423644); border-radius:16px; }
.community-label strong { font-size:18px; font-weight:800; }
.community-label>span:not(.promo-ornament) { font-size:14px; color:var(--muted); }
.community-label small { font-size:13px; color:#bdd8c6; margin-top:3px; }
.social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.social-link { display:flex; align-items:center; gap:12px; min-width:0; padding:15px 16px; border:1px solid transparent; border-radius:15px; background:#cfb99c12; transition:background .18s,border-color .18s; }
.social-link:hover { background:#cfb99c24; border-color:#cfb99c40; }
.social-link>span:not(.social-logo) { min-width:0; display:flex; flex-direction:column; gap:3px; }
.social-link b { font-size:17px; }
.social-link small { font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.social-link>svg { margin-left:auto; width:17px; color:#d9bf9d; }
.social-logo { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; }
.social-logo img { width:24px; height:24px; filter:invert(1); }
.discord-logo { background:#6764af; }
.telegram-logo { background:#4f899c; }
.vk-logo { background:#527b9e; }
.site-footer { display:block; padding:27px 3px 34px; text-shadow:0 1px 3px #241d15; }
.legal-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px 32px; padding:7px 0 17px; border-bottom:1px solid #c9ad8840; }
.legal-links button { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 0; background:none; border-radius:0; font-size:16px; font-weight:750; color:#edc79a; line-height:1.5; text-align:left; }
.legal-links button:hover { color:#ffe2bc; text-decoration:underline; text-underline-offset:5px; }
.legal-links button svg { width:17px; height:17px; }
.site-footer .footer-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin:0; padding:0 0 10px; }
.site-footer .footer-bottom p { font-size:14px; color:#d0c4b5; }
.footer-bottom>span { margin-left:auto; font-size:14px; color:#cfbea7; }
.site-footer .footer-brand { font-size:24px; }
.site-footer .footer-status { margin:17px 0 8px; color:#d1b893; font-size:14px; }
.site-footer>small { display:block; width:100%; margin:0; font-size:13px; color:#c5b9aa; opacity:1; line-height:1.7; padding:0; }
@media(max-width:1199px) {
  .community-links { grid-template-columns:195px minmax(0,1fr); }
  .social-link { padding:13px 10px; gap:9px; }
  .social-logo { width:36px; height:36px; }
  .social-logo img { width:21px; height:21px; }
  .social-link>svg { display:none; }
  .legal-links { gap:6px 25px; }
}
@media(max-width:850px) {
  .community-links { grid-template-columns:1fr; }
  .community-label { padding:9px 15px 9px 56px; }
  .community-label small { margin-top:0; }
  .social-link { padding:14px; }
}
@media(max-width:700px) {
  .products-heading .sort-menu { margin-left:auto; }
  .community-links { margin-top:18px; padding:10px; }
  .social-grid { grid-template-columns:1fr; }
  .social-link { min-height:71px; gap:13px; }
  .social-logo { width:43px; height:43px; }
  .social-link>svg { display:block; }
  .legal-links { flex-direction:column; align-items:stretch; gap:3px; }
  .legal-links button { justify-content:space-between; font-size:15px; min-height:48px; }
  .footer-bottom>span { margin-left:0; }
}

/* Keep decorations clear of copy; the two clean cutouts fit the same rail. */
.promo-ornament { display:block; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:39px; height:76px; pointer-events:none; }
.promo-ornament .ornament-palm { position:absolute; top:0; left:0; width:38px; height:47px; }
.promo-ornament .ornament-gift { position:absolute; bottom:0; left:9px; width:28px; height:26px; }
.crate-promo { min-height:76px; padding:7px 12px 7px 54px; gap:10px; border-radius:16px; }
.crate-copy b { font-size:15px; }
.crate-copy small { font-size:13px; }
.crate-promo .promo-badge { max-width:112px; font-size:12px; border-radius:12px; }
.shop-note { font-size:14px; gap:9px; padding:19px 0; color:#c8bbab; line-height:1.6; }
.shop-note svg { width:17px; height:17px; }

/* Equal columns and common image baselines, with solid warm surfaces. */
.catalog-panel { background:#493e32; }
.privilege-grid { gap:12px; }
.privilege-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(112px,1fr); align-items:center; gap:6px; min-height:162px; padding:10px 13px 10px 5px; border:1px solid #b49b7740; background:#5a4d3c; border-radius:16px; }
.privilege-card:nth-child(n) { background:#5a4d3c; }
.privilege-card:hover { background:#65523d; border-color:#d8af7980; }
.privilege-card::before { display:none; }
.privilege-card>img { position:static; width:100%; height:140px; max-width:none; object-fit:contain; object-position:center bottom; filter:none; }
.privilege-copy { display:grid; align-content:center; grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:start; width:auto; margin:0; padding:0; gap:6px; }
.privilege-copy h3 { margin:0; grid-area:auto; font-size:21px; font-weight:800; line-height:1.25; letter-spacing:-.4px; }
.privilege-copy p { margin:0; grid-area:auto; }
.privilege-copy p strong { font-size:17px; font-weight:700; }
.privilege-copy .mini-cta { grid-area:auto; align-self:auto; margin:3px 0 0; min-height:36px; padding:9px 12px; font-size:13px; line-height:1.4; }
.privilege-duration { font-size:14px; }
@media(min-width:1001px) and (max-width:1199px) {
  .privilege-card { grid-template-columns:minmax(0,1fr) 106px; min-height:151px; padding-right:9px; gap:1px; }
  .privilege-card>img { height:127px; }
  .privilege-copy h3 { font-size:18px; }
  .privilege-copy p strong { font-size:16px; }
}
@media(max-width:1000px) {
  .privilege-card { grid-template-columns:132px minmax(0,1fr); min-height:153px; padding:8px 20px 8px 8px; gap:17px; }
  .privilege-card>img { height:135px; }
}
@media(max-width:700px) {
  .crate-promo { width:100%; padding-left:52px; }
  .crate-copy b { font-size:14px; }
  .crate-promo .promo-badge { max-width:105px; font-size:11px; }
  .privilege-card { grid-template-columns:minmax(90px,.9fr) minmax(112px,1fr); padding:8px 10px 8px 3px; gap:7px; }
  .privilege-copy h3 { font-size:20px; }
  .shop-note { font-size:13px; padding:18px 2px; text-align:center; }
  .shop-note>span:last-child { display:inline; }
}