@font-face {
    font-family: Inter;
    src: url('../fonts/inter/Inter-Latin-Variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0b0d10;
    color: #f2f2f2;

    font-family:
        Inter,
        Arial,
        sans-serif;

    line-height: 1.6;
}

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

button {
    font: inherit;
}

.container {
    width: min(1120px, 90%);
    margin: 0 auto;
}


/* HEADER */

.header {
    position: sticky;
    top: 0;
    z-index: 100;

    background: rgba(11, 13, 16, 0.86);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid #1d2228;
}

.header-inner {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 24px;
    font-weight: 700;

    letter-spacing: -1px;
}

.nav {
    display: flex;
    gap: 28px;
}

.nav a {
    color: #9ea7b3;

    font-size: 14px;

    transition: color 0.2s ease;
}

.nav a:hover {
    color: #ffffff;
}


/* HERO */

.hero {
    min-height: 85vh;

    display: flex;
    align-items: center;

    padding: 120px 0;
}

.hero-content {
    max-width: 900px;
}

.eyebrow,
.section-label {
    margin-bottom: 20px;

    color: #7f8cff;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero h1 {
    margin-bottom: 32px;

    font-size: clamp(48px, 7vw, 88px);

    line-height: 1.03;

    letter-spacing: -3px;
}

.hero-text {
    max-width: 700px;

    margin-bottom: 36px;

    color: #a9b0ba;

    font-size: 21px;
}

.hero-actions {
    display: flex;
    gap: 14px;

    margin-bottom: 36px;
}

.hero-stack {
    color: #737c87;

    font-size: 14px;
}


/* BUTTONS */

.button {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    border-radius: 10px;

    font-weight: 600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.button-primary {
    background: #ffffff;
    color: #0b0d10;
}

.button-primary:hover {
    background: #d9d9d9;
}

.button-secondary {
    border: 1px solid #343a43;
}

.button-secondary:hover {
    border-color: #6b737e;
}


/* GENERAL SECTIONS */

.section {
    padding: 120px 0;

    border-top: 1px solid #1b2026;
}

.section h2 {
    margin-bottom: 50px;

    font-size: clamp(36px, 5vw, 58px);

    letter-spacing: -2px;
}


/* SERVICES */

.services-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}

.card {
    padding: 34px;

    background: #101318;

    border: 1px solid #20252c;
    border-radius: 16px;
}

.card h3 {
    margin-bottom: 12px;

    font-size: 22px;
}

.card p {
    color: #969faa;
}


/* HOME PROJECTS */

.projects {
    display: flex;
    flex-direction: column;
}

.project-card {
    padding: 42px 0;

    display: flex;
    justify-content: space-between;

    gap: 40px;

    border-top: 1px solid #242a31;
}

.project-card:last-child {
    border-bottom: 1px solid #242a31;
}

.project-number {
    margin-bottom: 10px;

    color: #67707c;
}

.project-card h3 {
    margin-bottom: 14px;

    font-size: 36px;
}

.project-card p {
    max-width: 650px;

    color: #9aa3ad;
}

.project-stack {
    margin-top: 20px;

    font-size: 14px;
}

.project-card a {
    align-self: center;

    white-space: nowrap;

    color: #c7ccff;
}


/* ABOUT */

.about {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;
}

.about-text {
    color: #9ba4af;

    font-size: 19px;
}

.about-text p + p {
    margin-top: 24px;
}


/* CONTACT */

.contact {
    padding: 150px 0;
}

.contact h2 {
    margin-bottom: 40px;

    font-size: clamp(56px, 8vw, 100px);

    letter-spacing: -4px;
}


/* PROJECTS PAGE */

.work-page {
    padding: 110px 0 140px;
}

.work-header {
    max-width: 720px;

    margin-bottom: 70px;
}

.work-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #777eea;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.work-header h1 {
    margin-bottom: 24px;

    font-size: clamp(64px, 8vw, 110px);

    line-height: 0.95;

    letter-spacing: -5px;
}

.work-header p {
    max-width: 600px;

    color: #89919c;

    font-size: 19px;
    line-height: 1.6;
}


/* PROJECT GRID */

.work-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* PROJECT CARD */

.work-card {
    min-height: 330px;

    padding: 30px;

    display: flex;
    flex-direction: column;

    background: #101318;

    border: 1px solid #20252c;
    border-radius: 18px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.work-card:hover {
    transform: translateY(-5px);

    background: #13171d;

    border-color: #3b424c;
}

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

    margin-bottom: 55px;
}

.work-type {
    color: #707985;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.work-arrow {
    color: #777eea;

    font-size: 20px;

    transition: transform 0.2s ease;
}

.work-card:hover .work-arrow {
    transform: translate(3px, -3px);
}

.work-card-content {
    flex: 1;
}

.work-card-content h2 {
    margin-bottom: 15px;

    font-size: 36px;

    letter-spacing: -1.5px;
}

.work-card-content p {
    max-width: 480px;

    color: #929aa5;

    font-size: 16px;
    line-height: 1.6;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 35px;
}

.work-tags span {
    padding: 6px 10px;

    color: #818a95;

    border: 1px solid #292f37;
    border-radius: 6px;

    font-size: 11px;
}


/* MOBILE */

