/**

* ============================================================
* JOCKIE UTOMO PRASETIO
* PREMIUM INTERACTIVE TECHNOLOGY PORTFOLIO
*
* File    : assets/css/responsive.css
* Purpose : Responsive layout and adaptive interface behavior
* ============================================================
*
* Breakpoints:
*
* * 1200px : Compact desktop
* * 1024px : Tablet landscape
* * 900px  : Mobile navigation breakpoint
* * 768px  : Tablet portrait
* * 560px  : Mobile
* * 400px  : Small mobile
*
* ============================================================
  */

/* ============================================================
01. COMPACT DESKTOP
============================================================ */

@media (max-width: 1200px) {

```
:root {

    --container-width:
        1120px;

}


/* --------------------------------------------------------
   GLOBAL LAYOUT
   -------------------------------------------------------- */

.section {

    padding:
        110px 0;

}


/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.nav-menu {

    gap:
        24px;

}


.nav-actions {

    gap:
        14px;

}


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

.hero-layout {

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.8fr);

    gap:
        65px;

}


.hero-visual {

    min-height:
        540px;

}


/* --------------------------------------------------------
   ABOUT
   -------------------------------------------------------- */

.about-layout {

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(380px, 1fr);

    gap:
        75px;

}


.capability-map {

    min-height:
        550px;

}


.capability-map::before {

    width:
        340px;

    height:
        340px;

}


.capability-map::after {

    width:
        490px;

    height:
        490px;

}


/* --------------------------------------------------------
   AI
   -------------------------------------------------------- */

.ai-layout {

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(400px, 1fr);

    gap:
        75px;

}


.ai-visual {

    min-height:
        560px;

}


.ai-visual::before {

    width:
        340px;

    height:
        340px;

}


.ai-visual::after {

    width:
        500px;

    height:
        500px;

}


/* --------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------- */

.leadership-layout {

    gap:
        80px;

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-card {

    gap:
        60px;

    padding:
        60px;

}
```

}

/* ============================================================
02. TABLET LANDSCAPE
============================================================ */

@media (max-width: 1024px) {

```
:root {

    --header-height:
        76px;

}


/* --------------------------------------------------------
   GLOBAL LAYOUT
   -------------------------------------------------------- */

.container {

    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

}


.section {

    padding:
        100px 0;

}


.section-heading {

    margin-bottom:
        60px;

}


/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.nav-menu {

    gap:
        18px;

}


.nav-link {

    font-size:
        9px;

}


.nav-actions {

    gap:
        10px;

}


.button-small {

    padding:
        0 14px;

}


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

.hero {

    min-height:
        auto;

    padding-top:
        calc(
            var(--header-height)
            \+ 70px
        );

    padding-bottom:
        100px;

}


.hero-layout {

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

    gap:
        70px;

}


.hero-content {

    max-width:
        800px;

}


.hero-visual {

    width:
        100%;

    min-height:
        auto;

}


.command-center {

    max-width:
        720px;

    margin-inline:
        auto;

    transform:
        none;

}


.command-center:hover {

    transform:
        translateY(-5px);

}


.scroll-indicator {

    display:
        none;

}


/* --------------------------------------------------------
   ABOUT
   -------------------------------------------------------- */

.about-layout {

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

    gap:
        70px;

}


.about-story {

    max-width:
        780px;

}


.capability-map {

    width:
        min(
            100%,
            680px
        );

    min-height:
        620px;

    margin-inline:
        auto;

}


/* --------------------------------------------------------
   EXPERIENCE SUMMARY
   -------------------------------------------------------- */

.experience-summary {

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

}


.summary-card:nth-child(2) {

    border-right:
        0;

}


.summary-card:nth-child(-n + 2) {

    border-bottom:
        1px solid var(--color-border);

}


/* --------------------------------------------------------
   EXPERTISE
   -------------------------------------------------------- */

.expertise-grid {

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

}


.expertise-card:nth-child(3n + 1) {

    border-left:
        0;

}


.expertise-card:nth-child(2n + 1) {

    border-left:
        1px solid var(--color-border);

}


.expertise-card:nth-last-child(-n + 3) {

    border-bottom:
        0;

}


.expertise-card:nth-last-child(-n + 2) {

    border-bottom:
        1px solid var(--color-border);

}


/* --------------------------------------------------------
   AI
   -------------------------------------------------------- */

.ai-layout {

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

    gap:
        70px;

}


.ai-content {

    max-width:
        780px;

}


.ai-visual {

    width:
        min(
            100%,
            680px
        );

    min-height:
        620px;

    margin-inline:
        auto;

}


/* --------------------------------------------------------
   INFRASTRUCTURE
   -------------------------------------------------------- */

.infrastructure-layer {

    grid-template-columns:
        60px
        190px
        minmax(0, 1fr);

}


/* --------------------------------------------------------
   PROCESS
   -------------------------------------------------------- */

.process-grid {

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

}


.process-step:nth-child(3) {

    border-right:
        1px solid var(--color-border);

}


.process-step:nth-child(-n + 3) {

    border-bottom:
        0;

}


.process-step:nth-child(n + 4) {

    border-top:
        1px solid var(--color-border);

}


.process-step:nth-child(4) {

    border-left:
        1px solid var(--color-border);

}


/* --------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------- */

.leadership-layout {

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

    gap:
        60px;

}


.leadership-heading {

    max-width:
        800px;

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-card {

    grid-template-columns:
        minmax(0, 1fr)
        260px;

    gap:
        40px;

    padding:
        50px;

}


/* --------------------------------------------------------
   FOOTER
   -------------------------------------------------------- */

.footer-layout {

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

}


.footer-meta {

    grid-column:
        1 / -1;

    align-items:
        flex-start;

}
```

}

