/* Kronos Shop hero — single mascot-led composition */
#kx-hero.kx-hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  grid-template-areas: "copy stage" "proof proof";
  align-items: center;
  gap: 10px 30px;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 650px;
  margin: 18px 0 34px;
  padding: 48px 58px 26px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  background: radial-gradient(ellipse at 78% 48%, rgba(138,133,124,.13), transparent 42%), linear-gradient(120deg,#080808 0%,#080808 44%,#111110 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 28px 90px rgba(0,0,0,.34);
}
#kx-hero.kx-hero2 > * { position: relative; z-index: 1; }
#kx-hero .kx-bg { z-index: 0 !important; inset: 0; overflow: hidden; pointer-events: none; }
#kx-hero .kx-bg::before { display:none; }
#kx-hero .kx-bg::after { content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,7,.30) 0%,rgba(7,7,7,.14) 36%,transparent 68%),linear-gradient(0deg,rgba(7,7,7,.48),transparent 25%); }
#kx-hero .kx-halo { position:absolute; display:block; border:1px solid rgba(255,255,255,.09); border-radius:50%; }
#kx-hero .kx-halo-a { width:580px;height:580px;right:2%;top:50%;transform:translateY(-53%);box-shadow:0 0 90px rgba(213,203,183,.06),inset 0 0 70px rgba(255,255,255,.025); }
#kx-hero .kx-halo-b { width:450px;height:450px;right:7%;top:50%;transform:translateY(-53%);border-color:rgba(255,255,255,.055); }
#kx-hero .kx-grain { position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");mix-blend-mode:soft-light; }
#kx-hero .kx-hl { grid-area:copy; z-index:3; align-self:center; max-width:570px; padding:5px 0 22px; }
#kx-hero .kx-eyebrow { display:flex;align-items:center;gap:10px;margin:0 0 23px;color:#c4c0b8;font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.18em; }
#kx-hero .kx-eyebrow i { width:7px;height:7px;border-radius:50%;background:#c7bda9;box-shadow:0 0 16px rgba(213,193,159,.55); }
#kx-hero .kx-eyebrow span { color:#66645f; }
#kx-hero .kx-hl h1 { margin:0;max-width:610px;font:650 clamp(42px,5vw,70px)/.99 Inter,system-ui,sans-serif;letter-spacing:-.055em;color:#f7f6f4; }
#kx-hero .kx-hl h1 em { color:#e4c58d;font-style:normal; }
#kx-hero .kx-hl p { max-width:490px;margin:23px 0 0;color:#a6a4a0;font:400 16px/1.7 Inter,system-ui,sans-serif; }
#kx-hero .kx-cta { display:flex;justify-content:flex-start;gap:12px;margin-top:30px; }
#kx-hero .kx-btn { flex:0 0 auto;min-height:54px;height:auto;padding:0 23px;clip-path:none;border-radius:14px;font:600 14px/1 Inter,system-ui,sans-serif;transition:transform .22s,background .22s,border-color .22s,box-shadow .22s; }
#kx-hero .kx-btn:hover { transform:translateY(-2px);filter:none; }
#kx-hero .kx-main { color:#101010;background:#f4f3f0;border:1px solid #f4f3f0;box-shadow:0 7px 25px rgba(255,255,255,.09); }
#kx-hero .kx-main:hover { background:#fff;box-shadow:0 10px 35px rgba(255,255,255,.17); }
#kx-hero .kx-ghost { color:#f1f0ed!important;background:rgba(12,12,12,.88)!important;border:1px solid rgba(255,255,255,.3)!important; }
#kx-hero .kx-ghost::before { display:none;clip-path:none; }
#kx-hero .kx-ghost:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.42); }
#kx-hero .kx-proof { display:flex;align-items:center;gap:12px;margin-top:27px;color:#f0efec; }
#kx-hero .kx-proof-icon { display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.045);color:#d8d4ca; }
#kx-hero .kx-proof span:last-child { display:grid;gap:4px; }
#kx-hero .kx-proof b { font:600 12px/1 Inter,system-ui,sans-serif; }
#kx-hero .kx-proof small { color:#898782;font:400 11px/1.2 Inter,system-ui,sans-serif; }
#kx-hero .kx-hero-stage { grid-area:stage;position:relative;align-self:stretch;min-height:515px;isolation:isolate;overflow:visible; }
#kx-hero .kx-hero-scene { position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 51%;filter:saturate(.88) contrast(1.02);animation:kxSceneDrift 18s ease-in-out infinite alternate; }
#kx-hero .kx-stage-chip { position:absolute;z-index:2;display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(17,17,17,.77);box-shadow:0 14px 36px rgba(0,0,0,.3);backdrop-filter:blur(14px);color:#f0efec;font:600 11px/1 Inter,system-ui,sans-serif;white-space:nowrap; }
#kx-hero .kx-chip-one { left:1%;top:24%;animation:kxChipFloat 7s ease-in-out infinite; }
#kx-hero .kx-chip-dot { width:7px;height:7px;border-radius:50%;background:#b8ad98;box-shadow:0 0 13px rgba(211,190,153,.75); }
#kx-hero .kx-chip-two { right:0;top:11%;font-size:14px;animation:kxChipFloat 8s ease-in-out -2s infinite; }
#kx-hero .kx-chip-two small { color:#9d9a94;font-size:10px;font-weight:500; }
#kx-hero .kx-stage-spark { position:absolute;z-index:2;width:4px;height:4px;border-radius:50%;background:#d2c7b3;box-shadow:0 0 16px 4px rgba(210,199,179,.21); }
#kx-hero .kx-spark-one { top:17%;left:22%; }#kx-hero .kx-spark-two { right:7%;bottom:22%;width:3px;height:3px!important; }
#kx-hero .kx-pills { grid-area:proof;display:flex;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin:0;padding-top:15px;border-top:1px solid rgba(255,255,255,.09); }
#kx-hero .kx-pill { display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.12)!important;border-radius:999px;background:rgba(255,255,255,.025)!important;color:#b7b5b0;font:500 11px/1 Inter,system-ui,sans-serif; }
#kx-hero .kx-pill .pl-i { color:#d7d2c8;opacity:.9; }
#kx-hero .kx-pill b { color:#f0efec; }
@keyframes kxSceneDrift { from{transform:scale(1)}to{transform:scale(1.035)} }
@keyframes kxChipFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@media(max-width:1000px) {
  #kx-hero.kx-hero2 { width:100%;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);min-height:580px;padding:38px 34px 22px;gap:6px 16px; }
  #kx-hero .kx-hl h1 { font-size:clamp(42px,5.8vw,59px); }
  #kx-hero .kx-hero-stage { min-height:440px; }
  #kx-hero .kx-hero-scene { object-position:72% center; }
  #kx-hero .kx-halo-a { width:440px;height:440px;right:-5%; }
  #kx-hero .kx-halo-b { width:350px;height:350px;right:4%; }
  #kx-hero .kx-chip-one { left:-2%; }
}
@media(max-width:700px) {
  #kx-hero.kx-hero2 { width:100%;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "proof";gap:0;margin:14px 0 25px;padding:30px 22px 18px;border-radius:26px; }
  #kx-hero .kx-hl { max-width:none;padding:0; }
  #kx-hero .kx-eyebrow { margin-bottom:17px;font-size:10px; }
  #kx-hero .kx-hl h1 { max-width:520px;font-size:clamp(40px,10vw,58px); }
  #kx-hero .kx-hl p { max-width:540px;margin-top:16px;font-size:14px;line-height:1.6; }
  #kx-hero .kx-cta { gap:9px;margin-top:21px; }
  #kx-hero .kx-btn { flex:1 1 50%;min-width:0;min-height:49px;padding:0 12px;border-radius:12px;font-size:12px;white-space:nowrap; }
  #kx-hero .kx-hero-stage { min-height:300px;margin-top:4px; }
  #kx-hero .kx-bg::after { background:linear-gradient(0deg,rgba(7,7,7,.68),transparent 36%),linear-gradient(90deg,rgba(7,7,7,.12),transparent 45%); }
  #kx-hero .kx-hero-scene { inset:auto -12px 76px auto;width:calc(100% + 24px);height:auto;aspect-ratio:16/9;object-fit:cover;object-position:74% center; }
  #kx-hero .kx-halo-a { width:310px;height:310px;right:50%;transform:translate(50%,-50%); }
  #kx-hero .kx-halo-b { width:245px;height:245px;right:50%;transform:translate(50%,-50%); }
  #kx-hero .kx-stage-glow { width:72%;height:70%;right:14%;top:15%; }
  #kx-hero .kx-chip-one { left:0;top:20%; }
  #kx-hero .kx-chip-two { right:0;top:10%; }
  #kx-hero .kx-pills { justify-content:flex-start;gap:7px;padding-top:13px; }
  #kx-hero .kx-pill { padding:8px 10px;font-size:10px; }
}
@media(max-width:390px) {
  #kx-hero.kx-hero2 { padding-right:16px;padding-left:16px; }
  #kx-hero .kx-hl h1 { font-size:39px; }
  #kx-hero .kx-btn { padding:0 8px;font-size:11px; }
  #kx-hero .kx-chip-one { font-size:9px;padding:9px 11px; }
  #kx-hero .kx-stage-chip { font-size:10px;padding:9px 11px; }
}
@media(prefers-reduced-motion:reduce) { #kx-hero .kx-hero-scene,#kx-hero .kx-stage-chip { animation:none!important; } }

/* Hero carousel controls and restrained cross-fades. */
#kx-hero .kx-hero-scene,#kx-hero .kx-hl { transition:opacity .24s ease,transform .24s ease; }
#kx-hero.kx-slide-out .kx-hl { opacity:0;transform:translateY(8px); }
#kx-hero.kx-slide-out .kx-hero-scene { opacity:.18; }
#kx-hero.kx-slide-in .kx-hl { animation:kxCopyEnter .42s ease both; }
#kx-hero.kx-slide-in .kx-hero-scene { animation:kxImageEnter .58s ease both,kxSceneDrift 18s ease-in-out infinite alternate; }
@keyframes kxCopyEnter { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes kxImageEnter { from{opacity:.2}to{opacity:1} }
#kx-hero .kx-carousel { display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:12px; }
#kx-hero .kx-carousel-dots { display:flex;align-items:center;gap:6px; }
#kx-hero .kx-carousel-dot,#kx-hero .kx-carousel-arrow { display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);color:#ddd8ce;cursor:pointer;transition:width .24s,background .2s,border-color .2s,transform .2s; }
#kx-hero .kx-carousel-dot { width:8px;height:8px;border-radius:9px; }
#kx-hero .kx-carousel-dot.is-active { width:24px;background:#d7c29a;border-color:#d7c29a; }
#kx-hero .kx-carousel-arrow { width:28px;height:28px;border-radius:50%;font:500 18px/1 Inter,system-ui,sans-serif; }
#kx-hero .kx-carousel-arrow:hover { background:rgba(255,255,255,.12);transform:scale(1.06); }
#kx-hero .kx-carousel button:focus-visible { outline:2px solid #e4c58d;outline-offset:3px; }
@media(max-width:700px) {
  #kx-hero .kx-pills { position:relative; }
  #kx-hero .kx-carousel { flex:1 0 100%;justify-content:center;margin:4px auto 0;padding:0; }
}
@media(prefers-reduced-motion:reduce) {
  #kx-hero .kx-hero-scene,#kx-hero .kx-hl,#kx-hero .kx-carousel-dot,#kx-hero .kx-carousel-arrow { transition:none!important;animation:none!important; }
}

/* Compact desktop hero: keep the same full-bleed art in a shorter, half-height frame. */
@media(min-width:701px) {
  #kx-hero.kx-hero2 { height:408px;min-height:408px;grid-template-rows:minmax(0,1fr) auto;gap:6px 24px;padding:27px 46px 17px; }
  #kx-hero .kx-hl { max-width:540px;padding:0; }
  #kx-hero .kx-eyebrow { margin-bottom:13px;font-size:10px; }
  #kx-hero .kx-hl h1 { max-width:530px;font-size:clamp(36px,4.05vw,55px);line-height:.97; }
  #kx-hero .kx-hl p { max-width:460px;margin-top:14px;font-size:14px;line-height:1.52; }
  #kx-hero .kx-cta { gap:10px;margin-top:19px; }
  #kx-hero .kx-btn { min-height:48px;padding:0 19px;font-size:13px; }
  #kx-hero .kx-hero-stage { min-height:0;height:100%; }
  #kx-hero .kx-pills { gap:8px;padding-top:11px; }
  #kx-hero .kx-pill { padding:8px 11px;font-size:10px; }
}
@media(max-width:1000px) and (min-width:701px) {
  #kx-hero.kx-hero2 { height:390px;min-height:390px;padding:23px 28px 15px;gap:5px 14px; }
  #kx-hero .kx-hl h1 { font-size:clamp(34px,4.7vw,45px); }
  #kx-hero .kx-hl p { font-size:13px; }
  #kx-hero .kx-btn { padding:0 13px;font-size:12px; }
}
/* Slide text rises into place and the image reveals upward from the lower edge. */
#kx-hero.kx-slide-out .kx-hl { opacity:0;transform:translateY(-20px); }
#kx-hero.kx-slide-out .kx-hero-scene { opacity:.12;transform:translateY(-12px) scale(1.02); }
#kx-hero.kx-slide-in .kx-hl { animation:kxCopyEnter .48s cubic-bezier(.2,.7,.2,1) both; }
#kx-hero.kx-slide-in .kx-hero-scene { animation:kxImageEnter .62s cubic-bezier(.2,.7,.2,1) both,kxSceneDrift 18s ease-in-out infinite alternate; }
@keyframes kxCopyEnter { from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)} }
@keyframes kxImageEnter { from{opacity:.25;clip-path:inset(58% 0 0)}to{opacity:1;clip-path:inset(0)} }
@media(prefers-reduced-motion:reduce) {
  #kx-hero.kx-slide-out .kx-hl,#kx-hero.kx-slide-out .kx-hero-scene { transform:none; }
  #kx-hero.kx-slide-in .kx-hl,#kx-hero.kx-slide-in .kx-hero-scene { animation:none!important;clip-path:none;opacity:1; }
}

