/* ============================================================
JOCKIE UTOMO PRASETIO
PREMIUM INTERACTIVE TECHNOLOGY PORTFOLIO

File    : assets/css/style.css
Purpose : Main visual system, layout, components, and animations
============================================================ */

/* ============================================================
01. DESIGN TOKENS
============================================================ */

:root {

```
--color-background: #050b14;
--color-background-soft: #07111e;
--color-surface: #0a1625;
--color-surface-light: #0d1a2b;

--color-primary: #2e7dff;
--color-primary-light: #5d9cff;
--color-cyan: #38d9ff;
--color-gold: #d8ad58;

--color-text-light: #f4f7fb;
--color-text: #b6c2d1;
--color-text-muted: #718096;

--color-border: rgba(255, 255, 255, 0.1);
--color-border-light: rgba(255, 255, 255, 0.16);

--container-width: 1280px;
--header-height: 84px;

--radius-small: 8px;
--radius-medium: 16px;
--radius-large: 28px;

--transition-fast: 180ms ease;
--transition-normal: 350ms ease;
--transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);

--font-primary:
    Inter,
    Poppins,
    "Segoe UI",
    Arial,
    sans-serif;

--font-mono:
    "JetBrains Mono",
    "Fira Code",
    Consolas,
    monospace;
```

}

/* ============================================================
02. RESET
============================================================ */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: auto;
background: var(--color-background);
}

body {
margin: 0;

```
overflow-x: hidden;

color: var(--color-text);
background: var(--color-background);

font-family: var(--font-primary);
font-size: 16px;
line-height: 1.7;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
```

}

body.menu-open {
overflow: hidden;
}

img,
svg {
display: block;

```
max-width: 100%;
```

}

button,
input {
color: inherit;

```
font: inherit;
```

}

button {
border: 0;

```
cursor: pointer;
```

}

a {
color: inherit;

```
text-decoration: none;
```

}

p,
h1,
h2,
h3,
h4 {
margin-top: 0;
}

::selection {
color: var(--color-background);
background: var(--color-cyan);
}

/* ============================================================
03. ACCESSIBILITY
============================================================ */

.skip-link {
position: fixed;
top: 15px;
left: 15px;
z-index: 99999;

```
padding: 10px 18px;

color: var(--color-background);
background: var(--color-cyan);

font-weight: 700;

transform: translateY(-200%);

transition: transform var(--transition-fast);
```

}

.skip-link:focus {
transform: translateY(0);
}

:focus-visible {
outline: 2px solid var(--color-cyan);
outline-offset: 4px;
}

/* ============================================================
04. GLOBAL LAYOUT
============================================================ */

.container {
width: min(
calc(100% - 48px),
var(--container-width)
);

```
margin-inline: auto;
```

}

.section {
position: relative;

```
padding: 130px 0;
```

}

.section-heading {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 25px;

```
margin-bottom: 75px;
```

}

.section-number,
.section-kicker {
color: var(--color-cyan);

```
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
```

}

.section-number {
margin-top: 13px;
}

.section-kicker {
display: block;

```
margin-bottom: 14px;
```

}

.section-heading h2,
.ai-content h2,
.leadership-heading h2,
.contact-content h2 {
margin-bottom: 0;

```
color: var(--color-text-light);

font-size: clamp(42px, 5vw, 68px);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1.05;
```

}

/* ============================================================
05. BACKGROUND
============================================================ */

.site-background {
position: fixed;
inset: 0;
z-index: -10;

```
overflow: hidden;

pointer-events: none;
```

}

.background-grid {
position: absolute;
inset: 0;

```
opacity: 0.28;

background-image:
    linear-gradient(
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
    );

background-size: 70px 70px;

mask-image:
    linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
```

}

.background-glow {
position: absolute;
top: -300px;
left: 50%;

```
width: 1000px;
height: 800px;

background:
    radial-gradient(
        circle,
        rgba(46, 125, 255, 0.12),
        transparent 65%
    );

transform: translateX(-50%);
```

}

/* ============================================================
06. SYSTEM LOADER
============================================================ */

.system-loader {
position: fixed;
inset: 0;
z-index: 10000;

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

padding: 24px;

visibility: visible;
opacity: 1;

background: var(--color-background);

transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow);
```

}

.system-loader.is-complete {
opacity: 0;
}

.system-loader.is-hidden {
visibility: hidden;

```
pointer-events: none;
```

}

.loader-content {
width: min(100%, 500px);
}

.loader-mark {
margin-bottom: 35px;

```
color: var(--color-text-light);

