@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --navy: #062b57; --blue: #0764c5; --bright-blue: #1687e8; --mist: #f4f9fc; --ink: #10223a; --body: #53657a; --line: #d8e3ed; --white: #fff; --display: "Manrope", sans-serif; --mono: "DM Mono", monospace; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.6; } a { color: inherit; text-decoration: none; } .container { width: min(1160px, calc(100% - 48px)); margin: auto; }
.site-header { height: 82px; display: flex; align-items: center; border-bottom: 1px solid #eaf0f5; background: rgba(255,255,255,.96); position: relative; z-index: 5; }.navigation { display: flex; align-items: center; justify-content: space-between; gap: 28px; }.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 18px; font-weight: 800; line-height: 1; }.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--blue); color: #fff; font-size: 18px; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); }.brand small { display: block; margin-top: 5px; color: #66809b; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }.brand-logo { display: block; width: 184px; height: 55px; overflow: hidden; position: relative; flex: 0 0 auto; }.brand-logo img { max-width: none; width: 200px; height: auto; position: absolute; top: -110px; left: -8px; }.nav-links { display: flex; gap: 31px; margin-left: auto; }.nav-links a { color: #445b73; font-size: 14px; font-weight: 700; }.nav-links a:hover,.nav-links .active,.nav-contact { color: var(--blue); }.nav-contact { font-size: 14px; font-weight: 800; }
.hero { overflow: hidden; background: linear-gradient(114deg,#f7fbff,#eef7fd 55%,#e1f1fc); }.hero-grid { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 42px; }.hero-copy { padding: 74px 0; position: relative; z-index: 1; }.eyebrow { margin: 0 0 16px; color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } h1,h2,h3,p { margin-top: 0; } h1,h2,h3 { line-height: 1.18; } h1 { max-width: 670px; margin-bottom: 23px; color: var(--navy); font-size: clamp(39px,4.2vw,61px); font-weight: 800; } h1 span { color: var(--blue); }.hero-intro { max-width: 550px; margin-bottom: 31px; color: var(--body); font-size: 18px; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 27px; }.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 10px 21px; border: 1px solid transparent; font-size: 14px; font-weight: 800; transition: transform .2s,background .2s; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 20px rgba(7,100,197,.16); }.button-primary:hover { background: var(--navy); }.text-link { color: var(--blue); font-size: 14px; font-weight: 800; }.hero-trust { display: flex; align-items: center; gap: 10px; margin-top: 60px; }.hero-trust p { margin: 0; color: #6d8298; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }.trust-line { width: 37px; height: 1px; background: var(--bright-blue); }
.hero-visual { height: 100%; min-height: 505px; position: relative; }.hero-visual::before { content: ""; position: absolute; inset: 52px -145px 42px 20px; background: radial-gradient(circle at 45% 45%,rgba(47,158,237,.24),rgba(142,211,253,.08) 44%,transparent 66%); }.visual-orbit { position: absolute; border: 1px solid rgba(8,116,209,.17); border-radius: 50%; }.orbit-one { width: 410px; height: 410px; top: 90px; left: 20px; }.orbit-two { width: 260px; height: 260px; top: 164px; left: 96px; border-style: dashed; }.visual-line { position: absolute; height: 1px; background: linear-gradient(90deg,transparent,rgba(10,111,205,.7),transparent); transform-origin: left; }.line-one { width: 290px; top: 218px; left: 100px; transform: rotate(26deg); }.line-two { width: 275px; top: 354px; left: 88px; transform: rotate(-31deg); }.visual-node { position: absolute; z-index: 1; width: 12px; height: 12px; border: 3px solid #fff; background: var(--bright-blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(22,135,232,.15); }.node-one { top: 205px; left: 91px; }.node-two { top: 338px; left: 328px; }.node-three { top: 380px; left: 120px; }.node-four { top: 142px; left: 304px; }.data-card { position: absolute; z-index: 2; background: rgba(255,255,255,.93); border: 1px solid #fff; box-shadow: 0 20px 40px rgba(18,87,144,.14); backdrop-filter: blur(9px); }.main-card { top: 178px; right: 2px; width: 268px; padding: 25px; }.card-label { color: var(--bright-blue); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }.main-card strong { display: block; margin: 10px 0 20px; color: var(--navy); font-size: 23px; line-height: 1.25; }.card-chart { display: flex; align-items: flex-end; gap: 7px; height: 40px; border-bottom: 1px solid #dce8f0; }.card-chart i { width: 19px; background: #9bd8ff; }.card-chart i:nth-child(1) { height: 12px; }.card-chart i:nth-child(2) { height: 23px; }.card-chart i:nth-child(3) { height: 18px; }.card-chart i:nth-child(4) { height: 34px; background: var(--bright-blue); }.card-chart i:nth-child(5) { height: 27px; background: var(--blue); }.mini-card { right: 210px; bottom: 73px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--navy); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; }.status-dot { width: 7px; height: 7px; background: #18ae7c; border-radius: 50%; }
.section-space { padding: 105px 0; }.section-heading { margin-bottom: 47px; }.split-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; } h2 { margin-bottom: 0; color: var(--navy); font-size: clamp(30px,3.2vw,43px); font-weight: 800; }.split-heading h2 { max-width: 600px; }.split-heading > p { max-width: 400px; margin: 0 0 5px; color: var(--body); }.service-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.service-card { min-height: 327px; display: flex; flex-direction: column; padding: 25px 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s,transform .2s; }.service-card:hover { background: #f5faff; transform: translateY(-4px); }.featured-service { background: var(--navy); color: #fff; }.featured-service:hover { background: #08396f; }.service-number { color: #89a0b6; font-family: var(--mono); font-size: 10px; }.featured-service .service-number { color: #7ebcf1; }.service-icon { display: grid; place-items: center; width: 39px; height: 39px; margin: 27px 0 19px; color: var(--blue); border: 1px solid #c5d9ea; font-family: var(--mono); font-size: 14px; font-weight: 500; }.featured-service .service-icon { color: #fff; border-color: #3f86c2; }.digital-icon { font-size: 23px; }.cloud-icon { font-size: 24px; }.support-icon { font-size: 25px; }.service-card h3 { margin-bottom: 9px; font-size: 17px; font-weight: 800; }.service-card p { margin-bottom: 15px; color: var(--body); font-size: 13px; line-height: 1.55; }.featured-service p { color: #bedaf0; }.service-card a { margin-top: auto; color: var(--blue); font-size: 12px; font-weight: 800; }.featured-service a { color: #9fdaff; }
.difference { background: var(--mist); }.difference-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: center; }.difference-copy h2 { max-width: 430px; margin-bottom: 21px; }.difference-copy > p:not(.eyebrow) { max-width: 400px; margin-bottom: 24px; color: var(--body); }.value-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #cddce7; border-left: 1px solid #cddce7; }.value-grid article { min-height: 180px; padding: 21px; border-right: 1px solid #cddce7; border-bottom: 1px solid #cddce7; }.value-grid span { color: var(--bright-blue); font-family: var(--mono); font-size: 10px; }.value-grid h3 { margin: 22px 0 6px; color: var(--navy); font-size: 18px; }.value-grid p { margin: 0; color: var(--body); font-size: 13px; }
.purpose { background: #fff; }.purpose-layout { display: grid; grid-template-columns: 170px 1fr; gap: 55px; }.purpose-content { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; }.purpose-content article + article { padding-left: 58px; border-left: 1px solid var(--line); }.purpose-label { display: block; margin-bottom: 16px; color: var(--bright-blue); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.purpose-content h2 { font-size: clamp(25px,2.5vw,34px); }.purpose-content p { margin: 0; color: var(--body); font-size: 16px; }
.contact-cta { padding: 65px 0; background: var(--blue); color: #fff; }.cta-content { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.contact-cta .eyebrow { color: #b6e1ff; margin-bottom: 8px; }.contact-cta h2 { color: #fff; font-size: clamp(31px,3.2vw,43px); }.button-light { background: #fff; color: var(--blue); white-space: nowrap; }.button-light:hover { background: #e6f4ff; }
.site-footer { background: #eaf5fc; color: #45617b; }.footer-main { display: flex; justify-content: space-between; gap: 50px; padding: 57px 0 48px; }.site-footer .brand { color: var(--navy); }.site-footer .brand-mark { background: var(--bright-blue); }.site-footer .brand small { color: #66809b; }.footer-logo { width: 205px; height: 62px; }.footer-logo img { width: 222px; top: -122px; left: -9px; }.footer-brand p { max-width: 355px; margin: 19px 0 0; font-size: 13px; }.footer-links { display: flex; gap: 82px; }.footer-links div { min-width: 128px; display: flex; flex-direction: column; gap: 7px; }.footer-links h3 { margin: 0 0 9px; color: var(--navy); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }.footer-links a { color: #45617b; font-size: 13px; }.footer-links a:hover { color: var(--blue); }.footer-bottom { display: flex; justify-content: space-between; gap: 25px; padding: 18px 0; border-top: 1px solid #c8dce9; color: #66809b; font-family: var(--mono); font-size: 10px; }.footer-bottom p { margin: 0; }
.page-hero { padding: 95px 0 87px; background: linear-gradient(118deg,#f6fbff,#e5f3fd); }.page-hero-layout { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 80px; }.page-hero h1 { margin-bottom: 0; }.page-hero-layout > p { max-width: 395px; margin: 0 0 8px; color: var(--body); font-size: 18px; }.about-intro-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 105px; align-items: center; }.about-pattern { aspect-ratio: 1; max-width: 385px; display: grid; place-items: center; position: relative; overflow: hidden; background: var(--navy); }.about-pattern::before,.about-pattern::after { content: ""; position: absolute; border: 1px solid rgba(166,221,255,.28); border-radius: 50%; }.about-pattern::before { width: 285px; height: 285px; }.about-pattern::after { width: 195px; height: 195px; border-style: dashed; }.about-pattern div { z-index: 1; color: #fff; font-size: 104px; font-weight: 800; line-height: 1; }.about-pattern span { position: absolute; z-index: 1; width: 10px; height: 10px; border: 3px solid var(--navy); border-radius: 50%; background: #55b9f5; box-shadow: 0 0 0 5px rgba(85,185,245,.22); }.about-pattern span:nth-child(1) { top: 65px; left: 105px; }.about-pattern span:nth-child(2) { top: 94px; right: 69px; }.about-pattern span:nth-child(3) { bottom: 92px; right: 80px; }.about-pattern span:nth-child(4) { bottom: 57px; left: 96px; }.about-pattern span:nth-child(5) { top: 181px; left: 48px; }.about-statement h2 { max-width: 670px; margin-bottom: 24px; }.about-statement > p:not(.eyebrow) { max-width: 630px; color: var(--body); font-size: 16px; }.about-statement > p:not(.eyebrow):last-child { margin-bottom: 0; }.principles { background: var(--mist); }.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #cddce7; border-left: 1px solid #cddce7; }.principle-grid article { min-height: 230px; padding: 26px; border-right: 1px solid #cddce7; border-bottom: 1px solid #cddce7; }.principle-grid span { color: var(--bright-blue); font-family: var(--mono); font-size: 10px; }.principle-grid h3 { margin: 45px 0 8px; color: var(--navy); font-size: 21px; }.principle-grid p { margin: 0; color: var(--body); font-size: 14px; }.about-purpose { background: #fff; }
.service-list-intro { max-width: 710px; margin-bottom: 54px; }.service-list-intro h2 { margin-bottom: 18px; }.service-list-intro > p:not(.eyebrow) { max-width: 610px; margin-bottom: 0; color: var(--body); }.service-list-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.service-detail { min-height: 358px; display: grid; grid-template-columns: 66px 1fr; gap: 20px; padding: 31px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.detail-number { color: #7b96ad; font-family: var(--mono); font-size: 11px; }.detail-kicker { color: var(--bright-blue); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.service-detail h3 { margin: 15px 0 12px; color: var(--navy); font-size: 24px; }.service-detail p { margin-bottom: 20px; color: var(--body); font-size: 14px; }.service-detail ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.service-detail li { color: #315776; font-size: 13px; }.service-detail li::before { content: "+"; display: inline-block; width: 17px; color: var(--bright-blue); font-weight: 800; }.featured-detail { background: var(--navy); }.featured-detail .detail-number { color: #7ebcf1; }.featured-detail .detail-kicker { color: #9fdaff; }.featured-detail h3 { color: #fff; }.featured-detail p { color: #c5ddf0; }.featured-detail li { color: #d3e6f5; }.service-process { background: var(--mist); }.process-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #cddce7; border-left: 1px solid #cddce7; }.process-grid article { min-height: 195px; padding: 25px; border-right: 1px solid #cddce7; border-bottom: 1px solid #cddce7; }.process-grid span { color: var(--bright-blue); font-family: var(--mono); font-size: 10px; }.process-grid h3 { margin: 29px 0 8px; font-size: 20px; }.process-grid p { margin: 0; color: var(--body); font-size: 14px; }
.contact-section { background: #fff; }.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 100px; align-items: start; }.contact-intro { padding-top: 22px; }.contact-intro h2 { max-width: 380px; margin-bottom: 21px; }.contact-intro > p:not(.eyebrow) { max-width: 365px; color: var(--body); }.contact-note { display: flex; align-items: center; gap: 14px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); }.contact-note span { display: grid; place-items: center; width: 38px; height: 38px; background: var(--navy); color: #fff; font-size: 18px; font-weight: 800; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); }.contact-note p { margin: 0; color: #486179; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }.contact-note strong { color: var(--blue); font-weight: 500; }.contact-form { padding: 37px; background: var(--mist); border: 1px solid #e1ebf2; }.form-heading { display: grid; grid-template-columns: 45px 1fr; gap: 13px; margin-bottom: 33px; }.form-number { padding-top: 4px; color: var(--bright-blue); font-family: var(--mono); font-size: 10px; }.form-heading h2 { margin-bottom: 5px; font-size: 27px; }.form-heading p { margin: 0; color: var(--body); font-size: 14px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 18px; }.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #314e6a; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.form-full { grid-column: span 2; }.form-grid input,.form-grid select,.form-grid textarea { width: 100%; border: 1px solid #ccdce8; border-radius: 0; outline: 0; background: #fff; color: var(--ink); font: 500 14px var(--display); letter-spacing: 0; text-transform: none; }.form-grid input,.form-grid select { height: 45px; padding: 0 12px; }.form-grid textarea { padding: 12px; resize: vertical; }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color: var(--bright-blue); box-shadow: 0 0 0 3px rgba(22,135,232,.13); }.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 27px; }.form-actions .button { font-family: var(--display); cursor: pointer; }.form-message { margin: 0; color: #087754; font-size: 13px; font-weight: 700; }.contact-assurance { background: var(--navy); }.assurance-grid { display: grid; grid-template-columns: repeat(3,1fr); }.assurance-grid > div { min-height: 210px; padding: 31px 34px; border-right: 1px solid #26557f; }.assurance-grid > div:first-child { border-left: 1px solid #26557f; }.assurance-grid span { color: #82caff; font-family: var(--mono); font-size: 10px; }.assurance-grid h3 { margin: 34px 0 7px; color: #fff; font-size: 20px; }.assurance-grid p { margin: 0; color: #bdd7eb; font-size: 14px; }
@media (max-width:900px) { .nav-links { gap:18px; }.hero-grid { grid-template-columns:1fr; min-height:auto; }.hero-copy { padding:75px 0 30px; }.hero-visual { min-height:420px; max-width:590px; width:100%; margin:auto; }.main-card { right:25px; }.service-grid { grid-template-columns:repeat(3,1fr); }.difference-layout { grid-template-columns:1fr; gap:45px; }.difference-copy h2 { max-width:650px; }.purpose-layout { grid-template-columns:1fr; gap:15px; }.purpose-content { gap:35px; }.footer-main { flex-direction:column; }.footer-links { gap:55px; } }
@media (max-width:900px) { .page-hero-layout,.about-intro-grid { grid-template-columns:1fr; gap:28px; }.page-hero { padding:78px 0; }.about-pattern { max-width:330px; }.principle-grid { grid-template-columns:1fr; }.principle-grid article { min-height:175px; }.principle-grid h3 { margin-top:25px; } }
@media (max-width:900px) { .service-list-grid { grid-template-columns:1fr; }.service-detail { min-height:0; }.process-grid { grid-template-columns:1fr; }.process-grid article { min-height:160px; } }
@media (max-width:900px) { .contact-layout { grid-template-columns:1fr; gap:42px; }.contact-intro { padding-top:0; }.contact-intro h2 { max-width:580px; }.contact-intro > p:not(.eyebrow) { max-width:580px; }.contact-note { max-width:420px; }.assurance-grid { grid-template-columns:1fr; }.assurance-grid > div { min-height:150px; border-bottom: 1px solid #26557f; }.assurance-grid > div:first-child { border-left:0; }.assurance-grid > div:last-child { border-bottom:0; } }
@media (max-width:620px) { .container { width:min(100% - 36px,1160px); }.site-header { height:71px; }.brand-logo { width:157px; height:47px; }.brand-logo img { width:171px; top:-94px; left:-7px; }.nav-links,.nav-contact { display:none; }.navigation { width:100%; }.hero-copy { padding:65px 0 20px; } h1 { font-size:38px; }.hero-intro { font-size:16px; }.hero-trust { margin-top:42px; }.hero-visual { min-height:340px; transform:scale(.82); transform-origin:top left; width:122%; margin-bottom:-58px; }.main-card { right:4px; }.mini-card { right:185px; }.section-space { padding:72px 0; }.split-heading { display:block; }.split-heading h2 { margin-bottom:18px; }.service-grid { grid-template-columns:1fr 1fr; }.service-card { min-height:284px; }.service-card:last-child { grid-column:span 2; min-height:230px; }.difference-layout { gap:39px; }.value-grid { grid-template-columns:1fr; }.value-grid article { min-height:145px; }.purpose-content { grid-template-columns:1fr; gap:36px; }.purpose-content article + article { padding:32px 0 0; border-top:1px solid var(--line); border-left:0; }.cta-content { display:block; }.button-light { margin-top:26px; }.footer-main { padding:47px 0 36px; }.footer-links { gap:38px; }.footer-bottom { display:block; }.footer-bottom p + p { margin-top:6px; } }
@media (max-width:620px) { .page-hero { padding:65px 0; }.page-hero-layout > p { font-size:16px; }.about-intro-grid { gap:42px; }.about-pattern { max-width:100%; }.about-statement > p:not(.eyebrow) { font-size:15px; }.principle-grid article { padding:22px; } }
@media (max-width:620px) { .service-list-intro { margin-bottom:38px; }.service-detail { grid-template-columns:44px 1fr; gap:11px; padding:25px 20px; }.service-detail h3 { font-size:21px; }.service-detail p { font-size:13px; }.process-grid article { padding:22px; } }
@media (max-width:620px) { .contact-form { padding:25px 19px; }.form-grid { grid-template-columns:1fr; gap:18px; }.form-full { grid-column:auto; }.form-actions { display:block; }.form-message { margin-top:14px; }.assurance-grid > div { padding:25px 18px; }.assurance-grid h3 { margin-top:22px; } }
