:root { --ink:#10293c; --night:#061d2d; --ocean:#176b9b; --aqua:#168c93; --lime:#f4b942; --paper:#f4f7fa; --white:#fff; --line:#d3e0e8; --muted:#5a6d7a; --danger:#c94e58; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, Aptos, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; }
.site-header { width:min(1240px,calc(100% - 48px)); height:84px; margin:auto; display:flex; gap:30px; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-weight:850; letter-spacing:.08em; text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand-logo { width:38px; height:38px; object-fit:cover; object-position:50% 38%; border-radius:10px; border:1px solid #e2d8ef; box-shadow:0 5px 14px rgba(36,21,54,.16); }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; color:var(--white); background:linear-gradient(135deg,var(--aqua),var(--ocean)); border-radius:9px; letter-spacing:0; }
nav { display:flex; align-items:center; gap:24px; } nav a { color:#4e4560; font-weight:650; font-size:.92rem; text-decoration:none; } .nav-login { border:1px solid #c9bbdb; border-radius:999px; padding:9px 16px; color:var(--ink); }
.nav-toggle { display:none; }
.hero { min-height:510px; background:radial-gradient(circle at 75% 22%,#1c709d 0,#103f60 34%,var(--night) 76%); color:var(--white); display:grid; grid-template-columns:1fr; align-items:center; padding:72px max(24px,calc((100vw - 1180px)/2)); }
.eyebrow { margin:0 0 12px; color:var(--aqua); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:800; }.hero .eyebrow { color:#9ce35c; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:680px; font-size:clamp(2.55rem,5vw,4.8rem); line-height:1.02; letter-spacing:-.045em; margin-bottom:22px; } h1 span { color:var(--lime); } h2 { font-size:clamp(2rem,3.1vw,3rem); letter-spacing:-.035em; line-height:1.08; margin-bottom:16px; }.hero-text { max-width:630px; font-size:1.08rem; color:#eee8f8; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 16px; }.button { border:0; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; border-radius:10px; padding:12px 19px; text-decoration:none; font-weight:780; font-size:.93rem; }.button-primary { background:var(--lime); color:#2c1a11; }.button-secondary { border:1px solid #b9a6d4; background:transparent; color:var(--white); }.microcopy { color:#d4c8e6; font-size:.82rem; }
.command-card { padding:24px; background:rgba(255,255,255,.96); color:var(--ink); border:1px solid rgba(255,255,255,.35); border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.3); }.logo-card { display:flex; align-items:center; gap:9px; margin-bottom:15px; color:#31576d; font-weight:780; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }.logo-card img { width:42px; height:42px; object-fit:cover; object-position:50% 38%; border-radius:10px; border:1px solid #a8dce5; }.dashboard-shot-wrap { height:292px; overflow:hidden; border:1px solid #c8dce6; border-radius:11px; background:#eaf3f6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }.dashboard-shot-wrap img { display:block; width:100%; height:auto; object-fit:cover; object-position:top center; }.dashboard-caption { margin:12px 2px 0; color:#5c7180; font-size:.73rem; line-height:1.45; }.card-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; color:#31576d; font-weight:780; font-size:.82rem; }.live-label { color:#217262; }.live-label i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#2bc383; margin-right:5px; }.metric-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:20px 0 12px; }.metric-row div { border-left:3px solid var(--aqua); padding-left:11px; }.metric-row span,.metric-row small { display:block; color:var(--muted); font-size:.73rem; }.metric-row strong { display:block; font-size:1.65rem; letter-spacing:-.04em; }.metric-row .alert-number { color:var(--danger); }.mini-chart { position:relative; height:102px; border-bottom:1px solid #d8e4e9; background:repeating-linear-gradient(0deg,transparent,transparent 24px,#edf3f5 25px); overflow:hidden; }.line { position:absolute; height:2px; width:93%; transform-origin:left; border-radius:4px; }.line-one { top:62px; left:3%; background:var(--aqua); transform:rotate(-13deg); }.line-two { top:33px; left:3%; background:#2a7cb2; transform:rotate(8deg); }.dot { position:absolute; width:9px; height:9px; border:2px solid var(--white); border-radius:50%; }.dot-one { right:4%; top:29px; background:var(--aqua); }.dot-two { right:27%; top:41px; background:#2a7cb2; }.exception-preview { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:start; margin-top:19px; padding:12px; border-radius:10px; background:#fff3f2; }.exception-preview strong,.exception-preview small { display:block; }.exception-preview strong { font-size:.8rem; }.exception-preview small { font-size:.72rem; color:#765853; }.severity { padding:3px 7px; border-radius:999px; font-size:.65rem; font-weight:800; }.critical { color:#a32121; background:#ffd7d6; }
.showcase { padding:74px max(24px,calc((100vw - 1120px)/2)); text-align:center; background:#fff; }.showcase .eyebrow { margin-bottom:9px; }.showcase h2 { max-width:720px; margin:0 auto 15px; }.showcase > p:not(.eyebrow) { max-width:760px; margin:0 auto 32px; color:var(--muted); }.showcase figure { margin:0; overflow:hidden; border:1px solid #bfd2df; border-radius:18px; background:#edf4f8; box-shadow:0 28px 55px rgba(10,43,64,.16); }.showcase figure img { display:block; width:100%; height:auto; }.showcase figcaption { padding:12px 16px; text-align:left; color:#5a6d7a; font-size:.78rem; background:#fff; }.core-panel { padding:76px max(24px,calc((100vw - 1120px)/2)); background:radial-gradient(circle at 85% 20%,#247da7 0,#123f60 42%,#071d2d 100%); color:#fff; display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center; }.core-panel .eyebrow { color:#f4cf6b; }.core-panel h2 { max-width:590px; }.core-panel > div > p:last-child { max-width:650px; margin:0; color:#d8e7ef; font-size:1rem; }.core-panel ul { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.2); }.core-panel li { padding:16px 0; border-bottom:1px solid rgba(255,255,255,.2); color:#d7e7ee; font-size:.9rem; }.core-panel li span { display:block; margin-bottom:4px; color:#f4cf6b; font-weight:850; font-size:.93rem; }
.section { padding:96px max(24px,calc((100vw - 1120px)/2)); }.section-intro { max-width:710px; }.section-intro > p:not(.eyebrow) { color:var(--muted); }
.control-flow { display:grid; grid-template-columns:repeat(5,1fr); list-style:none; padding:0; margin:46px 0 0; border-top:1px solid var(--line); counter-reset:flow; }.control-flow li { min-height:185px; padding:24px 17px 0 0; margin-top:-1px; border-top:4px solid #9fd8d4; }.control-flow li:not(:last-child) { margin-right:16px; }.control-flow span { display:block; color:#18978f; font-size:.75rem; font-weight:800; }.control-flow strong { display:block; margin:9px 0 7px; font-size:1.08rem; }.control-flow p { color:var(--muted); font-size:.86rem; }
.packages { background:#eaf2f6; }.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:42px; }.package-grid article { min-height:204px; padding:22px; border:1px solid #cddfe8; border-radius:13px; background:var(--white); transition:transform .2s,box-shadow .2s; }.package-grid article:hover { transform:translateY(-3px); box-shadow:0 15px 28px rgba(10,43,64,.12); }.package-index { color:var(--aqua); font-weight:850; font-size:.75rem; }.package-grid h3 { margin:18px 0 8px; font-size:1.15rem; }.package-grid p { margin:0; color:var(--muted); font-size:.88rem; }
.package-grid article { display:flex; flex-direction:column; }.package-grid article.is-selected { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(22,140,147,.14),0 15px 28px rgba(10,43,64,.12); }.package-select { width:100%; margin-top:auto; padding:10px 12px; border:1px solid #bad2df; border-radius:9px; background:#f6fafc; color:#155271; cursor:pointer; font-weight:780; font-size:.85rem; }.package-select:hover,.package-grid article.is-selected .package-select { border-color:var(--aqua); background:#e8f4f5; }.package-note { margin:22px 0 0; color:var(--muted); font-size:.9rem; }
.controls { background:var(--night); color:var(--white); }.controls-panel { display:grid; grid-template-columns:1fr .8fr; gap:80px; align-items:center; }.controls h2 { max-width:560px; }.controls-panel div > p:not(.eyebrow) { color:#bdd2dc; }.controls ul { padding:0; margin:0; list-style:none; }.controls li { padding:15px 0; border-bottom:1px solid #244254; color:#d7e7ed; }.controls li span { color:var(--lime); padding-right:11px; }
.pilot { display:grid; grid-template-columns:1.1fr .9fr; gap:55px; align-items:center; }.pilot > div > p:not(.eyebrow) { max-width:620px; color:var(--muted); }.pilot-steps { padding:12px 23px; border-left:4px solid var(--aqua); background:#fff; box-shadow:0 15px 35px rgba(52,29,83,.08); }.pilot-steps p { padding:11px 0; margin:0; border-bottom:1px solid #ece5f3; font-size:.9rem; }.pilot-steps p:last-child { border:0; }.pilot-steps b { color:var(--aqua); padding-right:10px; }
.access-card { width:min(1120px,calc(100% - 48px)); margin:0 auto 88px; padding:39px 42px; border-radius:17px; background:linear-gradient(115deg,#113f60,#176b9b); color:#fff; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:32px; }.access-card h2 { font-size:1.75rem; margin-bottom:7px; }.access-card p:not(.eyebrow) { margin:0; color:#d9e9f0; max-width:690px; }.access-card .eyebrow { color:#f4cf6b; }.form-message { grid-column:1/-1; padding-top:15px; font-size:.85rem; }
footer { width:min(1240px,calc(100% - 48px)); margin:auto; padding:30px 0; display:flex; justify-content:space-between; gap:20px; color:#5a6d7a; font-size:.76rem; border-top:1px solid var(--line); }
footer a { color:#176b9b; font-weight:750; text-decoration:none; } .legal-page { width:min(920px,calc(100% - 48px)); margin:0 auto; padding:70px 0 100px; }.legal-page h1 { color:#12334c; font-size:clamp(2.4rem,5vw,4.4rem); }.legal-page .lead { max-width:800px; color:#486477; font-size:1.1rem; }.legal-page section { margin-top:28px; padding:25px 28px; border:1px solid #d5e3ea; border-radius:14px; background:#fff; box-shadow:0 12px 28px rgba(10,43,64,.05); }.legal-page h2 { font-size:1.35rem; }.legal-page section p { margin-bottom:0; color:#557082; }
.brand-logo { width:56px; height:56px; border-radius:14px; object-fit:contain; object-position:center; background:#fff; padding:2px; }
.brand-word { display:flex; flex-direction:column; font-size:1.32rem; line-height:1; letter-spacing:.085em; }.brand-word small { margin-top:5px; color:#557287; font-size:.48rem; font-weight:800; letter-spacing:.105em; white-space:nowrap; }
.hero { min-height:530px; padding:68px max(24px,calc((100vw - 1180px)/2)); background:radial-gradient(circle at 76% 18%,#4b9cd2 0,#2879bc 28%,#15537f 58%,#0a2e4b 100%); }
.hero-brand-lockup { display:flex; align-items:center; gap:15px; margin:0 0 23px; }.hero-brand-lockup img { width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.22)); }.hero-brand-lockup strong { display:block; font-size:clamp(2.2rem,4vw,3.75rem); font-weight:900; letter-spacing:.075em; line-height:.9; }.hero-brand-lockup span { display:block; margin-top:9px; color:#d9edf8; font-size:.73rem; font-weight:750; letter-spacing:.055em; }
.hero .eyebrow { color:#c8ebf1; }.hero h1 span { color:#b7edf0; }.hero-text { color:#edf7fb; }.button-secondary { border-color:#b6d9eb; background:rgba(255,255,255,.06); }.microcopy { color:#d3e9f6; }
.cart { background:#fff; }.cart-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; margin-top:38px; }.addon-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.addon-list label { display:flex; align-items:center; gap:10px; min-height:64px; padding:16px; border:1px solid #cbdde8; border-radius:12px; background:#f7fbfd; color:#244e67; font-weight:750; cursor:pointer; }.addon-list input { width:18px; height:18px; accent-color:#168c93; }.cart-review { padding:27px; border-radius:15px; background:linear-gradient(145deg,#14496f,#1e79aa); color:#fff; box-shadow:0 20px 40px rgba(12,55,84,.17); }.cart-review h3 { font-size:1.3rem; margin-bottom:10px; }.cart-review .eyebrow { color:#f4cf6b; }.cart-package { color:#fff; font-weight:850; font-size:1.05rem; }.cart-addons { min-height:54px; margin:0 0 16px; padding-left:20px; color:#d7edf7; font-size:.9rem; }.cart-price { margin:0 0 20px; color:#c6e5f2; font-size:.84rem; }.cart-review .button { width:100%; }
@media (max-width:850px) { .cart-layout { grid-template-columns:1fr; }.addon-list { grid-template-columns:1fr; } }

/* Unified corporate-blue presentation: one quiet canvas, dark readable type, blue reserved for meaning. */
:root { --ink:#17374f; --night:#123d61; --ocean:#2d7eb8; --aqua:#207f99; --lime:#e9b540; --paper:#eaf3f8; --white:#ffffff; --line:#c7dce8; --muted:#547084; --danger:#c94e58; }
body { background:var(--paper); }
.site-header { background:var(--paper); }
nav a { color:#36566d; }.nav-login { border-color:#9bc5dc; background:#f5fafc; color:#244b67; }
.hero { background:linear-gradient(118deg,#143a5d 0%,#236fa8 58%,#3b91be 100%); }
.hero-brand-lockup strong { color:#f7fbfd; }.hero-brand-lockup span,.hero .eyebrow,.hero-text,.microcopy { color:#d9edf6; }
.hero h1 span { color:#bdebf0; }.button-primary { background:#e9b540; color:#17374f; }.button-secondary { border-color:#b9dce9; background:rgba(255,255,255,.08); }
.showcase,.packages,.cart,.section { background:var(--paper); }.showcase figure { background:#f4f9fc; border-color:#b9d3e1; box-shadow:0 22px 45px rgba(20,62,91,.14); }.showcase figcaption { background:#f4f9fc; color:#4d697c; }
.showcase figure { width:min(980px,100%); margin-left:auto; margin-right:auto; }.showcase figure img { width:100%; image-rendering:auto; }
.core-panel { background:linear-gradient(118deg,#143a5d 0%,#205d8b 100%); }.core-panel .eyebrow,.core-panel li span { color:#e9c565; }.core-panel > div > p:last-child,.core-panel li { color:#d9eaf3; }
.package-grid article,.pilot-steps,.legal-page section { border-color:#c7dce8; box-shadow:0 12px 26px rgba(20,62,91,.07); }.package-grid article { background:#f9fcfe; }.package-select { background:#f3f9fc; color:#245572; border-color:#b9d4e2; }.package-select:hover,.package-grid article.is-selected .package-select { background:#e1f1f5; border-color:#207f99; }
.access-card,.cart-review { background:linear-gradient(118deg,#173e60,#2878ad); }.pilot-steps { background:#f9fcfe; }.cart { border-top:1px solid #d1e2ec; }.addon-list label { background:#f7fbfd; border-color:#c7dce8; }
footer { border-top-color:#c7dce8; color:#527083; } footer a { color:#216d9d; }

/* Top-of-page package selection with the real CEDRIQ product view alongside it. */
.hero { grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:44px; }
.hero-product-rail { align-self:center; padding:18px; border:1px solid rgba(202,230,241,.55); border-radius:18px; background:rgba(5,39,68,.3); box-shadow:0 22px 48px rgba(4,29,50,.2); }
.hero-package-heading { display:grid; gap:3px; margin-bottom:12px; }.hero-package-heading span { color:#bfe7ef; font-size:.74rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.hero-package-heading strong { color:#fff; font-size:1.05rem; line-height:1.25; }
.hero-package-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.hero-package-options a { padding:8px 9px; border:1px solid rgba(205,233,243,.3); border-radius:8px; background:rgba(255,255,255,.08); color:#eef9fd; font-size:.78rem; font-weight:750; text-decoration:none; }.hero-package-options a:hover { background:#e9b540; border-color:#e9b540; color:#17374f; }
.hero-dashboard-snippet { margin-top:14px; padding:10px; border-radius:11px; background:#f5fbfe; color:#244b67; }.hero-dashboard-snippet p { margin:0 0 7px; color:#235877; font-size:.74rem; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }.hero-dashboard-zoom { height:268px; overflow:hidden; border:1px solid #a7c9db; border-radius:7px; background:#eaf3f8; }.hero-dashboard-zoom img { display:block; width:168%; max-width:none; margin-left:-14%; transform:translateY(-148px); border:0; border-radius:0; }.hero-dashboard-snippet span { display:block; margin-top:7px; color:#4b6b7f; font-size:.72rem; line-height:1.35; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; }.hero-product-rail { max-width:620px; } }
.command-card .logo-card { color:#4e4560; }
.command-card .logo-card img { border-color:#e2d8ef; }
.dashboard-shot-wrap { height:auto; aspect-ratio:16 / 9; border-color:#ddd2ec; background:#f3edf8; }
.dashboard-shot-wrap img { height:100%; object-fit:cover; object-position:top center; }
.dashboard-caption { color:#625c6d; }
.command-card { padding:16px; }
.button-primary { background:#f4b942; color:#211a0d; }
@media (max-width:850px) { .hero,.controls-panel,.pilot { grid-template-columns:1fr; }.hero { padding-top:65px; padding-bottom:65px; }.command-card { max-width:580px; }.control-flow { grid-template-columns:repeat(2,1fr); }.package-grid { grid-template-columns:repeat(2,1fr); }.definition-strip { flex-wrap:wrap; justify-content:center; text-align:center; }.access-card { grid-template-columns:1fr; gap:20px; }.access-card .button { justify-self:start; } }
@media (max-width:640px) { .site-header { height:70px; width:calc(100% - 32px); }.nav-toggle { display:inline-flex; border:1px solid var(--line); background:#fff; padding:8px 11px; border-radius:7px; color:var(--ink); font-weight:700; } nav { display:none; position:absolute; right:16px; top:65px; z-index:3; flex-direction:column; align-items:stretch; padding:16px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.13); } nav.is-open { display:flex; }.hero { gap:35px; padding-left:24px; padding-right:24px; }.metric-row { grid-template-columns:1fr; }.section { padding:68px 24px; }.control-flow,.package-grid { grid-template-columns:1fr; }.control-flow li:not(:last-child) { margin-right:0; }.access-card { width:calc(100% - 32px); padding:28px; } footer { flex-direction:column; width:calc(100% - 32px); } }

/* CEDRIQ product palette — shared with the application workspace. */
:root { --ink:#17374f; --night:#123d61; --ocean:#2d7eb8; --aqua:#207f99; --lime:#e9b540; --paper:#eaf3f8; --white:#ffffff; --line:#c7dce8; --muted:#547084; --danger:#c94e58; }
body { background:#eaf3f8; }
.site-header { background:#eaf3f8; }
.brand-logo,.command-card .logo-card img { border-color:#b9d3e1; box-shadow:0 5px 14px rgba(20,62,91,.14); }
nav a { color:#294d66; }.nav-login { border-color:#9bc5dc; background:#f8fcfe; color:#244b67; }
.hero { background:linear-gradient(118deg,#123d61 0%,#226b9d 58%,#3b91be 100%); }
.hero .eyebrow,.hero-brand-lockup span,.hero-text,.microcopy { color:#d9edf6; }
.hero h1 span { color:#bdebf0; }
.button-primary { background:#e9b540; color:#17374f; }.button-secondary { border-color:#b9dce9; background:rgba(255,255,255,.08); }
.showcase,.section,.packages,.cart { background:#eaf3f8; }
.showcase figure { border-color:#9fc4d8; background:#f8fcfe; box-shadow:0 24px 55px rgba(20,62,91,.16); }
.showcase figcaption { background:#f8fcfe; color:#4d697c; }
.core-panel { background:linear-gradient(118deg,#123d61 0%,#1f5f8e 100%); }
.core-panel .eyebrow,.core-panel li span { color:#e9c565; }.core-panel > div > p:last-child,.core-panel li { color:#d9eaf3; }
.package-grid article,.pilot-steps,.legal-page section { border-color:#c7dce8; background:#f9fcfe; box-shadow:0 12px 26px rgba(20,62,91,.07); }
.cart { border-top:1px solid #d1e2ec; }.addon-list label { background:#f7fbfd; border-color:#c7dce8; }
.access-card,.cart-review { background:linear-gradient(118deg,#173e60,#2878ad); }
.pilot-steps { border-left-color:#207f99; }.pilot-steps p { border-bottom-color:#d8e7ef; }
footer { border-top-color:#c7dce8; color:#527083; } footer a { color:#216d9d; }