font-family: var(--font-mono);
font-size: 32px;
font-weight: 700;
```

}

.loader-mark span {
color: var(--color-cyan);
}

.loader-status,
.loader-percentage,
.loader-log {
font-family: var(--font-mono);
}

.loader-status {
margin-bottom: 15px;

```
color: var(--color-text);

font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
```

}

.loader-progress {
position: relative;

```
width: 100%;
height: 2px;

overflow: hidden;

background: rgba(255, 255, 255, 0.08);
```

}

.loader-progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;

```
width: 0;

background:
    linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-cyan)
    );

box-shadow:
    0 0 18px rgba(56, 217, 255, 0.6);

transition: width 100ms linear;
```

}

.loader-percentage {
display: block;

```
margin-top: 12px;

color: var(--color-cyan);

font-size: 11px;
text-align: right;
```

}

.loader-log {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;

```
margin-top: 35px;

color: var(--color-text-muted);

font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
```

}

/* ============================================================
07. SCROLL PROGRESS
============================================================ */

.scroll-progress {
position: fixed;
top: 0;
left: 0;
z-index: 10001;

```
width: 0;
height: 2px;

background:
    linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-cyan)
    );

box-shadow:
    0 0 12px rgba(56, 217, 255, 0.5);

pointer-events: none;
```

}

/* ============================================================
08. HEADER
============================================================ */

.site-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;

```
height: var(--header-height);

border-bottom: 1px solid transparent;

transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    backdrop-filter var(--transition-normal);
```

}

.site-header.is-scrolled {
background: rgba(5, 11, 20, 0.82);

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

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

}

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

```
height: 100%;
```

}

.brand {
display: inline-flex;
align-items: center;
gap: 5px;

```
color: var(--color-text-light);

font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
```

}

.brand-symbol {
color: var(--color-cyan);
}

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

.nav-link {
position: relative;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;

transition: color var(--transition-fast);
```

}

.nav-link::after {
position: absolute;
right: 0;
bottom: -10px;
left: 0;

```
height: 1px;

content: "";

background: var(--color-cyan);

transform: scaleX(0);
transform-origin: right;

transition: transform var(--transition-normal);
```

}

.nav-link:hover,
.nav-link.active {
color: var(--color-text-light);
}

.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1);
transform-origin: left;
}

.nav-actions {
display: flex;
align-items: center;
gap: 18px;
}

.language-toggle {
display: flex;
align-items: center;
gap: 5px;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 10px;
```

}

.language-button {
padding: 4px;

```
color: var(--color-text-muted);
background: transparent;

font-family: var(--font-mono);
font-size: 11px;

transition: color var(--transition-fast);
```

}

.language-button:hover,
.language-button.active {
color: var(--color-cyan);
}

.mobile-menu-toggle {
position: relative;

```
display: none;

width: 42px;
height: 42px;

padding: 0;

background: transparent;
```

}

.mobile-menu-toggle span {
position: absolute;
left: 10px;

```
width: 22px;
height: 1px;

background: var(--color-text-light);

transition: transform var(--transition-normal);
```

}

.mobile-menu-toggle span:first-child {
top: 17px;
}

.mobile-menu-toggle span:last-child {
top: 23px;
}

/* ============================================================
09. BUTTONS
============================================================ */

.button {
position: relative;

```
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;

min-height: 52px;

padding: 0 25px;

overflow: hidden;

border: 1px solid transparent;
border-radius: var(--radius-small);

font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;

transition:
    color var(--transition-normal),
    background var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
```

}

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

.button-primary {
color: #ffffff;
background:
linear-gradient(
135deg,
var(--color-primary),
#1557c8
);

```
box-shadow:
    0 14px 35px rgba(46, 125, 255, 0.2);
```

}

.button-primary:hover {
box-shadow:
0 18px 45px rgba(46, 125, 255, 0.32);
}

.button-secondary,
.button-outline {
color: var(--color-text-light);
background: rgba(255, 255, 255, 0.025);

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

}

.button-secondary:hover,
.button-outline:hover {
border-color: rgba(56, 217, 255, 0.4);

```
background: rgba(56, 217, 255, 0.05);
```

}

.button-small {
min-height: 40px;

```
padding: 0 18px;

font-size: 9px;
```

}

/* ============================================================
10. HERO
============================================================ */

.hero {
position: relative;

```
display: flex;
align-items: center;

min-height: 100vh;

padding-top: var(--header-height);
```

}

.hero-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(430px, 0.85fr);
gap: 90px;
align-items: center;
}

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

.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;

```
margin-bottom: 30px;

color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
```

}

.eyebrow-dot {
width: 7px;
height: 7px;

```
border-radius: 50%;

background: var(--color-cyan);

box-shadow:
    0 0 15px rgba(56, 217, 255, 0.8);
```

}

.hero-title {
margin-bottom: 30px;

```
color: var(--color-text-light);

font-size: clamp(58px, 6.4vw, 92px);
font-weight: 700;
letter-spacing: -0.06em;
line-height: 0.96;
```

}

.hero-title-small,
.hero-title-highlight {
display: block;
}

.hero-title-small {
color: var(--color-text-light);
}

.hero-title-highlight {
color: transparent;

```
background:
    linear-gradient(
        90deg,
        var(--color-primary-light),
        var(--color-cyan)
    );

background-clip: text;
-webkit-background-clip: text;
```

}

.hero-description {
max-width: 650px;

```
margin-bottom: 30px;

color: var(--color-text);

font-size: 17px;
line-height: 1.8;
```

}

.hero-role {
display: flex;
align-items: center;
gap: 10px;

```
min-height: 28px;

margin-bottom: 38px;

font-family: var(--font-mono);
font-size: 11px;
```

}

.hero-role-label {
color: var(--color-text-muted);
}

.hero-role-value {
color: var(--color-cyan);

```
transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    filter var(--transition-normal);
```

}

.hero-role-value.is-changing {
opacity: 0;

```
filter: blur(4px);

transform: translateY(8px);
```

}

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

.hero-visual {
position: relative;

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

min-height: 600px;
```

}

