/* ABT studio — graphite, brushed silver and restrained cyan. */
:root {
    --bg: #0a0d12;
    --bg2: #10151d;
    --surface: #141b25;
    --white: #edf1f5;
    --white-dim: #a4afbd;
    --white-faint: #738092;
    --border: rgba(189, 208, 230, .12);
    --cyan-dim: rgba(95, 227, 227, .09);
    --cyan-glow: rgba(95, 227, 227, .15);
}

body { cursor: auto; }
::selection { color: #0a0d12; background: var(--cyan); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
section[id] { scroll-margin-top: 100px; }
nav { padding: 27px 6vw; }
nav.scrolled { padding: 18px 6vw; background: rgba(10, 13, 18, .88); }
.logo-text { font-size: 13px; letter-spacing: .16em; }
.logo-text span { color: #c2d8e3; }
nav ul { gap: 27px; }
nav ul a { font-size: 10px; letter-spacing: .12em; color: #b1bac5; }
.nav-contact { color: var(--white) !important; border-color: rgba(203, 226, 235, .28); border-radius: 30px; padding: 11px 20px; }
.nav-lang { border: 0; }

.hero {
    min-height: 810px;
    min-height: min(900px, max(810px, 100svh));
    padding: 160px 6vw 0;
    justify-content: center;
    background: radial-gradient(ellipse at 80% 38%, rgba(105, 125, 180, .08), transparent 52%);
}
.hero-grid { background-size: 96px 96px; opacity: .3; mask-image: linear-gradient(90deg, transparent 30%, #000); }
.hero-glow-1, .hero-glow-2 { display: none; }
.hero-content { width: 53%; padding: 0 0 120px; }
.hero-tag { font-size: 10px; color: var(--cyan); letter-spacing: .12em; margin-bottom: 30px; }
.hero-tag::before { width: 18px; }
.hero-headline { font-size: clamp(64px, 7.65vw, 114px); line-height: .96; letter-spacing: -.035em; max-width: none; margin-bottom: 30px; }
.hero-headline .outline-text { -webkit-text-stroke: 0; color: var(--white); }
.hero-headline .line-italic { color: var(--cyan); }
.hero-bottom { flex-direction: column; align-items: flex-start; gap: 26px; }
.hero-desc { max-width: 410px; font-size: 14px; line-height: 1.85; }
.hero-cta-group { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
.btn-cta {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--bg);
    padding: 17px 24px;
    gap: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .06em;
}
.btn-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--cyan);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background .25s;
}
.btn-cta::after {
    content: '';
    order: -1;
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    background: currentColor;
    opacity: .7;
}
.btn-cta:hover { background: transparent; box-shadow: none; }
.btn-cta:hover::before { background: var(--white); }
.btn-cta:active { transform: translateY(1px); }
.hero-work-link { color: var(--white); font-size: 12px; text-decoration: none; display: inline-flex; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(202, 223, 236, .3); }
.hero-work-link span { color: var(--cyan); }
.hero-art { position: absolute; right: 2vw; top: 145px; width: 49%; pointer-events: none; }
.hero-art img { display: block; width: 100%; height: auto; }
.hero-art-label, .hero-art-caption { font: 9px 'JetBrains Mono', monospace; letter-spacing: .13em; color: #8496ab; }
.hero-art-label { position: absolute; left: 22%; top: 1%; display: flex; align-items: center; gap: 9px; }
.status-light { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px #5fe3e355; }
.hero-art-caption { display: flex; justify-content: space-between; margin: -15px 12% 0; font-size: 8px; }
.hero-signature { position: absolute; bottom: 0; left: 6vw; right: 6vw; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); font: 9px 'JetBrains Mono', monospace; letter-spacing: .1em; color: #8392a5; }

.work-section, .services-section, .process-section, .blog-preview-section { padding: 112px 6vw; }
.work-section { background: linear-gradient(180deg, #10151c 0%, #0b0f15 100%); border-bottom: 1px solid var(--border); }
.work-header { margin-bottom: 44px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px 64px; align-items: end; }
.work-eyebrow { grid-column: 1 / -1; }
.work-heading, .services-title, .process-title, .blog-preview-heading { font-size: clamp(42px, 4.8vw, 68px); letter-spacing: -.025em; line-height: 1.05; }
.work-heading { margin: 0; }
.work-lead { max-width: 390px; margin: 0 0 4px auto; font-size: 14px; line-height: 1.8; }
.work-featured { grid-template-columns: 1.35fr 1fr; gap: 48px; border: 1px solid rgba(192, 214, 236, .16); padding: 0; border-radius: 20px; overflow: hidden; box-shadow: none; background: #131a24; }
.work-featured-media { min-height: 500px; height: 100%; padding: 86px 30px 90px; display: flex; align-items: center; background: radial-gradient(ellipse at 30% 25%, #53687d55, transparent 70%), linear-gradient(145deg, #273745, #151e2b); overflow: hidden; }
.work-featured-media::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#c4dce00a 1px, transparent 1px), linear-gradient(90deg, #c4dce00a 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.work-featured-screen { position: relative; width: 95%; transform: perspective(1000px) rotateY(8deg) rotateX(3deg); border: 5px solid #374555; border-radius: 12px; box-shadow: 0 35px 65px #0007; }
.work-featured-phone { right: 22px; bottom: 50px; width: 20%; border-color: #465363; z-index: 1; }
.work-featured-media:hover .work-featured-screen { transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-4px); }
.work-featured-body { padding: 40px 36px 40px 0; }
.work-kind { font-size: 9px; line-height: 1.6; letter-spacing: .06em; color: #b1bfce; margin-bottom: 16px; }
.work-kind::before { background: var(--cyan); }
.work-featured-title { font-size: clamp(36px, 4vw, 54px); }
.work-featured-desc { font-size: 13px; }
.work-featured .product-features { font-size: 12px; margin-bottom: 24px; }
.btn-outline { border-radius: 30px; border-color: #9dc5d14d; color: #d7ecee; font-size: 10px; }
.product-actions { gap: 16px; }
.product-link { font-size: 11px; }
.work-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border: 0; }
.work-rows li { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #111720; transition: border-color .25s; }
.work-rows li:hover { border-color: #9fc5d94d; }
.work-row { height: 100%; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.work-row:hover { background: transparent; }
.work-thumb { border: 0; border-radius: 0; aspect-ratio: 1.5; padding: 28px 24px 0; background: #e1e4df; overflow: hidden; }
.work-rows li:nth-child(2) .work-thumb { background: #243348; }
.work-rows li:nth-child(3) .work-thumb { background: #c8d9df; }
.work-thumb img { height: auto; min-height: 100%; border-radius: 6px 6px 0 0; object-fit: cover; box-shadow: 0 12px 24px #0003; }
.work-body { padding: 26px 26px 32px; }
.work-title { font-size: 32px; margin-bottom: 12px; }
.work-desc { font-size: 12.5px; line-height: 1.75; padding-right: 12px; }
.work-arrow { display: flex; position: absolute; bottom: 23px; right: 18px; width: 26px; height: 26px; border: 0; }

.services-header { margin-bottom: 40px; }
.services-subtitle { font-size: 14px; line-height: 1.8; max-width: 350px; }
.service-row { grid-template-columns: 38px minmax(0, 1fr) 160px 28px; gap: 26px; padding: 28px 0; }
.service-row-illustration { display: block; width: 160px; max-width: 100%; height: auto; }
.service-row-title { font-size: clamp(21px, 2.3vw, 30px); letter-spacing: -.02em; }
.service-row-desc { color: var(--white-dim); line-height: 1.8; max-width: 650px; }
.service-row-tags .tag { border-radius: 4px; border-color: #b6cce025; color: #a2b4c6; }
.service-row:hover .service-row-title { transform: none; }
.service-row:hover { background: linear-gradient(90deg, transparent, #5fe3e305, transparent); }

.about-section { padding: 100px 6vw; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #10151c; }
.about-visual { position: relative; }
.about-illustration { display: block; height: auto; }
.about-title { letter-spacing: -.025em; }
.about-stats { border-radius: 12px; overflow: hidden; }
.process-section { background: radial-gradient(ellipse at 50% 100%, #526f9310, transparent 70%); }
.process-grid { border: 0; background: transparent; gap: 20px; }
.process-step { position: relative; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, #1a253055, #0c1119); padding: 26px 24px 30px; gap: 16px; }
.process-step:hover { background: #141d28; }
.process-step-num { color: #94a8bd; font-size: 10px; }
.process-illustration { width: 154px; filter: saturate(.5) brightness(1.25); margin: 0 0 4px; }
.process-step-title { font-size: 17px; }
.process-step-desc { font-size: 12px; color: #a4afbd; }
.blog-preview-section { border-block: 1px solid var(--border); background: #10151c; }
.blog-preview-header { background: url("/images/illustrations/blog-notes.svg") right center / min(440px, 75%) auto no-repeat; }
.blog-preview-card { border-radius: 14px; background: #121a24; }
.contact-section {
    padding: 120px 6vw;
    background:
        url("/images/illustrations/contact-signal.svg") right center / min(660px, 100%) auto no-repeat,
        radial-gradient(ellipse at 50% 90%, #5fe3e310, transparent 65%);
}
.contact-title { letter-spacing: -.03em; }
.contact-bg-text { opacity: .025; }
.divider { margin-inline: 6vw; }
footer { padding-inline: 6vw; }

@media (min-width: 1600px) {
    .hero-art { width: 690px; right: calc((100vw - 1450px) / 2); top: 110px; }
    .hero-content { max-width: 670px; }
}
@media (max-width: 1100px) {
    nav ul { gap: 20px; }
    .hero { min-height: 790px; padding-top: 150px; }
    .hero-art { top: 180px; width: 47%; right: 0; }
    .hero-content { width: 57%; }
    .hero-headline { font-size: 8.3vw; }
    .work-featured { grid-template-columns: 1.1fr 1fr; gap: 28px; }
    .work-featured-media { padding-inline: 20px; }
    .work-featured-body { padding-right: 24px; }
    .work-featured .product-features { display: none; }
    .work-body { padding: 22px 20px 30px; }
    .work-kind { font-size: 8px; }
    .work-thumb { padding: 20px 16px 0; }
}
@media (max-width: 900px) {
    .hero { min-height: auto; padding: 140px 6vw 0; }
    .hero-content { width: 100%; padding-bottom: 28px; order: 0; }
    .hero-headline { font-size: clamp(62px, 10vw, 88px); max-width: 630px; }
    .hero-desc { max-width: 500px; }
    .hero-art { order: 1; position: relative; top: auto; right: auto; width: min(520px, 88%); align-self: center; margin: -15px 0 20px; }
    .hero-art-label { top: 4%; }
    .hero-signature { order: 2; position: relative; left: auto; right: auto; width: 100%; min-height: 75px; font-size: 8px; }
    .hero-signature span:nth-child(2) { display: none; }
    .work-featured { grid-template-columns: 1fr; gap: 0; }
    .work-featured-media { min-height: 380px; padding: 52px 42px 64px; }
    .work-featured-screen { width: 93%; }
    .work-featured-phone { width: 17%; right: 35px; bottom: 26px; }
    .work-featured-body { padding: 36px; }
    .work-featured .product-features { display: grid; }
    .work-featured-title { font-size: 44px; }
    .work-header { grid-template-columns: 1fr; gap: 16px; }
    .work-lead { margin: 0; max-width: 550px; }
    .work-rows { gap: 16px; }
    .work-title { font-size: 27px; }
    .work-desc { font-size: 12px; }
    .work-thumb { aspect-ratio: 1.2; padding: 20px 12px 0; }
    .work-body { padding: 20px 16px 32px; }
    .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-row { grid-template-columns: 28px minmax(0, 1fr) 120px 24px; gap: 18px; }
    .service-row-illustration { width: 120px; }
}
@media (max-width: 600px) {
    nav { padding: 20px 6vw; }
    .logo-text { font-size: 11px; }
    .hero { padding-top: 120px; }
    .hero-tag { font-size: 8px; gap: 8px; margin-bottom: 28px; }
    .hero-headline { font-size: clamp(54px, 13vw, 76px); line-height: .99; margin-bottom: 25px; }
    .hero-desc { font-size: 13px; line-height: 1.8; }
    .hero-bottom { gap: 22px; }
    .hero-cta-group { gap: 18px; }
    .btn-cta { padding: 14px 20px; font-size: 10px; }
    .hero-work-link { font-size: 11px; gap: 12px; }
    .hero-art { width: 100%; margin: -4px 0 18px; }
    .hero-art-label { left: 10%; font-size: 7px; top: 7%; }
    .hero-art-caption { font-size: 6px; margin-top: -12px; }
    .hero-signature { min-height: 65px; font-size: 6.5px; letter-spacing: .04em; gap: 10px; }
    .work-section, .services-section, .process-section, .blog-preview-section { padding: 72px 6vw; }
    .work-heading, .services-title, .process-title, .blog-preview-heading { font-size: 43px; }
    .work-header { margin-bottom: 30px; }
    .work-featured { border-radius: 14px; margin-bottom: 22px; }
    .work-featured-media { min-height: 260px; padding: 38px 16px 55px; }
    .work-featured-screen { width: 93%; border-width: 3px; border-radius: 7px; }
    .work-featured-phone { width: 20%; right: 12px; bottom: 20px; border-width: 3px; border-radius: 13px; }
    .work-featured-body { padding: 28px 24px; }
    .work-featured-title { font-size: 38px; }
    .work-featured .product-features { display: none; }
    .work-rows { grid-template-columns: 1fr; gap: 22px; }
    .work-thumb { aspect-ratio: 1.5; padding: 30px 24px 0; }
    .work-body { padding: 26px; }
    .work-kind { font-size: 9px; }
    .work-title { font-size: 32px; }
    .work-desc { font-size: 13px; }
    .work-arrow { bottom: 18px; right: 12px; }
    .services-header { flex-direction: column; align-items: flex-start; gap: 24px; }
    .services-hint { font-size: 9px; line-height: 1.6; }
    .service-row { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 10px; padding: 24px 0; }
    .service-row-content { grid-column: 2; }
    .service-row-illustration { grid-column: 2; grid-row: 1; width: 130px; margin-bottom: 12px; }
    .service-row-num { grid-column: 1; grid-row: 1; align-self: start; margin-top: 14px; }
    .service-row-arrow { grid-column: 3; grid-row: 1; }
    .service-row-title { font-size: 22px; }
    .service-row-desc { font-size: 12px; }
    .service-row-tags { flex-wrap: wrap; }
    .about-section { padding: 72px 6vw; }
    .process-grid { gap: 14px; }
    .process-step { padding: 22px 18px; }
    .process-step-title { font-size: 15px; line-height: 1.4; }
    .process-step-desc { font-size: 11px; }
    .process-illustration { width: 120px; }
    .contact-section { padding: 90px 6vw; }
}
@media (max-width: 360px) {
    .hero-cta-group { gap: 8px; }
    .hero-work-link { font-size: 10px; }
    .hero-signature { font-size: 6px; }
    .process-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    .reveal, .reveal-left, .hero-rise { opacity: 1 !important; transform: none !important; }
}