/* =========================================================
   ELEMENTAL GENESIS — LIGHT BLUE / VIOLET THEME
   Keeps the same structure and motion system, replaces the
   previous dark/orange identity across the homepage.
   ========================================================= */

:root {
  --bg: #f6f8fc;
  --panel: rgba(255,255,255,.72);
  --panel-strong: rgba(255,255,255,.92);
  --line: rgba(30,41,59,.11);
  --line-strong: rgba(30,41,59,.18);
  --ink: #12172a;
  --muted: #687386;
  --soft: #46536a;

  /* backwards-compatible names used throughout the existing CSS */
  --orange: #5b6cff;
  --orange2: #8b5cf6;

  --accent-blue: #4f7cff;
  --accent-violet: #8b5cf6;
  --accent-purple: #7357e9;
  --accent-gradient: linear-gradient(110deg, #4f7cff 0%, #675cff 42%, #8b5cf6 100%);

  --green: #12a875;
  --amber: #d89520;
  --red: #e34d62;
  --shadow: 0 30px 80px rgba(54,64,98,.12);
}

/* ---------- PAGE / BACKGROUND ---------- */
html,
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

body {
  background:
    radial-gradient(circle at 15% 4%, rgba(79,124,255,.09), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(139,92,246,.08), transparent 26%),
    #f6f8fc !important;
}

.page {
  color: var(--ink);
}

/* ---------- HEADER / NAV ---------- */
.site-header {
  background: rgba(248,250,255,.76) !important;
  border-bottom-color: rgba(30,41,59,.10) !important;
  box-shadow: 0 10px 35px rgba(63,72,108,.055);
}

.brand-mark {
  border-color: rgba(91,108,255,.22) !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--accent-gradient) border-box !important;
  box-shadow:
    0 8px 26px rgba(91,108,255,.12),
    inset 0 0 22px rgba(139,92,246,.08) !important;
}

.brand-mark:before,
.brand-mark:after,
.window-dot.hot,
.chip i {
  background: var(--accent-gradient) !important;
}

.brand-copy strong,
.command-title strong,
.panel-title,
.team-card b,
.service-card h3,
.server-head b,
.server-core strong,
.server-app b,
.channel b,
.deploy-step b,
.security-card b,
.contact-meta b,
.contact-meta a {
  color: var(--ink) !important;
}

.nav {
  color: #4e5c72 !important;
}
.nav a:hover,
.nav a.is-active {
  color: #18213a !important;
}
.nav a:after {
  background: var(--accent-gradient) !important;
}

.menu-toggle {
  border-color: var(--line) !important;
  background: rgba(255,255,255,.82) !important;
}
.menu-toggle span {
  background: #29354a !important;
}

.mobile-menu {
  background: rgba(248,250,255,.96) !important;
  border-color: rgba(30,41,59,.10) !important;
  box-shadow: 0 24px 70px rgba(54,64,98,.14) !important;
}
.mobile-menu a {
  color: #39465d !important;
  border-bottom-color: rgba(30,41,59,.08) !important;
}
.mobile-menu a:last-child {
  color: #675cff !important;
}

/* ---------- TYPOGRAPHY / ACCENT ---------- */
.accent,
.eyebrow,
.tiny-label,
.service-index,
.router-row em,
.model-output strong,
.mini-icon,
.feature-item i,
.deploy-step span,
.crm-line {
  background: var(--accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.eyebrow:before {
  background: var(--accent-gradient) !important;
}

.hero-lead,
.founder-copy blockquote {
  color: #263149 !important;
}
.hero-lead strong,
.hero-body strong[style] {
  color: #12172a !important;
}
.hero-body,
.panel-copy,
.section-head p,
.founder-copy p,
.contact-card p,
.feature-item p,
.team-card p,
.service-card p,
.deploy-step p,
.security-card p,
.specialised-card p {
  color: var(--muted) !important;
}

.hero h1 .muted-word {
  color: #8390a5 !important;
}

/* ---------- BUTTONS ---------- */
.btn {
  border-color: var(--line-strong) !important;
  background: rgba(255,255,255,.72) !important;
  color: #202a42 !important;
  box-shadow: 0 9px 24px rgba(56,65,101,.07);
}
.btn:hover {
  border-color: rgba(91,108,255,.30) !important;
  background: #fff !important;
}
.btn-primary {
  background: var(--accent-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    0 16px 36px rgba(79,124,255,.19),
    0 8px 24px rgba(139,92,246,.13) !important;
}
.btn-ghost {
  background: rgba(255,255,255,.58) !important;
}

/* ---------- GLASS / PANELS ---------- */
.glass {
  border-color: rgba(30,41,59,.105) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,255,.72)) !important;
  box-shadow:
    0 26px 70px rgba(62,72,111,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.glass:hover {
  border-color: rgba(91,108,255,.22) !important;
}

.chip,
.company-top,
.dept-node,
.agent-node,
.arch-dept,
.team-card,
.policy-person i,
.llm-logo,
.router-row,
.server-app,
.channel,
.tool-logo,
.sector-chips span {
  background: rgba(255,255,255,.64) !important;
  border-color: var(--line) !important;
}

.chip {
  color: #536176 !important;
}

.human-badge,
.multi-agent-note {
  color: #526075 !important;
  border-color: var(--line) !important;
  background: rgba(255,255,255,.50) !important;
}

/* ---------- CCC PREVIEW ---------- */
.ccc-shell {
  border-color: rgba(30,41,59,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.93), rgba(245,248,255,.82)) !important;
  box-shadow:
    0 32px 90px rgba(58,69,111,.13),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.ccc-shell:before {
  background:
    radial-gradient(circle at 68% 0%, rgba(79,124,255,.13), transparent 35%),
    radial-gradient(circle at 94% 34%, rgba(139,92,246,.08), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,.9), transparent 35%) !important;
}

.window-bar {
  border-bottom-color: var(--line) !important;
  color: #78859a !important;
}
.window-dot {
  background: #c6cedb !important;
}
.window-status {
  color: #657287 !important;
}

.status-pill {
  color: #087950 !important;
  background: rgba(18,168,117,.075) !important;
  border-color: rgba(18,168,117,.22) !important;
}

.company-top small,
.dept-node span,
.command-title span,
.arch-top span,
.team-lead div span,
.server-head span,
.server-app span,
.server-data span,
.channel span,
.policy-person span,
.router-row span {
  color: #748197 !important;
}

.dept-node.active,
.arch-dept.active,
.llm-logo:hover,
.llm-logo.active,
.model-btn.active {
  border-color: rgba(91,108,255,.30) !important;
  background:
    linear-gradient(135deg, rgba(79,124,255,.09), rgba(139,92,246,.07)) !important;
  box-shadow: inset 0 0 24px rgba(91,108,255,.035) !important;
}

.agent-node:before,
.team-avatar {
  background: linear-gradient(135deg, rgba(79,124,255,.14), rgba(139,92,246,.15)) !important;
  color: #6657df !important;
}

.route-line {
  background: linear-gradient(90deg, transparent, #5d6cff, #8b5cf6, transparent) !important;
}

.model-dock {
  background: rgba(241,245,252,.80) !important;
  border-color: var(--line) !important;
}
.model-dock-head {
  color: #758399 !important;
}
.model-btn {
  background: rgba(255,255,255,.74) !important;
  border-color: var(--line) !important;
  color: #66748a !important;
}
.model-btn.active {
  color: #28324a !important;
}
.model-output {
  color: #536176 !important;
}

/* ---------- TRUST RAIL ---------- */
.trust-rail {
  background: rgba(244,247,252,.62) !important;
  border-color: var(--line) !important;
}
.trust-item {
  border-color: var(--line) !important;
}

/* ---------- GOVERNANCE ---------- */
.policy-head {
  color: #748198 !important;
}
.policy-row {
  border-top-color: var(--line) !important;
}
.policy-scope {
  color: #57657b !important;
}
.auto {
  color: #087950 !important;
  background: rgba(18,168,117,.07) !important;
  border-color: rgba(18,168,117,.20) !important;
}
.approval {
  color: #a36708 !important;
  background: rgba(216,149,32,.075) !important;
  border-color: rgba(216,149,32,.21) !important;
}
.blocked {
  color: #c6354c !important;
  background: rgba(227,77,98,.07) !important;
  border-color: rgba(227,77,98,.19) !important;
}

.passport-card {
  border-color: rgba(91,108,255,.22) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,92,246,.10), transparent 42%),
    linear-gradient(145deg, rgba(79,124,255,.05), rgba(255,255,255,.72)) !important;
}
.passport-card .passport-id,
.passport-list span,
.passport-footer {
  color: #6e7b91 !important;
}
.passport-list b {
  color: #253049 !important;
}

/* ---------- MULTI LLM / ERP ---------- */
.llm-logo img,
.tool-logo img {
  filter: saturate(.95) contrast(.98) !important;
}
.llm-logo.dark img,
.tool-logo.dark img {
  filter: none !important;
}

.router-status {
  color: #147452 !important;
  background: rgba(18,168,117,.055) !important;
  border-color: rgba(18,168,117,.16) !important;
}

/* ---------- MEDIA ---------- */
.media-frame,
.hero-film-frame,
.ccc-motion-frame,
.leads-motion-frame,
.vps-full-video {
  border-color: rgba(30,41,59,.10) !important;
  background: #fff !important;
  box-shadow:
    0 28px 70px rgba(57,67,105,.10),
    0 0 0 1px rgba(255,255,255,.85) inset !important;
}

.media-frame:after {
  box-shadow: inset 0 0 0 1px rgba(30,41,59,.035) !important;
}

.media-caption {
  border-color: rgba(30,41,59,.10) !important;
  background: rgba(255,255,255,.86) !important;
  color: #273149 !important;
  box-shadow: 0 10px 28px rgba(54,64,98,.08);
}
.media-caption span:last-child {
  color: #718096 !important;
}

/* Video itself stays neutral/black where its native frame contains black */
.media-frame video,
.hero-film-video,
.ccc-motion-video,
.leads-motion-frame video,
.vps-full-video video {
  background: #eef1f7 !important;
}

/* ---------- VPS / SERVER ---------- */
.server {
  border-color: rgba(91,108,255,.22) !important;
  background:
    linear-gradient(135deg, rgba(79,124,255,.055), rgba(139,92,246,.045)) !important;
}
.server-core {
  border-color: rgba(91,108,255,.27) !important;
  background:
    linear-gradient(135deg, rgba(79,124,255,.10), rgba(139,92,246,.085)) !important;
}
.server-core span {
  color: #5f6d84 !important;
}
.server-data span {
  color: #68768c !important;
}

/* ---------- SERVICES / COMMS ---------- */
.service-card:before {
  background:
    radial-gradient(circle, rgba(79,124,255,.12), rgba(139,92,246,.07) 38%, transparent 68%) !important;
}

.crm-line {
  border-color: rgba(91,108,255,.20) !important;
  background: linear-gradient(135deg, rgba(79,124,255,.07), rgba(139,92,246,.06)) !important;
}

/* ---------- CONTACT / FOUNDER ---------- */
.founder-photo:after {
  background: linear-gradient(180deg, transparent 55%, rgba(241,244,251,.68)) !important;
}

.contact-card {
  border-color: rgba(91,108,255,.20) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(139,92,246,.12), transparent 31%),
    radial-gradient(circle at 10% 100%, rgba(79,124,255,.08), transparent 28%),
    rgba(255,255,255,.78) !important;
  box-shadow: 0 32px 90px rgba(57,67,105,.10) !important;
}
.contact-card p {
  color: #627086 !important;
}
.contact-meta {
  color: #28324a !important;
}
.contact-meta div {
  border-top-color: var(--line) !important;
}
.contact-meta span {
  color: #7a879b !important;
}