/* ============================================================
11. HERO MOTION CONTRACT
============================================================ */

.hero-content.reveal,
.hero-visual.reveal {
opacity: 0;

```
transform: translateY(35px);
```

}

.motion-ready .hero-content.reveal.is-visible,
.motion-ready .hero-visual.reveal.is-visible {
opacity: 1;

```
transform: translateY(0);

transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
```

}

.motion-ready .hero-visual.reveal.is-visible {
transition-delay: 120ms;
}

/* ============================================================
12. COMMAND CENTER
============================================================ */

.command-center {
position: relative;

```
width: 100%;
max-width: 580px;

overflow: hidden;

border: 1px solid var(--color-border);
border-radius: var(--radius-large);

background:
    linear-gradient(
        145deg,
        rgba(13, 26, 43, 0.92),
        rgba(5, 11, 20, 0.86)
    );

box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.35);

transform:
    perspective(1200px)
    rotateY(-4deg)
    rotateX(2deg);

transition:
    transform var(--transition-slow),
    border-color var(--transition-normal);
```

}

.command-center:hover {
border-color: rgba(56, 217, 255, 0.28);

```
transform:
    perspective(1200px)
    rotateY(0)
    rotateX(0)
    translateY(-5px);
```

}

.command-header {
display: flex;
align-items: center;
justify-content: space-between;

```
min-height: 54px;

padding: 0 20px;

color: var(--color-text-muted);

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

font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.06em;
```

}

.command-dots,
.terminal-dots {
display: flex;
gap: 6px;
}

.command-dots span,
.terminal-dots span {
width: 7px;
height: 7px;

```
border-radius: 50%;

background: var(--color-text-muted);
```

}

.command-dots span:nth-child(1),
.terminal-dots span:nth-child(1) {
background: #ff5f57;
}

.command-dots span:nth-child(2),
.terminal-dots span:nth-child(2) {
background: #febc2e;
}

.command-dots span:nth-child(3),
.terminal-dots span:nth-child(3) {
background: #28c840;
}

.command-body {
position: relative;

```
padding: 35px;
```

}

.command-line {
display: flex;
gap: 10px;

```
margin-bottom: 30px;

color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 11px;
```

}

.command-prefix {
color: var(--color-cyan);
}

.system-item {
display: flex;
align-items: center;
justify-content: space-between;

```
min-height: 42px;

color: var(--color-text);

border-bottom: 1px solid rgba(255, 255, 255, 0.055);

font-family: var(--font-mono);
font-size: 11px;
```

}

.system-status {
position: relative;

```
padding-left: 16px;

color: var(--color-text-muted);

text-transform: uppercase;
```

}

.system-status::before {
position: absolute;
top: 50%;
left: 0;

```
width: 6px;
height: 6px;

content: "";

border-radius: 50%;

background: var(--color-text-muted);

transform: translateY(-50%);
```

}

