.j20-page .site-header{background:linear-gradient(180deg,rgba(5,20,32,.96),rgba(5,20,32,.72),transparent)}
.j20-hero{position:relative;min-height:820px;background:linear-gradient(135deg,#061727 0%,#0b2d43 56%,#e9eef1 56%,#f8fafb 100%);overflow:hidden;color:#fff;display:flex;align-items:center}
.j20-grid-pattern{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(85,209,228,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(85,209,228,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000 0 50%,transparent 72%)}
.j20-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;position:relative;z-index:2;padding-top:120px;padding-bottom:130px}
.j20-copy h1{font-size:68px;line-height:.98;letter-spacing:-2.3px;margin:0 0 24px}.j20-copy h1 span{color:#75d7e6}
.j20-copy>p{font-size:19px;line-height:1.6;max-width:660px;color:rgba(255,255,255,.78)}
.j20-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}.j20-chips span{font-size:10px;font-weight:800;padding:9px 12px;border:1px solid rgba(103,215,231,.3);background:rgba(255,255,255,.04)}
.j20-product{min-height:520px;display:flex;align-items:center;justify-content:center;position:relative}
.j20-product img{width:min(620px,100%);position:relative;z-index:2;mix-blend-mode:multiply;filter:drop-shadow(0 30px 30px rgba(9,34,48,.20))}
.product-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(42,178,199,.16),rgba(42,178,199,.03) 52%,transparent 70%)}
.j20-mark{position:absolute;right:0;bottom:50px;color:#0b3550;font-size:62px;font-weight:900;line-height:.9;letter-spacing:-2px;text-align:right}.j20-mark span{display:block;font-size:9px;letter-spacing:2px;margin-top:10px;color:#4b7586}
.j20-statbar{position:absolute;left:0;right:0;bottom:0;background:rgba(4,24,38,.95);border-top:1px solid rgba(102,214,231,.16);z-index:4}.j20-statbar .container{display:grid;grid-template-columns:repeat(4,1fr)}
.j20-statbar .container>div{padding:23px;border-right:1px solid rgba(255,255,255,.1);display:flex;gap:13px;align-items:center}.j20-statbar .container>div:last-child{border-right:0}
.j20-statbar strong{color:#68d5e5;font-size:25px}.j20-statbar span{font-size:10px;line-height:1.35;color:rgba(255,255,255,.6)}

.j20-positioning{padding:105px 0;background:#f5f7f9}.positioning-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.positioning-copy h2,.cloud-copy h2,.pair-copy h2{font-size:52px;line-height:1.02;letter-spacing:-1.6px;color:#09254a;margin:0 0 24px}.positioning-copy h2 span,.cloud-copy h2 span,.pair-copy h2 span{color:#0e7185}
.positioning-copy p,.cloud-copy p,.pair-copy p{font-size:16px;line-height:1.72;color:#5e7182}
.positioning-photo{height:520px;overflow:hidden;box-shadow:0 30px 80px rgba(8,33,48,.12)}.positioning-photo img{width:100%;height:100%;object-fit:cover}
.use-tags,.cloud-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.use-tags span,.cloud-tags span{padding:9px 12px;background:#fff;border:1px solid #d7e3e8;color:#174c60;font-size:10px;font-weight:800}

.j20-cleaning{padding:100px 0;background:linear-gradient(135deg,#061a2b,#0c3046);color:#fff}
.cleaning-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.cleaning-visual{min-height:500px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%)}.cleaning-visual img{width:min(650px,100%);mix-blend-mode:screen;filter:contrast(1.06)}
.cleaning-copy h2{font-size:52px;line-height:1.03;margin:0 0 24px}.cleaning-copy p{font-size:16px;line-height:1.72;color:rgba(255,255,255,.68)}
.cleaning-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}.cleaning-points div{padding:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}.cleaning-points b{display:block;color:#68d5e5;font-size:11px;margin-bottom:10px}.cleaning-points strong{font-size:13px}

.j20-navigation{min-height:620px;position:relative;background:#071928;color:#fff;overflow:hidden;display:flex;align-items:center}
.nav-bg{position:absolute;inset:0;background:url('assets/j20-chair.jpg') center/cover no-repeat;filter:saturate(.72) contrast(1.05)}
.j20-navigation:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,20,33,.97) 0%,rgba(5,20,33,.88) 44%,rgba(5,20,33,.28) 70%,rgba(5,20,33,.12))}
.nav-content{position:relative;z-index:2}.nav-copy{max-width:620px}.nav-copy h2{font-size:53px;line-height:1.02;margin:0 0 24px}.nav-copy>p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.7)}
.nav-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.nav-features div{padding:18px;border-top:2px solid #42c8dc;background:rgba(4,28,43,.42)}.nav-features strong{display:block;font-size:22px}.nav-features span{display:block;margin-top:7px;font-size:10px;color:rgba(255,255,255,.58)}

.j20-cloud{padding:100px 0;background:linear-gradient(180deg,#fff,#edf2f5)}.cloud-grid{display:grid;grid-template-columns:1fr .7fr;gap:80px;align-items:center}
.cloud-card{padding:44px;background:linear-gradient(145deg,#09263b,#0b3c53);color:#fff;box-shadow:0 30px 80px rgba(8,34,50,.15)}.cloud-kicker{font-size:10px;letter-spacing:1.4px;color:#71d7e6;font-weight:800}.cloud-card strong{font-size:34px;line-height:1.1;display:block;margin:18px 0}.cloud-card p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.66)}

.j20-pair{padding:100px 0;background:#fff}.pair-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
.pair-photo{height:520px;overflow:hidden}.pair-photo img{width:100%;height:100%;object-fit:cover}.text-link{display:inline-block;margin-top:22px;font-size:12px;font-weight:900;color:#087a91}

.j20-specs{padding:100px 0;background:linear-gradient(135deg,#061a2b,#0b2f46 62%,#092333);color:#fff}.specs-grid{display:grid;grid-template-columns:.48fr 1.52fr;gap:70px;align-items:start}
.specs-copy h2{font-size:50px;line-height:1.03;margin:0 0 20px}.specs-copy p{color:rgba(255,255,255,.6);line-height:1.6}
.spec-table{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}.spec-table>div{padding:17px 19px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px}
.spec-table span{font-size:10px;color:rgba(255,255,255,.52)}.spec-table strong{font-size:11px;text-align:right}.spec-note{margin-top:15px;font-size:10px;color:rgba(255,255,255,.42)}

.j20-mbconnect{padding:95px 0;background:#f4f7f8}.implementation-flow{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #cbdce3;margin-top:40px}.implementation-flow>div{padding:30px 18px;border-right:1px solid #d7e3e8}.implementation-flow>div:last-child{border-right:0}.implementation-flow b{display:block;font-size:11px;color:#1491a8;margin-bottom:20px}.implementation-flow strong{font-size:12px;color:#18384a}

@media(max-width:1000px){
 .j20-hero-grid,.positioning-grid,.cleaning-grid,.cloud-grid,.pair-grid,.specs-grid{grid-template-columns:1fr}
 .j20-hero{background:linear-gradient(180deg,#061727 0%,#0b2d43 56%,#f2f5f6 56%,#f8fafb 100%)}
 .j20-product{min-height:430px}.j20-mark{right:6%;bottom:22px}
 .j20-statbar .container{grid-template-columns:repeat(2,1fr)}
 .implementation-flow{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
 .j20-hero{min-height:980px}.j20-hero-grid{padding-top:110px;padding-bottom:150px;gap:20px}
 .j20-copy h1{font-size:45px}.j20-copy>p{font-size:15px}.j20-product{min-height:320px}.j20-mark{font-size:42px}
 .j20-statbar .container{grid-template-columns:repeat(2,1fr)}.j20-statbar .container>div{padding:14px}
 .j20-positioning,.j20-cleaning,.j20-cloud,.j20-pair,.j20-specs,.j20-mbconnect{padding:70px 0}
 .positioning-copy h2,.cloud-copy h2,.pair-copy h2,.cleaning-copy h2,.nav-copy h2,.specs-copy h2{font-size:38px}
 .positioning-photo,.pair-photo{height:360px}.cleaning-visual{min-height:340px}
 .cleaning-points,.nav-features,.spec-table{grid-template-columns:1fr}
 .j20-navigation{min-height:680px}
 .implementation-flow{grid-template-columns:1fr 1fr}
}


/* Final extra-small phone polish */
@media(max-width:430px){
  .j20-copy h1,.j30-copy h1,.j36-copy h1,.j140-copy h1{font-size:39px!important;letter-spacing:-1.4px!important}
  .j20-chips,.j30-chips,.j36-chips,.j140-chips{gap:6px}
  .j20-chips span,.j30-chips span,.j36-chips span,.j140-chips span{font-size:9px;padding:8px 9px}
  .j20-statbar .container,.j30-statbar .container,.j36-statbar .container,.j140-statbar .container{grid-template-columns:1fr 1fr!important}
  .j20-statbar strong,.j30-statbar strong,.j36-statbar strong,.j140-statbar strong{font-size:19px!important}
  .j20-statbar span,.j30-statbar span,.j36-statbar span,.j140-statbar span{font-size:8px!important}
  .spec-table>div{padding:14px 13px!important}
  .spec-table span,.spec-table strong{font-size:9px!important}
}