:root { --detail-teal: #5ac8bd; --detail-blue: #7aa7f2; --detail-ink: #090d16; }
.direction-page { background: var(--bg-primary); color: var(--text-primary); }
.direction-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: blur(18px); }
.direction-header-inner { min-height: 5.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.direction-header .brand-logo-lockup { width: 7.7rem; }
.direction-header-actions { display: flex; align-items: center; gap: .7rem; }
.direction-header-actions .btn-primary { padding: .72rem 1rem; font-size: .78rem; }
.direction-header-actions .header-cta { height: 34px; min-height: 34px; padding: 0 .8rem; font-size: .875rem; }
.direction-back, .detail-text-link { display: inline-flex; align-items: center; gap: .38rem; font-weight: 700; color: var(--text-secondary); font-size: .84rem; }
.direction-back { width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; background: color-mix(in srgb, var(--bg-card) 82%, transparent); text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.direction-back > span:not(.material-symbols-rounded) { display: none; }
.direction-back:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(90,200,189,.1); transform: translateY(-2px); }
.direction-breadcrumbs { position: relative; z-index: 1; margin-top: 5.25rem; padding-top: 1.4rem; }
.direction-page .direction-breadcrumbs + main { padding-top: 0; }
.direction-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; line-height: 1.6; color: var(--text-muted); }
.direction-breadcrumbs li { display: inline-flex; align-items: center; gap: .65rem; }
.direction-breadcrumbs li + li::before { content: '/'; color: var(--text-muted); opacity: .55; }
.direction-breadcrumbs a { color: var(--text-secondary); text-decoration: none; transition: color .2s; }
.direction-breadcrumbs a:hover { color: var(--accent-cyan); }
.direction-breadcrumbs a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 4px; }
.direction-breadcrumbs [aria-current="page"] { color: var(--accent-cyan); }
@media (max-width: 620px) { .direction-breadcrumbs { margin-top: 4.5rem; padding-top: 1rem; }.direction-breadcrumbs ol { font-size: .74rem; } }
.direction-back .material-symbols-rounded { font-size: 1.05rem; }.detail-text-link .material-symbols-rounded { font-size: 1.15rem; }
.detail-language, .detail-search { position: relative; }
.detail-header-icon { min-width: 2.45rem; height: 2.45rem; padding: 0 .65rem; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-card) 82%, transparent); color: var(--text-secondary); cursor: pointer; transition: .2s ease; }
.detail-header-icon:hover, .detail-header-icon[aria-expanded="true"] { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(90,200,189,.1); }
.detail-language-toggle { font: 700 .72rem var(--font-main); }
.detail-language-toggle .material-symbols-rounded { font-size: 1rem; }.detail-language-chevron { font-size: .9rem !important; }
.detail-language-menu, .detail-search-popover { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 30; padding: .35rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--bg-card); box-shadow: var(--shadow-lg); }
.detail-language-menu[hidden], .detail-search-popover[hidden] { display: none !important; }

