@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #080a10;
    --bg2: #0c0f17;
    --panel: #10141d;
    --line: rgba(198, 211, 242, .1);
    --line-bright: rgba(122, 147, 214, .23);
    --text: #f3f5fa;
    --muted: #9299a9;
    --faint: #646d7f;
    --blue: #6d8dff;
    --cyan: #66d9f1;
    --violet: #a578f5;
    --mono: 'DM Mono', monospace;
    --sans: 'Manrope', sans-serif;
    --container: 1160px;
    --ease: cubic-bezier(.22, .68, 0, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 0%, rgba(73, 91, 171, .09), transparent 50%), linear-gradient(180deg, #080a10, #090b11 48%, #080a10)
}

::selection {
    background: rgba(107, 137, 255, .35);
    color: #fff
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

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

.skip-link {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 300;
    background: #fff;
    color: #000;
    padding: 10px 16px
}

.skip-link:focus {
    top: 16px
}

.loader {
    position: fixed;
    inset: 0;
    background: #080a10;
    z-index: 200;
    display: grid;
    place-items: center;
    transition: opacity .65s ease, visibility .65s
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden
}

.loader-inner {
    width: min(280px, 76vw);
    display: grid;
    gap: 13px
}

.loader-logo,
.brand {
    font-weight: 800;
    letter-spacing: -.06em;
    font-size: 19px
}

.loader-logo span,
.brand span {
    color: var(--blue)
}

.loader-caption,
.loader-percent,
.eyebrow,
.hero-name,
.hero-tags,
.scroll-cue,
.hero-bottom,
.service-number,
.project-meta,
.project-features,
.art-label,
.case-step>span,
.timeline-kicker,
.contact-card-head,
.contact-row small,
.contact-availability,
.footer-bottom,
.idea-footnote,
.about-code {
    font: 10px var(--mono);
    letter-spacing: .09em;
    color: var(--muted)
}

.loader-track {
    height: 2px;
    background: #1c2333;
    overflow: hidden
}

.loader-track i {
    height: 100%;
    display: block;
    width: 100%;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    transform-origin: left;
    animation: loadbar .55s ease both
}

.loader-percent {
    text-align: right;
    font-size: 9px
}

.site-header {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto;
    transition: background .3s, border .3s, box-shadow .3s
}

.site-header.is-scrolled {
    background: rgba(8, 10, 16, .78);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 40px #0003
}

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

.nav-menu {
    display: flex;
    align-items: center;
    gap: 31px
}

.nav-menu>a:not(.button) {
    font-size: 12px;
    color: #aeb4c3;
    transition: color .2s;
    position: relative
}

.nav-menu>a:not(.button):after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 1px;
    background: var(--blue);
    transition: right .25s
}

.nav-menu>a:not(.button):hover {
    color: #fff
}

.nav-menu>a:not(.button):hover:after {
    right: 0
}

.nav-mobile-social {
    display: none
}

.button {
    min-height: 48px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    padding: 0 21px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s;
    cursor: pointer
}

.button:hover {
    transform: translateY(-3px)
}

.button-primary {
    color: #08101b;
    background: linear-gradient(115deg, #a0b4ff, #77d9f0);
    box-shadow: 0 6px 25px #748aff28
}

.button-primary:hover {
    box-shadow: 0 9px 32px #748aff60
}

.button-primary>span:last-child {
    font-size: 17px
}

.button-ghost {
    border-color: var(--line-bright);
    background: #ffffff04;
    color: #e8ecf6
}

.button-ghost:hover {
    border-color: rgba(132, 160, 255, .55);
    background: #889fff0c
}

.button-small {
    min-height: 38px;
    padding: 0 15px;
    font-size: 11px
}

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    color: white;
    padding: 10px
}

.hero {
    position: relative;
    min-height: 780px;
    min-height: min(900px, 100svh);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 49.95%, rgba(123, 151, 218, .07) 50%, transparent 50.05%), linear-gradient(0deg, transparent 49.95%, rgba(123, 151, 218, .07) 50%, transparent 50.05%);
    background-size: 92px 92px;
    mask-image: linear-gradient(90deg, transparent, black 22%, black 82%, transparent);
    opacity: .4
}

.hero-grid {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 77% 43%, rgba(83, 101, 208, .15), transparent 38%)
}

.hero-orb {
    position: absolute;
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none
}

.hero-orb-one {
    width: 300px;
    height: 300px;
    background: #4264e8;
    opacity: .14;
    right: 18%;
    top: 20%
}

.hero-orb-two {
    width: 220px;
    height: 220px;
    background: #a450ca;
    opacity: .1;
    right: 4%;
    bottom: 12%
}

.hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 38px;
    padding-top: 88px;
    padding-bottom: 100px
}

.hero-copy {
    max-width: 590px
}

.eyebrow {
    color: #8995aa;
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7de1ba;
    display: inline-block;
    box-shadow: 0 0 10px #7de1ba66
}

.eyebrow-line {
    width: 38px;
    height: 1px;
    background: #38445a
}

.hero-name {
    font-size: 11px;
    color: #cbd1e0;
    margin: 0 0 14px
}

