:root
  
{
  
    --blue:#0b3ed1;
	--blue2:#205ef0;
	--navy:#061b50;
	--navy2:#021338;
	--ink:#071c4d;
	--muted:#58647a;
	--line:#e3e8f1;
	--surface:#f7f9fd;
	--white:#fff;
	--shadow:0 20px 60px rgba(6,28,77,.12)
}

*
{
	box-sizing:border-box
}


html
{
	 scroll-behavior:smooth
}

body
{
	margin:0;
	font-family:Inter,sans-serif;
	color:var(--ink);
	line-height:1.65;
	background:#fff;
	-webkit-font-smoothing:antialiased
}

img
{
	max-width:100%;
	display:block
}
	
a
{
	text-decoration:none;
	color:inherit
}


button,input,select,textarea
{
	font:inherit
}

.container
{
	width:min(1180px,calc(100% - 36px));
	margin:auto
}

.narrow
{
	max-width:900px
}

.skip-link

{
	position:absolute;
	left:-9999px;
	top:10px
}

.skip-link:focus

{
	left:10px;
	background:#fff;
	padding:10px;
	z-index:999

}


.site-header

{

	position:sticky;
	top:0;
	z-index:100;
	background:rgba(255,255,255,.95);
	backdrop-filter:blur(16px);
	border-bottom:
	1px solid rgba(7,28,77,.08)
}


.nav-wrap
{
	height:82px;
	display:flex;
	align-items:center;
	justify-content:space-between
}

.brand img

{
	width:220px;
	height:auto
}

.main-nav
{
	display:flex;
	align-items:center;
	gap:27px;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase
}

.main-nav a
{
	transition:.2s
}

.main-nav a:hover
{
	color:var(--blue)
}

.nav-cta
{
	background:var(--blue);
	color:#fff!important;
	padding:13px 18px;
	border-radius:6px;
	box-shadow:0 8px 20px rgba(11,62,209,.24)
}


.menu-toggle
{
    display:none;
	background:none;
	border:0;
	padding:8px
}

.menu-toggle span
{
	display:block;
	width:24px;
	height:2px;
	background:var(--ink);
	margin:5px
}

.hero
{
	background:linear-gradient(90deg,#eaf4ff 0,#fff 56%);
	overflow:hidden
}

.hero-grid
{
	min-height:560px;
	display:grid;
	grid-template-columns:1fr 1.15fr;
	align-items:center
}

.hero-copy
{
	padding:70px 0 80px
}

.eyebrow
{
	text-transform:uppercase;
	letter-spacing:.08em;
	font-weight:800;
	font-size:12px;
	color:
	var(--blue);
	margin-bottom:15px
}

.hero h1,.page-hero h1
{
	font:800 clamp(48px,5.4vw,76px)/1.04 Manrope,sans-serif;
	letter-spacing:-.045em;
	margin:0
}

.hero h1 span
{
	color:var(--blue)
}

.hero-copy p,.page-hero p
{
	font-size:19px;
	color:var(--muted);
	max-width:610px;
	margin:24px 0 28px
}

.hero-actions
{
	display:flex;
	gap:14px;
	flex-wrap:wrap
}

.button
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	min-height:50px;
	padding:0 22px;
	border-radius:5px;
	font-size:13px;
	font-weight:800;
	text-transform:uppercase;
	border:1px solid transparent;
	transition:.25s;
	cursor:pointer
}

.button.primary
{
	background:var(--blue);
	color:#fff;
	box-shadow:0 10px 24px rgba(11,62,209,.22)
}

.button.primary:hover
{
	transform:translateY(-2px);
	background:#082fa7
}

.button.secondary
{
	background:#fff;
	border-color:var(--blue);
	color:var(--blue)
}

.button.secondary:hover
{
	background:#f2f6ff
}

.hero-image
{
	align-self:stretch;
	position:relative;
	min-height:560px
}

.hero-image img
{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center
}

.hero-image:before
{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,#fff 0,transparent 22%);
	z-index:1
}

.hero-badge
{
	position:absolute;
	right:24px;
	bottom:24px;
	z-index:2;
	background:#fff;
	padding:16px 20px;
	border-radius:10px;
	box-shadow:var(--shadow)
}

.hero-badge strong,.hero-badge span
{
	display:block
}

.hero-badge strong
{
	font-size:24px;
	color:var(--blue)
}

.hero-badge span
{
	font-size:11px;
	text-transform:uppercase;
	font-weight:700
}

