:root{--ph-font:var(--font-fa);--ph-gutter:42px;--ph-container-max:1600px;--ph-brand:var(--brand);--ph-brand-dark:#0f55d6;--ph-ink:#071b38;--ph-muted:#536983;--ph-line:#dbeaf6}
html{scroll-behavior:smooth}
body{font-family:var(--ph-font);direction:rtl;background:#fff;color:var(--ph-ink);font-synthesis:none}
.ph-page,.ph-page *{box-sizing:border-box}
.ph-container{width:min(calc(100% - (2 * var(--ph-gutter))),var(--ph-container-max));margin-inline:auto}
/* S01 */
.ph-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 34% 43%,rgba(215,236,252,.8) 0,rgba(236,246,253,.52) 26%,rgba(255,255,255,0) 58%),linear-gradient(180deg,#fff 0%,#f8fbfe 100%);border-bottom:1px solid #e7edf4;min-height:487px}
.ph-hero__inner{min-height:487px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(420px,1fr);direction:ltr;align-items:stretch;gap:16px}
.ph-hero__visual{position:relative;min-width:0;direction:ltr;isolation:isolate}
.ph-hero__copy{direction:rtl;text-align:right;display:flex;flex-direction:column;justify-content:center;padding:46px 0 42px 20px;z-index:3}
@media(max-width:1330px){:root{--ph-gutter:30px}
.ph-hero__inner{grid-template-columns:minmax(0,1.36fr) minmax(400px,1fr)}
}
@media(max-width:1040px){:root{--ph-gutter:24px}
.ph-hero{min-height:0}
.ph-hero__inner{min-height:0;grid-template-columns:1fr;direction:rtl}
.ph-hero__copy{order:1;padding:42px 0 22px;max-width:760px}
.ph-hero__visual{order:2;min-height:560px}
}
@media(max-width:720px){:root{--ph-gutter:20px}
.ph-hero__copy{padding-top:32px}
.ph-hero__visual{min-height:630px;margin-inline:-6px}
}
@media(max-width:390px){.ph-hero__visual{min-height:590px}
}
/* S02 — Product Family Navigator */
/* S02 v0.4 — responsive access hardening */
@media(max-width:1040px){/* Keep the approved RTL family order visually: first category on the right. */
}
/* S04 — Core + Expand + Connect */
/* S04 v1.0 delta fix */
/* S05 — Sensors / shared visual row with S06 reserved */
/* S05 responsive recomposition */
/* S05 v1.5 fidelity correction */
/* S05 v1.6 calibrated height correction */
/* S05 v1.7 — Sensors + System Control + Emergency */
/* S05 focused delta requested during S06 build */
/* S06 — Software & Platforms */
/* Responsive rule: software roles stack, never carousel */
/* S07 — Products -> Solutions */
/* S08 — Quick Product Index */
/* S08 v2.1 self-audit corrections */
/* S08 focused delta during S09 build:
   filtered result sets center when they do not overflow the rail */
/* S09 — UL96 Development Teaser */
/* S09 v2.4 fidelity correction */
/* S08 v2.4 filtered-result centering correction */
/* S08 v2.6 robust filtered alignment */
/* Production Completion v1.0 — accessibility-only deltas */
/* Visual polish pass — generous section spacing + shadow cards instead of hard borders */
.ph-final-cta{margin-top:clamp(56px,7.4vw,128px)}
/* HERO copy — standard format (matches Configo/CWard hero) */
.ph-hero__eyebrow{font-size:16px;line-height:1.5;font-weight:750;margin:0 0 2px;color:var(--ph-brand)}
.ph-hero h1{text-wrap:balance;font-size:46px;line-height:1.35;letter-spacing:-.02em;font-weight:850;margin:5px 0 14px;color:#052f69}
.ph-hero__body{max-width:600px;font-size:22px;line-height:1.55;font-weight:750;color:#052f69;margin:10px 0 0}
.ph-hero__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:64px}
.ph-button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 26px;border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;border:1.5px solid #2382ff;color:#fff;background:#1174f6;box-shadow:0 8px 18px rgba(13,104,235,.22);white-space:nowrap;transition:background-color .16s ease}
.ph-button:hover{background:#0a69e8}
.ph-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph-button:focus-visible{outline:3px solid rgba(32,107,238,.28);outline-offset:3px}
@media(max-width:1330px){.ph-hero h1{font-size:40px}
.ph-hero__body{font-size:20px}
}
@media(max-width:1040px){.ph-hero h1{font-size:36px}
.ph-hero__body{font-size:18px;line-height:1.5}
.ph-hero__eyebrow{font-size:13px}
.ph-hero__actions{margin-top:32px}
}
@media(max-width:720px){.ph-hero h1{font-size:30px}
.ph-hero__body{font-size:17px}
}
@media(max-width:390px){.ph-hero h1{font-size:27px}
.ph-hero__body{font-size:15.5px}
}
/* HERO media: full-height photo, clear on page edge, faded toward copy */
.ph-hero__media{position:absolute;left:14vw;top:-7.5%;height:115%;width:auto;max-width:none;object-fit:contain;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 100%);mask-composite:intersect}
.ph-hero__inner{position:relative;z-index:1}
@media(max-width:1040px){.ph-hero{display:flex;flex-direction:column}
.ph-hero__inner{order:1}
.ph-hero__visual{display:none}
.ph-hero__media{position:relative;left:0;top:0;order:2;width:100%;height:auto;-webkit-mask-composite:source-over;mask-composite:add;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%)}
}
@media(min-width:1041px){.ph-hero{min-height:523px}.ph-hero__inner{min-height:523px}}
@media(min-width:1041px) and (max-width:1360px){.ph-hero__media{left:8.5vw}}

/* HERO backdrop: faint diagonal hairlines behind image and copy */
.ph-hero{isolation:isolate}
.ph-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(118deg,transparent 0 46px,rgba(17,116,246,.055) 46px 47px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 100%)}
.ph-hero__inner{z-index:2}

/* HERO copy on the standard shell (1240 / 1120, 36 -> 18 gutters) so its right edge matches every other section */
.ph-hero .ph-hero__inner{width:min(calc(100% - 72px),1240px);grid-template-columns:minmax(0,1fr) min(600px,54%)}
@media(max-width:1320px){.ph-hero .ph-hero__inner{width:min(calc(100% - 60px),1120px)}}
@media(max-width:1040px){.ph-hero .ph-hero__inner{grid-template-columns:1fr}}
@media(max-width:420px){.ph-hero .ph-hero__inner{width:calc(100% - 36px)}}