/* ============================================================
03. MOBILE NAVIGATION BREAKPOINT
============================================================ */

@media (max-width: 900px) {

```
/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.site-header {

    background:
        rgba(5, 11, 20, 0.88);

    border-bottom-color:
        var(--color-border);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

}


.navbar {

    position:
        relative;

}


.nav-menu {

    position:
        fixed;

    top:
        var(--header-height);

    right:
        0;

    bottom:
        0;

    left:
        0;

    z-index:
        999;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        flex-start;

    flex-direction:
        column;

    gap:
        0;

    padding:
        35px 24px 60px;

    overflow-y:
        auto;

    visibility:
        hidden;

    opacity:
        0;

    background:
        rgba(5, 11, 20, 0.98);

    transform:
        translateY(-15px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);

    pointer-events:
        none;

}


.nav-menu.is-open {

    visibility:
        visible;

    opacity:
        1;

    transform:
        translateY(0);

    pointer-events:
        auto;

}


.nav-link {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        58px;

    padding:
        0;

    color:
        var(--color-text);

    border-bottom:
        1px solid var(--color-border);

    font-size:
        12px;

}


.nav-link::after {

    display:
        none;

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--color-cyan);

}


.mobile-menu-toggle {

    display:
        block;

}


.mobile-menu-toggle.is-active span:first-child {

    top:
        20px;

    transform:
        rotate(45deg);

}


.mobile-menu-toggle.is-active span:last-child {

    top:
        20px;

    transform:
        rotate(-45deg);

}


/* --------------------------------------------------------
   HEADER ACTIONS
   -------------------------------------------------------- */

.nav-actions .button-small {

    display:
        none;

}


/* --------------------------------------------------------
   TIMELINE
   -------------------------------------------------------- */

.timeline::before {

    left:
        15px;

}


.timeline-progress {

    left:
        15px;

}


.timeline-item {

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

    gap:
        15px;

    padding-left:
        55px;

    padding-bottom:
        60px;

}


.timeline-marker {

    top:
        6px;

    left:
        9px;

}


.timeline-period {

    padding-top:
        0;

    text-align:
        left;

}


/* --------------------------------------------------------
   PROJECTS
   -------------------------------------------------------- */

.projects-grid {

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

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-card {

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

    gap:
        45px;

}


.contact-system {

    max-width:
        500px;

}
```

}

/* ============================================================
04. TABLET PORTRAIT
============================================================ */

