/* ============================================================
   Orckai redesign — homepage
   Self-contained. Does NOT load modern.css, so the live site is
   untouched while this is being reviewed.
   Tokens are from orckai_redesign_pack/source/design-tokens.css.
   ============================================================ */

:root {
  --navy:   #071A3A;
  --teal:   #13B7C8;
  --link-ink: #9C30B4;   /* brand purple, used for link text */
  --cyan:   #26D3E1;
  --sky:    #EAFBFE;
  --blue:   #189CE4;   /* was #2F80ED */
  /* Sampled from the logo artwork: it runs cyan -> sky blue -> purple. */
  --brand-cyan:   #18CCD8;
  --brand-blue:   #189CE4;
  --brand-purple: #9C30B4;
  --brand-navy:   #000030;
  --violet: #9C30B4;   /* was #7B61FF — not a brand colour */
  --green:  #2DBE72;
  --orange: #FF9F43;
  --bg:     #F7FBFD;
  --border: #DDEAF0;
  --text:   #060F24;   /* was #0A1733 */
  --muted:  #41506B;   /* was #5E6C84 — too light against white */
  --muted-soft: #5E6C84; /* kept for genuinely secondary marks */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px rgba(8, 28, 60, .08);
  --shadow-float: 0 24px 60px rgba(8, 28, 60, .14);

  --maxw: 1180px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Shared type ------------------------------------------------ */
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #33425c;
  margin: 0 0 .9rem;
}
.h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.lede { color: #33425c; font-size: 1.02rem; margin: 1rem 0 0; }
/* The logo's cyan -> blue -> purple sweep, on the word people read first. */
.accent {
  background: linear-gradient(100deg, #18CCD8 0%, #189CE4 42%, #9C30B4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--link-ink);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
/* Card links set color:inherit on the wrapping <a>, so state it again here
   at higher specificity to be sure the arrow keeps the brand colour. */
a .link-arrow, a.link-arrow, .link-arrow { color: var(--link-ink); }
.link-arrow:hover { border-bottom-color: var(--link-ink); }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(100deg, #13B7C8 0%, #189CE4 55%, #9C30B4 140%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(24, 156, 228, .32);
}
.btn-primary:hover {
  background: linear-gradient(100deg, #11a4b4 0%, #1589cd 45%, #8A2A9F 120%);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(156, 48, 180, .30);
}
.btn-ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: #b9d4de; transform: translateY(-1px); }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  height: 72px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--text);
}
.nav-brand img { height: 30px; width: auto; }
/* Centred in the bar rather than sitting against the wordmark. */
.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links > a,
.nav-drop > a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  opacity: .82;
}
.nav-links > a:hover,
.nav-drop > a:hover { opacity: 1; color: var(--teal); }

/* Dropdowns, matching the structure the rest of the site already uses */
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: .25rem; }
.nav-drop > a i { font-style: normal; font-size: .62rem; opacity: .6; }
.nav-menu {
  position: absolute;
  top: 100%;
  left: -.7rem;
  min-width: 300px;
  padding: .5rem;
  margin-top: .45rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(8, 28, 60, .10);
  display: grid;
  gap: .15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  padding: .5rem .55rem;
  border-radius: 7px;
  font-size: .86rem;
  text-decoration: none;
  color: var(--text);
}
.nav-menu a:hover { background: var(--bg); }

/* Menus with an icon + label + one-line description */

.nav-menu.wide.two-col { min-width: 520px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .3rem; }
.nav-menu.wide a {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: .6rem;
  padding: .5rem .55rem;
}
.nav-menu.wide a:hover { color: inherit; }
.nm-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex: none;
}
.nm-txt b { display: block; font-size: .84rem; font-weight: 600; line-height: 1.25; }
.nm-txt em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  color: #55647e;
  line-height: 1.3;
}
.nav-menu.wide a:hover .nm-txt b { color: var(--teal); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.nav-signin { font-size: .92rem; font-weight: 500; text-decoration: none; opacity: .82; }
.nav-signin:hover { opacity: 1; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 3rem 0 3.2rem;
  background:
    radial-gradient(760px 380px at 88% -6%, rgba(24, 204, 216, .46) 0%, transparent 64%),
    radial-gradient(640px 420px at 10% 10%, rgba(24, 156, 228, .26) 0%, transparent 62%),
    radial-gradient(760px 500px at 62% 112%, rgba(156, 48, 180, .30) 0%, transparent 64%),
    linear-gradient(180deg, #fcfeff 0%, #e9f5fb 100%);
  overflow: hidden;
}
/* The assistant panel is the focal point; a soft teal bloom lifts it off the
   background instead of leaving it as a white card on near-white. */
.assistant { position: relative; }
.assistant::before {
  content: "";
  position: absolute;
  inset: -18px -14px -22px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(24,204,216,.42), rgba(156,48,180,.38));
  filter: blur(26px);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.hero-h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0;
}
/* The headline is split across h1 + h2 (short H1 for SEO). Visually they are
   one sentence, so the h2 continues the line rather than starting a new block. */
.hero-h1 + h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
  color: #33425c;
  margin: .35rem 0 0;
}

