/* PrivateCheatz hero — ported from pc-hero-split.html, prefixed to avoid Bootstrap/template collisions */
.pch-hero *,.pch-hero *::before,.pch-hero *::after{box-sizing:border-box}
:where(.pch-hero) :is(h1,h2,p){margin:0}   /* zero-specificity reset so .pch-headline/.pch-lede margins still win */
:root{
    --pch-bg:#0e141f; --pch-surf:#131722;
    --pch-ink:#f3f1ee; --pch-mut:#9aa3b2; --pch-faint:#6b7585;
    --pch-line:rgba(236,228,220,.09); --pch-line-2:rgba(236,228,220,.17);
    --pch-acc:#f66e61; --pch-acc-hi:#ff8f7f; --pch-grn:#4ade80;
    --pch-disp:"Chakra Petch",sans-serif; --pch-body:"Saira",system-ui,sans-serif;
    --pch-cut:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
    /* seam geometry — one source of truth for the diagonal */
    --pch-t:55%;   /* seam x at top    */
    --pch-b:68%;   /* seam x at bottom */
  }

  .pch-hero{position:relative;margin:0;min-height:100svh;display:flex;align-items:center;overflow:hidden;
    padding:clamp(84px,10vh,112px) clamp(28px,6vw,110px) clamp(40px,6vh,64px)}

  /* L0 — the real game viewport (fills the whole hero; carbon panel masks the left) */
  .pch-hero-bg{position:absolute;inset:0;z-index:0;background:#0b0f17 right center/cover no-repeat;
    background-image:url(../img/home-1/hero/pc-hero-game-v.jpg)}
  .pch-hero-bg::after{content:"";position:absolute;inset:0;
    background:
      linear-gradient(0deg,rgba(11,15,23,.72) 0%,rgba(11,15,23,.12) 42%,transparent 66%),
      radial-gradient(70% 80% at 72% 40%,transparent 40%,rgba(11,15,23,.5) 100%)}

  /* L1 — soft orange glow bleeding from the seam into the game */
  .pch-seamglow{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(246,110,97,.16);
    clip-path:polygon(0 0, calc(var(--pch-t) + 2.4%) 0, calc(var(--pch-b) + 2.4%) 100%, 0 100%)}
  /* L1 — the lit orange seam edge (thin) */
  .pch-seam{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--pch-acc);
    clip-path:polygon(0 0, calc(var(--pch-t) + 0.26%) 0, calc(var(--pch-b) + 0.26%) 100%, 0 100%)}
  /* L1 — carbon-fibre panel: navy twill, covers the left, sits on top of the seam to reveal a crisp edge */
  .pch-carbon{position:absolute;inset:0;z-index:1;
    clip-path:polygon(0 0, var(--pch-t) 0, var(--pch-b) 100%, 0 100%);
    background:
      repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),
      repeating-linear-gradient(-45deg,rgba(0,0,0,.24) 0 2px,transparent 2px 5px),
      radial-gradient(46% 54% at 20% 42%,rgba(246,110,97,.12),transparent 62%),
      linear-gradient(118deg,#0c121c 0%,#0e141f 58%,#121a2a 100%)}

  /* small HUD bracket in the game zone, top-right */
  .pch-brk{position:absolute;top:clamp(26px,4vh,44px);right:clamp(26px,5vw,64px);z-index:2;width:66px;height:66px;pointer-events:none;
    border-top:1.5px solid rgba(246,110,97,.55);border-right:1.5px solid rgba(246,110,97,.55)}
  .pch-brk::after{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;
    border-top:1.5px solid rgba(246,110,97,.32);border-right:1.5px solid rgba(246,110,97,.32)}

  .pch-wrap{position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto}
  .pch-inner{max-width:600px}
  /* H1 = brand line (small but prominent), H2 = the display tagline — matches the live site's heading order */
  .pch-eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:var(--pch-disp);font-weight:700;
    font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--pch-mut)}
  .pch-eyebrow::before{content:"";width:40px;height:2px;background:var(--pch-acc)}
  .pch-headline{font-family:var(--pch-disp);font-weight:700;font-size:clamp(40px,5.4vw,76px);line-height:.96;
    letter-spacing:-.015em;margin:24px 0 0;text-transform:uppercase}
  .pch-headline .pch-u{color:var(--pch-acc)}
  /* live-site announcement line (SEO-lock), slim and muted above the brand line */
  .pch-announce{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--pch-body);font-size:12.5px;
    color:var(--pch-mut);letter-spacing:.02em;text-transform:none;font-weight:400}
  .pch-announce b{font-family:var(--pch-disp);color:var(--pch-acc);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700}
  .pch-lede{margin-top:24px;max-width:46ch;color:#c3cad6;font-size:clamp(15.5px,1.4vw,18px);line-height:1.62}
  .pch-cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
  .pch-btn{font-family:var(--pch-disp);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
    text-decoration:none;padding:17px 32px;clip-path:var(--pch-cut);display:inline-flex;align-items:center;gap:11px;
    transition:transform .22s cubic-bezier(.2,.7,.3,1),background .22s,border-color .22s,color .22s}
  .pch-btn-primary{color:#241210;background:var(--pch-acc)}
  .pch-btn-primary:hover{background:var(--pch-acc-hi);transform:translateY(-2px)}
  .pch-btn-ghost{color:var(--pch-ink);border:1px solid var(--pch-line-2);background:rgba(16,22,33,.4)}
  .pch-btn-ghost:hover{border-color:var(--pch-acc);color:var(--pch-acc-hi)}
  .pch-btn svg{width:16px;height:16px}
  .pch-readout{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap;
    font-family:var(--pch-disp);font-size:13px;letter-spacing:.04em;color:var(--pch-mut)}
  .pch-readout .pch-st{display:inline-flex;align-items:center;gap:9px}
  .pch-readout b{color:var(--pch-ink);font-weight:700}
  .pch-readout .pch-dot{width:8px;height:8px;border-radius:50%;background:var(--pch-grn);
    box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:pch-pulse 2.6s infinite}
  @keyframes pch-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
  .pch-readout .pch-sep{width:1px;height:20px;background:var(--pch-line)}

  @media (max-width:860px){
    /* mobile: NO image. Carbon twill is the whole hero; the hero ends where the content ends. */
    .pch-seam,.pch-seamglow,.pch-brk,.pch-hero-bg{display:none}
    .pch-carbon{clip-path:none}
    .pch-hero{align-items:flex-start;min-height:auto;
      padding:clamp(92px,12vh,116px) clamp(24px,7vw,40px) clamp(48px,7vh,64px)}
    .pch-inner{max-width:none;width:100%}
    .pch-eyebrow{letter-spacing:.16em;font-size:12.5px}
    .pch-announce{display:block;line-height:1.5}
    .pch-announce b{display:block;margin-bottom:2px}
    .pch-headline{font-size:clamp(38px,10vw,52px)}
    .pch-lede{max-width:none}
    .pch-cta{margin-top:30px}
    .pch-readout{gap:12px 18px;margin-top:36px}
    .pch-readout .pch-sep{display:none}
  }
  @media (prefers-reduced-motion:reduce){.pch-readout .pch-dot{animation:none}.pch-btn{transition:none}}

/* ---- guards against template globals (main-pc.css: body{text-transform:uppercase;font-weight:600}, bare h1/h2 rules) ---- */
.pch-hero{color:var(--pch-ink);font-family:var(--pch-body);font-weight:400;text-transform:none}
.pch-hero .pch-headline{color:var(--pch-ink)}
.pch-hero .pch-lede{text-transform:none;font-weight:400}
.pch-hero .pch-readout{text-transform:none;font-weight:500}
.pch-hero .pch-readout b{font-weight:700}
/* the template header is position:absolute over the hero → leave room for it on desktop */
@media (min-width:861px){.pch-hero{padding-top:clamp(124px,15vh,156px)}}
/* our buttons: beat the template's global a:hover{color:theme} so the primary stays dark-on-orange */
.pch-hero .pch-btn-primary,.pch-hero .pch-btn-primary:hover{color:#241210}
.pch-hero .pch-btn-ghost{color:var(--pch-ink)}
.pch-hero .pch-btn-ghost:hover{color:var(--pch-acc-hi)}
/* entrance for the key-art only (CSS, no WOW) — the H1/H2 stay static so LCP is not delayed */
@keyframes pch-art-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.pch-hero .pch-hero-bg{animation:pch-art-in 1.1s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.pch-hero .pch-hero-bg{animation:none}}