@import url("./liquid-surfaces.css");

:root {
    color-scheme:dark;
    --ink:#0a0d12;
    --steel:#8b949e;
    --blue:#0066ff;
    --line:#29313c;
    font-family:Arial,Helvetica,sans-serif;
    color:#fff;
    background:var(--ink);
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:24px;
}
body {
    margin:0;
}
a {
    color:inherit;
    text-decoration:none;
}
a:focus-visible {
    outline:2px solid currentColor;
    outline-offset:6px;
}
::selection {
    background:var(--blue);
    color:white;
}
img {
    display:block;
    max-width:100%;
    height:auto;
}
h1,h2,h3,p {
    margin:0;
}
p {
    line-height:1.65;
}
h1,h2,h3 {
    text-wrap:balance;
}
.wrap {
    width:min(1280px,calc(100% - 112px));
    margin-inline:auto;
}
.sr-only,.skip:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}
.skip:focus {
    position:fixed;
    top:8px;
    left:8px;
    z-index:10;
    padding:16px;
    background:white;
    color:var(--ink);
}
.preview {
    padding:9px 28px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    background:#151a22;
    color:#b5bdc7;
    font-size:9px;
    letter-spacing:.08em;
}
.preview a {
    text-decoration:underline;
    text-underline-offset:3px;
}
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    min-height:118px;
    border-bottom:1px solid var(--line);
}
.brand {
    display:block;
    width:220px;
    flex-shrink:0;
    padding:14px 0;
}
.header nav {
    display:flex;
    gap:28px;
    align-items:center;
    font-size:12px;
    margin-left:auto;
}
.header nav a {
    padding-block:14px;
}
.header nav a:hover,.text-link:hover {
    color:#a8caff;
}
.nav-cta {
    border-bottom:1px solid var(--blue);
}
.languages {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#8b949e;
}
.languages a {
    padding-block:12px;
}
.languages [aria-current] {
    color:white;
    text-decoration:underline;
    text-decoration-color:var(--blue);
    text-underline-offset:6px;
}
.hero {
    padding-top:72px;
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:38px 58px;
    align-items:center;
}
.eyebrow {
    font-size:10px;
    line-height:1.6;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
}
.eyebrow i,.diagram-bottom i {
    display:inline-block;
    background:var(--blue);
    width:6px;
    height:6px;
    flex-shrink:0;
}
h1 {
    font-size:clamp(58px,6.1vw,88px);
    line-height:1.015;
    letter-spacing:-.06em;
    margin-top:28px;
}
h1 span {
    color:#aebdce;
}
.intro {
    max-width:475px;
    color:#afb8c4;
    font-size:16px;
    margin-top:28px;
}
.actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:34px;
}
.button {
    display:inline-flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    padding:18px 23px;
    background:var(--blue);
    color:white;
    font-size:13px;
    font-weight:bold;
    min-height:52px;
    transition:background .2s;
}
.button:hover {
    background:#0057dc;
}
.text-link {
    font-size:12px;
}
.architecture {
    min-width:0;
}
.diagram-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:9px;
    letter-spacing:.08em;
    color:#a2aeba;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}
