:root {
  --ink: #102235;
  --muted: #5b6875;
  --navy: #08253d;
  --navy-deep: #051827;
  --teal: #08a8a4;
  --teal-bright: #42d7c7;
  --sky: #dff5f3;
  --line: #d7e0e5;
  --paper: #f6f9fa;
  --white: #fff;
  --amber: #f3a938;
  --danger: #b54242;
  --success: #168163;
  --shadow: 0 14px 35px rgba(4, 30, 47, .10);
  --radius: 18px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Aptos, Arial, sans-serif; line-height: 1.55; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; }
a { color: #006d7d; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--white); color: var(--navy); font-weight: 800; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(5,24,39,.97); box-shadow: 0 4px 15px rgba(0,0,0,.12); }
.nav-wrap { width: min(var(--max), calc(100% - 2.5rem)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: .7rem; color: white; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 36px; height: 36px; object-fit: contain; border-radius: 5px; background: white; }
.brand span { max-width: 225px; font-size: .94rem; line-height: 1.05; }
.nav-links { display: flex; align-items: center; gap: .1rem; }
.nav-links a { padding: .62rem .55rem; color: #dbe9ee; text-decoration: none; font-size: .84rem; font-weight: 700; border-radius: 7px; }
.nav-links a:hover, .nav-links a.active { color: var(--white); background: rgba(66,215,199,.16); }
.nav-links .nav-cta { margin-left: .3rem; color: var(--navy); background: var(--teal-bright); }
.nav-links .nav-cta:hover { background: #fff; color: var(--navy); }
.menu-toggle { display: none; border: 1px solid #5d7180; background: transparent; color: white; padding: .5rem .7rem; border-radius: 8px; }
.hero { color: white; background: radial-gradient(circle at 78% 18%, rgba(66,215,199,.25), transparent 24rem), linear-gradient(128deg, var(--navy-deep), var(--navy) 64%, #0a4a60); overflow: hidden; }
.hero-inner { width: min(var(--max), calc(100% - 2.5rem)); min-height: 510px; margin: 0 auto; padding: 5.7rem 0 4rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px,.9fr); gap: 3.5rem; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; color: var(--teal-bright); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 25px; height: 2px; background: currentColor; }
h1,h2,h3,h4,p { margin-top: 0; }
h1 { margin-bottom: 1.25rem; max-width: 780px; font-size: clamp(2.35rem, 5.4vw, 4.7rem); line-height: 1.02; letter-spacing: -.047em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -.035em; }
h3 { font-size: 1.18rem; line-height: 1.2; }
.hero-copy { max-width: 650px; color: #d8e7ec; font-size: clamp(1rem, 1.6vw, 1.19rem); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .68rem 1rem; border: 1px solid transparent; border-radius: 9px; color: white; background: var(--teal); font-weight: 800; text-decoration: none; }
.button:hover { color: var(--navy); background: var(--teal-bright); }
.button.secondary { color: white; background: transparent; border-color: rgba(255,255,255,.48); }
.button.secondary:hover { color: var(--navy); background: white; }
.button.ink { color: white; background: var(--navy); }
.button.ghost { color: var(--navy); background: transparent; border-color: var(--line); }
.button.small { min-height: 34px; padding: .35rem .62rem; font-size: .85rem; }
.hero-diagram { position: relative; min-height: 330px; border: 1px solid rgba(159,231,223,.27); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.diagram-head { padding: 1.25rem 1.35rem; border-bottom: 1px solid rgba(255,255,255,.17); color: #c9e9e9; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.flow-line { position: absolute; top: 50%; left: 13%; width: 74%; height: 2px; background: linear-gradient(90deg, var(--teal-bright), rgba(66,215,199,.1)); }
.flow-node { position: absolute; width: 104px; min-height: 98px; padding: .75rem .5rem; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: #0e344d; color: white; text-align: center; font-size: .75rem; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.flow-node span { display: block; width: 24px; height: 24px; margin: 0 auto .5rem; border: 2px solid var(--teal-bright); border-radius: 50%; }
.flow-node.one { left: 7%; top: 50%; }.flow-node.two { left: 37%; top: 50%; }.flow-node.three { left: 67%; top: 50%; }
.flow-key { position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem; display: flex; gap: .8rem; justify-content: space-between; color: #b7d4d8; font-size: .76rem; }
.flow-key strong { color: white; }
.content { width: min(var(--max), calc(100% - 2.5rem)); margin: 0 auto; }
.section { padding: 5.25rem 0; }
.section.compact { padding: 3.6rem 0; }
.section.white { background: white; }
.section-head { max-width: 760px; margin-bottom: 2.35rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.pill { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pill.info { color: #05596e; background: #d8f2f5; }.pill.warning { color: #754400; background: #fff1d5; }.pill.success { color: #075c47; background: #d7f3e9; }.pill.danger { color: #832b2b; background: #ffe1e1; }
.grid { display: grid; gap: 1.15rem; }.grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }.grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }.grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.card { padding: 1.45rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 20px rgba(10,42,58,.035); }
.card h3 { margin-bottom: .55rem; }.card p:last-child { margin-bottom: 0; }.card p { color: var(--muted); }
.card .number { display: block; margin-bottom: .7rem; color: var(--teal); font-size: 2rem; font-weight: 900; line-height: 1; }
.stat-card { padding: 1.2rem; background: #f5fbfb; border: 1px solid #cae8e5; border-radius: 13px; }.stat-card strong { display: block; font-size: 1.65rem; color: var(--navy); }.stat-card span { color: var(--muted); font-size: .83rem; }
.notice { padding: 1rem 1.1rem; border-left: 4px solid var(--amber); background: #fff8e9; color: #5d4820; }.notice p:last-child { margin: 0; }.notice strong { color: var(--ink); }
.notice.critical { border-color: var(--danger); background: #fff2f2; color: #6e3131; }.notice.teal { border-color: var(--teal); background: #edfbfa; color: #235b61; }
.page-hero { padding: 4.4rem 0 3.4rem; color: white; background: linear-gradient(115deg, var(--navy-deep), #0a3c53); }.page-hero .content { max-width: var(--max); }.page-hero h1 { max-width: 900px; margin-bottom: .85rem; font-size: clamp(2.25rem,4.7vw,4rem); }.page-hero p { max-width: 780px; margin-bottom: 0; color: #d4e6eb; font-size: 1.13rem; }
.step-list { counter-reset: cap-step; display: grid; gap: .8rem; }.step { position: relative; padding: 1.15rem 1.15rem 1.15rem 4.4rem; border: 1px solid var(--line); border-radius: 13px; background: white; }.step::before { counter-increment: cap-step; content: counter(cap-step, decimal-leading-zero); position: absolute; left: 1rem; top: 1rem; color: var(--teal); font-size: 1.25rem; font-weight: 900; }.step h3 { margin-bottom: .3rem; }.step p { margin-bottom: 0; color: var(--muted); }
.timeline { display: grid; grid-template-columns: repeat(8,minmax(135px,1fr)); gap: .65rem; overflow-x: auto; padding-bottom: .8rem; }.timeline-item { min-height: 174px; padding: 1rem; border-top: 4px solid var(--teal); background: white; box-shadow: 0 4px 15px rgba(5,33,49,.06); }.timeline-item b { display:block; color: var(--teal); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }.timeline-item h3 { margin:.4rem 0; font-size: 1rem; }.timeline-item p { margin:0; color:var(--muted); font-size:.83rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }.data-table { width: 100%; border-collapse: collapse; min-width: 660px; }.data-table th,.data-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }.data-table th { color: #e4f6f4; background: var(--navy); font-size: .77rem; letter-spacing:.03em; text-transform: uppercase; }.data-table tr:last-child td { border-bottom: none; }.data-table td { color: #314555; font-size: .91rem; }.data-table tbody tr:hover { background:#f2fbfa; }
.check-list { list-style: none; margin: 0; padding: 0; }.check-list li { position: relative; padding: .58rem .1rem .58rem 1.75rem; border-bottom: 1px solid var(--line); }.check-list li::before { content: '✓'; position:absolute; left:.1rem; color:var(--success); font-weight:900; }.check-list li:last-child { border-bottom:0; }
.accordion { border-top: 1px solid var(--line); }.accordion details { border-bottom: 1px solid var(--line); background: white; }.accordion summary { padding: 1.1rem .2rem; font-weight: 800; cursor: pointer; list-style: none; }.accordion summary::after { content: '+'; float: right; color:var(--teal); font-size:1.3rem; }.accordion details[open] summary::after { content:'−'; }.accordion .accordion-body { padding: 0 .2rem 1.15rem; color: var(--muted); }
.two-col { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2.5rem; align-items:start; }.sticky-card { position: sticky; top: 100px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.form-field { display:flex; flex-direction:column; gap:.35rem; }.form-field.full { grid-column:1/-1; }.form-field label { color:#304557; font-size:.84rem; font-weight:800; }.form-field small { color:var(--muted); }.form-field input,.form-field select,.form-field textarea { width:100%; padding:.66rem .7rem; border:1px solid #b8c8d1; border-radius:8px; color:var(--ink); background:white; }.form-field textarea { min-height:92px; resize:vertical; }.form-field input:invalid:not(:placeholder-shown),.form-field select.invalid { border-color:var(--danger); }.form-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem; }.form-message { margin-top:1rem; padding:.8rem 1rem; border-radius:8px; display:none; }.form-message.show { display:block; }.form-message.success { color:#075c47; background:#d9f5e9; }.form-message.error { color:#742b2b; background:#ffe4e4; }
.readiness-result { margin-top: 1.25rem; padding:1.4rem; border:1px solid #b7e3de; background:#f0fbfa; border-radius:14px; display:none; }.readiness-result.show { display:block; }.score-circle { display:flex; width:90px; height:90px; align-items:center; justify-content:center; float:right; margin:0 0 1rem 1rem; border:7px solid var(--teal); border-radius:50%; color:var(--navy); font-size:1.85rem; font-weight:900; }.score-grid { clear:both; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }.score-grid div { padding:.5rem; border-radius:7px; background:white; color:var(--muted); font-size:.75rem; }.score-grid b { display:block; color:var(--navy); font-size:1rem; }
.metric-panel { padding: 1.4rem; border-radius: 16px; color:white; background: linear-gradient(135deg,#0a3a4e,#0c6d73); }.metric-panel h3 { margin-bottom:.8rem; }.metric-panel p { color:#d1eeee; }.metric-value { display:block; margin:.7rem 0; color:var(--teal-bright); font-size:2.8rem; font-weight:900; letter-spacing:-.05em; }.legend { display:flex; flex-wrap:wrap; gap:.8rem; color:var(--muted); font-size:.8rem; }.legend i { display:inline-block; width:8px; height:8px; margin-right:.25rem; border-radius:50%; background:var(--teal); }.legend i.amber { background:var(--amber); }.legend i.red { background:var(--danger); }
.comparison { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:1rem; }.comparison .vs { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--sky); color:var(--navy); font-size:.7rem; font-weight:900; }
.footer { padding: 3.2rem 0 1.4rem; color:#d4e1e5; background:var(--navy-deep); }.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }.footer h3 { margin-bottom:.6rem; color:white; font-size:1rem; }.footer a { display:block; width:fit-content; margin:.35rem 0; color:#bcd2d8; font-size:.88rem; }.footer p { color:#bcd2d8; font-size:.88rem; }.footer-bottom { margin-top:2.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.18); color:#a9c0c7; font-size:.75rem; }
.portal-shell { min-height:100vh; background:#eef4f6; }.portal-header { padding: 1.15rem 0; color:white; background:var(--navy-deep); }.portal-header .content { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.portal-header h1 { margin:0; font-size:1.45rem; }.portal-header p { margin: .1rem 0 0; color:#b8d0d5; font-size:.83rem; }.demo-badge { padding:.28rem .6rem; border:1px solid #e6ad45; border-radius:99px; color:#ffd58d; font-size:.7rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.portal-layout { width:min(1500px,calc(100% - 2rem)); margin:0 auto; display:grid; grid-template-columns:240px minmax(0,1fr); gap:1.25rem; padding:1.25rem 0 3rem; }.portal-nav { position:sticky; top:90px; height:fit-content; padding:.5rem; border-radius:12px; background:white; box-shadow:var(--shadow); }.portal-nav button { display:flex; width:100%; align-items:center; gap:.6rem; padding:.66rem .72rem; border:0; border-radius:7px; color:#405465; background:transparent; text-align:left; font-weight:750; font-size:.84rem; }.portal-nav button:hover,.portal-nav button.active { color:var(--navy); background:#dff5f3; }.portal-main { min-width:0; }.portal-section { display:none; }.portal-section.active { display:block; }.portal-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }.portal-topline h2 { margin-bottom:.25rem; font-size:1.75rem; }.portal-topline p { margin:0; color:var(--muted); }.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }.dashboard-grid .card { min-height:126px; }.dashboard-grid strong { display:block; color:var(--navy); font-size:1.7rem; }.chart { display:flex; height:220px; align-items:end; gap:8%; padding:1rem 1.1rem 2.1rem; border-radius:12px; background:linear-gradient(to top, #edf5f6 1px, transparent 1px); background-size:100% 44px; }.bar { position:relative; flex:1; max-width:75px; min-width:25px; background:linear-gradient(var(--teal),#087a83); border-radius:6px 6px 0 0; }.bar::after { content:attr(data-label); position:absolute; left:50%; bottom:-1.5rem; transform:translateX(-50%); color:var(--muted); font-size:.7rem; }.bar span { position:absolute; left:50%; top:-1.4rem; transform:translateX(-50%); color:var(--navy); font-size:.73rem; font-weight:800; }.qa-list { display:grid; gap:.65rem; }.qa-item { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border-left:4px solid var(--amber); border-radius:8px; background:white; box-shadow:0 3px 10px rgba(10,42,58,.05); }.qa-item.danger { border-color:var(--danger); }.qa-item strong { display:block; }.qa-item p { margin:.15rem 0 0; color:var(--muted); font-size:.84rem; }.empty-state { padding:2rem; border:1px dashed #9bb3bd; border-radius:12px; color:var(--muted); background:#f9fcfc; text-align:center; }.hidden { display:none !important; }
@media (max-width: 1040px) { .nav-links a { padding:.55rem .38rem; font-size:.76rem; }.grid.four,.dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.footer-grid { grid-template-columns:1.5fr 1fr 1fr; }.footer-grid > :last-child { grid-column:2; }.portal-layout { grid-template-columns:185px minmax(0,1fr); }.hero-inner { gap:2rem; } }
@media (max-width: 800px) { .nav-wrap { min-height:65px; }.menu-toggle { display:block; }.nav-links { position:fixed; top:65px; right:0; bottom:0; left:20%; display:none; align-content:start; padding:1rem; background:var(--navy-deep); overflow-y:auto; }.nav-links.open { display:grid; }.nav-links a { padding:.85rem; font-size: .95rem; }.nav-links .nav-cta { margin:.5rem 0 0; }.brand span { font-size:.78rem; }.hero-inner { min-height:auto; grid-template-columns:1fr; padding:4rem 0 3rem; }.hero-diagram { min-height:290px; }.page-hero { padding:3.5rem 0 2.8rem; }.grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }.two-col { grid-template-columns:1fr; }.sticky-card { position:static; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > :first-child { grid-column:1/-1; }.footer-grid > :last-child { grid-column:auto; }.portal-layout { grid-template-columns:1fr; }.portal-nav { position:static; display:flex; gap:.25rem; overflow-x:auto; padding:.45rem; }.portal-nav button { flex:0 0 auto; width:auto; white-space:nowrap; }.portal-main { min-width:0; }.portal-topline { display:block; }.portal-topline .button { margin-top: .8rem; } }
@media (max-width: 560px) { .content,.nav-wrap,.hero-inner { width:min(100% - 1.35rem, var(--max)); }.section { padding:3.6rem 0; }.grid.two,.grid.three,.grid.four,.form-grid,.score-grid,.dashboard-grid { grid-template-columns:1fr; }.form-field.full { grid-column:auto; }.form-actions .button { width:100%; }.footer-grid { grid-template-columns:1fr; }.footer-grid > :first-child { grid-column:auto; }.comparison { grid-template-columns:1fr; }.comparison .vs { margin:auto; }.hero-diagram { min-height:255px; }.flow-node { width:82px; min-height:86px; font-size:.65rem; }.flow-key { font-size:.65rem; }.portal-header .content { align-items:flex-start; flex-direction:column; }.dashboard-grid .card { min-height:0; }.table-wrap { border-radius:8px; } }
@media print { .site-header,.footer,.button,.menu-toggle,.portal-nav,.demo-badge { display:none !important; } body,.portal-shell { background:white; } .section { padding:1rem 0; } .page-hero,.hero,.portal-header { padding:1rem 0; color:black; background:white; } .page-hero p,.hero p,.portal-header p { color:#333; } .card,.table-wrap { box-shadow:none; } .portal-layout { width:100%; display:block; padding:0; } .portal-section { display:block !important; break-inside:avoid; margin-bottom:1.2rem; } .portal-section:not(.active) { display:none !important; } }