* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, .11), transparent 32rem),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f7f7f2 100%);
    letter-spacing: 0;
}
a { text-decoration: none; }
.site-nav {
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(17, 24, 39, .08);
}
.navbar-brand { color: #111827; }
.nav-link { color: #374151; font-weight: 600; font-size: .94rem; }
.nav-link:hover { color: var(--primary); }
.contact-pill {
    background: #111827;
    color: #fff !important;
    border-radius: 999px;
    padding: .55rem 1rem !important;
}
.hero-section { min-height: 92vh; display: flex; align-items: center; padding: 8rem 0 5rem; }
.eyebrow, .section-kicker {
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
}
h1 { font-size: clamp(3rem, 8vw, 6.7rem); line-height: .96; font-weight: 800; margin: 1rem 0 1.4rem; max-width: 860px; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; font-weight: 800; margin-bottom: 1rem; }
h3 { font-size: 1.14rem; font-weight: 800; }
.hero-text { color: #4b5563; font-size: 1.16rem; line-height: 1.8; max-width: 690px; margin-bottom: 2rem; }
.btn { border-radius: 999px; padding: .78rem 1.25rem; font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: #111827; --bs-btn-hover-border-color: #111827; }
.profile-frame {
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    background: linear-gradient(145deg, #111827, var(--primary));
    box-shadow: 0 30px 80px rgba(17, 24, 39, .18);
    padding: .8rem;
}
.profile-frame img, .profile-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 1.4rem; }
.profile-placeholder {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.2));
}
.profile-placeholder span { font-size: clamp(5rem, 15vw, 9rem); font-weight: 800; }
.section { padding: 6.5rem 0; }
.soft-section { background: rgba(255,255,255,.58); border-block: 1px solid rgba(17,24,39,.06); }
.section-head { max-width: 760px; margin-bottom: 2.4rem; }
.muted, .feature-card p, .project-card p, .timeline-item p { color: #5b6472; line-height: 1.75; }
.info-card, .feature-card, .project-card, .contact-form {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 1.2rem;
    box-shadow: 0 18px 50px rgba(17,24,39,.07);
}
.info-card { padding: 1.4rem; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; }
.info-card small { color: #6b7280; font-weight: 700; }
.info-card strong { font-size: 1.35rem; }
.feature-card { padding: 1.6rem; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover, .project-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(17,24,39,.12); }
.feature-card i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 13%, white);
    color: var(--primary);
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
}
.project-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.project-image { aspect-ratio: 16 / 10; background: linear-gradient(145deg, #111827, var(--primary)); display: grid; place-items: center; color: #fff; }
.project-image img { width: 100%; height: 100%; object-fit: cover; }
.project-image span { font-size: 4rem; font-weight: 800; }
.link-arrow { color: var(--primary); font-weight: 800; }
.timeline { display: grid; gap: 1rem; }
.timeline-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: 1rem;
}
.timeline-period { color: var(--primary); font-weight: 800; }
.contact-section { background: #111827; color: #fff; }
.contact-section h2, .contact-section .section-kicker { color: #fff; }
.contact-list { display: grid; gap: .9rem; margin-top: 1.5rem; }
.contact-list a, .contact-list span { color: #e5e7eb; display: flex; gap: .75rem; align-items: center; }
.contact-form { padding: 1.6rem; color: #111827; }
.contact-form label { width: 100%; font-weight: 700; color: #374151; }
.form-control, .form-select { border-radius: .85rem; padding: .8rem .95rem; border-color: #d1d5db; margin-top: .45rem; }
.social-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: #111827;
    background: #f3f4f6;
}
.footer { background: #fff; border-top: 1px solid rgba(17,24,39,.08); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
    .hero-section { min-height: auto; padding-top: 7rem; }
    .navbar-collapse { padding: 1rem 0; }
}
@media (max-width: 767px) {
    .section { padding: 4.4rem 0; }
    .timeline-item { grid-template-columns: 1fr; gap: .5rem; }
    .profile-frame { border-radius: 1.4rem; }
    .btn-lg { font-size: 1rem; }
}