.hero {
position: relative;
overflow: hidden;
background: var(--navy);
padding-top: calc(var(--header-h) + var(--space-s));
padding-bottom: var(--space-l); min-height: min(84vh, 800px);
display: flex;
align-items: center;
isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.hero__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 88%);
mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 38%, transparent 88%);
}
.hero__vignette {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(6,13,24,.55) 0%, transparent 22%, transparent 62%, rgba(6,13,24,.75) 100%),
linear-gradient(90deg, rgba(6,13,24,.6) 0%, transparent 42%);
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.06fr 0.94fr;
gap: var(--space-xl);
align-items: center;
width: 100%;
}
.hero .eyebrow { color: var(--brand-on-dark); }
.hero__title {
color: #fff;
margin-bottom: var(--space-m); line-height: 1.06;
letter-spacing: -0.035em; max-width: 26ch;
}
.hero__subhead {
font-size: var(--text-m);
color: rgba(255,255,255,.72);
max-width: 62ch;
margin-bottom: var(--space-m);
line-height: 1.6;
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--space-s);
flex-wrap: wrap;
margin-bottom: var(--space-m);
}
.hero__proof {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-m);
padding-top: var(--space-s);
border-top: 1px solid rgba(255,255,255,.1);
}
.hero__proof-item {
display: flex;
align-items: center;
gap: .55em;
color: rgba(255,255,255,.74);
font-size: var(--text-s);
}
.hero__proof-item .icon { width: 17px; height: 17px; color: var(--brand-on-dark); flex-shrink: 0; } .hero__visual { position: relative; height: 460px; }
.hero__visual .scene__layer {
left: 50%;
top: 50%;
}
.hero-panel-wrap--blob  { transform: translate(-50%,-50%) translateZ(-280px); }
.hero-panel-wrap--back  { transform: translate(-50%,-50%) translate3d(-118px,-152px,-90px); }
.hero-panel-wrap--main  { transform: translate(-50%,-50%) translate3d(6px,14px,40px); }
.hero-panel-wrap--front { transform: translate(-50%,-50%) translate3d(142px,146px,150px); }
.hero-blob {
width: 460px;
height: 460px;
background: linear-gradient(140deg, rgba(var(--brand-rgb),.42), rgba(126,196,240,.1));
filter: blur(6px);
}
.hero-panel {
width: 320px;
padding: var(--space-s);
border-radius: var(--radius-l);
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 34px 70px -28px rgba(0,0,0,.85);
color: #fff;
}
.hero-panel--sm   { width: 246px; }
.hero-panel--stat { width: 210px; }
.hero-panel__row { display: flex; align-items: center; gap: .6em; margin-bottom: .55em; }
.hero-panel__dot {
width: 8px; height: 8px; border-radius: 50%;
background: #3FCF8E;
box-shadow: 0 0 0 3px rgba(63,207,142,.18);
flex-shrink: 0;
}
.hero-panel__title { font-family: var(--font-display); font-size: var(--text-s); font-weight: 700; letter-spacing: -.01em; }
.hero-panel__meta {
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .04em;
color: rgba(255,255,255,.52);
}
.hero-panel__meta--sp { margin-bottom: var(--space-s); }
.hero-panel__badge {
font-family: var(--font-mono);
font-size: .625rem;
font-weight: 600;
letter-spacing: .1em;
padding: .25em .55em;
border-radius: 4px;
}
.hero-panel__badge--pass { background: rgba(63,207,142,.16); color: #6FE3AD; }
.hero-panel__bars { display: grid; gap: 7px; margin-bottom: var(--space-s); }
.hero-panel__bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.1); overflow: hidden; }
.hero-panel__bar i {
display: block;
height: 100%;
width: var(--w, 50%);
border-radius: 100px;
background: linear-gradient(90deg, var(--brand), #8FD0F5);
animation: barFill 1.5s var(--ease-out) backwards;
}
@keyframes barFill { from { width: 0; } }
.hero-panel__foot { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-panel__chip {
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .04em;
padding: .3em .6em;
border-radius: 100px;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.7);
} .hero-panel--code { width: 340px; }
.hero-panel__chrome {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: var(--space-xs);
margin-bottom: var(--space-xs);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.hero-panel__tl {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,255,255,.18);
flex-shrink: 0;
}
.hero-panel__tl:first-child { background: rgba(255,107,95,.65); }
.hero-panel__tl:nth-child(2) { background: rgba(255,190,86,.65); }
.hero-panel__tl:nth-child(3) { background: rgba(90,206,130,.6); }
.hero-panel__file {
margin-left: auto;
font-family: var(--font-mono);
font-size: .625rem;
letter-spacing: .04em;
color: rgba(255,255,255,.5);
} .hero-panel__code {
margin: 0 0 var(--space-s);
padding: 0;
background: none;
border: 0;
border-radius: 0;
font-family: var(--font-mono);
font-size: .6875rem;
line-height: 1.85;
white-space: pre;
overflow: hidden;
color: rgba(255,255,255,.85);
}
.hero-panel__code .ln { display: block; min-height: 1.85em; } .hero-panel__code .c { color: rgba(255,255,255,.55); }
.hero-panel__code .k { color: #C79BF0; }
.hero-panel__code .f { color: #7FB8FF; }
.hero-panel__code .t { color: #6FE3AD; }
.hero-panel__code .a { color: #F2B872; }
.hero-panel__code .p { color: rgba(255,255,255,.58); }
.hero-panel__stat {
font-family: var(--font-display);
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
margin: .12em 0 .3em;
font-variant-numeric: tabular-nums;
}
.hero-panel__stat small { font-size: .42em; font-weight: 600; color: rgba(255,255,255,.5); }
.hero-panel__spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.hero-panel__spark i {
flex: 1;
height: var(--h, 50%);
border-radius: 2px 2px 0 0;
background: linear-gradient(180deg, rgba(var(--brand-rgb),.9), rgba(var(--brand-rgb),.2));
transform-origin: bottom;
animation: sparkGrow 1.1s var(--ease-out) backwards;
}
.hero-panel__spark i:nth-child(2) { animation-delay: .07s; }
.hero-panel__spark i:nth-child(3) { animation-delay: .14s; }
.hero-panel__spark i:nth-child(4) { animation-delay: .21s; }
.hero-panel__spark i:nth-child(5) { animation-delay: .28s; }
.hero-panel__spark i:nth-child(6) { animation-delay: .35s; }
@keyframes sparkGrow { from { transform: scaleY(.04); opacity: 0; } } @media (max-width: 1080px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__visual { display: none; }
.hero__title { max-width: 18ch; }
} .stats-strip { padding-block: var(--space-l); }
.stats-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); text-align: center; }
@media (max-width: 720px) { .stats-strip__grid { grid-template-columns: repeat(2, 1fr); } }
.stat-item__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--brand-text); line-height: 1; }
.stat-item__label { font-size: var(--text-s); color: var(--muted); margin-top: .5em; } .value-prop { padding: var(--space-m); }
.value-prop__index {
font-family: var(--font-mono);
font-size: .6875rem;
font-weight: 500;
letter-spacing: .14em;
color: var(--muted-soft);
margin-bottom: var(--space-s);
}
.value-prop__icon {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border-radius: var(--radius-m);
background: var(--brand-light);
color: var(--brand-text);
margin-bottom: var(--space-s);
flex-shrink: 0;
} .value-prop__icon .icon { width: 20px; height: 20px; }
.value-prop__title {
font-size: var(--text-m);
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.3;
margin-bottom: .4em;
}
.value-prop p { font-size: var(--text-s); color: var(--muted); line-height: 1.6; } .process-timeline { position: relative; max-width: 880px; margin-inline: auto; }
.process-timeline__line {
position: absolute;
left: 27px; top: 8px; bottom: 8px;
width: 2px;
background: var(--border);
}
.process-timeline__line-fill {
position: absolute;
left: 0; top: 0;
width: 100%; height: 0%;
background: var(--brand);
transition: height 900ms var(--ease-out);
}
.process-step { position: relative; display: flex; gap: var(--space-m); padding-bottom: var(--space-xl); }
.process-step:last-child { padding-bottom: 0; }
.process-step__marker {
position: relative; z-index: 1;
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 800; color: var(--muted-soft);
transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
}
.process-step.is-active .process-step__marker { border-color: var(--brand); color: var(--brand-text); background: var(--brand-light); }
.process-step__body { padding-top: .5em; }
.process-step__title { font-size: var(--text-l); margin-bottom: .4em; }
.process-step__meta { font-size: var(--text-xs); color: var(--brand-text); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5em; } .work-filter { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-bottom: var(--space-l); }
.work-filter__btn { padding: .6em 1.3em; border-radius: var(--radius-full); border: 1.5px solid var(--border); font-size: var(--text-s); font-weight: 600; color: var(--muted); transition: all var(--dur-fast) var(--ease); }
.work-filter__btn:hover { border-color: var(--brand); color: var(--brand-text); }
.work-filter__btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.work-grid[data-filtering] > * { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.work-grid > .is-hidden { display: none; } .testimonial-slider { position: relative; }
.testimonial-slider__track {
display: flex;
gap: var(--space-m);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--space-s);
scrollbar-width: none;
}
.testimonial-slider__track::-webkit-scrollbar { display: none; }
.testimonial-slider__track .testimonial-card { min-width: min(420px, 86vw); scroll-snap-align: start; }
.testimonial-slider__nav { display: flex; justify-content: center; gap: var(--space-2xs); margin-top: var(--space-m); }
.testimonial-slider__nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); }
.testimonial-slider__nav-btn:hover { border-color: var(--brand); color: var(--brand-text); }
.testimonial-slider__nav-btn .icon { width: 18px; height: 18px; } .pricing-card {
padding: var(--space-l);
display: flex;
flex-direction: column;
position: relative;
}
.pricing-card--featured { border-color: var(--brand); box-shadow: var(--shadow-m); transform: scale(1.02); }
.pricing-card__badge { position: absolute; top: -14px; left: var(--space-l); }
.pricing-card__title { font-size: var(--text-l); }
.pricing-card__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-block: .3em; }
.pricing-card__price small { font-size: var(--text-s); font-weight: 500; color: var(--muted); }
.pricing-card__desc { font-size: var(--text-s); margin-bottom: var(--space-m); }
.pricing-card__features { display: flex; flex-direction: column; gap: .7em; margin-bottom: var(--space-m); flex-grow: 1; }
.pricing-card__features li { display: flex; align-items: flex-start; gap: .6em; font-size: var(--text-s); }
.pricing-card__features .icon { width: 18px; height: 18px; color: var(--brand-text); flex-shrink: 0; margin-top: .1em; } .faq-list { max-width: var(--container-narrow); margin-inline: auto; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-bottom: var(--space-l); } .blog-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-l); flex-wrap: wrap; gap: var(--space-s); } .cta-band {
position: relative;
overflow: hidden;
background: var(--navy);
border-radius: var(--radius-l);
padding: var(--space-2xl) var(--space-l);
text-align: center;
margin-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.cta-band__glow {
position: absolute;
inset: 0;
background: radial-gradient(50% 70% at 50% 0%, rgba(var(--brand-rgb), .4), transparent 70%);
pointer-events: none;
}
.cta-band__content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-xs); }
.cta-band p { color: rgba(255,255,255,.72); margin-bottom: var(--space-m); font-size: var(--text-l); }
.cta-band__actions { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; } .trust-strip {
border-bottom: 1px solid var(--border);
padding-block: var(--space-m);
}
.trust-strip__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.trust-strip__item {
display: flex;
align-items: center;
gap: .65em;
padding-inline: var(--space-m);
border-left: 1px solid var(--border);
font-family: var(--font-mono);
font-size: .6875rem;
letter-spacing: .07em;
line-height: 1.45;
text-transform: uppercase;
color: var(--muted);
}
.trust-strip__item:first-child { border-left: 0; padding-left: 0; }
.trust-strip__item .icon { width: 16px; height: 16px; color: var(--brand-text); flex-shrink: 0; }
@media (max-width: 940px) {
.trust-strip__row { grid-template-columns: repeat(2, 1fr); gap: var(--space-s); }
.trust-strip__item { border-left: 0; padding-inline: 0; }
}
@media (max-width: 520px) {
.trust-strip__row { grid-template-columns: 1fr; }
} .spec-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-xl);
border-top: 1px solid var(--border);
}
.spec-row {
display: flex;
gap: var(--space-s);
padding-block: var(--space-m);
border-bottom: 1px solid var(--border);
}
.spec-row__icon {
flex-shrink: 0;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: var(--radius-m);
background: var(--brand-light);
color: var(--brand-text);
}
.spec-row__icon .icon { width: 20px; height: 20px; }
.spec-row__title {
font-size: var(--text-m);
font-weight: 700;
letter-spacing: -.015em;
margin-bottom: .35em;
line-height: 1.3;
}
.spec-row__desc { font-size: var(--text-s); color: var(--muted); line-height: 1.6; }
@media (max-width: 860px) {
.spec-list { grid-template-columns: 1fr; }
}  .stack-band {
background-color: var(--navy);
background-image: linear-gradient(180deg, var(--navy) 0%, #071322 100%);
} .section--dark .eyebrow,
.page-header .eyebrow,
.cta-band .eyebrow { color: var(--brand-on-dark); }
.stack { border-top: 1px solid rgba(255,255,255,.13); }
.stack__layer {
position: relative;
display: grid;
grid-template-columns: minmax(230px, 310px) 1fr;
gap: var(--space-s) var(--space-xl);
align-items: start;
padding: var(--space-m) var(--space-s);
border-bottom: 1px solid rgba(255,255,255,.13);
transition: background-color var(--dur-base) var(--ease);
}
.stack__layer:hover { background: rgba(255,255,255,.035); } .stack__layer::before {
content: "";
position: absolute;
left: 0;
top: -1px;
bottom: -1px;
width: 2px;
background: var(--brand);
transform: scaleY(0);
transform-origin: top;
transition: transform var(--dur-base) var(--ease-out);
}
.stack__layer:hover::before { transform: scaleY(1); }
.stack__head { display: flex; gap: var(--space-s); align-items: baseline; }
.stack__no {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
color: var(--brand-on-dark);
font-variant-numeric: tabular-nums;
}
.stack__name {
font-size: var(--text-l);
color: #fff;
letter-spacing: -.02em;
margin-bottom: .3em;
line-height: 1.2;
}
.stack .stack__note {
font-size: var(--text-s);
color: rgba(255,255,255,.52);
line-height: 1.5;
}
.stack__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.stack__tool {
font-family: var(--font-mono);
font-size: .8125rem;
padding: .45em .9em;
border-radius: var(--radius-full);
border: 1px solid rgba(255,255,255,.17);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.86);
white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.stack__tool:hover {
border-color: var(--brand);
background: rgba(var(--brand-rgb), .18);
color: #fff;
}
@media (max-width: 880px) {
.stack__layer { grid-template-columns: 1fr; gap: var(--space-s); }
} .matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-l);
overflow: hidden;
}
.matrix__cell {
display: flex;
gap: var(--space-s);
padding: var(--space-m);
background: var(--surface);
transition: background var(--dur-base) var(--ease);
}
.matrix__cell:hover { background: var(--surface-alt); }
.matrix__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: var(--radius-m);
background: var(--brand-light);
color: var(--brand-text);
}
.matrix__icon .icon { width: 19px; height: 19px; }
.matrix__title {
font-family: var(--font-display);
font-size: var(--text-m);
font-weight: 700;
letter-spacing: -.015em;
margin-bottom: .3em;
}
.matrix__desc { font-size: var(--text-s); color: var(--muted); line-height: 1.55; }
@media (max-width: 940px) { .matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .matrix { grid-template-columns: 1fr; } } .section--dark .process-timeline__line { background: rgba(255,255,255,.14); }
.section--dark .process-step__marker {
background: var(--navy);
border-color: rgba(255,255,255,.22);
color: rgba(255,255,255,.55);
}
.section--dark .process-step.is-active .process-step__marker {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.section--dark .process-step__title { color: #fff; }
.section--dark .process-step__meta { color: var(--brand-on-dark); }