:root {
  --site-primary: #241a32;
  --site-on-primary: #ffffff;
  --site-secondary: #f78349;
  --site-on-secondary: #241a32;
  --site-background: #fffaf7;
  --site-on-background: #241a32;
  --site-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-font-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-heading-scale: 1;
  --site-spacing-scale: 1;
  --site-radius-scale: 1;
  --site-decoration-opacity: 1;
  --muted: #716a79;
  --line: #eee2dc;
  --paper: #ffffff;
  --lime: #f78349;
  --teal: #8065ae;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--site-font-body); background: #fffaf7; color: var(--site-on-background); }
#site-root { background-color: var(--site-background); color: var(--site-on-background); min-height: 100vh; border-radius: 0; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 23px 0; gap: 24px; }
.brand { display:flex; align-items:center; gap:11px; font-size:22px; font-weight:800; letter-spacing:-1px; }
.brand-mark { display:block; height:32px; width:auto; }
.nav-links { display:flex; align-items:center; gap:29px; color:var(--muted); font-size:13px; font-weight:650; }
.nav-links a:hover, .footer-links a:hover { color:var(--teal); }
.nav-cta, .btn { display:inline-flex; justify-content:center; align-items:center; gap:10px; border-radius:999px; padding:13px 19px; font-weight:750; font-size:13px; border:1px solid transparent; transition:transform .2s, background .2s; cursor:pointer; }
.nav-cta, .btn-dark { background:var(--site-primary); color:white; }
.nav-cta:hover, .btn:hover { transform:translateY(-2px); }
.menu-toggle { display:none; border:1px solid var(--line); background:white; border-radius:50%; width:42px; height:42px; }
.hero { display:grid; grid-template-columns: 1.08fr .92fr; align-items:center; gap:54px; padding:72px 0 84px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--teal); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:850; }
.eyebrow:before { content:""; width:24px; height:2px; background:var(--teal); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:var(--site-font-heading); font-size:clamp(48px,6.1vw,76px); letter-spacing:-.075em; line-height:.99; font-weight:760; margin:22px 0 25px; max-width:650px; }
.accent { color:var(--teal); }
.hero-copy { max-width:495px; color:var(--muted); font-size:16px; line-height:1.8; margin-bottom:30px; }
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn { padding:15px 21px; }
.btn-lime { background:var(--site-secondary); color:var(--site-primary); }
.btn-outline { border-color:#e2d6de; color:var(--site-on-background); background:transparent; }
.btn svg, .nav-cta svg { width:15px; height:15px; }
.hero-proof { display:flex; align-items:center; gap:12px; margin-top:34px; color:var(--muted); font-size:12px; }
.proof-dots { display:flex; padding-left:4px; }
.proof-dots span { width:30px; height:30px; display:grid; place-items:center; margin-left:-6px; border:2px solid var(--site-background); border-radius:50%; background:#fde3d3; color:var(--site-primary); font-size:8.5px; letter-spacing:-.2px; font-weight:800; }
.proof-dots span:nth-child(2){background:#ece4f6}.proof-dots span:nth-child(3){background:#fbd3bd}.proof-dots span:nth-child(4){background:#ddd2ee}
.visual { position:relative; min-height:455px; display:flex; align-items:center; justify-content:center; }
.visual-glow { position:absolute; width:370px; height:370px; border-radius:50%; background:#eee6f6; filter:blur(1px); opacity:var(--site-decoration-opacity); }
.dashboard { position:relative; width:min(100%,440px); border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.88); border-radius:24px; padding:22px; box-shadow:0 30px 80px rgba(36,26,50,.13); transform:rotate(-2deg); }
.dash-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:19px; border-bottom:1px solid var(--line); }
.dash-title { font-size:12px; font-weight:800; color:var(--site-primary); }
.status { display:flex; align-items:center; gap:6px; border-radius:30px; padding:6px 9px; background:#eaf7dc; color:#3b7037; font-size:9px; font-weight:800; }
.status:before { content:""; width:6px; height:6px; border-radius:50%; background:#6cab4c; }
.dash-label { margin:21px 0 5px; font-size:10px; color:var(--muted); }
.dash-number { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; color:var(--site-primary); }
.dash-number strong { font-size:37px; letter-spacing:-2px; }
.dash-number span { color:var(--teal); font-size:10px; font-weight:800; }
.chart { width:100%; height:128px; margin:16px 0 10px; }
.chart-grid { stroke:#f0e8ee; stroke-width:1; }
.chart-line { fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart-area { fill:url(#area); }
.dash-bottom { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.metric { background:#f7f2fb; padding:12px; border-radius:12px; }
.metric span { display:block; color:var(--muted); font-size:9px; margin-bottom:7px; }
.metric strong { color:var(--site-primary); font-size:15px; }
.float-card { position:absolute; z-index:2; display:flex; gap:11px; align-items:center; background:white; padding:13px 16px; border-radius:15px; box-shadow:0 15px 35px rgba(36,26,50,.13); color:var(--site-primary); }
.float-card.one { left:-28px; top:44%; }.float-card.two { right:-15px; bottom:58px; }
.float-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#fde3d3; color:#c95a22; }
.float-icon svg { width:19px; height:19px; }
.float-card strong { display:block; font-size:11px; margin-bottom:4px; }.float-card small { color:var(--muted); font-size:9px; }
.trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:23px 0; }
.trust-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.trust-label { color:var(--muted); font-size:11px; max-width:145px; line-height:1.5; }
.trust-item { color:#5b5266; font-weight:800; font-size:14px; letter-spacing:-.4px; display:flex; align-items:center; gap:8px; }
.trust-item svg { width:18px; height:18px; color:var(--teal); }
.section { padding:100px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:42px; }
.section-head h2 { font-size:clamp(35px,4vw,49px); letter-spacing:-.06em; line-height:1.05; max-width:550px; margin:14px 0 0; }
.section-head p { color:var(--muted); line-height:1.75; max-width:365px; margin:0 0 3px; font-size:14px; }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service { background:var(--paper); border:1px solid var(--line); border-radius:calc(20px * var(--site-radius-scale)); padding:28px; min-height:246px; transition:transform .2s,box-shadow .2s; }
.service:hover { transform:translateY(-5px); box-shadow:0 18px 35px rgba(36,26,50,.07); }
.service-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#f1ebf8; color:var(--teal); margin-bottom:28px; }
.service-icon svg { width:22px; height:22px; }
.service h3 { font-size:17px; letter-spacing:-.5px; margin-bottom:11px; }
.service p { font-size:13px; color:var(--muted); line-height:1.75; margin-bottom:0; }
.about-band { background:var(--site-primary); color:#f7faf5; padding:84px 0; position:relative; overflow:hidden; }
.about-band:after { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(247,131,73,.16); border-radius:50%; right:-130px; top:-180px; box-shadow:0 0 0 50px rgba(247,131,73,.04),0 0 0 100px rgba(128,101,174,.05); opacity:var(--site-decoration-opacity); }
.about-grid { position:relative; z-index:1; display:grid; grid-template-columns:.95fr 1.05fr; gap:90px; align-items:center; }
.about-band .eyebrow { color:var(--site-secondary); }.about-band .eyebrow:before { background:var(--site-secondary); }
.about-band h2 { font-size:clamp(37px,4.5vw,55px); letter-spacing:-.065em; line-height:1.04; margin:17px 0 24px; }
.about-band p { color:#c6bdd2; font-size:14px; line-height:1.85; max-width:480px; }
.about-points { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.about-point { padding-top:19px; border-top:1px solid rgba(255,255,255,.17); }
.about-point strong { display:block; color:var(--site-secondary); font-size:27px; letter-spacing:-1px; margin-bottom:9px; }
.about-point span { color:#cbc3d6; font-size:12px; line-height:1.65; }
.process { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:10px; }
.step { border-top:1px solid #e2d6de; padding-top:20px; }
.step-no { font-size:10px; letter-spacing:1px; color:var(--teal); font-weight:850; }
.step h3 { font-size:19px; letter-spacing:-.6px; margin:18px 0 10px; }
.step p { color:var(--muted); font-size:13px; line-height:1.8; margin:0; }
.cta { background:#f3edf9; padding:68px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta h2 { font-size:clamp(34px,4vw,46px); line-height:1.05; letter-spacing:-.06em; margin:12px 0 12px; max-width:580px; }
.cta p { color:var(--muted); font-size:14px; margin:0; line-height:1.7; }
.footer { background:#1a1224; color:#f3eff7; padding:34px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer .brand { font-size:19px; }.footer .brand-mark { height:28px; }
.footer-note { color:#a69db2; font-size:11px; margin:0; }
.footer-links { display:flex; gap:20px; color:#cfc7da; font-size:11px; }
.footer-links a:hover { color:var(--site-secondary); }
@media (max-width:900px) {
 .hero { gap:25px; padding:55px 0 65px; }.visual { min-height:390px; }.dashboard { padding:17px; }.float-card.one{left:-5px; top:42%}.float-card.two{right:-5px}
 .trust-inner { flex-wrap:wrap; justify-content:center; }.trust-label { max-width:none; width:100%; text-align:center; }
 .about-grid { gap:45px; }.section { padding:78px 0; }
 .menu-toggle { display:grid; place-items:center; }.nav-cta { display:none; }
 .nav-links { display:none; position:absolute; z-index:10; top:68px; left:18px; right:18px; background:white; border:1px solid var(--line); padding:18px; border-radius:16px; flex-direction:column; align-items:stretch; gap:0; box-shadow:0 16px 35px rgba(36,26,50,.12); }.nav-links.open { display:flex; }.nav-links a { padding:12px 5px; }
 .services { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
 .wrap { width:min(100% - 36px, 540px); }.nav { padding:16px 0; }
 .hero { grid-template-columns:minmax(0,1fr); padding:52px 0 48px; gap:25px; }.hero-copy { font-size:15px; }.visual { min-height:360px; margin:0 6px; }.visual-glow { width:300px; height:300px; }.dashboard { max-width:390px; }.float-card.one { top:40%; left:-4px; }.float-card.two { bottom:20px; right:-4px; }
 .trust-inner { gap:18px 25px; }.trust-item { font-size:12px; }
 .section { padding:68px 0; }.section-head { display:block; margin-bottom:28px; }.section-head p { margin-top:17px; }.services { grid-template-columns:1fr; gap:12px; }.service { min-height:0; padding:24px; }.service-icon { margin-bottom:20px; }
 .about-band { padding:66px 0; }.about-grid { grid-template-columns:1fr; gap:25px; }.about-points { gap:18px; }
 .process { grid-template-columns:1fr; gap:25px; }.step { padding-top:16px; }.step h3 { margin-top:12px; }
 .cta { padding:54px 0; }.cta-inner { display:block; }.cta .btn { margin-top:24px; }
 .footer-inner { flex-wrap:wrap; }.footer-note { order:3; width:100%; }.footer-links { gap:13px; }
}
@media (max-width:400px) {
 h1 { font-size:40px; }
 .metric { padding:10px 8px; }.metric strong { font-size:13px; }
 .float-card { padding:11px 12px; }.float-card.one { top:50%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }
/* Brand wordmark: "systems" in purple in the header, orange in the footer */
.brand-accent { color:var(--teal); }
.footer .brand-accent { color:var(--site-secondary); }
.cta .cta-links { margin-top:14px; }