/*
 * cadma solutions — Blueprint Light Design System
 * A bright, restrained visual layer derived from the existing logo CI.
 */

:root {
  --ci-accent: #2563eb;
  --ci-accent-dark: #1e40af;
  --ci-sky: #38bdf8;
  --ci-indigo: #4338ca;
  --ci-ink: #0f172a;
  --ci-ink-soft: #172554;
  --ci-copy: #1e293b;
  --ci-muted: #64748b;
  --ci-paper: #f8fafc;
  --ci-surface: #ffffff;
  --ci-surface-soft: #eff6ff;
  --ci-border: #dbeafe;
  --ci-border-dark: rgba(255, 255, 255, .18);
  --ci-shadow: 0 24px 70px rgba(37, 99, 235, .09);
  --ci-radius: 20px;
  --ci-radius-sm: 12px;
  --ci-ease: cubic-bezier(.2, .8, .2, 1);

  /* Normalize the legacy page-specific design tokens. */
  --p: var(--ci-accent);
  --pl: var(--ci-accent);
  --pd: var(--ci-ink);
  --primary: var(--ci-accent);
  --primary-light: var(--ci-accent);
  --primary-dark: var(--ci-ink);
  --ac: var(--ci-accent);
  --ac2: var(--ci-sky);
  --accent: var(--ci-accent);
  --accent2: var(--ci-indigo);
  --ag: var(--ci-accent);
  --aw: var(--ci-accent);
  --bg: var(--ci-paper);
  --bg-dark: var(--ci-ink);
  --bg-mid: var(--ci-ink-soft);
  --dk: var(--ci-ink);
  --dm: var(--ci-ink-soft);
  --tx: var(--ci-copy);
  --text: var(--ci-copy);
  --mu: var(--ci-muted);
  --text-muted: var(--ci-muted);
  --wh: var(--ci-surface);
  --white: var(--ci-surface);
  --card-bg: var(--ci-surface);
  --bd: var(--ci-border);
  --border: var(--ci-border);
  --sh: var(--ci-shadow);
  --shadow: var(--ci-shadow);
  --r: var(--ci-radius);
  --radius: var(--ci-radius);
  --f: Inter, "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font: Inter, "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

* {
  scrollbar-color: #93c5fd var(--ci-paper);
}

html {
  scroll-padding-top: 84px;
}

body {
  background: var(--ci-paper) !important;
  color: var(--ci-copy) !important;
  font-family: var(--f) !important;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(56, 189, 248, .28);
  color: var(--ci-ink);
}

a {
  text-underline-offset: .18em;
}

:focus-visible {
  outline: 2px solid var(--ci-accent) !important;
  outline-offset: 4px !important;
}

/* Navigation */
nav {
  min-height: 74px !important;
  height: 74px !important;
  padding-inline: clamp(1rem, 4vw, 4rem) !important;
  gap: 1.5rem !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(37, 99, 235, .12) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

.nav-logo {
  color: var(--ci-ink) !important;
}

.nav-logo .brand-wordmark {
  display: block;
  width: auto;
  height: 42px !important;
}

.nav-logo .brand-mark {
  display: block;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav-product-name {
  color: var(--ci-ink) !important;
  font-weight: 760 !important;
  letter-spacing: -.03em;
}

.nav-links {
  gap: clamp(.85rem, 2vw, 1.8rem) !important;
}

.nav-links a {
  color: #4f555e !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  letter-spacing: .01em;
}

.nav-links a:hover {
  color: var(--ci-ink) !important;
}

.nav-support,
.nav-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: .55rem 1rem !important;
  color: var(--ci-surface) !important;
  background: linear-gradient(135deg, var(--ci-accent), var(--ci-indigo)) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition:
    color .25s var(--ci-ease),
    background .25s var(--ci-ease),
    transform .25s var(--ci-ease) !important;
}

.nav-support:hover,
.nav-cta:hover {
  color: var(--ci-surface) !important;
  background: var(--ci-accent) !important;
  border-color: var(--ci-accent) !important;
  filter: none !important;
  transform: translateY(-1px);
}

.nav-burger span {
  background: var(--ci-ink) !important;
}

/* Hero — bright blueprint impact */
.hero {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  place-content: center;
  min-height: clamp(560px, calc(100svh - 74px), 820px);
  padding: clamp(5.5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 5rem) !important;
  overflow: hidden !important;
  color: var(--ci-ink) !important;
  background: #f8fbff !important;
  text-align: center;
}

.hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: -2;
  inset: 0 !important;
  background:
    linear-gradient(rgba(37, 99, 235, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .065) 1px, transparent 1px),
    radial-gradient(circle at 25% 32%, rgba(56, 189, 248, .2), transparent 30%),
    radial-gradient(circle at 72% 45%, rgba(67, 56, 202, .12), transparent 34%) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero::after {
  content: "" !important;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: min(72vw, 820px);
  aspect-ratio: 1;
  border: 1px solid rgba(37, 99, 235, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(56, 189, 248, .045),
    0 0 0 180px rgba(67, 56, 202, .025);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: cadma-pulse 9s var(--ci-ease) infinite alternate;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex !important;
  justify-self: center;
  align-items: center;
  gap: .7rem !important;
  margin: 0 auto 1.8rem !important;
  padding: 0 !important;
  color: var(--ci-accent-dark) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: .71rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.hero-badge::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--ci-sky), var(--ci-accent));
}

.hero h1 {
  max-width: 1080px !important;
  margin: 0 auto 1.5rem !important;
  color: var(--ci-ink) !important;
  font-size: clamp(3.1rem, 7.7vw, 7.4rem) !important;
  font-weight: 780 !important;
  line-height: .93 !important;
  letter-spacing: -.075em !important;
  text-wrap: balance;
  animation: cadma-rise .8s .05s both var(--ci-ease);
}

.product-page .hero h1 {
  max-width: 980px !important;
  font-size: clamp(3rem, 6.5vw, 6.2rem) !important;
}

.hero h1 em,
.hero .hl {
  color: transparent !important;
  background: linear-gradient(100deg, var(--ci-sky), var(--ci-accent) 48%, var(--ci-indigo));
  background-clip: text;
  -webkit-background-clip: text;
  font-style: normal !important;
}

.hero p.sub,
.hero p.hero-sub {
  max-width: 700px !important;
  margin: 0 auto 2.1rem !important;
  color: var(--ci-muted) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  line-height: 1.65 !important;
  text-wrap: balance;
  animation: cadma-rise .8s .17s both var(--ci-ease);
}

.hero-btns,
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .4rem;
  animation: cadma-rise .8s .29s both var(--ci-ease);
}

