/* ==========================================================================
   Algomox Agentic AI — Light theme, matched to the current website.
   Palette + fonts follow styles/index.css: Montserrat, teal #2ca8c7, blue #186f98,
   green #0ec1ae, dark #2c3e50. Complements (loads alongside) index.css + Bootstrap.
   ========================================================================== */

:root {
  --teal: #2ca8c7;
  --teal-d: #2496b3;
  --blue: #186f98;
  --green: #0ec1ae;
  --dark: #2c3e50;
  --midnight: #2d3e50;
  --ink: #222;
  --muted: #5b6b78;
  --soft: #edf6f8;
  --soft-2: #f6fbfc;
  --border: #e4e4e4;
  --border-2: #dadada;
  --grad-text: linear-gradient(319deg, #448ab1 0%, #5abad2 100%);
  --grad-head: linear-gradient(180deg, #186f98 0%, #2ba8c6 100%);
  --grad-teal: linear-gradient(135deg, #2ca8c7 0%, #186f98 100%);
  --grad-green: linear-gradient(171deg, #186f98 41%, #0ec1ae 63%);
  --grad-cta: linear-gradient(360deg, #186f98 0%, #2ba8c6 100%);
  --shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg: rgba(50,50,93,.15) 0 13px 27px -5px, rgba(0,0,0,.2) 0 8px 16px -8px;
  --r: 12px; --r-lg: 18px; --r-full: 9999px;
  --ease: cubic-bezier(0.19,1,0.22,1);
  --nav-h: 66px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; font-family: Montserrat, sans-serif; color: var(--ink); background: #fff; line-height: 1.65; font-size: 1rem; -webkit-font-smoothing: antialiased; }
.ag-wrap { overflow-x: hidden; }
h1, h2, h3, h4, h5 { font-family: Montserrat, sans-serif; color: var(--dark); line-height: 1.25; margin: 0 0 .6em; font-weight: 700; }
p { color: var(--muted); margin: 0 0 1rem; }
a { color: var(--blue); text-decoration: none; transition: .2s ease; }
a:hover { color: var(--teal); }
img, svg { max-width: 100%; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(48px, 7vw, 96px) 0; position: relative; }
.bg-soft { background: var(--soft); }
.bg-soft-2 { background: var(--soft-2); }
.center { text-align: center; }

.gradient-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.headline-grad { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); padding: 6px 14px; border-radius: var(--r-full); background: rgba(44,168,199,.1); margin-bottom: 16px; }
.section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -.5px; }
.section-head p { max-width: 60ch; margin: 0 auto; font-size: 1.05rem; }
.lead { font-size: 1.12rem; color: var(--ink); }
.hr-accent { height: 4px; width: 64px; border-radius: 2px; background: var(--teal); margin: 14px auto 0; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head.left .hr-accent { margin-left: 0; }

/* Buttons */
.btn-ag { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit; font-weight: 600;
  font-size: .98rem; padding: 12px 24px; border-radius: var(--r-full); border: 1.5px solid transparent; transition: .2s ease; line-height: 1; white-space: nowrap; }
.btn-ag i { transition: transform .2s ease; }
.btn-fill { background: var(--teal); color: #fff; }
.btn-fill:hover { background: var(--teal-d); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(44,168,199,.35); }
.btn-fill:hover i { transform: translateX(4px); }
.btn-out { background: #fff; color: var(--blue); border-color: var(--border-2); }
.btn-out:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { background: #fff; color: var(--teal); transform: translateY(-2px); }
.btn-lg { padding: 14px 30px; font-size: 1.02rem; }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000; display: flex; align-items: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); transition: box-shadow .3s, background .3s; }
.nav.scrolled { box-shadow: rgba(0,0,0,.12) 0 4px 16px; background: #fff; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.28rem; color: var(--dark); letter-spacing: -.02em; }
.brand img { height: 34px; width: auto; display: block; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-teal); }
.brand span.text-gradient { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: 44px; }
.nav-links a { color: var(--ink); font-size: .93rem; font-weight: 500; }
.nav-links a:hover { color: var(--teal); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--dark); font-size: 1.5rem; cursor: pointer; }

/* Nav dropdown */
.nav-dd { position: relative; }
.nav-dd > a::after { content: '\F282'; font-family: 'bootstrap-icons'; font-size: .68rem; margin-left: 5px; opacity: .55; }
.nav-dd-menu { position: absolute; top: 150%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 10px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: .2s ease; z-index: 1001; }
.nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd-menu a { display: block; padding: 8px 12px; border-radius: 8px; font-size: .88rem; color: var(--muted); }
.nav-dd-menu a:hover { background: var(--soft); color: var(--blue); }
/* Mega-menu */
.nav-dd-menu.mega { position: fixed; top: var(--nav-h); left: 50%; transform: translateX(-50%) translateY(8px); width: min(1060px, 94vw); min-width: 0; padding: 18px 20px; }
.nav-dd.mega:hover .nav-dd-menu.mega { transform: translateX(-50%) translateY(0); }
.mega-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.mega-head .mh-l strong { color: var(--dark); font-size: .95rem; }
.mega-head .mh-l span { color: var(--muted); font-size: .82rem; }
.mega-head a.mega-all { display: inline-flex; align-items: center; font-size: .84rem; font-weight: 600; color: var(--teal); padding: 0; }
.mega-head a.mega-all:hover { background: transparent; color: var(--teal-d); }
.mega-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mega-col h6 { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); margin: 0 0 6px; padding: 0 8px; font-weight: 700; }
.mega-col a { display: block; padding: 6px 8px; border-radius: 6px; font-size: .82rem; color: var(--muted); line-height: 1.3; }
.mega-col a:hover { background: var(--soft); color: var(--blue); }

/* Hero (home) */
.hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 40px) 0 52px;
  background: #fff; }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 700; letter-spacing: -1px; }
.hero .sub { font-size: 1.18rem; color: var(--ink); max-width: 36ch; }
.hero .support { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--dark);
  padding: 7px 13px; border-radius: var(--r-full); background: var(--soft); border: 1px solid #d4eaf5; }
.chip i { color: var(--teal); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.live-row { display: flex; gap: 26px; margin-top: 28px; flex-wrap: wrap; }
.live-row .lc b { font-size: 1.5rem; color: var(--blue); font-weight: 800; }
.live-row .lc span { display: block; font-size: .78rem; color: var(--muted); }

/* Agent loop (light) */
.agent-loop { width: min(420px, 92%); aspect-ratio: 1; position: relative; margin: 0 auto; }
.agent-loop .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(44,168,199,.35); animation: spin 40s linear infinite; }
.agent-loop .ring.r2 { inset: 16%; animation-duration: 28s; animation-direction: reverse; border-color: rgba(14,193,174,.4); }
.agent-loop .core { position: absolute; inset: 33%; border-radius: 50%; background: var(--grad-teal); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: .92rem; padding: 10px;
  box-shadow: 0 12px 34px rgba(44,168,199,.4); animation: pulseGlow 3s ease-in-out infinite; }
.agent-loop .node { position: absolute; width: 104px; margin-left: -52px; margin-top: -20px; text-align: center; font-size: .7rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); background: #fff; border: 1px solid #d4eaf5;
  border-radius: var(--r-full); padding: 8px 4px; box-shadow: var(--shadow); animation: nodePulse 5s ease-in-out infinite; }
.agent-loop .node:nth-child(4){ top: 3%;  left: 50%; animation-delay: 0s; }
.agent-loop .node:nth-child(5){ top: 32%; left: 96%; animation-delay: 1s; }
.agent-loop .node:nth-child(6){ top: 83%; left: 78%; animation-delay: 2s; }
.agent-loop .node:nth-child(7){ top: 83%; left: 22%; animation-delay: 3s; }
.agent-loop .node:nth-child(8){ top: 32%; left: 4%;  animation-delay: 4s; }
@keyframes nodePulse { 0%,100%{ box-shadow: var(--shadow); color: var(--muted);} 50%{ box-shadow: 0 0 0 3px rgba(44,168,199,.25), var(--shadow); color: var(--teal); border-color: var(--teal);} }
@keyframes pulseGlow { 0%,100%{ box-shadow: 0 12px 28px rgba(44,168,199,.35);} 50%{ box-shadow: 0 12px 44px rgba(44,168,199,.6);} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* Interior sub-hero */
.subhero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 50px) 0 60px;
  background: radial-gradient(110% 120% at 90% 0%, rgba(44,168,199,.16) 0%, rgba(255,255,255,0) 58%), var(--soft-2); }
.subhero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.subhero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); font-weight: 700; letter-spacing: -.5px; }
.subhero .sub { font-size: 1.1rem; color: var(--ink); }
.breadcrumb { display: flex; gap: 8px; font-size: .8rem; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumb a { color: var(--blue); }

/* Hero glyph */
.hero-glyph { position: relative; width: min(320px, 100%); aspect-ratio: 1; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.hero-glyph .disc { width: 58%; aspect-ratio: 1; border-radius: 28%; background: var(--grad-teal); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 3.8rem; box-shadow: 0 16px 40px rgba(44,168,199,.35); animation: floaty 4s ease-in-out infinite; }
.hero-glyph.cyber .disc { background: linear-gradient(135deg,#186f98,#2c3e50); box-shadow: 0 16px 40px rgba(24,111,152,.4); }
.hero-glyph.agent .disc { background: var(--grad-green); box-shadow: 0 16px 40px rgba(14,193,174,.35); }
.hero-glyph.data  .disc { background: linear-gradient(135deg,#2ba8c6,#0ec1ae); }
.hero-glyph .orbit { position: absolute; inset: 0; animation: spin 30s linear infinite; }
.hero-glyph .orbit i { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 12px; background: #fff;
  border: 1px solid #d4eaf5; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--teal); font-size: 1.15rem; animation: spin 30s linear infinite reverse; }
.hero-glyph .orbit i:nth-child(1){ top: 0; left: 50%; } .hero-glyph .orbit i:nth-child(2){ top: 50%; left: 100%; }
.hero-glyph .orbit i:nth-child(3){ top: 100%; left: 50%; } .hero-glyph .orbit i:nth-child(4){ top: 50%; left: 0; }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.metric { text-align: center; padding: 28px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border-2); box-shadow: var(--shadow); }
.metric .num { font-size: clamp(1.9rem, 3.3vw, 2.6rem); font-weight: 800; background: var(--grad-head); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.metric .lbl { font-size: .88rem; color: var(--muted); margin-top: 6px; }

/* Cards / grid */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.card-ag { background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 26px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; display: block; color: inherit; }
.card-ag:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green); color: inherit; }
a.card-ag:hover h3 { color: var(--teal); }
.card-ag .ico { width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; margin-bottom: 16px; background: var(--grad-teal); }
.card-ag h3 { font-size: 1.15rem; margin-bottom: 7px; }
.card-ag p { font-size: .94rem; margin-bottom: 0; }
.card-ag .tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
/* domains */
.d-cyber .ico { background: linear-gradient(135deg,#186f98,#2c3e50); } .d-cyber .tag { color: var(--blue); }
.d-agent .ico { background: var(--grad-green); } .d-agent .tag { color: var(--green); }
.d-data  .ico { background: linear-gradient(135deg,#2ba8c6,#0ec1ae); } .d-data .tag { color: var(--green); }
.card-ag.prob { border-left: 4px solid var(--teal); }

/* Capability lists */
.cap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cap-group h4 { color: var(--dark); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.cap-group h4 i { color: var(--teal); }
.cap-list { display: flex; flex-wrap: wrap; gap: 9px; }
.cap { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--dark); padding: 9px 15px;
  border-radius: var(--r); background: #fff; border: 1px solid var(--border-2); transition: .2s ease; }
.cap:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 6px 16px rgba(44,168,199,.2); }
.cap i { color: var(--teal); }

/* Bullets */
.bullets { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 26px; }
.bullet { display: flex; gap: 11px; }
.bullet i { color: var(--teal); font-size: 1.1rem; margin-top: 3px; flex: none; }
.bullet b { color: var(--dark); display: block; font-weight: 600; }
.bullet span { color: var(--muted); font-size: .9rem; }
.bullet.simple b { font-weight: 500; color: var(--ink); }

/* Stepper */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.stepper .st { position: relative; padding: 0 14px; text-align: center; }
.stepper .st .b { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--grad-teal); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 8px 18px rgba(44,168,199,.3); }
.stepper .st::before { content: ''; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: #d4eaf5; z-index: 0; }
.stepper .st:first-child::before { display: none; }
.stepper .st h4 { font-size: 1rem; margin: 0 0 5px; }
.stepper .st p { font-size: .84rem; margin: 0 auto; }

/* Pills / outcomes / split / compare / roles / form */
.pill-cloud { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.pill { padding: 8px 15px; border-radius: var(--r-full); background: #fff; border: 1px solid var(--border-2); font-size: .86rem; font-weight: 500; color: var(--dark); }
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px,1fr)); gap: 15px; }
.otile { text-align: center; padding: 22px 14px; border-radius: var(--r-lg); background: var(--soft); border: 1px solid #d4eaf5; }
.otile .n { font-size: 1.7rem; font-weight: 800; background: var(--grad-head); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.otile .l { font-size: .84rem; color: var(--muted); margin-top: 5px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; }
.split.rev .split-visual { order: -1; }
.panel { background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.panel.soft { background: var(--soft); border-color: #d4eaf5; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-2); background: #fff; }
.cmp th, .cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .92rem; }
.cmp thead th { background: var(--soft); color: var(--dark); font-weight: 700; }
.cmp tbody td { color: var(--muted); } .cmp .yes { color: var(--green); font-weight: 700; } .cmp .no { color: #b8c1c8; }
.cmp .algo { background: rgba(44,168,199,.08); color: var(--dark); font-weight: 600; }
.role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.role-card { position: relative; display: flex; gap: 14px; padding: 20px 34px 20px 19px; background: #fff; border: 1px solid #e2edf3; border-radius: var(--r-lg); overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.role-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-teal); transform: scaleY(0); transform-origin: top; transition: transform .28s var(--ease); }
.role-card::after { content: '\2192'; position: absolute; top: 18px; right: 16px; color: var(--teal); font-weight: 700; opacity: 0; transform: translateX(-5px); transition: opacity .28s var(--ease), transform .28s var(--ease); }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(24,111,152,.13); border-color: #cfe7f0; }
.role-card:hover::before { transform: scaleY(1); }
.role-card:hover::after { opacity: 1; transform: translateX(0); }
a.role-card { text-decoration: none; color: inherit; }
a.role-card:hover h4 { color: var(--teal); }
.role-card .av { width: 46px; height: 46px; border-radius: 12px; background: var(--grad-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none;
  box-shadow: 0 6px 14px rgba(44,168,199,.28); transition: transform .28s var(--ease); }
.role-card:hover .av { transform: scale(1.06) rotate(-3deg); }
.role-card h4 { margin: 0 0 5px; font-size: 1rem; transition: color .2s ease; }
.role-card p { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.role-grid.sec .role-card::before, .role-grid.sec .role-card .av { background: linear-gradient(135deg,#186f98,#2c3e50); }
.role-grid.sec .role-card .av { box-shadow: 0 6px 14px rgba(24,111,152,.28); }
.role-grid.sec .role-card::after { color: var(--blue); }
.role-grid.sec a.role-card:hover h4 { color: var(--blue); }
@media (max-width: 1000px){ .role-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .role-grid { grid-template-columns: 1fr; } }
.leader-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.leader-card { flex: 0 1 240px; max-width: 260px; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 26px 20px; text-align: center; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.leader-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.leader-card .photo { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 3px solid #d4eaf5; background: var(--soft); display: block; }
.leader-card h3 { font-size: 1.1rem; margin: 0 0 4px; }
.leader-card .role { color: var(--teal); font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.leader-card .li { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--blue); border: 1.5px solid var(--border-2); padding: 7px 16px; border-radius: var(--r-full); transition: .2s ease; }
.leader-card .li:hover { border-color: var(--teal); color: var(--teal); }
@media (max-width: 992px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .leader-grid { grid-template-columns: 1fr; } }

/* Cyber portfolio 5-domain matrix (mirrors the slide) */
.domain-grid { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 16px; row-gap: 0; grid-template-rows: auto repeat(5, auto); }
.domain-col { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .3s, transform .3s var(--ease); }
.domain-col:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.domain-col .dh { background: linear-gradient(135deg, #186f98 0%, #2c3e50 100%); color: #fff; padding: 15px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.domain-col .dh h4 { color: #fff; font-size: .97rem; margin: 0; line-height: 1.28; }
.domain-col .dh .verbs { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: #a9d9e8; font-weight: 600; line-height: 1.55; }
.domain-col .cap-item { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 13px 16px; border-top: 1px solid var(--border); transition: background .2s, padding-left .2s; text-decoration: none; }
.domain-col .cap-item:hover { background: var(--soft); padding-left: 21px; }
.domain-col .cap-item b { color: var(--dark); font-size: .88rem; font-weight: 600; line-height: 1.3; }
.domain-col .cap-item:hover b { color: var(--blue); }
.domain-col .cap-item span { color: var(--muted); font-size: .72rem; line-height: 1.45; }
@media (max-width: 1100px) { .domain-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: 16px; } .domain-col { grid-row: auto; display: flex; flex-direction: column; } }
@media (max-width: 640px) { .domain-grid { grid-template-columns: 1fr; } }
@supports not (grid-template-rows: subgrid) { .domain-grid { grid-template-rows: none; } .domain-col { grid-row: auto; display: flex; flex-direction: column; } .domain-col .dh { min-height: 96px; } }

/* Persona cards */
.persona .ico { background: linear-gradient(135deg, #186f98, #2c3e50); }
.deploy { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.deploy .d { padding: 11px 20px; border-radius: var(--r-full); background: #fff; border: 1px solid var(--border-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--dark); }
.deploy .d i { color: var(--teal); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.form-panel { background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.field { margin-bottom: 15px; } .field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--dark); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border-radius: 8px; background: #fff; border: 1px solid var(--border-2); color: var(--ink); font-family: inherit; font-size: .93rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(44,168,199,.16); }

/* CTA band */
.cta-band { background: var(--grad-cta); text-align: center; }
.cta-band .eyebrow { background: rgba(255,255,255,.18); color: #fff; }
.cta-band h2, .cta-band .gradient-text { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 62ch; margin: 0 auto 26px; }

/* Footer */
.footer { background: var(--midnight); color: #cfd8de; padding: 56px 0 26px; }
.footer h5 { color: #fff; font-size: .92rem; margin-bottom: 13px; }
.footer .cols { display: grid; grid-template-columns: 1.4fr repeat(5,1fr); gap: 24px; margin-bottom: 34px; }
.footer a { display: block; color: #b7c2ca; font-size: .88rem; margin-bottom: 7px; }
.footer a:hover { color: #fff; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .brand img { height: 30px; width: auto; }
.footer .brand .logo-white { filter: brightness(0) invert(1); opacity: .95; }
.footer .brand .text-gradient { -webkit-text-fill-color: #fff; background: none; color: #fff; }
.footer .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; color: #92a0aa; font-size: .82rem; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.badges span { font-size: .7rem; padding: 4px 10px; border-radius: var(--r-full); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #c8d2d9; }

/* Sticky CTA */
.sticky-cta { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%,140%); z-index: 900; display: flex; align-items: center; gap: 16px;
  padding: 10px 10px 10px 22px; background: #fff; border: 1px solid var(--border-2); border-radius: var(--r-full); box-shadow: var(--shadow-lg); transition: transform .35s var(--ease); }
.sticky-cta.show { transform: translate(-50%,0); }
.sticky-cta span { font-weight: 600; font-size: .92rem; color: var(--dark); }
@media (max-width: 560px){ .sticky-cta { display: none; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){transition-delay:.05s}.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.15s}.stagger.in > *:nth-child(4){transition-delay:.20s}
.stagger.in > *:nth-child(5){transition-delay:.25s}.stagger.in > *:nth-child(6){transition-delay:.30s}
.stagger.in > *:nth-child(7){transition-delay:.35s}.stagger.in > *:nth-child(8){transition-delay:.40s}
.stagger.in > *:nth-child(9){transition-delay:.45s}.stagger.in > *:nth-child(10){transition-delay:.50s}

/* Responsive */
@media (max-width: 992px){
  .hero .container, .subhero .container { grid-template-columns: 1fr; }
  .hero-visual, .subhero .hero-glyph { order: 2; }   /* text first, animation/visual second when stacked */
  .grid-4 { grid-template-columns: repeat(2,1fr); } .metrics { grid-template-columns: repeat(2,1fr); }
  .stepper { grid-auto-flow: row; } .stepper .st::before { display: none; } .stepper .st { padding: 0 0 20px; }
  .split, .form-grid, .role-grid { grid-template-columns: 1fr; } .split.rev .split-visual { order: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .nav-links, .nav-actions .btn-out { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; text-align: left; background: #fff; padding: 16px 22px; gap: 14px; box-shadow: var(--shadow); margin-left: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav-links.open > a, .nav-links.open .nav-dd, .nav-links.open .nav-dd > a { display: block; width: 100%; }
  .nav-links.open > a, .nav-links.open .nav-dd > a { font-weight: 600; color: var(--dark); padding: 2px 0; }
  .nav-links.open .nav-dd-menu, .nav-links.open .nav-dd-menu.mega { position: static; transform: none; opacity: 1; visibility: visible; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 2px 0 6px 12px; }
  .nav-links.open .mega-cols { grid-template-columns: 1fr; gap: 0; }
  .nav-links.open .mega-head { display: none; }
  .nav-links.open .nav-dd > a::after { display: none; }
  .nav-links.open .mega-col h6 { margin-top: 8px; }
  .grid-2, .grid-3, .grid-4, .cap-cols, .bullets { grid-template-columns: 1fr; }
  .field.two { grid-template-columns: 1fr; }
}
/* ===== Enhancements: scroll progress, gauges, marquee, back-to-top ===== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1200;
  background: linear-gradient(90deg, #2ca8c7, #8b5cf6, #0ec1ae); transition: width .1s linear; }

/* Data-viz results band */
.trust-band { background: linear-gradient(180deg, #ffffff 0%, var(--soft) 100%); border-top: 1px solid var(--border); }
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 40px; }
.gauge { text-align: center; }
.gauge .ring { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 12px; position: relative;
  background: conic-gradient(var(--teal) calc(var(--p, 0) * 1%), #dbe8ee 0); box-shadow: var(--shadow); }
.gauge .ring::before { content: ""; position: absolute; inset: 13px; background: #fff; border-radius: 50%; }
.gauge .gnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; color: var(--blue); z-index: 1; }
.gauge .glbl { font-size: .88rem; color: var(--muted); font-weight: 500; }
.gauge:nth-child(2) .ring { background: conic-gradient(var(--blue) calc(var(--p,0)*1%), #dbe8ee 0); }
.gauge:nth-child(3) .ring { background: conic-gradient(var(--green) calc(var(--p,0)*1%), #dbe8ee 0); }
.gauge:nth-child(4) .ring { background: conic-gradient(#8b5cf6 calc(var(--p,0)*1%), #dbe8ee 0); }

/* Tools marquee */
.tools-wrap { text-align: center; }
.tools-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: inline-flex; gap: 14px; white-space: nowrap; animation: marquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .tool { padding: 9px 18px; border-radius: var(--r-full); background: #fff; border: 1px solid var(--border-2);
  font-weight: 600; font-size: .9rem; color: var(--dark); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Animated data-flow on steppers */
.stepper .st::before { background: linear-gradient(90deg, #d4eaf5, #2ca8c7, #d4eaf5); background-size: 200% 100%; animation: flowline 3s linear infinite; }
@keyframes flowline { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Back to top */
.to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; z-index: 900;
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--grad-teal);
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .3s var(--ease); text-decoration: none; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: #fff; transform: translateY(-3px); }

/* UI/UX polish: accessible focus + smoother cards */
a:focus-visible, button:focus-visible, .btn-ag:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(44,168,199,.45); outline-offset: 2px; border-radius: 4px; }
.card-ag, .cap, .otile, .metric, .role-card, .domain-col { will-change: transform; }
.section-head h2 { text-wrap: balance; }

@media (max-width: 760px){ .gauges { grid-template-columns: repeat(2, 1fr); } .to-top { right: 14px; bottom: 14px; } }

/* ===== Per-page hero backgrounds by domain ===== */
.subhero.d-cyber { background: radial-gradient(110% 120% at 90% 0%, rgba(99,102,241,.16) 0%, rgba(255,255,255,0) 58%), var(--soft-2); }
.subhero.d-agent { background: radial-gradient(110% 120% at 90% 0%, rgba(16,185,129,.16) 0%, rgba(255,255,255,0) 58%), var(--soft-2); }
.subhero.d-data  { background: radial-gradient(110% 120% at 90% 0%, rgba(6,182,212,.16) 0%, rgba(255,255,255,0) 58%), var(--soft-2); }

/* ===== Animated hero art library (unique per topic) ===== */
.hero-glyph { --art: #2ca8c7; }
.hero-glyph.d-cyber { --art: #186f98; }
.hero-glyph.d-cyber .disc { background: linear-gradient(135deg,#186f98,#2c3e50); box-shadow: 0 16px 40px rgba(24,111,152,.4); }
.hero-glyph.d-agent { --art: #10b981; }
.hero-glyph.d-agent .disc { background: var(--grad-green); }
.hero-glyph.d-data { --art: #06b6d4; }
.hero-glyph.d-data .disc { background: linear-gradient(135deg,#2ba8c6,#0ec1ae); }
.hero-glyph .disc { position: relative; z-index: 3; }

/* rings */
.art-rings .pring { position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; margin: -30% 0 0 -30%; border-radius: 50%;
  border: 2px solid var(--art); opacity: 0; animation: pulsering 3s ease-out infinite; }
.art-rings .p2 { animation-delay: 1s; } .art-rings .p3 { animation-delay: 2s; }
@keyframes pulsering { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
/* radar */
.art-radar .radar-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--art) 35%, transparent); }
.art-radar .r1 { width: 82%; height: 82%; } .art-radar .r2 { width: 56%; height: 56%; }
.art-radar .radar-sweep { position: absolute; top: 50%; left: 50%; width: 82%; height: 82%; transform: translate(-50%,-50%); border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--art) 40%, transparent), transparent 32%); animation: spin 3.6s linear infinite; z-index: 1; }
.art-radar .blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--art); box-shadow: 0 0 10px var(--art); animation: blip 3.6s ease-in-out infinite; z-index: 2; }
.art-radar .b1 { top: 26%; left: 64%; } .art-radar .b2 { top: 62%; left: 30%; animation-delay: 1.2s; } .art-radar .b3 { top: 70%; left: 66%; animation-delay: 2.2s; }
@keyframes blip { 0%,78%,100% { opacity: 0; transform: scale(.4); } 38% { opacity: 1; transform: scale(1); } }
/* nodes */
.art-nodes::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--art) 30%, transparent); animation: spin 30s linear infinite; }
.art-nodes .gnode { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--art); box-shadow: 0 0 9px color-mix(in srgb, var(--art) 60%, transparent); animation: nodep 2.4s ease-in-out infinite; z-index: 2; }
.art-nodes .g1 { top: 8%; left: 50%; } .art-nodes .g2 { top: 34%; left: 90%; animation-delay: .4s; } .art-nodes .g3 { top: 80%; left: 74%; animation-delay: .8s; } .art-nodes .g4 { top: 80%; left: 26%; animation-delay: 1.2s; } .art-nodes .g5 { top: 34%; left: 10%; animation-delay: 1.6s; }
.art-nodes .glink { position: absolute; top: 50%; left: 50%; width: 42%; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--art) 45%, transparent), transparent); transform-origin: left center; }
.art-nodes .l1 { transform: rotate(-32deg); } .art-nodes .l2 { transform: rotate(88deg); } .art-nodes .l3 { transform: rotate(208deg); }
@keyframes nodep { 0%,100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
/* dataflow */
.art-dataflow .dp { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--art); box-shadow: 0 0 8px color-mix(in srgb, var(--art) 55%, transparent); top: -6%; opacity: 0; animation: fall 2.2s linear infinite; }
.art-dataflow .d1 { left: 30%; } .art-dataflow .d2 { left: 42%; animation-delay: .4s; } .art-dataflow .d3 { left: 50%; animation-delay: .8s; } .art-dataflow .d4 { left: 58%; animation-delay: 1.2s; } .art-dataflow .d5 { left: 70%; animation-delay: 1.6s; } .art-dataflow .d6 { left: 46%; animation-delay: .6s; }
@keyframes fall { 0% { top: -6%; opacity: 0; } 12% { opacity: 1; } 60% { opacity: 1; } 100% { top: 48%; opacity: 0; } }
/* gears */
.art-gears .gear { position: absolute; color: color-mix(in srgb, var(--art) 45%, transparent); }
.art-gears .ga { font-size: 3rem; top: 5%; right: 6%; animation: spin 8s linear infinite; }
.art-gears .gb { font-size: 2.1rem; bottom: 7%; left: 7%; animation: spin 6s linear infinite reverse; }
/* waveform / equalizer */
.art-waveform .eq { position: absolute; bottom: 5%; width: 9px; height: 30px; border-radius: 4px; background: var(--grad-teal); transform-origin: bottom; opacity: .8; animation: eqbar 1.1s ease-in-out infinite; }
.art-waveform.d-cyber .eq { background: linear-gradient(#186f98,#2c3e50); } .art-waveform.d-data .eq { background: linear-gradient(#2ba8c6,#0ec1ae); }
.art-waveform .e1 { left: 31%; } .art-waveform .e2 { left: 40%; animation-delay: .15s; } .art-waveform .e3 { left: 49%; animation-delay: .3s; } .art-waveform .e4 { left: 58%; animation-delay: .45s; } .art-waveform .e5 { left: 67%; animation-delay: .6s; }
@keyframes eqbar { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ===== FAQ accordion ===== */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border-2); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; background: #fff; transition: box-shadow .2s, border-color .2s; }
.faq-item.open { border-color: var(--teal); box-shadow: var(--shadow); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 16px 18px; font-family: inherit; font-weight: 600; font-size: 1rem; color: var(--dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-q i { color: var(--teal); transition: transform .3s var(--ease); flex: none; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: .95rem; }

/* ===== Enterprise Defense System hero (CyberMox) ===== */
.defense-hero { position: relative; width: min(640px, 100%); margin: 0 auto; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 48%, rgba(24,111,152,.09), rgba(255,255,255,0) 70%), #f8fcfe;
  border: 1px solid var(--border); box-shadow: var(--shadow); }
.defense-hero.m-combined { aspect-ratio: 1.45 / 1; }
.defense-hero.m-cyber, .defense-hero.m-itops, .defense-hero.m-norra, .defense-hero.m-data { aspect-ratio: 1 / 1; }
/* Home hero — transparent world map background with air-defense radar on the right */
.hero-map { position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; }
.hero-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-map .hero-map-inner { position: relative; z-index: 1; display: block; width: 100%; }
.hero-map .hero-head { max-width: 50%; }
.hero-map .hero-head h1 { margin-bottom: 14px; }
.hero-map .hero-head .sub { max-width: 42ch; }
.hero-map .chips { display: grid; grid-template-columns: max-content max-content; gap: 10px 14px; justify-items: start; }
@media (max-width: 560px){ .hero-map .chips { grid-template-columns: 1fr; } }
@media (max-width: 900px){
  /* stack the homepage hero: text first, radar animation second */
  .hero-map { display: flex; flex-direction: column; min-height: 0; }
  .hero-map .hero-map-inner { order: 1; width: 100%; }
  .hero-map .hero-head { max-width: 100%; }
  .hero-map .hero-head .sub { max-width: 100%; }
  .hero-map-canvas { position: relative; order: 2; opacity: 1; width: 100%; height: 210px; margin: 0; }
  .hero-map + .section { padding-top: 16px !important; }
}
.defense-hero.m-norra { background: none; border: none; box-shadow: none; overflow: visible; }
.defense-hero.m-itops { background: none; border: none; box-shadow: none; }
.defense-hero.m-cyber { background: none; border: none; box-shadow: none; }
.defense-hero.m-data { background: none; border: none; box-shadow: none; aspect-ratio: 1.15 / 1; }
.norra-avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 60%; max-width: 330px; height: auto; z-index: 2;
  pointer-events: none; filter: drop-shadow(0 16px 34px rgba(24,111,152,.32)); animation: floaty 4s ease-in-out infinite; }
#defenseCanvas { width: 100%; height: 100%; display: block; }
.defense-hero .def-caption { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: .68rem; font-weight: 600;
  letter-spacing: .02em; color: var(--muted); pointer-events: none; padding: 0 12px; }
.defense-hero .def-legend { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; pointer-events: none; padding: 0 10px; }
.defense-hero .lg { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-full);
  background: rgba(255,255,255,.92); border: 1px solid var(--border-2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--dark); }
.defense-hero .lg-it i { color: #2ca8c7; } .defense-hero .lg-cy i { color: #186f98; } .defense-hero .lg-nr i { color: #2c3e50; }
.defense-hero .lg-att i { color: #e5484d; } .defense-hero .lg-def i, .defense-hero .lg-heal i { color: #10b981; } .defense-hero .lg-inc i { color: #f39c12; }
@media (max-width: 400px){ .defense-hero .lg { font-size: .6rem; padding: 3px 7px; } }

/* ===== Home architecture diagram (Brain · Tools · Memory) ===== */
.arch { max-width: 940px; margin: 0 auto; padding: 30px 30px 34px; border: 1.5px solid #d7e9f2; border-radius: 22px;
  background: radial-gradient(120% 90% at 50% -10%, rgba(44,168,199,.07), rgba(255,255,255,0) 55%), #fff; box-shadow: 0 8px 30px rgba(24,111,152,.08); }
.arch-row { display: grid; gap: 18px; }
.arch-row.tools { position: relative; grid-template-columns: 1fr 1fr; gap: 64px; }
.arch-node { position: relative; background: #fff; border: 1.5px solid #dcebf3; border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.arch-node:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #bfe1ef; }
.arch-node.brain { background: linear-gradient(180deg,#fbfeff,#eef8fc); border-color: #c3e6f1; }
.arch-head { display: flex; align-items: center; gap: 14px; }
.arch-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.45rem;
  background: linear-gradient(135deg,#2ca8c7,#186f98); box-shadow: 0 6px 16px rgba(44,168,199,.32); }
.arch-node.cyber .arch-ico { background: linear-gradient(135deg,#186f98,#2c3e50); box-shadow: 0 6px 16px rgba(24,111,152,.3); }
.arch-node.memory .arch-ico { background: linear-gradient(135deg,#2ba8c6,#0ec1ae); box-shadow: 0 6px 16px rgba(14,193,174,.3); }
.arch-title h3 { margin: 0; font-size: 1.22rem; font-weight: 700; color: var(--dark); line-height: 1.15; }
.arch-sub { font-size: .8rem; font-weight: 600; color: var(--teal); }
.arch-node.cyber .arch-sub { color: var(--blue); }
.arch-node.memory .arch-sub { color: #0e9f8e; }
.arch-caps { margin: 12px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
/* MoxDB — split layout: info left, stored-data chips right */
.arch-node.memory { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; column-gap: 30px; align-items: center; }
.arch-mem-info .arch-caps { margin-top: 9px; }
.mem-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mem-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--blue);
  background: #eef8fb; border: 1px solid #d3ebf3; border-radius: 999px; padding: 6px 11px; animation: memWrite 6.3s ease-in-out infinite; }
.mem-chip i { color: currentColor; font-size: .82rem; }
.mem-chip:nth-child(1){ animation-delay: 0s; } .mem-chip:nth-child(2){ animation-delay: .8s; } .mem-chip:nth-child(3){ animation-delay: 1.6s; }
.mem-chip:nth-child(4){ animation-delay: 2.4s; } .mem-chip:nth-child(5){ animation-delay: 3.2s; } .mem-chip:nth-child(6){ animation-delay: 4s; } .mem-chip:nth-child(7){ animation-delay: 4.8s; }
@keyframes memWrite {
  0%, 66%, 100% { background: #eef8fb; color: var(--blue); border-color: #d3ebf3; box-shadow: none; }
  8% { background: #2ca8c7; color: #fff; border-color: #2ca8c7; box-shadow: 0 4px 12px rgba(44,168,199,.35); }
  22% { background: #eef8fb; color: var(--blue); border-color: #d3ebf3; box-shadow: none; }
}
/* Norra — split layout: identity left, animated NOC + SOC agent workforce right */
.arch-node.brain { display: grid; grid-template-columns: minmax(230px, 300px) 1fr; column-gap: 28px; align-items: center; }
.arch-info .arch-caps { margin-top: 9px; }
.workforce { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.wf-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-tag { flex: 0 0 auto; font-size: .58rem; font-weight: 800; letter-spacing: .1em; color: #fff; padding: 4px 8px; border-radius: 7px; }
.wf-tag.noc { background: linear-gradient(135deg,#2ca8c7,#186f98); }
.wf-tag.soc { background: linear-gradient(135deg,#186f98,#2c3e50); }
.wf-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wf-track { display: inline-flex; padding: 2px 0; width: max-content; animation: wfScroll 34s linear infinite; }
.wf-track.rev-track { animation-direction: reverse; }
.workforce:hover .wf-track { animation-play-state: paused; }
@keyframes wfScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wf-chip { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; margin-right: 8px; font-size: .73rem; font-weight: 600;
  color: var(--dark); background: #fff; border: 1px solid #cfe7f0; border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(24,111,152,.06); }
.wf-chip.s { border-color: #cfe0ee; }
.wf-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #27AE60; box-shadow: 0 0 0 2px rgba(39,174,96,.18); }
.wf-chip.s .dot { background: #2ca8c7; box-shadow: 0 0 0 2px rgba(44,168,199,.18); }
.arch-tag { position: absolute; top: -11px; right: 16px; background: linear-gradient(135deg,#2ca8c7,#186f98); color: #fff; font-size: .62rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 4px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(44,168,199,.35); }
.arch-node.cyber .arch-tag { background: linear-gradient(135deg,#186f98,#2c3e50); box-shadow: 0 4px 12px rgba(24,111,152,.3); }
.arch-node.memory .arch-tag { background: linear-gradient(135deg,#2ba8c6,#0ec1ae); }
/* vertical connectors (Brain <-> Tools <-> Memory) */
.arch-links { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.arch-link { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; }
.arch-link::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(#2ca8c7, rgba(44,168,199,.2)); }
.arch-link .proto { position: relative; z-index: 3; background: #fff; border: 1px solid #d4eaf5; color: var(--blue);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: 3px 10px; border-radius: 999px; }
.arch-link .pk { position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; z-index: 2; }
.arch-link .pk.dn { background: #2ca8c7; box-shadow: 0 0 8px rgba(44,168,199,.75); animation: archDown 1.9s linear infinite; }
.arch-link .pk.up { background: #0ec1ae; box-shadow: 0 0 8px rgba(14,193,174,.75); animation: archUp 1.9s linear infinite; animation-delay: .95s; }
@keyframes archDown { 0%{ top: 2px; opacity: 0; } 12%{ opacity: 1; } 88%{ opacity: 1; } 100%{ top: calc(100% - 8px); opacity: 0; } }
@keyframes archUp { 0%{ top: calc(100% - 8px); opacity: 0; } 12%{ opacity: 1; } 88%{ opacity: 1; } 100%{ top: 2px; opacity: 0; } }
/* peer link (ITMox <-> CyberMox) */
.arch-peer { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 74px; height: 22px; display: flex; align-items: center; justify-content: center; z-index: 5; }
.arch-peer::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg,#2ca8c7,#186f98); }
.arch-peer .proto { position: relative; z-index: 3; background: #fff; border: 1px solid #d4eaf5; color: var(--blue); font-size: .6rem; font-weight: 700; letter-spacing: .1em; padding: 2px 8px; border-radius: 999px; }
.arch-peer .pk { position: absolute; top: 50%; margin-top: -3.5px; width: 7px; height: 7px; border-radius: 50%; z-index: 2; }
.arch-peer .pk.lr { background: #2ca8c7; box-shadow: 0 0 8px rgba(44,168,199,.75); animation: peerLR 1.9s linear infinite; }
.arch-peer .pk.rl { background: #186f98; box-shadow: 0 0 8px rgba(24,111,152,.6); animation: peerRL 1.9s linear infinite; animation-delay: .95s; }
@keyframes peerLR { 0%{ left: 1px; opacity: 0; } 14%{ opacity: 1; } 86%{ opacity: 1; } 100%{ left: calc(100% - 8px); opacity: 0; } }
@keyframes peerRL { 0%{ right: 1px; opacity: 0; } 14%{ opacity: 1; } 86%{ opacity: 1; } 100%{ right: calc(100% - 8px); opacity: 0; } }
@media (max-width: 760px){
  .arch-node.brain, .arch-node.memory { grid-template-columns: 1fr; row-gap: 14px; }
}
@media (max-width: 640px){
  .arch { padding: 22px 16px 26px; }
  .arch-row.tools, .arch-links { grid-template-columns: 1fr; gap: 14px; }
  .arch-row.tools { gap: 36px; }
  .arch-peer { position: static; transform: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}


/* ================= Technical Architecture diagram (light theme) ================= */
/* hero layout: diagram on top, centered copy above & below */
.subhero.tarch-hero{padding-top:calc(var(--nav-h) + 22px);padding-bottom:34px}
.subhero.tarch-hero .container{grid-template-columns:1fr;gap:16px}
.subhero.tarch-hero .container>.reveal:not(.tarch){max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.subhero.tarch-hero .breadcrumb{justify-content:center}
.subhero.tarch-hero .container>.reveal:last-child{margin-top:16px}
.subhero.tarch-hero .sub{max-width:720px;margin:0 auto 16px}
.subhero.tarch-hero .hero-cta{justify-content:center;margin-top:0}

.tarch{position:relative;max-width:1060px;margin:0 auto;font-size:.75rem;line-height:1.35;color:var(--ink)}
.tarch-node,.tarch-bar,.tarch-agent,.tarch-connectors,.tarch-etl,.tarch-store,.tarch-genai,.tarch-orch,.tarch-engine{border:1.5px solid var(--border-2);border-radius:10px;background:#fff}

/* agents */
.tarch-agents{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:10px}
.tarch-agent{padding:6px 12px;font-weight:600;color:var(--dark);white-space:nowrap;transition:.3s var(--ease)}
.tarch-agent:hover{border-color:var(--teal);box-shadow:0 6px 16px rgba(44,168,199,.18);transform:translateY(-2px)}
.tarch-dots{display:inline-flex;gap:7px;padding:0 2px}
.tarch-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--border-2);display:block;animation:tarchDot 1.6s ease-in-out infinite}
.tarch-dots i:nth-child(2){animation-delay:.25s}.tarch-dots i:nth-child(3){animation-delay:.5s}
@keyframes tarchDot{0%,100%{opacity:.4;border-color:var(--border-2)}50%{opacity:1;border-color:var(--teal);box-shadow:0 0 8px rgba(44,168,199,.5)}}

/* main grid */
.tarch-grid{display:grid;grid-template-columns:minmax(140px,172px) 30px 46px 30px 1fr;align-items:stretch}
.tarch-coltitle{font-weight:700;color:var(--dark);text-align:center;margin-bottom:6px;letter-spacing:.2px}
.tarch-sources{display:flex;flex-direction:column}
.tarch-sources .tarch-node{margin-bottom:5px;text-align:center;padding:5px 8px;font-weight:600;color:var(--dark);transition:.3s var(--ease)}
.tarch-sources .tarch-node:last-child{margin-bottom:0}
.tarch-sources .tarch-node:hover{border-color:var(--teal);background:var(--soft)}

/* horizontal flow */
.tarch-flow-x{position:relative;align-self:center;height:2px;margin-top:16px;background:var(--border-2)}
.tarch-flow-x::after{content:'';position:absolute;top:-1px;left:-30%;width:24px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--teal),transparent);animation:tarchX 1.8s linear infinite}
.tarch-flow-x:nth-of-type(2)::after{animation-delay:.9s}
@keyframes tarchX{0%{left:-30%}100%{left:100%}}
.tarch-arrow{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:7px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* connectors bar */
.tarch-connectors{display:flex;align-items:center;justify-content:center;padding:8px 4px;border-color:var(--teal);background:var(--soft)}
.tarch-connectors span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;color:var(--blue);letter-spacing:.3px;text-align:center;font-size:.72rem;line-height:1.3}

/* main stack */
.tarch-main{display:flex;flex-direction:column;gap:6px;padding-left:10px;position:relative}
.tarch-genai-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tarch-genai{padding:5px 8px;text-align:center;font-weight:600;color:var(--dark);min-height:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.3s var(--ease)}
.tarch-genai small{display:block;font-weight:500;color:var(--muted);font-size:.66rem;margin-top:2px}
.tarch-genai:hover{border-color:var(--teal);box-shadow:0 6px 16px rgba(44,168,199,.14)}
.tarch-bar{padding:5px 14px;text-align:center;font-weight:600;color:var(--dark);position:relative;overflow:hidden}
.tarch-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(44,168,199,.16),transparent);transform:translateX(-100%);animation:tarchShim 3.2s linear infinite}
@keyframes tarchShim{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.tarch-mid{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.tarch-etl{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;color:var(--blue);padding:7px;line-height:1.4;background:var(--soft)}
.tarch-store{padding:8px;border-color:var(--teal)}
.tarch-store-t{font-weight:700;color:var(--dark);text-align:center;margin-bottom:5px}
.tarch-sub{border:1.4px solid var(--border-2);border-radius:7px;text-align:center;padding:3px;font-weight:600;color:var(--dark);margin-bottom:4px;background:var(--soft-2)}

/* datastore cluster + replication pulse */
.tarch-cluster{margin-top:2px}
.tarch-cluster .crow{display:flex;gap:12px;justify-content:center;margin-bottom:5px;position:relative}
.tarch-cluster .crow::before{content:'';position:absolute;top:50%;left:20%;right:20%;height:1.5px;background:var(--border-2);transform:translateY(-50%);z-index:0}
.tarch-cluster .crow::after{content:'';position:absolute;top:50%;left:20%;width:13px;height:5px;border-radius:5px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--green),transparent);animation:tarchRepl 2.2s linear infinite;z-index:1}
@keyframes tarchRepl{0%{left:20%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(80% - 13px);opacity:0}}
.tarch-cyl{width:30px;height:17px;border:1.6px solid var(--teal);border-radius:50% / 24%;position:relative;background:#fff;z-index:1;animation:tarchPulse 2.4s ease-in-out infinite}
.tarch-cyl::before{content:'';position:absolute;top:-1.6px;left:-1.6px;right:-1.6px;height:6px;border:1.6px solid var(--teal);border-radius:50%;background:#fff}
.tarch-cyl:nth-child(2){animation-delay:.4s}.tarch-cyl:nth-child(3){animation-delay:.8s}
@keyframes tarchPulse{0%,100%{box-shadow:0 0 0 rgba(44,168,199,0)}50%{box-shadow:0 0 10px rgba(44,168,199,.4)}}
.tarch-cluster-t{text-align:center;font-weight:600;color:var(--dark);margin-top:3px}

/* upward data rail (two staggered pulses) */
.tarch-uprail{position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--border-2)}
.tarch-uprail::before,.tarch-uprail::after{content:'';position:absolute;left:-1px;width:4px;height:26px;border-radius:4px;background:linear-gradient(0deg,transparent,var(--teal),transparent);animation:tarchUp 3s linear infinite}
.tarch-uprail::after{animation-delay:1.5s;background:linear-gradient(0deg,transparent,var(--green),transparent)}
@keyframes tarchUp{0%{bottom:-12%;opacity:0}12%{opacity:1}88%{opacity:1}100%{bottom:100%;opacity:0}}

/* bottom bars */
.tarch-orch{margin-top:7px;text-align:center;font-weight:700;color:var(--dark);padding:7px}
.tarch-engine{margin-top:7px;text-align:center;font-weight:700;color:#fff;padding:8px;border-color:var(--teal);background:var(--grad-teal);animation:tarchEngine 3s ease-in-out infinite}
@keyframes tarchEngine{0%,100%{box-shadow:0 8px 22px rgba(44,168,199,.22)}50%{box-shadow:0 10px 30px rgba(44,168,199,.45)}}
.tarch-loop{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;color:var(--muted);font-weight:500;font-size:.9em}
.tarch-loop i{color:var(--green);animation:tarchChevron 1.6s ease-in-out infinite}
@keyframes tarchChevron{0%,100%{transform:translateY(2px);opacity:.4}50%{transform:translateY(-2px);opacity:1}}

/* NEXT-LEVEL: orchestrated end-to-end signal wave sweeping the whole pipeline */
.tarch-node,.tarch-connectors,.tarch-etl,.tarch-store,.tarch-bar,.tarch-genai,.tarch-agent,.tarch-orch{animation:tarchWave 6s ease-in-out infinite}
@keyframes tarchWave{0%,16%,100%{box-shadow:0 0 0 0 rgba(44,168,199,0)}5%{box-shadow:0 0 0 2px rgba(44,168,199,.30),0 6px 16px rgba(44,168,199,.22)}}
.tarch-sources .tarch-node{animation-delay:0s}
.tarch-connectors{animation-delay:.5s}
.tarch-etl{animation-delay:.9s}
.tarch-store{animation-delay:1.3s}
.tarch-bar{animation-delay:1.75s}
.tarch-genai{animation-delay:2.2s}
.tarch-agent{animation-delay:2.65s}
.tarch-orch{animation-delay:3.1s}

@media(prefers-reduced-motion:reduce){
  .tarch *{animation:none !important}
}
@media(max-width:820px){
  .tarch-grid{grid-template-columns:1fr}
  .tarch-flow-x{display:none}
  .tarch-connectors span{writing-mode:horizontal-tb;transform:none;font-size:.8rem}
  .tarch-connectors{padding:10px}
  .tarch-agents{justify-content:center}
  .tarch-genai-row,.tarch-mid{grid-template-columns:1fr}
  .tarch-main{padding-left:0}
  .tarch-uprail{display:none}
}
@media(max-width:600px){
  /* phone only: AI stack first; ETL below the data store; Data sources + Connectors at the bottom */
  .tarch{display:flex;flex-direction:column}
  .tarch-grid{display:contents}
  .tarch-agents{order:0}
  .tarch-main{order:1}
  .tarch-orch{order:2}
  .tarch-engine{order:3}
  .tarch-loop{order:4}
  .tarch-sources{order:5}
  .tarch-connectors{order:6}
  .tarch-store{order:1}   /* Federated Ops Data Store above... */
  .tarch-etl{order:2}     /* ...Extract + Normalize + Load */
}

/* product-link chips (home hero) */
a.chip{cursor:pointer}
a.chip:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 4px 12px rgba(44,168,199,.15);transform:translateY(-1px)}

/* home hero: product chips on a single line */
.hero-map .chips.chips-1line{display:flex;flex-wrap:nowrap;grid-template-columns:none;gap:10px}
@media(max-width:640px){.hero-map .chips.chips-1line{flex-wrap:wrap}}

/* ---- global responsive hardening (applies site-wide incl. blog articles) ---- */
p, li, td, th, h1, h2, h3, h4, h5, h6, dd, blockquote, figcaption, code { overflow-wrap: break-word; }
img, svg, video, iframe, table { max-width: 100%; }
pre, .art-body table { overflow-x: auto; }
@media (max-width: 992px){
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer .cols { grid-template-columns: 1fr; gap: 18px; }
  .container { padding: 0 16px; }
  .footer .legal { flex-direction: column; }
}
@media (max-width: 400px){
  .btn-ag, .btn-ag.btn-lg { padding: 11px 18px; font-size: .9rem; }
}