@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root,
html[data-bs-theme="light"] {
    --home-ink: #20262e;
    --home-muted: #66717d;
    --home-paper: #f7f4ee;
    --home-surface: #fffdf8;
    --home-surface-strong: #ece8df;
    --home-accent: #ff755f;
    --home-accent-strong: #e85d4b;
    --home-mint: #b9ded3;
    --home-yellow: #f4cf70;
    --home-line: rgba(32, 38, 46, .13);
    --home-shadow: 7px 8px 0 rgba(32, 38, 46, .1);
    --home-shadow-hover: 10px 12px 0 rgba(32, 38, 46, .14);
}

html[data-bs-theme="dark"] {
    --home-ink: #f4f0e8;
    --home-muted: #b6b7b1;
    --home-paper: #171b1b;
    --home-surface: #212727;
    --home-surface-strong: #293131;
    --home-accent: #ff917e;
    --home-accent-strong: #ffad61;
    --home-mint: #83bdb0;
    --home-yellow: #eacb71;
    --home-line: rgba(244, 240, 232, .16);
    --home-shadow: 7px 8px 0 rgba(0, 0, 0, .28);
    --home-shadow-hover: 10px 12px 0 rgba(0, 0, 0, .4);
}

body {
    color: var(--home-ink);
    background-color: var(--home-paper);
    background-image: linear-gradient(var(--home-line) 1px, transparent 1px), linear-gradient(90deg, var(--home-line) 1px, transparent 1px);
    background-size: 36px 36px;
    font-family: 'DM Sans', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 8%, rgba(185, 222, 211, .42), transparent 25%), radial-gradient(circle at 88% 72%, rgba(244, 207, 112, .18), transparent 22%);
    z-index: -1;
}

