.how-page .how-hero{min-height:auto;padding:82px 0 76px}
.how-page .how-hero .hero-grid{grid-template-columns:1.02fr .98fr;gap:48px}
.how-page .how-hero h1{font-size:clamp(46px,6.1vw,76px)}
.how-page .how-hero p{max-width:690px}
.how-loop-card{padding:20px}
.how-loop-title{display:grid;gap:5px;padding:4px 4px 18px}
.how-loop-title span{font-size:11px;font-weight:900;letter-spacing:.16em;color:#82edf8}
.how-loop-title strong{font-size:22px;line-height:1.2}
.how-loop{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.how-loop-node{display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.04)}
.how-loop-node b{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:rgba(27,191,218,.12);color:#9ff4ff;font-size:11px}
.how-loop-node span{font-size:13px;font-weight:750;color:rgba(255,255,255,.88)}
.how-loop-node.active{border-color:rgba(27,191,218,.42);background:linear-gradient(135deg,rgba(27,191,218,.14),rgba(58,141,255,.08))}
.how-loop-arrow{color:rgba(255,255,255,.35);font-weight:900}
.how-loop-note{margin:16px 4px 2px!important;font-size:12px!important;color:rgba(255,255,255,.48)!important}
.how-video-section{padding:82px 0}
.how-video-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:46px;align-items:center}
.how-video-frame{overflow:hidden;border-radius:28px;border:1px solid rgba(16,18,24,.12);background:#050505;box-shadow:0 24px 70px rgba(16,18,24,.14);aspect-ratio:16/9}
.how-video-frame iframe{width:100%;height:100%;border:0;display:block}
.how-mini-points{display:grid;gap:10px;margin-top:26px}
.how-mini-points span{position:relative;padding-left:22px;color:#4f5967;font-size:14px;font-weight:650}
.how-mini-points span:before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue))}
.how-steps-section{padding:82px 0}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.how-step{min-height:245px;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.04)}
.how-step>span{display:inline-flex;margin-bottom:18px;color:#82edf8;font-size:12px;font-weight:900;letter-spacing:.14em}
.how-step h3{margin:0 0 10px;font-size:21px}
.how-step p{margin:0;color:rgba(255,255,255,.6);font-size:15px}
.how-monitor-section{padding:82px 0}
.how-monitor-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:start}
.how-monitor-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.how-monitor-list>div{padding:20px;border:1px solid rgba(16,18,24,.1);border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(16,18,24,.04)}
.how-monitor-list strong,.how-monitor-list span{display:block}
.how-monitor-list strong{margin-bottom:7px;color:var(--ink);font-size:16px}
.how-monitor-list span{color:#606a79;font-size:14px;line-height:1.55}
.how-product-section{padding:82px 0}
.how-product-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;margin-top:38px;align-items:stretch}
.how-product-shot{overflow:hidden;min-height:100%;border:1px solid var(--line);border-radius:28px;background:#0a0d14;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.how-product-shot picture,.how-product-shot img{width:100%;height:100%}
.how-product-shot img{object-fit:cover}
.how-product-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.how-product-cards article{padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04)}
.how-product-cards span{display:block;margin-bottom:8px;color:#82edf8;font-size:10px;font-weight:900;letter-spacing:.14em}
.how-product-cards strong{display:block;font-size:17px;line-height:1.35}
.how-product-cards p{margin:8px 0 0;color:rgba(255,255,255,.56);font-size:13px;line-height:1.55}
.how-cta{text-align:center}
.how-cta .section-label{margin-bottom:14px}
.how-cta-actions{justify-content:center;margin-top:28px}
.how-boundary{max-width:760px;margin:24px auto 0;color:rgba(255,255,255,.43);font-size:12px;line-height:1.55}
@media (max-width:980px){
  .how-page .how-hero .hero-grid,.how-video-grid,.how-monitor-grid,.how-product-grid{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr 1fr}
  .how-product-shot{max-height:520px}
}
@media (max-width:640px){
  .how-page .how-hero{padding:56px 0 60px}
  .how-page .how-hero h1{font-size:clamp(42px,13vw,58px)}
  .how-loop{grid-template-columns:1fr}
  .how-loop-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
  .how-video-section,.how-steps-section,.how-monitor-section,.how-product-section{padding:64px 0}
  .how-steps,.how-monitor-list,.how-product-cards{grid-template-columns:1fr}
  .how-step{min-height:0}
  .how-video-grid{gap:28px}
}