.system-status.active {
color: #6ce59c;
}

.system-status.active::before {
background: #6ce59c;

```
box-shadow:
    0 0 10px rgba(108, 229, 156, 0.7);
```

}

.command-profile {
margin-top: 35px;

```
padding: 25px;

border: 1px solid rgba(56, 217, 255, 0.15);
border-radius: var(--radius-medium);

background: rgba(56, 217, 255, 0.035);
```

}

.command-profile-label {
display: block;

```
margin-bottom: 10px;

color: var(--color-cyan);

font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.1em;
```

}

.command-profile strong {
display: block;

```
margin-bottom: 8px;

color: var(--color-text-light);

font-size: 18px;
```

}

.command-profile > span:last-child {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.06em;
```

}

.command-orbit {
position: absolute;

```
border: 1px solid rgba(56, 217, 255, 0.08);
border-radius: 50%;

pointer-events: none;
```

}

.orbit-one {
top: -120px;
right: -100px;

```
width: 300px;
height: 300px;
```

}

.orbit-two {
right: -150px;
bottom: -180px;

```
width: 400px;
height: 400px;
```

}

/* ============================================================
13. SCROLL INDICATOR
============================================================ */

.scroll-indicator {
position: absolute;
bottom: 35px;
left: 50%;

```
display: flex;
align-items: center;
flex-direction: column;
gap: 12px;

color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;

transform: translateX(-50%);
```

}

.scroll-line {
width: 1px;
height: 45px;

```
background:
    linear-gradient(
        to bottom,
        var(--color-cyan),
        transparent
    );
```

}

/* ============================================================
14. GENERAL REVEAL CONTRACT
============================================================ */

.reveal {
opacity: 0;

```
transform: translateY(35px);

transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
```

}

.reveal.is-visible {
opacity: 1;

```
transform: translateY(0);
```

}

/* ============================================================
15. ABOUT
============================================================ */

.about-section {
background:
linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.012),
transparent
);
}

.about-layout {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1fr);
gap: 110px;
align-items: center;
}

.about-story .about-lead {
margin-bottom: 25px;

```
color: var(--color-text-light);

font-size: 24px;
font-weight: 500;
line-height: 1.55;
```

}

.about-story p {
color: var(--color-text);

```
font-size: 16px;
```

}

/* ============================================================
16. CAPABILITY MAP
============================================================ */

.capability-map {
position: relative;

```
min-height: 600px;
```

}

.capability-map::before,
.capability-map::after {
position: absolute;
top: 50%;
left: 50%;

```
content: "";

border: 1px solid rgba(56, 217, 255, 0.1);
border-radius: 50%;

transform: translate(-50%, -50%);
```

}

.capability-map::before {
width: 380px;
height: 380px;
}

.capability-map::after {
width: 540px;
height: 540px;
}

.capability-center {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;

```
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

width: 180px;
height: 180px;

border: 1px solid rgba(56, 217, 255, 0.28);
border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(46, 125, 255, 0.18),
        rgba(5, 11, 20, 0.96)
    );

box-shadow:
    0 0 70px rgba(46, 125, 255, 0.14);

transform: translate(-50%, -50%);
```

}

.capability-center strong {
color: var(--color-text-light);

```
font-family: var(--font-mono);
font-size: 32px;
```

}

.capability-center span {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
```

}

.capability-node {
position: absolute;
z-index: 6;

```
min-width: 125px;

padding: 12px 18px;

opacity: 0;

color: var(--color-text);

border: 1px solid var(--color-border);
border-radius: 999px;

background: rgba(10, 22, 37, 0.9);

font-family: var(--font-mono);
font-size: 10px;
text-align: center;

transform: scale(0.85);

transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    color var(--transition-normal),
    border-color var(--transition-normal);
```

}

.capability-node.is-active {
opacity: 1;

```
transform: scale(1);
```

}

.capability-node:hover {
color: var(--color-cyan);

```
border-color: rgba(56, 217, 255, 0.4);

transform: scale(1.06);
```

}

.capability-node-1 {
top: 8%;
left: 50%;

```
transform: translateX(-50%) scale(0.85);
```

}

.capability-node-1.is-active {
transform: translateX(-50%) scale(1);
}

.capability-node-1:hover {
transform: translateX(-50%) scale(1.06);
}

.capability-node-2 {
top: 27%;
right: 3%;
}

.capability-node-3 {
right: 8%;
bottom: 17%;
}

.capability-node-4 {
bottom: 7%;
left: 50%;

```
transform: translateX(-50%) scale(0.85);
```

}