/* Shared legal footer treatment from the main page. */
.direction-footer.site-legal-footer { padding: 1.25rem 0; }
.direction-footer .site-legal-footer-inner { align-items: center; gap: 1.25rem; }
.direction-footer .site-footer-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.direction-footer .site-footer-brand img { display: block; width: auto; height: 38px; opacity: .8; }
.direction-footer .site-legal-footer-inner p { margin: 0; }
@media (max-width: 620px) { .direction-footer .site-legal-footer-inner { align-items: center; text-align: center; } }
.detail-language-menu { width: 4.75rem; display: grid; gap: .15rem; }.detail-language-menu button { padding: .42rem .5rem; border: 0; border-radius: .45rem; background: transparent; color: var(--text-secondary); text-align: left; font: 800 .72rem var(--font-main); cursor: pointer; }.detail-language-menu button:hover, .detail-language-menu button.active { background: rgba(90,200,189,.13); color: var(--accent-cyan); }
.detail-search-popover { width: min(20rem, calc(100vw - 2rem)); display: flex; align-items: center; padding: .38rem; }.detail-search-popover input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: .42rem .55rem; font: .84rem var(--font-main); }.detail-search-popover button { width: 2.1rem; height: 2.1rem; display: grid; place-content: center; border: 0; border-radius: 50%; background: var(--accent-cyan); color: #fff; cursor: pointer; }
.cyber-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 9vw, 9rem) 0 5rem; min-height: min(760px, calc(100vh - 5.25rem)); display: grid; align-items: center; }
#cyberCanvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.cyber-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 73% 45%, rgba(90,200,189,.11), transparent 26%), linear-gradient(90deg, var(--bg-primary) 0%, transparent 75%); }
.cyber-hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.eyebrow-link { display: inline-flex; gap: .45rem; align-items: center; color: var(--accent-cyan); font: 700 .72rem/1 var(--font-mono); letter-spacing: .12em; }
.eyebrow-link .material-symbols-rounded { font-size: 1.15rem; }
.cyber-hero h1 { max-width: 51rem; margin: 1.2rem 0 1.4rem; font-size: clamp(2.9rem, 6vw, 5.4rem); line-height: .99; letter-spacing: -.055em; }
.cyber-hero h1 span, .detail-heading h2 span { color: var(--accent-cyan); }
.cyber-hero-copy > p { max-width: 40rem; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--text-secondary); }
.cyber-hero-actions { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; flex-wrap: wrap; }
.cyber-hero-actions .btn-primary { display: inline-flex; align-items: center; gap: .45rem; }
.cyber-quick-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 38rem; margin: 4rem 0 0; border-top: 1px solid var(--border-color); }
.cyber-quick-facts div { padding: 1rem 1rem 0 0; }
.cyber-quick-facts dt { color: var(--accent-cyan); font: 800 1.15rem var(--font-mono); }
.cyber-quick-facts dd { margin: .28rem 0 0; color: var(--text-muted); font-size: .77rem; line-height: 1.35; }
.security-orbit { width: min(31rem, 100%); aspect-ratio: 1; position: relative; justify-self: center; }
.orbit-ring { position: absolute; inset: 10%; border: 1px solid rgba(90,200,189,.32); border-radius: 50%; animation: rotate-orbit 19s linear infinite; }
.orbit-ring::before { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: -5px; left: 50%; background: var(--detail-teal); box-shadow: 0 0 22px 5px rgba(90,200,189,.6); }
.orbit-ring-two { inset: 25%; border-color: rgba(122,167,242,.3); animation-duration: 13s; animation-direction: reverse; }
.orbit-core { position: absolute; inset: 34%; border: 1px solid rgba(90,200,189,.55); border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(90,200,189,.2), rgba(90,200,189,.03) 65%); box-shadow: 0 0 56px rgba(90,200,189,.18), inset 0 0 28px rgba(90,200,189,.12); }
.orbit-core .material-symbols-rounded { margin-bottom: .35rem; font-size: 2rem; color: var(--detail-teal); }.orbit-core strong { font: 800 .92rem var(--font-mono); letter-spacing: .13em; }.orbit-core small { margin-top: .25rem; color: var(--text-muted); font: 600 .55rem var(--font-mono); letter-spacing: .1em; }
.orbit-node { position: absolute; min-width: 5.8rem; display: grid; gap: .2rem; justify-items: center; color: var(--text-secondary); font-size: .68rem; }.orbit-node .material-symbols-rounded { color: var(--detail-teal); font-size: 1.4rem; }.orbit-node b { font-family: var(--font-mono); font-weight: 700; }.n1 { top: 0; left: 42%; }.n2 { right: 0; top: 45%; }.n3 { bottom: 0; left: 42%; }.n4 { left: 0; top: 45%; }
.detail-section { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--border-color); }.detail-heading { max-width: 53rem; }.detail-heading h2 { margin: .8rem 0 1rem; font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em; }.detail-heading p { max-width: 42rem; color: var(--text-secondary); line-height: 1.65; }
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 3.5rem; background: var(--border-color); border: 1px solid var(--border-color); }.risk-grid article { min-height: 17rem; position: relative; padding: 1.6rem; background: var(--bg-primary); transition: background .25s ease, transform .25s ease; }.risk-grid article:hover { z-index: 1; background: rgba(90,200,189,.11); transform: translateY(-6px); }.risk-index { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--text-muted); font: 700 .65rem var(--font-mono); }.risk-grid .material-symbols-rounded { color: var(--accent-cyan); font-size: 2rem; }.risk-grid h3 { margin: 2.5rem 0 .7rem; font-size: 1.15rem; }.risk-grid p { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.55; }
.architecture-section { background: linear-gradient(180deg, transparent, rgba(90,200,189,.045), transparent); }.architecture-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }.architecture-note { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .8rem; }.architecture-note .material-symbols-rounded { color: var(--accent-cyan); }
.solution-map { position: relative; min-height: 39rem; margin-top: 3rem; padding: 2rem; border: 1px solid var(--border-color); overflow: hidden; background: linear-gradient(rgba(90,200,189,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(90,200,189,.05) 1px, transparent 1px); background-size: 32px 32px; }.solution-map::before { content: ''; position: absolute; inset: 15% 22%; border: 1px dashed rgba(90,200,189,.32); border-radius: 50%; }.solution-center { position: absolute; top: 50%; left: 50%; width: 10.5rem; height: 10.5rem; transform: translate(-50%, -50%); border: 1px solid var(--accent-cyan); border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgba(8,18,28,.78); box-shadow: 0 0 55px rgba(90,200,189,.2); }.solution-center .material-symbols-rounded { color: var(--accent-cyan); font-size: 2rem; margin-bottom: .5rem; }.solution-center strong { font: 700 .7rem/1.45 var(--font-mono); letter-spacing: .1em; }
.solution-layer { position: absolute; width: 12rem; padding: .9rem 1rem; display: grid; grid-template-columns: 1.8rem 1fr; gap: 0 .55rem; text-align: left; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; transition: .25s ease; }.solution-layer .material-symbols-rounded { grid-row: span 2; align-self: center; color: var(--accent-cyan); }.solution-layer b { font-size: .84rem; }.solution-layer small { color: var(--text-muted); font: .58rem var(--font-mono); }.solution-layer:hover,.solution-layer.active { transform: translateY(-4px); border-color: var(--accent-cyan); background: rgba(90,200,189,.13); box-shadow: 0 10px 25px rgba(0,0,0,.15), 0 0 22px rgba(90,200,189,.12); }.layer-perimeter { top: 8%; left: 9%; }.layer-network { top: 34%; left: 4%; }.layer-endpoint { bottom: 9%; left: 12%; }.layer-data { top: 8%; right: 9%; }.layer-soc { bottom: 13%; right: 9%; }
.solution-detail { position: absolute; left: 50%; bottom: 1.3rem; transform: translateX(-50%); width: min(34rem, calc(100% - 3rem)); padding: 1.1rem 1.3rem; border-left: 2px solid var(--accent-cyan); background: color-mix(in srgb, var(--bg-primary) 85%, transparent); backdrop-filter: blur(8px); }.solution-detail-index,.solution-detail-tag { color: var(--accent-cyan); font: 700 .62rem var(--font-mono); letter-spacing: .09em; }.solution-detail h3 { margin: .35rem 0; font-size: 1.1rem; }.solution-detail p { margin: 0; color: var(--text-secondary); font-size: .83rem; line-height: 1.5; }
.process-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 8vw, 9rem); }.process-list { margin: 0; padding: 0; list-style: none; }.process-list li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; padding: 0 0 2rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--border-color); }.process-list span { color: var(--accent-cyan); font: 800 .75rem var(--font-mono); }.process-list h3 { margin: 0 0 .35rem; font-size: 1.15rem; }.process-list p { margin: 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.55; }
.partners-detail-section { background: rgba(90,200,189,.035); }.vendor-strip { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 3.5rem; border-top: 1px solid var(--border-color); border-left: 1px solid var(--border-color); }.vendor-strip div { padding: 1.4rem; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); transition: background .2s; }.vendor-strip div:hover { background: rgba(90,200,189,.1); }.vendor-strip strong { display: block; font-size: 1rem; }.vendor-strip span { display: block; margin-top: .5rem; color: var(--text-muted); font: .6rem var(--font-mono); }
.detail-cta-section { padding: 6rem 0; background: linear-gradient(120deg, rgba(90,200,189,.13), rgba(122,167,242,.08)); border-top: 1px solid var(--border-color); }.detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }.detail-cta h2 { margin: .8rem 0; font-size: clamp(2rem,4vw,3.4rem); line-height: 1.06; letter-spacing: -.04em; }.detail-cta p { margin: 0; color: var(--text-secondary); max-width: 36rem; line-height: 1.55; }.detail-cta-button { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }.direction-footer { border-top: 1px solid var(--border-color); padding: 1.5rem 0; color: var(--text-muted); font: .7rem var(--font-mono); }.direction-footer .container { display: flex; justify-content: space-between; }.direction-footer a { color: var(--accent-cyan); }
@keyframes rotate-orbit { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .cyber-hero-grid,.process-grid { grid-template-columns: 1fr; }.cyber-hero-grid,.cyber-hero-copy { min-width: 0; }.security-orbit { margin-top: 1rem; max-width: 25rem; }.risk-grid { grid-template-columns: repeat(2,1fr); }.vendor-strip { grid-template-columns: repeat(3,1fr); }.solution-map { min-height: 48rem; }.solution-layer { width: 10.4rem; }.layer-perimeter { top: 5%; left: 4%; }.layer-network { top: 23%; left: 4%; }.layer-endpoint { bottom: 5%; left: 4%; }.layer-data { top: 5%; right: 4%; }.layer-soc { bottom: 15%; right: 4%; } }
@media (max-width: 620px) { .direction-header-inner { min-height: 4.5rem; }.direction-header .brand-logo-lockup { width: 6rem; }.direction-back { font-size: 0; }.direction-back .material-symbols-rounded { font-size: 1.25rem; }.direction-header-actions .btn-primary { display: none; }.cyber-hero { padding-top: 4.5rem; }.cyber-hero h1 { font-size: clamp(1.8rem, 7.5vw, 2rem); }.cyber-hero-copy > p { min-width: 0; }.cyber-quick-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.5rem; }.cyber-quick-facts div { min-width: 0; }.cyber-quick-facts dd { overflow-wrap: anywhere; }.risk-grid { grid-template-columns: 1fr; }.architecture-top,.detail-cta { display: block; }.architecture-note { margin-top: 1rem; }.solution-map { min-height: 51rem; padding: 1rem; }.solution-center { width: 8rem; height: 8rem; }.solution-layer { width: calc(50% - 1.45rem); padding: .68rem; }.layer-perimeter { top: 3%; }.layer-network { top: 23%; }.layer-data { top: 3%; }.layer-soc { bottom: 19%; }.layer-endpoint { bottom: 5%; }.solution-detail { bottom: 1rem; }.vendor-strip { grid-template-columns: repeat(2,1fr); }.detail-cta-button { margin-top: 2rem; }.direction-footer .container { gap: .7rem; flex-direction: column; } }