.hero-proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  margin-top: 2.25rem;
  color: #52657e;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.hero-proof span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ci-sky);
}

.btn-ac,
.btn-white,
.prod-cta,
.btn-accent,
.cf-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.35rem !important;
  color: var(--ci-surface) !important;
  background: linear-gradient(135deg, var(--ci-accent), var(--ci-indigo)) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  transition:
    background .25s var(--ci-ease),
    border-color .25s var(--ci-ease),
    transform .25s var(--ci-ease) !important;
}

.btn-ac:hover,
.btn-white:hover,
.prod-cta:hover,
.btn-accent:hover,
.cf-submit:hover {
  background: var(--ci-accent-dark) !important;
  border-color: var(--ci-accent-dark) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

.btn-ghost,
.btn-outline {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.35rem !important;
  color: var(--ci-ink) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition:
    background .25s var(--ci-ease),
    border-color .25s var(--ci-ease),
    transform .25s var(--ci-ease) !important;
}

.btn-ghost:hover,
.btn-outline:hover {
  background: var(--ci-surface) !important;
  border-color: rgba(37, 99, 235, .45) !important;
  transform: translateY(-2px);
}

.hero-stats {
  border-top: 1px solid rgba(37, 99, 235, .14) !important;
}

.stat {
  border: 0 !important;
}

.stat-num {
  color: var(--ci-ink) !important;
}

.stat-lbl {
  color: var(--ci-muted) !important;
}

/* Typography and section rhythm */
section {
  padding: clamp(5rem, 9vw, 8.5rem) clamp(1.15rem, 5vw, 5rem) !important;
}

.container {
  width: min(100%, 1200px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

h1,
h2,
h3,
h4 {
  color: var(--ci-ink) !important;
  text-wrap: balance;
}

h2 {
  max-width: 820px;
  margin-bottom: 1.15rem !important;
  font-size: clamp(2.15rem, 4vw, 4.15rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

h3 {
  letter-spacing: -.025em;
}

.sec-label {
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
  color: var(--ci-accent) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: .7rem !important;
  font-weight: 760 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.sec-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

p.lead {
  max-width: 660px !important;
  color: var(--ci-muted) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

.about-strip,
.products,
.partners,
.contact-sec,
.overview,
.features,
.modules,
.workflow,
.targets,
.roles,
.components,
.metrics,
.security,
.roadmap,
  .requirements,
  .usecases,
  .dms,
  .types,
  .mod-section,
  .branchen,
  .roles-section,
  .feat-section,
  .metrics-section,
  .why-section,
  .tech-section,
  .roadmap-section,
  .dms-section,
  .absence-section,
  .sysreq,
  .how {
  background: transparent !important;
  border-color: var(--ci-border) !important;
}

.about-grid,
.contact-grid {
  gap: clamp(2.5rem, 7vw, 6.5rem) !important;
}

.about-text p,
.contact-info p {
  color: var(--ci-muted) !important;
}

/* Cards: quiet, consistent, content-first */
:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .why-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card,
  .box
) {
  color: var(--ci-copy) !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: none !important;
  transition:
    background .3s var(--ci-ease),
    border-color .3s var(--ci-ease),
    transform .3s var(--ci-ease) !important;
}

:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card
):hover {
  background: var(--ci-surface) !important;
  border-color: #93c5fd !important;
  box-shadow: none !important;
  transform: translateY(-3px) !important;
}

:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .why-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card,
  .box
) h2,
:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .why-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card,
  .box
) h3,
:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .why-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card,
  .box
) h4 {
  color: var(--ci-ink) !important;
}

:is(
  .val-card,
  .ov-card,
  .feat-card,
  .mod-card,
  .target-card,
  .role-card,
  .comp-card,
  .metric-chip,
  .sec-card,
  .yacon-card,
  .road-card,
  .branch-card,
  .uc-card,
  .dms-card,
  .how-card,
  .req-card,
  .box
) p {
  color: var(--ci-muted) !important;
}

/* Intentionally remove the dense decorative icon layer. */
:is(
  .val-icon,
  .ov-icon,
  .wi,
  .why-icon,
  .target-icon,
  .uc-icon,
  .branch-icon,
  .si,
  .ri,
  .m-icon,
  .rm-icon,
  .chip-icon,
  .dms-logo,
  .soon,
  .cinfo-icon
) {
  display: none !important;
}

.val-card,
.ov-card,
.why-card,
.target-card,
.uc-card,
.metric-chip {
  display: block !important;
}

.pill-row,
.tech-inner,
.portal-row,
.branch-portale {
  gap: .55rem !important;
}

.pill,
.tech-chip,
.portal-chip,
.t-chip,
.type-chip,
.feat-tag,
.mod-tag,
.mod-badge,
.comp-badge,
.dms-badge,
.role-badge {
  color: #555c66 !important;
  background: transparent !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: .72rem !important;
  font-weight: 680 !important;
}

.tech-chip span {
  color: var(--ci-ink) !important;
}

/* Product collection on the home page */
.prod-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 3rem !important;
}

.prod-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--ci-surface) !important;
  border: 1px solid #cbdcf8 !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: none !important;
  transition:
    border-color .3s var(--ci-ease),
    transform .3s var(--ci-ease) !important;
}