.capability-node-4.is-active {
transform: translateX(-50%) scale(1);
}

.capability-node-4:hover {
transform: translateX(-50%) scale(1.06);
}

.capability-node-5 {
bottom: 17%;
left: 8%;
}

.capability-node-6 {
top: 27%;
left: 3%;
}

/* ============================================================
17. EXPERIENCE SUMMARY
============================================================ */

.experience-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);

```
margin-top: 100px;

overflow: hidden;

border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
```

}

.summary-card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

```
min-height: 190px;

padding: 35px;

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

text-align: center;
```

}

.summary-card:last-child {
border-right: 0;
}

.summary-card strong {
margin-bottom: 5px;

```
color: var(--color-text-light);

font-size: 42px;
letter-spacing: -0.04em;
```

}

.summary-card span {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
```

}

/* ============================================================
18. TIMELINE
============================================================ */

.timeline {
position: relative;
}

.timeline::before {
position: absolute;
top: 0;
bottom: 0;
left: 215px;

```
width: 1px;

content: "";

background: var(--color-border);
```

}

.timeline-progress {
position: absolute;
top: 0;
left: 215px;
z-index: 2;

```
width: 1px;
height: 0;

background:
    linear-gradient(
        to bottom,
        var(--color-primary),
        var(--color-cyan)
    );

box-shadow:
    0 0 12px rgba(56, 217, 255, 0.45);

pointer-events: none;
```

}

.timeline-item {
position: relative;

```
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 90px;

padding-bottom: 75px;
```

}

.timeline-item:last-child {
padding-bottom: 0;
}

.timeline-marker {
position: absolute;
top: 10px;
left: 209px;
z-index: 4;

```
width: 13px;
height: 13px;

border: 2px solid var(--color-background);
border-radius: 50%;

background: var(--color-text-muted);

box-shadow:
    0 0 0 1px var(--color-border);

transition:
    background var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
```

}

.timeline-item.is-active .timeline-marker {
background: var(--color-cyan);

```
box-shadow:
    0 0 0 1px var(--color-cyan),
    0 0 20px rgba(56, 217, 255, 0.5);

transform: scale(1.15);
```

}

.timeline-period {
padding-top: 5px;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.07em;
text-align: right;
```

}

.timeline-card {
position: relative;

```
padding: 40px;

overflow: hidden;

border: 1px solid var(--color-border);
border-radius: var(--radius-medium);

background:
    linear-gradient(
        145deg,
        rgba(13, 26, 43, 0.7),
        rgba(7, 15, 26, 0.65)
    );

transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    background var(--transition-normal),
    box-shadow var(--transition-normal);
```

}

.timeline-card:hover {
border-color: rgba(56, 217, 255, 0.28);

```
background:
    linear-gradient(
        145deg,
        rgba(13, 26, 43, 0.9),
        rgba(7, 15, 26, 0.82)
    );

box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.22);

transform: translateY(-4px);
```

}

.timeline-index {
position: absolute;
top: 25px;
right: 28px;

```
color: rgba(255, 255, 255, 0.045);

font-family: var(--font-mono);
font-size: 55px;
font-weight: 700;
```

}

.timeline-card h3 {
position: relative;

```
margin-bottom: 5px;

color: var(--color-text-light);

font-size: 24px;
```

}

.timeline-subtitle {
display: block;

```
margin-bottom: 20px;

color: var(--color-cyan);

font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.07em;
```

}

.timeline-card h4 {
margin-bottom: 15px;

```
color: var(--color-text);

font-size: 15px;
font-weight: 600;
```

}

.timeline-card p {
margin-bottom: 25px;

```
color: var(--color-text-muted);

font-size: 14px;
```

}

/* ============================================================
19. TECHNOLOGY TAGS
============================================================ */

.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
}

.tech-tag {
padding: 5px 9px;

```
color: var(--color-text-muted);

border: 1px solid var(--color-border);
border-radius: 4px;

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

font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.04em;
```

}

/* ============================================================
20. EXPERTISE
============================================================ */

.expertise-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.expertise-card {
position: relative;

```
min-height: 390px;

padding: 40px;

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

transition:
    background var(--transition-normal),
    transform var(--transition-normal);
```

}

.expertise-card:nth-child(3n + 1) {
border-left: 1px solid var(--color-border);
}

.expertise-card:nth-last-child(-n + 3) {
border-bottom: 1px solid var(--color-border);
}

