/* Shared visual system. Keep page-specific composition in style.css. */
:root {
  --ds-ink: #0a1828;
  --ds-ink-soft: #2d4051;
  --ds-muted: #617386;
  --ds-subtle: #8796a4;
  --ds-line: #dbe5ee;
  --ds-line-strong: #c6d5e2;
  --ds-blue: #1769ea;
  --ds-blue-dark: #0d55c9;
  --ds-blue-soft: #eaf3ff;
  --ds-mint: #69ddb7;
  --ds-mint-dark: #15956a;
  --ds-mint-soft: #e7f8f1;
  --ds-coral: #ff8b6a;
  --ds-night: #081522;
  --ds-night-2: #102537;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 8px;
  --ds-shadow-sm: 0 8px 20px rgba(29, 76, 119, .08);
  --ds-shadow-md: 0 16px 34px rgba(29, 76, 119, .12);
  --ds-focus: 0 0 0 3px rgba(23, 105, 234, .2);
}

html { text-rendering: optimizeLegibility; }
body { color: var(--ds-ink); font-size: 16px; line-height: 1.5; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
a { transition: color .2s ease, opacity .2s ease; }
button, select, input { letter-spacing: 0; }

.brand-mark {
  border-radius: var(--ds-radius-md);
  box-shadow: 0 8px 16px rgba(23, 105, 234, .2);
}
.brand-copy strong { letter-spacing: 0; }
.brand-copy small { letter-spacing: 1.1px; }
.nav-login:hover { color: var(--ds-blue); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(29, 76, 119, .1); }
.main-nav a.active { color: var(--ds-blue); font-weight: 700; }
.main-nav a.active:after { right: 0; }

.button {
  min-height: 48px;
  border-radius: var(--ds-radius-md);
  padding: 0 21px;
  letter-spacing: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.button svg { flex: 0 0 auto; }
.button:active { transform: translateY(0); }
.button:focus-visible, .hero-demo-link:focus-visible, .menu-toggle:focus-visible { box-shadow: var(--ds-focus); outline: 0; }
.button-primary { background: var(--ds-blue); box-shadow: 0 8px 18px rgba(23, 105, 234, .12); }
.button-primary:hover { background: var(--ds-blue-dark); box-shadow: 0 12px 28px rgba(23, 105, 234, .24); }
.button-small { min-height: 40px; padding: 0 16px; }
.button-outline { border-color: #486077; }
.button-outline:hover { border-color: #66829c; }

.hero-demo-link {
  border-radius: var(--ds-radius-sm);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hero-demo-link:hover { color: var(--ds-blue); }
.hero-demo-link > span { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.hero-demo-link:hover > span { transform: translateX(3px); border-color: var(--ds-blue); background: var(--ds-blue-soft); }

.section-index { line-height: 1; }
.section-index:before { flex: 0 0 auto; }
.section-heading h2, .platform-header h2, .capability-heading h2,
.workflow-copy h2, .results-layout h2, .contact-copy h2 { font-weight: 800; }

.product-tabs button:focus-visible,
.workflow-steps button:focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus);
}
.product-tabs button:hover { color: var(--ds-blue); }
.product-stage.is-changing .product-stage-copy,
.product-stage.is-changing .product-image-frame { animation: scene-in .32s ease both; }
.product-stage.is-changing .product-image-frame { animation-delay: .04s; }

.platform-grid article,
.capability-grid article,
.workflow-visual,
.product-stage,
.product-image-frame,
.modal-panel {
  border-radius: var(--ds-radius-lg);
}
.platform-grid article,
.capability-grid article { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.platform-grid article { overflow: hidden; }
.platform-grid article:after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--ds-mint); transition: right .24s ease; }
.platform-grid article:hover:after { right: 0; }
.platform-grid article > span { border-radius: var(--ds-radius-sm); }
.platform-grid img, .platform-text-icon > b { border-radius: var(--ds-radius-md); }
.platform-foot a:hover { color: var(--ds-blue-dark); }

.capability-grid header > svg,
.contact-service > svg,
.sync-source > svg,
.sync-result > svg,
.sync-core > span { border-radius: var(--ds-radius-md); }
.capability-grid h3 { font-weight: 700; }
.capability-grid article:before { content: ""; position: absolute; left: 35px; top: 0; width: 28px; height: 3px; background: var(--ds-blue); opacity: .65; transition: width .25s ease, opacity .25s ease; }
.capability-grid article:nth-child(2):before { background: var(--ds-mint-dark); }
.capability-grid article:nth-child(3):before { background: var(--ds-coral); }
.capability-grid article:nth-child(4):before { background: var(--ds-mint); }
.capability-grid article:hover:before { width: 56px; opacity: 1; }

.workflow-steps button { position: relative; }
.workflow-steps button:before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ds-blue); transform: scaleY(0); transform-origin: center; transition: transform .2s ease; }
.workflow-steps button.active:before { transform: scaleY(1); }
.workflow-status span b { animation: status-pulse 2s ease-in-out infinite; }
.workflow-progress > i { position: relative; }
.workflow-progress > i:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32px; background: rgba(255,255,255,.35); animation: progress-glint 2.4s ease-in-out infinite; }