.prod-card:hover {
  border-color: #93c5fd !important;
  box-shadow: none !important;
  transform: translateY(-4px) !important;
}

.prod-header {
  min-height: 190px;
  padding: 2rem !important;
  color: var(--ci-ink) !important;
  background:
    radial-gradient(circle at 92% 5%, rgba(56, 189, 248, .2), transparent 32%),
    linear-gradient(135deg, #ffffff, #eff6ff) !important;
}

.prod-header::before {
  top: auto !important;
  right: -35px !important;
  bottom: -85px !important;
  width: 180px !important;
  height: 180px !important;
  background: transparent !important;
  border: 1px solid rgba(37, 99, 235, .16) !important;
  border-radius: 50% !important;
}

.prod-header h3 {
  color: var(--ci-ink) !important;
  font-size: clamp(1.45rem, 2.3vw, 2.05rem) !important;
  letter-spacing: -.04em;
}

.prod-header p {
  max-width: 450px;
  color: var(--ci-muted) !important;
}

.prod-tag {
  color: var(--ci-accent-dark) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  letter-spacing: .1em !important;
}

.prod-body {
  display: flex;
  flex-direction: column;
  padding: 1.8rem 2rem 2rem !important;
}

.prod-features {
  margin-bottom: 1.6rem !important;
}

.prod-features li {
  padding: .55rem 0 !important;
  color: var(--ci-copy) !important;
  border-color: #ececed !important;
  font-size: .84rem !important;
  line-height: 1.55;
}

.prod-features li::before,
.feat-list li::before,
.mod-list li::before,
.req-list li::before,
.role-perms li::before,
.branch-list li::before {
  content: "—" !important;
  color: var(--ci-accent) !important;
  font-weight: 700 !important;
}

.site-home .prod-features li:nth-child(n + 4) {
  display: none;
}

.prod-cta {
  width: 100%;
  margin-top: auto;
  color: var(--ci-surface) !important;
  background: linear-gradient(135deg, var(--ci-accent), var(--ci-indigo)) !important;
  border-color: transparent !important;
}

.prod-cta:hover {
  background: var(--ci-accent) !important;
  border-color: var(--ci-accent) !important;
}

.prod-coming {
  min-height: 300px !important;
  padding: 2.4rem !important;
  background: transparent !important;
  border: 1px dashed #adb1b8 !important;
  border-radius: var(--ci-radius) !important;
}

.prod-coming h3 {
  color: var(--ci-ink) !important;
}

/* Light editorial section */
.why {
  position: relative;
  color: var(--ci-copy) !important;
  background: linear-gradient(180deg, #eff6ff, #f8fbff) !important;
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(37, 99, 235, .08) 50%, transparent 50.05%),
    radial-gradient(circle at 50% 100%, rgba(56, 189, 248, .18), transparent 38%);
}

.why > * {
  position: relative;
}

.why h2,
.why h3,
.why h4 {
  color: var(--ci-ink) !important;
}

.why .sec-label {
  color: var(--ci-accent) !important;
}

.why p,
.why .lead {
  color: var(--ci-muted) !important;
}

.why-grid {
  gap: 1px !important;
  overflow: hidden;
  background: #cbdcf8;
  border: 1px solid #cbdcf8;
  border-radius: var(--ci-radius);
}

.why-card {
  margin: 0 !important;
  padding: 1.8rem !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.why-card h4 {
  color: var(--ci-ink) !important;
}

.why-card p {
  color: var(--ci-muted) !important;
}

/* High-contrast CTA, now in the actual CI blue rather than black. */
.cta-section {
  position: relative;
  color: var(--ci-surface) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .42), transparent 34%),
    linear-gradient(135deg, var(--ci-accent), var(--ci-indigo)) !important;
}