/* ---------- FOOTER ---------- */
.footer {
  color: #718096 !important;
}
.footer-inner {
  border-top-color: var(--line) !important;
}

/* ---------- SCROLL / FRAMER MOTION UI ---------- */
.scroll-progress {
  background: rgba(34,43,68,.055) !important;
}
.scroll-progress > i {
  background: linear-gradient(90deg, #4f7cff, #675cff 46%, #8b5cf6 82%, #b79cff) !important;
  box-shadow: 0 0 18px rgba(103,92,255,.30) !important;
}

.scroll-rail {
  border-color: rgba(30,41,59,.10) !important;
  background: rgba(250,251,255,.76) !important;
  box-shadow: 0 18px 48px rgba(58,68,105,.10) !important;
}
.scroll-rail button::before {
  background: #a0aabd !important;
}
.scroll-rail button:hover::before {
  background: #59677f !important;
}
.scroll-rail button.is-active::before {
  background: var(--accent-gradient) !important;
  box-shadow:
    0 0 0 4px rgba(91,108,255,.09),
    0 0 20px rgba(139,92,246,.28) !important;
}
.scroll-rail button span {
  border-color: rgba(30,41,59,.10) !important;
  background: rgba(255,255,255,.96) !important;
  color: #4d5a70 !important;
  box-shadow: 0 10px 26px rgba(54,64,98,.10);
}

.scroll-status {
  color: #7b879a !important;
}
.scroll-status i {
  background: var(--accent-gradient) !important;
  box-shadow: 0 0 13px rgba(103,92,255,.38) !important;
}
.scroll-status b {
  color: #28324a !important;
}

.motion-section::after {
  background:
    radial-gradient(circle, rgba(79,124,255,.075), rgba(139,92,246,.042) 34%, transparent 68%) !important;
}
.motion-section-number {
  color: rgba(35,46,76,.035) !important;
}
.motion-card::after {
  background:
    radial-gradient(360px circle at var(--card-x,50%) var(--card-y,50%),
      rgba(79,124,255,.075), rgba(139,92,246,.04) 38%, transparent 52%) !important;
}
.hero::after {
  background:
    radial-gradient(circle, rgba(79,124,255,.10), rgba(139,92,246,.055) 32%, transparent 64%) !important;
}
.motion-section.is-current .glass {
  border-color: rgba(91,108,255,.18) !important;
}
.motion-section.is-current .section-head .eyebrow {
  text-shadow: none !important;
}

.scroll-hint {
  color: #8995a8 !important;
}
.scroll-hint i {
  background: rgba(30,41,59,.11) !important;
}
.scroll-hint i::after {
  background: var(--accent-gradient) !important;
}

/* ---------- MISC HARD-CODED DARK TEXT FIXES ---------- */
.window-status,
.agent-node span,
.arch-dept span,
.team-lead div span,
.policy-person span,
.server-head span,
.server-app span,
.channel span,
.service-tags span,
.sector-chips span,
.passport-footer,
.passport-list span,
.contact-meta span {
  color: #718096 !important;
}

.service-tags span,
.sector-chips span,
.server-data span {
  border-color: var(--line) !important;
  background: rgba(255,255,255,.54) !important;
}

.hairline,
.deploy-step {
  border-color: var(--line) !important;
}
.hairline {
  background: var(--line) !important;
}

.route-line,
.eyebrow:before {
  box-shadow: 0 0 14px rgba(103,92,255,.12);
}

/* Keep accessibility/status semantics green/amber/red rather than recoloring them */
.window-status i,
.multi-agent-note i {
  background: var(--green) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  .site-header {
    background: rgba(248,250,255,.91) !important;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  #constellation-grid {
    opacity: .52 !important;
  }
}

/* =========================================================
   ULTRA-THIN TRANSPARENT NAV + COMPACT OPENING FILM
   ========================================================= */
.site-header {
  background: rgba(246,248,252,.16) !important;
  border-bottom: 1px solid rgba(30,41,59,.055) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}
.header-inner {
  width: min(1320px, calc(100% - 28px)) !important;
  min-height: 48px !important;
  gap: 13px !important;
}
.brand {
  gap: 7px !important;
  margin-right: auto;
}
.brand-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 5px;
  flex: 0 0 auto;
}
.brand-copy strong {
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
}
.brand-copy span {
  margin-top: 3px !important;
  font-size: 6.5px !important;
  letter-spacing: .13em !important;
}
.nav {
  gap: 14px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
  white-space: nowrap;
}
.nav a {
  padding: 7px 0 !important;
}
.nav a:after {
  bottom: 3px !important;
  height: 1px !important;
}
.header-inner > .btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 8px !important;
}
.scroll-status {
  gap: 5px !important;
  font-size: 6.5px !important;
  letter-spacing: .075em !important;
  white-space: nowrap;
}
.scroll-status i {
  width: 4px !important;
  height: 4px !important;
}
.scroll-status span {
  opacity: .52;
}
.scroll-status b {
  font-size: 7px !important;
  font-weight: 700 !important;
}