.hero h1 {
    font-size: clamp(48px, 6.25vw, 78px);
    line-height: 1.02;
    letter-spacing: -.075em;
    margin: 0;
    font-weight: 700
}

.hero h1 span,
.section-heading h2 span,
.solution-copy h2 span,
.about-copy h2 span,
.contact-copy h2 span {
    color: transparent;
    background: linear-gradient(115deg, #a4b5ff 3%, #74daf0 72%, #a889ff);
    background-clip: text;
    -webkit-background-clip: text
}

.hero-lead {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.04em;
    margin: 24px 0 9px
}

.rotating-word {
    color: #9cadff;
    display: inline-block;
    min-width: 156px;
    transition: opacity .25s, transform .25s
}

.rotating-word.is-changing {
    opacity: 0;
    transform: translateY(7px)
}

.hero-description {
    max-width: 495px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin: 0
}

.hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0 27px
}

.hero-tags span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: #9da7ba;
    font-size: 9px
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.whatsapp-mark {
    font-size: 18px;
    color: #7ce0be
}

.scroll-cue {
    margin-top: 41px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 9px;
    color: #8c95a5
}

.scroll-mouse {
    height: 21px;
    width: 14px;
    border: 1px solid #5a657a;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    padding-top: 4px
}

.scroll-mouse i {
    height: 4px;
    width: 2px;
    background: #aec1ff;
    border-radius: 2px;
    animation: scrollwheel 1.5s infinite
}

.scroll-arrow {
    color: #829bff;
    font-size: 14px
}

.hero-visual {
    height: 500px;
    position: relative;
    display: grid;
    place-items: center
}

.portrait-aura {
    position: absolute;
    width: 380px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(94, 111, 235, .26), rgba(123, 57, 190, .12) 38%, transparent 70%);
    filter: blur(28px)
}

.portrait-frame {
    position: relative;
    width: min(340px, 78%);
    height: 420px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(158, 180, 255, .75), rgba(97, 117, 231, .25) 38%, rgba(200, 114, 251, .46));
    clip-path: polygon(0 0, 86% 0, 100% 12%, 100% 100%, 14% 100%, 0 87%);
    box-shadow: 0 28px 90px #0008;
    transform: rotate(2deg)
}

.portrait-frame:after {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: inherit;
    background: #11141d
}

.portrait-frame img {
    position: absolute;
    z-index: 1;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    object-fit: cover;
    object-position: center 38%;
    clip-path: inherit;
    filter: saturate(.88) contrast(1.03)
}

.frame-corner {
    position: absolute;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-color: #9aafff
}

.corner-tl {
    top: 12px;
    left: 12px;
    border-top: 1px solid;
    border-left: 1px solid
}

.corner-br {
    bottom: 12px;
    right: 12px;
    border-bottom: 1px solid;
    border-right: 1px solid
}

.floating-code {
    position: absolute;
    z-index: 3;
    left: -3%;
    bottom: 54px;
    background: rgba(13, 17, 28, .88);
    border: 1px solid rgba(161, 179, 255, .2);
    box-shadow: 0 15px 35px #0006;
    backdrop-filter: blur(14px);
    border-radius: 5px
}

.code-card {
    padding: 13px 15px;
    max-width: 310px
}

.code-dots {
    display: flex;
    gap: 4px;
    margin-bottom: 10px
}

.code-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f27e90
}

.code-dots i:nth-child(2) {
    background: #e8c674
}

.code-dots i:nth-child(3) {
    background: #7dd9bb
}

.code-card code {
    font: 10px/1.8 var(--mono);
    color: #d5d8e4;
    white-space: nowrap
}

.code-card b {
    color: #a993ff;
    font-weight: 400
}

.code-card em {
    color: #88dcb6;
    font-style: normal
}

.code-card strong {
    color: #7b8293;
    font-weight: 400
}

.floating-chip {
    position: absolute;
    z-index: 3;
    right: -2%;
    top: 96px;
    padding: 10px 12px;
    border: 1px solid var(--line-bright);
    background: #111621c9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font: 8px var(--mono);
    letter-spacing: .07em;
    color: #b7c1d6
}

.chip-pulse {
    width: 6px;
    height: 6px;
    background: #7de1ba;
    border-radius: 50%;
    box-shadow: 0 0 10px #7de1ba
}

.visual-index {
    position: absolute;
    right: 1%;
    bottom: 36px;
    font: 11px var(--mono);
    color: #d3d9e9
}

.visual-index span {
    color: var(--faint)
}

.orbit {
    position: absolute;
    border: 1px solid #8fa5ff19;
    border-radius: 50%;
    transform: rotate(-23deg)
}

.orbit-a {
    width: 455px;
    height: 330px
}

.orbit-b {
    width: 410px;
    height: 485px;
    transform: rotate(28deg)
}

.hero-bottom {
    position: absolute;
    z-index: 2;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 17px;
    white-space: nowrap;
    font-size: 8px;
    color: #687387
}

.hero-bottom-line {
    width: 50px;
    height: 1px;
    background: #334056
}

