/* STAR CLUB /membership/ design v12.1 (2026-10-25) - "Your STAR pass" (membership recruitment page, no products).
   All widths: v12 shows everywhere and the old v10 markup printed beside it is hidden on every device (v12.1; before,
   v10 showed below 1200px and its PC grid squeezed onto phones). 1200px+ is v12 unchanged except the pass/lanyard/halo
   sit 20px further left so the tilted pass stays inside the content edge. Below 1200px: tablet + phone rules at the end.
   Fonts load from ../88hardware-home-pc-r15/fonts/ (same files as the homepage). Illustration: img-v12/star-mascot.webp
   plus CSS/SVG drawing. Accents: red #D7000F, yellow #FFC72C, ink #15171B. */
html body #h88sc10.h88sc10{display:none!important}

@font-face{font-family:"H88SC12 Inter";src:url(../88hardware-home-pc-r15/fonts/inter-r15.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"H88SC12 Archivo";src:url(../88hardware-home-pc-r15/fonts/archivo-sx-r15.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

/* base (v12.1: no longer wrapped in @media (min-width:1200px)) */
#h88sc12#h88sc12{all:revert;display:block;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:start;text-indent:0;white-space:normal}
#h88sc12#h88sc12 :where(:not(svg,svg *,img)){all:revert}
#h88sc12#h88sc12 :where(img){max-width:none;border:0;box-shadow:none;margin:0;padding:0}
#h88sc12#h88sc12{
  --red:#D7000F;--red-2:#B0000C;--red-d:#8E000A;--red-t:#FFF0F1;
  --yel:#FFC72C;--yel-2:#FFB800;--yel-t:#FFF6D9;
  --ink:#15171B;--ink-2:#1E2126;--ink-3:#2E323A;
  --tx:#16191E;--tx-2:#3A414C;--mute:#5C6470;
  --line:#E4E7EB;--ground:#F2F3F5;--paper:#fff;
  --disp:"H88SC12 Archivo","Arial Narrow",Arial,sans-serif;
  --text:"H88SC12 Inter",Arial,sans-serif;
  --hl:max(40px,calc((100vw - 1500px) / 2));--hr:40px;
  --haz:repeating-linear-gradient(-45deg,var(--yel) 0 12px,var(--ink) 12px 24px);
  --plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='%23fff' fill-opacity='.045'%3E%3Crect x='3' y='5' width='10' height='3' rx='1.5' transform='rotate(45 8 6.5)'/%3E%3Crect x='15' y='19' width='10' height='3' rx='1.5' transform='rotate(-45 20 20.5)'/%3E%3C/g%3E%3C/svg%3E");
  margin:var(--sc12-mt,0px) var(--sc12-mr,0px) 0 var(--sc12-ml,0px);
  background:var(--ground);color:var(--tx);font:15px/1.5 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased;color-scheme:light
}
#h88sc12#h88sc12,#h88sc12#h88sc12 *{box-sizing:border-box}
#h88sc12#h88sc12 a{color:inherit;text-decoration:none}
#h88sc12#h88sc12 button{font:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0;margin:0}
#h88sc12#h88sc12 h1,#h88sc12#h88sc12 h2,#h88sc12#h88sc12 h3,#h88sc12#h88sc12 p,#h88sc12#h88sc12 ul,#h88sc12#h88sc12 ol{margin:0;padding:0}
#h88sc12#h88sc12 ul,#h88sc12#h88sc12 ol{list-style:none}
#h88sc12#h88sc12 em{font-style:normal}
#h88sc12#h88sc12 mark{background:none;color:inherit}
#h88sc12#h88sc12 :focus-visible{outline:3px solid #2B6BFF;outline-offset:3px;border-radius:6px}
#h88sc12#h88sc12 .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#h88sc12#h88sc12 .ico.st{fill:currentColor;stroke:none}
#h88sc12#h88sc12 .big{width:64px;height:64px;flex:none;stroke-linecap:round;stroke-linejoin:round}
#h88sc12#h88sc12 .big{--tint:#FFC9CE;--line-c:var(--red)}
#h88sc12#h88sc12 .wrap{margin-left:var(--hl);margin-right:max(var(--hr),calc(100% - var(--hl) - 1600px))}
@media (max-width:1240px){#h88sc12#h88sc12{--hl:24px;--hr:24px}}
#h88sc12#h88sc12 [id]{scroll-margin-top:150px}

/* ---- shared ---- */
#h88sc12#h88sc12 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;font:800 16px/1 var(--text);white-space:nowrap;transition:transform .15s,background-color .15s,box-shadow .15s}
#h88sc12#h88sc12 .btn .ico{width:20px;height:20px;stroke-width:2.8}
#h88sc12#h88sc12 .btn-xl{height:60px;padding:0 30px;font-size:18px;border-radius:14px}
#h88sc12#h88sc12 .btn-y{background:var(--yel);color:var(--ink);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),0 16px 30px -14px rgba(255,199,44,.85)}
#h88sc12#h88sc12 .btn-y:hover{background:#FFD24F;transform:translateY(-2px)}
#h88sc12#h88sc12 .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
#h88sc12#h88sc12 .btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff;background:rgba(255,255,255,.06)}
#h88sc12#h88sc12 .cta{display:flex;flex-wrap:wrap;gap:12px}
#h88sc12#h88sc12 .sc12-logo{display:inline-flex;align-items:center;gap:6px}
#h88sc12#h88sc12 .star-w{display:block;width:96px;height:23px;background:url(../88hardware-home-pc-r15/img/star-logo.webp) left center/contain no-repeat}
#h88sc12#h88sc12 .sc12-logo b{font:900 13px/1 var(--disp);letter-spacing:.08em;background:var(--yel);color:var(--ink);padding:5px 7px 4px;border-radius:5px}
#h88sc12#h88sc12 .sec-hd{display:flex;align-items:center;gap:18px;margin-bottom:30px}
#h88sc12#h88sc12 .sec-no{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex:none;border-radius:16px;background:var(--ink);color:var(--yel);font:900 30px/1 var(--disp);font-stretch:80%;box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 5px rgba(255,199,44,.35)}
#h88sc12#h88sc12 .sec-hd h2{font:900 clamp(32px,2.7vw,44px)/1 var(--disp);font-stretch:76%;text-transform:uppercase;color:var(--ink)}
#h88sc12#h88sc12 .sec-hd p{margin-top:6px;color:var(--mute);font-size:17px;font-weight:500}
#h88sc12#h88sc12 .sec-hd.dark h2{color:#fff}
#h88sc12#h88sc12 .sec-hd.dark p{color:#AEB5BF}
#h88sc12#h88sc12 .sec-hd.dark .sec-no{background:var(--yel);color:var(--ink);box-shadow:none}

/* ---- hero ---- */
#h88sc12#h88sc12 .s-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(70% 90% at 78% 52%,#5A0007 0%,rgba(90,0,7,0) 62%),var(--plate),linear-gradient(180deg,#111317,#191B20);padding:56px 0 66px}
#h88sc12#h88sc12 .rays{position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 74% 54%,rgba(255,199,44,.075) 0deg 7deg,rgba(255,199,44,0) 7deg 18deg);-webkit-mask:radial-gradient(52% 78% at 74% 54%,#000 20%,transparent 72%);mask:radial-gradient(52% 78% at 74% 54%,#000 20%,transparent 72%)}
#h88sc12#h88sc12 .hz-edge{position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--haz)}
#h88sc12#h88sc12 .hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:40px;align-items:center;min-height:470px}
#h88sc12#h88sc12 .kick{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#h88sc12#h88sc12 .kick>span:last-child{color:#C9CED5;font:700 14px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;padding-left:14px;border-left:2px solid var(--ink-3)}
#h88sc12#h88sc12 h1{margin-top:24px;font:900 clamp(58px,5.4vw,90px)/.9 var(--disp);font-stretch:74%;text-transform:uppercase;letter-spacing:-.01em}
#h88sc12#h88sc12 h1 span{display:block}
#h88sc12#h88sc12 h1 mark{display:inline-block;margin-top:.08em;color:var(--yel);text-shadow:.045em .045em 0 var(--red)}
#h88sc12#h88sc12 .lede{margin-top:22px;max-width:36em;color:#D5D9DF;font-size:19px;line-height:1.55}
#h88sc12#h88sc12 .lede b{color:#fff;font-weight:800}
#h88sc12#h88sc12 .hero-copy .cta{margin-top:30px}
#h88sc12#h88sc12 .status{display:flex;gap:10px;align-items:flex-start;max-width:36em;margin-top:18px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#E6E9ED;font-size:15px;line-height:1.45}
#h88sc12#h88sc12 .status .ico{color:var(--yel);margin-top:1px}
#h88sc12#h88sc12 .ticks{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px}
#h88sc12#h88sc12 .ticks li{display:flex;align-items:center;gap:8px;color:#E6E9ED;font-weight:700;font-size:15px}
#h88sc12#h88sc12 .ticks .ico{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--yel);color:var(--ink);stroke-width:3.4}

/* stage: lanyard + pass + mascot */
#h88sc12#h88sc12 .stage{position:relative;height:470px}
#h88sc12#h88sc12 .halo{position:absolute;left:160px;top:70px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,199,44,.32),rgba(255,199,44,0) 66%)}
#h88sc12#h88sc12 .lanyard{position:absolute;left:346px;top:-80px;width:40px;height:196px;transform:rotate(-8deg);transform-origin:50% 100%}
#h88sc12#h88sc12 .strap{position:absolute;left:8px;top:0;width:24px;height:168px;border-radius:3px;background:repeating-linear-gradient(180deg,var(--red) 0 22px,#B8000D 22px 24px);box-shadow:inset 3px 0 0 rgba(255,255,255,.15),inset -3px 0 0 rgba(0,0,0,.2)}
#h88sc12#h88sc12 .strap::after{content:"88";position:absolute;left:0;right:0;top:104px;text-align:center;color:var(--yel);font:900 13px/1 var(--disp)}
#h88sc12#h88sc12 .clip{position:absolute;left:5px;bottom:0;width:30px;height:32px;border-radius:6px 6px 10px 10px;background:linear-gradient(90deg,#8A9099,#E7EAEE 45%,#9BA1AA);box-shadow:0 3px 0 #5A606A}
#h88sc12#h88sc12 .clip::after{content:"";position:absolute;left:9px;bottom:-10px;width:12px;height:16px;border-radius:8px;border:3px solid #9BA1AA;border-top:0}
#h88sc12#h88sc12 .pass{position:absolute;left:176px;top:110px;width:380px;height:240px;border-radius:22px;padding:22px 24px 20px;transform:rotate(-8deg);color:#fff;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 50%),linear-gradient(140deg,#E5101F 0%,var(--red) 40%,var(--red-d) 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 -6px 0 rgba(0,0,0,.2) inset,0 34px 60px -20px rgba(0,0,0,.75),0 0 0 3px rgba(255,255,255,.1);display:flex;flex-direction:column;animation:sc12-sway 6s ease-in-out infinite;transform-origin:190px -60px}
@keyframes sc12-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-5.5deg)}}
#h88sc12#h88sc12 .pass::before{content:"";position:absolute;right:-60px;bottom:-90px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,199,44,.22),rgba(255,199,44,0) 65%)}
#h88sc12#h88sc12 .slot{position:absolute;left:50%;top:12px;width:56px;height:10px;margin-left:-28px;border-radius:6px;background:#5C0007;box-shadow:inset 0 2px 2px rgba(0,0,0,.5)}
#h88sc12#h88sc12 .p-top{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:10px}
#h88sc12#h88sc12 .p-brand{font:900 18px/1 var(--disp);font-stretch:90%;letter-spacing:.04em}
#h88sc12#h88sc12 .p-tag{font:800 12px/1 var(--text);letter-spacing:.16em;background:rgba(0,0,0,.25);padding:5px 8px;border-radius:5px}
#h88sc12#h88sc12 .p-mid{position:relative;display:flex;align-items:center;gap:14px;margin-top:20px}
#h88sc12#h88sc12 .p-star{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#FFE27A,var(--yel) 50%,#E5A600);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
#h88sc12#h88sc12 .p-star .ico{width:32px;height:32px;color:var(--red-d)}
#h88sc12#h88sc12 .p-name{display:flex;align-items:center;gap:8px}
#h88sc12#h88sc12 .p-name .star-w{width:150px;height:35px}
#h88sc12#h88sc12 .p-name b{font:900 20px/1 var(--disp);letter-spacing:.08em;background:var(--yel);color:var(--ink);padding:7px 9px 6px;border-radius:7px}
#h88sc12#h88sc12 .p-lv{position:relative;display:flex;gap:8px;margin-top:20px}
#h88sc12#h88sc12 .pip{font:800 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;color:var(--ink)}
#h88sc12#h88sc12 .pip.b{background:linear-gradient(135deg,#F0B98A,#B8743C)}
#h88sc12#h88sc12 .pip.s{background:linear-gradient(135deg,#FFFFFF,#AEB6C0)}
#h88sc12#h88sc12 .pip.g{background:linear-gradient(135deg,#FFE88A,#E0A512)}
#h88sc12#h88sc12 .p-ft{position:relative;display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;font:700 13px/1.2 var(--text);color:#FFE3E5}
#h88sc12#h88sc12 .holo{width:44px;height:30px;border-radius:6px;background:conic-gradient(from 30deg,#FFE88A,#FFB3C0,#B6E3FF,#C8FFC8,#FFE88A);opacity:.9;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
#h88sc12#h88sc12 .pass .haz{position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--haz);opacity:.9}
#h88sc12#h88sc12 .mascot{position:absolute;left:-46px;top:236px;width:256px;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));animation:sc12-hop 3.2s ease-in-out infinite}
@keyframes sc12-hop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
#h88sc12#h88sc12 .burst{position:absolute;left:36px;top:40px;width:124px;height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);transform:rotate(-12deg);
  background:var(--yel);clip-path:polygon(50% 0,61% 12%,75% 4%,79% 20%,95% 20%,90% 36%,100% 50%,90% 64%,95% 80%,79% 80%,75% 96%,61% 88%,50% 100%,39% 88%,25% 96%,21% 80%,5% 80%,10% 64%,0 50%,10% 36%,5% 20%,21% 20%,25% 4%,39% 12%)}
