:root {
    --bg: #080a16;
    --bg-deep: #050611;
    --bg-soft: #11152a;
    --surface: #ffffff;
    --surface-soft: #f4f6fb;
    --text: #10121a;
    --text-soft: #5d6374;
    --white: #ffffff;
    --muted: #a8afc2;
    --line: rgba(16, 18, 26, 0.11);
    --line-dark: rgba(255, 255, 255, 0.12);
    --cyan: #11c5ef;
    --blue: #2875ff;
    --purple: #a443f3;
    --mint: #18e1bb;
    --gradient: linear-gradient(120deg, #19d5ed 0%, #2f78ff 46%, #a544f4 100%);
    --gradient-wide: linear-gradient(105deg, #16dfd1 0%, #16bde9 28%, #3b6fff 58%, #a944f4 100%);
    --shadow: 0 24px 80px rgba(14, 20, 46, 0.13);
    --shadow-dark: 0 32px 100px rgba(0, 0, 0, 0.42);
    --radius: 28px;
    --radius-sm: 18px;
    --container: 1220px;
    --header-height: 82px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    color: var(--text);
    background: var(--bg);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-x: clip;
}

body.nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { color: #fff; background: #6558f5; }

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
    position: relative;
}

.section { position: relative; padding: 126px 0; }
.section-light { background: var(--surface-soft); }
.section-dark { color: var(--white); background: var(--bg); }
.section-ink { color: var(--white); background: #0a0d1b; overflow: hidden; }

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 10px 16px;
    color: #fff;
    background: #111;
    border-radius: 10px;
    transform: translateY(-150%);
    transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.page-noise {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.cursor-glow {
    position: fixed;
    top: -220px;
    left: -220px;
    z-index: 1;
    width: 440px;
    height: 440px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 91, 255, .10), transparent 68%);
    will-change: transform;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: var(--header-height);
    color: #fff;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, height .3s ease;
}
.site-header.scrolled {
    height: 72px;
    background: rgba(7, 9, 20, .82);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 3;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: -.04em;
}
.brand-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    filter: drop-shadow(0 8px 20px rgba(61, 101, 255, .25));
}
.brand-icon img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-size: 25px; line-height: 1; }
.brand-name span {
    color: transparent;
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
}

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav > a {
    position: relative;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: color .2s ease;
}
.main-nav > a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 1px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}
.main-nav > a:hover { color: #fff; }
.main-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.main-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.main-nav .nav-cta:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}
.main-nav .nav-cta span { font-size: 17px; }

.nav-toggle {
    display: none;
    position: relative;
    z-index: 3;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: rgba(255,255,255,.06);
}
.nav-toggle span {
    position: absolute;
    left: 12px;
    width: 19px;
    height: 1.5px;
    background: #fff;
    transition: transform .25s ease, top .25s ease;
}
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.hero {
    min-height: 930px;
    padding: 174px 0 48px;
    overflow: hidden;
    isolation: isolate;
}
.hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 180px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.015));
}
.hero-grid-lines {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .22;
    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: 74px 74px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
}
.hero-grid-lines::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, transparent 0, rgba(8,10,22,.7) 72%);
}
.hero-orb {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .26;
    animation: drift 12s ease-in-out infinite alternate;
}
.orb-one { width: 430px; height: 430px; top: -170px; left: -120px; background: #0ce4d1; }
.orb-two { width: 620px; height: 620px; right: -230px; top: 110px; background: #7437f3; animation-delay: -5s; }

@keyframes drift {
    to { transform: translate3d(40px, 35px, 0) scale(1.07); }
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
    align-items: center;
    gap: 60px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 13px;
    color: #d7d9e6;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 5px rgba(24,225,187,.1), 0 0 18px rgba(24,225,187,.8);
}

.hero h1,
.section-heading h2,
.portfolio-head h2,
.about-copy h2,
.outcome-title h2,
.contact-copy h2,
.faq-heading h2 {
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: 1.02;
}
.hero h1 { max-width: 720px; font-size: clamp(52px, 5.4vw, 78px); }
.gradient-text {
    color: transparent;
    background: var(--gradient-wide);
    background-size: 160% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: gradientShift 6s ease-in-out infinite alternate;
}
@keyframes gradientShift { to { background-position: 100% 0; } }

.hero-lead {
    max-width: 640px;
    margin: 27px 0 0;
    color: #b9bfd0;
    font-size: 18px;
    line-height: 1.75;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 36px; }
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
    color: #fff;
    background: var(--gradient);
    box-shadow: 0 14px 34px rgba(66, 91, 255, .28), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before {
    content: "";
    position: absolute;
    inset: -100% 30% -100% -30%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform: rotate(18deg) translateX(-130%);
    transition: transform .7s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(66, 91, 255, .37); }
.btn-primary:hover::before { transform: rotate(18deg) translateX(230%); }
.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); }