.nav-shell {
    top: .75rem;
    margin: .75rem auto;
    max-width: min(1180px, calc(100% - 2rem));
    background: color-mix(in srgb, var(--home-paper) 88%, transparent) !important;
    border: 2px solid var(--home-ink) !important;
    border-radius: 1.25rem !important;
    box-shadow: 4px 5px 0 var(--home-ink) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.navbar-brand, .nav-link, .mode-toggle, .btn, .badge {
    font-family: 'DM Sans', sans-serif;
}

.navbar-brand {
    color: var(--home-ink) !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.navbar-brand::before, .logo::before { display: none; }

.nav-link {
    color: var(--home-muted) !important;
    font-size: .88rem;
    font-weight: 700;
}

.nav-link:hover, .nav-link:focus-visible, .nav-link.active {
    color: var(--home-ink) !important;
    background: var(--home-mint) !important;
}

.mode-toggle {
    color: var(--home-ink) !important;
    background: var(--home-surface) !important;
    border: 2px solid var(--home-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 3px 0 var(--home-ink);
}

.mode-toggle:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--home-ink); }

.hero {
    min-height: min(760px, 88vh);
    display: flex;
    align-items: center;
    padding-top: 8rem !important;
    padding-bottom: 6rem !important;
}

.hero .container { position: relative; }

.hero-name, .section-title, h1, h2, h3 {
    color: var(--home-ink) !important;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -.045em;
}

.hero-name {
    max-width: 760px;
    font-size: clamp(3.2rem, 8vw, 7.4rem);
    line-height: .94;
    font-weight: 700;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.hero-name span { color: var(--home-accent); }
.hero-role { color: var(--home-ink) !important; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; max-width: 560px; }
.hero-role::before { display: none; }
.hero-intro, .section-subtitle { color: var(--home-muted) !important; line-height: 1.7; }
.hero-intro { max-width: 570px; font-size: 1.08rem; }

.eyebrow {
    color: var(--home-ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.eyebrow-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .5rem; border-radius: 50%; background: var(--home-accent); box-shadow: 2px 2px 0 var(--home-ink); }

.btn {
    border-radius: 999px !important;
    border-width: 2px !important;
    font-weight: 700;
    padding: .75rem 1.15rem;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn-primary { color: #fff !important; background: var(--home-accent-strong) !important; border-color: var(--home-ink) !important; box-shadow: 3px 4px 0 var(--home-ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--home-accent) !important; color: #fff !important; transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--home-ink); }
.btn-outline-primary { color: var(--home-ink) !important; border-color: var(--home-ink) !important; background: var(--home-surface) !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible { color: var(--home-ink) !important; border-color: var(--home-ink) !important; background: var(--home-mint) !important; transform: translate(-2px, -2px); box-shadow: 3px 4px 0 var(--home-ink); }

.profile-card, .custom-card {
    color: var(--home-ink);
    background: var(--home-surface) !important;
    border: 2px solid var(--home-ink) !important;
    border-radius: 1.25rem !important;
    box-shadow: var(--home-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.profile-card { position: relative; padding: 1rem !important; transform: rotate(2deg); }
.profile-card::before { content: 'HELLO'; position: absolute; top: -1.15rem; right: 1.25rem; padding: .35rem .65rem; border: 2px solid var(--home-ink); border-radius: 999px; background: var(--home-yellow); color: var(--home-ink); font: 700 .7rem 'Space Grotesk', sans-serif; transform: rotate(-7deg); }
.profile-card img { aspect-ratio: 4 / 3; border: 0 !important; border-radius: .85rem !important; filter: saturate(.9); }
.profile-card p { line-height: 1.45; }
.profile-card-label { margin: .35rem 0 .55rem; color: var(--home-accent-strong); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.section-wrap { padding-top: 7rem; padding-bottom: 7rem; }
.section-surface { background: rgba(255, 253, 248, .48); }
html[data-bs-theme="dark"] .section-surface { background: rgba(33, 39, 39, .42); }
.section-alt { background: transparent; }
.section-title { font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1; }
.section-title::before { display: none; }

.custom-card { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.custom-card:hover { border-color: var(--home-ink) !important; transform: translate(-3px, -5px) !important; box-shadow: var(--home-shadow-hover) !important; }
.custom-card h3 { letter-spacing: -.02em; }
.custom-card h3 i { color: var(--home-accent-strong) !important; }
.skill-badge { color: var(--home-ink) !important; background: var(--home-mint) !important; border: 2px solid var(--home-ink) !important; font-weight: 700; }

#skills .custom-card { border-top: 7px solid var(--home-accent) !important; }
#skills .col:nth-child(2) .custom-card { border-top-color: var(--home-mint) !important; }
#skills .col:nth-child(3) .custom-card { border-top-color: var(--home-yellow) !important; }

#projects .row { --bs-gutter-x: 1.6rem; --bs-gutter-y: 1.6rem; }
#projects article { padding: 1.15rem !important; }
#projects article h3 { font-size: 2rem; }
.project-shot { min-height: 245px; border: 2px solid var(--home-ink) !important; border-radius: .9rem !important; background: var(--home-surface-strong) !important; }
.project-shot img { border-radius: .7rem !important; }
#projects article:first-child .project-shot { background: var(--home-mint) !important; }
#projects article:nth-child(2) .project-shot { background: var(--home-yellow) !important; }

#education .custom-card, #certificates .custom-card, #contact .custom-card { box-shadow: 4px 5px 0 var(--home-ink) !important; }
.form-control { color: var(--home-ink) !important; background: var(--home-surface) !important; border: 2px solid var(--home-ink) !important; border-radius: .75rem !important; }
.form-control::placeholder { color: var(--home-muted); }
.form-control:focus { border-color: var(--home-accent-strong) !important; box-shadow: 3px 3px 0 var(--home-accent-strong) !important; }
.contact-link a, .footer a { color: var(--home-accent-strong) !important; }
.footer { color: var(--home-muted); background: var(--home-surface-strong); border-top: 2px solid var(--home-ink) !important; }
.scroll-top { color: var(--home-ink); background: var(--home-yellow); border: 2px solid var(--home-ink); box-shadow: 3px 4px 0 var(--home-ink); }
.scroll-top:hover { color: var(--home-ink); background: var(--home-accent); transform: translateY(-4px); }

@media (max-width: 991.98px) {
    .hero { padding-top: 6rem !important; }
    .profile-card { max-width: 500px; margin: 1.5rem auto 0; }
}

@media (max-width: 575.98px) {
    .nav-shell { max-width: calc(100% - 1rem); }
    .hero-name { font-size: clamp(3rem, 16vw, 4.5rem); }
    .section-wrap { padding-top: 5rem; padding-bottom: 5rem; }
    .profile-card { transform: rotate(1deg); }
    .project-shot { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}