.hero-sub { color: #33425c; font-size: 1.05rem; margin: 1.3rem 0 0; max-width: 42ch; }
.hero-cta { display: flex; gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-checks {
  display: flex;
  gap: 1.4rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--muted);
}
.hero-checks li { display: flex; align-items: center; gap: .42rem; }
.hero-checks svg { flex: none; color: var(--teal); }

/* Hero stage: source rail + assistant panel + value cards ----- */
.hero-stage {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 118px;
  gap: 1.1rem;
  column-gap: 1.6rem;      /* room for the connector lines */
  align-items: center;
  position: relative;
}

.src-rail { display: grid; gap: .4rem; position: relative; }

/* ---- Data-flow connectors -------------------------------------------------
   Each source stubs out to a shared vertical trunk sitting in the column gap,
   and the trunk feeds the assistant panel. Drawn with borders rather than an
   SVG so it reflows with the grid instead of needing measured coordinates. */
.src { position: relative; }
.src::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: .8rem;
  border-top: 2px dotted rgba(19, 183, 200, .55);
  pointer-events: none;
}
/* the trunk */
.src-rail::after {
  content: "";
  position: absolute;
  left: calc(100% + .8rem);
  top: 7%;
  bottom: 7%;
  border-left: 2px dotted rgba(19, 183, 200, .55);
  pointer-events: none;
}
/* trunk into the panel */
.stage-main::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: .8rem;
  border-top: 2px dotted rgba(19, 183, 200, .55);
  pointer-events: none;
}
/* the node where the trunk meets the panel */
.stage-main::before {
  content: "";
  position: absolute;
  right: calc(100% + .62rem);
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(19, 183, 200, .18);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1080px) {
  .src::after, .src-rail::after, .stage-main::after, .stage-main::before { display: none; }
}
.src {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .42rem .3rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(8, 28, 60, .05);
}
.src-ico {
  width: 22px; height: 22px;
  margin: 0 auto .22rem;
  display: grid; place-items: center;
  font-size: .95rem;
}
.src span { display: block; font-size: .62rem; font-weight: 600; color: var(--muted); line-height: 1.25; }

.assistant {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.as-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--border);
}
.as-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--sky);
  display: grid; place-items: center;
  flex: none;
}
.as-avatar img { width: 20px; height: 20px; }
.as-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.as-status { font-size: .7rem; color: var(--green); display: flex; align-items: center; gap: .3rem; }
.as-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.as-tools { margin-left: auto; color: var(--muted); font-size: .95rem; letter-spacing: .12em; }

