:root {
--navy: #07182e;
--navy2: #0b2b4b;
--ink: #0c1728;
--muted: #607087;
--cyan: #12c7d8;
--orange: #ff8d3b;
--ice: #eef9fd;
--line: #dceaf0;
--white: #fff;
--shadow: 0 18px 50px rgba(7, 29, 51, .10);
--radius: 22px
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
font-family: Manrope, Arial, sans-serif;
color: var(--ink);
line-height: 1.7;
background: #fff
}
h1, h2, h3, h4 {
line-height: 1.13;
margin: 0 0 16px
}
h1 {
font-size: clamp(2.7rem, 5vw, 5.2rem);
letter-spacing: -.055em
}
h2 {
font-size: clamp(2rem, 3.2vw, 3rem);
letter-spacing: -.04em
}
h3 {
font-size: 1.28rem
}
h4 {
font-size: .9rem
}
p {
margin: 0 0 14px
}
a {
text-decoration: none
}
ul {
margin: 0;
padding-left: 20px
}
.str-shell {
width: min(1650px, calc(100% - 40px));
margin: auto;
position: relative
}
.str-section {
padding: 96px 0
}
.soft {
background: linear-gradient(180deg, #f7fcff, #eef9fd)
}
.str-heading {
max-width: 1350px;
margin-bottom: 44px
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto
}
.str-label {
display: inline-flex;
padding: 8px 12px;
border: 1px solid rgba(18, 199, 216, .25);
background: #e8fbfe;
border-radius: 999px;
color: #086d7c;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 14px
}
.str-label.light {
background: rgba(255, 255, 255, .08);
color: #d9fbff;
border-color: rgba(255, 255, 255, .14)
}
.str-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 20px;
border-radius: 12px;
background: linear-gradient(135deg, var(--orange), #ffb46f);
color: #14243a;
font-weight: 800;
box-shadow: 0 10px 26px rgba(255, 141, 59, .23);
transition: .25s
}
.str-btn:hover {
transform: translateY(-2px)
}
.str-btn.light {
background: #fff;
color: var(--navy)
}
.str-text-link {
display: inline-flex;
gap: 8px;
align-items: center;
color: #087b8f;
font-weight: 800;
margin-top: 8px
}
.str-center-copy {
max-width: 900px;
margin: 34px auto 0;
text-align: center
}
.str-hero {
position: relative;
overflow: hidden;
background: radial-gradient(circle at 50% 0, #17385e 0, #0a203c 42%, #061528 100%);
color: #dfe9f7;
padding: 108px 0 64px;
min-height: 820px
}
.str-grid {
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, black, transparent 88%)
}
.str-glow {
position: absolute;
border-radius: 50%;
filter: blur(75px);
opacity: .25
}
.str-glow.a {
width: 430px;
height: 430px;
background: #0fd0e5;
left: -180px;
top: 10px
}
.str-glow.b {
width: 500px;
height: 500px;
background: #ff8234;
right: -250px;
top: -140px
}
.str-hero-inner {
text-align: center;
z-index: 2
}
.str-kicker {
display: inline-flex;
gap: 9px;
align-items: center;
padding: 8px 13px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
margin-bottom: 24px
}
.str-hero h1 {
max-width: 1000px;
margin: 0 auto 22px;
color: #fff
}
.str-hero h1:after {
content: "";
display: block;
width: 78px;
height: 3px;
background: linear-gradient(90deg, var(--orange), var(--cyan));
margin: 25px auto 0
}
.str-hero p {
max-width: 1650px;
margin: 0 auto 12px;
color: #c5d2e1
}
.str-hero .lead {
font-size: 1.08rem;
color: #fff
}
.str-float {
position: absolute;
top: 58px;
width: 210px;
padding: 15px 16px;
display: flex;
gap: 12px;
align-items: center;
text-align: left;
border-radius: 15px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .13);
backdrop-filter: blur(14px);
box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
font-size: .8rem;
font-weight: 800
}
.str-float i {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255, 141, 59, .14);
color: #ffad69
}
.str-float.left {
left: 0
}
.str-float.right {
right: 0
}
.str-service-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 44px
}
.str-service-strip span {
min-height: 110px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
background: rgba(255, 255, 255, .055);
font-size: 1rem;
font-weight: 700
}
.str-service-strip i {
font-size: 2rem;
color: #ff9d56
}
.str-six {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px
}
.str-six article, .str-card, .core-grid article, .selector-grid article, .market-grid article {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow)
}
.str-six article {
padding: 24px
}
.str-six i, .str-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
background: #e9faff;
color: #087c8f;
margin-bottom: 16px
}
.str-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px
}
.str-card {
padding: 26px;
height: 100%
}
.str-card ul {
display: grid;
gap: 7px;
color: #54647b
}
.str-card li::marker {
color: var(--cyan)
}
.str-card.dark {
background: linear-gradient(145deg, #0d2f50, #07182e);
color: #dfeaf7;
border-color: transparent
}
.str-card.dark p, .str-card.dark li {
color: #bfd0e2
}
.str-card.accent {
background: linear-gradient(145deg, #effbff, #fff)
}
.str-grid-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px
}
.str-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 52px;
align-items: center
}
.pills {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 18px 0
}
.pills li {
padding: 9px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid #d8e8ee;
font-size: .82rem;
font-weight: 700
}
.visual {
min-height: 440px;
border-radius: 28px;
position: relative;
overflow: hidden;
background: linear-gradient(145deg, #0d3151, #07182d);
box-shadow: var(--shadow)
}
.paid-visual {
display: grid;
place-items: center;
background: radial-gradient(circle at 35% 25%, rgba(18, 199, 216, .34), transparent 32%), linear-gradient(145deg, #0d3151, #07182d)
}
.window {
width: 78%;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(12px);
border-radius: 20px
}
.dots {
display: flex;
gap: 7px
}
.dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255, 255, 255, .4)
}
.trend {
display: block;
text-align: right;
font-size: 3rem;
color: #ff9a4f
}
.bars {
height: 150px;
display: flex;
align-items: flex-end;
gap: 12px;
padding: 15px 20px 8px
}
.bars span {
width: 28px;
background: linear-gradient(#20dce8, #0d87b3);
border-radius: 7px 7px 2px 2px
}
.bars span:nth-child(1) {
height: 30%
}
.bars span:nth-child(2) {
height: 48%
}
.bars span:nth-child(3) {
height: 62%
}
.bars span:nth-child(4) {
height: 82%
}
.bars span:nth-child(5) {
height: 100%
}
.platforms {
display: flex;
gap: 10px
}
.platforms i {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #fff;
color: #0a2848
}
.market-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px
}
.market-grid article {
padding: 28px 22px;
position: relative;
overflow: hidden
}
.market-grid article:before {
content: "";
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
background: #e3f9fc;
right: -30px;
top: -34px
}
.market-grid article>span {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--navy);
color: #fff;
font-weight: 800;
margin-bottom: 16px
}
.intent, .proof {
background: linear-gradient(145deg, #07182e, #0b3154);
color: #dce8f5
}
.intent h2, .proof h2 {
color: #fff
}
.intent p, .proof p {
color: #bfd0e1
}
.need-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
list-style: none;
padding: 0;
margin: 20px 0
}
.need-list li {
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .06);
border-radius: 12px;
color: #fff;
font-weight: 700
}
.intent-visual {
overflow: visible;
background: none;
box-shadow: none
}
.core {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--orange), #ffbd79);
color: #fff;
font-size: 2.3rem;
box-shadow: 0 0 0 26px rgba(255, 141, 59, .08), 0 0 0 55px rgba(18, 199, 216, .05)
}
.bubble {
position: absolute;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .13);
color: #fff;
font-size: .82rem;
font-weight: 700
}
.b1 {
left: 10%;
top: 18%
}
.b2 {
right: 12%;
top: 20%
}
.b3 {
left: 3%;
top: 48%
}
.b4 {
right: 4%;
top: 50%
}
.b5 {
left: 15%;
bottom: 14%
}
.b6 {
right: 14%;
bottom: 14%
}
.b7 {
left: 50%;
top: 6%;
transform: translateX(-50%)
}
.stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 32px
}
.stats div {
padding: 28px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 20px;
background: rgba(255, 255, 255, .06)
}
.stats strong {
display: block;
font-size: 2.7rem;
color: #fff
}
.core-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px
}
.core-grid article {
padding: 25px
}
.core-grid i {
font-size: 1.2rem;
color: #087e90;
margin-bottom: 14px
}
.center-btn {
text-align: center;
margin-top: 30px
}
address {
font-style: normal;
padding: 20px;
border-radius: 16px;
background: #eefbfe;
border-left: 4px solid var(--cyan);
font-weight: 700;
margin: 16px 0 20px
}
.map-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 35px 35px
}
.pin {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 110px;
height: 110px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 0 0 30px rgba(18, 199, 216, .07), 0 0 0 60px rgba(18, 199, 216, .04)
}
.pin i {
font-size: 3.2rem;
color: var(--orange)
}
.selector-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px
}
.selector-grid article {
padding: 22px
}
.selector-grid strong {
display: block;
color: #087d90
}
.faq {
max-width: 1350px;
margin: auto;
display: grid;
gap: 12px
}
.faq details {
border: 1px solid #dce9ef;
border-radius: 16px;
background: #fff;
overflow: hidden;
box-shadow: 0 10px 28px rgba(8, 31, 55, .05)
}
.faq summary {
position: relative;
cursor: pointer;
list-style: none;
padding: 19px 54px 19px 20px;
font-weight: 800
}
.faq summary::-webkit-details-marker {
display: none
}
.faq summary:after {
content: "+";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e9f9fd;
color: #087f92
}
.faq details[open] summary:after {
content: "–"
}
.faq details p {
padding: 0 20px 20px;
color: #5d6d82
}
.str-final {
padding: 90px 0;
background: #eef8fc
}
.final-card {
position: relative;
overflow: hidden;
text-align: center;
padding: 70px clamp(24px, 7vw, 90px);
border-radius: 30px;
background: radial-gradient(circle at 50% -20%, #16486f, #0a2545 50%, #06182d 100%);
color: #cbd9e8;
box-shadow: 0 25px 80px rgba(8, 31, 55, .2)
}
.final-card h2 {
color: #fff
}
.final-q {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 24px auto
}
.final-q span {
padding: 13px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .07);
border-radius: 12px;
color: #fff;
font-weight: 700
}
.final-line {
font-weight: 800;
color: #fff;
margin-top: 22px
}
@media(max-width:1024px) {
.str-float {
display: none
}
.str-service-strip {
grid-template-columns: repeat(3, 1fr)
}
.str-six,  .str-three,  .core-grid,  .selector-grid {
grid-template-columns: repeat(2, 1fr)
}
.market-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:780px) {
.str-section {
padding: 72px 0
}
.str-shell {
width: min(100% - 28px, 1180px)
}
.str-hero {
padding-top: 78px;
min-height: auto
}
.str-service-strip {
grid-template-columns: repeat(2, 1fr)
}
.str-split,  .str-six,  .str-three,  .str-grid-cards,  .core-grid,  .selector-grid {
grid-template-columns: 1fr
}
.stats {
grid-template-columns: 1fr 1fr
}
.need-list,  .final-q {
grid-template-columns: 1fr
}
}
@media(max-width:520px) {
h1 {
font-size: 2.35rem
}
h2 {
font-size: 2rem
}
.str-service-strip,  .market-grid,  .stats {
grid-template-columns: 1fr
}
.str-card {
padding: 20px
}
.visual {
min-height: 330px
}
.window {
width: 90%
}
}