@media (max-width: 800px) {

    .nav {
        display: none;
    }

    .hero {
        min-height: auto;

        padding: 90px 0;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .about {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .project-card {
        flex-direction: column;
    }

    .project-card a {
        align-self: flex-start;
    }

    .work-page {
        padding: 80px 0 100px;
    }

    .work-header {
        margin-bottom: 45px;
    }

    .work-header h1 {
        letter-spacing: -3px;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-card {
        min-height: 300px;
    }

    .contact {
        padding: 100px 0;
    }

    .contact h2 {
        letter-spacing: -3px;
    }
}

.project-detail {
    padding: 100px 0 140px;
}

.back-link {
    display: inline-block;

    margin-bottom: 60px;

    color: #7f8792;

    font-size: 14px;
}

.back-link:hover {
    color: white;
}

.project-detail-header {
    max-width: 900px;

    margin-bottom: 100px;
}

.project-detail-header h1 {
    margin-bottom: 28px;

    font-size: clamp(64px, 9vw, 120px);

    line-height: 0.95;

    letter-spacing: -5px;
}

.project-detail-intro {
    max-width: 760px;

    color: #9ba4af;

    font-size: 22px;
    line-height: 1.6;
}

.project-detail-header .work-tags {
    margin-top: 34px;
}

.project-content {
    max-width: 850px;
}

.project-block {
    padding: 70px 0;

    border-top: 1px solid #20252c;
}

.project-block:last-child {
    border-bottom: 1px solid #20252c;
}

.project-block-label {
    display: block;

    margin-bottom: 20px;

    color: #737bea;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.project-block h2 {
    max-width: 700px;

    margin-bottom: 24px;

    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.1;

    letter-spacing: -2px;
}

.project-block p {
    max-width: 720px;

    color: #9ba4af;

    font-size: 18px;
    line-height: 1.75;
}

.project-list {
    list-style: none;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.project-list li {
    position: relative;

    padding-left: 24px;

    color: #a4acb6;

    font-size: 17px;
}

.project-list li::before {
    content: "→";

    position: absolute;
    left: 0;

    color: #737bea;
}

.stack-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.stack-list span {
    padding: 9px 14px;

    border: 1px solid #2a3038;
    border-radius: 8px;

    color: #929ba6;

    font-size: 13px;
}

@media (max-width: 800px) {

    .project-detail {
        padding: 70px 0 100px;
    }

    .project-detail-header {
        margin-bottom: 60px;
    }

    .project-detail-header h1 {
        letter-spacing: -3px;
    }

    .project-block {
        padding: 50px 0;
    }
}

.project-detail {
    padding: 100px 0 140px;
}

.back-link {
    display: inline-block;

    margin-bottom: 60px;

    color: #7f8792;

    font-size: 14px;
}

.back-link:hover {
    color: white;
}

.project-detail-header {
    max-width: 900px;

    margin-bottom: 100px;
}

.project-detail-header h1 {
    margin-bottom: 28px;

    font-size: clamp(64px, 9vw, 120px);

    line-height: 0.95;

    letter-spacing: -5px;
}

.project-detail-intro {
    max-width: 760px;

    color: #9ba4af;

    font-size: 22px;
    line-height: 1.6;
}

.project-detail-header .work-tags {
    margin-top: 34px;
}

.project-content {
    max-width: 850px;
}

.project-block {
    padding: 70px 0;

    border-top: 1px solid #20252c;
}

.project-block:last-child {
    border-bottom: 1px solid #20252c;
}

.project-block-label {
    display: block;

    margin-bottom: 20px;

    color: #737bea;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.project-block h2 {
    max-width: 700px;

    margin-bottom: 24px;

    font-size: clamp(32px, 5vw, 52px);

    line-height: 1.1;

    letter-spacing: -2px;
}

.project-block p {
    max-width: 720px;

    color: #9ba4af;

    font-size: 18px;
    line-height: 1.75;
}

.project-list {
    list-style: none;

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.project-list li {
    position: relative;

    padding-left: 24px;

    color: #a4acb6;

    font-size: 17px;
}

.project-list li::before {
    content: "→";

    position: absolute;
    left: 0;

    color: #737bea;
}

.stack-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.stack-list span {
    padding: 9px 14px;

    border: 1px solid #2a3038;
    border-radius: 8px;

    color: #929ba6;

    font-size: 13px;
}

@media (max-width: 800px) {

    .project-detail {
        padding: 70px 0 100px;
    }

    .project-detail-header {
        margin-bottom: 60px;
    }

    .project-detail-header h1 {
        letter-spacing: -3px;
    }

    .project-block {
        padding: 50px 0;
    }
}

.project-hero {
    margin-bottom: 100px;
}

.project-hero-window {
    overflow: hidden;

    background:
        radial-gradient(
            circle at top right,
            rgba(119, 126, 234, 0.16),
            transparent 35%
        ),
        #101318;

    border: 1px solid #20252c;
    border-radius: 22px;
}

.project-hero-bar {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 18px;

    border-bottom: 1px solid #20252c;
}

.project-hero-bar > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #3c444f;
}

.project-hero-address {
    margin-left: 14px;

    color: #6f7782;

    font-size: 12px;
    font-family: monospace;
}

.project-hero-content {
    min-height: 430px;

    display: grid;

    grid-template-columns: 1.3fr 0.7fr;

    gap: 60px;

    align-items: center;

    padding: 60px;
}

.project-hero-copy {
    max-width: 650px;
}

.project-hero-label {
    display: block;

    margin-bottom: 20px;

    color: #777eea;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.project-hero-copy h2 {
    margin-bottom: 22px;

    font-size: clamp(34px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -2px;
}

.project-hero-copy p {
    max-width: 600px;

    color: #99a2ad;

    font-size: 18px;
    line-height: 1.7;
}

.project-hero-panel {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.hero-stat {
    min-height: 110px;

    padding: 18px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid #272d35;
    border-radius: 12px;
}

.hero-stat span {
    color: #69727e;

    font-size: 11px;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-stat strong {
    font-size: 17px;

    font-weight: 500;
}

@media (max-width: 800px) {

    .project-hero {
        margin-bottom: 70px;
    }

    .project-hero-content {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 32px;
    }

    .project-hero-panel {
        grid-template-columns: 1fr 1fr;
    }
}

.architecture {
    max-width: 760px;

    margin-top: 45px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.architecture-node {
    width: 100%;

    padding: 22px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: #101318;

    border: 1px solid #272d35;
    border-radius: 14px;
}

.architecture-node-main {
    border-color: #4049a8;

    background:
        linear-gradient(
            135deg,
            rgba(119, 126, 234, 0.08),
            rgba(119, 126, 234, 0.02)
        ),
        #101318;
}

.architecture-node-wide {
    border-color: #303742;
}

.architecture-node-label {
    color: #747e8a;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.architecture-node strong {
    color: #f0f2f5;

    font-size: 18px;
    font-weight: 500;
}

.architecture-arrow {
    padding: 10px 0;

    color: #777eea;

    font-size: 22px;
    line-height: 1;
}

.architecture-split {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

@media (max-width: 800px) {

    .architecture-node {
        align-items: flex-start;

        flex-direction: column;
    }

    .architecture-split {
        grid-template-columns: 1fr;
    }
}

.project-screenshot {
    margin-bottom: 100px;

    padding: 14px;

    background: #101318;

    border: 1px solid #20252c;
    border-radius: 20px;
}

.project-screenshot img {
    width: 100%;
    display: block;

    border-radius: 12px;
}

.contribution-grid {
    margin-top: 40px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.contribution-card {
    padding: 26px;

    background: #101318;

    border: 1px solid #272d35;
    border-radius: 14px;
}

.contribution-card > span {
    display: block;

    margin-bottom: 30px;

    color: #737bea;

    font-size: 12px;
    font-family: monospace;
}

.contribution-card h3 {
    margin-bottom: 12px;

    font-size: 20px;
}

.contribution-card p {
    color: #89929d;

    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 800px) {

    .contribution-grid {
        grid-template-columns: 1fr;
    }

}
/* SELECTED GITHUB PROJECTS */

.github-work-header {
    max-width: 760px;
    margin-top: 120px;
    margin-bottom: 42px;
}

.github-work-header h2 {
    margin-bottom: 18px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.github-work-header p {
    max-width: 650px;
    color: #89919c;
    font-size: 17px;
    line-height: 1.7;
}

.github-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.github-project-card {
    min-height: 300px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: #0e1115;
    border: 1px solid #20252c;
    border-radius: 16px;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.github-project-card:hover {
    transform: translateY(-4px);
    border-color: #404854;
    background: #12161b;
}

.github-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 44px;
    color: #68717d;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.github-project-arrow {
    color: #7f8cff;
    font-size: 18px;
    transition: transform 0.2s ease;
}

.github-project-card:hover .github-project-arrow {
    transform: translate(3px, -3px);
}

.github-project-card h3 {
    margin-bottom: 14px;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -1px;
}

.github-project-card > p {
    flex: 1;
    color: #9099a4;
    font-size: 15px;
    line-height: 1.65;
}

.github-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 28px;
}

.github-project-tags span {
    padding: 5px 8px;
    color: #7d8691;
    border: 1px solid #282e36;
    border-radius: 6px;
    font-size: 10px;
}

.github-profile-link {
    margin-top: 28px;
}

.github-profile-link a,
.home-github-link {
    color: #c7ccff;
    font-size: 14px;
}

.github-profile-link a:hover,
.home-github-link:hover {
    color: #ffffff;
}

.home-github-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px;
}

.home-github-heading h2 {
    margin-bottom: 0;
}

.home-github-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-github-card {
    min-height: 260px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    background: #101318;
    border: 1px solid #20252c;
    border-radius: 16px;
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.home-github-card:hover {
    transform: translateY(-4px);
    border-color: #414955;
}

.home-github-card > span {
    margin-bottom: 34px;
    color: #777eea;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-github-card h3 {
    margin-bottom: 14px;
    font-size: 23px;
    line-height: 1.2;
}

.home-github-card p {
    color: #8f98a3;
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 800px) {
    .github-work-header {
        margin-top: 80px;
    }

    .github-projects-grid,
    .home-github-grid {
        grid-template-columns: 1fr;
    }

    .home-github-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.project-external-link {
    display: inline-flex;
    margin-top: 30px;
    color: #c7ccff;
    font-size: 14px;
}

.project-external-link:hover {
    color: #ffffff;
}

/* Shared navigation, page layouts and accessibility */
:root { color-scheme: dark; }
.accent, .logo span { color: #929aff; }
:focus-visible { outline: 2px solid #b1b8ff; outline-offset: 5px; }
[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; background: #fff; color: #101318; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.nav a[aria-current] { color: #fff; }
.menu-toggle { display: none; color: #eee; background: transparent; border: 1px solid #343a43; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.hero { background: radial-gradient(ellipse at 85% 20%, #777eea14, transparent 55%); }
.hero h1 { max-width: 1000px; text-wrap: balance; }
.hero-actions { flex-wrap: wrap; }
.text-link { display: inline-block; color: #c7ccff; margin-top: 28px; }
.text-link:hover { text-decoration: underline; }
.footer { border-top: 1px solid #252b33; padding: 30px 0; font-size: 13px; }
.footer-inner, .footer-inner > div { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.footer span { color: #929ba6; }
.about-story { margin-bottom: 70px; }
.about-story h2, .process h2 { font-size: clamp(30px,4vw,46px); line-height: 1.2; letter-spacing: -1.5px; }
.service-details .card h2 { font-size: 28px; margin: 20px 0 14px; line-height: 1.2; }
.service-details ul, .contact-brief ul { padding-left: 20px; color: #a9b0ba; margin-top: 22px; }
.service-details li, .contact-brief li { margin-bottom: 10px; }
.process { padding: 90px 0; }
.process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 40px; }
.process-grid article { border-top: 1px solid #343a43; padding-top: 24px; }
.process-grid span { color: #929aff; font-family: monospace; }
.process-grid h3 { margin: 18px 0 12px; font-size: 21px; }
.process-grid p, .contact-grid p, .case-cta p:not(.section-label) { color: #a9b0ba; }
.case-cta { margin-top: 80px; padding: 48px; border: 1px solid #343a43; border-radius: 18px; background: linear-gradient(120deg,#171a2c,#101318); }
.case-cta h2 { font-size: clamp(32px,5vw,54px); letter-spacing: -2px; line-height: 1.15; margin-bottom: 18px; }
.case-cta .button { margin-top: 28px; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; padding-bottom: 70px; }
.contact-panel { border-top: 1px solid #555d68; padding-top: 30px; }
.contact-address { display: inline-block; color: #c7ccff; font-size: clamp(22px,3vw,32px); overflow-wrap: anywhere; margin: 0 0 22px; }
.contact-brief p { margin-top: 24px; }
.work-card, .card, .architecture-node { min-width: 0; }
@media(max-width:800px) {
 .header-inner { position: relative; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
 .nav { display: flex; flex-wrap: wrap; width: 100%; gap: 20px; padding: 10px 0; }
 .js .menu-toggle:not([hidden]) { display: inline-flex; gap: 12px; align-items: center; }
 .js .nav { display: none; }
 .js .nav.is-open { display: flex; flex-direction: column; gap: 0; }
 .js .nav.is-open a { padding: 12px 0; }
 .hero { min-height: auto; padding: 85px 0; }
 .hero h1 { font-size: clamp(42px,9vw,66px); letter-spacing: -2px; }
 .hero-text { font-size: 19px; }
 .section { padding: 75px 0; }
 .contact { padding: 85px 0; }
 .contact h2 { letter-spacing: -2px; }
 .about { gap: 30px; }
 .process-grid, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
 .case-cta { padding: 28px; margin-top: 55px; }
 .work-header h1 { font-size: clamp(44px,10vw,72px); letter-spacing: -2px; overflow-wrap: anywhere; }
 .project-detail-header h1 { font-size: clamp(46px,12vw,80px); }
 .project-hero-content { padding: 26px; }
 .hero-stat { padding: 14px; }
 .architecture-node strong { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Real AION product screenshots; original images remain unmodified. */
.aion-showcase { display:grid; grid-template-columns: .85fr 1.15fr; align-items:center; gap:48px; padding:48px; margin-bottom:80px; background:radial-gradient(ellipse at top right,#6555ff29,transparent 70%),#101318; border:1px solid #303443; border-radius:24px; }
.aion-showcase h2,.aion-admin h2 { font-size:clamp(30px,3.4vw,46px); line-height:1.12; letter-spacing:-1.5px; margin-bottom:24px; }
.aion-showcase p,.aion-admin p { color:#a9b0ba; font-size:18px; line-height:1.7; margin-bottom:28px; }
.aion-mobile-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.aion-mobile-pair figure:nth-child(2) { margin-top:44px; }
.aion-mobile-pair img { display:block; width:100%; height:auto; border-radius:16px; border:1px solid #49405d; box-shadow:0 16px 40px #0005; }
.aion-showcase figcaption,.aion-admin figcaption { font-size:12px; color:#a9b0ba; margin-top:14px; }
.aion-admin { display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:start; margin-bottom:80px; }
.aion-admin > div { padding-top:32px; }
.aion-admin img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid #303443; }
.aion-featured { align-items:center; }
.aion-home-preview { display:flex; flex-direction:column; align-items:center; gap:20px; padding:24px 36px; background:linear-gradient(145deg,#24203e,#11151d); border:1px solid #303443; border-radius:20px; }
.aion-home-preview img { display:block; width:160px; height:auto; border-radius:12px; }
@media(max-width:1000px) { .aion-showcase {grid-template-columns:1fr;} .aion-mobile-pair {max-width:580px; width:100%; margin:0 auto;} }
@media(max-width:800px) { .aion-showcase {padding:24px; gap:30px; margin-bottom:55px;} .aion-admin {grid-template-columns:1fr; gap:16px; margin-bottom:55px;} .aion-featured {align-items:stretch;} .project-card .aion-home-preview {align-self:stretch;} }
@media(max-width:420px) { .aion-mobile-pair {gap:12px;} .aion-showcase {padding:18px;} .aion-mobile-pair figure:nth-child(2) {margin-top:24px;} }

.project-detail-header h1 { overflow-wrap: anywhere; font-size:clamp(44px,7vw,96px); letter-spacing:-.045em; }

/* CPF screenshots are original files, displayed at their natural aspect ratios. */
.cpf-showcase {padding:44px; margin-bottom:80px; border:1px solid #2a4038; border-radius:24px; background:radial-gradient(ellipse at top left,#19734a22,transparent 65%),#101614;}
.cpf-showcase-heading {max-width:740px; margin-bottom:36px;}
.cpf-showcase h2,.cpf-landing h2 {font-size:clamp(30px,3.4vw,46px); line-height:1.15; letter-spacing:-1.5px; margin-bottom:22px;}
.cpf-showcase-heading p,.cpf-landing p {color:#a9b0ba; font-size:18px; line-height:1.7;}
.cpf-screen-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:start;}
.cpf-screen-grid figure {min-width:0;}
.cpf-screen-grid img,.cpf-landing img {display:block; width:100%; height:auto;}
.cpf-screen-grid > figure > a {display:block; border-radius:12px; overflow:hidden; border:1px solid #405249;}
.cpf-screen-scroll {aspect-ratio:700 / 1002; overflow:auto; border:1px solid #405249; border-radius:12px;}
.cpf-screen-grid figcaption {margin-top:18px; font-size:14px; color:#a9b0ba; line-height:1.65;}
.cpf-screen-grid figcaption strong,.cpf-screen-grid figcaption span {display:block;}
.cpf-screen-grid figcaption strong {color:#f2f2f2; font-size:18px; margin-bottom:6px;}
.cpf-screen-grid figcaption a {display:inline-block; margin-top:10px; color:#c7ccff;}
.cpf-landing {display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; margin-bottom:80px;}
.cpf-landing > div:first-child {padding-top:32px;}
.cpf-landing-scroll {max-height:650px; overflow:auto; border:1px solid #405249; border-radius:14px;}
.cpf-landing .screenshot-hint {font-size:14px; margin-top:24px; color:#a9b0ba;}
.cpf-home-preview {display:flex; flex-direction:column; align-items:center; gap:20px; padding:24px; background:linear-gradient(145deg,#1c3328,#11151d); border:1px solid #304339; border-radius:20px;}
.cpf-home-preview img {display:block; width:230px; height:auto; border-radius:10px;}
@media(max-width:800px) {.cpf-showcase {padding:24px; margin-bottom:55px;} .cpf-screen-grid,.cpf-landing {grid-template-columns:1fr; gap:32px;} .cpf-landing {margin-bottom:55px;} .cpf-landing-scroll {max-height:560px;} .project-card .cpf-home-preview {align-self:stretch;} .cpf-home-preview img {width:min(100%,280px);} }
@media(max-width:420px) {.cpf-showcase {padding:18px;} .cpf-landing-scroll {max-height:460px;} }

/* CatIE: original product screenshots with English captions. */
.catie-showcase {padding:40px; margin-bottom:80px; border:1px solid #30423e; border-radius:24px; background:radial-gradient(ellipse at top right,#21735824,transparent 65%),#101614;}
.catie-overview {display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:center; margin-bottom:44px;}
.catie-showcase h2 {font-size:clamp(30px,3.4vw,46px); line-height:1.15; letter-spacing:-1.5px; margin-bottom:22px;}
.catie-overview p {color:#a9b0ba; font-size:18px; line-height:1.7;}
.catie-overview .catie-language-note {font-size:13px; margin-top:18px;}
.catie-screen-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;}
.catie-showcase figure {min-width:0;}
.catie-showcase figure > a {display:block; border:1px solid #405249; border-radius:12px; overflow:hidden;}
.catie-showcase img {display:block; width:100%; height:auto;}
.catie-showcase figcaption {font-size:14px; color:#a9b0ba; line-height:1.65; margin-top:16px;}
.catie-showcase figcaption strong,.catie-showcase figcaption span {display:block;}
.catie-showcase figcaption strong {font-size:18px; color:#f2f2f2; margin-bottom:6px;}
.catie-image-hint {font-size:13px; color:#a9b0ba; margin-top:28px;}
.catie-home-preview {display:flex; flex-direction:column; align-items:center; gap:20px; padding:22px; background:linear-gradient(145deg,#19372e,#11151d); border:1px solid #304339; border-radius:20px;}
.catie-home-preview img {display:block; width:300px; max-width:100%; height:auto; border-radius:8px;}
@media(max-width:900px) {.catie-overview {grid-template-columns:1fr;}}
@media(max-width:800px) {.catie-showcase {padding:24px; margin-bottom:55px;} .catie-screen-grid {grid-template-columns:1fr; gap:32px;} .project-card .catie-home-preview {align-self:stretch;} }
@media(max-width:420px) {.catie-showcase {padding:18px;}}

.contact-telegram { margin-top: 36px; padding-top: 28px; border-top: 1px solid #343a43; }

.truelevel-showcase {padding:36px; margin-bottom:80px; border:1px solid #413460; border-radius:24px; background:radial-gradient(ellipse at top right,#623aff25,transparent 65%),#14111c;}
.truelevel-heading {max-width:740px; margin-bottom:36px;}
.truelevel-heading h2 {font-size:clamp(30px,3.4vw,46px); line-height:1.15; letter-spacing:-1.5px; margin-bottom:22px;}
.truelevel-heading p {color:#a9b0ba; font-size:18px; line-height:1.7;}
.truelevel-screens {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.truelevel-screens figure {min-width:0;}
.truelevel-screens a {display:block; overflow:hidden; border-radius:12px; border:1px solid #4a3c64;}
.truelevel-screens img {display:block; width:100%; height:auto;}
.truelevel-screens figcaption {font-size:14px; line-height:1.65; color:#a9b0ba; margin-top:16px;}
.truelevel-screens strong,.truelevel-screens span {display:block;}
.truelevel-screens strong {color:#f2f2f2; font-size:18px; margin-bottom:6px;}
.truelevel-note {color:#a9b0ba; font-size:13px; margin-top:28px;}
@media(max-width:800px) {.truelevel-showcase {padding:24px; margin-bottom:55px;} .truelevel-screens {grid-template-columns:1fr; gap:32px; max-width:460px; margin:auto;}}
@media(max-width:420px) {.truelevel-showcase {padding:18px;}}

.reveal-item {transition:opacity .65s ease, transform .65s cubic-bezier(.2,.65,.3,1);}
.reveal-pending {opacity:0; transform:translateY(24px);}
.reveal-pending:focus-within {opacity:1; transform:none;}
.contact-final {padding:90px 0;}
.contact-final-panel {padding:clamp(28px,6vw,72px); border:1px solid #424969; border-radius:24px; background:radial-gradient(ellipse at top right,#777eea26,transparent 65%),#12151e;}
.contact-final h2 {font-size:clamp(42px,6vw,76px); letter-spacing:-.045em; line-height:1.08; margin-bottom:24px;}
.contact-final-copy {max-width:660px; font-size:19px; color:#a9b0ba; margin-bottom:32px;}
.contact-final-email {color:#c7ccff; overflow-wrap:anywhere;}
.contact-final .hero-actions {margin-bottom:24px;}
.engineering-links {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.engineering-links > a {padding:30px; border-top:1px solid #424969; background:#101318; border-radius:0 0 14px 14px;}
.engineering-links span {font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#aaaef5;}
.engineering-links h3 {font-size:25px; margin:16px 0; line-height:1.3;}
.engineering-links p {color:#a9b0ba;}
@media(max-width:800px) {.engineering-links {grid-template-columns:1fr;} .contact-final {padding:60px 0;}}
@media(prefers-reduced-motion:reduce) {.reveal-item,.reveal-pending {opacity:1; transform:none; transition:none;}}
@media print {.reveal-pending {opacity:1; transform:none;}}

.work-card-image {height:240px; overflow:hidden; padding:16px 24px 0; margin-bottom:26px; background:#1a2422; border-radius:12px;}
.work-card-image img {display:block; width:100%; height:auto; border-radius:7px 7px 0 0;}
.work-card-image-telegram-mini-app-crm,.work-card-image-truelevel {background:#211b36;}
.work-card-image-telegram-mini-app-crm img {width:170px; margin:auto;}
.work-card-image-truelevel img {width:270px; margin:auto; max-width:100%;}
.work-card-image-catie {display:flex; align-items:center; padding:16px;}
.work-card-image-catie img {border-radius:7px;}
@media(max-width:420px) {.work-card-image {height:190px; padding-left:12px; padding-right:12px;}}

/* Focused home: introduction, evidence, services, collaboration, contact. */
.home-focused .hero {min-height:auto; padding:90px 0 80px;}
.home-focused .hero-content {max-width:1120px;}
.home-focused .hero h1 {max-width:880px; font-size:clamp(44px,6vw,76px); line-height:1.06; letter-spacing:-.045em; margin-bottom:26px; text-wrap:initial;}
.home-focused .hero-text {max-width:700px; font-size:20px; line-height:1.65; margin-bottom:28px;}
.home-focused .hero-actions {margin-bottom:24px;}
.home-section {padding:76px 0; border-top:1px solid #252b33;}
.home-section-heading {margin-bottom:32px;}
.home-section .section-label {margin-bottom:14px;}
.home-section h2 {font-size:clamp(30px,3.4vw,44px); letter-spacing:-.035em; line-height:1.15;}
.home-cases {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.home-case {display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #303641; border-radius:16px; background:#101318;}
.home-case:hover {border-color:#737bea;}
.home-case-preview {height:220px; display:flex; align-items:center; justify-content:center; padding:18px; border-bottom:1px solid #303641; overflow:hidden;}
.home-case-preview img {display:block; max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 6px 24px #0003;}
.home-case-preview-telegram {background:linear-gradient(140deg,#28203f,#171b2b);}
.home-case-preview-catie {background:linear-gradient(140deg,#1b3b32,#14231f);}
.home-case-preview-cpf {background:linear-gradient(140deg,#35372a,#1d2821);}
.home-case-copy {display:flex; flex-direction:column; flex:1; padding:24px;}
.home-case-type {font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#a8aeec; margin-bottom:12px;}
.home-case h3 {font-size:25px; line-height:1.2; letter-spacing:-.6px; margin-bottom:14px;}
.home-case-copy > p:not(.home-case-type) {color:#a9b0ba; font-size:15px; line-height:1.65; margin-bottom:20px;}
.home-case-stack {display:block; font-size:12px; color:#a9b0ba; margin-top:auto;}
.home-case-link {display:flex; justify-content:space-between; gap:12px; border-top:1px solid #303641; padding-top:16px; margin-top:20px; font-size:14px; color:#d1d4ff;}
.home-all-work {margin-top:24px;}
.home-services {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;}
.home-service {border-top:1px solid #404652; padding-top:22px;}
.home-step-number {font-family:monospace; font-size:13px; color:#a8aeec;}
.home-service h3,.home-step h3 {font-size:20px; line-height:1.3; margin:14px 0 12px;}
.home-service p,.home-step p,.home-about-copy > p:not(.section-label) {font-size:16px; color:#a9b0ba; line-height:1.7;}
.home-collaboration {display:grid; grid-template-columns:1fr 1.15fr; gap:80px;}
.home-about-copy h2 {margin-bottom:24px;}
.home-about-copy > p:not(.section-label) {max-width:440px;}
.home-steps {list-style:none; padding:0; margin:0;}
.home-step {display:grid; grid-template-columns:28px 1fr; gap:18px; border-top:1px solid #303641; padding:22px 0;}
.home-step h3 {margin:0 0 8px;}
.home-step-number {padding-top:2px;}
.home-focused .contact-final {padding:64px 0 76px; border-top:1px solid #252b33;}
.home-focused .contact-final-panel {padding:48px;}
.home-focused .contact-final h2 {font-size:clamp(38px,5vw,60px);}
@media(max-width:1000px) {.home-services {grid-template-columns:repeat(2,minmax(0,1fr));} .home-collaboration {gap:40px;} .home-case-copy {padding:20px;} .home-case h3 {font-size:22px;}}
@media(max-width:800px) {.home-focused .hero {padding:65px 0;} .home-cases {grid-template-columns:1fr;} .home-case {display:grid; grid-template-columns:.8fr 1fr;} .home-case-preview {height:100%; min-height:240px; border-bottom:0; border-right:1px solid #303641;} .home-case-preview img {max-height:220px;} .home-section {padding:54px 0;} .home-collaboration {grid-template-columns:1fr; gap:32px;} .home-focused .contact-final-panel {padding:28px;}}
@media(max-width:520px) {.home-case {display:flex;} .home-case-preview {height:210px; min-height:0; border-right:0; border-bottom:1px solid #303641;} .home-case-preview img {max-height:100%;} .home-services {grid-template-columns:1fr; gap:24px;} .home-focused .hero h1 br {display:none;} .home-focused .hero-text {font-size:18px;} .home-focused .contact-final {padding:48px 0;}}

/* Transparent portrait retains its original proportions. */
.home-portrait {transform:none; display:block; width:380px; height:auto; max-width:100%; aspect-ratio:1; border:0; border-radius:0; margin:0 0 28px;}
@media(max-width:600px) {.home-portrait {width:320px; margin-bottom:24px;}}

/* Portrait and introduction share one row; process spans the full width. */
.collaboration-compact {grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); align-items:center; gap:36px 64px;}
.collaboration-compact .home-portrait-wrap {display:flex; justify-content:center; align-self:end; min-width:0;}
.collaboration-compact .home-portrait {width:380px; margin:0;}
.collaboration-compact .home-about-copy > p:not(.section-label) {max-width:540px;}
.collaboration-compact .home-about-copy h2 {font-size:clamp(34px,4vw,48px); line-height:1.12; margin-bottom:20px;}
.collaboration-compact .home-steps {grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;}
.collaboration-compact .home-step {display:block; padding:20px 0 0;}
.collaboration-compact .home-step-number {display:block; margin-bottom:12px;}
@media(max-width:800px) {
 .collaboration-compact {grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr); gap:28px;}
 .collaboration-compact .home-steps {gap:20px;}
 .collaboration-compact .home-step h3 {font-size:18px;}
}
@media(max-width:600px) {
 .collaboration-compact {grid-template-columns:minmax(0,1fr); gap:24px;}
 .collaboration-compact .home-portrait-wrap {justify-content:flex-start;}
 .collaboration-compact .home-portrait {width:280px;}
 .collaboration-compact .home-steps {grid-template-columns:minmax(0,1fr); gap:0; margin-top:8px;}
 .collaboration-compact .home-step {display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:20px 0;}
}

/* Compact case-study previews: keep the useful screen area in view. */
.aion-admin,.cpf-landing {grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:36px; align-items:center; margin-bottom:44px;}
.aion-admin > div,.cpf-landing > div:first-child {padding-top:0;}
.aion-admin h2,.cpf-landing h2 {font-size:clamp(28px,3vw,38px); margin-bottom:18px;}
.aion-admin p,.cpf-landing p {font-size:16px; line-height:1.65; margin-bottom:18px;}
.aion-admin figure {min-width:0; margin:0;}
.aion-admin figure > a {display:block; aspect-ratio:775 / 730; overflow:hidden; border:1px solid #303443; border-radius:12px;}
.aion-admin img {border:0; border-radius:0;}
.aion-admin figcaption {margin-top:10px; line-height:1.5;}
.cpf-landing-scroll {max-height:420px;}
.cpf-landing .screenshot-hint {margin-top:16px; margin-bottom:14px;}
@media(max-width:800px) {
 .aion-admin,.cpf-landing {grid-template-columns:minmax(0,1fr); gap:20px; margin-bottom:36px;}
 .aion-admin > div,.cpf-landing > div:first-child {max-width:620px;}
 .aion-admin figure {width:100%; max-width:540px;}
 .cpf-landing-scroll {max-height:400px;}
}

/* Consistent text hierarchy with the locally hosted Inter family. */
body {font-size:17px; font-weight:400; font-optical-sizing:auto;}
h1,h2,h3,h4,h5,h6 {font-weight:600;}
.nav a,.button,.menu-toggle {font-weight:500;}
.home-service p,.home-step p,.home-about-copy > p:not(.section-label),.aion-admin p,.cpf-landing p {font-size:17px;}

/* Cards enter in sequence when they reach the viewport. */
@keyframes project-arrive {
 from {opacity:0; transform:translateY(36px);}
 to {opacity:1; transform:translateY(0);}
}
.home-case.reveal-visible {animation:project-arrive .8s cubic-bezier(.22,1,.36,1) backwards;}
.home-case.reveal-visible:nth-child(2) {animation-delay:.12s;}
.home-case.reveal-visible:nth-child(3) {animation-delay:.24s;}
.home-case:focus-within {animation:none; opacity:1; transform:none;}
@media(max-width:800px) {.home-case.reveal-visible:nth-child(n) {animation-delay:0s;}}
@media(prefers-reduced-motion:reduce) {.home-case.reveal-visible {animation:none;}}
@media print {.home-case.reveal-visible {animation:none; opacity:1; transform:none;}}

/* Case-study sections and project cards reveal once, without moving layout. */
.project-detail .reveal-visible,.work-page .reveal-visible {
 animation:project-arrive .75s cubic-bezier(.22,1,.36,1) backwards;
}
@media(min-width:801px) {
 .work-grid > .reveal-visible:nth-child(2n),
 .github-projects-grid > .reveal-visible:nth-child(2n) {animation-delay:.1s;}
}
.project-detail .reveal-visible:focus-within,.work-page .reveal-visible:focus-within {animation:none;}
@media(prefers-reduced-motion:reduce) {
 .project-detail .reveal-visible,.work-page .reveal-visible {animation:none;}
}
@media print {
 .project-detail .reveal-visible,.work-page .reveal-visible {animation:none; opacity:1; transform:none;}
}

.work-tags .tech-badge,.github-project-tags .tech-badge,.stack-list .tech-badge {display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.tech-badge img {display:block; width:16px; height:16px; flex:0 0 16px; object-fit:contain; opacity:.9;}

/* Low-saturation badge surfaces echo the icon without coloring the text. */
.work-tags .tech-badge,.github-project-tags .tech-badge,.stack-list .tech-badge {
 background:color-mix(in srgb,var(--badge-color) 8%,#101318);
 border:1px solid color-mix(in srgb,var(--badge-color) 25%,#252b33);
 color:#bdc5ce;
}

/* Shared architecture styling across every case study. */
.architecture-node {background:color-mix(in srgb,var(--node-color,#9caec5) 7%,#101318); border-color:color-mix(in srgb,var(--node-color,#9caec5) 26%,#252b33);}
.architecture-node-main {border-color:color-mix(in srgb,var(--node-color,#9caec5) 45%,#252b33);}
.architecture-node-label {color:#99a4b1;}
.architecture-technologies {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; min-width:0;}
.architecture-tech {display:inline-flex; align-items:center; gap:8px; min-width:0;}
.architecture-tech img {width:18px; height:18px; flex:0 0 18px; opacity:.9;}
.architecture-plus {color:#758190; font-size:14px; font-weight:400;}
@media(max-width:800px) {.architecture-technologies {justify-content:flex-start;}}

/* Bring the introduction closer to the section divider. */
.home-focused #about.home-section {padding-top:24px;}
@media(max-width:600px) {.home-focused #about.home-section {padding-top:16px;}}

/* About: portrait and introduction share the opening space. */
.about-page {padding-top:32px;}
.about-intro {display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:40px; align-items:center; margin-bottom:44px; border-bottom:1px solid #252b33;}
.about-intro .work-header {margin:0; padding:20px 0 32px; max-width:none;}
.about-intro .work-header h1 {font-size:clamp(46px,6vw,78px); letter-spacing:-2.5px; line-height:1.05;}
.about-intro .work-header p {font-size:18px; max-width:560px;}
.about-portrait-wrap {align-self:end; display:flex; justify-content:center; min-width:0;}
.about-portrait {display:block; width:380px; max-width:100%; height:auto;}
.about-page .about-story {gap:48px; margin-bottom:44px;}
.about-page .about-text {font-size:17px; line-height:1.75;}
.about-page .about-story h2 {font-size:clamp(28px,3.3vw,40px);}
@media(max-width:700px) {
 .about-page {padding-top:24px;}
 .about-intro {grid-template-columns:minmax(0,1fr); gap:0; margin-bottom:32px;}
 .about-intro .work-header {padding:12px 0 0;}
 .about-intro .work-header h1 {font-size:clamp(42px,9vw,62px); letter-spacing:-1.5px;}
 .about-portrait-wrap {justify-content:flex-end;}
 .about-portrait {width:260px;}
 .about-page .about-story {grid-template-columns:minmax(0,1fr); gap:20px; margin-bottom:32px;}
}

/* Give the About portrait a deliberate frame and space above the divider. */
.about-intro {grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr); gap:48px; padding:20px 0 36px;}
.about-intro .work-header {padding:0;}
.about-portrait-wrap {position:relative; display:block; align-self:center; justify-self:center; width:min(100%,340px); aspect-ratio:1; overflow:hidden; border:1px solid #2c3340; border-radius:28px; background:radial-gradient(ellipse at 55% 35%,#272c3b 0%,#151a23 50%,#101318 85%);}
.about-portrait {position:absolute; bottom:0; left:-13%; width:110%; height:110%; max-width:none; object-fit:contain;}
@media(max-width:700px) {
 .about-intro {grid-template-columns:minmax(0,1fr); gap:28px; padding:8px 0 28px;}
 .about-portrait-wrap {width:min(100%,300px); justify-self:start; border-radius:24px;}
 .about-intro .work-header {padding:0;}
}

/* Bring deliverables and useful next steps into the first screen. */
.work-page:not(.about-page),.project-detail {padding-top:56px; padding-bottom:80px;}
.work-header {max-width:850px; margin-bottom:40px;}
.work-header h1,.project-detail-header h1 {font-size:clamp(38px,5vw,64px); line-height:1.08; letter-spacing:-.035em; margin-bottom:20px;}
.project-detail .back-link {margin-bottom:28px;}
.project-detail-header {max-width:960px; margin-bottom:28px;}
.project-detail-intro {font-size:18px; line-height:1.65; max-width:850px;}
.case-summary {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:24px; margin:0 0 40px; background:#11161c; border:1px solid #2c3541; border-radius:16px;}
.case-summary dt {color:#a5acf2; font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; margin-bottom:10px;}
.case-summary dd {margin:0; color:#c2cad4; font-size:15px; line-height:1.65;}
.project-content .project-block {padding:40px 0;}
.project-content .project-block h2 {font-size:clamp(28px,3.2vw,40px);}
.case-technical {border-top:1px solid #29303a; padding-top:28px; margin-top:28px;}
.case-cta {margin-top:48px;}
.case-cta p {max-width:720px; color:#b6bfcb; line-height:1.7;}
.case-cta .contact-next {margin-top:12px; font-size:14px;}
.home-service .text-link {display:inline-block; margin-top:16px; font-size:14px;}
.home-case-link {margin-top:auto;}
.home-case-preview-data {background:linear-gradient(135deg,#192e29,#151f28); padding:22px;}
.mini-sheet {width:100%; background:#121d20; border:1px solid #45645e; border-radius:10px; color:#c4d4ce; padding:14px; font-size:11px;}
.mini-sheet > div:first-child {color:#a7d0bd; font-size:10px; margin-bottom:12px; display:flex; justify-content:space-between; gap:8px;}
.mini-sheet-row {display:grid; grid-template-columns:1.5fr 1fr .8fr; gap:8px; padding:8px 0; border-top:1px solid #31413f;}
.mini-sheet small {display:block; color:#8daba1; margin-top:10px; font-size:10px;}
.scraper-demo {padding:28px; background:#111b19; border:1px solid #2e4840; border-radius:18px; margin-bottom:36px;}
.scraper-demo h2 {font-size:clamp(26px,3vw,36px); margin-bottom:12px;}
.scraper-demo p {color:#b6c5bf;}
.demo-sheet {margin-top:24px; border:1px solid #3c554b; border-radius:10px; overflow:hidden;}
.sheet-toolbar {display:flex; justify-content:space-between; gap:12px; background:#1f332b; padding:14px 18px; font-size:14px;}
.sheet-toolbar span {color:#9bc2ae;}
.sheet-scroll {overflow-x:auto;}
.demo-sheet table {width:100%; border-collapse:collapse; text-align:left; font-size:15px;}
.demo-sheet th,.demo-sheet td {padding:14px 18px; border-bottom:1px solid #2c3c35; white-space:nowrap;}
.demo-sheet th {color:#b6cbbf; font-weight:500;}
.demo-sheet caption {caption-side:bottom; text-align:left; padding:14px 18px; color:#9faea6; font-size:12px;}
.service-faq {margin-top:56px; max-width:850px;}
.service-faq h2,.contact-next-steps h2 {font-size:clamp(28px,3vw,38px); line-height:1.2; margin-bottom:24px;}
.service-faq details {border-top:1px solid #303742; padding:20px 0;}
.service-faq summary {cursor:pointer; font-size:18px; font-weight:500;}
.service-faq details p {color:#b2bdc9; line-height:1.7; margin-top:14px;}
.service-details [id] {scroll-margin-top:100px;}
.contact-next-steps {max-width:850px; border-top:1px solid #303742; padding-top:32px;}
.contact-next-steps ol {padding-left:22px; color:#b7c0cc; line-height:1.7;}
.contact-next-steps li {margin-bottom:16px; padding-left:6px;}
.contact-next-steps strong {color:#eef1f5;}
@media(max-width:700px) {
 .work-page:not(.about-page),.project-detail {padding-top:32px; padding-bottom:56px;}
 .case-summary {grid-template-columns:minmax(0,1fr); gap:18px; padding:20px; margin-bottom:28px;}
 .case-summary > div + div {border-top:1px solid #2c3541; padding-top:18px;}
 .scraper-demo {padding:20px;}
 .sheet-toolbar {flex-wrap:wrap;}
 .demo-sheet th,.demo-sheet td {padding:10px 12px;}
}

/* One shared request form on the homepage and contact page. */
.contact-request-layout {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start;}
.contact-request-copy h1 {font-size:clamp(40px,5vw,64px); line-height:1.06; letter-spacing:-.035em; margin-bottom:22px;}
.home-focused .contact-request-copy h2 {font-size:clamp(32px,3.8vw,48px);}
.contact-request-copy > p {color:#bac3d0; line-height:1.7; max-width:480px;}
.contact-request-copy .direct-contact-label {font-size:13px; margin:26px 0 12px; color:#98a5b7;}
.contact-channels {display:flex; flex-direction:column; gap:8px;}
.contact-channel {display:flex; align-items:center; gap:12px; border:1px solid #303847; background:#10151c80; border-radius:12px; padding:12px 14px; min-width:0;}
.contact-channel > img {flex:0 0 20px;}
.contact-channel > span:not(.channel-arrow) {min-width:0; flex:1;}
.contact-channel strong {display:block; font-size:13px; font-weight:500; color:#ecf0f7;}
.contact-channel span span {display:block; font-size:13px; color:#acb9ca; overflow-wrap:anywhere;}
.channel-arrow {color:#8d9bb1; font-size:16px;}
a.contact-channel:hover {border-color:#626b88; background:#1a2130;}
.inquiry-panel {min-width:0; scroll-margin-top:100px;}
.contact-page .inquiry-panel {padding:28px; border:1px solid #343d50; border-radius:18px; background:#111720;}
.inquiry-field {margin-bottom:20px;}
.inquiry-field label {display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; font-size:15px; color:#eef1f6;}
.inquiry-field label span {font-size:12px; color:#a2aebe;}
.inquiry-field input,.inquiry-field textarea {display:block; width:100%; min-width:0; padding:13px 14px; border:1px solid #465066; border-radius:10px; background:#0d121a; color:#f0f3fa; font:inherit; font-size:16px; line-height:1.5;}
.inquiry-field textarea {resize:vertical; min-height:130px; max-height:400px;}
.inquiry-field input::placeholder,.inquiry-field textarea::placeholder {color:#8b99ab;}
.inquiry-field input:focus,.inquiry-field textarea:focus {outline:2px solid #939bff; outline-offset:2px;}
.inquiry-field small {display:block; font-size:12px; color:#9aa7ba; margin-top:7px;}
.inquiry-form .button {width:100%; justify-content:center; cursor:pointer;}
.inquiry-form .inquiry-privacy {font-size:12px; line-height:1.6; color:#99a6b9; margin-top:12px;}
.inquiry-trap {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
.inquiry-errors,.errorlist {color:#ffc1c7; font-size:14px; list-style:none; margin:10px 0; line-height:1.6;}
.inquiry-errors {padding:12px 16px; border:1px solid #754b5b; border-radius:10px; background:#38202a;}
.inquiry-success {padding:24px; border:1px solid #477660; border-radius:12px; background:#182d25;}
.inquiry-success h2 {font-size:28px; margin-bottom:12px;}
.inquiry-success p {color:#c1d5ca; line-height:1.6;}
.contact-page .contact-next-steps {margin-top:48px;}
@media(max-width:800px) {.contact-request-layout {grid-template-columns:minmax(0,1fr); gap:28px;} .contact-page .inquiry-panel {padding:20px;} .contact-request-copy > p {max-width:none;}}

/* Equal-height contact columns with aligned lower edges. */
@media(min-width:801px) {
 .contact-request-layout {align-items:stretch;}
 .contact-request-copy {display:flex; flex-direction:column;}
 .contact-request-copy .contact-channels {margin-top:auto;}
 .contact-request-layout .inquiry-panel {display:flex; flex-direction:column;}
 .contact-request-layout .inquiry-form {display:flex; flex-direction:column; flex:1;}
 .contact-request-layout .inquiry-field:has(textarea) {display:flex; flex-direction:column; flex:1;}
 .contact-request-layout .inquiry-field textarea {flex:1;}
}

/* A complete confirmation state, rather than an alert inside an empty form. */
.contact-page .inquiry-panel--sent {background:radial-gradient(ellipse at 50% 15%,rgba(114,124,255,.09),transparent 65%),#10151d;}
.inquiry-panel--sent {justify-content:center;}
.inquiry-success {display:flex; flex-direction:column; align-items:center; text-align:center; padding:32px 12px; border:0; border-radius:0; background:none; margin:auto; max-width:360px;}
.inquiry-success-icon {display:grid; place-items:center; width:60px; height:60px; border:1px solid #42594e; border-radius:50%; background:#182a23; color:#a8d6bb; margin-bottom:26px;}
.inquiry-success-icon svg {width:30px; height:30px;}
.inquiry-success .eyebrow {font-size:11px; margin-bottom:14px;}
.inquiry-success h2 {font-size:clamp(30px,3.2vw,40px); letter-spacing:-.04em; margin:0 0 16px;}
.inquiry-success p {color:var(--muted,#a6b1c1); line-height:1.7; margin:0 0 28px;}
.inquiry-success-note {font-size:12px; color:#8c99ab; margin-top:18px;}
@media(max-width:800px) {.inquiry-success {padding:28px 8px;} .inquiry-success-icon {margin-bottom:20px;}}

/* Business-focused entry points and a visible product example. */
.hero-start-note {font-size:13px; color:#a6b1c1; line-height:1.6;}
.service-start-intro {max-width:700px; color:#a6b1c1; line-height:1.7; margin:-8px 0 30px;}
.starter-section {margin-bottom:64px;}
.starter-section h2 {font-size:clamp(28px,3vw,40px); margin-bottom:14px;}
.starter-section > p:not(.section-label) {max-width:760px; color:#a6b1c1; line-height:1.7;}
.starter-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px;}
.starter-grid article {display:flex; flex-direction:column; padding:24px; background:#11161d; border:1px solid #303844; border-radius:14px;}
.starter-grid article > span {font-size:11px; color:#a3abff; letter-spacing:.08em;}
.starter-grid h3 {font-size:21px; line-height:1.4; margin:16px 0;}
.starter-grid p {font-size:15px; line-height:1.7; color:#a6b1c1; margin-bottom:22px;}
.starter-grid a {margin-top:auto; font-size:14px;}
.case-workflow {list-style:none; padding:0; margin:28px 0;}
.case-workflow li {display:flex; gap:24px; padding:24px 0; border-top:1px solid #303844;}
.case-workflow li > span {font-size:12px; color:#a3abff; padding-top:5px;}
.case-workflow h3 {font-size:21px; margin-bottom:10px;}
.case-workflow p {margin:0;}
@media(max-width:900px) {.starter-grid {grid-template-columns:1fr;}}

/* Keep the portrait connected to the introduction, with a soft lower edge. */
.collaboration-compact {grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); column-gap:32px;}
.collaboration-compact .home-portrait-wrap {align-self:center; justify-self:start; width:min(100%,340px); justify-content:center;}
.collaboration-compact .home-portrait {width:100%; mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);}
@media(max-width:800px) {.collaboration-compact {grid-template-columns:minmax(0,1.25fr) minmax(180px,.75fr); column-gap:24px;}}
@media(max-width:600px) {.collaboration-compact {grid-template-columns:minmax(0,1fr);} .collaboration-compact .home-portrait-wrap {width:260px; justify-self:center;}}
@media(min-width:601px) {
 .collaboration-compact .home-portrait-wrap {align-self:start; transform:translateY(-32px);}
}

/* Language choice stays visible outside the collapsible mobile navigation. */
.header-inner {gap:20px;}
.header .nav {margin-left:auto;}
.language-switch {display:flex; flex-shrink:0; gap:2px; padding:3px; border:1px solid #343b47; border-radius:9px;}
.language-switch button {font:inherit; font-size:12px; padding:6px 8px; border:0; border-radius:6px; color:#aab4c5; background:transparent; cursor:pointer;}
.language-switch button[aria-pressed="true"] {background:#282c40; color:#fff;}
.language-switch button:hover {color:#fff;}
.language-switch button:focus-visible {outline:2px solid #9a9fff; outline-offset:2px;}
@media(max-width:800px) {.header .menu-toggle {margin-left:auto;} .header .nav {order:4; margin-left:0;} .language-switch {order:3;}}
html[lang="ru"] .hero h1 {font-size:clamp(38px,5.5vw,70px);}
html[lang="ru"] .home-case h3 {font-size:clamp(21px,2.3vw,28px);}

/* Anonymized reward-product walkthrough. */
.teacher-showcase {margin:32px 0 64px;}
.teacher-showcase-heading {max-width:720px;}
.teacher-showcase h2 {font-size:clamp(30px,3.4vw,46px);line-height:1.15;margin:16px 0;}
.teacher-showcase-heading p {color:#b2bdcc;line-height:1.7;}
.teacher-image-note {max-width:850px;color:#9da9bb;font-size:13px;line-height:1.7;margin:20px 0 28px;}
.teacher-screen-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;}
.teacher-showcase figure {min-width:0;margin:0 0 30px;}
.teacher-showcase figure a {display:block;border:1px solid #3b344e;border-radius:14px;overflow:hidden;background:#faf9fd;}
.teacher-showcase img {display:block;width:100%;height:auto;}
.teacher-showcase figcaption {font-size:14px;line-height:1.65;margin-top:12px;color:#a9b5c7;}
.teacher-showcase figcaption strong,.teacher-showcase figcaption span {display:block;}
.teacher-showcase figcaption strong {color:#f2f2f2;font-size:18px;margin-bottom:4px;}
@media(max-width:700px) {.teacher-screen-grid {grid-template-columns:1fr;gap:0;}}