.as-body { padding: .8rem .85rem; background: #fdfeff; }

/* Tool-calling trace — illustrative only, shows that the assistant searches
   the knowledge base and calls tools before it answers. */
.as-trace {
  border-left: 2px solid #d7e7ee;
  padding: 0 0 .05rem .55rem;
  margin: 0 0 .5rem;
  display: grid;
  gap: .22rem;
}
.tr {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .69rem;
  color: #55647e;
  line-height: 1.35;
}
.tr b { font-weight: 600; color: #33425c; }
.tr i {
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal;
  font-size: .55rem;
  font-weight: 700;
}
.tr.done i { background: #d8f5e5; color: #1a8f56; }
.tr.live { color: #0a7f8a; }
.tr.live i {
  border: 1.6px solid #9fdfe6;
  border-top-color: #0d9aa2;
  animation: tr-spin .8s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tr.live i { animation: none; }
}

/* MCP sits with the systems it fronts, but reads as its own thing */
/* MCP sits with the systems it fronts, but reads as its own thing */
.src-mcp { border-color: #ecd3f2; background: linear-gradient(180deg, #fff 0%, #fdf6fe 100%); }

/* ---- Hero mode tabs: assistant / agent / workflow ---- */
.stage-main {
  position: relative;
  /* JS measures the tallest panel and pins this precisely on load; the value
     here keeps the layout stable before that runs and if JS is unavailable. */
  min-height: 360px;
}
.stage-main [data-panel] {
  animation: panel-in .28s ease both;
  /* Column layout so the footer/input sits at the bottom of the shared height
     instead of leaving a gap under short content. */
  display: flex;
  flex-direction: column;
}
/* display:flex above would otherwise defeat the hidden attribute */
.stage-main [data-panel][hidden] { display: none; }
.stage-main [data-panel] .as-body { flex: 1 1 auto; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-main [data-panel] { animation: none; }
}
.mode-tabs {
  display: inline-flex;
  gap: .2rem;
  padding: .22rem;
  margin: 0 0 .5rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.mode-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .3rem .85rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  color: #55647e;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.mode-tab:hover { color: var(--text); }
.mode-tab.is-on {
  background: linear-gradient(100deg, #18CCD8, #189CE4 60%, #9C30B4);
  color: #fff;
  box-shadow: 0 4px 12px rgba(24, 156, 228, .34);
}

/* Agent panel bits */
.goal-line {
  font-size: .74rem;
  color: #33425c;
  background: #f4f9fb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .38rem .55rem;
  margin-bottom: .5rem;
  line-height: 1.4;
}
.goal-line span {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0a7f8a;
  margin-right: .35rem;
}
.as-trace.tall { margin-bottom: .55rem; }
.mini-result {
  border: 1px solid #cdeada;
  background: linear-gradient(140deg, #f2fbf6, #e6f7ee);
  border-radius: 8px;
  padding: .45rem .6rem;
}
.mini-result b { display: block; font-size: .78rem; color: #1a8f56; }
.mini-result span { font-size: .68rem; color: #3b4a64; }
.as-foot {
  border-top: 1px solid var(--border);
  padding: .4rem .85rem;
  font-size: .66rem;
  color: #55647e;
  background: #fbfdfe;
}

/* Workflow panel */
.wf { display: grid; gap: 0; }
.wf-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: .55rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .32rem .55rem;
  background: #fff;
}
.wf-step b { font-size: .74rem; grid-column: 2; }
.wf-step em { font-size: .64rem; color: #55647e; font-style: normal; grid-column: 2; }
.wf-ico {
  grid-row: 1 / span 2;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: .68rem;
}
.wf-step.done .wf-ico { background: #d8f5e5; color: #1a8f56; }
.wf-step.done { border-color: #cdeada; }
.wf-step.live .wf-ico { background: #d5f6fa; color: #0a7f8a; }
.wf-step.live { border-color: #a8ecf3; box-shadow: 0 0 0 3px rgba(19,183,200,.12); }
.wf-step.idle { opacity: .62; }
.wf-step.idle .wf-ico { background: #eef3f7; color: #7d8ba0; }
.wf-link {
  width: 2px; height: 7px;
  background: #cfe2ea;
  margin-left: 11px;
}
.as-row { display: flex; gap: .45rem; margin-bottom: .55rem; }
.as-row.user { justify-content: flex-end; align-items: flex-start; }
.bubble-user {
  background: var(--sky);
  border: 1px solid #cdeef4;
  border-radius: 12px 12px 4px 12px;
  padding: .5rem .8rem;
  font-size: .82rem;
}
.as-botico {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(140deg, #d5f6fa, #e7ccf0);
  flex: none; display: grid; place-items: center;
}
.as-botico img { width: 15px; height: 15px; }
.as-userico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--border); flex: none;
  display: grid; place-items: center; font-size: .7rem; color: var(--muted);
}
.bubble-bot {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  padding: .6rem .7rem;
  font-size: .82rem;
  flex: 1;
}
.bubble-bot p { margin: 0 0 .4rem; }
.src-title { font-weight: 700; font-size: .72rem; margin: .5rem 0 .25rem; }
.src-list { margin: 0; padding-left: 1.1rem; font-size: .76rem; }
.src-list li { margin-bottom: .18rem; }
.src-list a { color: var(--blue); text-decoration: none; }
.src-list a:hover { text-decoration: underline; }

.as-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text);
  cursor: default;
}
.as-input {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .7rem .85rem .85rem;
  padding: .45rem .45rem .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: .8rem;
  color: var(--muted);
}
.as-send {
  margin-left: auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: #fff;
  display: grid; place-items: center; flex: none;
  font-size: .78rem;
}

.value-rail { display: grid; gap: .55rem; margin-top: 2.2rem; }
.value {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .62rem .55rem;
  box-shadow: 0 2px 10px rgba(8, 28, 60, .05);
  text-align: center;
}
.value-ico {
  width: 26px; height: 26px; margin: 0 auto .3rem;
  border-radius: 7px; background: var(--sky);
  display: grid; place-items: center; color: var(--teal);
}
.value b { display: block; font-size: .72rem; line-height: 1.25; }
.value span { font-size: .67rem; color: var(--muted); line-height: 1.3; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { padding: 2.6rem 0; border-bottom: 1px solid var(--border); background: #fff; }
.trust-label {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.trust-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-item {
  flex: 1 1 140px;
  text-align: center;
  font-weight: 700;
  font-size: .92rem;
  color: #7d8ba0;
}
.trust-item span { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); margin-top: .2rem; }

/* Customer logos. Each mark has its own weight and colour, so they are
   desaturated to a common treatment and lift to full colour on hover —
   otherwise one bright logo dominates the row. */
.trust-row.logos { gap: 2.6rem; justify-content: center; }
.trust-logo {
  flex: 0 1 auto;
  display: grid;
  place-items: center;
  min-width: 120px;
  padding: .3rem 0;
  opacity: .8;
  filter: grayscale(.55);
  transition: opacity .2s ease, filter .2s ease;
}
.trust-logo:hover { opacity: 1; filter: grayscale(0); }
.trust-logo img {
  max-height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
/* A light-on-dark mark needs its own ground, and must not be greyscaled
   (white stays white) — the tile is what makes it legible. */
.trust-logo--ondark {
  background: var(--navy);
  border-radius: 10px;
  padding: .45rem .9rem;
  filter: none;
  opacity: .88;
}
.trust-logo--ondark:hover { filter: none; opacity: 1; }
.trust-logo--ondark img { max-height: 24px; }

@media (max-width: 820px) {
  .trust-row.logos { gap: 1.6rem 2rem; }
  .trust-logo { min-width: 96px; }
  .trust-logo img { max-height: 26px; max-width: 120px; }
  .trust-logo--ondark img { max-height: 20px; }
}

/* ============================================================
   PLATFORM  (Built for real business needs)
   ============================================================ */
.platform { padding: 5rem 0; background: #fff; }
.platform-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.card-2up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8,28,60,.11); border-color: #a9d9e2; }
.pcard-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: .9rem;
}
.pcard h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; }
.pcard p { margin: 0 0 .8rem; font-size: .87rem; color: #3b4a64; }
.ico-teal   { background: linear-gradient(140deg, #d5f6fa, #a8ecf3); color: #0a7f8a; }
.ico-blue   { background: linear-gradient(140deg, #dcf0fd, #b8dffa); color: #0F6FA8; }
.ico-violet { background: linear-gradient(140deg, #f6e2fa, #ecc7f4); color: #8A2A9F; }
.ico-green  { background: linear-gradient(140deg, #d8f5e5, #b3ebcd); color: #1a8f56; }
.ico-orange { background: linear-gradient(140deg, #ffebd2, #ffd8ac); color: #c86f12; }

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions {
  padding: 5rem 0;
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(24,204,216,.14) 0%, transparent 60%),
    radial-gradient(760px 420px at 92% 100%, rgba(156,48,180,.22) 0%, transparent 62%),
    var(--bg);
}
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.4rem;
  flex-wrap: wrap;
}
.sol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.sol {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sol:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(8,28,60,.13); }
/* A colour bar per card so the grid is not four identical white boxes */
.sol::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.sol:nth-child(1)::before { background: linear-gradient(90deg, #9C30B4, #c96fdb); }
.sol:nth-child(2)::before { background: linear-gradient(90deg, #189CE4, #7bc9f5); }
.sol:nth-child(3)::before { background: linear-gradient(90deg, #2DBE72, #7ddfa9); }
.sol:nth-child(4)::before { background: linear-gradient(90deg, #FF9F43, #ffc389); }
.sol-body { padding: 1.2rem 1.2rem .9rem; }
.sol-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: .7rem; }
.sol h3 { margin: 0 0 .3rem; font-size: .95rem; font-weight: 700; }
.sol p { margin: 0 0 .7rem; font-size: .82rem; color: #3b4a64; }
/* Each thumbnail is a small product preview rather than a flat panel — the
   concept sheet shows a screenshot behind a floating card, so the "screenshot"
   is built here in markup instead of shipping four images. */
.sol-shot {
  position: relative;
  margin: 0 1.2rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Section-specific grounds */
.shot-web {
  background:
    radial-gradient(120% 80% at 20% 0%, #ffffff 0%, transparent 60%),
    linear-gradient(160deg, #eef6fa 0%, #dfeef5 100%);
  align-items: flex-start;
}
.shot-portal { background: linear-gradient(160deg, #f2f9fb 0%, #e6f2f7 100%); }
.shot-intel  { background: linear-gradient(160deg, #f1fbf5 0%, #e4f3ec 100%); }
.shot-ops    { background: linear-gradient(160deg, #f6f8ff 0%, #eaf0fb 100%); flex-direction: column; gap: .55rem; }

/* Faux browser window behind the chat card */
.shot-browser {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 28, 60, .05);
}
.shot-bar {
  display: flex;
  gap: 4px;
  padding: 5px 7px;
  background: #f2f6f9;
  border-bottom: 1px solid var(--border);
}
.shot-bar i { width: 6px; height: 6px; border-radius: 50%; background: #cfdde5; }
.shot-page { padding: .5rem .6rem; display: grid; gap: 5px; }

/* Grey text lines used across the previews */
.ln { display: block; height: 5px; border-radius: 3px; background: #dce8ee; }
.w80 { width: 80%; } .w70 { width: 70%; } .w60 { width: 60%; }
.w55 { width: 55%; } .w45 { width: 45%; } .w35 { width: 35%; }

.shot-card.float {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  width: 72%;
}

.shot-search {
  margin-top: .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .6rem;
  font-size: .62rem;
  color: var(--muted);
  background: #fbfdfe;
}
.shot-results { display: grid; gap: 5px; margin-top: .5rem; }

.shot-spark { width: 100%; height: 22px; margin: .45rem 0 .1rem; display: block; }

.shot-flow { display: flex; align-items: center; gap: .3rem; width: 100%; }
.shot-flow .node {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .2rem;
  font-size: .6rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 6px rgba(8, 28, 60, .05);
}
.shot-flow .node.done { border-color: #9fdcbb; color: #1c8a52; background: #f2fbf6; }
.shot-flow .arr { width: 10px; height: 1px; background: #c3d6e0; flex: none; position: relative; }
.shot-flow .arr::after {
  content: "";
  position: absolute; right: -1px; top: -2px;
  border-left: 4px solid #c3d6e0;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}
.shot-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .7rem;
  width: 100%;
  box-shadow: 0 3px 10px rgba(8, 28, 60, .06);
  font-size: .7rem;
}
.shot-card b { display: block; font-size: .72rem; margin-bottom: .15rem; }
.shot-card span { color: var(--muted); }
.shot-pill {
  display: inline-block;
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .62rem;
  font-weight: 600;
  margin-top: .4rem;
  margin-right: .25rem;
}

/* ============================================================
   STATS
   ============================================================ */
/* Sits between the proof cards and the dark CTA band, so it gets its own
   breathing room rather than the negative overlap it used when it followed
   the tinted solutions band. */
.stats { background: #fff; padding: 0 0 4.5rem; }
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, #e6f9fc 0%, #dcefFB 48%, #f3ddf8 100%);
  margin: 0 auto;
  overflow: hidden;
}
.stat { padding: 1.5rem 1rem; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; }
.stat:nth-child(1) b { color: #0a8f9b; }
.stat:nth-child(2) b { color: #0F6FA8; }
.stat:nth-child(3) b { color: #6E2A9F; }
.stat:nth-child(4) b { color: #8A2A9F; }
.stat span { font-size: .8rem; color: #3b4a64; }

/* ============================================================
   PROOF  (in place of the concept's invented testimonials)
   ============================================================ */
.proof { padding: 4.5rem 0 2.6rem; background: #fff; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.proof-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
}
.proof-card b { display: block; font-size: .95rem; margin-bottom: .3rem; }
.proof-card p { margin: 0; font-size: .87rem; color: #3b4a64; }
.proof-tag {
  display: inline-block;
  background: var(--sky);
  color: #0d7f8b;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta {
  position: relative;
  background: linear-gradient(100deg, #080b33 0%, #10265c 38%, #0f5f7b 72%, #5d1c78 100%);
  color: #fff;
  padding: 3rem 0;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/redesign/backgrounds/cta-wave.svg") right center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta small { font-size: .82rem; opacity: .75; display: block; margin-bottom: .3rem; }
.cta h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.cta-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: #061529; color: #9fb2c4; padding: 3.2rem 0 2rem; font-size: .85rem; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.15rem; color: #fff; margin-bottom: .6rem; }
.foot-brand img { height: 26px; }
.foot h4 { color: #fff; font-size: .82rem; margin: 0 0 .8rem; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; }
.foot a { color: #9fb2c4; text-decoration: none; }
.foot a:hover { color: var(--cyan); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.4rem;
  flex-wrap: wrap;
  font-size: .78rem;
}
.foot-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-stage { grid-template-columns: 74px minmax(0, 1fr); }
  .value-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }
  .platform-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .nav-links, .nav-signin { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: .5rem 24px 1rem;
      transform: none; margin-left: 0;
  }
  .nav-links.open a { padding: .7rem 0; }
  .nav-links.open .nav-drop { position: static; }
  .nav-links.open .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 .3rem .8rem;
    margin: 0;
    min-width: 0;
  }
  .nav-links.open .nav-menu a { font-size: .82rem; padding: .4rem 0; }
  .nav-links.open .nav-menu.wide,
  .nav-links.open .nav-menu.wide.two-col { min-width: 0; grid-template-columns: 1fr; }
  .nav-links.open .nav-menu.wide a { grid-template-columns: 24px 1fr; gap: .5rem; padding: .38rem 0; }
  .nav-links.open .nm-ico { width: 24px; height: 24px; border-radius: 6px; }
  .nav-links.open .nm-ico svg { width: 13px; height: 13px; }
  .nav-links.open .nm-txt em { display: none; }
  .proof-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .hero { padding: 2.5rem 0 3rem; }
  .hero-stage { grid-template-columns: 1fr; }
  .src-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
  .value-rail { grid-template-columns: 1fr; }
  .card-2up, .sol-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   VIDEO MODAL
   Opened by "Watch video" in the hero. Sources are the five
   product walkthroughs that were on the previous homepage.
   ============================================================ */
.vmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; }
.vmodal[hidden] { display: none; }
.vmodal-scrim { position: absolute; inset: 0; background: rgba(6, 15, 36, .62); backdrop-filter: blur(3px); }
.vmodal-box {
  position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(6, 15, 36, .38);
  animation: panel-in .22s ease both;
}
.vmodal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem .9rem;
  border-bottom: 1px solid var(--border);
}
.vmodal-x {
  border: 1px solid var(--border); background: #fff; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; color: #55647e; flex: none;
}
.vmodal-x:hover { background: var(--bg); color: var(--text); }
.vmodal-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.1rem; padding: 1.1rem 1.3rem 1.3rem; }

.vplayer video {
  width: 100%; display: block; border-radius: var(--radius-md);
  background: #000; aspect-ratio: 16 / 9; object-fit: cover;
}
.vcap { margin-top: .7rem; }
.vcap b { display: block; font-size: .98rem; }
.vcap span { font-size: .86rem; color: #3b4a64; }

.vlist { display: grid; gap: .5rem; align-content: start; max-height: 62vh; overflow: auto; }
.vitem {
  display: grid; grid-template-columns: 76px 1fr; gap: .6rem; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: .4rem; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .16s ease, background .16s ease;
}
.vitem:hover { border-color: #a8ecf3; background: #fbfeff; }
.vitem.is-on { border-color: var(--teal); background: linear-gradient(140deg, #f2fdfe, #eaf7fc); }
.vitem img { width: 76px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.vitem span { display: block; font-size: .8rem; font-weight: 600; line-height: 1.25; }
.vitem em { display: block; font-style: normal; font-size: .68rem; font-weight: 500; color: #55647e; }

.play-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-sweep, linear-gradient(100deg, #13B7C8, #189CE4 55%, #9C30B4));
  color: #fff; display: grid; place-items: center; font-size: .55rem; flex: none;
}

@media (max-width: 860px) {
  .vmodal-body { grid-template-columns: 1fr; }
  .vlist { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}
@media (max-width: 560px) {
  .vlist { grid-template-columns: 1fr; }
}

/* ============================================================
   INNER PAGE HERO  (pricing, security, features)
   ============================================================ */
.page-hero {
  padding: 3.4rem 0 2.8rem;
  background:
    radial-gradient(700px 340px at 82% -10%, rgba(24, 204, 216, .34) 0%, transparent 62%),
    radial-gradient(620px 380px at 12% 10%, rgba(24, 156, 228, .20) 0%, transparent 60%),
    radial-gradient(680px 420px at 58% 108%, rgba(156, 48, 180, .18) 0%, transparent 62%),
    linear-gradient(180deg, #fcfeff 0%, #eaf5fb 100%);
  border-bottom: 1px solid var(--border);
}
.page-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0;
  max-width: 20ch;
}
.page-lede { color: #33425c; font-size: 1.05rem; margin: 1rem 0 0; max-width: 62ch; }

/* ============================================================
   PLANS
   ============================================================ */
.plans { padding: 3.5rem 0 3rem; background: #fff; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.plan {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan.is-pop {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--teal), 0 18px 40px rgba(8, 28, 60, .12);
  background: linear-gradient(180deg, #fbfeff 0%, #fff 42%);
}
.plan-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-sweep, linear-gradient(100deg, #13B7C8, #189CE4 55%, #9C30B4));
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.plan h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.plan-blurb { margin: 0 0 1rem; font-size: .8rem; color: #3b4a64; min-height: 2.4em; line-height: 1.4; }
.plan-price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: 1.1rem; }
.plan-price b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.plan-price span { font-size: .82rem; color: #55647e; }
.plan .btn { justify-content: center; width: 100%; }
.plan-feats { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.plan-feats li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .8rem;
  color: #3b4a64;
  line-height: 1.4;
}
.plan-feats li::before {
  content: "\2713";
  position: absolute; left: 0; top: .05em;
  color: var(--teal);
  font-weight: 700;
  font-size: .78rem;
}
.plan-note { margin: 1.4rem 0 0; font-size: .76rem; color: #55647e; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare { padding: 3.5rem 0; background: var(--bg); }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .84rem; }
.cmp th, .cmp td { padding: .62rem .9rem; text-align: center; border-bottom: 1px solid var(--border-light); }
.cmp thead th { background: #f3f9fb; font-size: .78rem; font-weight: 700; position: sticky; top: 0; }
.cmp thead th.hi { background: linear-gradient(180deg, #e6f9fc, #f3f9fb); color: #0a7f8a; }
.cmp tbody th {
  text-align: left;
  font-weight: 500;
  color: #33425c;
  white-space: nowrap;
}
.cmp tbody tr:nth-child(even) { background: #fbfdfe; }
.cmp .yes span { color: #1a8f56; font-weight: 700; }
.cmp .no span { color: #b6c2ce; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 3.5rem 0; background: #fff; }
.faq-list { display: grid; gap: .55rem; max-width: 860px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.faq-q:hover { background: #fbfdfe; }
.faq-q i {
  flex: none;
  width: 16px; height: 16px;
  position: relative;
  transition: transform .2s ease;
}
.faq-q i::before, .faq-q i::after {
  content: ""; position: absolute; background: var(--teal); border-radius: 2px;
}
.faq-q i::before { inset: 7px 1px; height: 2px; }
.faq-q i::after  { inset: 1px 7px; width: 2px; transition: opacity .2s ease; }
.faq-item.open .faq-q i::after { opacity: 0; }
.faq-a { display: none; padding: 0 1rem 1rem; }
.faq-item.open .faq-a { display: block; }
.faq-a p { margin: 0; font-size: .87rem; color: #3b4a64; line-height: 1.62; }
.faq-a a { color: var(--teal); font-weight: 600; }

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

/* ============================================================
   SECURITY PAGE
   ============================================================ */
.secdom { padding: 3rem 0; background: #fff; }
.secdom.alt { background: var(--bg); }
.secdom-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; max-width: 780px; }
.secdom-ico {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
}
.secdom-head .h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.secdom-head .lede { font-size: .95rem; margin-top: .5rem; }
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.2rem;
}
.secdom.alt .sec-card { background: #fff; }
.sec-card h3 { margin: 0 0 .45rem; font-size: .95rem; font-weight: 700; }
.sec-card p { margin: 0; font-size: .85rem; color: #3b4a64; line-height: 1.6; }

/* Deployment models */
.deploy { padding: 3.5rem 0; background: #fff; }
.dep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dep {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  background: linear-gradient(180deg, #fbfeff 0%, #fff 40%);
}
.dep-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.dep-top h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.dep-tag {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.dep-tag.ok  { background: #d8f5e5; color: #1a8f56; }
.dep-tag.ent { background: #f6e2fa; color: #8A2A9F; }
.dep p { margin: 0 0 .9rem; font-size: .85rem; color: #3b4a64; line-height: 1.58; }
.dep-spec { margin: 0; display: grid; gap: .3rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.dep-spec > div { display: flex; gap: .5rem; font-size: .74rem; }
.dep-spec dt { color: #55647e; min-width: 78px; font-family: var(--font-mono, ui-monospace, monospace); }
.dep-spec dd { margin: 0; font-weight: 600; color: #33425c; }

/* Compliance */
.compliance { padding: 3.5rem 0; background: var(--bg); }
.comp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.comp-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.2rem; }
.comp-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.comp-top b { font-size: 1rem; }
.comp-top span {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--sky); color: #0a7f8a; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.comp-card p { margin: 0; font-size: .84rem; color: #3b4a64; line-height: 1.58; }

/* Infrastructure */
.infra { padding: 3.5rem 0; background: #fff; }
.infra-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.infra-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.15rem 1.2rem; background: #fff; }
.infra-card b { display: block; font-size: .92rem; margin-bottom: .4rem; }
.infra-card p { margin: 0; font-size: .84rem; color: #3b4a64; line-height: 1.58; }

/* The security hero's check row has no icons — keep it as plain pills */
.page-hero .hero-checks { margin-top: 1.5rem; }
.page-hero .hero-checks li {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .28rem .75rem;
  font-size: .78rem;
}

@media (max-width: 1080px) {
  .sec-grid, .dep-grid, .comp-grid, .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .sec-grid, .dep-grid, .comp-grid, .infra-grid { grid-template-columns: 1fr; }
  .secdom-head { flex-direction: column; gap: .7rem; }
}

/* ============================================================
   FEATURE / SOLUTION INNER PAGES
   ============================================================ */
.sec-card-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; margin-bottom: .7rem;
}

/* Outcome strip under a solution hero */
.outcomes { background: var(--bg); border-bottom: 1px solid var(--border); }
.oc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc { padding: 1.15rem 1.2rem; border-right: 1px solid var(--border); }
.oc:last-child { border-right: 0; }
.oc b {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0a7f8a; margin-bottom: .25rem;
}
.oc span { font-size: .88rem; color: #33425c; }

/* Scenario + capability list */
.scenario { padding: 3.2rem 0; background: #fff; }
.scen-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.why {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.2rem;
  background: linear-gradient(160deg, #f2fbfd 0%, #eaf4fb 100%);
}
.why h3 { margin: 0 0 .5rem; font-size: .98rem; }
.why p { margin: 0; font-size: .87rem; color: #3b4a64; line-height: 1.6; }
.cap-list { display: grid; gap: .6rem; }
.cap {
  display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .8rem .9rem; background: #fff;
}
.cap-tick {
  width: 20px; height: 20px; border-radius: 50%;
  background: #d8f5e5; color: #1a8f56;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
}
.cap b { display: block; font-size: .88rem; }
.cap em { display: block; font-style: normal; font-size: .82rem; color: #3b4a64; margin-top: .1rem; line-height: 1.5; }

/* Numbered rollout */
.rollout { padding: 3.2rem 0; background: var(--bg); }
.rstep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rstep {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.1rem 1.15rem;
}
.rnum {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-size: .88rem; font-weight: 800; margin-bottom: .6rem;
}
.rstep b { display: block; font-size: .92rem; margin-bottom: .25rem; }
.rstep > span:last-child { font-size: .82rem; color: #3b4a64; line-height: 1.5; }

/* Differentiators */
.diffs { padding: 3.2rem 0; background: #fff; }
.diff-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.diff-list li {
  position: relative; padding: .8rem .9rem .8rem 2.2rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .87rem; color: #33425c; line-height: 1.5; background: #fff;
}
.diff-list li::before {
  content: "\2713"; position: absolute; left: .85rem; top: .78rem;
  color: var(--teal); font-weight: 700;
}

/* Related links */
.related { padding: 3.2rem 0; background: var(--bg); }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.rel-card {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .95rem 1.05rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: #a8ecf3; }
.rel-card b { display: block; font-size: .92rem; color: var(--text); }
.rel-card span { font-size: .8rem; color: #55647e; }
.rel-card::after { content: "\2192"; color: var(--teal); font-weight: 700; float: right; margin-top: -1.15rem; }

@media (max-width: 1080px) {
  .rstep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scen-grid { grid-template-columns: 1fr; }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .oc-grid { grid-template-columns: 1fr; }
  .oc { border-right: 0; border-bottom: 1px solid var(--border); }
  .rstep-grid, .diff-list, .rel-grid { grid-template-columns: 1fr; }
}

/* Social row in the footer bottom bar */
.foot-social { display: flex; gap: .5rem; }
.foot-social a {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #9fb2c4;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.foot-social a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}
@media (max-width: 620px) {
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
}