.diagram {
    position:relative;
    isolation:isolate;
    padding:32px 22px;
    background-image:linear-gradient(#26314255 1px,transparent 1px),linear-gradient(90deg,#26314255 1px,transparent 1px);
    background-size:30px 30px;
    overflow:hidden;
}
.orbit {
    position:absolute;
    z-index:-1;
    left:50%;
    top:50%;
    border:1px solid #344256;
    border-radius:50%;
    transform:translate(-50%,-50%);
    width:410px;
    height:410px;
    box-shadow:0 0 0 50px #34425618;
}
.layer {
    position:relative;
    display:flex;
    gap:18px;
    align-items:center;
    min-height:100px;
    border:1px solid #40516a;
    background:#101822;
    padding:18px;
    box-shadow:7px 7px 0 #080b10;
}
.layer:nth-of-type(2) {
    margin-right:36px;
}
.layer:nth-of-type(4) {
    margin-inline:18px;
}
.layer:nth-of-type(6) {
    margin-left:36px;
    border-color:var(--blue);
}
.number {
    color:#90a0b5;
    font-size:10px;
    align-self:flex-start;
}
.layer>div {
    flex:1;
}
.layer strong {
    font-size:10px;
    letter-spacing:.16em;
}
.layer small {
    font-size:10px;
    color:#a7b4c5;
    line-height:1.5;
}
.window {
    width:96px;
    margin-top:10px;
    height:29px;
    border:1px solid #657c9c;
    padding:4px;
    display:flex;
    gap:3px;
    flex-wrap:wrap;
}
.window i {
    width:3px;
    height:3px;
    background:#8b949e;
}
.window b {
    width:100%;
    height:10px;
    background:linear-gradient(90deg,#0066ff 24%,transparent 24% 29%,#40516a 29% 100%);
}
.connector {
    height:35px;
    display:flex;
    justify-content:center;
}
.connector:before {
    content:'';
    height:100%;
    width:1px;
    background:var(--blue);
}
.connector span {
    font-size:7px;
    letter-spacing:.1em;
    color:#95a8c1;
    position:absolute;
    left:54%;
    margin-top:12px;
}
.nodes {
    display:flex;
    align-items:center;
    margin-top:15px;
}
.nodes i {
    height:15px;
    width:25px;
    border:1px solid #657c9c;
}
.nodes i:nth-of-type(2) {
    border-color:var(--blue);
    background:#0066ff33;
}
.nodes b {
    height:1px;
    width:16px;
    background:#657c9c;
}
.chip {
    width:38px;
    height:28px;
    border:3px double #7295c7;
    margin-top:12px;
    display:grid;
    place-items:center;
    outline:2px dashed #526f97;
    outline-offset:3px;
    font-size:10px;
    color:#9ec4ff;
}
.diagram-bottom {
    justify-content:flex-start;
    padding-top:20px;
    border-top:1px solid var(--line);
    border-bottom:0;
    letter-spacing:.02em;
}
.diagram-bottom b {
    margin-left:auto;
    font-size:20px;
}
.hero-bottom {
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    padding:25px 0;
    margin-top:24px;
    font-size:10px;
    letter-spacing:.1em;
    color:#a6b0bd;
    gap:20px;
}
.hero-bottom a {
    color:white;
    font-size:20px;
}
.section {
    padding-block:96px;
}
.light {
    background:#f5f6f8;
    color:var(--ink);
    color-scheme:light;
}
.heading {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
    margin-bottom:50px;
}
.heading>.eyebrow {
    align-self:start;
    padding-top:10px;
    color:var(--steel);
}
.light .eyebrow {
    color:#46515f;
}
h2 {
    font-size:clamp(34px,3.65vw,52px);
    letter-spacing:-.045em;
    line-height:1.09;
}
.heading>div>p {
    font-size:15px;
    margin-top:22px;
    max-width:580px;
    color:#aeb8c5;
}
.light .heading>div>p {
    color:#525d6b;
}
.services {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #cbd0d8;
}
.services article {
    padding:30px 30px 0;
    display:flex;
    flex-direction:column;
    border-right:1px solid #cbd0d8;
}
.services article:first-child {
    padding-left:0;
}
.services article:last-child {
    padding-right:0;
    border:0;
}
.service-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#5f6b7c;
    font-size:12px;
    margin-bottom:32px;
}
.service-top b {
    font-size:27px;
    color:var(--blue);
    font-weight:normal;
}
h3 {
    font-size:23px;
    letter-spacing:-.025em;
}
.services article>p {
    margin-top:18px;
    font-size:14px;
    color:#525d6b;
    flex:1;
}
.services ul {
    padding:0;
    list-style:none;
    margin:24px 0 32px;
    font-size:12px;
    color:#364252;
    line-height:1.7;
}
.services li {
    padding:9px 0;
    border-bottom:1px solid #dee2e7;
}
.services article>a {
    font-size:12px;
    font-weight:bold;
    padding:12px 0;
}
.services article>a:hover {
    text-decoration:underline;
    text-underline-offset:4px;
}
.placeholder-note {
    border:1px dashed #acb7c5;
    padding:16px;
    margin:24px 0 32px;
}
.placeholder-note>span {
    font-size:9px;
    letter-spacing:.1em;
    color:#4d5d72;
}
.placeholder-note p {
    font-size:12px;
    color:#525d6b;
    margin-top:9px;
}
.projects {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:54px 32px;
}
.project {
    min-width:0;
}
.project-art {
    height:270px;
    background:#151e2b;
    border:1px solid #263244;
    position:relative;
    padding:24px 32px 0;
    overflow:hidden;
}
.art-label {
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9eafc7;
}
.art-note {
    position:absolute;
    bottom:10px;
    right:12px;
    font-size:8px;
    color:#a3b0c2;
    background:#101822;
    padding:4px 6px;
}
.mock-dashboard {
    display:flex;
    height:195px;
    margin-top:27px;
    border:1px solid #45516b;
    transform:perspective(900px) rotateY(-9deg) rotateX(9deg);
    background:#10151e;
    box-shadow:0 16px 30px #0004;
}
.mock-dashboard aside {
    width:45px;
    border-right:1px solid #263244;
    padding:22px 12px;
}
.mock-dashboard aside i {
    display:block;
    width:17px;
    height:3px;
    background:#617088;
    margin-bottom:18px;
}
.mock-dashboard aside i:first-child {
    background:var(--blue);
}
.mock-content {
    flex:1;
    padding:18px;
}
.mock-title {
    height:5px;
    width:40%;
    background:#8b949e;
    margin-bottom:18px;
}
.metrics {
    display:flex;
    gap:8px;
}
.metrics i {
    height:32px;
    flex:1;
    background:#1e2a3c;
    border:1px solid #304361;
}
.chart {
    display:flex;
    align-items:end;
    gap:9px;
    height:84px;
    margin-top:12px;
    border-bottom:1px solid #3c4d68;
    padding-inline:8px;
}
.chart i {
    background:#0066ff;
    width:12%;
    height:35%;
}
.chart i:nth-child(2n) {
    height:52%;
    background:#3e7cdb;
}
.chart i:nth-child(3n) {
    height:45%;
}
.chart i:nth-child(n+5) {
    height:65%;
}
.chart i:last-child {
    height:90%;
    background:#8bb9ff;
}
.mock-site {
    position:relative;
    margin-top:28px;
    background:#e9eee7;
    height:200px;
    transform:perspective(900px) rotateY(-7deg) rotateX(7deg);
    color:#273e36;
    padding:16px 22px;
    box-shadow:0 16px 30px #0003;
}
.mock-site>div {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #273e3633;
    padding-bottom:12px;
    font-size:10px;
    font-weight:bold;
    gap:10px;
}
.mock-site strong {
    display:block;
    font-size:32px;
    margin-top:25px;
    letter-spacing:-.04em;
    line-height:1.05;
    max-width:60%;
}
.mock-site>i {
    position:absolute;
    right:24px;
    bottom:0;
    width:28%;
    height:125px;
    border-radius:60px 60px 0 0;
    background:linear-gradient(145deg,#bccbbb,#547668);
}
.engineering-drawing {
    height:205px;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:34px;
    background-image:linear-gradient(#7498c21c 1px,transparent 1px),linear-gradient(90deg,#7498c21c 1px,transparent 1px);
    background-size:18px 18px;
    margin-top:15px;
}
.board {
    width:150px;
    height:87px;
    border:1px solid #7aa8df;
    transform:rotate(-22deg) skewX(18deg);
    box-shadow:8px 8px 0 #1b2d43,9px 9px 0 #6a93c3,17px 17px 0 #172638,18px 18px 0 #49668b;
    position:relative;
    background:#23354a;
}
.board:before {
    content:'';
    position:absolute;
    inset:15px 38px;
    border:3px double #9dbce2;
    background:#101822;
    outline:3px dashed #567292;
    outline-offset:5px;
}
.board:after {
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    background:var(--blue);
    top:12px;
    right:10px;
    box-shadow:0 15px #0066ff,0 30px #0066ff;
}
.engineering-drawing>span {
    font-size:8px;
    letter-spacing:.15em;
    color:#95b0d1;
}
.project-info {
    padding-top:24px;
}
.project-info .eyebrow {
    color:#9aabc1;
    font-size:9px;
    margin-bottom:9px;
}
.project-info>p:not(.eyebrow) {
    font-size:14px;
    color:#aeb8c5;
    margin-top:14px;
    max-width:520px;
}
.project-info>p.tech {
    font-size:10px;
    word-spacing:4px;
    margin-top:20px;
}
.project-info>a,.status {
    display:inline-block;
    margin-top:21px;
    font-size:12px;
}
.project-info>a {
    border-bottom:1px solid #53667e;
    padding-bottom:5px;
}
.project-info>a:hover {
    border-color:var(--blue);
}
.status {
    color:#99a8bb;
}
.hardware-placeholder {
    border:1px dashed #43526a;
    padding:30px;
    background:#10161f;
}
.hardware-placeholder .eyebrow {
    color:#9babbe;
}
.placeholder-cross {
    font-size:48px;
    color:#526b8f;
    margin:24px 0;
}
.hardware-placeholder>p {
    font-size:14px;
    color:#aeb8c5;
    margin-top:15px;
    max-width:380px;
}
.placeholder-badge {
    font-size:10px;
    display:inline-block;
    margin-top:22px;
    padding:7px 9px;
    border:1px solid #354359;
    color:#aeb8c5;
}
.integration {
    background:#101720;
    border-block:1px solid var(--line);
}
.integration>.wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
}
.integration h2 {
    margin-top:30px;
}
.integration>.wrap>div>p:last-child {
    font-size:15px;
    color:#aeb8c5;
    margin-top:26px;
    max-width:420px;
}
.chain {
    list-style:none;
    margin:0;
    padding:0;
}
.chain li {
    display:flex;
    gap:25px;
    padding:24px 0;
    border-bottom:1px solid #344254;
}
.chain li:first-child {
    padding-top:0;
}
.chain li>span {
    font-size:12px;
    color:#9cc4ff;
    padding-top:5px;
}
.chain h3 {
    font-size:20px;
}
.chain p {
    font-size:13px;
    color:#aeb8c5;
    margin-top:8px;
}
.about {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
}
.about>.eyebrow {
    align-self:start;
    color:var(--steel);
    padding-top:8px;
}
.about-lead {
    font-size:22px;
    line-height:1.5;
    margin-top:30px;
    max-width:720px;
}
.about>div>p:last-child {
    font-size:15px;
    max-width:620px;
    color:#aeb8c5;
    margin-top:22px;
}
.contact-main {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    margin-top:30px;
}
.contact-main h2 {
    font-size:clamp(44px,5.5vw,76px);
}
.contact-main p {
    max-width:430px;
    color:#525d6b;
    font-size:15px;
    margin-top:24px;
}
.contact-main .button {
    flex-shrink:0;
}
.contact-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:46px;
    padding-top:24px;
    border-top:1px solid #cbd0d8;
    font-size:12px;
    color:#525d6b;
}
.contact-bottom a {
    color:var(--ink);
    text-decoration:underline;
    text-underline-offset:4px;
}
.footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-block:40px;
}
.footer p,.footer>div {
    font-size:11px;
    color:#aeb8c5;
}
.footer>div {
    display:flex;
    gap:22px;
}
.footer .brand {
    width:205px;
}
.footer a:hover {
    text-decoration:underline;
}
@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px);
    }
    .header nav {
        gap:18px;
    }
    .brand {
        width:200px;
    }
    .hero {
        gap:32px;
        padding-top:55px;
    }
    h1 {
        font-size:64px;
    }
    .intro {
        font-size:14px;
    }
    .actions {
        gap:18px;
        flex-wrap:wrap;
    }
    .diagram {
        padding:25px 8px;
    }
    .layer {
        gap:10px;
        padding:14px;
    }
    .layer small {
        font-size:9px;
    }
    .section {
        padding-block:75px;
    }
    .services article {
        padding-inline:22px;
    }
    .services h3 {
        font-size:20px;
    }
    .integration>.wrap {
        gap:55px;
    }
    .project-art {
        padding-inline:20px;
    }
    .mock-site strong {
        font-size:28px;
    }
}
@media(max-width:800px) {
    .wrap {
        width:calc(100% - 40px);
    }
    .preview {
        padding-inline:20px;
        font-size:8px;
        letter-spacing:.02em;
    }
    .header {
        flex-wrap:wrap;
        gap:0;
        padding-top:12px;
    }
    .header .brand {
        width:205px;
    }
    .languages {
        margin-left:auto;
    }
    .header nav {
        order:3;
        width:100%;
        justify-content:space-between;
        gap:10px;
        font-size:11px;
        padding-bottom:8px;
    }
    .hero {
        grid-template-columns:1fr;
        padding-top:42px;
        gap:35px;
    }
    .hero .eyebrow {
        font-size:9px;
        letter-spacing:.07em;
    }
    h1 {
        font-size:clamp(54px,10.4vw,76px);
        margin-top:24px;
    }
    .intro {
        font-size:15px;
        max-width:520px;
    }
    .architecture {
        max-width:520px;
        width:100%;
        margin:auto;
    }
    .diagram {
        padding:25px;
    }
    .layer {
        min-height:88px;
        padding:16px;
    }
    .layer small {
        font-size:10px;
    }
    .hero-bottom {
        margin-top:0;
        font-size:8px;
        letter-spacing:.04em;
    }
    .hero-bottom>span:nth-child(2) {
        max-width:105px;
        text-align:right;
        line-height:1.6;
    }
    .section {
        padding-block:60px;
    }
    .heading,.about {
        grid-template-columns:1fr;
        gap:24px;
    }
    .heading {
        margin-bottom:34px;
    }
    h2 {
        font-size:36px;
    }
    .services {
        grid-template-columns:1fr;
    }
    .services article,.services article:first-child,.services article:last-child {
        padding:25px 0;
        border:0;
        border-bottom:1px solid #cbd0d8;
    }
    .services article:last-child {
        border:0;
        padding-bottom:0;
    }
    .service-top {
        margin-bottom:15px;
    }
    .services h3 {
        font-size:25px;
    }
    .services article>p {
        max-width:520px;
    }
    .services ul {
        margin:16px 0;
    }
    .projects {
        grid-template-columns:1fr;
        gap:40px;
    }
    .project-art {
        height:260px;
        padding-inline:28px;
    }
    .project-info {
        padding-top:20px;
    }
    .integration>.wrap {
        grid-template-columns:1fr;
        gap:40px;
    }
    .integration h2 {
        margin-top:24px;
    }
    .integration>.wrap>div>p:last-child {
        max-width:100%;
    }
    .about-lead {
        font-size:20px;
    }
    .contact-main {
        align-items:flex-start;
        flex-direction:column;
        gap:28px;
    }
    .contact-main h2 {
        font-size:52px;
    }
    .contact-bottom {
        flex-direction:column;
        gap:14px;
    }
    .footer {
        flex-wrap:wrap;
        gap:20px;
        padding-block:30px;
    }
    .footer>div {
        width:100%;
        padding-top:12px;
    }
    .footer .brand {
        width:200px;
    }
    .footer p {
        font-size:10px;
    }
}
@media(max-width:370px) {
    .wrap {
        width:calc(100% - 32px);
    }
    .preview {
        padding-inline:16px;
        font-size:7px;
    }
    .header nav {
        font-size:10px;
        gap:8px;
    }
    .diagram {
        padding-inline:0;
    }
    .diagram-label {
        font-size:8px;
    }
    .layer small {
        max-width:68px;
    }
    .actions {
        gap:24px;
    }
    .project-art {
        padding-inline:18px;
    }
    .mock-site strong {
        font-size:25px;
    }
    .footer p {
        width:100%;
    }
    .contact-main h2 {
        font-size:46px;
    }
    .hardware-placeholder {
        padding:24px;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        transition:none!important;
    }
}