/* Place the carousel controls at the marked right-side point, away from the trust row. */
#kx-hero .kx-pills { position:static!important; }
#kx-hero .kx-carousel { position:absolute;z-index:5;right:12px;top:51%;transform:translateY(-50%);display:flex;flex-direction:column;margin:0;padding:9px 7px;gap:7px;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(9,9,9,.58);box-shadow:0 8px 30px rgba(0,0,0,.24);backdrop-filter:blur(12px); }
#kx-hero .kx-carousel-dots { flex-direction:column;gap:7px; }
#kx-hero .kx-carousel-arrow { width:30px;height:30px;background:rgba(255,255,255,.045); }
#kx-hero .kx-carousel-arrow[data-dir] { transform:rotate(90deg); }
#kx-hero .kx-carousel-arrow[data-dir]:hover { transform:rotate(90deg) scale(1.06); }
#kx-hero .kx-carousel-dot { background:rgba(255,255,255,.12); }
#kx-hero .kx-carousel-dot.is-active { width:8px;height:22px; }
#kx-hero .kx-carousel-dot.is-active { background:#d7c29a; }

/* Rework slide motion as a lateral, directional glide with a soft focus transition. */
#kx-hero .kx-hl { transition:opacity .24s ease,transform .24s ease,filter .24s ease; }
#kx-hero .kx-hero-scene { transition:opacity .3s ease,filter .3s ease; }
#kx-hero.kx-slide-out .kx-hl { opacity:0;filter:blur(4px); }
#kx-hero.kx-slide-out.kx-forward .kx-hl { transform:translateX(-30px); }
#kx-hero.kx-slide-out.kx-backward .kx-hl { transform:translateX(30px); }
#kx-hero.kx-slide-out .kx-hero-scene { opacity:.22;filter:blur(3px) saturate(.8) contrast(1.02); }
#kx-hero.kx-slide-in.kx-forward .kx-hl { animation:kxCopyFromRight .5s cubic-bezier(.2,.72,.18,1) both; }
#kx-hero.kx-slide-in.kx-backward .kx-hl { animation:kxCopyFromLeft .5s cubic-bezier(.2,.72,.18,1) both; }
#kx-hero.kx-slide-in .kx-hero-scene { animation:kxImageFromRight .68s cubic-bezier(.2,.72,.18,1) both; }
@keyframes kxCopyFromRight { from{opacity:0;transform:translateX(34px);filter:blur(3px)}to{opacity:1;transform:translateX(0);filter:blur(0)} }
@keyframes kxCopyFromLeft { from{opacity:0;transform:translateX(-34px);filter:blur(3px)}to{opacity:1;transform:translateX(0);filter:blur(0)} }
@keyframes kxImageFromRight { from{opacity:.3;transform:translateX(2.2%) scale(1.025);filter:blur(5px) saturate(.8)}to{opacity:1;transform:translateX(0) scale(1);filter:saturate(.88) contrast(1.02) blur(0)} }
@media(max-width:700px) {
  #kx-hero .kx-pills { position:relative!important; }
  #kx-hero .kx-carousel { position:static;transform:none;flex-direction:row;margin:4px auto 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none; }
  #kx-hero .kx-carousel-dots { flex-direction:row; }
  #kx-hero .kx-carousel-arrow[data-dir],#kx-hero .kx-carousel-arrow[data-dir]:hover { transform:none; }
  #kx-hero .kx-carousel-dot.is-active { width:24px;height:8px; }
}
@media(prefers-reduced-motion:reduce) {
  #kx-hero.kx-slide-out .kx-hl,#kx-hero.kx-slide-out .kx-hero-scene { transform:none;filter:none; }
  #kx-hero.kx-slide-in .kx-hl,#kx-hero.kx-slide-in .kx-hero-scene { animation:none!important;opacity:1;filter:none; }
}

