:root {
--ink: #14233b;
--muted: #5f6f86;
--line: #dce6f1;
--soft: #f5f9fc;
--white: #fff;
--blue: #0757d8;
--cyan: #0aa8c6;
--violet: #6b5cff;
--navy: #071a33;
--shadow: 0 24px 70px rgba(11, 39, 78, .12);
--radius: 28px;
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
color: var(--ink);
background: #fff;
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.75;
overflow-x: hidden
}
h1, h2, h3 {
letter-spacing: -.035em;
line-height: 1.12;
font-weight: 800
}
h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
margin-bottom: 22px
}
h3 {
font-size: 1.25rem
}
p {
color: var(--muted);
font-size: 1.03rem
}
.page-progress {
position: fixed;
inset: 0 0 auto;
height: 4px;
z-index: 9999;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet))
}
.cw-section {
padding: 100px 0;
position: relative
}
.cw-section-number {
font-size: .8rem;
font-weight: 900;
letter-spacing: .18em;
color: var(--blue);
margin-bottom: 16px
}
.cw-heading {
margin: 0 auto 44px
}
.cw-heading p {
margin-left: auto;
margin-right: auto
}
.cw-emphasis {
font-weight: 700;
color: var(--ink)
}
.cw-hero {
position: relative;
isolation: isolate;
min-height: 820px;
padding: 110px 0 40px;
overflow: hidden;
background: linear-gradient(180deg, #f9fcff 0%, #eef7ff 60%, #fff 100%)
}
.cw-grid {
position: absolute;
inset: 0;
opacity: .45;
background-image: linear-gradient(rgba(9, 87, 216, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 87, 216, .06) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
z-index: -3
}
.cw-glow {
position: absolute;
border-radius: 50%;
filter: blur(20px);
z-index: -2
}
.cw-glow-a {
width: 500px;
height: 500px;
left: -180px;
top: -150px;
background: radial-gradient(circle, rgba(10, 168, 198, .2), transparent 68%)
}
.cw-glow-b {
width: 620px;
height: 620px;
right: -220px;
top: -80px;
background: radial-gradient(circle, rgba(107, 92, 255, .16), transparent 68%)
}
.cw-hero-wrap {
position: relative
}
.cw-orbit {
position: absolute;
border: 1px solid rgba(7, 87, 216, .12);
border-radius: 50%;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
z-index: -1
}
.cw-orbit-one {
width: 740px;
height: 740px
}
.cw-orbit-two {
width: 980px;
height: 980px
}
.cw-hero-content {
margin: auto
}
.cw-kicker {
display: inline-flex;
gap: 10px;
align-items: center;
padding: 9px 15px;
border: 1px solid rgba(7, 87, 216, .16);
border-radius: 999px;
background: rgba(255, 255, 255, .78);
backdrop-filter: blur(12px);
font-weight: 800;
color: var(--blue);
font-size: .85rem;
box-shadow: 0 10px 30px rgba(11, 39, 78, .06)
}
.cw-hero h1 {
font-size: clamp(2.7rem, 5.2vw, 4rem);
margin: 26px 0 22px
}
.cw-hero h1 span {
background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet));
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.cw-hero-lead {
font-weight: 800;
color: var(--ink);
font-size: 1.3rem
}
.cw-hero-content>p {
max-width: 1150px;
margin: 0 auto 13px
}
.cw-hero-chip {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
border: 1px solid rgba(7, 87, 216, .15);
background: rgba(255, 255, 255, .86);
backdrop-filter: blur(14px);
box-shadow: var(--shadow);
border-radius: 17px;
font-weight: 800
}
.cw-hero-chip i {
color: var(--blue)
}
.cw-chip-left {
left: 0;
top: 160px
}
.cw-chip-right {
right: 0;
top: 240px
}
.cw-service-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-top: 60px
}
.cw-service-strip div {
min-height: 100px;
padding: 20px 12px;
border-radius: 20px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 12px 30px rgba(11, 39, 78, .07);
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 800
}
.cw-service-strip i {
font-size: 1.35rem;
color: var(--blue)
}
.cw-discovery {
background: #fff
}
.cw-query-stack {
padding: 28px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(145deg, #fff, #f6fbff);
box-shadow: var(--shadow)
}
.cw-query {
display: flex;
gap: 14px;
align-items: center;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
font-weight: 800;
color: var(--ink)
}
.cw-query i {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #edf5ff;
color: var(--blue)
}
.cw-query.featured {
border-color: rgba(107, 92, 255, .25);
box-shadow: 0 14px 35px rgba(107, 92, 255, .08)
}
.cw-or {
padding: 9px 8px;
color: #8b99aa;
font-size: .9rem;
font-weight: 700
}
.cw-search-section {
background: var(--soft)
}
.cw-search-card {
height: 100%;
padding: 34px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 18px 45px rgba(11, 39, 78, .06);
transition: .3s
}
.cw-search-card:hover {
transform: translateY(-7px);
box-shadow: var(--shadow)
}
.cw-search-card.featured {
background: linear-gradient(155deg, #08234c, #0c5fdc);
color: #fff;
border-color: transparent
}
.cw-search-card.featured p {
color: #d8e8ff
}
.cw-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 17px;
background: #eef5ff;
color: var(--blue);
font-size: 1.4rem;
margin-bottom: 22px
}
.cw-search-card.featured .cw-icon {
background: rgba(255, 255, 255, .14);
color: #fff
}
.cw-search-card h3 {
font-size: 2rem;
}
.cw-dark {
background: radial-gradient(circle at 10% 20%, rgba(10, 168, 198, .18), transparent 25%), linear-gradient(135deg, #06152b, #082b55 70%, #0d3770);
color: #fff
}
.cw-dark h2, .cw-dark h3, .cw-dark .cw-emphasis {
color: #fff
}
.cw-dark p {
color: #c7d8ec
}
.cw-dark .cw-section-number {
color: #7de5f4
}
.cw-check-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 24px 0
}
.cw-check-grid div {
padding: 13px 15px;
border-radius: 14px;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .1);
font-weight: 700
}
.cw-check-grid i {
margin-right: 9px
}
.cw-radar {
width: min(500px, 90vw);
aspect-ratio: 1;
margin: auto;
position: relative;
border-radius: 50%;
background: radial-gradient(circle, rgba(126, 230, 244, .12), transparent 60%)
}
.cw-radar-ring {
position: absolute;
border: 1px solid rgba(126, 230, 244, .3);
border-radius: 50%;
inset: 10%
}
.cw-radar-ring.r2 {
inset: 25%
}
.cw-radar-ring.r3 {
inset: 40%
}
.cw-radar-center {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 88px;
height: 88px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #06a9c6, #6b5cff);
box-shadow: 0 0 60px rgba(10, 168, 198, .4);
font-size: 2rem
}
.cw-radar .dot {
position: absolute;
width: 14px;
height: 14px;
background: #7de5f4;
border-radius: 50%;
box-shadow: 0 0 25px #7de5f4
}
.cw-radar .d1 {
left: 24%;
top: 27%
}
.cw-radar .d2 {
right: 18%;
top: 37%
}
.cw-radar .d3 {
left: 34%;
bottom: 18%
}
.cw-radar .d4 {
right: 32%;
bottom: 31%
}
.cw-grants {
background: #fff
}
.cw-split-card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 42px;
align-items: center;
padding: 48px;
border-radius: 34px;
background: linear-gradient(135deg, #f7fbff, #fff);
border: 1px solid var(--line);
box-shadow: var(--shadow)
}
.cw-split-icon {
width: 180px;
height: 180px;
border-radius: 36px;
display: grid;
place-items: center;
font-size: 4.5rem;
background: #fff;
box-shadow: 0 20px 50px rgba(11, 39, 78, .1);
color: var(--blue)
}
.cw-journey {
background: var(--soft)
}
.cw-journey-track {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 12px;
margin: 40px 0
}
.cw-step {
min-height: 165px;
padding: 22px 14px;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
font-weight: 800;
box-shadow: 0 12px 28px rgba(11, 39, 78, .05)
}
.cw-step i {
font-size: 1.7rem;
color: var(--blue)
}
.cw-copy-narrow {
margin: auto
}
.cw-tag-cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 25px
}
.cw-tag-cloud span {
padding: 10px 15px;
border: 1px solid #cddceb;
border-radius: 999px;
background: #fff;
font-weight: 800;
font-size: .9rem
}
.cw-video {
background: #fff
}
.cw-video-visual {
aspect-ratio: 1;
border-radius: 44px;
background: linear-gradient(145deg, #0b5fdd, #08a7c5 52%, #6b5cff);
display: grid;
place-items: center;
position: relative;
box-shadow: var(--shadow);
overflow: hidden
}
.cw-video-visual:before, .cw-video-visual:after {
content: "";
position: absolute;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50%
}
.cw-video-visual:before {
width: 70%;
height: 70%
}
.cw-video-visual:after {
width: 45%;
height: 45%
}
.cw-video-visual i {
width: 100px;
height: 100px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
color: var(--blue);
font-size: 2rem;
z-index: 2;
box-shadow: 0 15px 45px rgba(0, 0, 0, .18)
}
.cw-check-grid.light div {
background: #f5f9fd;
border: 1px solid var(--line);
color: var(--ink)
}
.cw-check-grid.light i {
color: var(--blue)
}
.cw-imetadex {
overflow: hidden
}
.cw-tech-orb {
width: min(420px, 80vw);
aspect-ratio: 1;
position: relative;
margin: auto;
border-radius: 50%;
border: 1px solid rgba(125, 229, 244, .25)
}
.cw-tech-orb:before, .cw-tech-orb:after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px solid rgba(125, 229, 244, .18);
inset: 13%
}
.cw-tech-orb:after {
inset: 28%
}
.cw-tech-orb .core {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #0aa8c6, #6b5cff);
font-size: 1.45rem;
font-weight: 900;
box-shadow: 0 0 70px rgba(10, 168, 198, .35)
}
.cw-tech-orb span {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: #7de5f4;
box-shadow: 0 0 25px #7de5f4
}
.cw-tech-orb span:nth-child(2) {
top: 14%;
left: 50%
}
.cw-tech-orb span:nth-child(3) {
bottom: 20%;
left: 17%
}
.cw-tech-orb span:nth-child(4) {
right: 13%;
top: 48%
}
.cw-wordmouth {
background: var(--soft)
}
.cw-example-card {
height: 100%;
padding: 28px 23px;
border-radius: 24px;
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 14px 32px rgba(11, 39, 78, .05)
}
.cw-example-card i {
width: 50px;
height: 50px;
border-radius: 15px;
display: grid;
place-items: center;
background: #eef5ff;
color: var(--blue);
margin-bottom: 18px;
font-size: 1.2rem
}
.cw-example-card p {
margin: 0
}
.cw-market {
background: #fff
}
.cw-sticky-copy {
position: sticky;
top: 80px
}
.cw-market-list {
display: grid;
gap: 14px
}
.cw-market-list>div {
padding: 25px 28px;
border: 1px solid var(--line);
border-radius: 22px;
background: linear-gradient(145deg, #fff, #f9fcff);
transition: .25s
}
.cw-market-list>div:hover {
transform: translateX(7px);
border-color: #b8cff0
}
.cw-market-list span {
display: block;
font-weight: 900;
font-size: 1.15rem;
margin-bottom: 5px
}
.cw-market-list p {
margin: 0
}
.cw-why {
background: var(--soft)
}
.cw-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 35px 0
}
.cw-stats div {
padding: 30px;
text-align: center;
border: 1px solid var(--line);
border-radius: 24px;
background: #fff
}
.cw-stats strong {
display: block;
font-size: 2.2rem;
color: var(--blue)
}
.cw-stats span {
font-weight: 800
}
.cw-core-card {
height: 100%;
padding: 29px;
border: 1px solid var(--line);
border-radius: 24px;
background: #fff;
transition: .28s
}
.cw-core-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow)
}
.cw-core-card i {
font-size: 1.5rem;
color: var(--blue);
margin-bottom: 16px
}
.cw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 14px;
background: linear-gradient(90deg, var(--blue), #3178ec);
color: #fff;
text-decoration: none;
font-weight: 900;
box-shadow: 0 14px 30px rgba(7, 87, 216, .22);
transition: .25s
}
.cw-btn:hover {
transform: translateY(-2px);
color: #fff
}
.cw-location address {
font-style: normal;
padding: 22px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 20px;
background: rgba(255, 255, 255, .07);
color: #e7f3ff;
font-size: 1.05rem
}
.cw-map-visual {
position: relative;
width: min(500px, 90vw);
aspect-ratio: 1;
margin: auto;
border-radius: 50%;
background: radial-gradient(circle, rgba(10, 168, 198, .2), rgba(255, 255, 255, .02) 55%, transparent 56%);
border: 1px solid rgba(125, 229, 244, .18)
}
.map-ring {
position: absolute;
border: 1px solid rgba(125, 229, 244, .3);
border-radius: 50%
}
.map-ring.r1 {
inset: 14%
}
.map-ring.r2 {
inset: 30%
}
.map-pin {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #0aa8c6, #6b5cff);
font-size: 2rem;
box-shadow: 0 0 55px rgba(10, 168, 198, .35)
}
.cw-start {
background: #fff
}
.cw-choice-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px
}
.cw-choice {
padding: 30px;
border: 1px solid var(--line);
border-radius: 24px;
background: linear-gradient(145deg, #fff, #f8fbff);
box-shadow: 0 12px 30px rgba(11, 39, 78, .05)
}
.cw-choice h3 {
font-size: 1.15rem
}
.cw-choice p {
margin: 10px 0 0;
color: var(--blue);
font-weight: 900
}
.cw-faq {
background: var(--soft)
}
.cw-accordion {
max-width: 1000px;
margin: auto
}
.cw-accordion .accordion-item {
border: 1px solid var(--line);
border-radius: 18px !important;
overflow: hidden;
margin-bottom: 12px;
background: #fff
}
.cw-accordion .accordion-button {
padding: 22px 24px;
font-weight: 850;
color: var(--ink);
box-shadow: none
}
.cw-accordion .accordion-button:not(.collapsed) {
background: #edf5ff;
color: var(--blue)
}
.cw-accordion .accordion-body {
padding: 0 24px 24px;
color: var(--muted);
line-height: 1.75
}
.cw-final {
padding: 80px 0 100px;
background: #fff
}
.cw-final-box {
position: relative;
overflow: hidden;
padding: 70px clamp(25px, 6vw, 80px);
border-radius: 36px;
background: radial-gradient(circle at 18% 20%, rgba(17, 184, 198, 0.35), transparent 24%), radial-gradient(circle at 82% 75%, rgba(255, 200, 87, 0.26), transparent 26%), linear-gradient(135deg, var(--ms-navy), #09376e);
color: #fff;
box-shadow: 0 35px 80px rgba(6, 27, 55, .22)
}
.cw-final-box h2 {
color: #fff
}
.cw-final-box p {
color: #deebfb;
margin-left: auto;
margin-right: auto
}
.cw-btn-light {
background: #fff;
color: #0b4da7;
box-shadow: none
}
.cw-btn-light:hover {
color: #0b4da7
}
@media(max-width:1199px) {
.cw-hero-chip {
display: none
}
.cw-service-strip {
grid-template-columns: repeat(3, 1fr)
}
.cw-journey-track {
grid-template-columns: repeat(4, 1fr)
}
.cw-choice-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:991px) {
.cw-section {
padding: 78px 0
}
.cw-hero {
min-height: auto;
padding-top: 90px
}
.cw-orbit {
display: none
}
.cw-split-card {
grid-template-columns: 1fr
}
.cw-split-icon {
width: 120px;
height: 120px;
font-size: 3rem
}
.cw-sticky-copy {
position: static
}
.cw-journey-track {
grid-template-columns: repeat(2, 1fr)
}
.cw-check-grid {
grid-template-columns: 1fr
}
.cw-choice-grid {
grid-template-columns: 1fr
}
.cw-video-visual {
max-width: 520px;
margin: auto
}
.cw-stats {
grid-template-columns: 1fr
}
}
@media(max-width:767px) {
body {
line-height: 1.65
}
.cw-section {
padding: 64px 0
}
.cw-hero {
padding: 72px 0 28px
}
.cw-hero h1 {
font-size: clamp(2.6rem, 14vw, 4.4rem)
}
.cw-kicker {
font-size: .75rem
}
.cw-service-strip {
grid-template-columns: repeat(2, 1fr);
margin-top: 36px
}
.cw-service-strip div {
min-height: 92px
}
.cw-query-stack,  .cw-search-card,  .cw-split-card,  .cw-core-card,  .cw-choice {
padding: 24px
}
.cw-journey-track {
grid-template-columns: 1fr
}
.cw-step {
min-height: 120px
}
.cw-stats strong {
font-size: 1.8rem
}
.cw-final-box {
border-radius: 26px;
padding: 48px 22px
}
.cw-heading {
margin-bottom: 30px
}
}
@media(max-width:420px) {
.cw-service-strip {
grid-template-columns: 1fr
}
.cw-query {
align-items: flex-start
}
.cw-stats div {
padding: 22px
}
}