/* Game hero v1 — split hero with stage, orbit rings, parallax art */
.gh{--g:#3b9dff;--g2:#22d3ee;position:relative;padding:128px 24px 0;overflow:hidden;isolation:isolate}
.gh::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 60% at 76% 46%,color-mix(in srgb,var(--g) 24%,transparent),transparent 70%),radial-gradient(40% 40% at 6% 92%,color-mix(in srgb,var(--g2) 12%,transparent),transparent 70%)}
.gh::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(color-mix(in srgb,var(--text) 14%,transparent) 1px,transparent 1.4px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(70% 70% at 70% 45%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 45%,#000,transparent 75%);opacity:.55}
.gh-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:center;min-height:500px}
.gh-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 14px;border-radius:99px;color:var(--g);background:color-mix(in srgb,var(--g) 12%,transparent);border:1px solid color-mix(in srgb,var(--g) 35%,transparent)}
.gh-pill i{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.gh h1{font:800 clamp(40px,5.6vw,68px)/1 'Bricolage Grotesque','Inter',sans-serif;letter-spacing:-.045em;margin:18px 0 16px}
.gh h1 em{font-style:normal;background:linear-gradient(100deg,var(--g),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.gh-lead{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:480px;margin:0 0 22px}
.gh-feats{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.gh-feats li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--card-border)}
.gh-feats svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;color:var(--g);background:color-mix(in srgb,var(--g) 14%,transparent)}
.gh-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gh-price{position:relative;padding:9px 18px 9px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--g) 32%,transparent);box-shadow:inset 3px 0 0 var(--g);background:color-mix(in srgb,var(--g) 9%,transparent)}
.gh-price small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gh-price b{font:800 28px/1.1 'Bricolage Grotesque','Inter',sans-serif;letter-spacing:-.03em}
.gh-price span{font-size:13px;color:var(--muted);margin-left:3px}
.gh-btn{display:inline-flex;align-items:center;gap:8px;font:700 14.5px 'Inter',sans-serif;padding:14px 22px;border-radius:13px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.gh-btn.pri{color:#fff;background:linear-gradient(135deg,var(--g),color-mix(in srgb,var(--g) 65%,#000));box-shadow:0 10px 28px -8px var(--g)}
.gh-btn.sec{color:var(--text);background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid var(--card-border)}
.gh-btn:hover{transform:translateY(-2px)}.gh-btn svg{width:16px;height:16px}
/* art stage */
.gh-art{position:relative;height:460px;display:grid;place-items:center;perspective:1000px}
.gh-art::before{content:'';position:absolute;left:50%;bottom:34px;width:76%;height:46px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--g) 55%,transparent),transparent);filter:blur(10px)}
.gh-ring{position:absolute;left:50%;top:50%;border-radius:50%;translate:-50% -50%;pointer-events:none}
.gh-ring.r1{width:min(88%,430px);aspect-ratio:1;border:1px dashed color-mix(in srgb,var(--g) 45%,transparent);animation:ghSpin 40s linear infinite}
.gh-ring.r2{width:min(68%,330px);aspect-ratio:1;background:conic-gradient(from 0deg,transparent 0 62%,var(--g) 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:ghSpin 7s linear infinite reverse;opacity:.8}
.gh-ring.r1::after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--g2);box-shadow:0 0 14px var(--g2)}
.gh-img{position:relative;z-index:2;width:min(100%,520px);height:auto;filter:drop-shadow(0 24px 38px rgba(0,0,0,.5));transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .25s ease-out;animation:ghFloat 6s ease-in-out infinite}
.gh-img.frame{width:min(92%,470px);aspect-ratio:16/10;object-fit:cover;border-radius:26px;border:1px solid color-mix(in srgb,var(--g) 40%,transparent);rotate:-3deg;box-shadow:0 30px 70px -24px var(--g)}
.gh-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:8px 13px 8px 9px;border-radius:13px;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid var(--card-border);backdrop-filter:blur(10px);box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:ghFloat 5s ease-in-out infinite}
.gh-chip svg{width:24px;height:24px;padding:5px;border-radius:8px;color:var(--g);background:color-mix(in srgb,var(--g) 15%,transparent)}
.gh-chip.c1{top:8%;left:2%}.gh-chip.c2{top:34%;right:-1%;animation-delay:-1.4s}.gh-chip.c3{bottom:12%;left:6%;animation-delay:-2.6s}
.gh-chip.c4{bottom:4%;right:4%;animation-delay:-3.6s;flex-direction:column;align-items:flex-start;gap:5px;padding:9px 12px}
.gh-chip.c4 span{display:flex;align-items:center;gap:6px;font-size:11px}.gh-chip.c4 span::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.gh-chip.c4 u{display:flex;gap:3px;align-items:flex-end;height:16px;text-decoration:none}.gh-chip.c4 u i{width:4px;border-radius:2px;background:var(--g);animation:ghBar 1.6s ease-in-out infinite}
.gh-chip.c4 u i:nth-child(1){height:6px}.gh-chip.c4 u i:nth-child(2){height:11px;animation-delay:-.3s}.gh-chip.c4 u i:nth-child(3){height:8px;animation-delay:-.6s}.gh-chip.c4 u i:nth-child(4){height:15px;animation-delay:-.9s}.gh-chip.c4 u i:nth-child(5){height:10px;animation-delay:-1.2s}
.gh-bar{max-width:1180px;margin:34px auto 0;padding:18px 0;border-top:1px solid var(--card-border);display:flex;justify-content:center;flex-wrap:wrap;gap:12px 38px;font-size:13px;font-weight:600}
.gh-bar span,.gh-bar a{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none}
.gh-bar svg{width:16px;height:16px;color:var(--g)}.gh-bar a{color:var(--g)}
@keyframes ghSpin{to{rotate:360deg}}
@keyframes ghFloat{50%{translate:0 -9px}}
@keyframes ghBar{50%{transform:scaleY(.45)}}
@media(max-width:900px){.gh{padding:104px 18px 0}.gh-in{grid-template-columns:1fr;gap:10px}.gh-art{height:360px;order:-1}.gh-chip.c2{right:0}.gh-lead{max-width:none}}
@media(max-width:520px){.gh-feats{grid-template-columns:1fr}.gh-chip.c3{display:none}.gh-btn{flex:1;justify-content:center}.gh-art{height:320px}}
@media(prefers-reduced-motion:reduce){.gh *{animation:none!important;transition:none!important}}
/* ── v2: cutout sizing, particle fx per game, service art panels ── */
.gh-img{width:auto;max-width:min(100%,520px);max-height:430px}
.gh-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.gh-fx s{position:absolute;bottom:-12px;width:9px;height:9px;opacity:0;background:var(--g2);box-shadow:0 0 12px var(--g2);animation:ghRise 7s linear infinite}
.gh-fx s:nth-child(1){left:8%}.gh-fx s:nth-child(2){left:19%;animation-delay:-2s;width:6px;height:6px}.gh-fx s:nth-child(3){left:31%;animation-delay:-4s}.gh-fx s:nth-child(4){left:44%;animation-delay:-1s;width:12px;height:12px}
.gh-fx s:nth-child(5){left:58%;animation-delay:-3s;width:6px;height:6px}.gh-fx s:nth-child(6){left:70%;animation-delay:-5s}.gh-fx s:nth-child(7){left:82%;animation-delay:-1.5s;width:12px;height:12px}.gh-fx s:nth-child(8){left:92%;animation-delay:-3.5s;width:7px;height:7px}
.fx-hytale s{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--g)}
.fx-palworld s{border-radius:50%;background:transparent;border:1.5px solid var(--g);box-shadow:inset 0 0 6px var(--g)}
.fx-ark s{border-radius:50%;background:var(--g);filter:blur(.6px);animation-duration:5s}
.fx-mc s{border-radius:2px;background:var(--g);box-shadow:none;rotate:12deg}.fx-mc s:nth-child(even){background:var(--g2)}
@keyframes ghRise{0%{translate:0 0;opacity:0}15%{opacity:.9}100%{translate:14px -440px;opacity:0}}
/* shared glass window for service pages */
.gh-win{position:relative;z-index:2;width:min(100%,430px);border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--card) 88%,#000);border:1px solid color-mix(in srgb,var(--g) 38%,transparent);box-shadow:0 34px 70px -26px var(--g),0 0 0 1px rgba(255,255,255,.04) inset;rotate:-2.5deg;animation:ghFloat 6s ease-in-out infinite;font-family:'Inter',sans-serif}
.gh-wh{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--card-border);font-size:12px;font-weight:600;color:var(--muted)}
.gh-wh i{width:10px;height:10px;border-radius:50%;background:#ef4444}.gh-wh i:nth-child(2){background:#f59e0b}.gh-wh i:nth-child(3){background:#22c55e}.gh-wh span{margin-left:8px}
.gh-term{padding:18px 18px 22px;font:500 13px/2 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:210px}
.gh-term p{margin:0;opacity:0;animation:ghShow .01s forwards}.gh-term b{color:var(--g)}.gh-term .ok{color:#4ade80}.gh-term u{display:inline-block;width:8px;height:15px;vertical-align:middle;background:var(--g);animation:ghBlink 1s steps(2) infinite}
.gh-term p:nth-child(1){animation-delay:.3s}.gh-term p:nth-child(2){animation-delay:1.4s}.gh-term p:nth-child(3){animation-delay:2.3s}.gh-term p:nth-child(4){animation-delay:3.2s}.gh-term p:nth-child(5){animation-delay:4s}
.gh-mt{padding:20px 20px 24px;display:grid;gap:18px}.gh-m{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px;font-size:12.5px;font-weight:600}
.gh-m em{height:9px;border-radius:9px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}.gh-m em b{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,var(--g),var(--g2));animation:ghGrow 2.4s ease-out both}.gh-m u{text-decoration:none;color:var(--muted);font-weight:700}
.gh-rack{position:relative;z-index:2;width:min(100%,380px);display:grid;gap:9px;rotate:-2deg;animation:ghFloat 6s ease-in-out infinite}
.gh-u{display:flex;align-items:center;gap:7px;padding:15px 18px;border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 95%,#fff),color-mix(in srgb,var(--card) 85%,#000));border:1px solid color-mix(in srgb,var(--g) 30%,transparent);box-shadow:0 14px 30px -16px var(--g)}
.gh-u i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:ghBlink 1.4s steps(2) infinite}.gh-u i:nth-child(2){background:var(--g);box-shadow:0 0 8px var(--g);animation-delay:-.5s}.gh-u i:nth-child(3){animation-delay:-.9s}
.gh-u b{margin-left:auto;width:46%;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 22%,transparent) 0 3px,transparent 3px 8px)}
.gh-u:nth-child(2){margin-left:18px}.gh-u:nth-child(4){margin-left:-12px}
.gh-desk{position:relative;height:230px;padding:16px;display:grid;grid-template-columns:repeat(4,44px);grid-auto-rows:44px;gap:14px;align-content:start;background:radial-gradient(90% 90% at 80% 10%,color-mix(in srgb,var(--g) 30%,transparent),transparent)}
.gh-desk i{border-radius:11px;background:color-mix(in srgb,var(--g) 22%,transparent);border:1px solid color-mix(in srgb,var(--g) 40%,transparent)}.gh-desk i:nth-child(3n){background:color-mix(in srgb,var(--g2) 25%,transparent)}
.gh-desk p{position:absolute;right:16px;bottom:50px;width:56%;margin:0;padding:11px 13px;border-radius:12px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--card) 92%,#000);border:1px solid var(--card-border);animation:ghFloat 4s ease-in-out infinite}.gh-desk p span{display:block;color:#4ade80;font-size:11px;margin-top:3px}
.gh-task{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--card-border);font-size:11px;color:var(--muted)}.gh-task i{width:14px;height:14px;border-radius:4px;background:var(--g)}.gh-task i+i{background:var(--card-border);width:60px}.gh-task b{margin-left:auto}
.gh-chat{padding:18px;display:grid;gap:12px}.gh-chat p{margin:0;max-width:82%;padding:11px 14px;border-radius:16px;font-size:13px;font-weight:600;line-height:1.5}
.gh-chat .u{justify-self:end;background:color-mix(in srgb,var(--g) 22%,transparent);border-bottom-right-radius:5px}.gh-chat .b{background:color-mix(in srgb,var(--text) 8%,transparent);border-bottom-left-radius:5px}.gh-chat em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 6px;margin-right:6px;border-radius:5px;background:var(--g2);color:#fff}.gh-chat .ok{color:#4ade80;display:block;margin-top:3px;font-size:11.5px}
@keyframes ghShow{to{opacity:1}}@keyframes ghBlink{50%{opacity:.2}}@keyframes ghGrow{from{width:0}}@keyframes ghTravel{50%{left:calc(100% - 44px)}100%{left:34px}}
@media(max-width:900px){.gh-win{rotate:0deg}}

