/* DAAMtech brand override — source of truth for design tokens (P0-03). Loaded as a static stylesheet, not injected by JS, so the corrected design paints on first render even if JS fails. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --color-bg: #ffffff;
  --color-surface: #f6f9fc;
  --color-text: #132238;
  --color-divider: #dce5ec;
  --color-accent: #1356c5;
  --color-accent-2: #24d4e8;

  --color-neutral-100: #f6f9fc;
  --color-neutral-200: #eef6fc;
  --color-neutral-300: #dce5ec;
  --color-neutral-400: #b7c4d1;
  --color-neutral-500: #94a4b4;
  --color-neutral-600: #6b7b8c;
  --color-neutral-700: #45536a;
  --color-neutral-800: #2a3a4d;
  --color-neutral-900: #081b33;

  --color-accent-100: #eaf1fc;
  --color-accent-200: #d3e3fa;
  --color-accent-300: #a8c6f5;
  --color-accent-400: #6d9eea;
  --color-accent-500: #1356c5;
  --color-accent-600: #0f49a8;
  --color-accent-700: #0c3b8a;
  --color-accent-800: #0a2e6c;
  --color-accent-900: #081b33;

  --color-accent-2-100: #e3fbfd;
  --color-accent-2-200: #bef2f7;
  --color-accent-2-300: #8fe6ee;
  --color-accent-2-400: #56d6e3;
  --color-accent-2-500: #24d4e8;
  --color-accent-2-600: #14a9bc;
  --color-accent-2-700: #0e7f91;
  --color-accent-2-800: #0a5c6b;
  --color-accent-2-900: #072f35;

  --color-success: #1f8a5b;
  --color-error: #c63c3c;
  --color-muted-text: #5a6474;

  --font-heading: "Manrope", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 64px;

  --section-space-desktop: 88px;
  --section-space-tablet: 68px;
  --section-space-mobile: 52px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 2px 6px rgba(8,27,51,0.06);
  --shadow-md: 0 8px 24px rgba(8,27,51,0.08);
  --shadow-lg: 0 24px 56px rgba(8,27,51,0.14);

  --final-cta-bg: radial-gradient(circle at 85% 30%, rgba(36, 212, 232, 0.18), transparent 38%), linear-gradient(135deg, #EEF6FC 0%, #F6F9FC 55%, #E3FBFD 100%);
  --color-on-dark-muted: #d3dce6;
}

body { font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: #ffffff !important; }
.btn-primary svg { stroke: #ffffff !important; }
.btn-primary { background: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
/* Fix: muted-text token (#5A6474) fails contrast on dark hero/navy backgrounds — force the light on-dark token there instead */
.surface-dark [style*="color:var(--color-muted-text)"] { color: var(--color-on-dark-muted) !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent); border-radius: 2px; }
footer :focus-visible, .surface-dark :focus-visible, [style*="background:var(--color-neutral-900)"] :focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 4px var(--color-accent-300); }

/* Blueprint marks are retired: hide any that remain in older markup */
.blueprint > .corner { display: none !important; }

/* Rounded, softly-elevated components replace the square wireframe look */
.card, .blueprint, .duotone { border-radius: var(--radius-lg) !important; }
.card { background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm); }
a.card:hover, button.card:hover, .card--interactive:hover, .card.blueprint:hover, a.blueprint:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-accent-300); }
a.card, button.card, .card--interactive, a.blueprint, .card.blueprint { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

.btn, .input, .icon-tile { border-radius: var(--radius-md) !important; }
.tag { border-radius: 999px !important; }
.btn { font-weight: 600; flex: none; border-color: transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease; white-space: normal; text-align: center; min-height: 44px; }
@media (min-width: 480px) { .btn { white-space: nowrap; } }
.btn-primary { border-color: transparent !important; }
.btn-secondary { border-color: var(--color-divider) !important; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }

.icon-tile { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-divider); background: transparent; color: var(--color-accent-700); }
.engage-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.engage-timeline.wai-flow { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.engage-timeline.behavioum-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .engage-timeline { grid-template-columns: 1fr; gap: var(--space-5); }
  .engage-timeline-connector { display: none; }
}
image-slot { border-radius: var(--radius-lg); overflow: hidden; display: block; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent-900); color: #fff; padding: 12px 18px; z-index: 2000; border-radius: 0 0 var(--radius-md) 0; text-decoration: none; font-weight: 600; }
.skip-link:focus { left: 0; }