/* Category mini navigation: fill the available band and wrap into balanced rows. */
@media(min-width:1401px) {
  .ks-nav-links.kx-menu { display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,34px);align-content:center;align-items:center;justify-content:stretch;gap:2px 7px!important;overflow:visible; }
  .ks-nav-links.kx-menu .kx-mi { height:34px!important;min-width:0;justify-content:center;padding:0 7px!important;gap:7px!important;font-size:12px!important; }
}
@media(max-width:1400px) {
  #kx-strip { display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:8px;padding:5px 0 14px;margin:0;width:100%;max-width:none;overflow:visible; }
  #kx-strip .kx-mi { display:flex;min-width:0;width:100%;height:42px;justify-content:center;padding:0 10px;gap:8px;border-radius:13px;white-space:nowrap; }
}
.kx-steam-nav-mark { display:inline-grid;place-items:center;flex:0 0 25px;width:25px;height:25px;box-sizing:border-box;border:1px solid rgba(255,255,255,.23);border-radius:50%;background:linear-gradient(145deg,#262629,#09090a);box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.13);color:#fff; }
.kx-steam-nav-mark svg { display:block;width:17px;height:17px;fill:#fff; }
@media(max-width:900px) {
  #kx-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:560px) {
  #kx-strip { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  #kx-strip .kx-mi { height:42px;justify-content:flex-start;padding:0 11px;white-space:normal;text-align:left;font-size:12px; }
  #kx-strip .kx-mi span { min-width:0;overflow-wrap:anywhere; }
}
@media(min-width:601px) {
  .ks-nav { left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(1140px,calc(100vw - 32px))!important;max-width:1140px!important; }
}