/* Opening film: compact cinematic frame instead of near full-screen */
#genesis-film.hero-film-section {
  padding: 20px 0 28px !important;
}
#genesis-film .wrap {
  width: min(980px, calc(100% - 40px)) !important;
}
#genesis-film .hero-film-frame {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
}
#genesis-film .hero-film-video {
  width: 100% !important;
  height: auto !important;
  max-height: 56vh !important;
  object-fit: contain !important;
}

@media (max-width: 1100px) {
  .header-inner { min-height: 46px !important; }
  .brand-logo { width: 28px; height: 28px; }
}
@media (max-width: 760px) {
  .site-header {
    background: rgba(246,248,252,.42) !important;
  }
  .header-inner {
    width: calc(100% - 18px) !important;
    min-height: 44px !important;
  }
  .brand-logo { width: 27px; height: 27px; }
  .brand-copy strong { font-size: 8px !important; }
  .brand-copy span { font-size: 6px !important; }
  .menu-toggle {
    width: 32px !important;
    height: 30px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }
  #genesis-film.hero-film-section { padding: 12px 0 18px !important; }
  #genesis-film .wrap { width: calc(100% - 18px) !important; }
  #genesis-film .hero-film-frame { border-radius: 14px !important; }
  #genesis-film .hero-film-video { max-height: 48vh !important; }
}

/* Opening film resize — larger, exact natural video ratio */
#genesis-film.hero-film-section {
  padding: 18px 0 32px !important;
}
#genesis-film .wrap {
  width: min(1240px, calc(100% - 32px)) !important;
}
#genesis-film .hero-film-frame {
  display: block !important;
  width: 100% !important;
  max-width: 1240px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
#genesis-film .hero-film-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
}
@media(max-width:760px) {
  #genesis-film.hero-film-section { padding: 10px 0 20px !important; }
  #genesis-film .wrap { width: calc(100% - 16px) !important; }
  #genesis-film .hero-film-frame { border-radius: 15px !important; }
}

/* AI Company scale statement emphasis */
.ai-scale-copy {
  display: inline;
  color: #536176;
  font-weight: 500;
}
.ai-scale-highlight {
  font-weight: 800;
  background: linear-gradient(110deg, #4f7cff 0%, #675cff 44%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #675cff;
}
.ai-scale-strong {
  font-weight: 700;
  color: #263149;
}

/* =========================================================
   CONTROL COMMAND CENTER — SOFT BRAND-BOARD FRAME
   Inspired by the supplied Urbanist / blue-mint reference.
   ========================================================= */
.hero-grid .ccc-shell.ccc-soft-card {
  font-family: "Urbanist", Inter, sans-serif !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  border: 1px solid rgba(27,64,91,.12) !important;
  background: linear-gradient(180deg, #1B405B 0%, #315E7B 56%, #6F91A2 100%) !important;
  box-shadow: 0 34px 90px rgba(27,64,91,.17) !important;
  backdrop-filter: none !important;
}
.hero-grid .ccc-shell.ccc-soft-card::before { display: none !important; }

.ccc-soft-top {
  min-height: 68px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}
.ccc-soft-brandline,
.ccc-soft-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ccc-soft-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #DFF3EB;
  box-shadow: 0 0 0 5px rgba(223,243,235,.10);
  flex: 0 0 auto;
}
.ccc-soft-mini {
  font-size: 10.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .055em;
  color: rgba(255,255,255,.96);
}
.ccc-soft-state {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.76);
}
.ccc-soft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
.ccc-soft-badge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A9E7C7;
  box-shadow: 0 0 10px rgba(169,231,199,.7);
}

