:root {
--bg:        #111312;
--surface:   #181a19;
--border:    #232624;
--teal:      #2ec4b0;
--teal-dim:  #1a7a6e;
--gold:      #d8b856;
--white:     #f0f2f1;
--muted:     #cdd8d4;
--faint:     #353937;
--font-sans: 'Rubik', sans-serif;
--font-mono: 'Montserrat', monospace;
}

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

html { scroll-behavior: smooth; }

body {
background: var(--bg);
color: var(--white);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

/* ── GRID UTILS ── */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 32px;
}

/* ── SCROLL REVEAL ── */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
.gold-dot{
    color: var(--gold);
    font-weight: 800;
}
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
border-bottom: 1px solid var(--border);
background: rgba(17,19,18,0.9);
backdrop-filter: blur(8px);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
max-width: 1140px;
margin: 0 auto;
padding: 0 32px;
}
.nav-logo {
font-size: 25px;
font-weight: 500;
color: var(--white);
text-decoration: none;
letter-spacing: -0.01em;
}
logo-word{
    font-family: 'Nunito Sans';
}
logo-word.bold{
    font-weight: 900;
}
logo-word.semi{
    font-weight: 600;
}
cc{
    font-family:'Montserrat';
    letter-spacing: -0.075em;
    font-weight: 800;
    color: var(--teal);
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }

/* ── HERO ── */
#hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 60px;
border-bottom: 1px solid var(--border);
font-family: var(--font-mono);
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 340px;
gap: 80px;
align-items: center;
padding: 100px 0;
width: 100%;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-weight: 600;
font-size: 11px;
color: var(--teal);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 28px;
}
.hero-tag::before {
content: '';
display: block;
width: 24px;
height: 1px;
background: var(--teal);
}
.hero-headline {
font-size: clamp(38px, 5vw, 62px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--white);
margin-bottom: 20px;
}
.hero-sub {
font-size: 18px;
color: var(--muted);
font-weight: 300;
max-width: 520px;
line-height: 1.65;
margin-bottom: 40px;
font-family: var(--font-sans);
}
.hero-sub strong { color: var(--white); font-weight: 500; }
.hero-actions {
display: flex;
gap: 14px;
align-items: center;
}
.btn-primary {
display: inline-block;
padding: 13px 28px;
background: var(--teal);
color: #0d1514;
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.01em;
transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #36d9c4; transform: translateY(-1px); }
.btn-secondary {
display: inline-block;
padding: 13px 28px;
border: 1px solid var(--faint);
color: var(--muted);
font-size: 14px;
font-weight: 400;
text-decoration: none;
transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: var(--muted); color: var(--white); }

.hero-meta {
border-left: 1px solid var(--border);
padding-left: 14px;
display: flex;
align-items: center;
gap: 14px;
}
.left-domain{
    font-size: 24px;
    display: flex;
    flex-direction: column;
}
.right-domain{
    display: flex;
    flex-direction: column;
gap: 32px;
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-stat-num {
font-size: 28px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.02em;
}
.hero-stat-num span { color: var(--teal); }
.hero-stat-label {
font-size: 12px;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero-domains {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.hero-domain-item,.hero-domain-ux {
background: transparent;
border: 1px solid var(--border);
padding: 10px;
border-radius: 5px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--white);
}
.hero-domain-ux{
    font-size: 24px;
    font-weight: 800;
}
.hero-domain-item::before {
content: '→';
color: var(--teal);
font-size: 11px;
}
.hero-domain-ux::after {
content: '→';
color: var(--teal);
font-size: 11px;
}

/* ── SECTION SHELL ── */
section {
border-bottom: 1px solid var(--border);
padding: 100px 0;
}
.section-header {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
margin-bottom: 64px;
align-items: start;
}
.section-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
letter-spacing: 0.1em;
text-transform: uppercase;
padding-top: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.section-label::before {
content: '';
display: block;
width: 18px;
height: 1px;
background: var(--teal);
}
.section-title {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--white);
}

/* ── CAPABILITIES ── */
.caps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.cap-card {
background: var(--bg);
padding: 40px 36px;
transition: background 0.2s;
}
.cap-card:hover { background: var(--surface); }
.cap-card:hover > .cap-index{
    color: var(--teal);
    font-weight: 800;
}
.cap-index {
font-family: var(--font-mono);
font-size: 11px;
color: var(--faint);
margin-bottom: 24px;
letter-spacing: 0.06em;
transition: color 0.2s;
}
.cap-title {
font-size: 20px;
font-weight: 600;
color: var(--white);
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.cap-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 28px;
}
.cap-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
}
.cap-items li {
font-size: 13px;
color: var(--muted);
padding-left: 14px;
position: relative;
}
.cap-items li::before {
content: '—';
position: absolute;
left: 0;
color: var(--faint);
font-size: 11px;
top: 1px;
}

/* ── WORK ── */
.work-grid {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.work-card {
background: var(--bg);
display: grid;
grid-template-columns: 1fr 320px;
gap: 0;
transition: background 0.2s;
}
.work-card:hover { background: var(--surface); }
.work-content {
padding: 48px 48px 48px 40px;
border-right: 1px solid var(--border);
}
.work-type {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 16px;
}
.work-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--white);
margin-bottom: 8px;
}
.work-context {
font-size: 14px;
color: var(--muted);
margin-bottom: 28px;
}
.work-rows {
display: flex;
flex-direction: column;
gap: 16px;
}
.work-row-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--faint);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.work-row-val {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
.work-row-val.outcome {
color: var(--white);
}
.work-outcome-tag {
display: inline-block;
padding: 3px 10px;
border: 1px solid var(--teal-dim);
color: var(--teal);
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: 0.05em;
}
.work-image {
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
position: relative;
overflow: hidden;
min-height: 260px;
}
.work-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--faint);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
}
.work-image-icon {
width: 40px;
height: 40px;
border: 1px solid var(--faint);
display: flex;
align-items: center;
justify-content: center;
}
.work-image-icon svg { width: 16px; height: 16px; stroke: var(--faint); fill: none; stroke-width: 1.5; }