.hero-bottom i {
    color: #839bff;
    font-style: normal
}

.section {
    padding: 118px 0
}

.section-heading {
    margin-bottom: 48px
}

.section-heading .eyebrow {
    margin-bottom: 17px
}

.section-heading h2,
.solution-copy h2,
.about-copy h2,
.contact-copy h2 {
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.13;
    letter-spacing: -.065em;
    margin: 0;
    font-weight: 600
}

.section-subtitle {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
    margin: 17px 0 0
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px
}

.service-card {
    position: relative;
    overflow: hidden;
    min-height: 330px;
    padding: 21px 19px 19px;
    background: linear-gradient(145deg, #121722, #0d1017);
    border: 1px solid var(--line);
    border-radius: 5px;
    transform-style: preserve-3d;
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s
}

.service-card:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 138, 255, .13), transparent 68%);
    transition: opacity .3s
}

.service-card:hover {
    border-color: rgba(125, 151, 255, .4);
    box-shadow: 0 22px 44px #0003, 0 0 30px #637bff0b
}

.service-card:hover:before {
    opacity: 1
}

.card-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.service-number {
    color: #778197
}

.service-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #8299ff33;
    color: #a4b7ff;
    border-radius: 4px;
    font-size: 17px
}

.icon-window {
    display: flex;
    gap: 3px;
    align-items: flex-start;
    padding: 8px
}

.icon-window i {
    width: 4px;
    height: 4px;
    border: 1px solid #9fb3ff;
    border-radius: 50%
}

.icon-window:after {
    content: "";
    height: 1px;
    width: 14px;
    background: #6476a6;
    position: absolute;
    top: 15px
}

.icon-brackets {
    font: 16px var(--mono)
}

.icon-spark {
    color: #a891ff
}

.icon-bag {
    font-size: 23px
}

.service-visual {
    height: 78px;
    margin: 21px 0 18px;
    border: 1px solid #6375aa22;
    border-radius: 3px;
    background: linear-gradient(130deg, #121a2a, #10131a);
    position: relative;
    overflow: hidden
}

.visual-browser {
    padding: 13px
}

.visual-browser span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7289d4;
    margin-right: 3px
}

.visual-browser i {
    display: block;
    width: 80%;
    height: 20px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #334476, #202c48);
    box-shadow: 0 0 25px #657ffb1b
}

.visual-dashboard {
    display: flex;
    gap: 7px;
    padding: 12px
}

.visual-dashboard i {
    width: 25%;
    height: 40px;
    background: #202b45;
    border-radius: 2px
}

.visual-dashboard i:first-child {
    background: #425993
}

.visual-dashboard b {
    position: absolute;
    width: 30%;
    height: 18px;
    right: 13px;
    bottom: 12px;
    background: #6c89e94a;
    border-radius: 2px
}