.expertise-card:hover {
z-index: 2;

```
background: rgba(56, 217, 255, 0.025);

transform: translateY(-5px);
```

}

.expertise-number {
display: block;

```
margin-bottom: 65px;

color: var(--color-cyan);

font-family: var(--font-mono);
font-size: 10px;
```

}

.expertise-card h3 {
margin-bottom: 18px;

```
color: var(--color-text-light);

font-size: 23px;
```

}

.expertise-card p {
min-height: 100px;

```
margin-bottom: 28px;

color: var(--color-text-muted);

font-size: 14px;
```

}

/* ============================================================
21. PROJECTS
============================================================ */

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

.project-card {
position: relative;

```
min-height: 430px;

padding: 38px;

overflow: hidden;

border: 1px solid var(--color-border);
border-radius: var(--radius-medium);

background:
    linear-gradient(
        145deg,
        rgba(13, 26, 43, 0.65),
        rgba(7, 15, 26, 0.6)
    );

transition:
    transform var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
```

}

.project-card::after {
position: absolute;
right: -120px;
bottom: -120px;

```
width: 260px;
height: 260px;

content: "";

opacity: 0;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(46, 125, 255, 0.16),
        transparent 70%
    );

transition: opacity var(--transition-normal);
```

}

.project-card:hover {
border-color: rgba(56, 217, 255, 0.3);

```
box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.25);

transform: translateY(-6px);
```

}

.project-card:hover::after {
opacity: 1;
}

.project-header {
position: relative;
z-index: 2;

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

margin-bottom: 80px;
```

}

.project-number {
color: var(--color-cyan);

```
font-family: var(--font-mono);
font-size: 10px;
```

}

.project-category {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.06em;
text-transform: uppercase;
```

}

.project-card h3,
.project-card p,
.project-card .tech-tags {
position: relative;
z-index: 2;
}

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

```
color: var(--color-text-light);

font-size: 27px;
```

}

.project-card p {
margin-bottom: 30px;

```
color: var(--color-text-muted);

font-size: 14px;
```

}

/* ============================================================
22. AI SECTION
============================================================ */

.ai-section {
overflow: hidden;

```
background:
    linear-gradient(
        135deg,
        rgba(46, 125, 255, 0.035),
        transparent 60%
    );
```

}

.ai-layout {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(450px, 1fr);
gap: 110px;
align-items: center;
}

.ai-content p {
max-width: 650px;

```
margin: 30px 0;

color: var(--color-text);

font-size: 16px;
```

}

.ai-tags {
max-width: 650px;
}

/* ============================================================
23. AI VISUAL
============================================================ */

.ai-visual {
position: relative;

```
min-height: 620px;
```

}

.ai-visual::before,
.ai-visual::after {
position: absolute;
top: 50%;
left: 50%;

```
content: "";

border: 1px solid rgba(56, 217, 255, 0.08);
border-radius: 50%;

transform: translate(-50%, -50%);
```

}

.ai-visual::before {
width: 380px;
height: 380px;
}

.ai-visual::after {
width: 560px;
height: 560px;
}

.ai-core {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;

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

width: 160px;
height: 160px;

color: var(--color-text-light);

border: 1px solid rgba(56, 217, 255, 0.35);
border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(46, 125, 255, 0.22),
        rgba(5, 11, 20, 0.96)
    );

box-shadow:
    0 0 90px rgba(46, 125, 255, 0.18);

font-family: var(--font-mono);
font-size: 30px;
font-weight: 700;

transform: translate(-50%, -50%);
```

}

.ai-node {
position: absolute;
z-index: 5;

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

min-width: 125px;
min-height: 45px;

padding: 10px 15px;

opacity: 0;

color: var(--color-text);

border: 1px solid var(--color-border);
border-radius: 999px;

background: rgba(10, 22, 37, 0.92);

font-family: var(--font-mono);
font-size: 9px;
text-align: center;

transform: scale(0.85);

transition:
    opacity var(--transition-slow),
    transform var(--transition-slow),
    border-color var(--transition-normal),
    color var(--transition-normal);
```

}

.ai-node.is-active {
opacity: 1;

```
transform: scale(1);
```

}

.ai-node-1 {
top: 8%;
left: 50%;

```
transform: translateX(-50%) scale(0.85);
```

}

.ai-node-1.is-active {
transform: translateX(-50%) scale(1);
}

.ai-node-2 {
top: 28%;
right: 2%;
}

.ai-node-3 {
right: 10%;
bottom: 17%;
}