/* One continuous composition with the same interactive particle field as the home screen. */
#cyberCanvas.direction-ambient-canvas { position: fixed !important; top: 0 !important; right: 0; bottom: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; opacity: .68; pointer-events: none; }
.direction-page main, .direction-page .direction-footer { position: relative; z-index: 1; }
.direction-page main { overflow: clip; }
.cyber-hero { min-height: min(720px, calc(100vh - 5.25rem)); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.detail-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; border-top: 0; background: transparent; }
.architecture-section, .partners-detail-section, .detail-cta-section { background: transparent; border-top: 0; }
.detail-cta-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0 4.5rem; }
.risk-grid, .vendor-strip { margin-top: 2.5rem; }

/* Header and legal footer follow the fixed, solid treatment of the home page. */
.direction-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000 !important; background: var(--header-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-bottom-color: var(--header-border); }
.direction-page main { padding-top: 5.25rem; }
.direction-footer.site-legal-footer { background: var(--bg-primary); border-top: 1px solid var(--border-color); }
@media (max-width: 620px) { .direction-page main { padding-top: 4.5rem; } }

/* Compact page rhythm and editorial hero artwork. */
.cyber-hero { min-height: 0; padding: clamp(3.75rem, 7vw, 6rem) 0 3.5rem; }
.cyber-hero h1 { margin-top: .9rem; font-size: clamp(2.65rem, 5.15vw, 4.6rem); }
.cyber-quick-facts { margin-top: 2.4rem; }
.detail-section { padding: clamp(2.75rem, 4vw, 3.9rem) 0; }
.risk-grid { margin-top: 2.3rem; }.risk-grid article { min-height: 13.5rem; padding: 1.35rem; }.risk-grid h3 { margin-top: 1.8rem; }
.architecture-top { align-items: center; }.solution-map { min-height: 32rem; margin-top: 2.2rem; }.solution-map::before { inset: 13% 25%; }
.process-list li { padding-bottom: 1.15rem; margin-bottom: .8rem; }.vendor-strip { margin-top: 2rem; }.detail-cta-section { padding: 3.25rem 0; }