.ccc-soft-inner {
  margin: 0 16px 16px;
  padding: 30px;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(180deg, #DFF3EB 0%, #EEF7F4 38%, #F9FBFA 100%) !important;
  border: 1px solid rgba(255,255,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 38px rgba(27,64,91,.10);
}
.ccc-soft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.ccc-soft-kicker {
  margin: 0 0 7px;
  color: #526A77;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.ccc-soft-head h3 {
  margin: 0;
  max-width: 520px;
  color: #101C26 !important;
  font-family: "Urbanist", Inter, sans-serif !important;
  font-size: clamp(26px, 2.55vw, 38px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.045em;
}
.ccc-soft-live {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(27,64,91,.10);
  background: rgba(255,255,255,.72);
  color: #1B405B;
  box-shadow: 0 8px 20px rgba(27,64,91,.05);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
}

.ccc-soft-mode {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(27,64,91,.075);
}
.ccc-soft-mode strong,
.ccc-soft-mode span,
.ccc-soft-mode small { display: block; }
.ccc-soft-mode strong {
  color: #17384F;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .055em;
}
.ccc-soft-mode span {
  margin-top: 4px;
  color: #657D8A;
  font-size: 8.5px;
}
.ccc-soft-mode small {
  color: #718792;
  font-size: 8px;
  white-space: nowrap;
}

.ccc-soft-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.ccc-soft-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ccc-soft-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ccc-soft-pill {
  min-width: 0;
  padding: 14px 13px;
  border-radius: 17px;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(27,64,91,.07) !important;
  box-shadow: 0 8px 22px rgba(27,64,91,.045);
}
.ccc-soft-pill-active {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(223,243,235,.86)) !important;
  border-color: rgba(27,64,91,.13) !important;
}
.ccc-soft-pill strong {
  display: block;
  color: #17384F !important;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
}
.ccc-soft-pill span {
  display: block;
  margin-top: 5px;
  color: #69808C !important;
  font-size: 7.7px;
  line-height: 1.35;
}

.ccc-soft-switch {
  margin-top: 15px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(27,64,91,.075) !important;
}
.ccc-soft-switch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.ccc-soft-switch-head strong {
  color: #17384F !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
}
.ccc-soft-switch-head span {
  color: #748A95 !important;
  font-size: 8px;
}
.ccc-soft-models.model-buttons {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
}
.ccc-soft-models .model-btn {
  min-width: 0;
  min-height: 33px;
  padding: 0 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(27,64,91,.08) !important;
  background: rgba(255,255,255,.78) !important;
  color: #536B78 !important;
  box-shadow: none !important;
  font-family: "Urbanist", Inter, sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}
.ccc-soft-models .model-btn.active {
  border-color: #1B405B !important;
  background: #1B405B !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(27,64,91,.17) !important;
}
.ccc-soft-route {
  margin: 0;
  color: #687F8B;
  font-size: 8px;
  line-height: 1.45;
}
.ccc-soft-route strong { color: #17384F !important; font-weight: 800; }

@media(max-width:1100px) {
  .hero-grid .ccc-shell.ccc-soft-card { max-width: 860px; }
}
@media(max-width:760px) {
  .hero-grid .ccc-shell.ccc-soft-card { border-radius: 24px !important; }
  .ccc-soft-top {
    min-height: 58px;
    padding: 12px 16px;
    align-items: flex-start;
  }
  .ccc-soft-top-right { gap: 6px; }
  .ccc-soft-state { display: none; }
  .ccc-soft-inner {
    margin: 0 9px 9px;
    padding: 20px 16px;
    border-radius: 20px !important;
  }
  .ccc-soft-head { flex-direction: column; margin-bottom: 18px; }
  .ccc-soft-head h3 { font-size: 28px; max-width: 100%; }
  .ccc-soft-mode { align-items: flex-start; flex-direction: column; }
  .ccc-soft-grid-3,
  .ccc-soft-grid-4 { grid-template-columns: 1fr 1fr; }
  .ccc-soft-models.model-buttons { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media(max-width:460px) {
  .ccc-soft-grid-3,
  .ccc-soft-grid-4 { grid-template-columns: 1fr; }
}

/* =========================================================
   SOFT BRAND-BOARD SYSTEM — HOMEPAGE CONTENT UNIFICATION
   Reference language: Urbanist + #1B405B + #DFF3EB + white
   ========================================================= */
:root {
  --soft-navy: #1B405B;
  --soft-navy-2: #315E7B;
  --soft-mint: #DFF3EB;
  --soft-mint-2: #EEF7F4;
  --soft-ink: #17384F;
  --soft-muted: #667E8B;
  --soft-white: rgba(255,255,255,.76);
}

/* Typography shared by the redesigned product surfaces */
.trust-grid,
#ccc .bento,
#company .company-architecture,
#company .team-example,
#governance .governance-grid,
#models .llm-stage,
#models .tool-rail,
#erp .erp-copy,
#ecosystem .vps-map,
#services .services-grid,
#sectors .sector-panel,
#sectors .specialised-grid,
#communications .channel-stack,
#agents .agent-copy,
#sentinel .panel-pad,
#deployment .deployment-copy,
.founder-copy,
.contact-card {
  font-family: "Urbanist", Inter, sans-serif !important;
}

/* Common premium surface */
#ccc .bento .glass,
#company .company-architecture,
#company .team-example,
#governance .policy-table,
#governance .passport,
#models .llm-copy,
#models .llm-router,
#erp .erp-copy,
#ecosystem .vps-map,
#services .service-card,
#sectors .sector-panel,
#sectors .specialised-card,
#communications .channel-stack,
#agents .agent-copy,
#sentinel .panel-pad,
#deployment .deployment-copy,
.founder-copy {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(27,64,91,.09) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(180deg, var(--soft-mint) 0%, var(--soft-mint-2) 44%, #FAFCFB 100%) !important;
  box-shadow:
    0 24px 62px rgba(27,64,91,.085),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Slim navy cap keeps the reference-image DNA across panels */
#ccc .bento .glass::before,
#company .company-architecture::before,
#company .team-example::before,
#governance .policy-table::before,
#governance .passport::before,
#models .llm-copy::before,
#models .llm-router::before,
#erp .erp-copy::before,
#ecosystem .vps-map::before,
#services .service-card::before,
#sectors .sector-panel::before,
#sectors .specialised-card::before,
#communications .channel-stack::before,
#agents .agent-copy::before,
#sentinel .panel-pad::before,
#deployment .deployment-copy::before,
.founder-copy::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 7px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--soft-navy), var(--soft-navy-2)) !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* Global headings / labels inside soft surfaces */
#ccc .bento .panel-title,
#company .company-architecture strong,
#company .team-example strong,
#governance .panel-title,
#models .panel-title,
#erp .panel-title,
#ecosystem .panel-title,
#services .service-card h3,
#sectors .panel-title,
#sectors .specialised-card h3,
#communications .panel-title,
#agents .panel-title,
#sentinel .panel-title,
#deployment .panel-title,
.founder-copy blockquote {
  color: var(--soft-ink) !important;
  font-family: "Urbanist", Inter, sans-serif !important;
}

#ccc .bento .tiny-label,
#company .tiny-label,
#governance .tiny-label,
#models .tiny-label,
#erp .tiny-label,
#ecosystem .tiny-label,
#services .service-index,
#sectors .tiny-label,
#communications .tiny-label,
#agents .tiny-label,
#sentinel .tiny-label,
#deployment .tiny-label,
.founder-copy .tiny-label {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: var(--soft-navy) !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

/* ---------------------------------------------------------
   TRUST RAIL — ID / MEM / LOG / LLM / VPS
   --------------------------------------------------------- */
.trust-rail {
  background: transparent !important;
  border-color: rgba(27,64,91,.07) !important;
}
.trust-grid {
  gap: 10px;
  padding: 12px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--soft-navy), var(--soft-navy-2));
  box-shadow: 0 26px 70px rgba(27,64,91,.13);
}
.trust-item,
.trust-item:nth-child(n) {
  min-height: 150px;
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 21px !important;
  background: linear-gradient(180deg, var(--soft-mint), #F8FBFA) !important;
  color: var(--soft-ink) !important;
}
.trust-item .mini-icon {
  width: 34px;
  height: 34px;
  border: 0 !important;
  border-radius: 12px;
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(27,64,91,.16);
  font-size: 8px;
}
.trust-item b {
  color: var(--soft-ink) !important;
  font-size: 13px;
  font-weight: 800;
}
.trust-item > span:last-child {
  color: var(--soft-muted) !important;
  font-size: 9px;
  line-height: 1.55;
}

/* ---------------------------------------------------------
   CCC BENTO
   --------------------------------------------------------- */
#ccc .bento { gap: 14px; }
#ccc .bento .glass { padding-top: 32px; }
#ccc .bento .panel-copy { color: var(--soft-muted) !important; }
#ccc .bento .metric { color: var(--soft-navy) !important; }
#ccc .bento .chip {
  background: rgba(255,255,255,.72) !important;
  color: var(--soft-ink) !important;
  border-color: rgba(27,64,91,.08) !important;
}

/* ---------------------------------------------------------
   AI COMPANY MAP + DEPARTMENT TEAM
   --------------------------------------------------------- */
#company .company-architecture,
#company .team-example { padding-top: 31px !important; }
#company .arch-top {
  border-bottom-color: rgba(27,64,91,.10) !important;
}
#company .arch-top span,
#company .team-lead div span { color: var(--soft-muted) !important; }
#company .arch-dept,
#company .team-card {
  border: 1px solid rgba(27,64,91,.075) !important;
  background: rgba(255,255,255,.66) !important;
  border-radius: 17px !important;
  box-shadow: 0 8px 22px rgba(27,64,91,.035);
}
#company .arch-dept.active {
  background: var(--soft-navy) !important;
  border-color: var(--soft-navy) !important;
}
#company .arch-dept.active b,
#company .arch-dept.active span { color: #fff !important; }
#company .team-avatar {
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 11px !important;
}
#company .team-card p { color: var(--soft-muted) !important; }
#company .human-badge,
#company .multi-agent-note {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(27,64,91,.08) !important;
  color: var(--soft-ink) !important;
}

/* ---------------------------------------------------------
   GOVERNANCE / MCP PASSPORT
   --------------------------------------------------------- */
#governance .policy-table,
#governance .passport { padding-top: 32px !important; }
#governance .policy-head { color: #6C8390 !important; }
#governance .policy-row {
  margin-top: 7px;
  min-height: 64px;
  border: 1px solid rgba(27,64,91,.06) !important;
  border-radius: 16px;
  background: rgba(255,255,255,.58);
}
#governance .policy-person i {
  background: var(--soft-navy) !important;
  color: #fff !important;
}
#governance .policy-person b { color: var(--soft-ink) !important; }
#governance .policy-scope,
#governance .policy-person span { color: var(--soft-muted) !important; }
#governance .passport-card {
  border-color: rgba(27,64,91,.09) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 10px 28px rgba(27,64,91,.045);
}
#governance .passport-card h4,
#governance .passport-list b { color: var(--soft-ink) !important; }
#governance .passport-list span,
#governance .passport-footer,
#governance .passport-id { color: var(--soft-muted) !important; }

