/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --accent: #4f7cff;
    --accent-glow: rgba(79, 124, 255, 0.3);
    --border: rgba(255, 255, 255, 0.08);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated Grid Background */
.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(79, 124, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 124, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.1em;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
}

.hero-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 80px var(--accent-glow);
}

.hero-tagline {
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 1rem;
}

.hero-socials {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
}

.social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.social-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-2px);
}

/* NYC Skyline */
.nyc-skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200"><path fill="%23151515" d="M0,200 L0,180 L30,180 L30,150 L50,150 L50,180 L80,180 L80,120 L100,120 L100,100 L120,100 L120,120 L140,120 L140,80 L150,80 L150,60 L160,60 L160,80 L170,80 L170,120 L190,120 L190,140 L220,140 L220,100 L240,100 L240,80 L250,80 L250,50 L260,50 L260,30 L270,30 L270,20 L280,20 L280,30 L290,30 L290,50 L300,50 L300,80 L310,80 L310,100 L330,100 L330,140 L360,140 L360,90 L380,90 L380,70 L400,70 L400,90 L420,90 L420,130 L450,130 L450,100 L470,100 L470,60 L480,60 L480,40 L490,40 L490,60 L500,60 L500,100 L520,100 L520,130 L550,130 L550,80 L570,80 L570,50 L590,50 L590,30 L600,30 L600,10 L610,10 L610,30 L620,30 L620,50 L640,50 L640,80 L660,80 L660,130 L700,130 L700,90 L720,90 L720,60 L740,60 L740,40 L760,40 L760,60 L780,60 L780,90 L800,90 L800,130 L840,130 L840,100 L860,100 L860,70 L880,70 L880,100 L900,100 L900,130 L940,130 L940,80 L960,80 L960,50 L980,50 L980,30 L990,30 L990,50 L1000,50 L1000,80 L1020,80 L1020,130 L1060,130 L1060,100 L1080,100 L1080,140 L1120,140 L1120,160 L1160,160 L1160,180 L1200,180 L1200,200 Z"/></svg>') center bottom / cover no-repeat;
    opacity: 0.6;
    pointer-events: none;
}

/* Sections */
.section {
    position: relative;
    z-index: 1;
    padding: 8rem 2rem;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 3rem;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Bio Section */
.bio-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 700px;
}

/* CV Section */
.cv {
    background: var(--bg-secondary);
}

.cv-timeline {
    position: relative;
    padding-left: 2rem;
}

.cv-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.cv-item {
    position: relative;
    padding-bottom: 3rem;
}

.cv-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
    transform: translateX(-50%);
}

.cv-date {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.cv-details h3 {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.cv-company {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.cv-details p:last-child {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Articles Section */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.article-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.article-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.article-date {
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.article-card h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.article-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.article-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.article-link:hover {
    opacity: 0.8;
}

/* Contact Section */
.contact {
    background: var(--bg-secondary);
    text-align: center;
}

.contact-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto 2rem;
    text-align: left;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-secondary);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
    padding: 1rem 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit:hover {
    background: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.form-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-status {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 8px;
    display: none;
}

.form-status.success {
    display: block;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.form-status.error {
    display: block;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

.contact-alt {
    margin-top: 2rem;
    font-size: 0.95rem;
}

.contact-email-link {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-email-link:hover {
    opacity: 0.8;
}

/* Article Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.95);
    z-index: 200;
    overflow-y: auto;
    padding: 2rem;
}

.modal.active {
    display: block;
}

.modal-content {
    max-width: 700px;
    margin: 4rem auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--text-primary);
}

#article-content h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    margin-bottom: 1rem;
}

#article-content h2 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
    color: var(--text-primary);
}

#article-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.8;
}

#article-content ul,
#article-content ol {
    color: var(--text-secondary);
    margin: 1rem 0;
    padding-left: 1.5rem;
}

#article-content li {
    margin-bottom: 0.5rem;
}

#article-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

#article-content strong {
    color: var(--text-primary);
}

#article-content code {
    background: var(--bg-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9em;
}

#article-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.articles-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* Footer */
.footer {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .hero-name {
        letter-spacing: 0.1em;
    }
    
    .hero-tagline {
        font-size: 0.9rem;
        letter-spacing: 0.15em;
    }
    
    .section {
        padding: 5rem 1.5rem;
    }
    
    .cv-timeline {
        padding-left: 1.5rem;
    }
    
    .cv-item::before {
        left: -1.5rem;
    }
}