/* NRO Mera — single background system. Decorative only. */
:root { --motion-navy: #060b20; --motion-blue: #111b49; --motion-cyan: #69e9ef; }
html, body.site-page { min-height: 100%; background: var(--motion-navy) url("/assets/background-static.svg") center / cover fixed no-repeat !important; }
body.site-page { position: relative; isolation: isolate; overflow-x: hidden; color: #eef6ff; }
body.site-page::before, body.site-page::after { content: none !important; display: none !important; }
.motion-background-canvas { position: fixed; z-index: 0; inset: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: .82; }
body.site-page > *:not(.motion-background-canvas):not(.mera-welcome) { position: relative; z-index: 1; }
body.site-page > .mera-welcome { position: fixed !important; z-index: 1000 !important; }
body.site-page .site-shell { position: relative; z-index: 1; overflow: hidden; background: rgba(7, 13, 37, .66) !important; border: 1px solid rgba(105, 233, 239, .24) !important; box-shadow: 0 28px 90px rgba(0, 0, 0, .52) !important; backdrop-filter: blur(12px); }
body.site-page .site-header { background: rgba(7, 14, 41, .76) !important; color: #eef6ff !important; animation: none !important; }
body.site-page .site-header::before, body.site-page .site-header::after { content: none !important; animation: none !important; }
body.site-page .site-header-inner { position: relative; z-index: 1; }
body.site-page .site-nav { background: rgba(6, 12, 34, .84) !important; border-color: rgba(105, 233, 239, .18) !important; }
body.site-page .site-nav-link { color: #b8c9e7 !important; }
body.site-page .site-nav-link:hover, body.site-page .site-nav-link.is-active { color: #f1ffff !important; background: rgba(105, 233, 239, .12) !important; border-color: rgba(105, 233, 239, .3) !important; }
body.site-page .site-content { background: transparent !important; }
body.site-page .content-card:not(.content-card-dark), body.site-page .site-content > .content-card:not(.content-card-dark) { background: rgba(245, 250, 255, .87) !important; }
body.site-page .hero-orbit, body.site-page .hero-glow, body.site-page .hero-visual::before, body.site-page .hero-visual::after { display: none !important; animation: none !important; }
body.site-page .site-hero h1, body.site-page .site-mini-brand { color: #f3f8ff !important; }
body.site-page .site-hero h1 em { color: var(--motion-cyan) !important; }
body.site-page .site-hero-lead, body.site-page .hero-trust, body.site-page .site-topline, body.site-page .site-status { color: #b7c8e5 !important; }
body.site-page .eyebrow, body.site-page .section-kicker { color: #8af1ef !important; }
/* Keep the hero artwork compact and translucent so the motion layer remains visible behind it. */
body.site-page .hero-visual { background: rgba(7, 14, 41, .16) !important; border-color: rgba(105, 233, 239, .16) !important; box-shadow: inset 0 0 30px rgba(105, 233, 239, .06) !important; }
body.site-page .hero-generated-art { width: min(76%, 360px) !important; opacity: .18 !important; border: 0 !important; box-shadow: none !important; mix-blend-mode: screen; filter: saturate(1.08) brightness(1.04); }
body.site-page .hero-logo-wrap { width: clamp(92px, 24vw, 126px) !important; background: rgba(7, 14, 41, .16) !important; border-color: rgba(105, 233, 239, .2) !important; box-shadow: 0 0 20px rgba(105, 233, 239, .16) !important; backdrop-filter: none; }
body.site-page .hero-logo-wrap .mera-brand-animation { padding: 0 !important; }
body.site-page .hero-skill-gif { opacity: .1 !important; }
@media (max-width: 767.98px) { html, body.site-page { background-attachment: scroll !important; } .motion-background-canvas { opacity: .7; } }
@media (max-width: 767.98px) {
  body.site-page .site-shell { background: rgba(7, 13, 37, .28) !important; backdrop-filter: blur(2px) !important; }
  body.site-page .site-header { background: rgba(7, 14, 41, .22) !important; }
  body.site-page .hero-visual { min-height: 218px !important; height: 218px !important; margin-top: 5px !important; padding: 0 !important; border-radius: 24px !important; background: rgba(7, 14, 41, .06) !important; }
  body.site-page .hero-generated-art { width: min(78%, 300px) !important; opacity: .13 !important; }
  body.site-page .hero-logo-wrap { width: clamp(86px, 26vw, 116px) !important; }
  body.site-page .hero-skill-gif { width: 56% !important; max-width: 190px; opacity: .07 !important; }
}
@media (max-width: 430px) {
  body.site-page .hero-visual { min-height: 190px !important; height: 190px !important; }
  body.site-page .hero-generated-art { width: min(80%, 260px) !important; }
  body.site-page .hero-logo-wrap { width: 104px !important; }
}
@media (prefers-reduced-motion: reduce) { .motion-background-canvas { opacity: .86; } }
/* Homepage chart replaces the long introduction cards with a live server-flow visual. */
body.home-chart-mode .site-content > .content-card { display: none !important; }
body.home-chart-mode .site-content { padding-bottom: 24px; }
body.home-chart-mode .site-content > .server-chart { position: relative; min-height: 410px; margin: 20px 0 8px; padding: 0 !important; overflow: hidden; border: 1px solid rgba(105,233,239,.28) !important; border-radius: 24px; background: linear-gradient(145deg, rgba(8,18,52,.72), rgba(17,12,55,.58)) !important; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.22); }
.server-chart::before, .server-chart::after { position: absolute; pointer-events: none; content: ''; border-radius: 50%; }
 .server-chart::before { display: none; }
.server-chart::after { inset: 0; border-radius: inherit; background: radial-gradient(ellipse at center, transparent 40%, rgba(3,7,23,.45)); }
.server-chart-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 410px; }
@media (max-width: 767.98px) { body.home-chart-mode .site-content > .server-chart { min-height: 330px; margin: 16px 0 4px; border-radius: 20px; } .server-chart-canvas { height: 330px; } .server-chart::before { inset: 18% 18%; } }
@media (max-width: 430px) { body.home-chart-mode .site-content > .server-chart, .server-chart-canvas { min-height: 330px; height: 330px; } }