.ai-node-4 {
bottom: 7%;
left: 50%;

```
transform: translateX(-50%) scale(0.85);
```

}

.ai-node-4.is-active {
transform: translateX(-50%) scale(1);
}

.ai-node-5 {
bottom: 17%;
left: 10%;
}

.ai-node-6 {
top: 28%;
left: 2%;
}

.ai-connection {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;

```
width: 180px;
height: 1px;

opacity: 0.25;

background:
    linear-gradient(
        90deg,
        var(--color-cyan),
        transparent
    );

transform-origin: left center;
```

}

.ai-connection-1 {
transform: rotate(-90deg);
}

.ai-connection-2 {
transform: rotate(-30deg);
}

.ai-connection-3 {
transform: rotate(30deg);
}

.ai-connection-4 {
transform: rotate(90deg);
}

.ai-connection-5 {
transform: rotate(150deg);
}

.ai-connection-6 {
transform: rotate(210deg);
}

/* ============================================================
24. INFRASTRUCTURE
============================================================ */

.infrastructure-stack {
border-top: 1px solid var(--color-border);
}

.infrastructure-layer {
display: grid;
grid-template-columns: 70px 220px minmax(0, 1fr);
gap: 30px;
align-items: center;

```
min-height: 95px;

padding: 20px 30px;

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

transition:
    padding-left var(--transition-normal),
    background var(--transition-normal);
```

}

.infrastructure-layer:hover {
padding-left: 40px;

```
background: rgba(56, 217, 255, 0.025);
```

}

.layer-index {
color: var(--color-cyan);

```
font-family: var(--font-mono);
font-size: 10px;
```

}

.infrastructure-layer strong {
color: var(--color-text-light);

```
font-size: 17px;
```

}

.infrastructure-layer > span:last-child {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 10px;
```

}

/* ============================================================
25. PROCESS
============================================================ */

.process-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

.process-step {
min-height: 190px;

```
padding: 30px;

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

}

.process-step:first-child {
border-left: 1px solid var(--color-border);
}

.process-number {
display: block;

```
margin-bottom: 55px;

color: var(--color-cyan);

font-family: var(--font-mono);
font-size: 10px;
```

}

.process-step strong {
color: var(--color-text-light);

```
font-size: 16px;
```

}

/* ============================================================
26. LEADERSHIP
============================================================ */

.leadership-section {
background: rgba(255, 255, 255, 0.012);
}

.leadership-layout {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 120px;
}

.leadership-content p {
margin-bottom: 40px;

```
color: var(--color-text);

font-size: 17px;
```

}

.leadership-list {
display: grid;
grid-template-columns: repeat(2, 1fr);

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

}

.leadership-list span {
min-height: 75px;

```
padding: 22px;

color: var(--color-text);

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

font-family: var(--font-mono);
font-size: 10px;
```

}

/* ============================================================
27. TECHNOLOGY STACK
============================================================ */

.technology-groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.technology-group {
padding: 35px;

```
border: 1px solid var(--color-border);
border-radius: var(--radius-medium);

background: rgba(255, 255, 255, 0.012);
```

}

.technology-group h3 {
margin-bottom: 25px;

```
color: var(--color-text-light);

font-size: 18px;
```

}

.technology-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.technology-list span {
padding: 7px 10px;

```
color: var(--color-text-muted);

border: 1px solid var(--color-border);
border-radius: 5px;

font-family: var(--font-mono);
font-size: 9px;
```

}

/* ============================================================
28. TERMINAL
============================================================ */

.interactive-terminal {
overflow: hidden;

```
border: 1px solid var(--color-border);
border-radius: var(--radius-medium);

background: rgba(3, 8, 15, 0.95);

box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.3);
```

}

.terminal-header {
display: flex;
align-items: center;
justify-content: space-between;

```
min-height: 50px;

padding: 0 20px;

color: var(--color-text-muted);

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

font-family: var(--font-mono);
font-size: 9px;
```

}

.terminal-output {
min-height: 320px;
max-height: 500px;

```
padding: 28px;

overflow-y: auto;

color: var(--color-text);

font-family: var(--font-mono);
font-size: 12px;
line-height: 1.8;
```

}

.terminal-line {
min-height: 22px;
}

.terminal-command {
color: var(--color-text-light);
}

.terminal-command-prompt,
.terminal-key {
color: var(--color-cyan);
}

.terminal-error {
color: #ff7b72;
}

.terminal-success {
color: #6ce59c;
}

.terminal-muted {
color: var(--color-text-muted);
}