.trust-row {
    display: flex;
    align-items: stretch;
    gap: 22px;
    margin-top: 52px;
}
.trust-item { display: flex; min-width: 110px; flex-direction: column; gap: 2px; }
.trust-item strong { font-family: "Space Grotesk", sans-serif; font-size: 20px; letter-spacing: -.04em; line-height: 1.2; }
.trust-item strong span { color: #7d8499; font-size: 13px; }
.trust-item > span { color: #888fa3; font-size: 11px; line-height: 1.35; }
.trust-divider { width: 1px; background: rgba(255,255,255,.11); }
.stars { color: #f6c749; font-size: 10px; letter-spacing: .03em; }

.hero-visual { min-height: 590px; display: grid; place-items: center; position: relative; }
.visual-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 64, 255, .3), rgba(42, 205, 255, .08) 45%, transparent 68%);
    filter: blur(12px);
}
.browser-card {
    position: relative;
    z-index: 2;
    width: 565px;
    max-width: 100%;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 25px;
    background: rgba(13, 16, 32, .94);
    box-shadow: 0 44px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.035) inset;
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
    transition: transform .18s ease-out;
    overflow: hidden;
}
.browser-top {
    height: 48px;
    display: grid;
    grid-template-columns: 90px 1fr 50px;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #12152a;
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.browser-dots i:first-child { background: #ff6a6a; }
.browser-dots i:nth-child(2) { background: #ffd058; }
.browser-dots i:nth-child(3) { background: #45d990; }
.browser-address {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 210px;
    padding: 5px 12px;
    color: #7e8499;
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    font-size: 9px;
    text-align: center;
}
.lock { width: 7px; height: 7px; border: 1px solid #777f94; border-radius: 2px; }
.browser-menu { display: flex; justify-content: flex-end; gap: 3px; }
.browser-menu i { width: 3px; height: 3px; border-radius: 50%; background: #696f83; }

.browser-body {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 24%, rgba(130,56,245,.33), transparent 32%),
        radial-gradient(circle at 22% 86%, rgba(0,208,225,.18), transparent 36%),
        linear-gradient(135deg, #111426 0%, #0c0f1e 100%);
}
.browser-body::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.mock-nav { position: relative; z-index: 2; height: 60px; display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mock-brand { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.75); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.mock-brand span { width: 19px; height: 19px; border-radius: 6px; background: var(--gradient); }
.mock-links { display: flex; gap: 16px; margin-left: auto; }
.mock-links i { width: 32px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.13); }
.mock-button { width: 55px; height: 20px; margin-left: 20px; border-radius: 7px; background: rgba(255,255,255,.8); }
.mock-hero { position: relative; z-index: 2; width: 68%; padding: 66px 0 0 42px; }
.mock-kicker { margin-bottom: 14px; color: #38d8d9; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.mock-title { display: grid; gap: 8px; }
.mock-title span { height: 17px; border-radius: 4px; background: rgba(255,255,255,.92); }
.mock-title span:nth-child(2) { width: 86%; }
.mock-title span:nth-child(3) { width: 67%; background: linear-gradient(90deg, #16d9dd, #8e49f4); }
.mock-copy { display: grid; gap: 6px; margin-top: 20px; }
.mock-copy span { width: 87%; height: 5px; border-radius: 5px; background: rgba(255,255,255,.16); }
.mock-copy span:nth-child(2) { width: 69%; }
.mock-actions { display: flex; gap: 10px; margin-top: 25px; }
.mock-actions i { width: 82px; height: 27px; border-radius: 8px; background: linear-gradient(120deg, #12c8e9, #7850f7); }
.mock-actions i:nth-child(2) { width: 64px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); }

.mock-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(18, 22, 42, .76);
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
}
.card-lead { right: 23px; top: 112px; animation: floatCard 4.2s ease-in-out infinite; }
.card-speed { right: 88px; bottom: 28px; animation: floatCard 4.8s ease-in-out infinite -.7s; }
@keyframes floatCard { 50% { transform: translateY(-7px); } }
.float-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.float-icon.green { color: #53e3ac; background: rgba(62, 223, 167, .12); }
.float-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mock-float-card > div:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.mock-float-card span { color: #8e95aa; font-size: 7px; }
.mock-float-card strong { color: #fff; font-size: 9px; }
.pulse-dot { width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: #55e7ac; box-shadow: 0 0 0 5px rgba(85,231,172,.12); }
.speed-score { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border: 2px solid #40dbb0; border-radius: 50%; font-size: 10px; font-weight: 800; }
.mock-device {
    position: absolute;
    z-index: 4;
    right: 27px;
    bottom: -56px;
    width: 116px;
    height: 225px;
    padding: 8px;
    border: 3px solid #262b43;
    border-radius: 26px;
    background: #080a13;
    box-shadow: -20px 28px 45px rgba(0,0,0,.4);
    transform: rotate(5deg);
}
.device-notch { position: absolute; top: 10px; left: 50%; width: 38px; height: 7px; border-radius: 8px; background: #06070d; transform: translateX(-50%); }
.device-content { height: 100%; padding: 48px 12px 0; border-radius: 18px; background: radial-gradient(circle at 70% 18%, rgba(163,67,243,.4), transparent 34%), linear-gradient(160deg,#15182b,#0c0e1b); }
.device-chip { width: 38px; height: 8px; margin-bottom: 15px; border-radius: 4px; background: #26cfdc; }
.device-title { height: 7px; margin: 6px 0; border-radius: 5px; background: rgba(255,255,255,.82); }
.device-title.short { width: 72%; background: linear-gradient(90deg,#1fe0d0,#9b4ef3); }
.device-button { width: 62px; height: 20px; margin-top: 19px; border-radius: 6px; background: linear-gradient(110deg,#10c8e8,#7652f8); }

.tech-pill {
    position: absolute;
    z-index: 6;
    padding: 8px 12px;
    color: #cdd1df;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(11,14,28,.72);
    font-size: 9px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.pill-one { top: 42px; left: 5px; }
.pill-two { top: 105px; right: -12px; }
.pill-three { bottom: 55px; left: 10px; }

.proof-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 90px;
    padding: 26px 0 0;
    color: #5f667a;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}
.proof-strip i { width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(120deg,#18dbd5,#8b4af4); }

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 62px;
}
.section-label {
    display: block;
    margin-bottom: 17px;
    color: #5961e9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.section-heading h2,
.portfolio-head h2,
.about-copy h2,
.outcome-title h2,
.contact-copy h2,
.faq-heading h2 { font-size: clamp(39px, 4.3vw, 59px); }
.section-heading h2 span,
.about-copy h2 span { color: #777d8c; }
.section-heading > p,
.portfolio-head > p {
    margin: 0 0 4px;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.8;
}
.section-heading.light h2 span { color: #7e8499; }
.section-heading.light > p { color: #9ca3b6; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.service-card {
    position: relative;
    min-height: 420px;
    padding: 34px;
    border: 1px solid rgba(13, 17, 35, .09);
    border-radius: var(--radius);
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 55px rgba(22,31,65,.06);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -120px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,88,255,.1), transparent 68%);
    transition: transform .4s ease;
}
.service-card:hover { transform: translateY(-7px); border-color: rgba(70,80,237,.2); box-shadow: 0 28px 70px rgba(22,31,65,.11); }
.service-card:hover::after { transform: scale(1.35); }
.service-card.featured {
    color: #fff;
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 85% 15%, rgba(149,65,248,.38), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(14,211,208,.19), transparent 30%),
        #0c0f20;
    box-shadow: 0 30px 80px rgba(18,22,55,.18);
}
.service-card.featured::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.service-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.service-number { color: #9ca2b2; font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 700; }
.service-tag { padding: 6px 10px; color: #c8fbef; border: 1px solid rgba(33,229,186,.2); border-radius: 999px; background: rgba(33,229,186,.08); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.service-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-top: 42px;
    color: #5561ee;
    border: 1px solid rgba(83,96,239,.14);
    border-radius: 17px;
    background: #f3f4ff;
}
.featured .service-icon { color: #fff; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.service-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { position: relative; z-index: 1; margin: 24px 0 12px; font-family: "Space Grotesk", sans-serif; font-size: 26px; letter-spacing: -.035em; }
.service-card p { position: relative; z-index: 1; max-width: 520px; margin: 0; color: #6c7281; font-size: 14px; line-height: 1.75; }
.featured p { color: #aeb4c6; }
.service-card ul { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.service-card li { padding: 7px 10px; color: #bec3d2; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.045); font-size: 9px; font-weight: 700; }
.card-link { position: absolute; z-index: 2; right: 34px; bottom: 34px; left: 34px; display: flex; justify-content: space-between; align-items: center; padding-top: 17px; color: #333848; border-top: 1px solid rgba(14,18,34,.09); font-size: 11px; font-weight: 800; }
.card-link b { font-size: 18px; transition: transform .25s ease; }
.service-card:hover .card-link b { transform: translate(3px,-3px); }

.process-orb { position: absolute; top: 0; right: -250px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(125,58,248,.18), transparent 68%); }
.process-list { border-top: 1px solid var(--line-dark); }
.process-item {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 240px;
    align-items: center;
    gap: 28px;
    min-height: 215px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line-dark);
    transition: background .3s ease;
}
.process-index { align-self: start; padding-top: 20px; color: #666d83; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700; }
.process-content { max-width: 600px; }
.process-mini { color: #5fdccf; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.process-content h3 { margin: 8px 0 8px; font-family: "Space Grotesk", sans-serif; font-size: clamp(25px,3vw,37px); letter-spacing: -.045em; }
.process-content p { margin: 0; color: #9299ac; font-size: 14px; }
.process-art { justify-self: end; position: relative; width: 190px; height: 125px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); overflow: hidden; }
.process-art::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 20px 20px; }
.art-call span { position: absolute; top: 31px; left: 35px; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.art-call span::before { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--gradient); }
.art-call i,.art-call b { position:absolute; left:105px; width:48px; height:7px; border-radius:5px; background:rgba(255,255,255,.65); }
.art-call i{top:45px}.art-call b{top:61px;width:34px;background:rgba(255,255,255,.18)}
.art-design span { position:absolute; inset:23px 30px; border:1px solid rgba(255,255,255,.16); border-radius:10px; transform:rotate(-5deg); }
.art-design span::after { content:""; position:absolute; top:16px; left:15px; width:64px; height:7px; border-radius:5px; background:linear-gradient(90deg,#17d9d2,#8c4cf3); box-shadow:0 16px 0 rgba(255,255,255,.15),0 30px 0 rgba(255,255,255,.1); }
.art-design i { position:absolute; right:25px; bottom:21px; width:36px; height:36px; border-radius:10px; background:#fff; transform:rotate(8deg); }
.art-design b { position:absolute; right:34px; bottom:30px; width:18px; height:18px; border-radius:5px; background:var(--gradient); transform:rotate(8deg); }
.art-code span { position:absolute; top:35px; left:50%; color:transparent; background:var(--gradient); background-clip:text; -webkit-background-clip:text; font-family:monospace; font-size:29px; font-weight:800; transform:translateX(-50%); }
.art-code i,.art-code b { position:absolute; bottom:29px; height:5px; border-radius:5px; background:rgba(255,255,255,.16); }
.art-code i{left:36px;width:52px}.art-code b{right:36px;width:52px}
.art-launch span { position:absolute; top:27px; left:50%; width:55px; height:55px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--gradient); font-size:27px; font-weight:300; transform:translateX(-50%); box-shadow:0 0 30px rgba(70,91,255,.35); }
.art-launch i,.art-launch b { position:absolute; bottom:18px; width:5px; border-radius:5px 5px 0 0; background:rgba(255,255,255,.16); }
.art-launch i{left:38px;height:20px;box-shadow:12px -8px 0 rgba(255,255,255,.2),24px -17px 0 rgba(255,255,255,.26)}
.art-launch b{right:38px;height:13px;box-shadow:-12px -12px 0 rgba(255,255,255,.2),-24px -25px 0 rgba(255,255,255,.3)}

.portfolio-section { background: #fff; }
.portfolio-head { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; margin-bottom: 58px; }
.portfolio-head > p { max-width: 490px; justify-self: end; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.project-card { padding: 14px 14px 22px; border: 1px solid var(--line); border-radius: 27px; background: #f7f8fb; transition: transform .35s ease, box-shadow .35s ease; }
.project-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.project-card:nth-child(3) { grid-column: 1 / -1; }
.project-browser { border-radius: 19px; overflow: hidden; box-shadow: 0 16px 38px rgba(17,21,41,.13); }
.project-bar { height: 32px; display:flex; align-items:center; gap:5px; padding:0 12px; background:#f3f4f7; }
.project-bar i { width:6px;height:6px;border-radius:50%;background:#c5c9d1; }
.project-canvas { position:relative; min-height:310px; overflow:hidden; }
.project-card:nth-child(3) .project-canvas { min-height:360px; }
.project-one .project-canvas { background: linear-gradient(140deg,#111727,#192849); }
.project-two .project-canvas { background: linear-gradient(140deg,#ecf7f6,#d7f3ee); }
.project-three .project-canvas { background: #0d0f17; }
.pc-nav { position:absolute; top:24px; left:28px; right:28px; height:14px; border-radius:8px; background:rgba(255,255,255,.13); }
.project-two .pc-nav { background:rgba(11,74,66,.13); }
.pc-copy { position:absolute; z-index:2; top:95px; left:43px; display:grid; gap:9px; }
.pc-copy span { display:block; width:180px; height:16px; border-radius:5px; background:rgba(255,255,255,.91); }
.pc-copy span:nth-child(2){width:145px}.pc-copy span:nth-child(3){width:100px;background:linear-gradient(90deg,#1bd8d5,#8d4df3)}
.pc-copy b { display:block; width:85px; height:27px; margin-top:14px; border-radius:8px; background:linear-gradient(90deg,#1bd8d5,#7856f6); }
.pc-photo { position:absolute; right:-40px; bottom:-70px; width:300px; height:300px; border-radius:50%; background:linear-gradient(135deg,#12d2df,#3c70fa 50%,#9f47f4); box-shadow:-40px -25px 80px rgba(55,107,246,.22); }
.pc-photo::before { content:""; position:absolute; inset:42px; border:1px solid rgba(255,255,255,.28); border-radius:40% 60% 52% 48%; }
.pc-photo::after { content:"S"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.85); font-family:"Space Grotesk",sans-serif; font-size:95px; font-weight:700; }
.pc-stat { position:absolute; top:78px; left:45px; display:flex; flex-direction:column; }
.pc-stat strong { color:#0d675b; font-family:"Space Grotesk",sans-serif; font-size:31px; letter-spacing:-.05em; }
.pc-stat span { color:#56877f; font-size:10px; }
.pc-chart { position:absolute; right:35px; bottom:42px; left:45px; height:120px; display:flex; align-items:end; gap:14px; padding:0 20px; border-left:1px solid rgba(13,103,91,.14); border-bottom:1px solid rgba(13,103,91,.14); }
.pc-chart i { flex:1; height:35%; border-radius:7px 7px 0 0; background:linear-gradient(180deg,#0fc6a9,#70dfc8); }
.pc-chart i:nth-child(2){height:52%}.pc-chart i:nth-child(3){height:42%}.pc-chart i:nth-child(4){height:77%}.pc-chart i:nth-child(5){height:92%;background:linear-gradient(180deg,#6b5af5,#9d74fa)}
.pc-float { position:absolute; top:68px; right:38px; width:90px; height:55px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:rgba(255,255,255,.54); box-shadow:0 15px 40px rgba(39,114,102,.12); backdrop-filter:blur(10px); }
.pc-float::before,.pc-float::after { content:""; position:absolute; left:14px; height:6px; border-radius:6px; background:#1a8678; }
.pc-float::before{top:15px;width:43px}.pc-float::after{top:29px;width:63px;background:rgba(26,134,120,.18)}
.pc-ring { position:absolute; top:50%; right:11%; width:250px; height:250px; border:44px solid transparent; border-top-color:#17d8d3; border-right-color:#4175fa; border-bottom-color:#a348f5; border-radius:50%; transform:translateY(-50%) rotate(30deg); filter:drop-shadow(0 0 35px rgba(87,87,255,.35)); }
.pc-ring::after { content:""; position:absolute; inset:-44px; border:1px solid rgba(255,255,255,.13); border-radius:50%; transform:scale(1.16); }
.dark-copy { top:110px; left:70px; }
.dark-copy span { width:260px; height:24px; }
.dark-copy span:nth-child(2){width:190px;background:linear-gradient(90deg,#1bd8d5,#8d4df3)}
.dark-copy b { width:105px; height:34px; }
.project-meta { display:flex; align-items:center; justify-content:space-between; padding:20px 8px 0; }
.project-meta > div { display:flex; flex-direction:column; }
.project-meta span { color:#858b9b; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.project-meta h3 { margin:3px 0 0; font-family:"Space Grotesk",sans-serif; font-size:21px; letter-spacing:-.035em; }
.project-meta > b { width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:18px;transition:transform .25s ease,background .25s ease,color .25s ease; }
.project-card:hover .project-meta > b { color:#fff;background:#111526;transform:translate(2px,-2px); }
.portfolio-note { display:flex; align-items:center; gap:15px; margin-top:28px; padding:22px 25px; border:1px dashed rgba(73,83,238,.27); border-radius:20px; background:#f6f6ff; }
.note-icon { width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:#fff;border-radius:13px;background:var(--gradient);font-size:22px; }
.portfolio-note > div:nth-child(2){display:flex;flex-direction:column;line-height:1.4}.portfolio-note strong{font-size:13px}.portfolio-note span{color:#7b8191;font-size:11px}.portfolio-note a{margin-left:auto;color:#535be4;font-size:12px;font-weight:800}.portfolio-note a span{color:inherit;font-size:16px;margin-left:5px}

.section-gradient { color:#fff; background: radial-gradient(circle at 10% 10%,rgba(18,215,212,.16),transparent 30%),radial-gradient(circle at 90% 30%,rgba(145,68,246,.2),transparent 35%),linear-gradient(140deg,#0a0d1d,#0e1125); overflow:hidden; }
.section-gradient::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:55px 55px; mask-image:radial-gradient(circle at center,black,transparent 80%); }
.about-grid { display:grid; grid-template-columns:.86fr 1.14fr; align-items:center; gap:100px; }
.about-visual { position:relative; min-height:510px; display:grid; place-items:center; }
.about-card-main { position:relative; width:370px; height:420px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:38px; background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025)); box-shadow:0 35px 100px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(10px); overflow:hidden; transform:rotate(-3deg); }
.about-card-main::before { content:""; position:absolute; width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(82,76,255,.3),transparent 68%); }
.about-card-main img { position:relative; z-index:2; width:195px; filter:drop-shadow(0 30px 40px rgba(45,93,255,.28)); }
.about-code-lines { position:absolute; right:26px; bottom:25px; left:26px; display:grid; gap:7px; opacity:.3; }
.about-code-lines i { height:4px;border-radius:4px;background:linear-gradient(90deg,#17d8d2 0 23%,rgba(255,255,255,.25) 23% 65%,transparent 65%); }
.about-code-lines i:nth-child(2){width:76%;margin-left:10%;}.about-code-lines i:nth-child(3){width:88%;}.about-code-lines i:nth-child(4){width:61%;margin-left:16%;}.about-code-lines i:nth-child(5){width:72%;}
.about-badge { position:absolute; z-index:3; display:flex; align-items:center; border:1px solid rgba(255,255,255,.15); background:rgba(12,15,31,.78); box-shadow:0 20px 45px rgba(0,0,0,.35); backdrop-filter:blur(14px); }
.badge-years { top:35px; right:-8px; gap:9px; padding:15px 18px; border-radius:17px; }
.badge-years strong { color:transparent;background:var(--gradient);background-clip:text;-webkit-background-clip:text;font-family:"Space Grotesk",sans-serif;font-size:34px;line-height:1; }
.badge-years span { color:#c2c7d6;font-size:9px;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.08em; }
.badge-rating { left:-12px; bottom:58px; display:grid; grid-template-columns:auto auto; column-gap:10px; padding:14px 18px; border-radius:17px; }
.mini-stars { grid-column:1/-1;color:#f5c84a;font-size:8px;letter-spacing:2px; }.badge-rating strong{font-family:"Space Grotesk",sans-serif;font-size:26px;line-height:1}.badge-rating small{align-self:end;color:#9299ad;font-size:8px;text-transform:uppercase;letter-spacing:.09em}
.about-copy .section-label { color:#59ded0; }
.about-copy h2 span { color:#858ba0; }
.about-copy p { margin:24px 0 0;color:#a7adbf;font-size:15px;line-height:1.85; }
.about-points { display:grid; gap:12px; margin-top:30px; }
.about-points div { display:flex;align-items:center;gap:11px;color:#d4d7e2;font-size:13px;font-weight:600; }
.about-points svg { width:20px;height:20px;padding:4px;color:#55dfc8;border-radius:50%;background:rgba(38,219,185,.1);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.text-link { display:inline-flex;align-items:center;gap:10px;margin-top:34px;color:#5b62ec;font-size:13px;font-weight:800; }
.section-gradient .text-link { color:#6fe5d4; }
.text-link span { font-size:18px;transition:transform .2s ease}.text-link:hover span{transform:translate(3px,-3px)}

.outcomes-section { background:#f6f7fa; }
.outcomes-grid { display:grid;grid-template-columns:.88fr 1.12fr;gap:100px;align-items:start; }
.outcome-title { position:sticky;top:120px; }
.outcome-title h2 { font-size:clamp(40px,4.4vw,60px); }
.outcome-list { border-top:1px solid var(--line); }
.outcome-item { display:grid;grid-template-columns:50px 1fr;gap:25px;padding:35px 0;border-bottom:1px solid var(--line); }
.outcome-item > span { color:#9da2b0;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700; }
.outcome-item h3 { margin:0 0 9px;font-family:"Space Grotesk",sans-serif;font-size:25px;letter-spacing:-.035em; }
.outcome-item p { margin:0;color:#6d7382;font-size:14px;line-height:1.75; }

.contact-section { color:#fff;background:#080a16;overflow:hidden; }
.contact-bg { position:absolute;inset:0; }
.contact-bg::before { content:"";position:absolute;top:-320px;right:-180px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(134,59,246,.27),transparent 67%); }
.contact-bg::after { content:"";position:absolute;bottom:-300px;left:-170px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(15,213,210,.16),transparent 68%); }
.contact-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:95px;align-items:start; }
.contact-copy { position:sticky;top:120px; }
.light-label { color:#63dfd3; }
.contact-copy h2 { font-size:clamp(48px,5vw,70px); }
.contact-copy h2 span { color:transparent;background:var(--gradient-wide);background-clip:text;-webkit-background-clip:text; }
.contact-copy > p { margin:26px 0 0;color:#a5acbe;font-size:16px;line-height:1.85; }
.contact-direct { display:flex;flex-direction:column;gap:5px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1); }
.contact-direct > span { color:#72798e;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; }
.contact-direct a { display:inline-flex;align-items:center;gap:10px;width:max-content;font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.03em; }
.contact-direct b { font-size:17px;color:#5fe2d0; }
.contact-assurance { display:grid;gap:13px;margin-top:36px; }
.contact-assurance div { display:flex;align-items:center;gap:10px;color:#b9bfce;font-size:12px; }
.contact-assurance svg { width:18px;height:18px;color:#56dfc9;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.form-shell { position:relative;padding:38px;border:1px solid rgba(255,255,255,.13);border-radius:31px;background:rgba(255,255,255,.065);box-shadow:0 35px 100px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(20px); }
.form-shell::before { content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(80,223,219,.26),transparent 38%,rgba(161,66,244,.2));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; }
.form-head { display:flex;flex-direction:column;margin-bottom:27px; }
.form-head span { color:#6e758a;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; }
.form-head strong { margin-top:3px;font-family:"Space Grotesk",sans-serif;font-size:23px;letter-spacing:-.035em; }
.form-row.two-cols { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
.field { position:relative;margin-bottom:17px; }
.field label { display:block;margin-bottom:7px;color:#bbc1d0;font-size:10px;font-weight:700; }
.field label em,.consent em { color:#6be3d2;font-style:normal; }
.field input,.field select,.field textarea { width:100%;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;outline:none;background:rgba(7,9,20,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.field input,.field select { height:50px;padding:0 14px; }
.field textarea { min-height:140px;padding:13px 14px;resize:vertical;line-height:1.6; }
.field input::placeholder,.field textarea::placeholder { color:#5f6679; }
.field select { appearance:none;padding-right:38px;color:#cfd3df;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23858ca0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center; }
.field select option { color:#111;background:#fff; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(69,199,237,.7);background:rgba(9,12,27,.78);box-shadow:0 0 0 4px rgba(32,190,226,.09); }
.field.has-error input,.field.has-error select,.field.has-error textarea { border-color:#ff7d8d;box-shadow:0 0 0 4px rgba(255,90,112,.08); }
.field-error { display:none;margin-top:5px;color:#ff8b9b;font-size:9px; }
.field.has-error .field-error { display:block; }
.field-meta { display:flex;align-items:center;justify-content:space-between; }
.field-meta > span { margin-top:5px;color:#5e6579;font-size:9px; }
.field-meta b { color:#8990a4;font-weight:600; }
.consent { position:relative;display:flex;align-items:flex-start;gap:10px;margin:2px 0 22px;color:#8f96a9;font-size:9px;line-height:1.55;cursor:pointer; }
.consent input { position:absolute;opacity:0;pointer-events:none; }
.checkmark { width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(7,9,20,.55);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.checkmark svg { width:11px;height:9px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease; }
.consent input:checked + .checkmark { border-color:transparent;background:var(--gradient); }
.consent input:checked + .checkmark svg { opacity:1;transform:scale(1); }
.consent input:focus-visible + .checkmark { box-shadow:0 0 0 4px rgba(55,115,255,.2); }
.consent.has-error .checkmark { border-color:#ff7d8d; }
.btn-submit { width:100%;height:58px;color:#fff;background:var(--gradient);box-shadow:0 16px 35px rgba(59,85,255,.24); }
.btn-submit:hover { transform:translateY(-2px);box-shadow:0 20px 43px rgba(59,85,255,.34); }
.btn-submit:disabled { cursor:wait;opacity:.75; }
.btn-submit.loading svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-footnote { display:flex;align-items:center;justify-content:center;gap:7px;margin:13px 0 0;color:#646b7e;font-size:8px; }
.form-footnote svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; }
.honeypot { position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important; }
.form-alert { display:flex;align-items:flex-start;gap:12px;margin-bottom:23px;padding:14px 15px;border-radius:13px; }
.form-alert svg { width:21px;height:21px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.form-alert > div { display:flex;flex-direction:column;line-height:1.5; }.form-alert strong{font-size:11px}.form-alert span{font-size:9px;opacity:.8}
.form-alert.success { color:#8cf1cf;border:1px solid rgba(86,226,184,.2);background:rgba(39,205,159,.09); }
.form-alert.error { color:#ff9aaa;border:1px solid rgba(255,107,132,.2);background:rgba(255,75,105,.08); }

.faq-section { background:#fff; }
.faq-grid { display:grid;grid-template-columns:.75fr 1.25fr;gap:100px;align-items:start; }
.faq-heading { position:sticky;top:120px; }
.faq-heading h2 { font-size:clamp(38px,4vw,55px); }
.faq-heading p { margin:22px 0 0;color:#707686;font-size:14px;line-height:1.8; }
.accordion { border-top:1px solid var(--line); }
.accordion-item { border-bottom:1px solid var(--line); }
.accordion-item button { width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;color:var(--text);border:0;background:none;text-align:left;font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:600;letter-spacing:-.025em; }
.accordion-item button i { position:relative;width:26px;height:26px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;transition:background .2s ease,border-color .2s ease; }
.accordion-item button i::before,.accordion-item button i::after { content:"";position:absolute;top:50%;left:50%;width:10px;height:1.5px;background:#4b5060;transform:translate(-50%,-50%);transition:transform .25s ease,background .25s ease; }
.accordion-item button i::after { transform:translate(-50%,-50%) rotate(90deg); }
.accordion-item.open button i { border-color:transparent;background:#111526; }
.accordion-item.open button i::before,.accordion-item.open button i::after { background:#fff; }
.accordion-item.open button i::after { transform:translate(-50%,-50%) rotate(0); }
.accordion-content { display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease; }
.accordion-content > p { min-height:0;overflow:hidden;margin:0;color:#6b7180;font-size:14px;line-height:1.8; }
.accordion-item.open .accordion-content { grid-template-rows:1fr; }
.accordion-item.open .accordion-content > p { padding:0 50px 26px 0; }

.site-footer { position:relative;color:#fff;background:#070914;overflow:hidden; }
.footer-glow { position:absolute;top:-400px;left:50%;width:850px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(94,67,244,.2),transparent 67%);transform:translateX(-50%); }
.footer-top { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;padding:80px 0 65px;border-bottom:1px solid rgba(255,255,255,.09); }
.footer-brand-wrap > p { max-width:440px;margin:23px 0 0;color:#7f869a;font-size:13px;line-height:1.8; }
.footer-cta { justify-self:end;display:flex;flex-direction:column;align-items:flex-end; }
.footer-cta > span { color:#696f83;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }
.footer-cta a { display:inline-flex;align-items:center;gap:14px;margin-top:7px;font-family:"Space Grotesk",sans-serif;font-size:clamp(25px,3vw,38px);font-weight:600;letter-spacing:-.045em; }
.footer-cta b { color:#59e0cf;font-size:25px;transition:transform .2s ease}.footer-cta a:hover b{transform:translate(4px,-4px)}
.footer-bottom { display:flex;align-items:center;justify-content:space-between;gap:30px;padding:27px 0;color:#60677a;font-size:9px; }
.footer-bottom > div { display:flex;flex-wrap:wrap;gap:22px; }
.footer-bottom a { transition:color .2s ease; }.footer-bottom a:hover{color:#fff}

.reveal { opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay { transition-delay:.12s; }

@media (max-width: 1100px) {
    :root { --container: 960px; }
    .hero { min-height:auto; padding-top:150px; }
    .hero-layout { grid-template-columns:1fr;gap:50px; }
    .hero-copy { max-width:820px; }
    .hero-visual { min-height:590px; }
    .browser-card { width:620px; }
    .section-heading { grid-template-columns:1fr;gap:22px; }
    .section-heading > p { max-width:700px; }
    .process-item { grid-template-columns:70px 1fr 190px; }
    .process-art { width:170px; }
    .about-grid { gap:60px; }
    .contact-grid { gap:60px; }
    .faq-grid { gap:60px; }
}

@media (max-width: 900px) {
    :root { --header-height: 72px; }
    .container { width:min(calc(100% - 36px), var(--container)); }
    .section { padding:95px 0; }
    .nav-toggle { display:block; }
    .main-nav {
        position:fixed;
        inset:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:center;
        gap:0;
        padding:100px 32px 40px;
        background:rgba(6,8,18,.97);
        backdrop-filter:blur(20px);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
    }
    .main-nav.open { opacity:1;visibility:visible;transform:translateY(0); }
    .main-nav > a { padding:15px 0;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);font-family:"Space Grotesk",sans-serif;font-size:26px;letter-spacing:-.04em; }
    .main-nav > a::after { display:none; }
    .main-nav .nav-cta { justify-content:center;margin-top:25px;padding:17px;border:0;background:var(--gradient);font-family:"Manrope",sans-serif;font-size:14px; }
    .hero { padding-top:135px; }
    .hero h1 { font-size:clamp(48px,9vw,70px); }
    .trust-row { flex-wrap:wrap; }
    .proof-strip { flex-wrap:wrap;gap:14px 18px; }
    .services-grid { grid-template-columns:1fr; }
    .service-card { min-height:380px; }
    .process-item { grid-template-columns:55px 1fr; }
    .process-art { display:none; }
    .portfolio-head { grid-template-columns:1fr;gap:22px; }
    .portfolio-head > p { justify-self:start; }
    .portfolio-grid { grid-template-columns:1fr; }
    .project-card:nth-child(3) { grid-column:auto; }
    .project-card:nth-child(3) .project-canvas { min-height:310px; }
    .about-grid { grid-template-columns:1fr;gap:55px; }
    .about-visual { order:2; }
    .outcomes-grid { grid-template-columns:1fr;gap:55px; }
    .outcome-title,.contact-copy,.faq-heading { position:static; }
    .contact-grid { grid-template-columns:1fr;gap:55px; }
    .faq-grid { grid-template-columns:1fr;gap:50px; }
    .footer-top { grid-template-columns:1fr;gap:45px; }
    .footer-cta { justify-self:start;align-items:flex-start; }
}

@media (max-width: 640px) {
    .container { width:min(calc(100% - 28px), var(--container)); }
    .section { padding:78px 0; }
    .brand-icon { width:40px;height:40px; }
    .brand-name { font-size:22px; }
    .hero { padding:116px 0 34px; }
    .eyebrow { font-size:9px;letter-spacing:.06em; }
    .hero h1 { font-size:clamp(43px,13vw,61px); }
    .hero-lead { font-size:16px;line-height:1.7; }
    .hero-actions { align-items:stretch; }
    .hero-actions .btn { width:100%; }
    .trust-row { display:grid;grid-template-columns:1fr 1fr;gap:19px; }
    .trust-row .trust-divider { display:none; }
    .trust-item:last-child { grid-column:1/-1; }
    .hero-visual { min-height:410px;margin:5px -25px 0;overflow:hidden; }
    .visual-glow { width:390px;height:390px; }
    .browser-card { width:470px;max-width:none;transform:scale(.72) rotateY(-3deg); }
    .browser-card:hover { transform:scale(.72) rotateY(-3deg); }
    .tech-pill { display:none; }
    .proof-strip { margin-top:20px;padding-top:22px;font-size:8px; }
    .section-heading,.portfolio-head { margin-bottom:40px; }
    .section-heading h2,.portfolio-head h2,.about-copy h2,.outcome-title h2,.contact-copy h2,.faq-heading h2 { font-size:clamp(37px,11vw,49px); }
    .section-heading > p,.portfolio-head > p { font-size:14px; }
    .services-grid { gap:14px; }
    .service-card { min-height:0;padding:27px;border-radius:23px; }
    .service-icon { margin-top:30px; }
    .service-card h3 { font-size:23px; }
    .service-card p { padding-bottom:60px; }
    .featured p { padding-bottom:0; }
    .service-card ul { margin-top:20px; }
    .card-link { right:27px;bottom:27px;left:27px; }
    .process-item { grid-template-columns:38px 1fr;gap:12px;min-height:190px;padding:28px 0; }
    .process-content h3 { font-size:27px; }
    .portfolio-grid { gap:18px; }
    .project-card { padding:10px 10px 18px;border-radius:22px; }
    .project-canvas,.project-card:nth-child(3) .project-canvas { min-height:235px; }
    .pc-copy { top:70px;left:30px;transform:scale(.78);transform-origin:left top; }
    .pc-photo { width:220px;height:220px;right:-70px;bottom:-50px; }
    .pc-stat { top:60px;left:30px; }
    .pc-chart { right:25px;bottom:30px;left:30px;height:90px;gap:8px; }
    .pc-float { display:none; }
    .pc-ring { right:-70px;width:210px;height:210px;border-width:35px; }
    .dark-copy { top:82px;left:35px;transform:scale(.72); }
    .portfolio-note { align-items:flex-start;padding:18px; }
    .portfolio-note a { display:none; }
    .about-visual { min-height:390px; }
    .about-card-main { width:280px;height:330px;border-radius:30px; }
    .about-card-main img { width:145px; }
    .badge-years { right:0;top:10px; }
    .badge-rating { left:0;bottom:25px; }
    .outcome-item { grid-template-columns:35px 1fr;gap:13px; }
    .contact-copy h2 { font-size:clamp(46px,13vw,60px); }
    .contact-direct a { font-size:19px; }
    .form-shell { padding:24px 18px;border-radius:24px; }
    .form-row.two-cols { grid-template-columns:1fr;gap:0; }
    .field input,.field select { height:52px; }
    .faq-heading .text-link { margin-top:22px; }
    .accordion-item button { padding:23px 0;font-size:17px; }
    .accordion-item.open .accordion-content > p { padding-right:0; }
    .footer-top { padding:65px 0 45px; }
    .footer-cta a { font-size:27px; }
    .footer-bottom { flex-direction:column;align-items:flex-start; }
    .footer-bottom > div { gap:14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
    .reveal { opacity:1;transform:none; }
}