.visual-nodes {
    background-image: linear-gradient(#8ea2e50d 1px, transparent 1px), linear-gradient(90deg, #8ea2e50d 1px, transparent 1px);
    background-size: 16px 16px
}

.visual-nodes i {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid #879cff;
    background: #182239;
    border-radius: 50%;
    top: 31px;
    left: 20%
}

.visual-nodes i:nth-child(2) {
    left: 49%;
    top: 18px
}

.visual-nodes i:nth-child(3) {
    left: 75%;
    top: 45px
}

.visual-nodes b {
    position: absolute;
    left: 23%;
    top: 34px;
    width: 53%;
    height: 20px;
    border-top: 1px solid #6377bd;
    border-right: 1px solid #6377bd;
    transform: skewY(25deg)
}

.visual-store {
    display: flex;
    gap: 7px;
    align-items: end;
    padding: 14px 18px
}

.visual-store i {
    width: 28px;
    height: 37px;
    border-radius: 15px 15px 5px 5px;
    background: linear-gradient(#7290e577, #253658);
    border: 1px solid #9cb0ff48
}

.visual-store i:nth-child(2) {
    height: 47px
}

.visual-store b {
    height: 27px;
    width: 50%;
    margin-left: auto;
    background: #1c2740;
    border: 1px solid #536ba4;
    border-radius: 3px 3px 0 0
}

.service-card h3 {
    font-size: 17px;
    letter-spacing: -.04em;
    margin: 0 0 8px
}

.service-card p {
    font-size: 11px;
    line-height: 1.8;
    color: var(--muted);
    min-height: 59px;
    margin: 0 0 14px
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #c3d0ff
}

.text-link span {
    color: #8da4ff;
    font-size: 16px;
    transition: transform .2s
}

.text-link:hover span {
    transform: translate(3px, -3px)
}

.projects-section {
    background: linear-gradient(180deg, #0b0e15, #0c0f17 55%, #090b11);
    border-block: 1px solid var(--line)
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.section-heading-row .section-subtitle {
    margin: 0 0 5px
}

.project-case {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 455px;
    border: 1px solid var(--line-bright);
    border-radius: 6px;
    overflow: hidden;
    background: #10141d;
    box-shadow: 0 30px 90px #0003
}

.project-art {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 45% 43%, #26345a 0, transparent 45%), linear-gradient(135deg, #151d2d, #0b101b)
}

.project-art:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#9db0e90b 1px, transparent 1px), linear-gradient(90deg, #9db0e90b 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(black, transparent)
}

.project-art-glow {
    position: absolute;
    width: 340px;
    height: 260px;
    border-radius: 50%;
    background: #667ffb2e;
    filter: blur(65px)
}

.store-window {
    width: 76%;
    max-width: 475px;
    position: relative;
    z-index: 1;
    transform: perspective(1100px) rotateY(5deg) rotateX(2deg);
    background: #f6f6f2;
    color: #17202b;
    box-shadow: 0 25px 55px #0008;
    border-radius: 5px;
    overflow: hidden
}

.store-top {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    background: white
}

.store-brand {
    font-size: 9px;
    font-weight: 800;
    color: #223c2a
}

.store-brand b {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    background: #31593e;
    color: #f6f6ed;
    border-radius: 50%
}

.store-brand small {
    display: block;
    font-size: 5px;
    letter-spacing: .12em;
    padding-left: 24px;
    margin-top: -5px
}

.store-search {
    font-size: 7px;
    color: #888;
    background: #f2f3ee;
    padding: 6px 10px;
    width: 42%
}

.store-cart {
    position: relative
}

.store-cart i {
    position: absolute;
    top: -6px;
    right: -7px;
    background: #d87654;
    color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    font: 6px var(--sans);
    display: grid;
    place-items: center
}

.store-banner {
    position: relative;
    overflow: hidden;
    height: 170px;
    background: linear-gradient(100deg, #d9e2c9 0, #edf0e5 66%, #d2dfc6);
    padding: 21px 20px
}

.store-banner>small {
    display: block;
    font: 6px var(--mono);
    letter-spacing: .13em;
    color: #5d7058;
    margin-bottom: 7px
}

.store-banner strong {
    display: block;
    font: 700 24px/.98 var(--sans);
    letter-spacing: -.07em;
    color: #223d2b
}

.store-banner em {
    font-style: normal;
    color: #759451
}

.store-banner>span {
    display: block;
    font-size: 7px;
    color: #60705e;
    margin: 5px 0 10px
}

.store-banner>b {
    font: 6px var(--mono);
    padding: 6px 8px;
    color: white;
    background: #355d3b;
    border-radius: 2px
}

.produce {
    position: absolute;
    filter: drop-shadow(0 9px 6px #18331a3b)
}

.produce-one {
    font-size: 65px;
    right: 21%;
    top: 32px;
    transform: rotate(-18deg)
}

.produce-two {
    font-size: 55px;
    right: 3%;
    top: 72px
}

.produce-three {
    font-size: 54px;
    right: 38%;
    top: 84px;
    transform: rotate(12deg)
}

.store-categories {
    display: flex;
    justify-content: space-around;
    padding: 15px 5px;
    background: white;
    font-size: 7px;
    color: #566253
}

.art-label {
    position: absolute;
    bottom: 18px;
    left: 23px;
    right: 23px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aeb9cf;
    font-size: 8px
}

.art-label span:last-child {
    margin-left: auto
}

.project-info {
    padding: 35px 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.project-meta span {
    border: 1px solid #7485b242;
    padding: 5px 7px;
    color: #a5b1cb;
    font-size: 8px
}

.project-info h3 {
    font-size: 42px;
    line-height: .99;
    letter-spacing: -.07em;
    margin: 24px 0 13px
}

.project-info h3 span {
    color: #9cb1ff
}

.project-info h3 sup {
    font-size: 16px;
    color: #8aa1ff;
    vertical-align: top;
    margin-left: 8px
}

.project-info>p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.85;
    margin: 0 0 18px
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px
}

.project-tech span {
    padding: 5px 8px;
    border-radius: 2px;
    background: #ffffff08;
    color: #bdc5d5;
    font: 9px var(--mono)
}

.project-features {
    border-block: 1px solid var(--line);
    padding: 13px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
    font-size: 8px;
    color: #909caf
}

.project-features span:before {
    content: "+";
    color: #8ea7ff;
    margin-right: 5px
}

.project-link {
    margin-top: 19px;
    min-height: 42px
}

.project-link-note {
    font-size: 9px !important;
    margin: 8px 0 0 !important;
    color: #737e91 !important
}

.case-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 24px 0 42px;
    border: 1px solid var(--line);
    border-radius: 4px
}

.case-step {
    padding: 19px 22px;
    min-height: 118px
}

.case-step+.case-step {
    border-left: 1px solid var(--line)
}

.case-step>span {
    color: #8298db;
    font-size: 9px
}

.case-step p {
    font-size: 12px;
    color: #c5cad5;
    line-height: 1.7;
    margin: 9px 0 0
}

.coming-soon {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: #ffffff03
}

.coming-icon {
    width: 34px;
    height: 34px;
    border: 1px solid #7387c34d;
    display: grid;
    place-items: center;
    color: #9eb1ff;
    font-size: 20px
}

.coming-soon strong {
    font-size: 12px
}

.coming-soon p {
    font-size: 10px;
    color: var(--muted);
    margin: 2px 0 0
}

.coming-soon .text-link {
    margin-left: auto;
    white-space: nowrap
}

.solution-section {
    padding: 120px 0;
    background: radial-gradient(ellipse at 70% 50%, #27325b2b, transparent 50%), #0a0d14;
    border-bottom: 1px solid var(--line)
}

.solution-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center
}

.solution-copy h2 {
    font-size: clamp(38px, 4.6vw, 57px)
}

.solution-copy>p:not(.eyebrow) {
    color: var(--muted);
    font-size: 13px;
    max-width: 390px;
    line-height: 1.9;
    margin: 19px 0 22px
}

.flow-visual {
    position: relative;
    padding-left: 42px
}

.flow-line {
    position: absolute;
    left: 11px;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: #27334a
}

.flow-line i {
    display: block;
    width: 100%;
    height: 0;
    background: linear-gradient(var(--blue), var(--cyan));
    box-shadow: 0 0 12px #728eff;
    transition: height .2s
}

.flow-step {
    height: 61px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ffffff0a;
    color: #7a8497;
    transition: color .35s
}

.flow-step span {
    font: 9px var(--mono);
    width: 46px;
    color: #5f6c82
}

.flow-step b {
    font: 11px var(--mono);
    letter-spacing: .08em;
    font-weight: 400
}

.flow-step>i {
    margin-left: auto;
    font-style: normal;
    font-size: 16px;
    color: #52617d;
    transition: color .3s, transform .3s
}

.flow-step.is-active {
    color: #e4eaff
}

.flow-step.is-active span,
.flow-step.is-active>i {
    color: #9db0ff
}

.flow-step.is-active>i {
    transform: scale(1.1)
}

.stack-section {
    background: #090b11
}

.stack-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: start
}

.stack-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px
}

.stack-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: linear-gradient(120deg, #121722, #0d1017);
    border-radius: 3px;
    font-size: 11px;
    color: #ced3df;
    transition: transform .25s, border-color .25s, background .25s
}

.stack-item:hover {
    transform: translateY(-3px);
    border-color: #8097dd77;
    background: #151c2a
}

.stack-item i {
    font: 11px var(--mono);
    font-style: normal;
    color: #99adff
}

.benefits-section {
    border-block: 1px solid var(--line);
    background: linear-gradient(140deg, #0b0e15, #0e1119)
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.benefit {
    padding: 22px 19px 23px;
    min-height: 185px;
    transition: background .25s
}

.benefit+.benefit {
    border-left: 1px solid var(--line)
}

.benefit:hover {
    background: #ffffff04
}

.benefit-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #9fb2ff;
    border: 1px solid #7f93d044;
    border-radius: 3px;
    font-size: 14px
}

.benefit h3 {
    font-size: 13px;
    line-height: 1.45;
    margin: 16px 0 8px;
    letter-spacing: -.02em
}

.benefit p {
    font-size: 10px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0
}

.process-section {
    background: #090b11
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 5px auto 0;
    padding: 8px 0
}

.timeline-progress {
    position: absolute;
    left: 39px;
    top: 25px;
    bottom: 28px;
    width: 1px;
    background: #29344b
}

.timeline-progress i {
    display: block;
    width: 2px;
    height: 0;
    margin-left: -.5px;
    background: linear-gradient(var(--blue), var(--cyan));
    box-shadow: 0 0 12px #738dff;
    transition: height .16s
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 26px;
    padding: 16px 0 29px;
    opacity: .52;
    transition: opacity .5s
}

.timeline-item.is-visible {
    opacity: 1
}

.timeline-number {
    z-index: 1;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: #111725;
    border: 1px solid #596da7;
    border-radius: 50%;
    font: 9px var(--mono);
    color: #b5c4ff;
    margin: 3px 0 0 27px;
    box-shadow: 0 0 0 5px #090b11
}

.timeline-kicker {
    font-size: 8px;
    color: #8c9ddd
}

.timeline-item h3 {
    font-size: 17px;
    margin: 4px 0 4px;
    letter-spacing: -.03em
}

.timeline-item p {
    font-size: 11px;
    color: var(--muted);
    margin: 0
}

.about-section {
    padding: 115px 0;
    background: linear-gradient(180deg, #0c0f17, #0a0d13);
    border-block: 1px solid var(--line)
}

.about-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 90px
}

.about-visual {
    height: 440px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-photo {
    width: 275px;
    height: 360px;
    padding: 1px;
    background: linear-gradient(135deg, #8095e8, #5868bb55, #a06ccc);
    clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
    box-shadow: 0 25px 65px #0007
}

.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    clip-path: inherit;
    filter: saturate(.82)
}

.about-stamp {
    position: absolute;
    right: 0;
    bottom: 48px;
    width: 122px;
    height: 122px;
    border: 1px solid #91a4ed68;
    border-radius: 50%;
    background: #101521;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(12deg);
    box-shadow: 0 15px 40px #0005
}

.about-stamp span {
    font: 8px var(--mono);
    color: #8fa4ef;
    letter-spacing: .13em
}

.about-stamp b {
    text-align: center;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: -.05em;
    margin: 4px
}

.about-stamp i {
    font-size: 13px;
    color: #a78cf5;
    font-style: normal
}

.about-code {
    position: absolute;
    left: 0;
    top: 42px;
    color: #70809c
}

.about-copy h2 {
    font-size: clamp(36px, 4.3vw, 52px);
    margin-bottom: 22px
}

.about-copy>p:not(.eyebrow) {
    color: #aeb5c3;
    font-size: 12px;
    line-height: 1.9;
    margin: 0 0 12px
}

.about-copy .about-last {
    color: #d4d9e4 !important
}

.about-copy .text-link {
    margin-top: 8px
}

.idea-section {
    padding: 100px 0;
    background: #080a10
}

.idea-panel {
    position: relative;
    overflow: hidden;
    padding: 67px 76px;
    border: 1px solid #7287cc48;
    border-radius: 5px;
    background: radial-gradient(ellipse at 93% 13%, #566ed124, transparent 39%), linear-gradient(120deg, #121722, #0e121b);
    box-shadow: 0 26px 80px #0004
}

.idea-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#9eaff00b 1px, transparent 1px), linear-gradient(90deg, #9eaff00b 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, black)
}

.idea-panel>*:not(.idea-decoration) {
    position: relative;
    z-index: 1
}

.idea-decoration {
    position: absolute;
    right: 53px;
    top: -120px;
    font-size: 390px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.1em;
    color: #899dff09
}

.idea-panel .eyebrow {
    margin-bottom: 18px
}

.idea-panel h2 {
    font-size: clamp(35px, 4.4vw, 54px);
    line-height: 1.16;
    letter-spacing: -.065em;
    margin: 0 0 19px
}

.idea-panel h2 span {
    color: #9cafef
}

.idea-content {
    display: flex;
    gap: 40px;
    max-width: 750px;
    margin-bottom: 25px
}

.idea-content p {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    margin: 0
}

.idea-content strong {
    color: #e0e6f6;
    font-weight: 600
}

.idea-footnote {
    display: block;
    margin-top: 17px;
    font-size: 8px;
    color: #78849a
}

.contact-section {
    padding: 104px 0 120px;
    background: radial-gradient(ellipse at 12% 75%, #35447a21, transparent 40%), #0b0e15;
    border-top: 1px solid var(--line)
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 75px
}

.contact-copy h2 {
    font-size: clamp(44px, 5vw, 64px)
}

.contact-copy>p:not(.eyebrow) {
    color: var(--muted);
    max-width: 460px;
    font-size: 13px;
    line-height: 1.9;
    margin: 18px 0 25px
}

.contact-actions {
    display: flex;
    gap: 11px;
    flex-wrap: wrap
}

.contact-card {
    padding: 22px 24px;
    border: 1px solid var(--line-bright);
    border-radius: 5px;
    background: linear-gradient(145deg, #121722, #0d1017);
    box-shadow: 0 22px 60px #0003
}

.contact-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    color: #8c98ae;
    font-size: 9px
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #ffffff0a;
    transition: transform .2s
}

.contact-row:hover {
    transform: translateX(4px)
}

.contact-row-icon {
    width: 33px;
    height: 33px;
    border: 1px solid #8295d348;
    border-radius: 3px;
    display: grid;
    place-items: center;
    color: #a5b7ff;
    font: 12px var(--mono)
}

.contact-row>span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.contact-row small {
    font-size: 8px;
    color: #77849a
}

.contact-row b {
    font: 11px var(--mono);
    color: #d1d8e7;
    font-weight: 400
}

.contact-row>i {
    margin-left: auto;
    color: #8ca3ff;
    font-size: 16px;
    font-style: normal
}

.contact-availability {
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #afbac9;
    font-size: 8px
}

.contact-availability span:last-child {
    margin-left: auto;
    color: #717c90
}

.site-footer {
    padding: 31px 0 18px;
    border-top: 1px solid var(--line);
    background: #080a10
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px
}

.footer-main p {
    font-size: 10px;
    color: #7c8596;
    margin: 4px 0 0
}

.footer-main p i {
    color: #8399ec;
    font-style: normal
}

.footer-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap
}

.footer-links a {
    font-size: 10px;
    color: #a9b1c0;
    transition: color .2s
}

.footer-links a:hover {
    color: #c9d5ff
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 15px;
    font-size: 8px;
    color: #697386
}

.footer-bottom a {
    color: #9ca8be
}

.footer-bottom i {
    color: #8ea4ff;
    font-style: normal
}

.floating-whatsapp {
    position: fixed;
    z-index: 80;
    right: 25px;
    bottom: 24px;
    height: 52px;
    min-width: 52px;
    padding: 0 15px;
    border-radius: 30px;
    background: linear-gradient(130deg, #73dfb5, #53c99b);
    color: #06251a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 8px 30px #42c28b45;
    animation: soft-pulse 3.8s ease-in-out infinite;
    transition: transform .25s
}

.floating-whatsapp:hover {
    transform: translateY(-3px);
    animation: none
}

.wa-icon {
    font-size: 20px
}

.wa-label {
    font-size: 11px;
    font-weight: 800
}

.pointer-dot,
.pointer-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0
}

.pointer-dot {
    width: 5px;
    height: 5px;
    background: #b9c7ff
}

.pointer-ring {
    width: 28px;
    height: 28px;
    border: 1px solid #92a9ff88;
    transition: width .2s, height .2s, background .2s, opacity .2s
}

.pointer-ring.is-hover {
    width: 42px;
    height: 42px;
    background: #91a9ff13;
    border-color: #a9baff
}

@media(min-width:1500px) {
    :root {
        --container: 1260px
    }

    .hero h1 {
        font-size: 84px
    }

    .hero-visual {
        height: 550px
    }

    .portrait-frame {
        width: 370px;
        height: 455px
    }
}

.project-screenshot{position:relative;z-index:1;display:block;width:min(92%,650px);height:auto;max-height:calc(100% - 72px);aspect-ratio:16/9;object-fit:cover;object-position:top;border:1px solid #ffffff35;border-radius:5px;box-shadow:0 22px 55px #0009;transform:perspective(1100px) rotateY(4deg) rotateX(1.5deg);transition:transform .45s var(--ease),box-shadow .45s}.project-art:hover .project-screenshot{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-3px);box-shadow:0 28px 65px #000a}.project-art .art-label{z-index:2}
@media(max-width:760px){.project-screenshot{width:92%;max-height:calc(100% - 62px);transform:none}.project-art:hover .project-screenshot{transform:translateY(-2px)}}

@media(max-width:1050px) {
    .container {
        width: min(var(--container), calc(100% - 48px))
    }

    .nav-menu {
        gap: 19px
    }

    .hero-layout {
        gap: 10px
    }

    .hero-visual {
        height: 440px
    }

    .portrait-frame {
        height: 380px;
        width: min(305px, 84%)
    }

    .floating-code {
        left: -1%;
        bottom: 30px;
        transform: scale(.9);
        transform-origin: left bottom
    }

    .floating-chip {
        right: -1%;
        top: 66px
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .service-card {
        min-height: 315px
    }

    .benefit-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .benefit:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .benefit:nth-child(5) {
        border-top: 1px solid var(--line)
    }

    .solution-layout {
        gap: 45px
    }

    .about-layout {
        gap: 48px
    }
}

@media(max-width:760px) {
    html {
        scroll-padding-top: 70px
    }

    .container {
        width: calc(100% - 40px)
    }

    .nav-wrap {
        height: 68px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 2
    }

    .menu-toggle span {
        width: 22px;
        height: 1px;
        background: #e4e8f0;
        transition: transform .25s
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(3.5px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-3.5px) rotate(-45deg)
    }

    .nav-menu {
        position: absolute;
        inset: 67px 0 auto;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 10px 20px 21px;
        background: rgba(9, 12, 19, .97);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s, transform .25s, visibility .25s
    }

    .nav-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .nav-menu>a:not(.button) {
        padding: 12px 3px;
        border-bottom: 1px solid #ffffff0a;
        font-size: 13px
    }

    .nav-menu>a:not(.button):after {
        display: none
    }

    .nav-cta {
        margin-top: 14px;
        align-self: flex-start
    }

    .nav-mobile-social {
        display: block !important
    }

    .hero {
        min-height: auto;
        padding-top: 50px
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 15px;
        padding-top: 102px;
        padding-bottom: 98px
    }

    .hero-copy {
        max-width: 570px
    }

    .hero h1 {
        font-size: clamp(52px, 12vw, 76px)
    }

    .hero-lead {
        font-size: 17px;
        margin-top: 20px
    }

    .hero-description {
        font-size: 13px
    }

    .hero-tags {
        gap: 6px;
        margin: 19px 0 23px
    }

    .hero-tags span {
        font-size: 8px;
        padding: 5px 7px
    }

    .scroll-cue {
        margin-top: 28px
    }

    .hero-visual {
        height: 420px;
        grid-row: 2;
        margin: 0 auto;
        width: min(100%, 470px)
    }

    .portrait-frame {
        height: 360px;
        width: 275px
    }

    .portrait-aura {
        width: 300px;
        height: 330px
    }

    .floating-chip {
        right: 0;
        top: 53px
    }

    .floating-code {
        left: 0;
        bottom: 20px
    }

    .visual-index {
        right: 4%;
        bottom: 11px
    }

    .orbit-a {
        width: 370px;
        height: 290px
    }

    .orbit-b {
        height: 410px;
        width: 330px
    }

    .hero-bottom {
        bottom: 17px;
        font-size: 7px;
        gap: 10px
    }

    .hero-bottom-line {
        width: 27px
    }

    .section {
        padding: 83px 0
    }

    .section-heading {
        margin-bottom: 33px
    }

    .section-heading h2,
    .solution-copy h2,
    .about-copy h2,
    .contact-copy h2 {
        font-size: clamp(36px, 9vw, 49px)
    }

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .section-heading-row .section-subtitle {
        margin: 0
    }

    .service-grid {
        gap: 10px
    }

    .service-card {
        min-height: 305px;
        padding: 17px 15px
    }

    .service-visual {
        margin: 18px 0 15px
    }

    .service-card h3 {
        font-size: 15px
    }

    .service-card p {
        font-size: 10px;
        min-height: 68px
    }

    .project-case {
        grid-template-columns: 1fr
    }

    .project-art {
        min-height: 320px
    }

    .project-info {
        padding: 27px 23px 25px
    }

    .project-info h3 {
        font-size: 38px;
        margin: 18px 0 11px
    }

    .store-window {
        width: 78%
    }

    .store-banner {
        height: 150px
    }

    .store-categories {
        padding: 12px 2px;
        font-size: 6px
    }

    .case-breakdown {
        grid-template-columns: 1fr;
        margin-bottom: 27px
    }

    .case-step {
        min-height: 0;
        padding: 14px 16px
    }

    .case-step+.case-step {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .case-step p {
        font-size: 11px
    }

    .coming-soon {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .coming-soon>div {
        flex: 1
    }

    .coming-soon .text-link {
        margin-left: 50px
    }

    .solution-section {
        padding: 83px 0
    }

    .solution-layout {
        grid-template-columns: 1fr;
        gap: 43px
    }

    .flow-visual {
        padding-left: 33px
    }

    .flow-step {
        height: 55px
    }

    .stack-layout {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .stack-cloud {
        gap: 8px
    }

    .stack-item {
        padding: 9px 11px;
        font-size: 10px
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .benefit {
        min-height: 166px;
        padding: 17px 14px
    }

    .benefit:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .benefit:nth-child(4) {
        border-left: 1px solid var(--line)
    }

    .benefit:nth-child(5) {
        grid-column: span 2;
        border-left: 0
    }

    .timeline {
        margin-left: 0
    }

    .timeline-progress {
        left: 29px
    }

    .timeline-item {
        grid-template-columns: 59px 1fr;
        gap: 15px;
        padding-bottom: 25px
    }

    .timeline-number {
        margin-left: 17px
    }

    .timeline-item h3 {
        font-size: 15px
    }

    .timeline-item p {
        font-size: 10px
    }

    .about-section {
        padding: 83px 0
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .about-visual {
        height: 335px;
        max-width: 440px;
        width: 100%;
        margin: auto
    }

    .about-photo {
        width: 230px;
        height: 300px
    }

    .about-stamp {
        width: 100px;
        height: 100px;
        right: 8%;
        bottom: 27px
    }

    .about-stamp b {
        font-size: 12px
    }

    .about-code {
        top: 10px
    }

    .about-copy>p:not(.eyebrow) {
        font-size: 11px
    }

    .idea-section {
        padding: 65px 0
    }

    .idea-panel {
        padding: 36px 25px
    }

    .idea-panel h2 {
        font-size: clamp(31px, 8vw, 43px)
    }

    .idea-panel .eyebrow {
        font-size: 8px
    }

    .idea-content {
        display: block;
        margin-bottom: 21px
    }

    .idea-content p+p {
        margin-top: 9px
    }

    .idea-decoration {
        font-size: 240px;
        right: -15px;
        top: -60px
    }

    .contact-section {
        padding: 78px 0 86px
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 37px
    }

    .contact-copy>p:not(.eyebrow) {
        font-size: 12px
    }

    .contact-card {
        padding: 19px
    }

    .footer-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 19px
    }

    .footer-links {
        gap: 12px 18px
    }

    .footer-bottom {
        gap: 10px;
        flex-wrap: wrap;
        font-size: 7px
    }

    .footer-bottom span:last-child {
        display: none
    }

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 52px;
        padding: 0
    }

    .wa-label {
        display: none
    }

    .pointer-dot,
    .pointer-ring {
        display: none
    }
}

@media(max-width:390px) {
    .container {
        width: calc(100% - 32px)
    }

    .hero h1 {
        font-size: 49px
    }

    .hero-name {
        font-size: 9px
    }

    .hero-actions .button {
        padding: 0 14px;
        font-size: 10px
    }

    .hero-visual {
        height: 385px
    }

    .portrait-frame {
        width: 245px;
        height: 330px
    }

    .floating-code {
        transform: scale(.78);
        left: 0;
        bottom: 16px
    }

    .floating-chip {
        font-size: 7px;
        padding: 8px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-card {
        min-height: 280px
    }

    .service-card p {
        min-height: 0
    }

    .service-visual {
        height: 68px
    }

    .benefit-grid {
        grid-template-columns: 1fr
    }

    .benefit,
    .benefit:nth-child(4),
    .benefit:nth-child(5) {
        grid-column: auto;
        border-left: 0;
        border-top: 1px solid var(--line);
        min-height: 0;
        padding: 17px
    }

    .benefit:first-child {
        border-top: 0
    }

    .project-art {
        min-height: 280px
    }

    .store-window {
        width: 88%
    }

    .contact-actions .button {
        font-size: 10px;
        padding: 0 13px
    }

    .contact-row b {
        font-size: 10px
    }
}

@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,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none
    }
}