/* ── HOW I WORK ── */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-bottom: 40px;
}
.process-card {
background: var(--bg);
padding: 36px 28px;
}
.process-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gold);
letter-spacing: 0.06em;
margin-bottom: 16px;
}
.process-title {
font-size: 15px;
font-weight: 600;
color: var(--white);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.process-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.65;
}
.process-principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.principle {
background: var(--surface);
padding: 28px 32px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.principle-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
margin-top: 8px;
flex-shrink: 0;
}
.principle-text {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
.principle-text strong { color: var(--white); font-weight: 500; }

/* ── TOOLS ── */
.tools-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
}
.tool-group {
background: var(--bg);
padding: 36px 32px;
}
.tool-group-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--teal);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.tool-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.tool-list li {
font-size: 14px;
color: var(--muted);
display: flex;
align-items: center;
gap: 10px;
}
.tool-list li::before {
content: '';
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--faint);
flex-shrink: 0;
}

/* ── CTA ── */
#cta {
border-bottom: none;
}
.cta-inner {
display: grid;
grid-template-columns: 1fr 340px;
gap: 80px;
align-items: center;
}
.cta-headline {
font-size: clamp(30px, 4vw, 50px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--white);
margin-bottom: 20px;
}
.cta-sub {
font-size: 16px;
color: var(--muted);
line-height: 1.65;
max-width: 480px;
margin-bottom: 36px;
}
.cta-aside {
border-left: 1px solid var(--border);
padding-left: 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
.cta-detail {
display: flex;
flex-direction: column;
gap: 3px;
}
.cta-detail-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--faint);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.cta-detail-val {
font-size: 14px;
color: var(--muted);
}
.cta-detail-val a {
color: var(--teal);
text-decoration: none;
}
.cta-detail-val a:hover { text-decoration: underline; }

/* ── FOOTER ── */
footer {
padding: 32px 0;
border-top: 1px solid var(--border);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy {
font-size: 12px;
color: var(--faint);
font-family: var(--font-mono);
}
.footer-links {
display: flex;
gap: 24px;
list-style: none;
}
.footer-links a {
font-size: 12px;
color: var(--faint);
text-decoration: none;
font-family: var(--font-mono);
transition: color 0.2s;
}
.footer-links a:hover { color: var(--muted); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.hero-inner, .cta-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.hero-meta, .cta-aside {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 32px;
flex-direction: row;
flex-wrap: wrap;
}
.section-header { grid-template-columns: 1fr; gap: 16px; }
.caps-grid { grid-template-columns: 1fr; }
.work-card { grid-template-columns: 1fr; }
.work-image { min-height: 200px; border-right: none; border-top: 1px solid var(--border); }
.process-grid { grid-template-columns: 1fr 1fr; }
.process-principles { grid-template-columns: 1fr; }
.tools-layout { grid-template-columns: 1fr; }
.nav-links { display: none; }
}