/* Final mobile guard: avoid long Russian headings expanding the hero grid. */
@media (max-width: 620px) {
  .cyber-hero h1 { font-size: clamp(1.8rem, 7.5vw, 2rem); }
}

/* Keep the lower map layers clear of the explanatory panel. */
.layer-endpoint { bottom: 29.25%; }
.layer-soc { top: 34%; bottom: auto; }

@media (max-width: 900px) {
  .layer-endpoint { bottom: 24%; }
  .layer-soc { top: 23%; bottom: auto; }
}

@media (max-width: 620px) {
  .layer-endpoint { bottom: 27%; }
  .layer-soc { top: 23%; bottom: auto; }
}

/* Uniform interactive cards for every layer of the solution map. */
.solution-layer {
  width: 12rem;
  min-height: 4.65rem;
  align-items: center;
  box-sizing: border-box;
  border-color: rgba(146, 166, 190, .34);
  background: linear-gradient(135deg, rgba(38, 45, 61, .96), rgba(29, 34, 47, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.solution-layer::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color .24s ease, box-shadow .24s ease;
}

.solution-layer:hover,
.solution-layer.active {
  transform: translateY(-5px);
  border-color: rgba(17, 202, 194, .72);
  background: linear-gradient(135deg, rgba(29, 70, 76, .9), rgba(27, 38, 52, .97));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2), 0 0 22px rgba(17, 202, 194, .16);
}

.solution-layer:hover::after,
.solution-layer.active::after {
  border-color: rgba(17, 202, 194, .48);
  box-shadow: 0 0 18px rgba(17, 202, 194, .13);
}

/* The selected layer keeps its glow without shifting its top edge. */
.solution-layer.active { transform: none; }
.solution-layer.active:hover { transform: translateY(-5px); }

@media (max-width: 900px) {
  .solution-layer { width: 10.4rem; }
}

@media (max-width: 620px) {
  .solution-layer { width: calc(50% - 1.45rem); min-height: 4.8rem; }
}

/* Subtle signal pulse around the infrastructure core. */
.solution-center { z-index: 1; isolation: isolate; }
.solution-center::before,
.solution-center::after {
  content: '';
  position: absolute;
  inset: -.35rem;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(17, 202, 194, .56);
  border-radius: 50%;
  animation: infrastructure-pulse 3.4s ease-out infinite;
}

.solution-center::after { animation-delay: 1.7s; }

@keyframes infrastructure-pulse {
  0% { transform: scale(1); opacity: .7; }
  72%, 100% { transform: scale(1.62); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-center::before,
  .solution-center::after { animation: none; opacity: .25; }
}

/* A balanced orbit: every layer visually frames the infrastructure core. */
.solution-map > .architecture-note {
  top: .7rem;
  left: .75rem;
  transform: none;
}

.solution-map::before { display: none; }

.layer-endpoint { top: 4%; bottom: auto; left: calc(50% - 6rem); }
.layer-perimeter { top: 22%; left: 7%; }
.layer-data { top: 22%; right: 7%; }
.layer-network { top: 54%; left: 7%; }
.layer-soc { top: 54%; right: 7%; bottom: auto; }

@media (max-width: 900px) {
  .layer-endpoint { top: 5%; left: calc(50% - 5.2rem); }
  .layer-perimeter { top: 20%; left: 4%; }
  .layer-data { top: 20%; right: 4%; }
  .layer-network { top: 53%; left: 4%; }
  .layer-soc { top: 53%; right: 4%; }
}

@media (max-width: 620px) {
  .solution-map > .architecture-note { top: .6rem; left: .7rem; transform: none; text-align: left; }
  .layer-endpoint { top: 7%; left: calc(50% - (25% - .73rem)); }
  .layer-perimeter { top: 20%; left: 1rem; }
  .layer-data { top: 20%; right: 1rem; }
  .layer-network { top: 52%; left: 1rem; }
  .layer-soc { top: 52%; right: 1rem; }
}

/* Project steps use the same transparent, responsive treatment as home competencies. */
.process-section,.problem-section { scroll-margin-top: 6.5rem; }
.process-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(1rem, 1.6vw, 1.8rem); align-items: start; }
.process-grid > .detail-heading { min-width: 0; margin-bottom: 0; }
.process-grid > .process-list { padding-top: 3.35rem; }
.cyber-project-art { width: 100%; max-width: 19rem; margin: 3.35rem 0 0; justify-self: end; }
.cyber-project-art img,.cyber-context-art img { display: block; width: 100%; height: auto; }
.cyber-context-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); gap: 2.5rem; align-items: center; }
.cyber-context-top > .detail-heading { min-width: 0; margin-bottom: 0; }
.cyber-context-art { width: 100%; max-width: 13rem; margin: 0; justify-self: end; transform: translateY(1.5rem); }
@media (max-width: 1050px) {
  .process-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.5rem; }
  .process-grid > .detail-heading { grid-column: 1 / -1; }
  .process-grid > .process-list { padding-top: 0; }
  .cyber-project-art { margin-top: 0; }
  .cyber-context-top { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: 1.5rem; }
}
@media (max-width: 700px) {
  .process-grid,.cyber-context-top { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .process-grid > .detail-heading { grid-column: auto; }
  .cyber-project-art,.cyber-context-art { justify-self: center; }
  .cyber-project-art { max-width: 19rem; }
  .cyber-context-art { max-width: 13rem; }
}

.process-list {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  width: 100%;
  max-width: 30rem;
}

.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 5rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 0;
  background: transparent;
  transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

.process-list li::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  left: 0.75rem;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(90, 200, 189, 0.72), transparent);
  transition: opacity var(--transition-fast);
}

