/* ===== HOW IT WORKS - PINNED SLIDER ===== */
.hiw-pin{height:100vh;overflow:hidden;position:relative}
.hiw-inner{display:flex;height:100%;align-items:center;max-width:1200px;margin:0 auto;padding:0 clamp(1.5rem,4vw,3rem);gap:clamp(2rem,5vw,5rem)}

.hiw-left{flex:0 0 320px;padding-top:64px}
.hiw-badge{font-family:var(--mono);font-size:10px;color:var(--ac);letter-spacing:0.1em;margin-bottom:0.8rem}
.hiw-left h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-0.04em;line-height:1.15;margin-bottom:0.6rem}
.hiw-left p{font-size:13px;color:var(--tx2);line-height:1.7;font-weight:300;margin-bottom:1.5rem}

.hiw-progress{margin-bottom:1rem}
.hp-bar{width:100%;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
.hp-fill{height:100%;width:16.6%;background:linear-gradient(90deg,var(--ac),var(--pp));border-radius:2px;transition:width 0.5s cubic-bezier(0.16,1,0.3,1)}
.hp-count{font-family:var(--mono);font-size:11px;color:var(--dm);margin-top:0.4rem}

.hiw-dots{display:flex;gap:8px}
.hd{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--bd2);background:none;cursor:pointer;padding:0;transition:all 0.3s}
.hd.active{background:var(--ac);border-color:var(--ac);box-shadow:0 0 10px rgba(74,158,255,0.4)}
.hd:hover:not(.active){border-color:var(--ac)}

.hiw-right{flex:1;overflow:hidden;padding-top:64px}
.hiw-slider{display:flex;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);will-change:transform}
.hiw-slide{flex:0 0 100%;min-width:0;width:100%;padding:2rem 2.5rem;background:var(--card);border:1px solid var(--bd);border-radius:20px;display:flex;flex-direction:column;gap:0.4rem;box-sizing:border-box}

.hs-num{font-family:var(--mono);font-size:42px;font-weight:800;color:var(--bd2);line-height:1}
.hs-icon{margin:0.2rem 0 0.4rem}
.hiw-slide h3{font-size:18px;font-weight:700;letter-spacing:-0.3px}
.hiw-slide p{font-size:13.5px;color:var(--tx2);line-height:1.75;font-weight:300;max-width:420px}
.hiw-slide code{font-family:var(--mono);font-size:11px;background:var(--bg2);border:1px solid var(--bd);padding:1px 5px;border-radius:3px;color:var(--ac)}

.hs-tag{display:inline-block;font-family:var(--mono);font-size:9px;color:var(--gn);background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.15);padding:2px 8px;border-radius:100px;letter-spacing:0.05em;margin-top:0.8rem;width:fit-content}
.hs-tag.hs-server{color:var(--pp);background:rgba(124,92,252,0.08);border-color:rgba(124,92,252,0.15)}

.hs-bars{display:flex;gap:6px;margin-top:0.6rem}
.hsb{flex:1;height:4px;background:var(--bd);border-radius:2px;overflow:hidden}
.hsb-f{height:100%;border-radius:2px;transition:width 0.8s ease}

.hs-link{margin-top:0.5rem;font-family:var(--mono);font-size:11.5px;padding:0.5rem 0.7rem;background:var(--bg);border:1px solid var(--bd);border-radius:8px}
.hsl-d{color:var(--dm)}.hsl-h{color:var(--rd);font-weight:800}.hsl-k{color:var(--ac)}

.hs-info-slide{justify-content:center}
.hs-split{display:flex;gap:0.8rem;width:100%}
.hs-box{flex:1;padding:1rem;background:var(--bg);border:1px solid var(--bd);border-radius:12px}
.hs-box h4{font-size:14px;font-weight:600;margin-bottom:0.5rem}
.hs-box ul{list-style:none;padding:0}
.hs-box li{font-size:12.5px;color:var(--tx2);line-height:2;font-weight:300;padding-left:1rem;position:relative}
.hs-bad li::before{content:'';position:absolute;left:0;top:0.65em;width:5px;height:5px;border-radius:50%;background:var(--rd)}
.hs-good li::before{content:'';position:absolute;left:0;top:0.65em;width:5px;height:5px;border-radius:50%;background:var(--gn)}

.hs-pqc-slide{justify-content:center;align-items:center;text-align:center}
.hs-pqc-inner{max-width:400px}
.hs-pqc-badge{font-family:var(--mono);font-size:10px;color:var(--pp);letter-spacing:0.08em;text-transform:uppercase;background:rgba(124,92,252,0.1);padding:4px 12px;border-radius:100px;display:inline-block;margin-bottom:0.7rem}
.hs-pqc-inner h3{font-size:18px;font-weight:700;margin-bottom:0.3rem}
.hs-pqc-inner p{font-size:13px;color:var(--tx2);line-height:1.7;font-weight:300;margin-bottom:1.2rem}
.hs-pqc-chips{display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap}
.hs-chip{padding:0.45rem 0.8rem;background:var(--bg);border:1px solid var(--bd);border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:1px}
.hs-chip strong{font-size:12px;color:var(--tx);font-weight:600}
.hs-chip span{font-size:9px;color:var(--dm);font-family:var(--mono)}

/* After section removed - all content in slider */

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hiw-inner{flex-direction:column;gap:1.5rem;padding:0 1rem}
  .hiw-left{flex:none;width:100%;padding-top:72px;text-align:center}
  .hiw-left h1{font-size:1.6rem}
  .hiw-dots{justify-content:center}
  .hiw-right{width:100%;padding-top:0}
  .hiw-slide{padding:1.5rem;border-radius:14px}
  .hs-num{font-size:30px}
  .hiw-slide h3{font-size:15px}
  .hiw-slide p{font-size:12.5px}
  .hs-split{flex-direction:column;gap:0.6rem}
}
@media(max-width:600px){
  .hiw-left{padding-top:64px}
  .hiw-left h1{font-size:1.4rem}
  .hiw-left p{font-size:12px}
  .hiw-slide{padding:1.2rem}
  .hiw-slide h3{font-size:14px}
  .hiw-slide p{font-size:12px}
  .hs-num{font-size:24px}
}