@media (max-width: 768px) {

```
/* --------------------------------------------------------
   DESIGN TOKENS
   -------------------------------------------------------- */

:root {

    --header-height:
        70px;

}


/* --------------------------------------------------------
   GLOBAL LAYOUT
   -------------------------------------------------------- */

.container {

    width:
        min(
            calc(100% - 32px),
            var(--container-width)
        );

}


.section {

    padding:
        85px 0;

}


.section-heading {

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

    gap:
        8px;

    margin-bottom:
        50px;

}


.section-number {

    margin-top:
        0;

}


.section-heading h2,
.ai-content h2,
.leadership-heading h2,
.contact-content h2 {

    font-size:
        clamp(
            36px,
            9vw,
            54px
        );

}


/* --------------------------------------------------------
   LOADER
   -------------------------------------------------------- */

.loader-log {

    display:
        none;

}


/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.brand {

    font-size:
        16px;

}


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

.hero {

    padding-top:
        calc(
            var(--header-height)
            \+ 55px
        );

    padding-bottom:
        80px;

}


.hero-layout {

    gap:
        55px;

}


.hero-title {

    font-size:
        clamp(
            50px,
            13vw,
            76px
        );

}


.hero-description {

    font-size:
        16px;

}


.hero-actions {

    align-items:
        stretch;

}


.command-body {

    padding:
        28px;

}


/* --------------------------------------------------------
   ABOUT
   -------------------------------------------------------- */

.about-layout {

    gap:
        55px;

}


.about-story .about-lead {

    font-size:
        21px;

}


/* --------------------------------------------------------
   CAPABILITY MAP
   -------------------------------------------------------- */

.capability-map {

    min-height:
        520px;

}


.capability-map::before {

    width:
        300px;

    height:
        300px;

}


.capability-map::after {

    width:
        430px;

    height:
        430px;

}


.capability-center {

    width:
        150px;

    height:
        150px;

}


.capability-center strong {

    font-size:
        27px;

}


.capability-node {

    min-width:
        105px;

    padding:
        10px 14px;

    font-size:
        9px;

}


/* --------------------------------------------------------
   EXPERIENCE SUMMARY
   -------------------------------------------------------- */

.experience-summary {

    margin-top:
        75px;

}


.summary-card {

    min-height:
        160px;

    padding:
        25px;

}


.summary-card strong {

    font-size:
        36px;

}


/* --------------------------------------------------------
   TIMELINE
   -------------------------------------------------------- */

.timeline-card {

    padding:
        32px;

}


.timeline-index {

    font-size:
        45px;

}


/* --------------------------------------------------------
   EXPERTISE
   -------------------------------------------------------- */

.expertise-card {

    min-height:
        350px;

    padding:
        32px;

}


.expertise-number {

    margin-bottom:
        50px;

}


/* --------------------------------------------------------
   PROJECTS
   -------------------------------------------------------- */

.project-card {

    min-height:
        390px;

    padding:
        32px;

}


.project-header {

    margin-bottom:
        60px;

}


/* --------------------------------------------------------
   AI
   -------------------------------------------------------- */

.ai-visual {

    min-height:
        520px;

}


.ai-visual::before {

    width:
        300px;

    height:
        300px;

}


.ai-visual::after {

    width:
        430px;

    height:
        430px;

}


.ai-core {

    width:
        140px;

    height:
        140px;

    font-size:
        26px;

}


.ai-node {

    min-width:
        105px;

    min-height:
        40px;

    font-size:
        8px;

}


.ai-connection {

    width:
        145px;

}


/* --------------------------------------------------------
   INFRASTRUCTURE
   -------------------------------------------------------- */

.infrastructure-layer {

    grid-template-columns:
        45px
        minmax(0, 1fr);

    gap:
        12px 20px;

    padding:
        24px 20px;

}


.infrastructure-layer > span:last-child {

    grid-column:
        2;

}


.infrastructure-layer:hover {

    padding-left:
        25px;

}


/* --------------------------------------------------------
   PROCESS
   -------------------------------------------------------- */

.process-grid {

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

}


.process-step {

    min-height:
        170px;

}


.process-step:nth-child(3) {

    border-left:
        1px solid var(--color-border);

}


.process-step:nth-child(3),
.process-step:nth-child(4) {

    border-top:
        1px solid var(--color-border);

}


.process-step:nth-child(4) {

    border-left:
        0;

}


.process-step:nth-child(5) {

    border-top:
        1px solid var(--color-border);

    border-left:
        1px solid var(--color-border);

}


/* --------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------- */

.leadership-list {

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

}


/* --------------------------------------------------------
   TECHNOLOGY STACK
   -------------------------------------------------------- */

.technology-groups {

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

}


/* --------------------------------------------------------
   TERMINAL
   -------------------------------------------------------- */

.terminal-output {

    min-height:
        280px;

    padding:
        22px;

    font-size:
        11px;

}


.terminal-input-row {

    padding:
        0 22px;

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-section {

    padding-top:
        75px;

    padding-bottom:
        75px;

}


.contact-card {

    min-height:
        auto;

    padding:
        45px;

}


/* --------------------------------------------------------
   FOOTER
   -------------------------------------------------------- */

.site-footer {

    padding-top:
        60px;

}


.footer-layout {

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

    gap:
        30px;

}


.footer-meta {

    grid-column:
        auto;

}
```

}