.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 49.95%, rgba(255, 255, 255, .1) 50%, transparent 50.05%);
}

.cta-section > * {
  position: relative;
}

.cta-section h2,
.cta-section h3,
.cta-section h4 {
  color: var(--ci-surface) !important;
}

.cta-section p {
  color: rgba(255, 255, 255, .76) !important;
}

.cta-section .btn-white {
  color: var(--ci-accent-dark) !important;
  background: var(--ci-surface) !important;
  border-color: var(--ci-surface) !important;
}

.cta-section .btn-outline {
  color: var(--ci-surface) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, .55) !important;
}

/* Partners and contact */
.partner-grid {
  gap: 1rem !important;
}

.partner-card {
  min-height: 230px !important;
  padding: 1.25rem !important;
  color: var(--ci-copy) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: none !important;
  transition:
    background .3s var(--ci-ease),
    border-color .3s var(--ci-ease),
    transform .3s var(--ci-ease) !important;
}

.partner-card:hover {
  background: var(--ci-surface) !important;
  border-color: #93c5fd !important;
  box-shadow: none !important;
  transform: translateY(-3px) !important;
}

.partner-logo {
  background: transparent !important;
  border: 0 !important;
}

.partner-name {
  color: var(--ci-ink) !important;
}

.partner-link {
  color: var(--ci-accent) !important;
}