/* ---------------------------------------------------------
   MULTI MODEL + TOOL RAIL
   --------------------------------------------------------- */
#models .llm-copy,
#models .llm-router { padding-top: 34px !important; }
#models .panel-copy,
#models .router-row span { color: var(--soft-muted) !important; }
#models .llm-logo,
#models .router-row {
  border-color: rgba(27,64,91,.07) !important;
  background: rgba(255,255,255,.70) !important;
  border-radius: 16px !important;
}
#models .llm-logo:hover,
#models .llm-logo.active {
  border-color: var(--soft-navy) !important;
  background: rgba(223,243,235,.90) !important;
  box-shadow: 0 8px 18px rgba(27,64,91,.07) !important;
}
#models .router-row b { color: var(--soft-ink) !important; }
#models .router-row em {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: var(--soft-navy) !important;
}
#models .tool-rail {
  padding: 12px;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--soft-navy), var(--soft-navy-2));
  box-shadow: 0 20px 55px rgba(27,64,91,.12);
}
#models .tool-logo {
  min-height: 70px;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.92) !important;
}

/* ---------------------------------------------------------
   ERP
   --------------------------------------------------------- */
#erp .erp-copy { padding-top: 36px !important; }
#erp .erp-copy .panel-copy,
#erp .feature-item p { color: var(--soft-muted) !important; }
#erp .feature-item {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(27,64,91,.06);
}
#erp .feature-item i {
  border: 0 !important;
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#erp .feature-item b { color: var(--soft-ink) !important; }

/* ---------------------------------------------------------
   VPS / PRIVATE CLOUD
   --------------------------------------------------------- */
#ecosystem .vps-map { padding-top: 37px !important; }
#ecosystem .server {
  border-color: rgba(27,64,91,.10) !important;
  background: rgba(255,255,255,.58) !important;
}
#ecosystem .server-core {
  border: 0 !important;
  background: linear-gradient(135deg, var(--soft-navy), var(--soft-navy-2)) !important;
  box-shadow: 0 12px 28px rgba(27,64,91,.12);
}
#ecosystem .server-core strong,
#ecosystem .server-core span { color: #fff !important; }
#ecosystem .server-app {
  border-color: rgba(27,64,91,.07) !important;
  background: rgba(255,255,255,.75) !important;
  border-radius: 14px !important;
}
#ecosystem .server-data span {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(27,64,91,.07) !important;
  color: var(--soft-ink) !important;
}

/* ---------------------------------------------------------
   SERVICES GRID
   --------------------------------------------------------- */
#services .services-grid { gap: 14px; }
#services .service-card {
  min-height: 255px;
  padding-top: 34px !important;
}
#services .service-index {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#services .service-card h3 { margin-top: 38px !important; }
#services .service-card p { color: var(--soft-muted) !important; }
#services .service-tags span {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(27,64,91,.07) !important;
  color: var(--soft-ink) !important;
}

/* ---------------------------------------------------------
   SECTOR BUSINESS CONTEXTS
   --------------------------------------------------------- */
#sectors .sector-panel,
#sectors .specialised-card { padding-top: 34px !important; }
#sectors .sector-panel .panel-copy,
#sectors .specialised-card p { color: var(--soft-muted) !important; }
#sectors .sector-chips span {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(27,64,91,.07) !important;
  color: var(--soft-ink) !important;
}
#sectors .specialised-card > div { padding-top: 28px !important; }

/* ---------------------------------------------------------
   360 COMMUNICATION
   --------------------------------------------------------- */
#communications .channel-stack { padding-top: 36px !important; }
#communications .channel {
  border-color: rgba(27,64,91,.07) !important;
  background: rgba(255,255,255,.74) !important;
  border-radius: 16px !important;
}
#communications .channel b { color: var(--soft-ink) !important; }
#communications .channel span { color: var(--soft-muted) !important; }
#communications .crm-line {
  border: 0 !important;
  background: linear-gradient(90deg, var(--soft-navy), var(--soft-navy-2)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 10px 24px rgba(27,64,91,.13);
}

/* ---------------------------------------------------------
   INTERNAL AGENT TEAM
   --------------------------------------------------------- */
#agents .agent-copy { padding-top: 36px !important; }
#agents .agent-copy li { color: var(--soft-muted) !important; }
#agents .agent-copy li::before { color: var(--soft-navy) !important; }

/* ---------------------------------------------------------
   SENTINEL
   --------------------------------------------------------- */
#sentinel .panel-pad { padding-top: 36px !important; }
#sentinel .panel-copy,
#sentinel .feature-item p { color: var(--soft-muted) !important; }
#sentinel .feature-item {
  padding: 10px;
  border-radius: 15px;
  background: rgba(255,255,255,.58);
}
#sentinel .feature-item i {
  border: 0 !important;
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#sentinel .feature-item b { color: var(--soft-ink) !important; }

/* ---------------------------------------------------------
   DEPLOYMENT / ROLLOUT
   --------------------------------------------------------- */
#deployment .deployment-copy { padding-top: 36px !important; }
#deployment .deploy-step {
  padding: 12px !important;
  border: 1px solid rgba(27,64,91,.06) !important;
  border-radius: 15px;
  background: rgba(255,255,255,.58);
}
#deployment .deploy-step span {
  border: 0 !important;
  background: var(--soft-navy) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#deployment .deploy-step b { color: var(--soft-ink) !important; }
#deployment .deploy-step p { color: var(--soft-muted) !important; }

/* ---------------------------------------------------------
   FOUNDER / ELEMENTAL GENESIS
   --------------------------------------------------------- */
.founder-copy { padding-top: 42px !important; }
.founder-copy blockquote {
  font-weight: 500 !important;
  line-height: 1.08 !important;
}
.founder-copy p { color: var(--soft-muted) !important; }
.founder-copy .chip {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(27,64,91,.07) !important;
  color: var(--soft-ink) !important;
}
.founder-photo {
  border-radius: 28px !important;
  border: 1px solid rgba(27,64,91,.09) !important;
  box-shadow: 0 24px 62px rgba(27,64,91,.085) !important;
}

/* ---------------------------------------------------------
   CONTACT / BUILD THE FIRST DEPARTMENT
   --------------------------------------------------------- */