/* ============================================================
05. MOBILE
============================================================ */

@media (max-width: 560px) {

```
/* --------------------------------------------------------
   GLOBAL LAYOUT
   -------------------------------------------------------- */

.container {

    width:
        min(
            calc(100% - 24px),
            var(--container-width)
        );

}


.section {

    padding:
        72px 0;

}


.section-heading {

    margin-bottom:
        42px;

}


.section-heading h2,
.ai-content h2,
.leadership-heading h2,
.contact-content h2 {

    font-size:
        clamp(
            32px,
            11vw,
            44px
        );

}


/* --------------------------------------------------------
   LOADER
   -------------------------------------------------------- */

.system-loader {

    padding:
        20px;

}


.loader-mark {

    margin-bottom:
        28px;

    font-size:
        26px;

}


/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.brand {

    font-size:
        14px;

}


.language-toggle {

    gap:
        2px;

}


.language-button {

    font-size:
        10px;

}


.nav-actions {

    gap:
        5px;

}


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

.hero {

    padding-top:
        calc(
            var(--header-height)
            \+ 45px
        );

    padding-bottom:
        70px;

}


.hero-title {

    margin-bottom:
        25px;

    font-size:
        clamp(
            44px,
            15vw,
            64px
        );

}


.hero-description {

    margin-bottom:
        25px;

    font-size:
        15px;

}


.hero-role {

    align-items:
        flex-start;

    flex-direction:
        column;

    gap:
        3px;

    margin-bottom:
        30px;

}


.hero-actions {

    flex-direction:
        column;

}


.hero-actions .button {

    width:
        100%;

}


/* --------------------------------------------------------
   COMMAND CENTER
   -------------------------------------------------------- */

.command-center {

    border-radius:
        var(--radius-medium);

}


.command-header {

    padding:
        0 15px;

}


.command-body {

    padding:
        22px;

}


.command-line {

    margin-bottom:
        22px;

    font-size:
        9px;

}


.system-item {

    gap:
        15px;

    font-size:
        9px;

}


.command-profile {

    margin-top:
        25px;

    padding:
        20px;

}


/* --------------------------------------------------------
   ABOUT
   -------------------------------------------------------- */

.about-story .about-lead {

    font-size:
        19px;

}


.about-story p {

    font-size:
        15px;

}


/* --------------------------------------------------------
   CAPABILITY MAP
   -------------------------------------------------------- */

.capability-map {

    min-height:
        auto;

    padding:
        0;

}


.capability-map::before,
.capability-map::after {

    display:
        none;

}


.capability-center {

    position:
        relative;

    top:
        auto;

    left:
        auto;

    width:
        150px;

    height:
        150px;

    margin:
        0 auto 30px;

    transform:
        none;

}


.capability-node,
.capability-node-1,
.capability-node-2,
.capability-node-3,
.capability-node-4,
.capability-node-5,
.capability-node-6 {

    position:
        relative;

    top:
        auto;

    right:
        auto;

    bottom:
        auto;

    left:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        48px;

    margin-bottom:
        10px;

    transform:
        translateY(20px)
        scale(0.98);

}


.capability-node.is-active,
.capability-node-1.is-active,
.capability-node-2.is-active,
.capability-node-3.is-active,
.capability-node-4.is-active,
.capability-node-5.is-active,
.capability-node-6.is-active {

    transform:
        translateY(0)
        scale(1);

}


.capability-node:hover,
.capability-node-1:hover,
.capability-node-2:hover,
.capability-node-3:hover,
.capability-node-4:hover,
.capability-node-5:hover,
.capability-node-6:hover {

    transform:
        translateY(-2px)
        scale(1);

}


/* --------------------------------------------------------
   EXPERIENCE SUMMARY
   -------------------------------------------------------- */

.experience-summary {

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

    margin-top:
        60px;

}


.summary-card,
.summary-card:nth-child(2) {

    min-height:
        145px;

    border-right:
        0;

    border-bottom:
        1px solid var(--color-border);

}


.summary-card:last-child {

    border-bottom:
        0;

}


/* --------------------------------------------------------
   TIMELINE
   -------------------------------------------------------- */

.timeline::before,
.timeline-progress {

    left:
        7px;

}


.timeline-item {

    padding-left:
        35px;

    padding-bottom:
        50px;

}


.timeline-marker {

    left:
        1px;

}


.timeline-card {

    padding:
        25px;

}


.timeline-index {

    top:
        18px;

    right:
        20px;

    font-size:
        36px;

}


.timeline-card h3 {

    padding-right:
        45px;

    font-size:
        21px;

}


/* --------------------------------------------------------
   EXPERTISE
   -------------------------------------------------------- */

.expertise-grid {

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

}


.expertise-card,
.expertise-card:nth-child(2n + 1),
.expertise-card:nth-child(3n + 1) {

    min-height:
        auto;

    padding:
        28px;

    border-top:
        1px solid var(--color-border);

    border-right:
        1px solid var(--color-border);

    border-bottom:
        0;

    border-left:
        1px solid var(--color-border);

}


.expertise-card:first-child {

    border-radius:
        var(--radius-medium)
        var(--radius-medium)
        0
        0;

}


.expertise-card:last-child {

    border-bottom:
        1px solid var(--color-border);

    border-radius:
        0
        0
        var(--radius-medium)
        var(--radius-medium);

}


.expertise-number {

    margin-bottom:
        35px;

}


.expertise-card p {

    min-height:
        auto;

}


/* --------------------------------------------------------
   PROJECTS
   -------------------------------------------------------- */

.project-card {

    min-height:
        auto;

    padding:
        28px;

}


.project-header {

    margin-bottom:
        45px;

}


.project-card h3 {

    font-size:
        23px;

}


/* --------------------------------------------------------
   AI
   -------------------------------------------------------- */

.ai-content p {

    font-size:
        15px;

}


.ai-visual {

    min-height:
        auto;

}


.ai-visual::before,
.ai-visual::after,
.ai-connection {

    display:
        none;

}


.ai-core {

    position:
        relative;

    top:
        auto;

    left:
        auto;

    width:
        140px;

    height:
        140px;

    margin:
        0 auto 30px;

    transform:
        none;

}


.ai-node,
.ai-node-1,
.ai-node-2,
.ai-node-3,
.ai-node-4,
.ai-node-5,
.ai-node-6 {

    position:
        relative;

    top:
        auto;

    right:
        auto;

    bottom:
        auto;

    left:
        auto;

    width:
        100%;

    min-height:
        48px;

    margin-bottom:
        10px;

    transform:
        translateY(20px)
        scale(0.98);

}


.ai-node.is-active,
.ai-node-1.is-active,
.ai-node-2.is-active,
.ai-node-3.is-active,
.ai-node-4.is-active,
.ai-node-5.is-active,
.ai-node-6.is-active {

    transform:
        translateY(0)
        scale(1);

}


/* --------------------------------------------------------
   INFRASTRUCTURE
   -------------------------------------------------------- */

.infrastructure-layer {

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

    gap:
        8px;

    padding:
        22px 15px;

}


.infrastructure-layer > span:last-child {

    grid-column:
        auto;

}


.infrastructure-layer:hover {

    padding-left:
        20px;

}


/* --------------------------------------------------------
   PROCESS
   -------------------------------------------------------- */

.process-grid {

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

}


.process-step,
.process-step:nth-child(3),
.process-step:nth-child(4),
.process-step:nth-child(5) {

    min-height:
        145px;

    border-top:
        1px solid var(--color-border);

    border-right:
        1px solid var(--color-border);

    border-bottom:
        0;

    border-left:
        1px solid var(--color-border);

}


.process-step:last-child {

    border-bottom:
        1px solid var(--color-border);

}


.process-number {

    margin-bottom:
        35px;

}


/* --------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------- */

.leadership-content p {

    font-size:
        15px;

}


/* --------------------------------------------------------
   TECHNOLOGY STACK
   -------------------------------------------------------- */

.technology-group {

    padding:
        28px;

}


/* --------------------------------------------------------
   TERMINAL
   -------------------------------------------------------- */

.terminal-header {

    padding:
        0 15px;

}


.terminal-output {

    min-height:
        260px;

    max-height:
        420px;

    padding:
        18px;

    font-size:
        10px;

}


.terminal-input-row {

    min-height:
        55px;

    padding:
        0 18px;

    font-size:
        10px;

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-card {

    gap:
        35px;

    padding:
        30px;

    border-radius:
        var(--radius-medium);

}


.contact-content p {

    margin:
        25px 0 30px;

    font-size:
        15px;

}


.contact-actions {

    flex-direction:
        column;

}


.contact-actions .button {

    width:
        100%;

}


.contact-system {

    min-height:
        180px;

    padding:
        25px;

}


/* --------------------------------------------------------
   FOOTER
   -------------------------------------------------------- */

.footer-links {

    flex-direction:
        column;

    gap:
        12px;

}
```

}