.contact-cta {
  color: var(--ci-copy) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .22), transparent 32%),
    linear-gradient(135deg, #eff6ff, #ffffff) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--ci-radius) !important;
}

.contact-cta h3 {
  color: var(--ci-ink) !important;
}

.contact-cta > p,
.cf-row label,
.cf-hint {
  color: var(--ci-muted) !important;
}

.cf-row input,
.cf-row select,
.cf-row textarea {
  color: var(--ci-copy) !important;
  background: var(--ci-surface) !important;
  border: 1px solid #bfdbfe !important;
  border-radius: var(--ci-radius-sm) !important;
}

.cf-row input::placeholder,
.cf-row textarea::placeholder {
  color: #94a3b8 !important;
}

.cf-hint a {
  color: var(--ci-accent-dark) !important;
}

.cf-row input:focus,
.cf-row select:focus,
.cf-row textarea:focus {
  background: var(--ci-surface) !important;
  border-color: var(--ci-accent) !important;
}

.cf-submit {
  width: 100%;
}

.cinfo-row {
  padding-block: .7rem;
  border-bottom: 1px solid var(--ci-border);
}

.cinfo-row a {
  color: var(--ci-ink) !important;
  font-weight: 680;
}

/* Product-detail structures */
.flow-num,
.how-num {
  color: var(--ci-surface) !important;
  background: linear-gradient(135deg, var(--ci-accent), var(--ci-indigo)) !important;
  border-color: transparent !important;
}

.flow-step::after {
  background: var(--ci-border) !important;
}

.trust-strip,
.security {
  color: var(--ci-copy) !important;
  background: linear-gradient(180deg, #eff6ff, #f8fbff) !important;
  border-color: var(--ci-border) !important;
}

.trust-strip h2,
.trust-strip h3,
.trust-strip h4,
.security h2,
.security h3,
.security h4 {
  color: var(--ci-ink) !important;
}

.trust-strip p,
.security p {
  color: var(--ci-muted) !important;
}

.trust-num {
  color: var(--ci-accent-dark) !important;
}

.trust-lbl {
  color: var(--ci-muted) !important;
}

.arch-section,
.yacon-section {
  color: var(--ci-copy) !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(56, 189, 248, .18), transparent 30%),
    linear-gradient(180deg, #eff6ff, #f8fbff) !important;
}

.arch-section h2,
.arch-section h3,
.arch-section h4,
.yacon-section h2,
.yacon-section h3,
.yacon-section h4 {
  color: var(--ci-ink) !important;
}

.arch-section .sub,
.yacon-section .sub,
.arch-section p,
.yacon-section p {
  color: var(--ci-muted) !important;
}

.arch-section .sec-label,
.yacon-section .sec-label {
  color: var(--ci-accent) !important;
  background: transparent !important;
}

.arch-box,
.yacon-flow {
  color: #334155 !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.rm-item {
  background: rgba(255, 255, 255, .72) !important;
  border-color: var(--ci-border) !important;
  border-radius: var(--ci-radius-sm) !important;
}

.rm-item strong {
  color: var(--ci-ink) !important;
}

.rm-item p {
  color: var(--ci-muted) !important;
}

.tech-strip {
  background: var(--ci-surface) !important;
  border-block: 1px solid var(--ci-border) !important;
}

/* Legal pages */
.legal-page main {
  width: min(100% - 2rem, 900px) !important;
  max-width: 900px !important;
  margin: clamp(3rem, 7vw, 6rem) auto !important;
  padding: 0 0 6rem !important;
}

.legal-page main > h1 {
  max-width: 820px;
  color: var(--ci-ink) !important;
  font-size: clamp(2.7rem, 7vw, 5.6rem) !important;
  font-weight: 760 !important;
  line-height: .95 !important;
  letter-spacing: -.065em !important;
}

.legal-page .lead {
  margin-top: 1rem !important;
  padding-bottom: 2rem !important;
  color: var(--ci-muted) !important;
  border-color: var(--ci-border) !important;
}

.legal-page .bc {
  color: var(--ci-muted) !important;
}

.legal-page .bc a,
.legal-page main a {
  color: var(--ci-accent) !important;
}

.legal-page .box {
  margin: 1rem 0 !important;
  padding: clamp(1.4rem, 4vw, 2.5rem) !important;
}

.legal-page .box h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  color: var(--ci-ink) !important;
  border: 0 !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}