.lead-form {
  border-top-width: 2px;
  border-top-color: var(--ds-ink);
}
.lead-form label { color: var(--ds-ink-soft); }
.lead-form input, .lead-form select {
  color: var(--ds-ink);
  transition: border-color .2s ease, background .2s ease;
}
.lead-form input:hover, .lead-form select:hover { border-color: var(--ds-line-strong); }
.lead-form input:focus, .lead-form select:focus {
  border-color: var(--ds-blue);
  box-shadow: 0 1px 0 var(--ds-blue);
}
.lead-form input::placeholder { color: #a3b0bb; }
.lead-form select:invalid { color: #a3b0bb; }
.lead-form .button { min-height: 50px; }
.form-note { line-height: 1.5; }
.form-feedback { display: block; min-height: 18px; margin-top: 12px; color: #d65b49; font-size: 10px; line-height: 1.6; }
.form-feedback.success { color: var(--ds-mint-dark); }
.lead-form.is-submitting .button { opacity: .72; cursor: wait; transform: none; }
.lead-form.is-submitting .button svg { animation: button-spin .8s linear infinite; }

.modal { padding: 24px; }
.modal-panel { box-shadow: 0 24px 70px rgba(4, 13, 21, .28); }
.modal-close {
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.modal-close:hover { color: var(--ds-blue); background: var(--ds-blue-soft); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 0; box-shadow: var(--ds-focus); }
.demo-chat { border-radius: var(--ds-radius-md); }
.demo-input button { border: 0; padding: 4px; color: var(--ds-blue); background: transparent; border-radius: var(--ds-radius-sm); cursor: pointer; }
.demo-input button:hover { background: var(--ds-blue-soft); }
.demo-input button:focus-visible { outline: 0; box-shadow: var(--ds-focus); }
.modal-cta { box-shadow: 0 10px 22px rgba(23, 105, 234, .16); }

.toast {
  min-height: 42px;
  display: flex;
  align-items: center;
  border-radius: var(--ds-radius-md);
  box-shadow: 0 12px 28px rgba(4, 13, 21, .2);
}

@media (max-width: 720px) {
  .button { min-height: 46px; }
  .button-small { min-height: 38px; }
  .modal { padding: 16px; }
  .capability-grid article:before { left: 26px; }
}
@keyframes button-spin { to { transform: rotate(360deg); } }
@keyframes scene-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(105, 221, 183, .32); } 50% { box-shadow: 0 0 0 4px rgba(105, 221, 183, 0); } }
@keyframes progress-glint { from { transform: translateX(-42px); opacity: 0; } 30%, 70% { opacity: 1; } to { transform: translateX(420px); opacity: 0; } }