.terminal-heading {
color: var(--color-text-light);

```
font-weight: 700;
letter-spacing: 0.08em;
```

}

.terminal-list {
margin: 5px 0;
}

.terminal-list-marker {
color: var(--color-cyan);
}

.terminal-input-row {
display: flex;
align-items: center;
gap: 10px;

```
min-height: 58px;

padding: 0 28px;

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

font-family: var(--font-mono);
font-size: 11px;
```

}

.terminal-prompt {
flex: 0 0 auto;

```
color: var(--color-cyan);
```

}

.terminal-input {
flex: 1;

```
min-width: 0;

padding: 0;

color: var(--color-text-light);
background: transparent;

border: 0;
outline: 0;

caret-color: var(--color-cyan);
```

}

/* ============================================================
29. CONTACT
============================================================ */

.contact-section {
padding-top: 100px;
padding-bottom: 100px;
}

.contact-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 80px;
align-items: center;

```
min-height: 450px;

padding: 75px;

overflow: hidden;

border: 1px solid rgba(56, 217, 255, 0.16);
border-radius: var(--radius-large);

background:
    linear-gradient(
        135deg,
        rgba(46, 125, 255, 0.1),
        rgba(7, 15, 26, 0.88)
    );

box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.22);
```

}

.contact-content p {
max-width: 680px;

```
margin: 30px 0 35px;

color: var(--color-text);

font-size: 16px;
```

}

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

.contact-system {
position: relative;

```
display: flex;
justify-content: center;
flex-direction: column;

min-height: 210px;

padding: 35px;

border: 1px solid var(--color-border);
border-radius: var(--radius-medium);

background: rgba(5, 11, 20, 0.55);
```

}

.contact-system-label {
margin-bottom: 20px;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.1em;
```

}

.contact-system strong {
margin-bottom: 8px;

```
color: #6ce59c;

font-family: var(--font-mono);
font-size: 13px;
```

}

.contact-system > span:not(.contact-system-label):not(.status-indicator) {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 9px;
```

}

.status-indicator {
position: absolute;
top: 25px;
right: 25px;

```
width: 8px;
height: 8px;

border-radius: 50%;

background: #6ce59c;

box-shadow:
    0 0 15px rgba(108, 229, 156, 0.8);
```

}

/* ============================================================
30. FOOTER
============================================================ */

.site-footer {
padding: 75px 0 40px;

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

}

.footer-layout {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 50px;
align-items: start;
}

.footer-brand {
display: inline-block;

```
margin-bottom: 8px;

color: var(--color-text-light);

font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
```

}

.footer-layout p {
margin-bottom: 0;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 8px;
```

}

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

.footer-links a {
color: var(--color-text-muted);

```
font-family: var(--font-mono);
font-size: 9px;

transition: color var(--transition-fast);
```

}

.footer-links a:hover {
color: var(--color-cyan);
}

.footer-meta {
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 8px;

```
color: var(--color-text-muted);

font-family: var(--font-mono);
font-size: 8px;
```

}

.footer-status {
display: flex;
align-items: center;
gap: 7px;
}

.footer-status i {
width: 6px;
height: 6px;

```
border-radius: 50%;

background: #6ce59c;

box-shadow:
    0 0 10px rgba(108, 229, 156, 0.6);
```

}

/* ============================================================
31. PARALLAX CONTRACT
============================================================ */

[data-parallax] {
transform:
translateY(
var(--parallax-offset, 0)
);
}

/* ============================================================
32. SCROLLBAR
============================================================ */

::-webkit-scrollbar {
width: 9px;
}

::-webkit-scrollbar-track {
background: var(--color-background);
}

::-webkit-scrollbar-thumb {
background: #1a2b40;

```
border: 2px solid var(--color-background);
border-radius: 999px;
```

}

::-webkit-scrollbar-thumb:hover {
background: #28415f;
}

/* ============================================================
33. REDUCED MOTION
============================================================ */

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

```
*,
*::before,
*::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
}

.reveal,
.hero-content.reveal,
.hero-visual.reveal,
.capability-node,
.ai-node {
    opacity: 1 !important;

    transform: none !important;
}

.capability-node-1,
.capability-node-4,
.ai-node-1,
.ai-node-4 {
    transform: translateX(-50%) !important;
}

[data-parallax] {
    transform: none !important;
}
```

}

/* ============================================================
34. NOSCRIPT / SAFETY FALLBACK
============================================================ */

.no-js .system-loader {
display: none;
}

.no-js .reveal {
opacity: 1;

```
transform: none;
```

}