.contact-card {
  border: 1px solid rgba(27,64,91,.10) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(180deg, var(--soft-mint), var(--soft-mint-2) 46%, #FBFCFC 100%) !important;
  box-shadow: 0 30px 78px rgba(27,64,91,.10) !important;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: linear-gradient(90deg, var(--soft-navy), var(--soft-navy-2));
}
.contact-card h2 { color: var(--soft-ink) !important; }
.contact-card p { color: var(--soft-muted) !important; }
.contact-card .contact-meta div {
  padding: 15px 14px;
  border: 1px solid rgba(27,64,91,.07) !important;
  border-radius: 15px;
  background: rgba(255,255,255,.58);
}
.contact-card .contact-meta span { color: #738995 !important; }
.contact-card .contact-meta b,
.contact-card .contact-meta a { color: var(--soft-ink) !important; }

/* Responsive balance */
@media(max-width:1100px) {
  .trust-grid { grid-template-columns: repeat(3,1fr) !important; }
  .trust-item:nth-child(n) { border: 1px solid rgba(255,255,255,.34) !important; }
}
@media(max-width:760px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 9px;
    border-radius: 24px;
  }
  .trust-item,
  .trust-item:nth-child(n) {
    min-height: 138px;
    padding: 16px !important;
    border-radius: 17px !important;
  }
  #ccc .bento .glass,
  #company .company-architecture,
  #company .team-example,
  #governance .policy-table,
  #governance .passport,
  #models .llm-copy,
  #models .llm-router,
  #erp .erp-copy,
  #ecosystem .vps-map,
  #services .service-card,
  #sectors .sector-panel,
  #sectors .specialised-card,
  #communications .channel-stack,
  #agents .agent-copy,
  #sentinel .panel-pad,
  #deployment .deployment-copy,
  .founder-copy,
  .contact-card { border-radius: 22px !important; }
}

/* =========================================================
   MAUVE GRADIENT FRAME SYSTEM
   Unifies all redesigned frames with the Keep the company palette
   ========================================================= */
:root {
  --eg-mauve-1:#4f7cff;
  --eg-mauve-2:#675cff;
  --eg-mauve-3:#8b5cf6;
  --eg-mauve-4:#b26dff;
  --eg-mauve-soft:#efe9ff;
  --eg-mauve-soft-2:#f8f5ff;
  --eg-mauve-ink:#3e2c63;
  --eg-mauve-muted:#75659a;
  --eg-mauve-line:rgba(111,84,218,.14);
  --eg-mauve-line-strong:rgba(111,84,218,.24);
  --eg-mauve-grad:linear-gradient(110deg,#4f7cff 0%,#675cff 36%,#8b5cf6 72%,#b26dff 100%);
  --eg-mauve-inner:linear-gradient(180deg,#eee8ff 0%,#f7f3ff 42%,#fcfbff 100%);
  --eg-mauve-shadow:0 28px 78px rgba(103,92,255,.14);
}

/* Main structural frames */
.hero-grid .ccc-shell.ccc-soft-card,
.trust-grid,
#models .tool-rail {
  background: var(--eg-mauve-grad) !important;
  border-color: rgba(111,84,218,.16) !important;
  box-shadow: var(--eg-mauve-shadow) !important;
}

/* CCC soft frame */
.ccc-soft-dot { background:#f4efff !important; box-shadow:0 0 0 5px rgba(255,255,255,.12) !important; }
.ccc-soft-badge i { background:#dbcaff !important; box-shadow:0 0 10px rgba(219,202,255,.75) !important; }
.ccc-soft-inner {
  background:
    radial-gradient(circle at 86% 0%,rgba(255,255,255,.82),transparent 34%),
    var(--eg-mauve-inner) !important;
  border-color:rgba(255,255,255,.54) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 12px 38px rgba(103,92,255,.08) !important;
}
.ccc-soft-kicker,
.ccc-soft-mode span,
.ccc-soft-mode small,
.ccc-soft-pill span,
.ccc-soft-switch-head span,
.ccc-soft-route { color:var(--eg-mauve-muted) !important; }
.ccc-soft-head h3,
.ccc-soft-mode strong,
.ccc-soft-pill strong,
.ccc-soft-switch-head strong,
.ccc-soft-route strong { color:var(--eg-mauve-ink) !important; }
.ccc-soft-live {
  border-color:var(--eg-mauve-line) !important;
  background:rgba(255,255,255,.82) !important;
  color:#675cff !important;
}
.ccc-soft-mode,
.ccc-soft-pill,
.ccc-soft-switch {
  background:rgba(255,255,255,.66) !important;
  border-color:var(--eg-mauve-line) !important;
}
.ccc-soft-pill-active {
  background:linear-gradient(135deg,rgba(79,124,255,.10),rgba(178,109,255,.13)) !important;
  border-color:var(--eg-mauve-line-strong) !important;
}
.ccc-soft-models .model-btn {
  background:rgba(255,255,255,.82) !important;
  border-color:var(--eg-mauve-line) !important;
  color:var(--eg-mauve-muted) !important;
}
.ccc-soft-models .model-btn.active {
  background:var(--eg-mauve-grad) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(103,92,255,.20) !important;
}

/* Common redesigned panel surfaces */
#ccc .bento .glass,
#company .company-architecture,
#company .team-example,
#governance .policy-table,
#governance .passport,
#models .llm-copy,
#models .llm-router,
#erp .erp-copy,
#ecosystem .vps-map,
#services .service-card,
#sectors .sector-panel,
#sectors .specialised-card,
#communications .channel-stack,
#agents .agent-copy,
#sentinel .panel-pad,
#deployment .deployment-copy,
.founder-copy,
.contact-card {
  background:
    radial-gradient(circle at 94% 0%,rgba(255,255,255,.82),transparent 32%),
    var(--eg-mauve-inner) !important;
  border-color:var(--eg-mauve-line) !important;
  box-shadow:var(--eg-mauve-shadow),inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Navy caps -> mauve gradient */
#ccc .bento .glass::before,
#company .company-architecture::before,
#company .team-example::before,
#governance .policy-table::before,
#governance .passport::before,
#models .llm-copy::before,
#models .llm-router::before,
#erp .erp-copy::before,
#ecosystem .vps-map::before,
#services .service-card::before,
#sectors .sector-panel::before,
#sectors .specialised-card::before,
#communications .channel-stack::before,
#agents .agent-copy::before,
#sentinel .panel-pad::before,
#deployment .deployment-copy::before,
.founder-copy::before,
.contact-card::before {
  background:var(--eg-mauve-grad) !important;
}

/* Primary headings / labels */
#ccc .bento .panel-title,
#company .company-architecture strong,
#company .team-example strong,
#governance .panel-title,
#models .panel-title,
#erp .panel-title,
#ecosystem .panel-title,
#services .service-card h3,
#sectors .panel-title,
#sectors .specialised-card h3,
#communications .panel-title,
#agents .panel-title,
#sentinel .panel-title,
#deployment .panel-title,
.founder-copy blockquote,
.contact-card h2 {
  color:var(--eg-mauve-ink) !important;
}

#ccc .bento .tiny-label,
#company .tiny-label,
#governance .tiny-label,
#models .tiny-label,
#erp .tiny-label,
#ecosystem .tiny-label,
#services .service-index,
#sectors .tiny-label,
#communications .tiny-label,
#agents .tiny-label,
#sentinel .tiny-label,
#deployment .tiny-label,
.founder-copy .tiny-label {
  color:#675cff !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
}

/* Trust cards */
.trust-item,
.trust-item:nth-child(n) {
  background:linear-gradient(180deg,#efe9ff,#fbfaff) !important;
  border-color:rgba(255,255,255,.38) !important;
  color:var(--eg-mauve-ink) !important;
}
.trust-item .mini-icon {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 8px 18px rgba(103,92,255,.18) !important;
}
.trust-item b { color:var(--eg-mauve-ink) !important; }
.trust-item > span:last-child { color:var(--eg-mauve-muted) !important; }

/* Inner white/lavender cards */
#ccc .bento .chip,
#company .arch-dept,
#company .team-card,
#company .human-badge,
#company .multi-agent-note,
#governance .policy-row,
#governance .passport-card,
#models .llm-logo,
#models .router-row,
#models .tool-logo,
#erp .feature-item,
#ecosystem .server,
#ecosystem .server-app,
#ecosystem .server-data span,
#services .service-tags span,
#sectors .sector-chips span,
#communications .channel,
#sentinel .feature-item,
#deployment .deploy-step,
.founder-copy .chip,
.contact-card .contact-meta div {
  background:rgba(255,255,255,.74) !important;
  border-color:var(--eg-mauve-line) !important;
}

/* Texts inside inner cards */
#ccc .bento .panel-copy,
#company .team-card p,
#company .arch-top span,
#company .team-lead div span,
#governance .policy-scope,
#governance .policy-person span,
#governance .passport-list span,
#governance .passport-footer,
#models .panel-copy,
#models .router-row span,
#erp .erp-copy .panel-copy,
#erp .feature-item p,
#ecosystem .server-data span,
#services .service-card p,
#sectors .sector-panel .panel-copy,
#sectors .specialised-card p,
#communications .channel span,
#agents .agent-copy li,
#sentinel .panel-copy,
#sentinel .feature-item p,
#deployment .deploy-step p,
.founder-copy p,
.contact-card p {
  color:var(--eg-mauve-muted) !important;
}

/* Selected / highlighted elements */
#company .arch-dept.active,
#models .llm-logo:hover,
#models .llm-logo.active {
  background:var(--eg-mauve-grad) !important;
  border-color:transparent !important;
  box-shadow:0 10px 24px rgba(103,92,255,.16) !important;
}
#company .arch-dept.active b,
#company .arch-dept.active span { color:#fff !important; }
#company .team-avatar,
#erp .feature-item i,
#sentinel .feature-item i,
#deployment .deploy-step span {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Governance rows keep semantic status colors */
#governance .policy-person i {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
}
#governance .policy-person b,
#governance .passport-card h4,
#governance .passport-list b { color:var(--eg-mauve-ink) !important; }
#governance .auto { color:#087950 !important; background:rgba(18,168,117,.07) !important; border-color:rgba(18,168,117,.20) !important; }
#governance .approval { color:#a36708 !important; background:rgba(216,149,32,.075) !important; border-color:rgba(216,149,32,.21) !important; }
#governance .blocked { color:#c6354c !important; background:rgba(227,77,98,.07) !important; border-color:rgba(227,77,98,.19) !important; }

/* Model routing */
#models .router-row b { color:var(--eg-mauve-ink) !important; }
#models .router-row em {
  color:#675cff !important;
  -webkit-text-fill-color:initial !important;
  background:none !important;
}

/* VPS centerpiece */
#ecosystem .server {
  background:linear-gradient(135deg,rgba(79,124,255,.06),rgba(178,109,255,.08)) !important;
}
#ecosystem .server-core {
  background:var(--eg-mauve-grad) !important;
  border-color:transparent !important;
  box-shadow:0 12px 28px rgba(103,92,255,.17) !important;
}
#ecosystem .server-core strong,
#ecosystem .server-core span { color:#fff !important; }
#ecosystem .server-app b { color:var(--eg-mauve-ink) !important; }

/* Services index pills */
#services .service-index {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#services .service-tags span,
#sectors .sector-chips span { color:var(--eg-mauve-ink) !important; }

/* Communication CRM line */
#communications .crm-line {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 10px 24px rgba(103,92,255,.16) !important;
}
#communications .channel b { color:var(--eg-mauve-ink) !important; }