/* ============================================================
06. SMALL MOBILE
============================================================ */

@media (max-width: 400px) {

```
/* --------------------------------------------------------
   HEADER
   -------------------------------------------------------- */

.brand {

    font-size:
        12px;

}


.language-toggle > span {

    display:
        none;

}


.language-button {

    padding:
        3px;

}


.mobile-menu-toggle {

    width:
        38px;

}


/* --------------------------------------------------------
   HERO
   -------------------------------------------------------- */

.hero-title {

    font-size:
        clamp(
            40px,
            16vw,
            54px
        );

}


.eyebrow {

    font-size:
        8px;

}


/* --------------------------------------------------------
   COMMAND CENTER
   -------------------------------------------------------- */

.command-header > span {

    max-width:
        150px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.command-body {

    padding:
        18px;

}


.system-item {

    align-items:
        flex-start;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        10px 0;

}


/* --------------------------------------------------------
   TIMELINE
   -------------------------------------------------------- */

.timeline-card {

    padding:
        22px;

}


.timeline-card h3 {

    padding-right:
        0;

}


.timeline-index {

    position:
        static;

    display:
        block;

    margin-bottom:
        10px;

    font-size:
        26px;

}


/* --------------------------------------------------------
   PROJECTS
   -------------------------------------------------------- */

.project-header {

    align-items:
        flex-start;

    flex-direction:
        column;

    gap:
        8px;

}


/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */

.contact-card {

    padding:
        24px;

}
```

}

