:root {
  --ink: #111a31;
  --muted: #5f687b;
  --blue: #3f66e7;
  --blue-2: #5f83ff;
  --line: #dfe5f0;
  --soft: #f6f8fc;
  --soft-blue: #edf3ff;
  --white: #ffffff;
  --radius: 20px;
  --shadow: 0 24px 70px rgba(29, 51, 103, .14);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.section-pad { padding: 88px 0; }
.section-pad-small { padding: 50px 0 78px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(221,226,238,.72);
}
.nav-wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { width: 170px; flex: 0 0 auto; }
.brand img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: .92rem; }
.site-nav > a:not(.nav-cta) { position: relative; color: #283247; }
.site-nav > a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-9px; height:2px; width:0; background:var(--blue); transition:.25s; }
.site-nav > a:not(.nav-cta):hover::after { width:100%; }
.nav-cta { background: linear-gradient(135deg, #3659cf, #527bf2); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; box-shadow: 0 12px 24px rgba(61,96,215,.22); }
.menu-toggle { display:none; background:none; border:0; width:42px; height:42px; padding:9px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; background:var(--ink); margin:6px 0; transition:.2s; }

.hero { padding-top: 54px; overflow: hidden; background: radial-gradient(circle at 50% 28%, rgba(95,131,255,.08), transparent 28%), #fff; }
.hero-grid { display:grid; grid-template-columns: .92fr 1.08fr; gap: 54px; align-items:center; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:.78rem; letter-spacing:.27em; font-weight:800; }
.hero h1 { margin:0; font-size: clamp(3.2rem, 6vw, 5.8rem); line-height:.98; letter-spacing:-.055em; }
.hero-lede { max-width:650px; margin:22px 0 0; color:#46516a; font-size:1.12rem; line-height:1.7; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 22px; border-radius:999px; font-weight:750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(135deg, #3659cf, #4f7af0); box-shadow:0 14px 28px rgba(65,100,225,.24); }
.btn-secondary { color:#2647ac; border:1.5px solid #5775df; background:#fff; }
.btn-light { background:#fff; color:var(--ink); padding-inline:28px; }
.hero-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.benefit { display:flex; gap:13px; align-items:center; font-size:.83rem; color:#334057; }
.benefit p { margin:0; line-height:1.35; }
.icon { width:26px; height:26px; flex:0 0 auto; position:relative; }
.icon-bars::before { content:""; position:absolute; bottom:2px; left:2px; width:3px; height:10px; border:2px solid var(--blue); border-radius:2px; box-shadow:7px -6px 0 -2px #fff,7px -6px 0 0 var(--blue),14px -11px 0 -2px #fff,14px -11px 0 0 var(--blue); }
.icon-screen::before { content:""; position:absolute; inset:3px 1px 7px; border:2px solid var(--blue); border-radius:2px; }
.icon-screen::after { content:""; position:absolute; width:9px; height:2px; background:var(--blue); left:8px; bottom:3px; }
.icon-layers::before, .icon-layers::after { content:""; position:absolute; width:15px; height:10px; border:2px solid var(--blue); transform:rotate(30deg) skewX(-28deg); left:5px; top:4px; }
.icon-layers::after { top:10px; opacity:.7; }

.dashboard-shell { border:1px solid #cfd6e5; border-radius:24px; background:#111827; box-shadow:var(--shadow); overflow:hidden; transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.dashboard-topbar { height:50px; display:flex; align-items:center; gap:8px; padding:0 16px; color:#fff; font-size:.84rem; border-bottom:1px solid rgba(255,255,255,.08); }
.mini-mark { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-weight:900; }
.dashboard-body { display:grid; grid-template-columns:118px 1fr; min-height:430px; }
.dash-sidebar { background:linear-gradient(180deg,#1a2441,#202743); color:#aeb7c9; padding:18px 10px; display:flex; flex-direction:column; gap:7px; font-size:.66rem; }
.dash-sidebar span { padding:9px 8px; border-radius:6px; white-space:nowrap; }
.dash-sidebar .active { background:#3e63dc; color:#fff; }
.dash-content { background:#f7f9fd; padding:20px; }
.dash-title { font-weight:800; font-size:1.04rem; color:#0f172a; margin-bottom:15px; }
.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metrics-grid article, .chart-panel, .donut-card, .pipeline-card { background:#fff; border:1px solid #e6eaf2; border-radius:10px; padding:13px; }
.metrics-grid small { display:block; color:#727c90; font-size:.61rem; }
.metrics-grid strong { display:block; margin-top:3px; font-size:1.18rem; }
.metrics-grid em { display:block; margin-top:2px; color:#3a63df; font-size:.54rem; font-style:normal; }
.spark { margin-top:12px; height:22px; position:relative; overflow:hidden; }
.spark::after { content:""; position:absolute; inset:5px 0 0; border-top:2px solid #5f8cff; transform:skewY(-7deg); }
.spark-b::after { transform:skewY(-13deg); }
.spark-c::after { border-color:#9b6ef3; transform:skewY(-9deg); }
.chart-panel { margin-top:10px; }
.panel-head { display:flex; justify-content:space-between; font-size:.62rem; color:#4f596b; }
.bar-chart { height:85px; display:flex; align-items:flex-end; gap:14px; padding:18px 8px 4px; border-bottom:1px solid #e8ecf4; }
.bar-chart i { flex:1; display:block; background:linear-gradient(180deg,#a9c4ff,#7197f4); border-radius:3px 3px 0 0; }
.lower-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:10px; margin-top:10px; }
.donut-card, .pipeline-card { min-height:126px; }
.donut-card > strong, .pipeline-card > strong { font-size:.62rem; }
.donut { width:76px; height:76px; margin:12px auto 0; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#3f66e7 0 78%,#e5ebf8 78% 100%); position:relative; }
.donut::after { content:""; position:absolute; width:52px; height:52px; border-radius:50%; background:#fff; }
.donut span { z-index:1; font-weight:800; font-size:.78rem; }
.pipeline-row { display:grid; grid-template-columns:60px 1fr 25px; gap:6px; align-items:center; margin-top:10px; font-size:.51rem; color:#5d667a; }
.pipeline-row i { height:7px; border-radius:999px; background:#e8edf8; position:relative; overflow:hidden; }
.pipeline-row i::after { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w); background:#3f66e7; border-radius:inherit; }
.pipeline-row b { color:#424d62; font-weight:700; }

.proof-strip { background:linear-gradient(180deg,#fbfcfe,#f5f7fa); border-block:1px solid #eef1f5; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.proof-grid > div { min-height:118px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; text-align:center; }
.proof-grid > div:not(:last-child)::after { content:""; position:absolute; right:0; width:1px; height:46px; background:#dfe3ea; }
.proof-grid strong { font-size:1.55rem; letter-spacing:-.02em; }
.proof-grid span { margin-top:4px; font-size:.65rem; letter-spacing:.18em; color:#60708e; }

.section-heading.split { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:70px; }
.section-heading h2, .work-intro h2, .cta-inner h2 { margin:0; letter-spacing:-.04em; line-height:1.05; }
.section-heading h2 { font-size:clamp(2.2rem,4vw,3.5rem); }
.section-heading.split > p { color:#56627a; font-size:1rem; max-width:540px; margin:0 0 4px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:38px; }
.service-card { min-height:286px; padding:25px; border:1px solid #e2e6ed; border-radius:14px; background:#fff; display:flex; flex-direction:column; transition:.25s; }
.service-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(29,51,103,.09); }
.service-card.featured { background:linear-gradient(145deg,#eff4ff,#f8fbff); border-color:#ccd9ff; }
.service-icon { color:var(--blue); font-size:2rem; line-height:1; height:44px; }
.service-card h3 { margin:13px 0 9px; font-size:1.1rem; }
.service-card p { margin:0; color:#5c6678; font-size:.91rem; }
.service-card a { margin-top:auto; width:36px; height:36px; display:grid; place-items:center; border:1px solid #6b85e3; color:#395ccf; border-radius:50%; font-size:1.1rem; }

.approach-section { background:#fff; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:34px; }
.step { position:relative; }
.step:not(:last-child)::after { content:""; position:absolute; top:20px; left:75%; width:55%; height:1px; background:#cbd8ff; }
.step-top { display:flex; align-items:center; gap:14px; }
.step-top span { width:42px; height:42px; display:grid; place-items:center; border:1.5px solid #6482e5; border-radius:50%; color:#1d3f9d; font-weight:700; background:#f8faff; z-index:1; }
.step-top b { font-size:.96rem; }
.step p { color:#627087; font-size:.84rem; margin:13px 0 0 56px; max-width:210px; }

.work-section { background:linear-gradient(180deg,#fafbfc,#f7f9fb); border-top:1px solid #eef1f4; }
.work-grid { display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:22px; align-items:start; }
.work-intro { padding-right:24px; }
.work-intro h2 { font-size:clamp(2.3rem,4vw,3.5rem); }
.work-intro > p:not(.eyebrow) { color:#606d83; margin:18px 0 24px; }
.project-card h3 { margin:15px 0 3px; font-size:.97rem; }
.project-card p { margin:0; color:#788398; font-size:.78rem; }
.project-visual { height:170px; border-radius:10px; overflow:hidden; position:relative; box-shadow:0 12px 26px rgba(35,49,76,.08); }
.dark-dashboard { background:#17243d; padding:16px; }
.pv-top { display:flex; gap:5px; }.pv-top span { width:5px; height:5px; border-radius:50%; background:#5f789f; }
.pv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:20px; }
.pv-grid i { height:52px; border-radius:5px; background:linear-gradient(180deg,#213758,#1a2b49); border:1px solid #2f4a72; position:relative; }
.pv-grid i::after { content:""; position:absolute; left:12px; bottom:10px; right:12px; height:20px; background:linear-gradient(135deg,transparent 0 15%,#3cc7df 16% 19%,transparent 20% 36%,#3cc7df 37% 40%,transparent 41% 58%,#3cc7df 59% 62%,transparent 63%); }
.website-visual { background:#fff; border:1px solid #e3e7ef; }
.web-nav { height:20px; border-bottom:1px solid #e8ebf1; }
.web-copy { position:absolute; left:18px; top:42px; width:52%; display:flex; flex-direction:column; gap:8px; }
.web-copy b { font-size:.85rem; line-height:1.1; }.web-copy span { width:70%; height:5px; background:#e6eaf1; border-radius:5px; }.web-copy button { width:46px; height:16px; border:0; border-radius:4px; color:#fff; background:var(--blue); font-size:.35rem; }
.web-shape { position:absolute; right:-20px; top:32px; width:110px; height:110px; border-radius:42% 58% 53% 47% / 50% 38% 62% 50%; background:radial-gradient(circle at 35% 35%,#90b0ff,#415ab2 45%,#142244 76%); transform:rotate(21deg); }
.app-visual { background:#f7f9fd; border:1px solid #e1e7f1; display:grid; grid-template-columns:44px 1fr; }
.app-side { background:#eef2f8; border-right:1px solid #dde4ef; }.app-main { padding:12px; }.app-head { width:60%; height:11px; border-radius:8px; background:#dbe3f3; margin-bottom:12px; }.app-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.app-cards i { height:54px; background:#fff; border:1px solid #dfe5ef; border-radius:7px; box-shadow:0 6px 14px rgba(49,67,105,.06); }

.cta-section { position:relative; overflow:hidden; background:linear-gradient(135deg,#0f1b32 0%,#17284d 65%,#1f3370 100%); color:#fff; }
.cta-section::after { content:""; position:absolute; right:-80px; top:-170px; width:460px; height:460px; border-radius:50%; border:90px solid rgba(98,124,225,.12); }
.cta-inner { min-height:190px; display:flex; justify-content:space-between; gap:30px; align-items:center; position:relative; z-index:1; }
.eyebrow.light { color:#9cb6ff; }
.cta-inner h2 { font-size:clamp(2rem,4vw,3.1rem); }
.cta-inner p:not(.eyebrow) { margin:10px 0 0; color:#d5deef; }

.site-footer { background:#0c1629; color:#9dabbe; font-size:.8rem; }
.footer-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner a { color:#c9d5e8; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns:1fr; }
  .dashboard-shell { max-width:760px; width:100%; margin:0 auto; transform:none; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .work-grid { grid-template-columns:1fr 1fr; }
  .work-intro { grid-column:1 / -1; max-width:620px; }
  .hero-benefits { max-width:720px; }
}

@media (max-width: 820px) {
  .nav-wrap { min-height:72px; }
  .brand { width:145px; }
  .menu-toggle { display:block; z-index:2; }
  .site-nav { position:absolute; top:72px; left:0; right:0; padding:22px 20px 28px; background:#fff; border-bottom:1px solid #e7eaf0; box-shadow:0 18px 35px rgba(22,35,63,.08); display:none; flex-direction:column; align-items:stretch; gap:8px; }
  .site-nav.open { display:flex; }
  .site-nav > a { padding:10px 4px; }
  .nav-cta { text-align:center; margin-top:6px; }
  .section-heading.split { grid-template-columns:1fr; gap:18px; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .step:not(:last-child)::after { display:none; }
  .proof-grid { grid-template-columns:1fr; padding-block:10px; }
  .proof-grid > div { min-height:88px; }
  .proof-grid > div:not(:last-child)::after { right:auto; bottom:0; width:70%; height:1px; }
  .cta-inner { padding-block:36px; align-items:flex-start; flex-direction:column; }
}

@media (max-width: 620px) {
  .container { width:min(calc(100% - 28px), var(--max)); }
  .section-pad { padding:64px 0; }
  .section-pad-small { padding:38px 0 62px; }
  .hero { padding-top:38px; }
  .hero h1 { font-size:clamp(2.9rem,16vw,4.6rem); }
  .hero-lede { font-size:1rem; }
  .hero-benefits { grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .dashboard-body { grid-template-columns:1fr; }
  .dash-sidebar { display:none; }
  .dash-content { padding:12px; }
  .metrics-grid { grid-template-columns:1fr; }
  .lower-grid { grid-template-columns:1fr; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:240px; }
  .steps-grid { grid-template-columns:1fr; }
  .step p { max-width:none; }
  .work-grid { grid-template-columns:1fr; }
  .work-intro { grid-column:auto; }
  .project-visual { height:205px; }
  .footer-inner { min-height:84px; flex-direction:column; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}