.product-page .site-header{background:linear-gradient(180deg,rgba(4,17,28,.96),rgba(4,17,28,.72),transparent)}
.j40-hero{min-height:860px;position:relative;overflow:hidden;background:#061727;color:#fff;display:flex;align-items:center}
.j40-hero-bg{position:absolute;inset:0;background:url('assets/j40-scene-office.jpg') center/cover no-repeat;filter:saturate(.86) contrast(1.08)}
.j40-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,30,.97) 0%,rgba(4,18,30,.88) 36%,rgba(4,18,30,.28) 62%,rgba(4,18,30,.05) 100%),linear-gradient(180deg,rgba(4,18,30,.32),transparent 48%,rgba(4,18,30,.74))}
.j40-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .48fr;gap:80px;align-items:center;padding-top:110px;padding-bottom:130px}
.j40-hero-copy{max-width:690px}
.j40-hero h1{font-size:70px;line-height:.98;letter-spacing:-2.4px;margin:0 0 25px;color:#fff}
.j40-hero h1 span{color:#dff7fb}
.j40-hero-copy>p{font-size:20px;line-height:1.56;color:rgba(255,255,255,.82);max-width:650px}
.j40-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.j40-chips span{border:1px solid rgba(95,210,229,.38);background:rgba(5,35,51,.38);padding:9px 13px;font-size:11px;font-weight:800;letter-spacing:.7px}
.j40-hero-badge{justify-self:end;align-self:end;padding-bottom:140px;border-left:3px solid var(--brand);padding-left:22px}
.j40-hero-badge strong{display:block;font-size:54px}
.j40-hero-badge span{display:block;margin-top:7px;font-size:12px;line-height:1.45;letter-spacing:1.6px;color:#8cd8e5}
.j40-statbar{position:absolute;left:0;right:0;bottom:0;z-index:3;background:linear-gradient(90deg,rgba(4,29,45,.97),rgba(7,49,67,.95));border-top:1px solid rgba(103,215,233,.18)}
.j40-statbar .container{display:grid;grid-template-columns:repeat(5,1fr)}
.j40-statbar .container>div{padding:24px 22px;border-right:1px solid rgba(255,255,255,.11);display:flex;align-items:center;gap:14px}
.j40-statbar .container>div:last-child{border-right:0}
.j40-statbar strong{font-size:24px;color:#66d4e5}
.j40-statbar span{font-size:10px;line-height:1.35;color:rgba(255,255,255,.64)}

.j40-intro{padding:105px 0;background:linear-gradient(180deg,#f8fafb,#edf2f5)}
.intro-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center}
.intro-copy h2,.dock-copy h2,.platform-copy h2,.specs-copy h2{font-size:54px;line-height:1.02;letter-spacing:-1.7px;color:#09254a;margin:0 0 24px}
.intro-copy h2 span,.dock-copy h2 span{color:#0f6d82}
.intro-copy p,.dock-copy p,.platform-copy p{font-size:16px;line-height:1.7;color:#5f7185}
.intro-visual{display:flex;align-items:center;justify-content:center;min-height:520px;background:radial-gradient(circle at 50% 50%,#fff,#edf2f5 72%);border:1px solid rgba(10,70,92,.08);box-shadow:0 28px 80px rgba(6,34,52,.08)}
.intro-visual img{max-height:450px;object-fit:contain;filter:drop-shadow(0 30px 34px rgba(14,35,49,.18))}
.mini-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.mini-list span{font-size:11px;font-weight:800;color:#0c667c;border:1px solid #c9dce3;background:#fff;padding:9px 12px}

.j40-modules{background:linear-gradient(135deg,#061b2c,#0b3048 65%,#092437);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.j40-modules:after{content:"";position:absolute;inset:auto -10% -30% 35%;height:420px;background:radial-gradient(ellipse at center,rgba(52,183,205,.14),transparent 70%);transform:rotate(-9deg)}
.modules-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;position:relative;z-index:1}
.module-visual{display:flex;justify-content:center;align-items:center;min-height:500px}.module-visual img{max-height:470px;filter:drop-shadow(0 32px 35px rgba(0,0,0,.34))}
.module-copy h2{font-size:52px;line-height:1.04;margin:0 0 28px}
.module-points{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.module-points>div{display:flex;gap:13px;align-items:center;border:1px solid rgba(255,255,255,.1);padding:17px;background:rgba(255,255,255,.035)}
.module-points b{font-size:12px;color:#68d5e6}.module-points span{display:flex;flex-direction:column;gap:4px}.module-points strong{font-size:13px}.module-points small{font-size:10px;color:rgba(255,255,255,.55)}

.j40-dock{padding:100px 0;background:#fff}
.dock-grid{display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:center}
.dock-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.dock-cards>div{padding:18px;border:1px solid #dce6eb;background:#f8fafb}.dock-cards strong{display:block;font-size:13px;color:#0d4b61}.dock-cards span{display:block;margin-top:6px;font-size:11px;color:#6f7e8c}
.dock-visual{min-height:450px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f8fafb,#eef2f5);overflow:hidden}.dock-visual img{max-height:400px;filter:drop-shadow(0 26px 28px rgba(15,41,58,.17))}

.j40-intelligence{position:relative;min-height:650px;background:#061727;color:#fff;overflow:hidden;display:flex;align-items:center}
.intelligence-bg{position:absolute;inset:0;background:url('assets/j40-scene-vertical.jpg') center/cover no-repeat;filter:saturate(.8) contrast(1.06)}
.j40-intelligence:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,33,.97),rgba(4,20,33,.78) 48%,rgba(4,20,33,.14) 75%,rgba(4,20,33,.18))}
.intelligence-grid{position:relative;z-index:2;display:grid;grid-template-columns:.62fr .38fr;padding:90px 0}
.intelligence-copy{max-width:650px}
.intelligence-copy h2{font-size:54px;line-height:1.02;margin:0 0 24px}
.intelligence-copy>p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.72)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.feature-grid>div{padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(4,27,42,.45)}
.feature-grid strong{display:block;font-size:13px}.feature-grid span{display:block;font-size:10px;margin-top:7px;color:rgba(255,255,255,.55)}

.j40-platform{padding:105px 0;background:linear-gradient(180deg,#edf2f5,#f9fafb)}
.platform-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.platform-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.platform-tags span{font-size:10px;font-weight:800;color:#0f6c82;border:1px solid #c8dce4;background:white;padding:9px 11px}
.platform-photo{height:520px;overflow:hidden;box-shadow:0 26px 70px rgba(7,31,47,.14)}.platform-photo img{width:100%;height:100%;object-fit:cover}

.j40-surfaces{padding:90px 0;background:#fff}
.surface-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.surface-row span{padding:24px 10px;text-align:center;border:1px solid #dce7ec;background:#f8fafb;font-size:12px;font-weight:800;color:#25475a}

.j40-specs{padding:100px 0;background:linear-gradient(135deg,#061a2b,#0b2f46 62%,#092333);color:#fff}
.specs-grid{display:grid;grid-template-columns:.5fr 1.5fr;gap:70px;align-items:start}
.specs-copy h2{color:#fff}.specs-copy p{color:rgba(255,255,255,.64);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:18px 20px;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:11px;color:rgba(255,255,255,.55)}.spec-table strong{font-size:12px}
.spec-note{margin-top:16px;font-size:10px;color:rgba(255,255,255,.44)}

.j40-implementation{padding:95px 0;background:#f5f7f9}
.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){
  .j40-hero-grid,.intro-grid,.modules-grid,.dock-grid,.platform-grid,.specs-grid{grid-template-columns:1fr}
  .j40-hero-badge{display:none}
  .j40-statbar .container{grid-template-columns:repeat(3,1fr)}
  .j40-statbar .container>div:nth-child(n+4){display:none}
  .surface-row{grid-template-columns:repeat(3,1fr)}
  .implementation-flow{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .j40-hero{min-height:760px}
  .j40-hero-grid{padding-top:115px;padding-bottom:130px}
  .j40-hero h1{font-size:46px}
  .j40-hero-copy>p{font-size:16px}
  .j40-statbar .container{grid-template-columns:repeat(3,1fr)}
  .j40-statbar .container>div{padding:16px 10px}
  .j40-statbar strong{font-size:17px}
  .j40-intro,.j40-modules,.j40-dock,.j40-platform,.j40-surfaces,.j40-specs,.j40-implementation{padding:70px 0}
  .intro-copy h2,.dock-copy h2,.platform-copy h2,.specs-copy h2,.module-copy h2,.intelligence-copy h2{font-size:38px}
  .intro-visual,.dock-visual{min-height:340px}
  .intro-visual img,.dock-visual img{max-height:300px}
  .module-points,.dock-cards,.feature-grid,.spec-table{grid-template-columns:1fr}
  .platform-photo{height:360px}
  .surface-row{grid-template-columns:repeat(2,1fr)}
  .implementation-flow{grid-template-columns:1fr 1fr}
  .intelligence-grid{grid-template-columns:1fr;padding:70px 0}
}


.j40-flex{padding:100px 0;background:linear-gradient(180deg,#f7f9fb 0%,#eef3f5 100%);position:relative;overflow:hidden}
.j40-flex:before{content:"";position:absolute;width:560px;height:560px;right:-170px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(25,154,177,.10),transparent 68%)}
.flex-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:90px;align-items:center;position:relative;z-index:1}
.flex-copy h2{font-size:54px;line-height:1.02;letter-spacing:-1.7px;color:#09254a;margin:0 0 24px}
.flex-copy h2 span{color:#0f6d82}
.flex-copy p{font-size:16px;line-height:1.72;color:#5f7185;max-width:650px}
.flex-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.flex-points span{padding:14px 16px;border:1px solid #d8e4e9;background:#fff;color:#18495b;font-size:11px;font-weight:800;letter-spacing:.25px}
.flex-visual{min-height:480px;display:flex;align-items:center;justify-content:center;position:relative}
.flex-visual img{max-height:410px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 28px 34px rgba(13,40,55,.18))}
.flex-ring{position:absolute;width:390px;height:390px;border-radius:50%;border:1px solid rgba(22,135,157,.16);box-shadow:0 0 0 38px rgba(22,135,157,.035),0 0 0 78px rgba(22,135,157,.02)}
@media(max-width:1000px){.flex-grid{grid-template-columns:1fr;gap:45px}}
@media(max-width:760px){
  .j40-flex{padding:70px 0}
  .flex-copy h2{font-size:38px}
  .flex-points{grid-template-columns:1fr}
  .flex-visual{min-height:340px}
  .flex-visual img{max-height:300px}
  .flex-ring{width:280px;height:280px}
}


/* 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}
}