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

:root {
    --bg: #FAFAF8;
    --text: #0A0A0A;
    --text-sec: #A09C96;
    --accent: #E8503A;
    --mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--mono); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 2.5rem 3rem; }

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.name {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    min-height: 2.5em;
}

.name-text { color: var(--text); }
.cursor {
    display: inline-block;
    width: 0.55em;
    height: 0.85em;
    background: var(--accent);
    vertical-align: middle;
    margin-left: 2px;
    animation: blink 0.65s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding-top: 2rem; border-top: 1px solid rgba(10,10,10,0.07); opacity: 0; }
.col-left { max-width: 380px; }
.tagline { font-size: 0.78rem; font-weight: 300; color: var(--text-sec); line-height: 1.7; }
.col-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.projects-label { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-sec); margin-bottom: 0.25rem; }
.plink { font-size: 0.78rem; font-weight: 400; text-decoration: none; color: var(--text); transition: color 0.25s; }
.plink:hover { color: var(--accent); }
.plink::after { content: ' \2192'; opacity: 0.3; transition: opacity 0.25s; }
.plink:hover::after { opacity: 1; }
.cta-btn { display: inline-block; font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.05em; text-decoration: none; color: #fff; background: var(--accent); padding: 0.65rem 1.4rem; margin-top: 0.85rem; transition: background 0.3s; }
.cta-btn:hover { background: #D04430; }
footer { font-size: 0.55rem; color: var(--text-sec); margin-top: 1.25rem; opacity: 0; }

@media (max-width: 768px) {
    .page { padding: 2rem 1.5rem; }
    .bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .col-right { text-align: left; align-items: flex-start; }
}