:root {
--ink: #142437;
--muted: #607084;
--navy: #0a1c2d;
--blue: #1759da;
--cyan: #38bdf8;
--orange: #ff8a3d;
--peach: #fff3eb;
--ice: #edf8ff;
--line: #dce7f2;
--white: #fff;
--shadow: 0 24px 70px rgba(17, 45, 75, .13)
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
font-family: Manrope, Arial, sans-serif;
color: var(--ink);
background: #fff;
line-height: 1.7
}
h1, h2, h3, h4, p {
margin-top: 0
}
h1 {
font-size: clamp(2.55rem, 6vw, 4.5rem);
line-height: .98;
letter-spacing: -.055em
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.08;
letter-spacing: -.04em
}
h3 {
font-size: 1.17rem;
line-height: 1.35
}
p {
color: var(--muted)
}
a {
text-decoration: none;
color: inherit
}
.section {
padding: 100px 0
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 14px;
border-radius: 999px;
background: #edf5ff;
color: #1456c8;
font-weight: 800;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em
}
.eyebrow.dark {
background: rgba(255, 255, 255, .09);
color: #bde9ff;
border: 1px solid rgba(255, 255, 255, .12)
}
.center {
text-align: center
}
.lead {
font-size: 1.1rem;
max-width: 1350px
}
.why-grid h2 {
color:#fff;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: 14px;
font-weight: 800;
transition: .25s ease
}
.btn-primary {
background: linear-gradient(135deg, var(--blue), #0d3da8);
color: white;
box-shadow: 0 12px 32px rgba(23, 89, 218, .28)
}
.btn-primary:hover {
transform: translateY(-3px)
}
.btn-light {
background: white;
color: var(--navy)
}
.btn-outline {
border: 1px solid rgba(255, 255, 255, .3);
color: white
}
.grid {
display: grid;
gap: 24px
}
.card {
background: #fff;
border: 1px solid var(--line);
border-radius: 25px;
box-shadow: 0 14px 40px rgba(25, 54, 84, .07)
}
.hero {
position: relative;
overflow: hidden;
min-height: 830px;
display: grid;
align-items: center;
background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, .22), transparent 30%), radial-gradient(circle at 88% 30%, rgba(255, 138, 61, .18), transparent 28%), linear-gradient(145deg, #071827, #0d2943 65%, #0a1d31);
color: #fff
}
.hero:before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: linear-gradient(to bottom, #000, transparent)
}
.hero-wrap {
position: relative;
z-index: 2;
text-align: center;
}
.hero h1 {
max-width: 1650px;
margin: 22px auto;
color: #fff
}
.hero h1 span {
background: linear-gradient(90deg, #6dd6ff, #fff, #ffbd8f);
-webkit-background-clip: text;
color: transparent
}
.hero p {
color: #c9d8e7
}
.hero-copy {
max-width: 1350px;
margin: 0 auto 14px;
font-size: 1.05rem
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-top: 30px
}
.hero-market {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(6, 1fr);
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(15px);
border-radius: 22px;
overflow: hidden
}
.hero-market span {
padding: 18px 10px;
color: #d9e7f2;
font-weight: 700;
border-right: 1px solid rgba(255, 255, 255, .1)
}
.hero-market span:last-child {
border-right: 0
}
.orb {
position: absolute;
border: 1px solid rgba(100, 210, 255, .18);
border-radius: 50%;
animation: spin 22s linear infinite
}
.orb.one {
width: 520px;
height: 520px;
left: -240px;
top: 120px
}
.orb.two {
width: 390px;
height: 390px;
right: -150px;
bottom: 30px;
animation-direction: reverse
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.market {
background: linear-gradient(180deg, #fff, #f6fbff)
}
.market-grid {
grid-template-columns: 1.05fr .95fr;
align-items: center
}
.market-pills {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px
}
.market-pills div {
padding: 20px 18px;
border: 1px solid #dbe8f4;
border-radius: 18px;
background: rgba(255, 255, 255, .88);
font-weight: 800;
box-shadow: 0 10px 24px rgba(23, 52, 79, .06)
}
.market-pills i {
margin-right: 10px;
color: var(--orange)
}
.services {
background: #081a2a;
color: #fff;
position: relative;
overflow: hidden
}
.services p {
color: #bfd0df
}
.services-head {
max-width: 1350px;
margin: 0 auto 46px
}
.services-head h2 {
color:#fff;
}
.service-grid {
grid-template-columns: repeat(2, 1fr)
}
.service-card {
padding: 30px;
position: relative;
overflow: hidden;
background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 28px
}
.service-card:after {
content: "";
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 189, 248, .19), transparent 65%);
right: -45px;
top: -45px
}
.service-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 16px;
background: linear-gradient(135deg, #2d77ee, #39c8ff);
font-size: 1.25rem;
margin-bottom: 18px
}
.service-card ul {
padding-left: 20px;
color: #d8e5ef;
columns: 2
}
.service-card .btn {
margin-top: 8px
}
.service-card .quote {
font-weight: 800;
color: white;
font-size: 1.05rem;
margin-top: 12px
}
.geo {
background: linear-gradient(135deg, #fff5ed, #f7fbff)
}
.geo-grid {
grid-template-columns: repeat(5, 1fr)
}
.geo-card {
padding: 25px 20px;
text-align: center
}
.geo-card i {
font-size: 2.5rem;
color: var(--blue);
margin-bottom: 14px
}
.geo-card p {
font-size: .91rem;
margin-bottom: 0
}
.journey {
background: #fff
}
.journey-track {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
margin-top: 42px
}
.journey-card {
padding: 24px 17px;
text-align: center;
border-radius: 22px;
background: #f8fbfe;
border: 1px solid var(--line);
position: relative
}
.journey-card i {
width: 50px;
height: 50px;
display: grid;
place-items: center;
margin: 0 auto 14px;
border-radius: 50%;
background: #e7f2ff;
color: var(--blue)
}
.journey-card p {
font-size: .89rem;
margin-bottom: 0
}
.why {
background: linear-gradient(145deg, #0b2340, #153b63);
color: #fff
}
.why p {
color: #cad7e5
}
.why-grid {
grid-template-columns: .9fr 1.1fr;
align-items: center
}
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px
}
.stat {
padding: 28px;
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .07);
border-radius: 22px
}
.stat strong {
display: block;
font-size: 2.2rem;
color: #fff
}
.core {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px
}
.core div {
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .06);
font-weight: 700;
color: #e6f1f8
}
.core small {
display: block;
color: #b7c9d8;
font-weight: 500;
margin-top: 5px
}
.location {
background: #f7fbff
}
.location-grid {
grid-template-columns: 1fr 1fr;
align-items: stretch
}
.address {
padding: 32px;
background: linear-gradient(145deg, #fff, #edf7ff)
}
.address h3 {
font-size: 1.6rem
}
.address-lines {
font-weight: 700;
line-height: 1.9
}
.address-note {
padding: 30px;
background: #fff3eb;
border: 1px solid #ffdac2;
border-radius: 24px
}
.address-note p:last-child {
margin-bottom: 0
}
.fit {
background: #fff
}
.fit-grid {
grid-template-columns: repeat(3, 1fr)
}
.fit-card {
padding: 25px
}
.fit-card i {
font-size: 1.35rem;
color: var(--orange);
margin-bottom: 14px
}
.fit-card h3 {
margin-bottom: 8px
}
.fit-card p {
margin-bottom: 0
}
.fit-note {
max-width: 850px;
margin: 32px auto 0;
text-align: center;
font-weight: 700;
color: var(--ink)
}
.faq {
background: #f6f9fc
}
.faq-wrap {
max-width: 1350px;
margin: 38px auto 0
}
.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
margin: 12px 0;
overflow: hidden
}
.faq-q {
width: 100%;
padding: 20px 22px;
border: 0;
background: transparent;
text-align: left;
font: inherit;
font-weight: 800;
color: var(--ink);
display: flex;
justify-content: space-between;
gap: 20px;
cursor: pointer
}
.faq-a {
display: none;
padding: 0 22px 22px
}
.faq-item.open .faq-a {
display: block
}
.faq-item.open .faq-q i {
transform: rotate(45deg)
}
.final {
background: linear-gradient(130deg, #0a1d30, #15446e);
color: #fff;
text-align: center;
position: relative;
overflow: hidden
}
.final p {
color: #cfdeea
}
.final-inner {
max-width: 1650px;
margin: auto;
position: relative;
z-index: 2
}
.final-inner h2 {
	color:#fff;
}
.final-actions {
display: flex;
justify-content: center;
margin-top: 28px
}
@media(max-width:980px) {
.market-grid,  .why-grid,  .location-grid {
grid-template-columns: 1fr
}
.service-grid {
grid-template-columns: 1fr
}
.geo-grid {
grid-template-columns: repeat(2, 1fr)
}
.journey-track {
grid-template-columns: repeat(2, 1fr)
}
.fit-grid {
grid-template-columns: repeat(2, 1fr)
}
.hero-market {
grid-template-columns: repeat(3, 1fr)
}
.hero-market span {
border-bottom: 1px solid rgba(255, 255, 255, .1)
}
}
@media(max-width:640px) {
.section {
padding: 72px 0
}
.container {
width: min(100% - 24px, 1180px)
}
.hero {
min-height: auto
}
.hero-wrap {
padding: 95px 0 70px
}
.hero-market {
grid-template-columns: repeat(2, 1fr)
}
.market-pills,  .geo-grid,  .journey-track,  .stats,  .core,  .fit-grid {
grid-template-columns: 1fr
}
.service-card {
padding: 23px
}
.service-card ul {
columns: 1
}
.hero-actions {
flex-direction: column
}
.hero-actions .btn {
width: 100%
}
}