/* Photographic hero restored from the pre-6d20a4a design, with readable copy and clear next steps. */
.hero{min-height:100svh;isolation:isolate;padding-block:140px 64px}
.hero::before{pointer-events:none;inset:0 0 0 42%;background-image:url("cybersecurity-responsible-ai.jpg");background-size:auto 78%;background-position:48% 52%;background-repeat:no-repeat;mask-image:linear-gradient(to bottom,transparent 7%,#000 20%,#000 75%,transparent 90%);opacity:.95;filter:brightness(1.4) contrast(1.18) saturate(1.1)}
.hero::after{background:linear-gradient(90deg,#001044 0%,rgba(0,16,68,.98) 52%,rgba(0,16,68,.5) 62%,rgba(0,16,68,.08) 78%,rgba(0,16,68,.16) 100%)}
.hero .hero-layout{grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:32px;margin-bottom:0;z-index:2}
.hero .hero-content{width:100%;min-width:0;max-width:760px}
.hero h1{font-size:clamp(2rem,3.7vw,3.75rem);line-height:1.2;overflow-wrap:break-word}
.hero .intro{margin-top:28px;border:0;padding:0;max-width:620px;color:#eef5ff;font-size:1.125rem;line-height:1.8}
.hero .eyebrow{color:#d5e6f7;font-size:.875rem;line-height:1.6;letter-spacing:.02em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero .hero-actions .cta-button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;width:auto;min-height:52px;min-width:190px;max-width:100%;margin:0;padding:14px 20px;font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:0;white-space:normal;text-decoration:none}
.hero .cta-button-secondary{background:#001044;border:1px solid #c2def4;color:#fff}
.hero .cta-button-secondary:hover{background:#12366a}
.hero .cta-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
html[lang="ar"] .hero .hero-layout{grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:32px}
html[lang="ar"] .hero .hero-content{margin:0;max-width:760px}
html[lang="ar"] .hero h1{font-size:clamp(2rem,3.7vw,3.5rem);line-height:1.45;letter-spacing:0}
html[lang="ar"] .hero .intro{color:#eef5ff;font-size:1.125rem;line-height:1.85}
html[lang="ar"] .hero::before{inset:0 42% 0 0;transform:none}
html[lang="ar"] .hero::after{background:linear-gradient(270deg,#001044 0%,rgba(0,16,68,.98) 52%,rgba(0,16,68,.5) 62%,rgba(0,16,68,.08) 78%,rgba(0,16,68,.16) 100%)}
@media(max-width:900px){.hero{padding:124px 24px 56px}.hero::before,html[lang="ar"] .hero::before{inset:0;opacity:.65;mask-image:none;background-size:cover;background-position:48% center}.hero .hero-layout,html[lang="ar"] .hero .hero-layout{grid-template-columns:minmax(0,1fr)}.hero::after{background:linear-gradient(90deg,rgba(0,16,68,.94),rgba(0,16,68,.78))}html[lang="ar"] .hero::after{background:linear-gradient(270deg,rgba(0,16,68,.94),rgba(0,16,68,.78))}}
@media(max-width:560px){.hero,html[lang="ar"] .hero{padding:116px 18px 48px;min-height:100svh}.hero h1{font-size:clamp(2rem,8vw,2.5rem)}html[lang="ar"] .hero h1{font-size:clamp(1.875rem,7.5vw,2.25rem);line-height:1.5}.hero .intro{font-size:1rem}.hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}.hero .hero-actions .cta-button{width:100%;min-width:0}}

@media(min-width:901px) and (max-width:1100px){.hero .intro,html[lang="ar"] .hero .intro{max-width:48vw}}

/* Overlay shares the photograph's coordinate system and sits beneath the copy gradient. */
.hero::before{z-index:0}
.hero::after{z-index:1}
.hero-map-motion{position:absolute;inset:0 0 0 42%;z-index:0;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 7%,#000 20%,#000 75%,transparent 90%)}
html[lang="ar"] .hero-map-motion{inset:0 42% 0 0}
.hero-map-motion>svg{position:absolute;height:78%;width:auto;max-width:none;left:48%;top:52%;transform:translate(-48%,-52%);overflow:visible}
[data-signal-packet]{opacity:0;filter:drop-shadow(0 0 4px #d9faff) drop-shadow(0 0 12px #34b6ff)}
[data-signal-trail],[data-signal-head]{fill:none;stroke-linecap:round}
[data-signal-trail]{stroke:#66e0ff;stroke-width:9;stroke-dasharray:40 1960;opacity:.9}
[data-signal-head]{stroke:#f4ffff;stroke-width:7;stroke-dasharray:6 1994}
[data-signal-destination]{fill:#b6f4ff;opacity:0;filter:drop-shadow(0 0 12px #34b6ff)}
.hero .hero-motion-toggle{position:absolute;z-index:3;right:40px;bottom:24px;min-height:44px;padding:9px 14px;border:1px solid #7ca1c3;border-radius:4px;background:#001044;color:#d8eafb;font:inherit;font-size:14px;line-height:1.6;cursor:pointer;letter-spacing:0}
html[lang="ar"] .hero .hero-motion-toggle{right:auto;left:40px;font-size:14px}
.hero .hero-motion-toggle[hidden]{display:none!important}
.hero .hero-motion-toggle:hover{border-color:#9ae5ff;color:#fff}
.hero .hero-motion-toggle:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:900px){
 .hero,html[lang="ar"] .hero{flex-direction:column;align-items:stretch;gap:18px}
 .hero-map-motion,html[lang="ar"] .hero-map-motion{inset:0;mask-image:none;opacity:.65}
 .hero-map-motion>svg{height:100%;top:50%}
 .hero .hero-motion-toggle,html[lang="ar"] .hero .hero-motion-toggle{position:relative;left:auto;right:auto;bottom:auto;align-self:flex-end;margin:0}
}
@media(prefers-reduced-motion:reduce){.hero-map-motion{display:none}.hero .hero-motion-toggle{display:none}}