:root {
--ink: #10203c;
--muted: #5f6f88;
--paper: #f7f9fe;
--white: #fff;
--blue: #1557ff;
--cyan: #20c8ff;
--violet: #7c4dff;
--line: #dfe6f3;
--dark: #08142b;
--shadow: 0 24px 70px rgba(27, 52, 104, .12);
--radius: 28px
}
* {
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 {
font-family: "Space Grotesk", Manrope, sans-serif;
letter-spacing: -.035em
}
h1 {
font-size: clamp(2.7rem, 5.3vw, 5rem);
line-height: 1.02;
font-weight: 700;
margin: 0 0 24px
}
h2 {
font-size: clamp(2.15rem, 3.5vw, 2.5rem);
line-height: 1.08;
font-weight: 700;
margin-bottom: 22px;
}
h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
}
p {
font-size: 1rem;
color: var(--muted);
margin-bottom: 15px
}
.hf-section {
padding: 100px 0;
position: relative;
overflow: hidden
}
.hf-kicker, .hf-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid rgba(21, 87, 255, .18);
border-radius: 999px;
background: rgba(21, 87, 255, .06);
color: var(--blue);
font-size: .76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .11em;
margin-bottom: 18px
}
.hf-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--blue), var(--violet));
color: white;
text-decoration: none;
font-weight: 800;
border-radius: 999px;
padding: 13px 22px;
box-shadow: 0 12px 28px rgba(70, 69, 223, .24);
transition: .25s
}
.hf-btn:hover {
color: white;
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(70, 69, 223, .3)
}
.hf-btn-light {
background: #fff;
color: #15244c;
box-shadow: none
}
.hf-btn-light:hover {
color: #15244c
}
.hf-bottom-note {
margin: 42px 0 0;
padding: 20px 24px;
border-left: 4px solid var(--cyan);
background: #f3f7ff;
border-radius: 0 18px 18px 0;
font-weight: 700;
color: #263a61
}
.hf-hero {
min-height: 760px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
padding: 90px 0;
background: radial-gradient(circle at 18% 12%, rgba(32, 200, 255, .16), transparent 30%), radial-gradient(circle at 86% 16%, rgba(124, 77, 255, .15), transparent 26%), linear-gradient(160deg, #fff 0%, #f5f8ff 54%, #eef7ff 100%)
}
.min-vh-75 {
min-height: 650px
}
.hf-hero h1 span {
background: linear-gradient(90deg, var(--blue), var(--violet), #00a8df);
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.hf-hero .hf-lead {
font-size: 1.24rem;
color: #25385c;
font-weight: 650;
max-width: 720px
}
.hf-hero p {
max-width: 760px
}
.hf-grid {
position: absolute;
inset: 0;
opacity: .33;
background-image: linear-gradient(rgba(80, 111, 177, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 111, 177, .08) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: linear-gradient(to bottom, #000, transparent 88%)
}
.hf-glow {
position: absolute;
border-radius: 50%;
filter: blur(15px);
opacity: .5
}
.hf-glow-a {
width: 320px;
height: 320px;
background: rgba(32, 200, 255, .16);
left: -100px;
bottom: 15%
}
.hf-glow-b {
width: 300px;
height: 300px;
background: rgba(124, 77, 255, .18);
right: -70px;
top: -50px
}
.hf-orbit {
position: absolute;
border: 1px solid rgba(21, 87, 255, .12);
border-radius: 50%;
right: 4%;
top: 13%
}
.hf-orbit-1 {
width: 520px;
height: 520px
}
.hf-orbit-2 {
width: 390px;
height: 390px;
right: 8%;
top: 22%
}
.hf-hero-visual {
height: 520px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.hf-hero-visual:before, .hf-hero-visual:after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(21, 87, 255, .24);
animation: spin 26s linear infinite
}
.hf-hero-visual:before {
width: 390px;
height: 390px
}
.hf-hero-visual:after {
width: 280px;
height: 280px;
animation-direction: reverse;
animation-duration: 20s
}
.hf-visual-core {
width: 170px;
height: 170px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(145deg, #0d5cff, #704fff);
color: #fff;
box-shadow: 0 30px 70px rgba(21, 87, 255, .35);
font-weight: 800;
z-index: 3
}
.hf-visual-core i {
font-size: 2rem
}
.hf-node {
position: absolute;
z-index: 4;
padding: 12px 16px;
background: rgba(255, 255, 255, .85);
border: 1px solid rgba(80, 112, 178, .15);
border-radius: 16px;
box-shadow: 0 12px 36px rgba(29, 55, 106, .13);
font-size: .82rem;
font-weight: 800;
backdrop-filter: blur(10px)
}
.hf-node-1 {
top: 5%;
left: 28%
}
.hf-node-2 {
right: 2%;
top: 24%
}
.hf-node-3 {
right: 3%;
bottom: 24%
}
.hf-node-4 {
bottom: 4%;
left: 30%
}
.hf-node-5 {
left: 0;
bottom: 25%
}
.hf-node-6 {
left: 1%;
top: 24%
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
.hf-authority {
background: #fff
}
.hf-point-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px
}
.hf-point-grid>div {
display: flex;
align-items: center;
gap: 13px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 18px;
background: linear-gradient(145deg, #fff, #f7f9ff);
box-shadow: 0 10px 30px rgba(30, 56, 107, .06);
font-weight: 700
}
.hf-point-grid i {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(21, 87, 255, .08);
color: var(--blue)
}
.hf-solutions {
background: #f7f9fe
}
.hf-service-card {
height: 100%;
padding: 30px;
border: 1px solid #e1e7f3;
border-radius: 26px;
background: #fff;
box-shadow: 0 18px 45px rgba(26, 52, 101, .07);
position: relative;
overflow: hidden;
transition: .25s
}
.hf-service-card:hover {
transform: translateY(-7px);
box-shadow: var(--shadow)
}
.hf-service-card:after {
content: "";
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
right: -70px;
bottom: -70px;
background: rgba(32, 200, 255, .08)
}
.hf-service-card>i {
font-size: 1.8rem;
color: var(--blue);
margin: 16px 0
}
.hf-card-num {
position: absolute;
right: 24px;
top: 22px;
font-weight: 800;
color: #c5d0e6;
font-size: 1.4rem
}
.hf-dark-band {
background: linear-gradient(145deg, #09142d, #101d3c 58%, #17153d);
color: #fff
}
.hf-dark-band p, .hf-dark-band li {
color: #c9d3e8
}
.hf-feature-card {
height: 100%;
padding: 38px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
position: relative;
overflow: hidden
}
.hf-feature-purple {
background: radial-gradient(circle at 80% 10%, rgba(124, 77, 255, .25), transparent 30%), rgba(255, 255, 255, .04)
}
.hf-feature-blue {
background: radial-gradient(circle at 80% 10%, rgba(32, 200, 255, .22), transparent 30%), rgba(255, 255, 255, .04)
}
.hf-feature-card ul {
padding-left: 19px;
columns: 2;
column-gap: 25px
}
.hf-icon-wrap {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(255, 255, 255, .1);
font-size: 1.35rem;
margin-bottom: 24px
}
.hf-journey {
background: #fff
}
.hf-radial-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px
}
.hf-radial-list>div {
padding: 19px;
border-radius: 18px;
background: linear-gradient(135deg, #edf5ff, #f4efff);
border: 1px solid #dfe7f6;
font-weight: 800;
position: relative
}
.hf-radial-list>div:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--violet));
margin-right: 10px
}
.hf-media-tech {
background: linear-gradient(180deg, #f7f9fe, #eef4ff)
}
.hf-glass-card {
height: 100%;
padding: 36px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, .8);
background: rgba(255, 255, 255, .73);
backdrop-filter: blur(16px);
box-shadow: var(--shadow)
}
.hf-large-icon {
width: 72px;
height: 72px;
border-radius: 22px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--blue), var(--violet));
color: #fff;
font-size: 1.7rem;
margin-bottom: 25px
}
.hf-chip-list {
list-style: none;
padding: 0;
display: flex;
gap: 9px;
flex-wrap: wrap
}
.hf-chip-list li {
padding: 8px 12px;
border: 1px solid #dae4f6;
border-radius: 999px;
background: #f7f9fe;
color: #334669;
font-size: .84rem;
font-weight: 700
}
.hf-local {
background: #fff
}
.hf-stack-list {
display: grid;
gap: 12px
}
.hf-stack-list>div {
padding: 18px 20px;
background: #f5f8ff;
border: 1px solid #e0e8f6;
border-radius: 18px;
font-weight: 650;
color: #344765
}
.hf-understand {
background: #08142b;
color: #fff
}
.hf-understand p {
color: #c9d3e8
}
.hf-understand .hf-kicker {
color: #7ee5ff;
border-color: rgba(126, 229, 255, .2);
background: rgba(126, 229, 255, .08)
}
.hf-question {
height: 100%;
padding: 24px 18px;
border-radius: 20px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .1);
font-weight: 800;
text-align: center;
display: grid;
place-items: center
}
.hf-connection {
padding: 30px;
border-radius: 28px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1)
}
.hf-connection span {
display: block;
height: 100%;
padding: 16px;
border-left: 2px solid var(--cyan);
background: rgba(255, 255, 255, .04);
border-radius: 0 12px 12px 0;
color: #e3e9f5;
font-weight: 700
}
.hf-why {
background: #f7f9fe
}
.hf-solution-map {
display: grid;
gap: 12px
}
.hf-solution-map>div {
padding: 18px 20px;
border-radius: 18px;
background: #fff;
border: 1px solid #e0e7f2;
box-shadow: 0 10px 28px rgba(26, 52, 101, .05)
}
.hf-solution-map strong, .hf-solution-map span {
display: block
}
.hf-solution-map strong {
color: #1d3768;
margin-bottom: 3px
}
.hf-solution-map span {
color: var(--muted)
}
.hf-location {
background: #fff
}
.hf-location-card {
padding: 42px;
border-radius: 32px;
background: linear-gradient(135deg, #f8fbff, #f2f0ff);
border: 1px solid #dfe7f5;
box-shadow: var(--shadow)
}
address {
margin: 0;
padding: 30px;
background: #0d1b36;
border-radius: 24px;
color: #fff;
font-style: normal;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: 0 20px 50px rgba(8, 20, 43, .2)
}
address i {
font-size: 1.8rem;
color: #70dcff;
margin-bottom: 15px
}
address strong {
font-size: 1.15rem;
margin-bottom: 7px
}
address span {
color: #cfd9ec
}
.hf-selector {
background: #f7f9fe
}
.hf-choice {
height: 100%;
padding: 28px;
border: 1px solid #dfe6f1;
border-radius: 24px;
background: #fff;
position: relative;
overflow: hidden;
transition: .25s
}
.hf-choice:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(var(--blue), var(--violet))
}
.hf-choice:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(26, 52, 101, .09)
}
.hf-faq {
background: #fff
}
.hf-accordion {
max-width: 1650px;
margin: auto
}
.hf-accordion .accordion-item {
border: 1px solid #e0e6f1 !important;
border-radius: 18px !important;
margin-bottom: 12px;
overflow: hidden;
background: #fff
}
.hf-accordion .accordion-button {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
color: #17294c;
padding: 20px 22px;
box-shadow: none !important
}
.hf-accordion .accordion-button:not(.collapsed) {
background: #f1f5ff;
color: var(--blue)
}
.hf-accordion .accordion-body {
padding: 0 22px 22px;
color: var(--muted);
line-height: 1.75
}
.hf-final-cta {
padding: 105px 0;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #1154ef, #6545e8 58%, #0da9d5);
color: #fff
}
.hf-final-cta h2 {
font-size: clamp(2.4rem, 4vw, 4.2rem)
}
.hf-final-cta p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
color: rgba(255, 255, 255, .86)
}
.hf-final-cta .hf-kicker {
color: #fff;
border-color: rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .1)
}
.hf-final-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
filter: blur(20px);
right: -180px;
top: -210px
}
@media(max-width:991.98px) {
.hf-section {
padding: 80px 0
}
.hf-hero {
padding: 70px 0
}
.min-vh-75 {
min-height: auto
}
.hf-hero-visual {
height: 460px;
max-width: 560px;
margin: auto
}
.hf-feature-card ul {
columns: 1
}
.hf-location-card {
padding: 30px
}
}
@media(max-width:767.98px) {
body {
line-height: 1.65
}
.hf-section {
padding: 64px 0
}
h1 {
font-size: clamp(2.45rem, 12vw, 3.7rem)
}
h2 {
font-size: clamp(2rem, 9vw, 2.8rem)
}
.hf-hero {
padding: 58px 0
}
.hf-hero-visual {
height: 420px
}
.hf-hero-visual:before {
width: 320px;
height: 320px
}
.hf-hero-visual:after {
width: 235px;
height: 235px
}
.hf-visual-core {
width: 145px;
height: 145px
}
.hf-node {
font-size: .72rem;
padding: 9px 12px
}
.hf-node-1 {
left: 24%
}
.hf-node-4 {
left: 23%
}
.hf-point-grid,  .hf-radial-list {
grid-template-columns: 1fr
}
.hf-feature-card,  .hf-glass-card {
padding: 28px
}
.hf-location-card {
padding: 22px
}
.hf-question {
min-height: 100px
}
}
@media(max-width:479.98px) {
.hf-hero-visual {
height: 365px
}
.hf-hero-visual:before {
width: 285px;
height: 285px
}
.hf-hero-visual:after {
width: 205px;
height: 205px
}
.hf-visual-core {
width: 125px;
height: 125px;
font-size: .84rem
}
.hf-node {
font-size: .62rem;
padding: 7px 9px
}
.hf-node-1 {
top: 4%;
left: 24%
}
.hf-node-2 {
right: -2%;
top: 22%
}
.hf-node-3 {
right: -2%;
bottom: 22%
}
.hf-node-4 {
bottom: 3%;
left: 23%
}
.hf-node-5 {
left: -2%;
bottom: 22%
}
.hf-node-6 {
left: -3%;
top: 22%
}
.hf-point-grid {
grid-template-columns: 1fr
}
.hf-btn {
width: 100%;
justify-content: center
}
.hf-final-cta {
padding: 78px 0
}
}
@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior: auto !important
}
.hf-hero-visual:before,  .hf-hero-visual:after {
animation: none
}
}