/* Contact */
.contact-card .btn-primary {
  background:var(--eg-mauve-grad) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.contact-card .contact-meta span { color:#8878aa !important; }
.contact-card .contact-meta b,
.contact-card .contact-meta a { color:var(--eg-mauve-ink) !important; }

/* Subtle matching hover */
#ccc .bento .glass:hover,
#company .company-architecture:hover,
#company .team-example:hover,
#governance .policy-table:hover,
#governance .passport:hover,
#models .llm-copy:hover,
#models .llm-router:hover,
#erp .erp-copy:hover,
#ecosystem .vps-map:hover,
#services .service-card:hover,
#sectors .sector-panel:hover,
#sectors .specialised-card:hover,
#communications .channel-stack:hover,
#agents .agent-copy:hover,
#sentinel .panel-pad:hover,
#deployment .deployment-copy:hover,
.founder-copy:hover,
.contact-card:hover {
  border-color:var(--eg-mauve-line-strong) !important;
}

/* Trust rail vector icon system */
.trust-item .mini-icon.vector-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
  background: var(--eg-mauve-grad) !important;
  box-shadow:
    0 10px 24px rgba(103,92,255,.20),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff !important;
  -webkit-text-fill-color: initial !important;
  flex: 0 0 auto;
}
.trust-item .mini-icon.vector-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.trust-item:hover .mini-icon.vector-icon {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 14px 30px rgba(103,92,255,.24),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.trust-item .mini-icon.vector-icon {
  transition: transform .22s ease, box-shadow .22s ease;
}
@media(max-width:760px) {
  .trust-item .mini-icon.vector-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  .trust-item .mini-icon.vector-icon svg {
    width: 21px;
    height: 21px;
  }
}


/* =========================================================
   HERO COPY PREMIUM FRAME — Build Your AI Company
   ========================================================= */
.hero .hero-copy {
  position: relative;
  max-width: 760px;
  padding: clamp(30px, 3.2vw, 46px);
  border: 1px solid transparent !important;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(252,251,255,.97) 0%, rgba(247,243,255,.95) 58%, rgba(238,232,255,.92) 100%) padding-box,
    var(--eg-mauve-grad) border-box !important;
  box-shadow:
    0 30px 80px rgba(103,92,255,.14),
    inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.hero .hero-copy::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -110px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178,109,255,.16) 0%, rgba(103,92,255,.07) 42%, transparent 72%);
  pointer-events: none;
}
.hero .hero-copy > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  .hero .hero-copy {
    padding: 24px 20px 26px;
    border-radius: 24px;
  }
}


/* =========================================================
   EDITORIAL MEDIA CARD SYSTEM — 21st / card-22 inspired
   Image-first cards + clean content + subtle interactive lift.
   CSS-generated artwork keeps every card on-brand without stock imagery.
   ========================================================= */

/* Shared premium surface */
.trust-item,
.team-card,
.service-card,
.specialised-card,
.arch-dept,
.router-row,
.feature-item,
.server-app,
.channel,
.deploy-step {
  border: 1px solid rgba(103,92,255,.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,247,255,.96)) !important;
  box-shadow: 0 14px 34px rgba(73,66,143,.075) !important;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease !important;
}
.trust-item:hover,
.team-card:hover,
.service-card:hover,
.specialised-card:hover,
.arch-dept:hover,
.router-row:hover,
.feature-item:hover,
.server-app:hover,
.channel:hover,
.deploy-step:hover {
  transform: translateY(-4px);
  border-color: rgba(103,92,255,.28) !important;
  box-shadow: 0 22px 48px rgba(73,66,143,.13) !important;
}

/* -----------------------------------------
   TRUST CARDS — visual hero + content
   ----------------------------------------- */
.trust-grid {
  gap: 14px !important;
  padding: 14px !important;
}
.trust-item,
.trust-item:nth-child(n) {
  position: relative !important;
  display: block !important;
  min-height: 286px !important;
  padding: 146px 18px 20px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  color: var(--eg-mauve-ink) !important;
}
.trust-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 126px !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.90) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 66%, rgba(255,255,255,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 67% 23%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(79,124,255,.98), rgba(103,92,255,.96) 48%, rgba(178,109,255,.92)) !important;
  border-bottom: 1px solid rgba(103,92,255,.12);
  opacity: 1 !important;
  transform: none !important;
  z-index: 0 !important;
}
.trust-item::after {
  content: "CORE CAPABILITY";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font: 800 7px/1 Urbanist, Inter, sans-serif;
  letter-spacing: .12em;
  backdrop-filter: blur(10px);
}
.trust-item:nth-child(2)::before {
  background:
    radial-gradient(circle at 24% 52%, rgba(255,255,255,.92) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 58%, rgba(255,255,255,.60) 0 5px, transparent 6px),
    linear-gradient(135deg,#596cff,#7a5cf7 52%,#a96cff) !important;
}
.trust-item:nth-child(3)::before {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.14) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%),
    linear-gradient(135deg,#4f7cff,#675cff 45%,#915df3) !important;
  background-size: auto, 34px 34px, auto !important;
}
.trust-item:nth-child(4)::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 24px, rgba(255,255,255,.24) 25px 26px, transparent 27px),
    radial-gradient(circle at 50% 50%, transparent 0 43px, rgba(255,255,255,.13) 44px 45px, transparent 46px),
    linear-gradient(135deg,#4a7dff,#6f59f7 50%,#b06dfd) !important;
}
.trust-item:nth-child(5)::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 22px),
    linear-gradient(135deg,#5278f8,#675cff 52%,#9d62f4) !important;
}
.trust-item .mini-icon.vector-icon {
  position: absolute !important;
  top: 48px !important;
  left: 50% !important;
  z-index: 3 !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.18) !important;
  box-shadow: 0 12px 28px rgba(31,28,79,.20) !important;
  backdrop-filter: blur(10px);
}
.trust-item:hover .mini-icon.vector-icon {
  transform: translateX(-50%) translateY(-3px) scale(1.05) !important;
}
.trust-item b {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--eg-mauve-ink) !important;
  font: 800 15px/1.18 Urbanist, Inter, sans-serif !important;
  letter-spacing: -.015em;
}
.trust-item > span:last-child {
  display: block !important;
  color: var(--eg-mauve-muted) !important;
  font: 500 10px/1.58 Urbanist, Inter, sans-serif !important;
}

