/*
 * ZENPATH CRAFT / THE INK ROAD
 * Original visual language: vermilion seal, dark ink, aged brass, mountain silhouettes.
 * Additive skin over the existing V7.8 functional UI; no marketplace assets copied.
 * Kept intentionally last so previous version styles need not be removed.
 */
:root {
  --zp-ink:#0c0c0d;
  --zp-ink-soft:#141214;
  --zp-card:#1d1718;
  --zp-parchment:#f5ece0;
  --zp-paper-soft:#d9c8bb;
  --zp-brass:#d5ac73;
  --zp-border:rgba(222,183,140,.18);
  --zp-accent-soft:color-mix(in srgb,var(--red,#bf3344) 22%,transparent);
  --zp-site-width:1200px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans Thai',Tahoma,'Segoe UI',sans-serif;
  color:var(--zp-parchment);background:var(--zp-ink);
  background-image:radial-gradient(ellipse at 92% 10%,rgba(105,30,28,.1),transparent 37%);
  font-size:14px;line-height:1.8;
}
body::selection{background:#9f2a34;color:#fff}
.wrap{width:min(var(--zp-site-width,1200px),calc(100% - 72px))}
button, a, input, textarea, select{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--zp-brass)!important;outline-offset:3px;
}
:root .mock-ribbon{background:#211b1bdc;border:1px solid #8c6155;color:#e5ccba;box-shadow:0 14px 38px #0008}
/* The header is a conventional anchored navigation bar, deliberately not the reference site's floating pill. */
.header{position:absolute;top:0;left:0;right:0;z-index:42;background:rgba(11,10,11,.79);backdrop-filter:blur(18px);border-bottom:1px solid rgba(207,162,119,.17)}
.header.solid{position:relative;background:#141112;border-bottom:1px solid var(--zp-border)}
.header .head-inner{width:min(var(--zp-site-width,1200px),calc(100% - 72px));height:83px;gap:26px}
.header .head-inner::after{display:none}
.head-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;padding:4px 0!important}
.head-brand::before{content:'ZP';width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;background:#972331;color:#fff3e3;border:1px solid #d58c756f;border-radius:2px;font:900 11px/1 Arial,sans-serif;letter-spacing:-.04em;box-shadow:inset 0 0 0 3px #972331,inset 0 0 0 4px #f3c39b61,0 6px 15px #0005;transform:rotate(-4deg)}
.head-brand .zp-brand-logo{width:106px;max-height:56px;object-fit:contain;filter:none!important}
.head-brand .zp-brand-small{display:none}
.head-nav{margin-left:auto;margin-right:0;gap:1px;padding:0;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;backdrop-filter:none}
.head-nav button{position:relative;font-size:13px;min-height:48px;display:inline-flex;gap:7px;align-items:center;border-radius:0!important;padding:11px 15px!important;background:transparent!important;color:#d9d0ca!important;box-shadow:none!important;font-weight:720}
.head-nav button:hover{color:#fff!important}
.head-nav button::after{content:'';position:absolute;left:15px;right:15px;bottom:3px;height:2px;transform:scaleX(0);transform-origin:left;background:var(--red,#bd3542);transition:transform .2s}
.head-nav button.selected{color:#fff4e4!important}
.head-nav button.selected::after,.head-nav button:hover::after{transform:scaleX(1)}
.right-nav{gap:7px}
.right-nav .icon-button{width:39px;height:39px;border:1px solid rgba(220,181,151,.21);border-radius:8px;background:#261b1b9c;box-shadow:none;backdrop-filter:none}
.right-nav .icon-button:hover{background:var(--zp-accent-soft);border-color:rgba(236,148,128,.58)}
.right-nav .icon-button[data-route='topup']{background:linear-gradient(115deg,#842632,#5e1b23);border-color:rgba(225,124,124,.52)}
.right-nav .zp-language-switch{border:1px solid #836a585b;border-radius:8px;background:#211c1b;padding:3px;box-shadow:none;backdrop-filter:none}
.right-nav .zp-lang-btn{border-radius:5px;color:#b6a89e;padding:8px 9px;min-width:30px}
.right-nav .zp-lang-btn.is-active{background:#a02e3b;box-shadow:none;color:#fff}
.mobile-menu{background:#171213;border:1px solid #8a524752;border-top:0;box-shadow:0 25px 35px #000a}
.mobile-menu button{color:#e8dacf}
/* Hero: asymmetric editorial layout with a horizon and small wayfinder, unlike centered login/store hero. */
#page-home .hero{position:relative;text-align:left!important;min-height:max(650px,var(--zp-hero-height,650px));height:auto;display:block;overflow:hidden;background:#0e0c0d}
#page-home .hero-bg{
  background:
    linear-gradient(90deg,rgba(12,10,11,.99) 0%,rgba(12,10,11,.94) 20%,rgba(12,10,11,.75) 39%,rgba(12,10,11,.22) 66%,rgba(12,10,11,.16) 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg,#0c0c0d 0%,transparent 29%,rgba(8,7,7,.16) 69%,rgba(7,7,8,.43) 100%) 0 0 / 100% 100% no-repeat,
    var(--site-hero-url) center / cover no-repeat!important;
  background-position:center,center,var(--zp-bg-position,63% 45%)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,100% 100%,cover!important;
  transform:none!important;
}
#page-home .hero:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b0b0b2a 0%,transparent 34%,#0b0b0c76 96%)!important;pointer-events:none;z-index:-2}
#page-home .hero:after{content:'';position:absolute;top:0;right:7%;bottom:0;width:1px;border-left:1px solid #e1bb8e28;background:none!important;opacity:1;pointer-events:none;z-index:-1}
#page-home .hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start!important;justify-content:center;text-align:left!important;width:min(var(--zp-site-width,1200px),calc(100% - 72px));max-width:none;margin:0 auto;padding:164px 0 134px;min-height:max(650px,var(--zp-hero-height,650px));}
#page-home .zp-path-eyebrow{display:flex;margin:0 0 20px;justify-content:flex-start;align-items:center;gap:13px;font:700 11px/1.4 Georgia,serif;letter-spacing:.21em;color:var(--zp-brass);text-shadow:none}
#page-home .zp-path-eyebrow::before{content:'';height:1px;width:31px;background:var(--zp-brass)}
#page-home .zp-path-eyebrow span{display:none}
#page-home .hero-logo{width:min(var(--zp-logo-width,390px),435px);max-width:82vw;height:auto;margin:0 0 18px!important;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))!important}
#page-home .hero h1{width:min(590px,100%);max-width:590px;font-size:clamp(31px,3.1vw,45px)!important;line-height:1.39!important;font-weight:900;color:var(--zp-parchment)!important;letter-spacing:-.025em;margin:0 0 15px!important;text-shadow:0 4px 28px rgba(0,0,0,.6)!important;overflow-wrap:break-word;text-wrap:balance}
#page-home .zp-path-divider{display:none}
#page-home .hero p{width:min(560px,100%);max-width:560px!important;margin:0!important;color:#e0d3cb!important;font-size:15px!important;line-height:1.95!important;font-weight:450;text-shadow:0 3px 15px #000a}
#page-home .hero-controls{display:flex;flex-direction:row;align-items:flex-start!important;justify-content:flex-start!important;max-width:680px;margin:28px 0 0!important;gap:13px;}
#page-home .hero .zp-main-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start!important}
#page-home .hero .ip-chip{display:flex;align-items:center;gap:9px;padding:10px 16px!important;min-height:48px;border:1px solid #cd596068!important;border-radius:8px!important;background:linear-gradient(135deg,#ac3540,#77242d)!important;box-shadow:0 8px 26px #0006!important;color:#fff}
#page-home .hero .ip-chip:hover{filter:brightness(1.1)}
#page-home .hero .ip-chip .tiny{color:#efd3cd!important;font-size:10px}
#page-home .hero .ip-chip strong{font-size:14px}
#page-home .hero .zp-hero-store{min-height:48px;background:#261c1ae8!important;border:1px solid #9d827c80!important;color:var(--zp-parchment);box-shadow:none!important;border-radius:8px!important;padding:10px 17px!important}
#page-home .hero .zp-hero-store:hover{background:#44282b!important;border-color:#d9a389!important}
#page-home .hero .zp-hero-links{display:flex;justify-content:flex-start!important;align-items:center;gap:10px;margin:0!important}
#page-home .hero .zp-hero-mini{min-height:48px;display:inline-flex;align-items:center;gap:7px;padding:10px 13px;font-size:12px;font-weight:750;background:transparent;border:1px solid transparent!important;border-radius:8px;color:#d4bcab;box-shadow:none!important}
#page-home .hero .zp-hero-mini:hover{background:#291c1e;border-color:#896456!important}
#page-home .hero .zp-discord-cta{color:#e6d4b8}
#page-home .hero-status{display:flex;position:absolute;right:max(38px,calc((100vw - var(--zp-site-width,1200px))/2));bottom:36px;left:auto;transform:none;gap:8px;font-size:11px;color:#dfcbb7;padding:9px 12px;background:#121012b8;border:1px solid #9f765866;border-radius:6px;backdrop-filter:blur(8px)}
#page-home .hero-status i{width:6px;height:6px;background:#bd804f;box-shadow:0 0 0 3px #bd804f23}
/* The distinctive seal is decorative and independent from CMS-uploaded logo assets. */
.zp-hero-mark{position:absolute;right:calc(max(30px,(100vw - var(--zp-site-width,1200px))/2));top:150px;z-index:2;width:60px;min-height:190px;display:flex;flex-direction:column;align-items:center;gap:13px;pointer-events:none;color:#fff4d7;font:700 12px/1.8 Georgia,serif;writing-mode:vertical-rl;letter-spacing:.24em;text-shadow:0 3px 8px #000}
.zp-hero-mark::before{content:'ZP';writing-mode:horizontal-tb;display:grid;place-items:center;width:50px;height:50px;background:rgba(147,31,46,.89);border:1px solid #d5a876;border-radius:4px;box-shadow:inset 0 0 0 4px #9a2639,inset 0 0 0 5px #e5aa7f65,0 12px 25px #0007;font:900 17px/1 Arial,sans-serif;letter-spacing:-.04em}
.zp-hero-mark::after{content:'';width:1px;height:72px;background:linear-gradient(180deg,#d6a47eaa,transparent)}
/* Open section rhythm. No extra promotional cards or fake player counts. */
#page-home{background:var(--zp-ink)}
#page-home .section{padding:78px 0}
#page-home .promos{margin:0;padding:74px 0 64px!important;background:var(--zp-ink)!important;}
#page-home .promos::before{display:none}
#page-home .promos .wrap{width:min(var(--zp-site-width,1200px),calc(100% - 72px))}
#page-home .zp-promo-heading{align-items:end;gap:16px;margin:0 0 22px}
#page-home .zp-promo-title{display:block;}
#page-home .kicker{display:block;font:700 11px/1.4 Georgia,serif;letter-spacing:.18em;color:var(--zp-brass)!important;margin-bottom:7px}
#page-home .s-title{font-size:clamp(25px,2.7vw,34px);font-weight:850;letter-spacing:-.025em;color:var(--zp-parchment);line-height:1.4;margin:0}
#page-home .section-head{margin-bottom:25px}
#page-home .section-head .s-title:after{height:2px;width:36px;background:var(--red,#b92e3f);margin:13px auto 0}
#page-home .section-head.split .s-title:after{margin-left:0}
#page-home .zp-promo-heading .s-title:after{content:'';display:block;margin-left:0}
#page-home .s-desc{color:#b7a49a;font-size:13px;margin:6px 0 0}
#page-home .see-all{color:var(--zp-brass);font-weight:700;font-size:12px;text-decoration:none}
#page-home .see-all:hover{color:#fff;text-decoration:none}
#page-home .promo-stage{height:278px;overflow:hidden;position:relative;border:1px solid var(--zp-border)!important;border-left:4px solid var(--red,#b92e3f)!important;border-radius:12px!important;background:linear-gradient(90deg,#251416,#1b1618 56%,#20181b);box-shadow:0 20px 65px #0004!important}
#page-home .promo-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 43%,rgba(199,127,91,.13),transparent 34%),repeating-linear-gradient(135deg,transparent 0 29px,rgba(214,156,118,.035) 29px 30px,transparent 30px 59px);opacity:1}
#page-home .promo-stage:after{content:'';display:none;position:absolute;right:14%;top:-98px;font:900 400px/1 Georgia,serif;color:#cb6c5412;transform:rotate(-10deg);pointer-events:none}
#page-home .promo-glow{display:none}
#page-home .promo-custom-bg{opacity:.3!important;mix-blend-mode:screen}
#page-home .promo-body{left:5%;top:50%;width:min(570px,74%);max-width:570px;z-index:2}
#page-home .promo-body .kicker{font-size:11px;color:var(--zp-brass)!important}
#page-home .promo-body h3{font-size:clamp(24px,2.8vw,36px);font-weight:850;letter-spacing:-.03em;color:#fff5e9;margin:8px 0 9px}
#page-home .promo-body p{max-width:530px;font-size:13px;color:#d5bfaf;line-height:1.75;margin:0 0 17px}
#page-home .promo-illustration{right:14%;top:24%;z-index:1;font-size:104px;line-height:1;opacity:.78;transform:none;filter:drop-shadow(0 8px 17px #0008)}
#page-home .promo-next{top:auto;bottom:16px;right:18px;transform:none;background:#3d2626;border:1px solid #8d675b;border-radius:7px;color:#f8e4d1;width:37px;height:37px}
#page-home .promo-count{bottom:22px;right:73px}
#page-home .promo-count button.on{background:var(--red,#b92e3f)}
#page-home .promo-foot{margin-top:8px}
/* Product discovery takes visual priority over a crowded category menu. */
#page-home .server-area{padding:48px 0 84px;background:linear-gradient(180deg,#0c0c0d,#131010)!important}
#page-home .server-area .section-head{text-align:left}
#page-home .server-area .s-title,#page-home .server-area .s-desc{text-align:left}
#page-home .server-area .s-title:after{margin-left:0}
#page-home .servers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#page-home .server-card{height:318px;min-height:318px;padding:30px;border:1px solid #9b776a52!important;border-radius:12px!important;overflow:hidden;box-shadow:none!important;transition:transform .22s ease,border-color .22s ease}
#page-home .server-card:hover{transform:translateY(-4px);border-color:rgba(236,180,126,.63)!important;box-shadow:0 18px 45px #0004!important}
#page-home .server-card:before{background:linear-gradient(0deg,#0c0a0bed 0%,#0f0b0bd1 28%,#150e1040 80%),var(--zp-survival-url,var(--site-hero-url)) center / cover no-repeat!important;filter:saturate(.7)!important}
#page-home .server-card.srv-two:before{background:linear-gradient(0deg,#0c0a0bed 0%,#0f0b0bd1 28%,#150e1040 80%),var(--zp-cosmetic-url,var(--site-hero-url)) center / cover no-repeat!important;filter:saturate(.65) hue-rotate(16deg)!important}
#page-home .server-card:after{content:'01';position:absolute;left:auto;top:14px;right:28px;inset:auto 26px auto auto;border:0;font:700 95px/1 Georgia,serif;color:#fff1e10e;z-index:1;pointer-events:none}
#page-home .server-card.srv-two:after{content:'02'}
#page-home .srv-label{top:18px;left:24px;color:#dec6ad;font-size:10px;font-weight:700;padding:5px 11px;border:1px solid #9a735e60;background:#20161785;border-radius:4px}
#page-home .server-card h3{font-size:clamp(26px,2.8vw,37px);font-weight:900;letter-spacing:-.025em;color:#fff4e7}
#page-home .server-card p{font-size:13px;line-height:1.65;color:#dccabf;margin:7px 0 17px}
#page-home .server-card .go{font-size:12px;gap:8px;color:var(--zp-brass)}
#page-home .server-card .go .chev{background:#922f3c;border-radius:6px;width:28px;height:28px}
#page-home .store-sub{display:none}
/* Community invitation is a single quiet closing CTA, not a third large promo. */
#page-home .zp-community-band{padding:34px 0;background:#191414;border-top:1px solid var(--zp-border);border-bottom:1px solid var(--zp-border)}
#page-home .zp-community-band:before{display:none}
#page-home .zp-community-inner{max-width:var(--zp-site-width,1200px);gap:24px}
#page-home .zp-community-inner h2{font-size:21px;font-weight:850;color:#f4e6d6}
#page-home .zp-community-inner p{color:#baaaa0;font-size:13px}
#page-home .zp-community-inner .kicker{margin-bottom:5px}
#page-home .zp-community-band .btn{flex:none}
#page-home .news-area{background:#0d0c0d;padding:80px 0 100px}
#page-home .news-grid{gap:19px}
#page-home .news-card{background:#191415;border:1px solid #9d786a43;border-radius:10px!important;box-shadow:none!important;overflow:hidden}
#page-home .news-card:hover{border-color:rgba(206,162,123,.48)!important}
/* Unified content surfaces: fewer gradients, one border, and readable type. */
.page-banner{min-height:220px;padding:66px 0 38px;background:linear-gradient(90deg,#171012eb,#160d0ac9),var(--site-hero-url) center 34%/cover no-repeat!important;border-bottom:1px solid var(--zp-border)}
.page-banner .wrap{padding-left:22px;border-left:3px solid var(--red,#ad3644)}
.page-banner h1{font-size:clamp(29px,4vw,43px);letter-spacing:-.03em;color:var(--zp-parchment);margin:2px 0 9px;line-height:1.4}
.page-banner p{font-size:13px;color:#d9c5ba;max-width:700px}
.page-banner .crumb{font-size:11px;color:var(--zp-brass)}
.subpage{background:var(--zp-ink)}
.subpage .inside{padding-top:44px;padding-bottom:90px}
.store-title{color:#f1e7db!important}
.category-card,.news-card,.text-panel,.prod,.milestone,.helpbox,.filter-list,.zp-method-card,.zp-wallet-panel,.zp-bank-panel,.zp-qr-panel,.zp-support-card{background-color:var(--zp-card);border:1px solid var(--zp-border)!important;border-radius:12px!important;box-shadow:none!important}
.filter-list button{border-radius:7px!important}
.filter-list button.on,.zp-tiers button.on{background:#72252f!important;border-color:#ba6871!important;color:#fff!important}
.category-card:hover,.prod:hover,.zp-method-card:hover{border-color:#ca94785e!important}
.btn,.primary,.secondary,.alt,.backbtn{border-radius:8px!important}
.btn.primary,.primary,.zp-login-submit{background:linear-gradient(120deg,var(--red,#ad3542),#782330)!important;color:#fff;box-shadow:0 7px 23px #0003!important;border:1px solid #d66a6658}
.btn.primary:hover,.primary:hover{filter:brightness(1.13)}
.btn.secondary,.secondary,.alt{background:#261c1d!important;border:1px solid #72574d!important;color:#f2e5d9}
.btn.secondary:hover,.secondary:hover,.alt:hover{background:#3a2827!important}
#page-catalog .catalog-cols{gap:23px}
.prod-art{background:#211719}
.prod .price{color:#f2bd8f}
/* Transaction UI: distinguish PREVIEW from production while keeping original login gate intact. */
.zp-pay-route{background:#0e0b0d!important;color:#f5e9dc}
.zp-pay-route:before{background:linear-gradient(180deg,#171011c4,#100e10e5 78%,#0d0c0d),var(--zp-topup-url,var(--site-hero-url)) center / cover no-repeat!important}
.zp-pay-heading h1{color:var(--zp-parchment)}
.zp-method-card{background:linear-gradient(165deg,#241819f5,#171315f2)!important;padding:30px!important}
.zp-method-card h2{font-size:22px}
.zp-method-card p{color:#d4bbac}
.zp-method-card .zp-btn-fake{background:var(--red,#bd3443)!important;border-radius:8px!important}
.zp-wallet-panel,.zp-bank-panel,.zp-qr-panel{background:#1c1618eb!important}
.zp-bank-panel input,.zp-wallet-form input{background:#120f10;border-color:#715148;color:#f9e7dc}
.zp-qr-timer,.zp-points-row,.zp-qr-line{background:#211719;border:1px solid #74534a}
.zp-points-row b,.zp-qr-line strong{color:var(--zp-brass)}
.zp-topup-offer{background:#221619;border:1px solid #9a4e50;border-radius:9px}
.zp-topup-offer .zp-offer-value{color:#f4bd8d}
/* Drawer and login are original ZenPath panels, replacing earlier blue/purple-violet feel. */
.zp-login-backdrop{background:#09090bcb;backdrop-filter:blur(8px)}
.zp-login-modal{background:#1c1719;border:1px solid #8d6052!important;border-radius:11px!important;box-shadow:0 32px 90px #000e!important}
.zp-login-head{background:#241b1d;border-bottom:1px solid #79594c!important}
.zp-login-head-icon{background:#923344;color:#fbe8dc;border-radius:7px}
.zp-login-inner{background:#171213;border:1px solid #5c443e;border-radius:8px}
.zp-login-editions{background:#120f10;border-color:#55413d;border-radius:7px}
.zp-login-editions button{border-radius:5px}
.zp-login-editions button.active{background:#77303b;color:#fff;box-shadow:none}
.zp-login-fields input:not([type=checkbox]){background:#131112;color:#fff2e9;border:1px solid #604d46;border-radius:7px;text-align:left;padding:0 13px}
.zp-login-fields input:focus{border-color:#d7a57e}
.zp-login-x{border-radius:7px;background:#32292a;color:#eedccc}
.zp-login-submit{border-radius:7px}
.drawer{background:#191516!important;border-left:1px solid #8d6052!important}
.drawer-h,.drawer-f{background:#211719!important;border-color:#78544b!important}
.cart-item{background:#261c1d!important;border-color:#7b5c50!important;border-radius:8px}
.zp-profile-panel{background:#171213!important;border-color:#8c574e!important}
.zp-profile-top{background:#211819;border-color:#725249}
.zp-profile-card{background:#25191c;border-color:#856056}
.zp-profile-links button,.zp-profile-history,.zp-profile-logout,.zp-profile-info button{background:#21191b;border-color:#745249;border-radius:8px}
.zp-profile-links button:hover,.zp-profile-history:hover{background:#352225}
/* Supporters follow the same visual language; rankings remain CMS-managed. */
.zp-support-banner{background:linear-gradient(90deg,#12100fe8,#191010ba),var(--zp-supporters-url,var(--site-hero-url)) center / cover no-repeat!important}
.zp-support-card,.zp-support-stat,.zp-support-goal,.zp-support-empty{background:#201719!important;border-color:#846157!important}
.zp-support-heading h1{color:var(--zp-parchment)}
/* Footer is simple and legible, with no extra ornamental imagery. */
.footer{background:#111011!important;border-top:1px solid #8d6d5d55!important;padding-top:54px;color:#e6dacf}
.footer::before{display:none!important}
.foot-grid{gap:45px}
.foot-logo{font-weight:900;letter-spacing:.08em}
.footer p,.foot-col button,.foot-base{color:#ab9a90}
.foot-col h4{color:#ead1ad}
.footer .foot-base{border-color:var(--zp-border)}
@media(max-width:1150px){
 .header .head-inner{gap:14px}
 .head-nav button{padding:10px 9px!important;font-size:12px}
 .head-brand .zp-brand-logo{width:93px}
 #page-home .hero{min-height:620px}
 #page-home .hero-inner{min-height:620px}
}
@media(max-width:900px){
 .wrap,.header .head-inner{width:calc(100% - 40px)}
 .head-nav{display:none}
 .mobile-nav-toggle{display:grid}
 .right-nav{margin-left:auto}
 #page-home .hero-inner{width:calc(100% - 48px);min-height:600px;padding:142px 0 105px}
 #page-home .hero{min-height:600px}
 #page-home .hero-bg{background-position:center,center,64% 45%!important}
 .zp-hero-mark{right:26px;top:147px;font-size:10px;opacity:.7}
 .zp-hero-mark:before{width:37px;height:37px;font-size:23px}
 #page-home .hero h1{max-width:550px;font-size:36px!important}
 #page-home .hero p{max-width:520px!important}
 #page-home .promos .wrap{width:calc(100% - 48px)}
}
@media(max-width:650px){
 body{font-size:13px}
 .wrap,.header .head-inner{width:calc(100% - 30px)}
 .header .head-inner{height:65px;gap:10px}
 .head-brand::before{width:29px;height:29px;flex-basis:29px;font-size:18px}
 .head-brand .zp-brand-logo{width:83px;max-height:45px}
 .right-nav{gap:5px}
 .right-nav .icon-button{width:35px;height:35px}
 .right-nav .zp-lang-btn{min-width:22px;padding:6px 5px}
 #page-home .hero{min-height:570px}
 #page-home .hero-inner{width:calc(100% - 34px);min-height:570px;padding:112px 0 98px;justify-content:flex-start}
 #page-home .hero-bg{background:
   linear-gradient(90deg,#0e0b0dd9,#0e0b0da4 64%,#0e0b0d70),
   linear-gradient(0deg,#0c0c0d 0%,transparent 43%,#0c0c0d20 100%),
   var(--site-hero-url) 65% 50% / cover no-repeat!important;
   background-size:100% 100%,100% 100%,cover!important;
   background-position:center,center,65% 50%!important}
 #page-home .hero:after{display:none}
 .zp-hero-mark{display:none}
 #page-home .zp-path-eyebrow{margin-bottom:17px;font-size:9px;letter-spacing:.11em;white-space:normal}
 #page-home .zp-path-eyebrow:before{width:20px}
 #page-home .hero-logo{width:min(260px,76vw)!important;margin:0 0 14px!important}
 #page-home .hero h1{font-size:clamp(24px,6.2vw,30px)!important;line-height:1.45!important;margin-bottom:12px!important;max-width:410px}
 #page-home .hero p{font-size:12.5px!important;line-height:1.8!important;max-width:400px!important}
 #page-home .hero-controls{margin-top:18px!important;gap:8px;flex-direction:column;align-items:flex-start!important}
 #page-home .hero .zp-main-cta{gap:8px}
 #page-home .hero .ip-chip,#page-home .hero .zp-hero-store{min-height:43px;padding:8px 12px!important}
 #page-home .hero .zp-hero-links{gap:0;flex-wrap:wrap}
 #page-home .hero .zp-hero-mini{min-height:30px;padding:7px 10px;font-size:11px}
 #page-home .hero-status{right:auto;left:17px;bottom:15px;max-width:calc(100vw - 34px);white-space:normal;flex-wrap:wrap;font-size:10px;padding:6px 9px}
 #page-home .section{padding:55px 0}
 #page-home .promos{padding:48px 0 48px!important}
 #page-home .promos .wrap{width:calc(100% - 30px)}
 #page-home .zp-promo-heading{gap:8px;flex-wrap:wrap;align-items:center}
 #page-home .promo-stage{height:300px}
 #page-home .promo-body{left:20px;width:calc(100% - 55px);top:46%;max-width:none}
 #page-home .promo-body h3{font-size:24px}
 #page-home .promo-body p{font-size:12px}
 #page-home .promo-illustration{top:18px;right:25px;font-size:73px;opacity:.27}
 #page-home .server-area{padding:40px 0 58px}
 #page-home .servers{grid-template-columns:1fr;gap:14px}
 #page-home .server-card{min-height:242px;height:242px;padding:23px}
 #page-home .server-card h3{font-size:29px}
 #page-home .server-card p{margin-bottom:10px}
 #page-home .zp-community-inner{display:block;text-align:left}
 #page-home .zp-community-inner h2{font-size:18px}
 #page-home .zp-community-inner .btn{margin-top:14px}
 #page-home .news-area{padding:55px 0 74px}
 .page-banner{min-height:190px;padding:50px 0 28px}
 .page-banner .wrap{padding-left:14px}
 .page-banner h1{font-size:30px}
 .subpage .inside{padding-top:28px;padding-bottom:54px}
 .footer{padding-top:42px}
 .zp-login-modal{border-radius:9px!important}
 .zp-login-inner{grid-template-columns:minmax(95px,.8fr) minmax(170px,1.2fr);gap:8px}
}
@media(max-width:380px){
 .right-nav .icon-button[data-route='topup']{display:none}
 .head-brand .zp-brand-logo{width:74px}
 #page-home .hero .zp-main-cta{flex-direction:column;align-items:flex-start}
 #page-home .hero{min-height:590px}
 #page-home .hero-inner{min-height:590px}
 #page-home .hero h1{font-size:24px!important}
}
@media(prefers-reduced-motion:reduce){.server-card,.btn,.head-nav button::after{transition:none!important}}


/* V7.9.1 / UI QA + mobile authentication: all original features retained. */
.zp-mobile-account{display:none;align-items:center;justify-content:center;gap:6px;min-height:39px;padding:0 11px;color:#fff2e8;background:#98313e;border:1px solid #d67970a3;border-radius:8px;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;flex:none;box-shadow:0 5px 15px #0004}
.zp-mobile-account:hover,.zp-mobile-account:focus-visible{background:#b93a4b}
.zp-mobile-account svg{width:15px;height:15px;flex-shrink:0;stroke-width:2.1}
.zp-mobile-language-row{display:none}
.mobile-menu .zp-mobile-menu-account{display:flex;align-items:center;gap:9px;background:linear-gradient(120deg,#a82e41,#692330);border:1px solid #d77d72a3;color:#fff;font-size:13px;font-weight:850;line-height:1.4}
.mobile-menu .zp-mobile-menu-account svg{width:17px;height:17px;flex-shrink:0}
.head-inner{min-width:0}
.head-brand{flex-shrink:0}
.right-nav{min-width:0}
/* Banners and cards: hide old seal watermarks, which previously competed with content. */
#page-home .promo-stage:after{content:none!important;display:none!important}
#page-home .promo-body{min-width:0}
#page-home .promo-body h3{overflow-wrap:anywhere}
#page-home .hero-inner{box-sizing:border-box}
#page-home .hero-logo{max-height:170px}
#page-home .hero-status{max-width:min(420px,calc(100vw - 35px))}
@media (max-width:900px){
  .right-nav .zp-language-switch{display:none!important}
  .right-nav .login-small{display:none!important}
  .right-nav .icon-button[data-route="topup"]{display:none!important}
  .zp-mobile-account{display:inline-flex!important}
  .mobile-nav-toggle{display:grid!important}
  .mobile-menu{top:calc(100% - 1px);right:20px;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;width:min(320px,calc(100vw - 40px));border-radius:0 0 13px 13px;padding:10px;background:#191416;border:1px solid #85645c69;box-shadow:0 24px 45px #000c}
  .mobile-menu .zp-mobile-language-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin:8px 0 5px;border-radius:8px;background:#251c1d;border:1px solid #75574e6b;color:#d6c6b8}
  .zp-mobile-language-title{font-size:12px;font-weight:650}
  .zp-mobile-language-buttons{display:flex;gap:4px}
  .mobile-menu .zp-mobile-language-buttons .zp-lang-btn{width:auto;min-width:42px;min-height:32px;border-radius:6px;padding:6px 10px;background:#382a2c;color:#dccdc5;font-size:11px;font-weight:800;text-align:center}
  .mobile-menu .zp-mobile-language-buttons .zp-lang-btn.is-active{background:#a5313d;color:#fff}
  .mobile-menu > button:not(.zp-mobile-menu-account){padding:10px 13px;min-height:38px}
  .head-brand .zp-brand-logo{max-width:100%}
}
@media (max-width:650px){
  .header .head-inner{gap:8px}
  .head-brand::before{font-size:9.5px;letter-spacing:-.05em}
  .right-nav{gap:5px}
  .zp-mobile-account{min-height:35px;padding:0 8px;gap:4px;font-size:11px;letter-spacing:-.02em;border-radius:7px}
  .zp-mobile-account svg{width:13px;height:13px}
  .mobile-menu{right:15px;width:min(315px,calc(100vw - 30px));max-height:calc(100dvh - 70px)}
  #page-home .hero-inner{padding-top:107px;padding-bottom:84px}
  #page-home .hero{min-height:545px}
  #page-home .hero-inner{min-height:545px}
  #page-home .zp-path-eyebrow{letter-spacing:.045em;font-size:10px}
  #page-home .hero-controls{max-width:100%}
  #page-home .hero .zp-main-cta{max-width:100%}
  #page-home .hero .zp-hero-links{max-width:100%}
  #page-home .hero-status{bottom:12px}
  #page-home .promo-stage{height:275px}
  #page-home .promo-body{width:calc(100% - 44px);left:20px}
  #page-home .promo-body h3{font-size:clamp(21px,6vw,25px)}
  .page-banner{min-height:178px}
  .footer .foot-grid{gap:18px}
  .zp-pay-route .zp-pay-heading h1{line-height:1.35}
}
@media (max-width:355px){
  .head-brand::before{display:none!important}
  .head-brand .zp-brand-logo{width:85px}
  .zp-mobile-account{padding:0 7px;font-size:10.5px}
  .right-nav .icon-button{width:33px;height:35px}
  .header .head-inner{gap:5px}
}
@media (max-width:380px){
  #page-home .hero .zp-hero-mini{padding:6px 7px;font-size:10.5px}
  #page-home .hero-controls .ip-chip{max-width:100%}
}

@media(max-width:900px){.mobile-menu .zp-mobile-nav-items button{display:block;width:100%;text-align:left;padding:10px 13px;min-height:38px;background:transparent;border:0;border-radius:7px;color:#e9dad1;font-size:13px;font-weight:650}.mobile-menu .zp-mobile-nav-items button:hover{background:#352629;color:#fff}}

/* V7.9.1: keep the login avatar and inputs within the modal on small phones. */
@media (max-width:420px){
 .zp-login-body{padding:12px 11px 19px!important}
 .zp-login-inner{grid-template-columns:minmax(75px,.74fr) minmax(0,1.26fr)!important;gap:8px!important;padding:14px 10px!important;min-width:0}
 .zp-login-avatar-wrap{height:198px}
 .zp-login-avatar{height:162px}
 .zp-login-fields{width:100%;min-width:0}
 .zp-login-editions{min-width:0;width:100%}
 .zp-login-editions button{min-width:0;font-size:10.8px;white-space:nowrap}
 .zp-login-fields input:not([type=checkbox]){max-width:100%;padding:0 9px!important}
 .zp-login-submit{width:100%;font-size:12px}
 .zp-login-head{padding:0 13px}
 .zp-login-head h2{font-size:15.5px;white-space:normal;line-height:1.35}
 .zp-login-helper{padding-top:14px}
}
@media (max-width:350px){
 .zp-login-body{padding:10px 9px 15px!important}
 .zp-login-inner{grid-template-columns:75px minmax(0,1fr)!important;gap:6px!important;padding:12px 8px!important}
 .zp-login-avatar{height:142px}
 .zp-login-avatar-wrap{height:182px}
 .zp-login-editions button svg{display:none}
 .zp-login-editions button{font-size:11px}
 .zp-login-submit{font-size:11px}
 .zp-login-helper{padding-top:10px}
}