/* ==========================================================================
   Homepage hero — the 1172x657 design canvas, scaled by one transform.
   Scoped under .hx so nothing here leaks into the rest of the site, and the
   site's .nav / .btn rules never reach the hero (renamed .hx-nav / .hx-btn).
   Palette: TDM orange #F5700B replaces the reference's cyan throughout.
   ========================================================================== */

.hx{position:relative;width:100%;height:calc(100vh - 38px);height:calc(100svh - 38px);
  min-height:560px;overflow:hidden;background:#020204;color:#fff;
  font-family:Poppins,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hx *{margin:0;padding:0;box-sizing:border-box}
.hx a{text-decoration:none;color:inherit}

/* --- core architecture: fixed canvas, one scale --- */
.hx .stage{position:absolute;inset:0;overflow:hidden;background:#020204}
.hx .canvas{position:absolute;left:50%;top:0;width:1172px;height:657px;
  transform:translateX(-50%) scale(var(--k,1));transform-origin:50% 0}
.hx .canvas>*{position:absolute}
.hx .stack{position:absolute;inset:0;z-index:300}
.hx .stack>*{position:absolute}
.hx .navmenu{display:contents}
.hx .burger{display:none}

.hx .bg{position:absolute;inset:0;
  background:
   linear-gradient(180deg, rgba(245,112,11,0) 38%, rgba(245,112,11,.045) 54%,
     rgba(245,112,11,.055) 68%, rgba(245,112,11,.032) 100%),
   #020204}
.hx .stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:#fff}

/* --- nav pill --- */
.hx .hx-nav{left:247px;top:3px;width:678px;height:64px;border-radius:32px;z-index:400;
  background:rgba(255,255,255,.008);
  border:1px solid rgba(255,255,255,.105);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.hx .mark{position:absolute;left:21px;top:19px;width:24px;height:24px;border-radius:6px;
  filter:drop-shadow(0 0 6px rgba(245,140,40,.75))}
.hx .wm{position:absolute;left:50px;top:0;white-space:nowrap}
.hx .wm .kick{position:absolute;left:3px;top:20px;font-size:4.4px;font-weight:600;
  letter-spacing:.10em;color:#fff;opacity:.92;line-height:1}
.hx .wm .name{position:absolute;left:0;top:26px;transform-origin:0 50%;
  font-family:Poppins;font-weight:900;font-size:22px;line-height:1;
  letter-spacing:-.01em;color:#fff}
.hx .links{position:absolute;left:156px;top:0;height:62px;transform-origin:0 50%;
  display:flex;align-items:center;gap:24px}
.hx .links a{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.92);
  white-space:nowrap;transition:opacity .25s}
.hx .links a:hover{opacity:.65}

/* --- PIXEL CONTRACT A: the badge. Fixed 250x39, tile pinned left, label
   left-aligned beside it. Not a pill, not a flex row, never auto-width. --- */
.hx .badge{left:462px;top:95px;width:250px;height:39px;border-radius:12px;z-index:300;
  border:1px solid rgba(255,255,255,.115);
  background:linear-gradient(to top,
    rgba(255,210,170,.175) 0px, rgba(255,210,170,.128) 2px, rgba(255,210,170,.075) 4px,
    rgba(255,210,170,.026) 6px, rgba(255,255,255,.012) 9px, rgba(255,255,255,.012) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.hx .badge i{position:absolute;left:4px;top:4px;width:29px;height:29px;border-radius:8px;
  display:grid;place-items:center;
  background:linear-gradient(to top,
    #ffb066 0px, #fb9a3f 2px, #e8781a 4px, #c85f0a 6px, #8f4306 8px,
    #6b3205 10px, #45210a 12px, #2e1708 14px, #20100a 16px, #180d0b 19px,
    #130b0a 23px, #0f0908 29px);
  box-shadow:inset 1px 0 0 rgba(255,200,150,.40),
    inset -1px 0 0 rgba(255,200,150,.52),
    0 0 6px rgba(245,140,60,.20), 0 3px 8px -5px rgba(255,170,90,.6)}
.hx .badge i svg{width:14px;height:16px;position:relative;top:-1px;left:0px}
.hx .badge b{position:absolute;left:45px;transform-origin:0 50%;top:0;height:39px;
  display:flex;align-items:center;
  font-size:13px;font-weight:400;color:rgba(255,255,255,.94);white-space:nowrap;
  padding-top:1.5px}

/* --- PIXEL CONTRACT B: the glow button. The orange bank at the foot is a
   background gradient clipped by the button's own rounded rect; overflow:hidden
   does the clipping. Largest outer blur is 8px at 10%: no halo. --- */
.hx .hx-btn{display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(to top,
    #ffd2a8 1px, #ffc48f 2px, #ffb774 3px, #ffa657 4px, #f7913a 5px,
    #e57a1e 6px, #d16a10 7px, #c05e0b 8px, #a85008 9px, #8a4106 10px,
    #6e3407 12px, #5f2f0a 13px, #4f270a 14px, #3b1d09 16px,
    #2a1508 18px, #1f1109 20px, #171009 24px, #100c09 30px,
    #0f0b08 34px, #0f0b08 100%);
  box-shadow:
    inset 0 3px 3px -2px rgba(255,215,180,.10),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09),
    var(--hair,0 1px 0 rgba(255,190,140,.38)),
    1px 0 0 rgba(255,190,140,.17), -1px 0 0 rgba(255,190,140,.17),
    0 0 8px rgba(245,140,50,.10),
    0 2px 5px -3px rgba(255,160,80,.45);
  transition:transform .25s,box-shadow .25s,filter .25s}
.hx .hx-btn::before{content:"";position:absolute;left:22%;right:38%;top:0.8px;height:1.9px;z-index:1;
  filter:blur(.55px);
  background:linear-gradient(90deg,rgba(255,190,120,0) 0%,rgba(255,190,120,.58) 34%,
    rgba(255,215,160,.74) 50%,rgba(255,190,120,.58) 66%,rgba(255,190,120,0) 100%)}
/* side edge-light, masked so it attenuates upward; without the mask it floods */
.hx .hx-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(255,215,175,.70),rgba(255,215,175,0) 13px),
             linear-gradient(270deg,rgba(255,215,175,.70),rgba(255,215,175,0) 13px);
  -webkit-mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%);
          mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%)}
/* direct child only: the label holds a data-lang-id/en span pair, and a
   descendant selector here would force the hidden language visible */
.hx .hx-btn>span{position:relative;z-index:2;display:block;line-height:1;
  text-shadow:0 1px 2px rgba(30,15,0,.5)}
.hx .hx-btn:hover{transform:translateY(-1px);filter:brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(255,220,180,.6),inset 1px 0 0 rgba(255,195,140,.35),
             inset -1px 0 0 rgba(255,195,140,.35),0 6px 22px rgba(230,120,30,.55)}

.hx .hx-nav .hx-btn{position:absolute;left:530.7px;top:10.5px;width:125.5px;height:39.5px;
  border-radius:14px;font-size:14px;font-weight:500;letter-spacing:-.005em}
.hx .hx-nav .hx-btn>span{margin-top:0}

.hx .cta2{position:absolute;left:526px;top:349px;width:121px;height:54.5px;
  --hair:0 0 0 transparent;border-radius:13px;font-size:17px;font-weight:500;
  letter-spacing:-.01em;z-index:300}
.hx .cta2::before{display:none}   /* hero button has no top streak; nav one does */
.hx .cta2>span{margin-top:0}

/* --- hero type --- */
/* the <h1> is a transparent shell sharing the stack's coordinate space; the two
   lines inside it are positioned individually by the fitter */
.hx .h1-lines{position:absolute;inset:0;margin:0;font:inherit;letter-spacing:normal}
.hx .h1{position:absolute;left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-family:Poppins;font-weight:900;font-size:54px;letter-spacing:-.004em;
  word-spacing:.175em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 34px rgba(255,170,90,.22);z-index:300}
.hx .sub{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-size:13.2px;color:#a9aeb5;z-index:300}
.hx .sub b{font-weight:600;color:#fff}
.hx .nb{white-space:nowrap}

/* --- the carousel: a true 3D perspective ring. Camera at the ring centre
   (perspective-origin y=918 = horizon) so every card faces it. --- */
.hx .showcase{position:absolute;left:0;top:0;width:1172px;height:0}
.hx .ring{position:absolute;left:0;top:0;width:1172px;height:657px;z-index:5;
  perspective:891px;perspective-origin:586px 918px;transform-style:preserve-3d;
  pointer-events:none}
.hx .card{position:absolute;left:586px;top:616px;width:130px;height:300px;
  margin:-150px 0 0 -65px;border-radius:12px;overflow:hidden;background:#0d1117;
  box-shadow:0 24px 46px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.5);
  backface-visibility:hidden;will-change:transform}
.hx .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx .card .edge{position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),
             inset 0 16px 30px rgba(255,255,255,.05)}
.hx .card.broken img{display:none}

.hx .cv{position:absolute;left:0;right:0;padding:0 10px}
.hx .fill{position:absolute;inset:0}
.hx .ph{position:absolute;left:0;right:0;overflow:hidden;
  background:linear-gradient(155deg,#2b3b50,#131c28 60%,#1d1526)}
.hx .phf{top:0;bottom:0}
.hx .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx .dot{display:inline-block;width:4.5px;height:4.5px;background:#e5202f;
  margin-right:4px;transform:rotate(45deg) translateY(-1px)}
.hx .dot.sq{transform:none;width:6.5px;height:4.5px;border-radius:1px}
.hx .t-big{font-family:Poppins;font-weight:900;text-transform:uppercase;line-height:.96;
  letter-spacing:-.015em;white-space:nowrap;transform:scaleX(.875);
  transform-origin:left center}
.hx .t-serif{font-family:"Playfair Display",serif;line-height:1.02;letter-spacing:.01em;
  white-space:nowrap}

/* --- browser mock: paints in FRONT of the ring and bleeds off the bottom --- */
.hx .browser{position:absolute;left:165px;top:558px;width:842px;
  height:calc(99px + var(--fill,0px));
  border-radius:28px 28px 0 0;overflow:hidden;z-index:100;
  box-shadow:0 -14px 44px rgba(0,0,0,.55)}
.hx .browser::before{content:"";position:absolute;left:0;right:0;top:42px;bottom:0;
  background:rgba(20,20,26,.82);z-index:0}
.hx .bar{position:absolute;left:0;top:0;width:100%;height:42px;
  background:linear-gradient(180deg,rgba(48,30,20,.48),rgba(38,22,15,.58));
  -webkit-backdrop-filter:blur(6px) saturate(112%);backdrop-filter:blur(6px) saturate(112%)}
.hx .dots{position:absolute;left:27px;top:16px;display:flex;gap:2.6px}
.hx .dots i{width:7.6px;height:7.6px;border-radius:50%}
.hx .omni{position:absolute;left:246px;top:7px;width:336px;height:26px;border-radius:5px;
  background:rgba(26,15,9,.93);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
  display:flex;align-items:center;justify-content:center;gap:6px}
.hx .omni svg{width:9px;height:9px;opacity:.72}
.hx .omni span{font-size:9.5px;color:rgba(255,255,255,.72);letter-spacing:.005em}
.hx .tools{position:absolute;right:27px;top:14px;display:flex;align-items:center;gap:4px;opacity:.9}
.hx .tools svg{width:11px;height:12px}
.hx .page{position:absolute;left:7px;right:6px;top:42px;bottom:0;background:#fff;
  color:#111;overflow:hidden;border-radius:10px 10px 0 0}
.hx .ann{position:absolute;left:0;top:0;width:100%;height:16px;background:#101210;
  display:grid;place-items:center;border-radius:10px 10px 0 0}
.hx .ann span{font-size:5px;letter-spacing:.06em;color:#cfcfcf}
.hx .ann u{position:absolute;font-size:6px;color:#9a9a9a;text-decoration:none}
.hx .shoplogo{position:absolute;left:50%;transform:translateX(-50%);top:22px;
  display:flex;align-items:center;gap:5px}
.hx .shoplogo img{width:15px;height:15px;border-radius:3px;display:block}
.hx .shoplogo em{font-style:normal;font-weight:800;font-size:9px;letter-spacing:.04em;
  line-height:1;color:#17181c}
.hx .shoplogo em small{display:block;font-size:4px;letter-spacing:.3em;color:#F5700B;
  margin-top:2px;font-weight:600}
.hx .shopicons{position:absolute;right:100px;top:33px;display:flex;gap:5px;opacity:.85}
.hx .shopicons svg{width:7px;height:7px}
.hx .pagebody{position:absolute;left:0;right:0;top:62px;bottom:0;background:#fff;overflow:hidden}
.hx .pghero{position:relative;margin:0 26px;height:158px;border-radius:7px;overflow:hidden;
  background:linear-gradient(120deg,#e8dcd4,#cbb6a8)}
.hx .pghero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx .pghero .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,20,16,.62) 0%,rgba(28,20,16,.30) 46%,rgba(28,20,16,0) 72%)}
.hx .pghero .copy{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:#fff}
.hx .pghero .copy u{font-size:4.6px;letter-spacing:.26em;text-transform:uppercase;opacity:.9;
  display:block;text-decoration:none}
.hx .pghero .copy em{font-family:"Playfair Display",serif;font-style:normal;font-weight:600;
  font-size:15px;line-height:1.12;margin-top:6px;display:block}
.hx .pghero .copy i{font-style:normal;display:inline-block;margin-top:10px;padding:5px 13px;
  border-radius:20px;background:#F5700B;color:#fff;font-size:5.2px;font-weight:600;
  letter-spacing:.06em}
.hx .pgsec{display:flex;align-items:baseline;justify-content:space-between;margin:16px 26px 9px}
.hx .pgsec b{font-family:"Playfair Display",serif;font-weight:600;font-size:9px;color:#17181c}
.hx .pgsec u{font-size:4.6px;letter-spacing:.14em;color:#8a8a8a;text-transform:uppercase;
  text-decoration:none}
.hx .pggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 26px}
.hx .pgcard .ph{position:relative;height:0;padding-bottom:104%;border-radius:6px;
  overflow:hidden;background:linear-gradient(150deg,#efe7e1,#ddcfc6)}
.hx .pgcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx .pgcard .tag{position:absolute;left:6px;top:6px;padding:2px 5px;border-radius:3px;
  background:#F5700B;color:#fff;font-size:3.8px;font-weight:600;letter-spacing:.1em}
.hx .pgcard b{display:block;margin-top:6px;font-size:5.4px;font-weight:600;color:#17181c;
  letter-spacing:.01em}
.hx .pgcard i{display:block;font-style:normal;margin-top:2px;font-size:4.6px;color:#8a8a8a}
.hx .pgcard s{display:block;margin-top:3px;font-size:5.6px;font-weight:700;color:#17181c;
  text-decoration:none}
.hx .pgcard s span{font-weight:400;color:#a08f86;text-decoration:line-through;
  margin-left:4px;font-size:4.6px}
.hx .pgstrip{display:flex;justify-content:space-between;margin:16px 26px 0;padding:9px 0;
  border-top:1px solid #eee6e0;border-bottom:1px solid #eee6e0}
.hx .pgstrip span{font-size:4.4px;letter-spacing:.12em;color:#7d7169;text-transform:uppercase}

/* --- narrow-viewport nav (<=1080): same DOM nodes, re-laid-out in a panel --- */
@media (max-width:1080px){
  .hx .burger{display:grid;place-content:center;gap:4px;position:absolute;right:12px;top:11px;
    width:42px;height:42px;padding:0;border:0;border-radius:14px;background:transparent;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hx .burger span{display:block;width:19px;height:1.6px;border-radius:2px;
    background:rgba(255,255,255,.92);
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
  .hx .burger:focus-visible{outline:2px solid rgba(255,180,100,.7);outline-offset:2px}
  .hx .hx-nav.open .burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .hx .hx-nav.open .burger span:nth-child(2){opacity:0}
  .hx .hx-nav.open .burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
  .hx .navmenu{display:block;position:absolute;left:0;right:0;top:74px;padding:12px;
    border-radius:22px;border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(22,15,11,.985),rgba(16,10,7,.99));
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .24s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility .28s}
  .hx .hx-nav.open .navmenu{opacity:1;visibility:visible;transform:none}
  .hx .links{position:static;display:flex;flex-direction:column;align-items:stretch;
    height:auto;gap:2px;transform:none!important}
  .hx .links a{font-size:15px;padding:11px 14px;border-radius:12px;color:rgba(255,255,255,.9);
    transition:background .2s,color .2s}
  .hx .hx-nav .hx-btn{position:static;width:100%;height:46px;margin-top:10px;font-size:15px}
  .hx .hx-nav .hx-btn>span{margin-top:3px}

  /* tablet architecture */
  .hx .hx-nav{left:286px;width:620px}
  .hx .badge{left:448px;width:277px}
  .hx .stack{transform:translateY(var(--stshift,0px))}
  .hx .showcase{transform:translateY(var(--sshift,0px))}
  .hx .ring{transform:scale(var(--rs,1));transform-origin:586px 595px}
}
@media (hover:hover) and (max-width:1080px){
  .hx .burger:hover span{background:#fff}
  .hx .links a:hover{background:rgba(255,255,255,.055);color:#fff;opacity:1}
}

/* --- phone (<=700): a genuine flow column, same elements, same order --- */
@media (max-width:700px){
  .hx .canvas{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none;
    display:flex;flex-direction:column;align-items:center;padding:0 20px}
  .hx .canvas>*{position:static}
  .hx .stack{display:contents}
  .hx .hx-nav{position:relative;left:auto;top:auto;width:100%;max-width:500px;height:58px;
    margin-top:clamp(10px,1.5vh,15px);flex:0 0 auto}
  .hx .mark{left:16px;top:calc(50% - 13px);width:26px;height:26px}
  .hx .wm{left:49px;top:0;height:100%}
  .hx .wm .kick{top:calc(50% - 15px);font-size:5px;letter-spacing:.2em}
  .hx .wm .name{top:calc(50% - 9px);font-size:18px;transform:scaleX(.88);
    transform-origin:left center}
  .hx .burger{right:8px;top:7px;width:44px;height:44px}
  .hx .navmenu{top:68px;padding:12px}
  .hx .links a{font-size:16px;padding:12px 15px;border-radius:12px}
  .hx .hx-nav .hx-btn{height:48px;margin-top:10px;font-size:16px}
  .hx .badge{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    width:auto;max-width:100%;height:36px;flex:0 0 auto;border-radius:18px}
  .hx .badge b{position:relative;left:auto;top:auto;height:36px;padding:0 15px 0 42px;
    font-size:12.5px}
  .hx .badge i{top:4px;left:4px;width:28px;height:28px}
  .hx .badge i svg{width:13px;height:19px}
  /* 8.4em sits between PERLENGKAPAN (8.06em) and PERLENGKAPAN LISTRIK (~13em) */
  .hx .h1-lines{display:contents}
  .hx .h1{position:relative;display:block;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(29px,8.4vw,36px);line-height:1.06;
    letter-spacing:-.01em;max-width:8.4em}
  .hx .h1.l1{margin-top:clamp(12px,2.2vh,20px)}
  .hx .sub{position:relative;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(14px,3.9vw,15.5px);line-height:1.5;max-width:340px}
  .hx .sub.s1{margin-top:clamp(10px,1.8vh,16px)}
  .hx .cta2{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    flex:0 0 auto;width:auto;min-width:158px;height:52px;padding:0 26px;font-size:16px}
  .hx .showcase{position:relative;left:auto;top:auto;flex:1 1 auto;width:100%;height:auto;
    min-height:224px}
  .hx .ring{position:absolute;left:50%;margin-left:-586px;top:-446px;bottom:auto;
    width:1172px;height:657px;transform-origin:586px 466px;transform:scale(1.02)}
  .hx .browser{position:absolute;left:50%;transform:translateX(-50%);top:212px;bottom:0;
    width:calc(100% + 40px);height:auto;border-radius:22px 22px 0 0}
  .hx .browser .bar{height:36px}
  .hx .omni{left:50%;transform:translateX(-50%);width:58%;height:24px;top:6px}
  .hx .omni span{font-size:9px}
  .hx .dots{top:14px}
  .hx .tools{display:none}
  .hx .ann{height:15px}
  .hx .ann span{font-size:6px}
  .hx .page{top:36px}
  .hx .pagebody{top:56px}
  .hx .pghero{margin:0 18px;height:122px;border-radius:10px}
  .hx .pghero .copy{left:18px}
  .hx .pghero .copy u{font-size:7.5px;letter-spacing:.2em}
  .hx .pghero .copy em{font-size:20px;margin-top:5px}
  .hx .pghero .copy i{font-size:8.5px;padding:6px 13px;margin-top:8px}
  .hx .pgsec{margin:16px 18px 10px}
  .hx .pgsec b{font-size:14px}
  .hx .pgsec u{font-size:8px}
  .hx .pggrid{grid-template-columns:repeat(2,1fr);gap:14px;margin:0 18px}
  .hx .pgcard .ph{border-radius:9px}
  .hx .pgcard .tag{font-size:7px;padding:3px 7px;border-radius:4px}
  .hx .pgcard b{font-size:10.5px;margin-top:7px}
  .hx .pgcard i{font-size:8.5px}
  .hx .pgcard s{font-size:11.5px;margin-top:4px}
  .hx .pgcard s span{font-size:8.5px}
  .hx .pgstrip{margin:16px 18px 0;flex-wrap:wrap;gap:5px 16px}
  .hx .pgstrip span{font-size:8px}
}

/* --- entrance: individual translate/scale/clip-path, never `transform`,
   so it composes with the fitter's scaleX and the ring's translate3d --- */
html.intro .hx .hx-nav{opacity:0;translate:0 -9px}
html.intro .hx .mark,
html.intro .hx .wm,
html.intro .hx .links a,
html.intro .hx .hx-nav .hx-btn,
html.intro .hx .burger{opacity:0;translate:0 6px}
html.intro .hx .badge{opacity:0;translate:0 11px;scale:.985}
html.intro .hx .h1{opacity:0;translate:0 15px;clip-path:inset(100% 0 -30% 0)}
html.intro .hx .sub{opacity:0;translate:0 10px}
html.intro .hx .cta2{opacity:0;translate:0 13px;scale:.985}
html.intro .hx .ring{opacity:0;translate:0 18px;scale:.99}
html.intro .hx .browser{opacity:0;translate:0 26px}

@media (prefers-reduced-motion:reduce){
  .hx .navmenu,.hx .burger span{transition:none}
  html.intro .hx .hx-nav,html.intro .hx .mark,html.intro .hx .wm,html.intro .hx .links a,
  html.intro .hx .hx-nav .hx-btn,html.intro .hx .burger,html.intro .hx .badge,html.intro .hx .h1,
  html.intro .hx .sub,html.intro .hx .cta2,html.intro .hx .ring,html.intro .hx .browser{
    opacity:1;translate:none;scale:none;clip-path:none}
}