/* ============================================================
07. TOUCH DEVICES
============================================================ */

@media (hover: none) and (pointer: coarse) {

```
.button:hover,
.command-center:hover,
.timeline-card:hover,
.expertise-card:hover,
.project-card:hover,
.capability-node:hover,
.infrastructure-layer:hover {

    transform:
        none;

}


.command-center {

    transform:
        none;

}


.nav-link,
.button,
.language-button,
.mobile-menu-toggle {

    -webkit-tap-highlight-color:
        transparent;

}
```

}

/* ============================================================
08. LANDSCAPE MOBILE
============================================================ */

@media (
max-width: 900px
)
and (
max-height: 560px
)
and (
orientation: landscape
) {

```
.hero {

    padding-top:
        calc(
            var(--header-height)
            \+ 40px
        );

}


.nav-menu {

    padding-top:
        20px;

    padding-bottom:
        30px;

}


.nav-link {

    min-height:
        48px;

}
```

}

/* ============================================================
09. REDUCED MOTION RESPONSIVE SAFETY
============================================================ */

@media (prefers-reduced-motion: reduce) {

```
.nav-menu,
.mobile-menu-toggle span {

    transition:
        none !important;

}


.capability-node,
.capability-node-1,
.capability-node-2,
.capability-node-3,
.capability-node-4,
.capability-node-5,
.capability-node-6,
.ai-node,
.ai-node-1,
.ai-node-2,
.ai-node-3,
.ai-node-4,
.ai-node-5,
.ai-node-6 {

    opacity:
        1 !important;

}
```

}

/* ============================================================
10. PRINT SAFETY
============================================================ */

@media print {

```
.system-loader,
.scroll-progress,
.site-header,
.scroll-indicator,
.interactive-terminal {

    display:
        none !important;

}


body {

    color:
        #000000;

    background:
        #ffffff;

}


.section {

    padding:
        30px 0;

}


.reveal,
.hero-content,
.hero-visual,
.capability-node,
.ai-node {

    visibility:
        visible !important;

    opacity:
        1 !important;

    transform:
        none !important;

}
```

}