/* Progressive-enhancement scroll reveal: invisible only once JS confirms it can animate it back in */
.__reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.__reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .__reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover:not(:disabled), a.blueprint:hover, .card.blueprint:hover, .card:hover { transform: none !important; }
  html { scroll-behavior: auto !important; }
  .flow-pulse { animation: none !important; opacity: .65 !important; left: 50% !important; }
  .hero-flow-line { animation: none !important; }
}

/* Solution hero connector animation */
.hero-flow-line { animation: hero-dash 2.4s linear infinite; }
@keyframes hero-dash { to { stroke-dashoffset: -20; } }

/* "How We..." roadmap connector */
.engage-roadmap { position: relative; }
.engage-roadmap::before { content: ""; position: absolute; left: 24px; right: 24px; top: 42px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent-2-300)); z-index: 0; box-shadow: 0 1px 2px rgba(29,31,32,0.06); }
.engage-roadmap.engage-roadmap--flush::before { top: 18px; left: 0; right: 0; }
.engage-roadmap > * { position: relative; z-index: 1; }
.engage-roadmap [data-node], .engage-roadmap > .card { transition: transform 0.2s ease; box-shadow: 0 2px 6px rgba(29,31,32,0.08); }
.engage-roadmap:hover [data-node], .engage-roadmap:hover > .card { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .engage-roadmap [data-node], .engage-roadmap > .card { transition: none; }
  .engage-roadmap:hover [data-node], .engage-roadmap:hover > .card { transform: none; }
}
@media (max-width: 767px) {
  .engage-roadmap { grid-template-columns: 1fr !important; }
  .engage-roadmap::before { display: none; }
}

/* Hero flow-line pulse (product hero visuals) */
@keyframes flowPulse {
  0% { left: 2%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 97%; opacity: 0; }
}
.flow-pulse { animation: flowPulse 5.5s ease-in-out infinite; }

/* Responsive layout system (P1-R01) */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: var(--space-6) !important; } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr !important; row-gap: var(--space-5) !important; } }

/* PDPL 4-stage grids: 4 -> 2x2 -> stacked */
@media (max-width: 767px) { [style*="repeat(4, minmax(90px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 420px) { [style*="repeat(4, minmax(90px"] { grid-template-columns: 1fr !important; } }

@media (max-width: 767px) {
  .product-copy { order: 1 !important; }
  .product-visual { order: 2 !important; }
}
@media (max-width: 900px) { [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 420px) { [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; } }

@media (max-width: 639px) {
  h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  h2 { font-size: clamp(24px, 7vw, 30px) !important; }
  .feature-list { grid-template-columns: 1fr !important; }
  .grid-auto { grid-template-columns: 1fr !important; }
  [style*="minmax(180px"], [style*="minmax(200px"], [style*="minmax(220px"], [style*="minmax(230px"], [style*="minmax(240px"], [style*="minmax(260px"], [style*="minmax(280px"], [style*="minmax(300px"], [style*="minmax(320px"], [style*="minmax(340px"] { grid-template-columns: 1fr !important; }
  /* Any inline grid/flex row using column-gap on a two-item split (hero/product panels) should stack */
  [style*="order:1"], [style*="order:2"] { min-width: 0; }
  section, header nav, footer { overflow-x: hidden; }
  img, svg, image-slot { max-width: 100%; }
  .card, .icon-tile, .btn, input, select, textarea { min-width: 0; }
}
@media (min-width: 640px) and (max-width: 767px) {
  [style*="minmax(220px"], [style*="minmax(230px"], [style*="minmax(240px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  section > div, footer > div { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 767px) {
  .product-copy { order: 1 !important; }
  .product-visual { order: 2 !important; }
}
@media (max-width: 900px) { .hero-graphic { display: none; } }
/* Global overflow guard */
html, body { overflow-x: hidden; max-width: 100%; }
* { min-width: 0; }
input, select, textarea, .btn { max-width: 100%; }

/* Fixed-header scroll & focus offsets (P-header-a11y) */
html { scroll-padding-top: var(--header-h, 64px); }
[id], :target { scroll-margin-top: var(--header-h, 64px); }
nav a[aria-current="page"], #mobile-menu-panel a[aria-current="page"] { color: var(--color-accent-700) !important; font-weight: 700; }
#solutions-menu-panel a[aria-current="page"] { background: var(--color-accent-100); }
[inert] { pointer-events: none; }

/* Contact-form file control & phone row */
.file-label:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 359px) {
  .phone-row { flex-direction: column; }
  .phone-row select { width: 100% !important; }
}