/* Cookie banner and footer */
#ck-banner,
#cookie-banner {
  color: rgba(255, 255, 255, .78) !important;
  background: #10204a !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .3) !important;
}

#ck-banner a,
#cookie-banner a {
  color: var(--ci-surface) !important;
}

.ck-ok,
.ck-no {
  min-height: 38px;
  padding: .5rem .9rem !important;
  border-radius: 999px !important;
}

.ck-ok {
  color: var(--ci-surface) !important;
  background: var(--ci-accent) !important;
}

.ck-no {
  color: rgba(255, 255, 255, .72) !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
}

footer {
  color: rgba(255, 255, 255, .48) !important;
  background: #10204a !important;
}

.footer-ci-logo {
  display: block;
  width: min(190px, 100%);
  height: auto;
  margin: 0 0 1.1rem;
  padding: .5rem .7rem;
  background: var(--ci-surface);
  border: 0;
  border-radius: var(--ci-radius-sm);
}

.legal-footer-logo {
  margin-inline: auto;
}

footer h3,
footer h4 {
  color: var(--ci-surface) !important;
}

footer a,
.footer-col a,
.footer-bottom a {
  color: rgba(255, 255, 255, .5) !important;
}

footer a:hover,
.footer-col a:hover,
.footer-bottom a:hover {
  color: var(--ci-surface) !important;
}

.footer-bottom {
  border-color: rgba(255, 255, 255, .12) !important;
}

.skip-link {
  color: var(--ci-surface) !important;
  background: var(--ci-accent) !important;
}

@keyframes cadma-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cadma-pulse {
  from {
    opacity: .6;
    transform: translate(-50%, -50%) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (max-width: 900px) {
  nav {
    padding-inline: 1rem !important;
  }

  .prod-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-links {
    gap: 0 !important;
    background: var(--ci-paper) !important;
    border-color: var(--ci-border) !important;
  }

  .nav-links li {
    border-color: var(--ci-border) !important;
  }
}

@media (max-width: 768px) {
  nav {
    height: auto !important;
    min-height: 64px !important;
  }

  .nav-logo {
    height: 64px !important;
  }

  .nav-logo .brand-wordmark {
    height: 38px !important;
  }

  nav > .nav-support,
  nav > .nav-cta {
    display: none !important;
  }

  .nav-open > .nav-support,
  .nav-open > .nav-cta {
    display: flex !important;
    width: calc(100% - 1rem) !important;
    margin: .55rem .5rem .9rem !important;
    order: 3;
  }

  .hero {
    min-height: 620px;
    padding: 5rem 1.1rem !important;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 5rem) !important;
  }

  .hero::before {
    background-size: 44px 44px, 44px 44px, auto !important;
  }

  section {
    padding: 4.5rem 1.1rem !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 580px;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 15vw, 4.2rem) !important;
  }

  .hero-proof {
    flex-direction: column;
    align-items: center;
  }

  .prod-header,
  .prod-body {
    padding-inline: 1.35rem !important;
  }

  .footer-bottom {
    text-align: left !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}