/* -----------------------------------------
   AI EMPLOYEE CARDS
   ----------------------------------------- */
.team-card {
  position: relative;
  min-height: 238px !important;
  padding: 112px 15px 16px !important;
  overflow: hidden;
  border-radius: 20px !important;
}
.team-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 94px;
  background:
    radial-gradient(circle at 68% 34%, rgba(255,255,255,.82) 0 4px, transparent 5px),
    radial-gradient(circle at 36% 68%, rgba(255,255,255,.52) 0 3px, transparent 4px),
    linear-gradient(135deg,#4f7cff,#675cff 48%,#a566fa);
}
.team-card::after {
  content: "AI EMPLOYEE";
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: #fff;
  font: 800 6.5px/1 Urbanist, sans-serif;
  letter-spacing: .11em;
}
.team-avatar {
  position: absolute !important;
  top: 42px;
  left: 16px;
  z-index: 2;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background: rgba(255,255,255,.20) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,31,94,.17);
  backdrop-filter: blur(10px);
}
.team-card b {
  margin-top: 0 !important;
  font: 800 11px/1.3 Urbanist, Inter, sans-serif !important;
  color: var(--eg-mauve-ink) !important;
}
.team-card p {
  margin-top: 8px !important;
  color: var(--eg-mauve-muted) !important;
  font-size: 8.5px !important;
  line-height: 1.55 !important;
}

/* -----------------------------------------
   SERVICE CARDS — generated visual cover
   ----------------------------------------- */
.service-card {
  position: relative !important;
  min-height: 420px !important;
  padding: 184px 24px 24px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}
.service-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: 158px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(103,92,255,.12);
  background:
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.86) 0 6px, transparent 7px),
    radial-gradient(circle at 64% 68%, rgba(255,255,255,.52) 0 4px, transparent 5px),
    linear-gradient(135deg,#4f7cff,#675cff 48%,#a767fa) !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 0 !important;
}
.service-card:nth-child(2)::before {
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(255,255,255,.13) 18% 20%, transparent 20% 42%, rgba(255,255,255,.10) 42% 44%, transparent 44%),
    linear-gradient(135deg,#5876f8,#735cf8 48%,#b16cff) !important;
}
.service-card:nth-child(3)::before {
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 30px),
    linear-gradient(135deg,#4d7cf8,#675cff 50%,#965ff5) !important;
}
.service-card:nth-child(4)::before {
  background:
    radial-gradient(circle at 22% 50%,transparent 0 16px,rgba(255,255,255,.26) 17px 18px,transparent 19px),
    radial-gradient(circle at 58% 44%,transparent 0 29px,rgba(255,255,255,.18) 30px 31px,transparent 32px),
    linear-gradient(135deg,#4e79f7,#685cf6 52%,#a766f7) !important;
}
.service-card:nth-child(5)::before {
  background:
    linear-gradient(45deg, transparent 0 44%, rgba(255,255,255,.16) 45% 47%, transparent 48%),
    linear-gradient(-45deg, transparent 0 44%, rgba(255,255,255,.12) 45% 47%, transparent 48%),
    linear-gradient(135deg,#4d7cff,#6a5cf5 50%,#a568fa) !important;
}
.service-card:nth-child(6)::before {
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 26px),
    linear-gradient(135deg,#5277f5,#695bf5 52%,#b06dfd) !important;
}
.service-card > * {
  position: relative;
  z-index: 1;
}
.service-card .service-index {
  display: inline-flex;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(103,92,255,.12);
  background: #f1edff !important;
  color: #675cff !important;
  -webkit-text-fill-color: #675cff !important;
  font-size: 7.5px !important;
}
.service-card h3 {
  margin: 18px 0 0 !important;
  color: var(--eg-mauve-ink) !important;
  font: 800 23px/1.08 Urbanist, Inter, sans-serif !important;
}
.service-card p {
  color: var(--eg-mauve-muted) !important;
  font-size: 10.5px !important;
}
.service-tags span {
  background: rgba(242,238,255,.86) !important;
  border-color: rgba(103,92,255,.12) !important;
  color: #67588d !important;
}

/* -----------------------------------------
   SECTOR TEXT CARDS
   ----------------------------------------- */
.specialised-card {
  position: relative !important;
  display: block !important;
  min-height: 300px !important;
  padding: 146px 0 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}
.specialised-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 128px;
  background:
    radial-gradient(circle at 28% 58%, rgba(255,255,255,.72) 0 5px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 28px),
    linear-gradient(135deg,#4f7cff,#675cff 52%,#9f65f7);
}
.specialised-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(255,255,255,.22) 27px 28px, transparent 29px),
    radial-gradient(circle at 50% 50%, transparent 0 48px, rgba(255,255,255,.12) 49px 50px, transparent 51px),
    linear-gradient(135deg,#5478f5,#6a5df6 52%,#ad6af9);
}
.specialised-card > div {
  position: relative;
  padding: 20px 22px 24px !important;
}

/* -----------------------------------------
   COMPACT TEXT FRAMES
   ----------------------------------------- */
.arch-dept,
.router-row,
.feature-item,
.server-app,
.channel,
.deploy-step {
  border-radius: 16px !important;
}
.arch-dept,
.server-app,
.channel {
  overflow: hidden;
}
.arch-dept {
  padding: 16px !important;
}
.arch-dept.active {
  background: linear-gradient(180deg,#f2eeff,#fff) !important;
  border-color: rgba(103,92,255,.28) !important;
}
.feature-item {
  grid-template-columns: 34px 1fr !important;
  padding: 12px !important;
}
.feature-item i,
.deploy-step > span {
  background: linear-gradient(135deg,#efe9ff,#faf8ff) !important;
  border-color: rgba(103,92,255,.14) !important;
}
.deploy-step {
  padding: 12px !important;
  border-top: 1px solid rgba(103,92,255,.14) !important;
}
.channel {
  min-height: 104px !important;
  padding: 14px !important;
}
.channel img {
  width: 26px !important;
  height: 26px !important;
}
.server-app {
  padding: 14px 10px !important;
}

/* Larger textual glass frames use the same rounded premium shell */
#ccc .bento .glass,
#company .company-architecture,
#company .team-example,
#governance .policy-table,
#governance .passport,
#models .llm-copy,
#models .llm-router,
#erp .erp-copy,
#ecosystem .vps-map,
#communications .channel-stack,
#agents .agent-copy,
#sentinel .panel-pad,
#deployment .deployment-copy,
.founder-copy,
.contact-card {
  border-radius: 28px !important;
  border-color: rgba(103,92,255,.14) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,247,255,.92)) !important;
  box-shadow: 0 20px 58px rgba(73,66,143,.09) !important;
}

/* Mobile */
@media(max-width:760px) {
  .trust-grid {
    gap: 10px !important;
    padding: 10px !important;
  }
  .trust-item,
  .trust-item:nth-child(n) {
    min-height: 260px !important;
    padding: 136px 16px 18px !important;
    border-radius: 20px !important;
  }
  .trust-item::before { height: 118px !important; }
  .trust-item .mini-icon.vector-icon { top: 44px !important; }
  .service-card {
    min-height: 390px !important;
    padding: 168px 20px 22px !important;
    border-radius: 22px !important;
  }
  .service-card::before { height: 144px !important; }
  .team-card {
    min-height: 226px !important;
    padding: 108px 14px 15px !important;
  }
  .specialised-card {
    min-height: 278px !important;
    padding-top: 132px !important;
  }
  .specialised-card::before { height: 116px !important; }
}