.process-list .process-index {
  color: var(--accent-cyan);
  font: 400 0.78rem var(--font-mono);
}

.process-list h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.process-list p { margin: 0; font-size: 0.82rem; }

.process-list li:hover {
  transform: translateY(-4px);
  background: rgba(90, 200, 189, 0.12);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.process-list li:hover::after { opacity: 1; }
@media (max-width: 620px) {
  .process-list li { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.55rem; padding: 0.7rem; }
}

/* Technology stack follows the same card language as the project steps. */
.vendor-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 2rem;
  border: 0;
  background: transparent;
}

.vendor-strip div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(90, 200, 189, 0.24);
  border-radius: 0;
  background: transparent;
  transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

.vendor-strip div::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  left: 0.75rem;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(90, 200, 189, 0.72), transparent);
  transition: opacity var(--transition-fast);
}

.vendor-strip div:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: rgba(90, 200, 189, 0.68);
  background: rgba(90, 200, 189, 0.12);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.vendor-strip div:hover::after { opacity: 1; }
.vendor-strip strong { font-size: 0.95rem; }
.vendor-strip span { margin-top: 0.3rem; }

@media (max-width: 900px) {
  .vendor-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .vendor-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Remove the hero-only wash so the page reads as one continuous canvas. */
.cyber-hero::after { display: none; }

/* Branded secure-server illustration, integrated into the architecture rather than used as a separate banner. */
.architecture-visual { display: flex; align-items: center; gap: .7rem; min-width: 13.5rem; padding: .45rem .7rem; border: 1px solid rgba(90,200,189,.22); background: rgba(90,200,189,.045); }
.architecture-visual img { width: 5.8rem; height: 4.4rem; object-fit: contain; opacity: .88; filter: grayscale(1) sepia(1) hue-rotate(122deg) saturate(3.2) brightness(.88) contrast(1.1); }
.architecture-visual .architecture-note { margin: 0; max-width: 8rem; line-height: 1.35; }
@media (max-width: 620px) { .architecture-visual { margin-top: 1rem; width: fit-content; } }

/* One restrained display scale for the page's major messages. */
.cyber-hero h1,
.detail-heading h2,
.detail-cta h2 {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}

/* Context cards share the same transparent system and icon glow as key competencies. */
.risk-grid {
  gap: 0;
  background: transparent;
  border: 1px solid rgba(90, 200, 189, 0.24);
}

.risk-grid article {
  min-height: 13.5rem;
  isolation: isolate;
  padding: 1.35rem;
  border: 0;
  border-right: 1px solid rgba(90, 200, 189, 0.24);
  border-radius: 0;
  background: rgba(90, 200, 189, 0.045);
  transition: transform var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.risk-grid article::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -1px;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.risk-grid article > .material-symbols-rounded {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.18);
  font-size: 1.55rem;
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.risk-grid h3 { margin: 1.55rem 0 0.7rem; }

.risk-grid article:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: rgba(90, 200, 189, 0.68);
  background: rgba(90, 200, 189, 0.12);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.risk-grid article:hover::before {
  border-color: rgba(90, 200, 189, 0.78);
  box-shadow: 0 0 20px rgba(90, 200, 189, 0.12);
}

/* Architecture heading, illustration and map form one compact sequence. */
.architecture-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.architecture-visual {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  min-width: 0;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.architecture-visual img { width: 8rem; height: 5.5rem; }

.solution-map {
  min-height: 42rem;
  margin-top: 1.1rem;
}
.solution-map::before { inset: 16% 34% 32%; }
.solution-center { top: 42%; }
.solution-map > .architecture-note {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.76rem;
}

@media (max-width: 900px) {
  .solution-map { min-height: 52rem; }
  .solution-map::before { inset: 15% 24% 31%; }
  .solution-center { top: 42%; }
}

@media (max-width: 620px) {
  .architecture-visual img { width: 6.6rem; height: 4.5rem; }
  .architecture-top { display: block; }
  .architecture-visual { margin-left: auto; }
  .solution-map { min-height: 58rem; margin-top: 0.8rem; }
  .solution-map::before { inset: 14% 12% 34%; }
  .solution-center { top: 40%; }
  .solution-map > .architecture-note { max-width: calc(100% - 2rem); white-space: normal; text-align: center; }
}

.risk-grid article:hover > .material-symbols-rounded {
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 4px 22px var(--accent-glow);
  transform: scale(1.08);
}

.risk-grid article:last-child { border-right: 0; }

@media (max-width: 900px) {
  .risk-grid article:nth-child(2n) { border-right: 0; }
  .risk-grid article:nth-child(-n + 2) { border-bottom: 1px solid rgba(90, 200, 189, 0.24); }
}

@media (max-width: 620px) {
  .risk-grid article { border-right: 0; }
  .risk-grid article:not(:last-child) { border-bottom: 1px solid rgba(90, 200, 189, 0.24); }
}

/* Keep the map instruction anchored to its own top-left corner. */
.solution-map > .architecture-note {
  top: .7rem !important;
  left: .75rem !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

@media (max-width: 620px) {
  .solution-map > .architecture-note {
    top: .6rem !important;
    left: .7rem !important;
    max-width: calc(100% - 1.4rem) !important;
    white-space: normal !important;
  }
}

/* Fine technical frame for the architecture map. */
.solution-map {
  border-color: rgba(17, 202, 194, .42);
  box-shadow: 0 16px 36px rgba(3, 12, 22, .12);
}

/* KPI cards reuse the restrained hover treatment of the project stages. */
.cyber-quick-facts {
  gap: .7rem;
  max-width: 38rem;
  border-top: 0;
}

.cyber-quick-facts div {
  position: relative;
  min-height: 5rem;
  padding: .75rem .9rem;
  background: transparent;
  transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
}

.cyber-quick-facts div::after {
  content: '';
  position: absolute;
  right: .75rem;
  bottom: 0;
  left: .75rem;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(90, 200, 189, .72), transparent);
  transition: opacity var(--transition-fast);
}

.cyber-quick-facts div:hover {
  transform: translateY(-4px);
  background: rgba(90, 200, 189, .12);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.cyber-quick-facts div:hover::after { opacity: 1; }

@media (max-width: 620px) {
  .cyber-quick-facts { gap: .35rem; }
  .cyber-quick-facts div { min-height: 4.7rem; padding: .65rem; }
}

@media (min-width: 901px) {
  .security-orbit { justify-self: end; transform: translateX(2.5rem); }
  .cyber-quick-facts { width: calc(100% + 3rem); max-width: 42rem; }
  .cyber-quick-facts div { min-height: 4rem; padding: .55rem .75rem; }
  .cyber-quick-facts dd { white-space: nowrap; font-size: .7rem; }
}
/* Keep the shared homepage contact controls clear of the back-to-top button. */
@media (max-width:640px){
  .direction-page .floating-contact-actions{right:.9rem;bottom:4.1rem;gap:1.8rem}
  .direction-page .floating-contact-btn{width:50px;height:50px}
  .direction-page .back-to-top{right:.9rem;bottom:.9rem}
}