/* Aethium motion: architectural, responsive, and progressively enhanced. */
.header .brand { width: 320px; padding-block: 22px; }
.header { min-height: 142px; }
.footer .brand { width: 280px; }
.reading-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 20;
    pointer-events: none;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
}
.hero { position: relative; isolation: isolate; }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 82% 35%, #0066ff0d, transparent 58%);
}
.header nav a:not(.nav-cta) { position: relative; }
.header nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    inset: auto 0 4px;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
.button { position: relative; overflow: hidden; transition: background .25s, box-shadow .25s, transform .25s; }
.button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, #ffffff25 48%, transparent 75%);
    transform: translateX(-120%);
    pointer-events: none;
}
.button:hover::before, .button:focus-visible::before { animation: button-sweep .65s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #0066ff28; }
.button span { display: inline-block; transition: transform .25s; }
.button:hover span { transform: translate(3px, -3px); }
.services article { position: relative; }
.services article::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.services article:hover::before, .services article:focus-within::before { transform: scaleX(1); }
.service-top b { transition: transform .35s, color .35s; }
.services article:hover .service-top b { transform: translateY(-5px); }
.project-art, .architecture {
    position: relative;
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .35s ease-out, border-color .35s;
}
.project-art::after, .architecture::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(350px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #81baff19, transparent 75%);
    transition: opacity .35s;
}
.pointer-active::after { opacity: 1; }
.project:hover .project-art { border-color: #577da9; }
.project-info h3 { transition: color .25s; }
.project:hover h3, .project:focus-within h3 { color: #a8caff; }
.connector { position: relative; }
.connector span { left: calc(50% + 12px); white-space: nowrap; }
.connector::after {
    content: '';
    position: absolute;
    left: calc(50% - 2px);
    top: 0;
    width: 5px;
    height: 10px;
    background: #a8caff;
    box-shadow: 0 0 12px #0066ff99;
    opacity: 0;
}
.architecture.is-revealed .connector::after { animation: data-packet 1.4s ease-in-out 3; }
.architecture.is-revealed .connector:nth-of-type(5)::after { animation-delay: .35s; }
.architecture.is-revealed .layer { animation: layer-activate 1.4s ease-in-out 3; }
.architecture.is-revealed .layer:nth-of-type(4) { animation-delay: .15s; }
.architecture.is-revealed .layer:nth-of-type(6) { animation-delay: .3s; }
.orbit::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-top-color: #0066ff;
    border-right-color: #0066ff55;
    border-radius: 50%;
    opacity: .6;
}
.architecture.is-revealed .orbit::after { animation: orbit-scan 4.5s ease-in-out; }
.project.is-revealed .chart i { transform-origin: bottom; animation: chart-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
.project.is-revealed .chart i:nth-child(2n) { animation-delay: .12s; }
.project.is-revealed .chart i:nth-child(3n) { animation-delay: .24s; }
.chain li { transition: border-color .3s; }
.chain li > span { transition: color .3s, transform .3s; }
.chain li:hover { border-color: #0066ff; }
.chain li:hover > span { color: white; transform: translateX(4px); }
.hardware-placeholder { transition: border-color .3s, background .3s; }
.hardware-placeholder:hover { background: #141f2e; border-color: #6482ac; }
.placeholder-cross { transition: transform .45s; transform-origin: left center; }
.hardware-placeholder:hover .placeholder-cross { transform: translateX(8px); }
@keyframes button-sweep { to { transform: translateX(120%); } }
@keyframes data-packet {
    0% { opacity: 0; transform: translateY(0); }
    20%, 70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(25px); }
}
@keyframes layer-activate {
    0%, 100% { background-color: #101822; }
    45% { background-color: #162c49; }
}
@keyframes orbit-scan { from { transform: rotate(-70deg); } to { transform: rotate(290deg); } }
@keyframes chart-rise { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
@media (max-width: 1100px) and (min-width: 801px) {
    .header { flex-wrap: wrap; gap: 0 24px; padding-top: 8px; }
    .header .brand { width: 290px; }
    .header nav { order: 3; width: 100%; justify-content: space-between; padding-bottom: 12px; }
    .languages { margin-left: auto; }
}
@media (max-width: 800px) {
    .header .brand { width: 260px; padding-block: 20px; }
    .header { min-height: 140px; }
    .footer .brand { width: 260px; }
}
@media (max-width: 390px) {
    .header .brand { width: 230px; }
    .header { column-gap: 0; }
    .languages { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .project-art, .architecture, .button:hover { transform: none; }
}

/* Reading scale: labels remain secondary without becoming tiny. */
.header nav { font-size: 14px; gap: 24px; }
.languages { font-size: 12px; }
.eyebrow, .hero .eyebrow, .project-info .eyebrow { font-size: 12px; letter-spacing: .09em; }
.intro { font-size: 18px; line-height: 1.7; max-width: 510px; }
.button, .text-link { font-size: 15px; }
.heading > div > p, .services article > p, .project-info > p:not(.eyebrow),
.hardware-placeholder > p, .integration > .wrap > div > p:last-child,
.about > div > p:last-child, .contact-main p { font-size: 17px; line-height: 1.7; }
.services ul, .services article > a, .placeholder-note p, .chain p,
.project-info > a, .status, .contact-bottom { font-size: 14px; }
.project-info > p.tech { font-size: 12px; line-height: 1.8; word-spacing: 2px; }
.placeholder-note > span, .placeholder-badge { font-size: 11px; }
.chain h3 { font-size: 23px; }
.chain li > span { font-size: 13px; }
.footer p, .footer > div { font-size: 13px; }
.diagram-label { font-size: 10px; letter-spacing: .04em; }
.layer strong, .layer small, .number { font-size: 11px; }
.connector span { font-size: 9px; }
.art-label { font-size: 11px; }
.art-note { font-size: 10px; }
.hero-bottom { font-size: 11px; }
.preview { font-size: 10px; }
@media (max-width: 800px) {
    .header nav { font-size: 13px; gap: 12px; flex-wrap: wrap; }
    .intro { font-size: 17px; }
    h1 { font-size: clamp(50px, 10vw, 76px); }
    .hero .eyebrow { font-size: 11px; flex-wrap: wrap; }
    .heading > div > p, .services article > p, .project-info > p:not(.eyebrow),
    .hardware-placeholder > p, .integration > .wrap > div > p:last-child,
    .about > div > p:last-child, .contact-main p { font-size: 16px; }
    .project-info > p.tech { font-size: 12px; }
    .diagram-label { font-size: 9px; }
    .hero-bottom { font-size: 10px; }
    .hero-bottom > span:nth-child(2) { max-width: 125px; }
    .preview { font-size: 9px; flex-wrap: wrap; }
}
@media (max-width: 390px) {
    .header .brand { width: 220px; }
    .header nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .header nav a { padding-block: 12px; }
    .header nav a:nth-child(even) { text-align: right; }
    .layer { gap: 8px; padding-inline: 12px; }
    .layer strong, .layer small { font-size: 10px; }
}

/* Private multi-page routes share the same visual language and navigation. */
.header nav [aria-current="page"] { color: #a8caff; }
.header nav [aria-current="page"]::after { transform: scaleX(1); }
.page-view h1 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.09; letter-spacing: -.045em; margin: 0; }
.page-view .contact-main h1 { font-size: clamp(44px, 5.5vw, 76px); }
.all-work-link { padding-bottom: 80px; }
.page-next { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 40px 64px; border-top: 1px solid var(--line); }
.page-next p { font-size: 22px; letter-spacing: -.025em; }
.page-view .about { min-height: 60vh; }
@media (max-width: 800px) {
    .page-view h1 { font-size: clamp(36px, 7vw, 52px); }
    .page-next { flex-direction: column; align-items: flex-start; }
    .header nav { justify-content: flex-start; column-gap: 24px; }
}
@media (max-width: 390px) {
    .header nav { grid-template-columns: repeat(3, auto); gap: 0 12px; }
    .header nav a:nth-child(even) { text-align: left; }
}