/* v3: service pages get their own composition (no rings), proxy gateway panel */
.gh:is([data-svc=vps],[data-svc=vds],[data-svc=dedicated],[data-svc=rdp],[data-svc=proxy],[data-svc=bot]) .gh-ring,.gh:is([data-svc=vps],[data-svc=vds],[data-svc=dedicated],[data-svc=rdp],[data-svc=proxy],[data-svc=bot]) .gh-art::before{display:none}
.gh:is([data-svc=vps],[data-svc=vds],[data-svc=rdp],[data-svc=bot],[data-svc=proxy]) .gh-win{box-shadow:16px 16px 0 -3px color-mix(in srgb,var(--g) 14%,transparent),32px 32px 0 -6px color-mix(in srgb,var(--g) 7%,transparent),0 34px 70px -26px var(--g)}
.gh:is([data-svc=vps],[data-svc=vds],[data-svc=rdp],[data-svc=bot]) .c1{top:2%;left:auto;right:4%}.gh:is([data-svc=vps],[data-svc=vds],[data-svc=rdp],[data-svc=bot]) .c2{top:auto;bottom:22%;right:-2%}.gh:is([data-svc=vps],[data-svc=vds],[data-svc=rdp],[data-svc=bot]) .c3{bottom:5%;left:0}.gh:is([data-svc=vps],[data-svc=vds],[data-svc=rdp],[data-svc=bot]) .c4{top:26%;left:-3%;bottom:auto;right:auto}
.gh:is([data-svc=proxy],[data-svc=dedicated]) .c1{top:0;left:24%}.gh:is([data-svc=proxy],[data-svc=dedicated]) .c2{top:44%;right:-3%}.gh:is([data-svc=proxy],[data-svc=dedicated]) .c3{bottom:2%;left:6%}.gh:is([data-svc=proxy],[data-svc=dedicated]) .c4{top:12%;right:2%;bottom:auto}
.gh-tabs{display:flex;align-items:center;gap:8px;padding:14px 16px 2px}.gh-tabs b{font-size:12px;padding:6px 14px;border-radius:99px;border:1px solid var(--card-border);color:var(--muted)}.gh-tabs b.on{background:var(--g);border-color:var(--g);color:#fff}.gh-tabs em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:#4ade80}
.gh-px{padding:12px 16px 18px;display:grid;gap:10px}.gh-pr{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--text) 6%,transparent)}
.gh-pr span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;font-size:11px;font-weight:800;color:var(--g);background:color-mix(in srgb,var(--g) 18%,transparent)}.gh-pr b{display:block;font-size:13.5px}.gh-pr small{font-size:11px;color:var(--muted)}.gh-pr u{text-decoration:none;font-size:12px;font-weight:700;color:#4ade80}
.gh-pr i{position:absolute;left:0;bottom:0;height:2px;width:var(--w);background:linear-gradient(90deg,var(--g),var(--g2));animation:ghGrow 2.4s ease-out both}

/* ═════════ v4: normal readable hero text + a different text/layout combo per page ═════════ */
.gh h1{font:800 clamp(34px,4.7vw,58px)/1.06 'Inter',system-ui,sans-serif;letter-spacing:-.035em;color:var(--white);margin:18px 0 16px}
.gh-lead{color:var(--text);opacity:.82;font-size:16px;line-height:1.7}
.gh-feats li{color:var(--white);font-weight:600}
.gh-price b{font:800 28px/1.1 'Inter',system-ui,sans-serif;letter-spacing:-.02em;color:var(--white)}
.gh-price small,.gh-price span{color:var(--text);opacity:.7}

/* feature list styles */
.gh:is([data-svc=vps],[data-svc=proxy],[data-svc=palworld],[data-svc=bot]) .gh-feats{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.gh:is([data-svc=vps],[data-svc=proxy],[data-svc=palworld],[data-svc=bot]) .gh-feats li{padding:8px 14px 8px 10px;border-radius:99px;font-size:13px}
.gh:is([data-svc=vds],[data-svc=dedicated],[data-svc=hytale]) .gh-feats{grid-template-columns:1fr;gap:4px;max-width:430px}
.gh:is([data-svc=vds],[data-svc=dedicated],[data-svc=hytale]) .gh-feats li{background:none;border:0;border-radius:0;border-left:2px solid color-mix(in srgb,var(--g) 60%,transparent);padding:7px 0 7px 14px}
.gh:is([data-svc=vds],[data-svc=dedicated],[data-svc=hytale]) .gh-feats svg{display:none}
.gh:is([data-svc=mcPower],[data-svc=rdp],[data-svc=ark]) .gh-feats{counter-reset:ghf}
.gh:is([data-svc=mcPower],[data-svc=rdp],[data-svc=ark]) .gh-feats li{counter-increment:ghf}
.gh:is([data-svc=mcPower],[data-svc=rdp],[data-svc=ark]) .gh-feats svg{display:none}
.gh:is([data-svc=mcPower],[data-svc=rdp],[data-svc=ark]) .gh-feats li::before{content:counter(ghf,decimal-leading-zero);font:800 12px 'Inter',sans-serif;letter-spacing:.04em;color:var(--g)}

/* heading accent word styles */
.gh:is([data-svc=vps],[data-svc=rdp],[data-svc=bot],[data-svc=ark]) h1 em{background:none;color:var(--g);-webkit-text-fill-color:var(--g);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.14em;text-decoration-color:color-mix(in srgb,var(--g) 50%,transparent)}
.gh:is([data-svc=vds],[data-svc=dedicated],[data-svc=palworld]) h1 em{color:var(--white);-webkit-text-fill-color:var(--white);background:linear-gradient(transparent 60%,color-mix(in srgb,var(--g) 42%,transparent) 60%);-webkit-background-clip:border-box;background-clip:border-box;padding:0 .08em}

/* price block: plain inline price on some pages */

/* layout: art on the left / copy on the right for half the pages */
@media(max-width:900px){.gh-in{grid-template-columns:1fr !important}}

/* v5 buttons */
.gh .gh-buy .gh-btn.pri{padding:15px 24px;border-radius:14px;box-shadow:0 14px 32px -10px var(--g),inset 0 1px 0 rgba(255,255,255,.25)}
.gh .gh-buy .gh-btn.pri:hover{box-shadow:0 18px 38px -8px var(--g),inset 0 1px 0 rgba(255,255,255,.3)}
.gh .gh-buy .gh-btn.sec{padding:15px 22px;border-radius:14px;backdrop-filter:blur(8px)}
.gh .gh-buy .gh-btn.sec:hover{border-color:color-mix(in srgb,var(--g) 55%,transparent)}
/* trust bar: reviews link as a soft pill */
.gh-bar a[data-reviews-link]{padding:6px 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--g) 40%,transparent);background:color-mix(in srgb,var(--g) 10%,transparent);transition:background .2s,transform .2s}
.gh-bar a[data-reviews-link]:hover{background:color-mix(in srgb,var(--g) 20%,transparent);transform:translateY(-1px)}