#h88sc12#h88sc12 .burst b{font:900 34px/.9 var(--disp);font-stretch:80%}
#h88sc12#h88sc12 .burst small{font:800 13px/1.1 var(--text);text-transform:uppercase;letter-spacing:.06em}
#h88sc12#h88sc12 .spark{position:absolute;width:22px;height:22px;background:var(--yel);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:sc12-tw 2.4s ease-in-out infinite}
#h88sc12#h88sc12 .spark.k1{left:560px;top:380px}
#h88sc12#h88sc12 .spark.k2{left:560px;top:60px;width:16px;height:16px;animation-delay:.8s}
#h88sc12#h88sc12 .spark.k3{left:300px;top:420px;width:14px;height:14px;background:#fff;animation-delay:1.5s}
@keyframes sc12-tw{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){#h88sc12#h88sc12 .pass,#h88sc12#h88sc12 .mascot,#h88sc12#h88sc12 .spark{animation:none}}

/* ---- what strip ---- */
#h88sc12#h88sc12 .s-what{background:var(--yel);padding:26px 0}
#h88sc12#h88sc12 .what-in{display:flex;align-items:center;gap:26px}
#h88sc12#h88sc12 .what-k{flex:none;font:900 15px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--yel);padding:11px 14px;border-radius:9px}
#h88sc12#h88sc12 .what-t{font:700 clamp(20px,1.65vw,26px)/1.3 var(--text);color:var(--ink);letter-spacing:-.01em}
#h88sc12#h88sc12 .what-t b{font-weight:800}
#h88sc12#h88sc12 .what-t mark{background:var(--red);color:#fff;padding:0 .25em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---- benefits ---- */
#h88sc12#h88sc12 .s-why{padding:72px 0 76px}
#h88sc12#h88sc12 .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
#h88sc12#h88sc12 .tile{position:relative;background:var(--paper);border-radius:22px;padding:30px 26px 30px;box-shadow:0 1px 0 var(--line),0 22px 40px -30px rgba(21,23,27,.45);overflow:hidden;transition:transform .2s}
#h88sc12#h88sc12 .tile:hover{transform:translateY(-4px)}
#h88sc12#h88sc12 .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--line)}
#h88sc12#h88sc12 .t-ico{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:26px;background:var(--red-t)}
#h88sc12#h88sc12 .tile h3{margin-top:24px;font:900 28px/1 var(--disp);font-stretch:80%;text-transform:uppercase;color:var(--ink)}
#h88sc12#h88sc12 .tile p{margin-top:10px;color:var(--tx-2);font-size:16px;line-height:1.5}
#h88sc12#h88sc12 .tile.hot{background:linear-gradient(160deg,#E5101F,var(--red) 45%,var(--red-d));color:#fff}
#h88sc12#h88sc12 .tile.hot .big{--tint:rgba(255,199,44,.38);--line-c:var(--yel)}
#h88sc12#h88sc12 .tile.hot::after{background:var(--haz)}
#h88sc12#h88sc12 .tile.hot .t-ico{background:rgba(0,0,0,.22)}
#h88sc12#h88sc12 .tile.hot h3{color:#fff}
#h88sc12#h88sc12 .tile.hot p{color:#FFE3E5}
#h88sc12#h88sc12 .t-flag{position:absolute;right:18px;top:20px;font:800 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;background:var(--yel);color:var(--ink);padding:6px 9px;border-radius:6px}

/* ---- levels ---- */
#h88sc12#h88sc12 .s-lv{position:relative;padding:72px 0 64px;color:#fff;background:radial-gradient(60% 70% at 50% 40%,rgba(255,199,44,.12),rgba(255,199,44,0) 70%),var(--plate),var(--ink)}
#h88sc12#h88sc12 .s-lv::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--haz)}
#h88sc12#h88sc12 .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:end;padding-top:20px}
#h88sc12#h88sc12 .card{position:relative;overflow:hidden;border-radius:24px;padding:28px 28px 26px;color:var(--ink);min-height:380px;display:flex;flex-direction:column;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(0,0,0,.18),0 30px 50px -28px rgba(0,0,0,.9)}
#h88sc12#h88sc12 .card::before,#h88sc12#h88sc12 .card::after{content:"";position:absolute;top:16px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8),rgba(0,0,0,.35));box-shadow:0 0 0 2px rgba(0,0,0,.12)}
#h88sc12#h88sc12 .card::before{left:16px}
#h88sc12#h88sc12 .card::after{right:16px}
#h88sc12#h88sc12 .c-b{background:linear-gradient(150deg,#F3C59A 0%,#D08A4E 38%,#A9652F 70%,#D99A62 100%)}
#h88sc12#h88sc12 .c-s{background:linear-gradient(150deg,#FFFFFF 0%,#D3D9E0 38%,#A8B1BC 70%,#E3E7EC 100%)}
#h88sc12#h88sc12 .c-g{background:linear-gradient(150deg,#FFF0A8 0%,#FFD24A 34%,#D9A10E 70%,#FFD966 100%);min-height:412px;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -6px 0 rgba(0,0,0,.18),0 0 0 4px rgba(255,199,44,.35),0 30px 60px -24px rgba(255,199,44,.45)}
#h88sc12#h88sc12 .c-shine{position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) 150% 0/300% 100% no-repeat;animation:sc12-shine 5.5s ease-in-out infinite;pointer-events:none}
#h88sc12#h88sc12 .c-s .c-shine{animation-delay:.9s}
#h88sc12#h88sc12 .c-g .c-shine{animation-delay:1.8s}
@keyframes sc12-shine{0%,55%{background-position:150% 0}85%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){#h88sc12#h88sc12 .c-shine{animation:none;display:none}}
#h88sc12#h88sc12 .c-no{position:absolute;right:38px;top:13px;font:800 12px/1 var(--text);letter-spacing:.1em;color:rgba(21,23,27,.6)}
#h88sc12#h88sc12 .c-top{position:absolute;left:38px;top:11px;font:800 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--yel);padding:5px 8px;border-radius:5px}
#h88sc12#h88sc12 .c-hd{position:relative;display:flex;align-items:center;gap:16px;margin-top:26px}
#h88sc12#h88sc12 .c-medal{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(255,255,255,.45)}
#h88sc12#h88sc12 .c-medal .ico{width:38px;height:38px}
#h88sc12#h88sc12 .c-b .c-medal .ico{color:#E7A56C}
#h88sc12#h88sc12 .c-s .c-medal .ico{color:#E3E8EE}
#h88sc12#h88sc12 .c-g .c-medal .ico{color:var(--yel)}
#h88sc12#h88sc12 .c-k{display:block;font:800 13px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:rgba(21,23,27,.68)}
#h88sc12#h88sc12 .card h3{margin-top:4px;font:900 52px/.9 var(--disp);font-stretch:76%;text-transform:uppercase;color:var(--ink)}
#h88sc12#h88sc12 .c-pay{position:relative;align-self:flex-start;margin-top:22px;font:900 22px/1 var(--disp);font-stretch:84%;text-transform:uppercase;padding:9px 12px 8px;border-radius:9px;background:rgba(255,255,255,.55);color:var(--ink)}
#h88sc12#h88sc12 .c-pay.star{background:var(--red);color:#fff}
#h88sc12#h88sc12 .c-list{position:relative;margin-top:18px;display:grid;gap:9px}
#h88sc12#h88sc12 .c-list li{display:flex;gap:9px;align-items:flex-start;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
#h88sc12#h88sc12 .c-list .ico{margin-top:1px;stroke-width:3}
#h88sc12#h88sc12 .c-how{position:relative;margin-top:auto;padding-top:16px;border-top:2px dashed rgba(21,23,27,.28);display:flex;justify-content:space-between;align-items:center}
#h88sc12#h88sc12 .c-how span{font:700 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:rgba(21,23,27,.7)}
#h88sc12#h88sc12 .c-how b{font:900 20px/1 var(--disp);font-stretch:84%;text-transform:uppercase}
#h88sc12#h88sc12 .lv-note{display:flex;gap:12px;align-items:center;margin-top:30px;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#D5D9DF;font-size:16px}
#h88sc12#h88sc12 .lv-note .ico{width:22px;height:22px;color:var(--yel)}
#h88sc12#h88sc12 .lv-note b{color:#fff}

/* ---- join ticket ---- */
#h88sc12#h88sc12 .s-join{padding:76px 0 72px}
#h88sc12#h88sc12 .ticket{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));filter:drop-shadow(0 24px 30px rgba(21,23,27,.16))}
#h88sc12#h88sc12 .tk{position:relative;display:flex;gap:20px;align-items:flex-start;background:var(--paper);padding:34px 34px 32px;
  -webkit-mask:radial-gradient(circle 14px at 0 50%,transparent 13.5px,#000 14px) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,transparent 13.5px,#000 14px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 14px at 0 50%,transparent 13.5px,#000 14px) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 50%,transparent 13.5px,#000 14px) right/51% 100% no-repeat}
#h88sc12#h88sc12 .tk:first-child{border-radius:22px 0 0 22px;-webkit-mask:radial-gradient(circle 14px at 100% 50%,transparent 13.5px,#000 14px);mask:radial-gradient(circle 14px at 100% 50%,transparent 13.5px,#000 14px)}
#h88sc12#h88sc12 .tk:last-child{border-radius:0 22px 22px 0;-webkit-mask:radial-gradient(circle 14px at 0 50%,transparent 13.5px,#000 14px);mask:radial-gradient(circle 14px at 0 50%,transparent 13.5px,#000 14px)}
#h88sc12#h88sc12 .tk+.tk::before{content:"";position:absolute;left:0;top:22px;bottom:22px;border-left:3px dashed #CCD2D9}
#h88sc12#h88sc12 .tk-n{flex:none;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;font:900 42px/1 var(--disp);font-stretch:80%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
#h88sc12#h88sc12 .tk h3{font:900 28px/1 var(--disp);font-stretch:80%;text-transform:uppercase;color:var(--ink);margin-top:6px}
#h88sc12#h88sc12 .tk p{margin-top:8px;color:var(--tx-2);font-size:16px;line-height:1.5}
#h88sc12#h88sc12 .tk-a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:800 16px/1 var(--text);color:var(--red)}
#h88sc12#h88sc12 .tk-a:hover{text-decoration:underline;text-underline-offset:3px}
#h88sc12#h88sc12 .tk-a .ico{stroke-width:3}
#h88sc12#h88sc12 .tk-star{background:var(--yel)}
#h88sc12#h88sc12 .tk-star+.tk::before,#h88sc12#h88sc12 .tk-star::before{border-color:rgba(21,23,27,.25)}
#h88sc12#h88sc12 .tk-star .tk-n{background:var(--ink);color:var(--yel)}
#h88sc12#h88sc12 .tk-star p{color:var(--ink)}
#h88sc12#h88sc12 .tk-star .tk-a{color:var(--ink)}

/* ---- faq ---- */
#h88sc12#h88sc12 .s-faq{padding:8px 0 80px}
#h88sc12#h88sc12 .faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
#h88sc12#h88sc12 .faq-l{position:sticky;top:150px}
#h88sc12#h88sc12 .help{display:grid;gap:10px;max-width:360px}
#h88sc12#h88sc12 .hb{display:flex;align-items:center;gap:12px;height:58px;padding:0 18px;border-radius:14px;background:var(--paper);box-shadow:0 1px 0 var(--line),inset 0 0 0 1.5px var(--line);font:800 16px/1 var(--text);color:var(--ink);text-align:left;width:100%;transition:box-shadow .15s}
#h88sc12#h88sc12 .hb:hover{box-shadow:inset 0 0 0 2px var(--ink)}
#h88sc12#h88sc12 .hb .ico{width:24px;height:24px;color:var(--red)}
#h88sc12#h88sc12 .faq{display:grid;gap:12px}
#h88sc12#h88sc12 .faq details{background:var(--paper);border-radius:16px;box-shadow:0 1px 0 var(--line)}
#h88sc12#h88sc12 .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font:800 18px/1.3 var(--text);color:var(--ink)}
#h88sc12#h88sc12 .faq summary::-webkit-details-marker{display:none}
#h88sc12#h88sc12 .faq .pm{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--ground);stroke-width:2.8;transition:transform .2s,background-color .2s}
#h88sc12#h88sc12 .faq details[open] .pm{transform:rotate(45deg);background:var(--yel)}
#h88sc12#h88sc12 .faq details p{padding:0 22px 20px;color:var(--tx-2);font-size:16px;line-height:1.55;max-width:44em}

/* ---- end band ---- */
#h88sc12#h88sc12 .s-end{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--red-d),var(--red) 55%,#E5101F);color:#fff;padding:40px 0}
#h88sc12#h88sc12 .s-end .rays{background:repeating-conic-gradient(from 0deg at 12% 60%,rgba(255,255,255,.07) 0deg 7deg,rgba(255,255,255,0) 7deg 18deg);-webkit-mask:radial-gradient(40% 120% at 12% 60%,#000 10%,transparent 75%);mask:radial-gradient(40% 120% at 12% 60%,#000 10%,transparent 75%)}
#h88sc12#h88sc12 .s-end::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--haz)}
#h88sc12#h88sc12 .end-in{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:28px;align-items:center}
#h88sc12#h88sc12 .mascot-s{width:150px;height:auto;margin:-10px 0 -18px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35))}
#h88sc12#h88sc12 .end-copy h2{margin-top:12px;font:900 clamp(36px,3vw,52px)/1 var(--disp);font-stretch:76%;text-transform:uppercase}
#h88sc12#h88sc12 .end-copy h2 mark{color:var(--yel)}
#h88sc12#h88sc12 .end-copy p{margin-top:8px;color:#FFE3E5;font-size:16px;font-weight:700}
#h88sc12#h88sc12 .s-end .btn-ghost{box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
#h88sc12#h88sc12 .end-cta{flex-wrap:nowrap}
/* end base */

/* 1200-1379: tighter stage */
@media (min-width:1200px) and (max-width:1379.98px){
#h88sc12#h88sc12 .hero-in{grid-template-columns:minmax(0,1fr) 504px;gap:28px}
#h88sc12#h88sc12 .stage{width:600px;margin-right:-96px;transform:scale(.84);transform-origin:0 50%}
#h88sc12#h88sc12 h1{font-size:60px}
#h88sc12#h88sc12 .lede{font-size:17px}
#h88sc12#h88sc12 .tiles{gap:14px}
#h88sc12#h88sc12 .tile{padding:26px 20px}
#h88sc12#h88sc12 .tile h3{font-size:25px}
#h88sc12#h88sc12 .tk{padding:28px 24px;gap:14px}
#h88sc12#h88sc12 .tk-n{width:58px;height:58px;font-size:34px}
#h88sc12#h88sc12 .tk h3{font-size:24px}
#h88sc12#h88sc12 .card{padding:26px 22px 24px}
#h88sc12#h88sc12 .card h3{font-size:46px}
#h88sc12#h88sc12 .end-in{grid-template-columns:120px minmax(0,1fr) auto;gap:20px}
#h88sc12#h88sc12 .mascot-s{width:120px}
#h88sc12#h88sc12 .s-end .btn-xl{padding:0 22px}
}

/* ===== v12.1: below 1200px (tablet + phone). Same content, stacked. ===== */
@media (max-width:1199.98px){
#h88sc12#h88sc12{--hl:32px!important;--hr:32px!important;--s:.7}
#h88sc12#h88sc12 [id]{scroll-margin-top:16px}
#h88sc12#h88sc12 .hero-in{grid-template-columns:minmax(0,1fr) 420px;gap:24px;min-height:0}
#h88sc12#h88sc12 .stage{width:600px;height:470px;transform:scale(var(--s));transform-origin:0 0;margin:0 calc(600px * (var(--s) - 1)) calc(470px * (var(--s) - 1)) 0}
#h88sc12#h88sc12 h1{font-size:clamp(44px,5.4vw,60px)}
#h88sc12#h88sc12 .lede{font-size:17px}
#h88sc12#h88sc12 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#h88sc12#h88sc12 .tile{padding:26px 22px}
#h88sc12#h88sc12 .card{padding:26px 22px 24px;min-height:0}
#h88sc12#h88sc12 .c-g{min-height:0}
#h88sc12#h88sc12 .cards{align-items:stretch;gap:16px}
#h88sc12#h88sc12 .card h3{font-size:44px}
#h88sc12#h88sc12 .tk{padding:28px 22px;gap:14px}
#h88sc12#h88sc12 .tk-n{width:58px;height:58px;font-size:34px}
#h88sc12#h88sc12 .tk h3{font-size:24px}
#h88sc12#h88sc12 .tk-a{min-height:40px}
#h88sc12#h88sc12 .faq-in{gap:32px}
#h88sc12#h88sc12 .end-in{grid-template-columns:120px minmax(0,1fr);gap:12px 24px}
#h88sc12#h88sc12 .mascot-s{width:120px}
#h88sc12#h88sc12 .end-cta{grid-column:2;flex-wrap:wrap}
}
/* stacked hero, one-column levels / ticket / FAQ */
@media (max-width:899.98px){
#h88sc12#h88sc12{--s:.76}
#h88sc12#h88sc12 .s-hero{padding:40px 0 48px}
#h88sc12#h88sc12 .hero-in{grid-template-columns:minmax(0,1fr);gap:8px}
#h88sc12#h88sc12 .stage{justify-self:center;margin:calc(80px * var(--s)) calc(600px * (var(--s) - 1)) calc(470px * (var(--s) - 1)) calc(46px * var(--s))}
#h88sc12#h88sc12 .lede,#h88sc12#h88sc12 .status{max-width:none}
#h88sc12#h88sc12 .what-in{flex-direction:column;align-items:flex-start;gap:12px}
#h88sc12#h88sc12 .s-why,#h88sc12#h88sc12 .s-lv,#h88sc12#h88sc12 .s-join{padding:52px 0 56px}
#h88sc12#h88sc12 .cards{grid-template-columns:minmax(0,1fr);padding-top:0}
#h88sc12#h88sc12 .ticket{grid-template-columns:minmax(0,1fr)}
#h88sc12#h88sc12 .tk,#h88sc12#h88sc12 .tk:first-child,#h88sc12#h88sc12 .tk:last-child{-webkit-mask:none;mask:none;border-radius:0}
#h88sc12#h88sc12 .tk:first-child{border-radius:22px 22px 0 0}
#h88sc12#h88sc12 .tk:last-child{border-radius:0 0 22px 22px}
#h88sc12#h88sc12 .tk+.tk::before{left:22px;right:22px;top:0;bottom:auto;border-left:0;border-top:3px dashed #CCD2D9}
#h88sc12#h88sc12 .tk-star+.tk::before,#h88sc12#h88sc12 .tk-star::before{border-color:rgba(21,23,27,.25)}
#h88sc12#h88sc12 .s-faq{padding:0 0 56px}
#h88sc12#h88sc12 .faq-in{grid-template-columns:minmax(0,1fr);gap:20px}
#h88sc12#h88sc12 .faq-l{position:static}
#h88sc12#h88sc12 .help{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phones */
@media (max-width:767.98px){
#h88sc12#h88sc12{--hl:16px!important;--hr:16px!important;--s:.8}
#h88sc12#h88sc12 .s-hero{padding:28px 0 40px}
#h88sc12#h88sc12 h1{margin-top:18px;font-size:clamp(40px,11.5vw,58px)}
#h88sc12#h88sc12 .lede{margin-top:16px;font-size:16px}
#h88sc12#h88sc12 .hero-copy .cta{margin-top:22px}
#h88sc12#h88sc12 .cta .btn{flex:1 1 auto}
#h88sc12#h88sc12 .btn-xl{height:56px;padding:0 20px;font-size:17px}
#h88sc12#h88sc12 .ticks{gap:8px 18px;margin-top:20px}
#h88sc12#h88sc12 .kick{gap:10px 14px}
#h88sc12#h88sc12 .kick>span:last-child{padding-left:0;border-left:0;font-size:13px}
#h88sc12#h88sc12 .s-what{padding:20px 0}
#h88sc12#h88sc12 .what-t{font-size:19px}
#h88sc12#h88sc12 .sec-hd{gap:14px;margin-bottom:22px}
#h88sc12#h88sc12 .sec-no{width:48px;height:48px;border-radius:12px;font-size:24px}
#h88sc12#h88sc12 .sec-hd h2{font-size:30px}
#h88sc12#h88sc12 .sec-hd p{font-size:15px}
#h88sc12#h88sc12 .s-why,#h88sc12#h88sc12 .s-lv,#h88sc12#h88sc12 .s-join{padding:40px 0 44px}
#h88sc12#h88sc12 .tile{padding:22px 20px;border-radius:18px}
#h88sc12#h88sc12 .t-ico{width:72px;height:72px;border-radius:20px}
#h88sc12#h88sc12 .t-ico .big{width:52px;height:52px}
#h88sc12#h88sc12 .tile h3{margin-top:16px;font-size:24px}
#h88sc12#h88sc12 .tile p{font-size:15px}
#h88sc12#h88sc12 .card{padding:24px 20px 22px;border-radius:20px}
#h88sc12#h88sc12 .c-medal{width:56px;height:56px}
#h88sc12#h88sc12 .c-medal .ico{width:32px;height:32px}
#h88sc12#h88sc12 .card h3{font-size:40px}
#h88sc12#h88sc12 .c-list li{font-size:15px}
#h88sc12#h88sc12 .lv-note{align-items:flex-start;padding:14px 16px;font-size:15px}
#h88sc12#h88sc12 .tk{padding:24px 20px}
#h88sc12#h88sc12 .tk-n{width:52px;height:52px;font-size:30px}
#h88sc12#h88sc12 .tk h3{font-size:22px;margin-top:4px}
#h88sc12#h88sc12 .tk p{font-size:15px}
#h88sc12#h88sc12 .s-faq{padding:0 0 44px}
#h88sc12#h88sc12 .help{grid-template-columns:minmax(0,1fr)}
#h88sc12#h88sc12 .hb{height:52px}
#h88sc12#h88sc12 .faq summary{padding:16px 16px;font-size:16px}
#h88sc12#h88sc12 .faq details p{padding:0 16px 16px;font-size:15px}
#h88sc12#h88sc12 .s-end{padding:32px 0 40px}
#h88sc12#h88sc12 .end-in{grid-template-columns:minmax(0,1fr);justify-items:start;gap:16px}
#h88sc12#h88sc12 .mascot-s{width:104px;margin:0}
#h88sc12#h88sc12 .end-copy h2{font-size:34px}
#h88sc12#h88sc12 .end-cta{grid-column:auto;width:100%}
}
@media (max-width:599.98px){
#h88sc12#h88sc12{--s:.6}
#h88sc12#h88sc12 .tiles{grid-template-columns:minmax(0,1fr);gap:12px}
#h88sc12#h88sc12 .tile{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 18px 22px}
#h88sc12#h88sc12 .t-ico{grid-row:1 / span 2;width:64px;height:64px;border-radius:18px}
#h88sc12#h88sc12 .t-ico .big{width:46px;height:46px}
#h88sc12#h88sc12 .tile h3{margin-top:2px;font-size:23px}
#h88sc12#h88sc12 .tile p{margin-top:6px}
#h88sc12#h88sc12 .tile.hot h3{padding-right:88px}
#h88sc12#h88sc12 .t-flag{right:14px;top:16px}
}
@media (max-width:419.98px){#h88sc12#h88sc12{--s:.52}}
@media (max-width:359.98px){#h88sc12#h88sc12{--s:.44}}