:root {
    --cp-navy: #062b55;
    --cp-blue: #0c5fb8;
    --cp-blue-dark: #073b75;
    --cp-cyan: #21b8c7;
    --cp-ink: #14263a;
    --cp-muted: #607085;
    --cp-soft: #f3f7fb;
    --cp-line: #dce6f0;
    --cp-white: #fff;
    --cp-radius: 1.25rem;
    --cp-shadow: 0 1.25rem 3.5rem rgba(6, 43, 85, .12);
}

html { scroll-behavior: smooth; }
body { color: var(--cp-ink); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.65; }
a { color: var(--cp-blue); }
img { max-width: 100%; height: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 2000; padding: .75rem 1rem; background: #fff; color: var(--cp-navy); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(220,230,240,.9); backdrop-filter: blur(12px); }
.navbar { min-height: 82px; }
.navbar-brand img { object-fit: contain; }
.navbar .nav-link { color: var(--cp-ink); font-weight: 600; padding: .65rem .8rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--cp-blue); }
.btn { border-radius: .75rem; font-weight: 700; padding: .7rem 1.2rem; }
.btn-primary { background: var(--cp-blue); border-color: var(--cp-blue); }
.btn-primary:hover { background: var(--cp-blue-dark); border-color: var(--cp-blue-dark); }
.btn-outline-primary { color: var(--cp-blue); border-color: var(--cp-blue); }
.hero { position: relative; overflow: hidden; padding: 6.5rem 0 5rem; background: radial-gradient(circle at 85% 15%, rgba(33,184,199,.22), transparent 28%), linear-gradient(145deg, #f9fcff 0%, #edf5fd 100%); }
.hero::after { content: ""; position: absolute; width: 28rem; height: 28rem; right: -12rem; bottom: -16rem; border: 4rem solid rgba(12,95,184,.06); border-radius: 50%; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--cp-blue); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--cp-cyan); }
.display-title { color: var(--cp-navy); font-size: clamp(2.05rem, 3vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.lead-copy { color: var(--cp-muted); font-size: clamp(1.08rem, 1.6vw, 1.28rem); max-width: 43rem; }
.hero-visual { position: relative; z-index: 1; padding: .8rem; background: rgba(255,255,255,.7); border: 1px solid #fff; border-radius: 1.5rem; box-shadow: var(--cp-shadow); }
.hero-visual img { display: block; width: 100%; height: auto; border-radius: 1rem; object-fit: contain; }
.floating-stat { position: absolute; left: -1.2rem; bottom: 2rem; padding: .85rem 1rem; background: #fff; border-radius: .85rem; box-shadow: 0 .8rem 2rem rgba(6,43,85,.18); font-size: .9rem; font-weight: 700; }
.section-space { padding: 6rem 0; }
.section-soft { background: var(--cp-soft); }
.section-dark { color: #fff; background: linear-gradient(135deg, var(--cp-navy), #0a467f); }
.section-title { color: var(--cp-navy); font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.16; }
.section-dark .section-title { color: #fff; }
.section-intro { color: var(--cp-muted); font-size: 1.12rem; max-width: 47rem; }
.section-dark .section-intro { color: rgba(255,255,255,.76); }
.feature-card { height: 100%; padding: 2rem; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--cp-shadow); }
.feature-number { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--cp-blue), var(--cp-cyan)); border-radius: .85rem; font-weight: 800; }
.feature-card h3 { color: var(--cp-navy); font-size: 1.25rem; font-weight: 800; }
.feature-card p { color: var(--cp-muted); margin: 0; }
.ai-feature-panel { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3.5rem); background: linear-gradient(135deg, #edf7ff, #f7fcff); border: 1px solid rgba(12,95,184,.18); border-radius: var(--cp-radius); box-shadow: 0 1rem 2.5rem rgba(6,43,85,.08); }
.ai-feature-panel::after { position: absolute; right: -4rem; bottom: -6rem; width: 13rem; height: 13rem; content: ""; border: 2rem solid rgba(33,184,199,.1); border-radius: 50%; pointer-events: none; }
.ai-feature-panel > .row { position: relative; z-index: 1; }
.security-card { height: 100%; padding: 2rem; color: var(--cp-ink); background: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: var(--cp-radius); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.12); }
.security-card-mark { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--cp-blue), var(--cp-cyan)); border-radius: 1rem; font-size: .78rem; font-weight: 900; letter-spacing: .06em; }
.security-card h3 { color: var(--cp-navy); font-size: 1.25rem; font-weight: 800; }
.security-card p { margin: 0; color: var(--cp-muted); }
.product-shot { padding: .75rem; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); }
.product-shot img { display: block; width: 100%; height: auto; border-radius: .8rem; object-fit: contain; }
.check-list { padding: 0; margin: 1.5rem 0 0; list-style: none; }
.check-list li { position: relative; padding: .45rem 0 .45rem 2rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .42rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; color: #fff; background: var(--cp-cyan); border-radius: 50%; font-size: .8rem; font-weight: 900; }
.logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: center; }
.logo-item { display: grid; min-height: 82px; place-items: center; padding: .8rem; background: #fff; border: 1px solid var(--cp-line); border-radius: .8rem; }
.logo-item img { width: auto; max-height: 46px; object-fit: contain; }
.integration-map { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.25rem; }
.integration-hub { grid-column: 1 / -1; padding: 1.5rem; color: #fff; text-align: center; background: linear-gradient(135deg, var(--cp-navy), var(--cp-blue)); border-radius: 1rem; box-shadow: var(--cp-shadow); }
.integration-node { padding: 1.35rem; background: #fff; border: 1px solid var(--cp-line); border-radius: 1rem; box-shadow: 0 .7rem 1.8rem rgba(6,43,85,.08); }
.integration-node-logo { display: block; width: auto; max-width: 100%; height: 34px; margin-bottom: .65rem; object-fit: contain; object-position: left center; }
.integration-node-logo-wide { height: 25px; }
.integration-node-logo-square { height: 38px; }
.integration-node strong { display: block; color: var(--cp-navy); font-size: 1.1rem; }
.integration-node span { color: var(--cp-muted); font-size: .9rem; }
.integration-node-featured { grid-column: 1 / -1; border-color: rgba(12,95,184,.35); background: linear-gradient(135deg, #fff, #eef6ff); }
.integration-card { height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); }
.integration-card-header { padding: 1.5rem; color: #fff; background: var(--cp-navy); }
.integration-card-heading { display: flex; gap: 1rem; align-items: center; }
.integration-card-logo { flex: 0 0 auto; order: 2; width: auto; max-width: 155px; height: 42px; padding: .35rem .55rem; margin-left: auto; background: #fff; border-radius: .55rem; object-fit: contain; }
.integration-card-logo-square { width: 52px; }
.integration-card-logo-arca { width: 64px; height: 58px; padding: .2rem; }
.integration-card-title { min-width: 0; order: 1; }
.integration-card-heading .software-marks { order: 2; justify-content: flex-end; margin: 0 0 0 auto; }
.integration-card-heading-grid .integration-card-title { flex: 0 0 calc(66.666% - .5rem); max-width: calc(66.666% - .5rem); }
.integration-card-heading-grid .software-marks { flex: 0 0 calc(33.333% - .5rem); max-width: calc(33.333% - .5rem); gap: .25rem; }
.integration-card-heading-grid .software-mark { padding: .15rem .35rem; font-size: .62rem; }
.integration-card-header h2 { margin: 0; font-size: 1.45rem; font-weight: 800; }
.integration-card-body { padding: 1.75rem; }
.integration-card-body .check-list { font-size: .95rem; }
.data-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.data-flow-system { padding: 2rem; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); box-shadow: 0 .8rem 2rem rgba(6,43,85,.08); }
.data-flow-system h3 { color: var(--cp-navy); font-size: 1.35rem; font-weight: 800; }
.data-flow-system ul { margin-bottom: 0; }
.data-flow-arrows { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--cp-blue); font-weight: 800; text-align: center; }
.data-flow-arrow { font-size: 2rem; line-height: 1; }
.route-card { height: 100%; padding: 1.75rem; background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); }
.route-card-label { display: inline-block; padding: .25rem .65rem; margin-bottom: 1rem; color: var(--cp-blue-dark); background: #e9f4ff; border-radius: 2rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.content-narrow { max-width: 760px; }
.software-marks { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .65rem; }
.software-mark { padding: .2rem .5rem; color: var(--cp-navy); background: #edf4fb; border-radius: .35rem; font-size: .72rem; font-weight: 800; line-height: 1.2; }
.cta-panel { padding: clamp(2rem, 5vw, 4.5rem); color: #fff; background: radial-gradient(circle at 100% 0, rgba(33,184,199,.38), transparent 32%), var(--cp-navy); border-radius: 1.75rem; box-shadow: var(--cp-shadow); }
.cta-panel h2 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; }
.page-hero { padding: 5rem 0 4rem; background: linear-gradient(145deg, #f9fcff, #edf5fd); }
.form-panel { padding: clamp(1.5rem, 4vw, 3rem); background: #fff; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); }
.form-label { color: var(--cp-navy); font-weight: 700; }
.form-control { min-height: 52px; border-color: #cbd9e6; border-radius: .7rem; }
textarea.form-control { min-height: 150px; }
.form-control:focus { border-color: var(--cp-blue); box-shadow: 0 0 0 .2rem rgba(12,95,184,.15); }
.form-status { display: none; padding: 1rem; margin-top: 1rem; border-radius: .75rem; }
.form-status.is-success { display: block; color: #075d3b; background: #e5f8ef; }
.form-status.is-error { display: block; color: #8c1f28; background: #fdebed; }
.site-footer { color: #fff; background: #041f3c; }
.footer-title { margin-bottom: 1rem; color: #fff; font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.footer-copy { color: rgba(255,255,255,.68); }
.footer-links li + li { margin-top: .55rem; }
.footer-links a, .footer-contact { color: rgba(255,255,255,.78); text-decoration: none; }
.footer-links a:hover, .footer-contact:hover { color: #fff; }
.footer-rule { margin: 2.5rem 0 1.5rem; border-color: rgba(255,255,255,.16); }

@media (max-width: 991.98px) {
    .navbar-collapse { padding: 1rem 0 1.25rem; }
    .hero { padding-top: 4rem; }
    .hero-visual { margin-top: 2.5rem; transform: none; }
    .logo-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .section-space { padding: 4.25rem 0; }
    .display-title { font-size: 2.05rem; }
    .section-title { font-size: 1.85rem; }
    .logo-strip { grid-template-columns: repeat(2, 1fr); }
    .integration-map { grid-template-columns: 1fr; }
    .integration-hub { grid-column: auto; }
    .integration-node-featured { grid-column: auto; }
    .integration-card-heading { align-items: flex-start; flex-direction: column; }
    .integration-card-logo, .integration-card-heading .software-marks { order: initial; margin-left: 0; }
    .integration-card-heading .software-marks { justify-content: flex-start; }
    .integration-card-heading-grid .integration-card-title,
    .integration-card-heading-grid .software-marks { flex-basis: auto; max-width: 100%; }
    .data-flow { grid-template-columns: 1fr; }
    .data-flow-arrows { padding: .5rem 0; }
    .data-flow-arrow { transform: rotate(90deg); }
    .floating-stat { left: .5rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}