.trust-band
{
	background:linear-gradient(90deg,var(--navy),#0838a7);
	color:#fff
}

.trust-grid
{
	display:grid;
	grid-template-columns:repeat(4,1fr)
}

.trust-grid article
{
	display:grid;
	grid-template-columns:48px 1fr;
	gap:14px;
	padding:28px 22px;
	border-right:1px solid rgba(255,255,255,.14)
}

.trust-grid .icon
{
	width:44px;
	height:44px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:#124fe1;
	border:1px solid rgba(255,255,255,.28);
	font-weight:800
}

.trust-grid h2
{
	font-size:14px;
	margin:1px 0 4px
}

.trust-grid p
{
	font-size:11px;
	color:#c9d5f3;
	margin:0
}

.section
{
padding:92px 0
}

.section-heading
{
text-align:center;
max-width:780px;
margin:0 auto 44px
}

.section-heading h2
{
font:800 clamp(34px,4vw,50px)/1.08 Manrope,sans-serif;
letter-spacing:-.035em;
margin:0
}

.section-heading p
{
color:var(--muted)
}
.service-cards
{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}
.service-card
{
padding:30px 24px;
border:1px solid var(--line);
border-radius:12px;
background:#fff;
box-shadow:0 8px 24px rgba(7,28,77,.06);
text-align:center;
transition:.25s
}
.service-card:hover
{
transform:translateY(-6px);
box-shadow:var(--shadow)
}
.service-icon
{
width:58px;
height:58px;
border-radius:50%;
background:#edf3ff;
display:grid;
place-items:center;
margin:0 auto 18px;
color:var(--blue);
font-weight:800
}
.service-card h3
{
font:800 20px/1.25 Manrope;
margin:0 0 12px
}
.service-card p
{
font-size:14px;
color:var(--muted)
}
.service-card a
{
display:inline-block;
margin-top:12px;
color:var(--blue);
font-weight:800;
text-transform:uppercase;
font-size:11px
}
.center
{
text-align:center;
margin-top:28px
}

.process-section
{
padding-top:35px
}
.process-line
{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
position:relative
}
.process-line:before
{
content:"";
position:absolute;
top:30px;
left:10%;
right:10%;
height:2px;
background:#cbd8fb
}
.process-line article
{
text-align:center;
position:relative
}
.process-line span
{
position:relative;
z-index:1;
width:62px;
height:62px;
border-radius:50%;
display:grid;
place-items:center;
margin:auto;
background:var(--blue);
color:#fff;
font-weight:800;
box-shadow:0 8px 20px rgba(11,62,209,.22)
}
.process-line h3
{
font:800 15px Manrope;
margin:18px 0 5px
}
.process-line p
{
font-size:12px;
color:var(--muted)
}

.software-section
{
background:#fbfcff
}
.software-grid
{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center
}
.software-grid h2
{
font:800 clamp(36px,4vw,52px)/1.08 Manrope;
letter-spacing:-.04em;
margin:0 0 18px
}
.software-grid p
{
color:var(--muted)
}
.check-list
{
list-style:none;
padding:0;
margin:24px 0
}
.check-list li
{
margin:10px 0
}
.check-list li:before
{
content:"✓";
display:inline-grid;
place-items:center;
width:20px;
height:20px;
border-radius:50%;
background:#e9f0ff;
color:var(--blue);
margin-right:10px;
font-weight:800
}
.software-visual
{
padding:20px
}
.laptop
{
max-width:560px;
margin:auto
}
.screen
{
background:#101827;
border:13px solid #161c27;
border-bottom-width:18px;
border-radius:14px 14px 5px 5px;
overflow:hidden;
box-shadow:0 24px 45px rgba(4,17,48,.18)
}
.screen img
{
width:100%;
aspect-ratio:16/10;
object-fit:cover
}
.base
{
height:18px;
background:linear-gradient(#dbe0e7,#9fa8b4);
border-radius:0 0 45% 45%;
box-shadow:0 8px 12px rgba(0,0,0,.16)
}

.testimonial
{
padding:56px 0;
background:linear-gradient(100deg,#0a35b2,#0d43d3);
color:#fff;
text-align:center
}
.testimonial .light
{
color:#c8d7ff
}
.testimonial blockquote
{
font:700 clamp(24px,3vw,36px)/1.3 Manrope;
max-width:900px;
margin:10px auto
}
.testimonial p
{
color:#c9d7fa
}

.cta-strip
{
padding:34px 0
}
.cta-inner
{
background:#f2f6ff;
border-radius:10px;
padding:28px 36px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}
.cta-inner h2
{
font:800 26px Manrope;
margin:0
}
.cta-inner p
{
margin:4px 0;
color:var(--muted)
}
.cta-inner>div:last-child
{
display:flex;
gap:12px;
flex-wrap:wrap
}

.page-hero
{
background:linear-gradient(100deg,#eef5ff,#fff);
padding:110px 0 85px
}
.page-hero h1
{
max-width:950px
}
.detail-list
{
max-width:950px
}
.detail
{
display:grid;
grid-template-columns:85px 1fr;
gap:30px;
padding:48px 0;
border-bottom:1px solid var(--line)
}
.detail>span
{
font:800 30px Manrope;
color:#a8b6d7
}
.detail h2
{
font:800 36px Manrope;
margin:0
}
.detail p
{
color:var(--muted);
font-size:17px
}
.timeline
{
max-width:900px
}
.timeline article
{
display:grid;
grid-template-columns:90px 1fr;
gap:30px;
padding:48px 0;
border-bottom:1px solid var(--line)
}
.timeline span
{
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--blue);
color:#fff;
font-weight:800
}
.timeline h2
{
font:800 34px Manrope;
margin:0
}
.timeline p
{
color:var(--muted)
}
.about-grid
{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:70px;
align-items:center
}
.about-grid img
{
border-radius:16px;
box-shadow:var(--shadow)
}
.about-grid h2
{
font:800 45px/1.1 Manrope;
margin:0 0 20px
}
.about-grid p
{
font-size:17px;
color:var(--muted)
}

.contact-grid
{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:70px
}
.contact-details
{
display:grid;
gap:8px;
margin-top:30px
}
.contact-details a
{
font-weight:800;
color:var(--blue)
}
.contact-form
{
background:#fff;
padding:32px;
border:1px solid var(--line);
border-radius:14px;
box-shadow:var(--shadow)
}
.contact-form label
{
display:grid;
gap:7px;
font-weight:700;
font-size:13px;
margin-bottom:16px
}
.contact-form input,.contact-form select,.contact-form textarea
{
width:100%;
padding:13px 14px;
border:1px solid #ccd5e4;
border-radius:6px;
background:#fbfcff;
outline:none
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus
{
border-color:var(--blue);
box-shadow:0 0 0 4px rgba(11,62,209,.1)
}
.form-row
{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px
}
.full
{
width:100%
}
.honeypot
{
position:absolute;
left:-9999px
}
.form-status
{
min-height:24px;
font-size:13px
}
.form-status.success
{
color:#14864f
}
.form-status.error
{
color:#b12727
}
.form-note
{
font-size:11px;
color:#7f8899
}

.site-footer
{
background:linear-gradient(100deg,var(--navy2),#062366);
color:#fff;
padding:62px 0 18px
}
.footer-grid
{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:50px
}
.footer-logo
{
width:210px;
filter:brightness(0) invert(1)
}
.footer-grid p
{
color:#aebdde
}
.footer-grid h2
{
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em
}
.footer-grid>div
{
display:flex;
flex-direction:column;
align-items:flex-start
}
.footer-grid a
{
color:#d2dcf3;
margin:4px 0;
font-size:13px
}
.social-row
{
display:flex;
gap:8px;
margin-top:8px
}
.social-row a
{
width:30px;
height:30px;
border:1px solid rgba(255,255,255,.3);
border-radius:50%;
display:grid;
place-items:center
}
.footer-bottom
{
border-top:1px solid rgba(255,255,255,.14);
margin-top:38px;
padding-top:18px;
display:flex;
justify-content:space-between;
color:#8192b8;
font-size:11px
}

.reveal
{
opacity:0;
transform:translateY(18px);
transition:.7s ease
}
.reveal.visible
{
opacity:1;
transform:none
}
.delay-1
{
transition-delay:.12s
}

@media(max-width:980px)
{
.main-nav
{
position:fixed;
inset:82px 18px auto;
background:#fff;
box-shadow:var(--shadow);
border-radius:12px;
padding:22px;
display:none;
flex-direction:column;
align-items:stretch
}
.main-nav.open
{
display:flex
}
.menu-toggle
{
display:block
}
.hero-grid,.software-grid,.about-grid,.contact-grid
{
grid-template-columns:1fr
}
.hero-copy
{
padding-bottom:40px
}
.hero-image
{
min-height:390px
}
.trust-grid
{
grid-template-columns:1fr 1fr
}
.service-cards
{
grid-template-columns:1fr 1fr
}
.process-line
{
grid-template-columns:1fr
}
.process-line:before
{
display:none
}
.process-line article
{
display:grid;
grid-template-columns:70px 1fr;
text-align:left;
gap:15px;
align-items:start
}
.process-line span
{
margin:0
}
.process-line h3
{
margin:7px 0 4px
}
.footer-grid
{
grid-template-columns:1fr 1fr
}

}

@media(max-width:620px)
{
.brand img
{
width:175px
}
.nav-wrap
{
height:72px
}
.main-nav
{
inset:72px 14px auto
}
.hero h1,.page-hero h1
{
font-size:46px
}
.hero-grid
{
min-height:auto
}
.hero-copy
{
padding-top:58px
}
.hero-image
{
min-height:300px
}
.trust-grid,.service-cards,.footer-grid
{
grid-template-columns:1fr
}
.trust-grid article
{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.14)
}
.section
{
padding:70px 0
}
.cta-inner
{
align-items:flex-start;
flex-direction:column
}
.detail,.timeline article
{
grid-template-columns:1fr;
gap:10px
}
.form-row
{
grid-template-columns:1fr
}
.footer-bottom
{
display:block
}
.button
{
width:100%
}
.hero-actions
{
display:grid
}
.hero-badge
{
display:none
}

}

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

}