:root {
    --bg: #0d0f10;
    --surface: #151819;
    --surface-soft: #1b1f20;
    --text: #edece7;
    --muted: #989d9c;
    --accent: #9fb6c6;
    --accent-deep: #344b59;
    --line: rgba(237, 236, 231, .16);
    --radius: 24px;
    --radius-small: 14px;
    --radius-pill: 999px;
    --sans: "Plus Jakarta Sans", Arial, sans-serif;
    --mono: "Plus Jakarta Sans", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg);
    background-image: radial-gradient(circle at 78% 3%, rgba(79,112,132,.13), transparent 28%);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { width: min(1480px, calc(100% - 64px)); margin-inline: auto; }
.analytics-frame { display: none; visibility: hidden; }
.eyebrow { color: var(--muted); font: 500 .72rem var(--sans); letter-spacing: .06em; text-transform: uppercase; }

.site-header { position: sticky; z-index: 50; top: 0; padding-block: 12px; background: linear-gradient(rgba(13,15,16,.9), rgba(13,15,16,.64)); backdrop-filter: blur(16px); }
.nav { min-height: 70px; padding-inline: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(21,24,25,.82); box-shadow: 0 18px 60px rgba(0,0,0,.25); backdrop-filter: blur(18px); }
.brand { justify-self: start; font-weight: 600; letter-spacing: -.035em; }
.nav-links { display: flex; gap: 34px; font-size: .76rem; }
.nav-contact { justify-self: end; display: flex; gap: 10px; padding: 10px 15px; border: 1px solid rgba(159,182,198,.42); border-radius: var(--radius-pill); background: rgba(159,182,198,.08); box-shadow: inset 0 0 20px rgba(159,182,198,.06); font-size: .72rem; font-weight: 500; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--accent); }
.menu-toggle, .mobile-menu { display: none; }

.hero { min-height: 790px; padding-block: 42px 48px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .58fr); grid-template-rows: 1fr auto; column-gap: clamp(36px, 6vw, 96px); row-gap: 22px; }
.hero-copy { padding: 42px 5vw 42px 0; display: flex; flex-direction: column; }
.hero h1 { margin-top: 62px; max-width: 900px; font-size: clamp(4rem, 7vw, 7.3rem); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.hero h1 span { display: block; color: var(--accent); text-shadow: 0 0 45px rgba(159,182,198,.13); }
.hero-bottom { margin-top: clamp(72px, 8vw, 110px); max-width: 760px; display: grid; grid-template-columns: 1fr 220px; gap: 90px; align-items: end; }
.hero-bottom > p { color: var(--muted); font-size: .9rem; line-height: 1.7; }
.primary-link { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); display: flex; justify-content: space-between; font: 500 .68rem var(--mono); text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.primary-link:hover { background: var(--text); color: var(--bg); }
.hero-stats { margin-top: 58px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.hero-stats > div { display: grid; gap: 7px; }
.hero-stats strong { font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.hero-stats span { color: var(--muted); font: 400 .58rem/1.35 var(--mono); text-transform: uppercase; }
.hero-photo { position: relative; align-self: center; width: min(100%, 430px); justify-self: end; padding: 16px; overflow: hidden; background: #e8e5de; color: #151819; border-radius: 30px; box-shadow: 0 25px 70px rgba(0,0,0,.4); transform: rotate(1.2deg); }
.portrait-image { height: 390px; overflow: hidden; border-radius: 20px; background: #c9c5bc; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.78) contrast(1.02); transition: transform .7s ease, filter .7s ease; }
.hero-photo:hover img { transform: scale(1.015); filter: saturate(.95) contrast(1.02); }
.hero-photo figcaption { padding: 21px 7px 5px; }
.hero-photo figcaption strong { display: block; font-size: 1.45rem; letter-spacing: -.035em; }
.hero-photo figcaption p { margin-top: 10px; max-width: 340px; color: #626765; font-size: .76rem; line-height: 1.55; }
.hero-photo figcaption div { margin-top: 20px; padding-top: 13px; border-top: 1px solid rgba(21,24,25,.18); display: flex; justify-content: space-between; align-items: center; color: #626765; font-size: .65rem; }
.hero-photo figcaption div span:last-child { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #151819; color: #e8e5de; font-size: 1rem; }
.availability { grid-column: 1 / 3; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; color: var(--muted); font: 400 .65rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.status { width: 7px; height: 7px; border-radius: 50%; background: #6ead82; box-shadow: 0 0 0 5px rgba(110,173,130,.1); }

.section { padding-block: 110px; border-top: 1px solid var(--line); }
.section-label { margin-bottom: 44px; color: var(--accent); font-size: .76rem; font-weight: 500; letter-spacing: .025em; }
.section-content h2 { font-size: clamp(3rem, 5.1vw, 5.3rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; }
.section-content .lead { max-width: 980px; }
.profile-grid { margin-top: 76px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 15%; }
.profile-copy { max-width: 590px; display: grid; gap: 24px; color: var(--muted); }
.profile-facts { padding: 8px 22px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.profile-facts div { padding-block: 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.profile-facts div:last-child { border-bottom: 0; }
.profile-facts dt { color: var(--muted); font: 400 .65rem var(--mono); text-transform: uppercase; }
.profile-facts dd { font-size: .82rem; }
.expertise-grid { margin-top: 82px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.expertise-grid article { min-height: 250px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); display: flex; flex-direction: column; }
.expertise-grid article + article { padding-left: 25px; }
.expertise-icon { width: 46px; height: 46px; padding: 10px; border: 1px solid rgba(159,182,198,.28); border-radius: 15px; background: rgba(159,182,198,.07); filter: invert(82%); opacity: .82; transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.expertise-grid article:hover .expertise-icon { opacity: 1; transform: translateY(-2px); background: rgba(159,182,198,.13); }
.expertise-grid h3 { margin-top: auto; font-size: 1.35rem; font-weight: 500; }
.expertise-grid p { margin-top: 12px; max-width: 310px; color: var(--muted); font-size: .8rem; }

.projects-section { background: var(--surface); border-top: 1px solid var(--line); }
.projects-section > .container { padding-block: 110px; }
.projects-heading { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: end; margin-bottom: 64px; }
.projects-heading h2 { font-size: clamp(3rem, 5.3vw, 5.5rem); line-height: 1; letter-spacing: -.055em; font-weight: 500; }
.projects-heading p { color: var(--muted); font-size: .86rem; line-height: 1.65; }
.work-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.work-overview-card { --work-accent: #9fb6c6; --work-panel: #20272b; position: relative; min-height: 350px; padding: clamp(24px, 3vw, 38px); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--work-panel); display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.work-overview-card::after { content: ""; position: absolute; width: 190px; aspect-ratio: 1; top: -76px; right: -62px; border: 1px solid color-mix(in srgb, var(--work-accent) 38%, transparent); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.018), 0 0 0 60px rgba(255,255,255,.012); pointer-events: none; }
.work-overview-card:hover { transform: translateY(-4px); border-color: var(--work-accent); }
.work-overview-card:focus-visible { outline: 2px solid var(--work-accent); outline-offset: 4px; }
.work-overview-card--business { --work-accent: #b6c4dc; --work-panel: #242c37; }
.work-overview-card--automation { --work-accent: #abc7b5; --work-panel: #23302a; }
.work-overview-card--commerce { --work-accent: #d4b49e; --work-panel: #342b26; }
.work-overview-card--data { --work-accent: #b9b2cf; --work-panel: #2d2a37; }
.work-overview-label { position: relative; z-index: 1; color: var(--work-accent); font-size: .68rem; }
.work-overview-card h3 { position: relative; z-index: 1; margin-top: 60px; max-width: 540px; font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1.02; letter-spacing: -.05em; font-weight: 500; }
.work-overview-card > p { margin-top: 20px; max-width: 480px; color: var(--muted); font-size: .79rem; line-height: 1.7; }
.work-overview-card > div { margin-top: auto; padding-top: 38px; display: flex; justify-content: space-between; align-items: end; gap: 24px; color: var(--work-accent); font-size: .65rem; }
.work-overview-card strong { max-width: 72%; font-weight: 500; }
.work-overview-card > div span { flex: 0 0 auto; }
.projects-archive-link { margin-top: 30px; display: flex; justify-content: flex-end; }
.projects-archive-link a { padding: 12px 17px; border: 1px solid var(--line); border-radius: var(--radius-pill); display: flex; gap: 30px; font-size: .72rem; transition: background .2s, color .2s; }
.projects-archive-link a:hover { background: var(--text); color: var(--bg); }

.experience-layout { margin-top: 70px; display: grid; grid-template-columns: 1fr 320px; gap: 13%; }
.timeline { border-top: 1px solid var(--text); }
.timeline-item { padding-block: 46px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 190px 1fr; gap: 40px; }
.timeline-date { color: var(--muted); font: 400 .63rem var(--mono); text-transform: uppercase; }
.timeline-item h3 { font-size: 1.3rem; font-weight: 500; }
.timeline-item strong { display: block; margin: 5px 0 18px; color: var(--accent); font: 500 .63rem var(--mono); text-transform: uppercase; }
.timeline-item p { max-width: 620px; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.stack { align-self: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.stack-logos { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stack-logo { min-height: 70px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .7rem; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.stack-logo img { width: 25px; height: 25px; object-fit: contain; opacity: .58; transition: opacity .2s ease, transform .2s ease; }
.stack-logo-icons { position: relative; width: 27px; height: 27px; flex: 0 0 27px; }
.stack-logo-icons img { position: absolute; width: 17px; height: 17px; }
.stack-logo-icons img:first-child { top: 0; left: 0; }
.stack-logo-icons img:last-child { right: 0; bottom: 0; }
.stack-logo:hover { border-color: rgba(159,182,198,.45); background: rgba(159,182,198,.07); color: var(--text); }
.stack-logo:hover img { opacity: 1; transform: scale(1.06); }
.stack-logo--core { border-color: rgba(159,182,198,.34); background: rgba(159,182,198,.055); color: var(--text); }
.stack-logo--core img { opacity: .88; }
.stack-logo--concept img { filter: invert(82%); }
.stack-secondary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; line-height: 1.75; }
.stack-secondary strong { display: block; margin-bottom: 5px; color: var(--text); font-size: .58rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

.contact-section { background: #d6dbdc; color: #111516; border-radius: 48px 48px 0 0; }
.contact-layout { min-height: 620px; padding-block: 95px 70px; display: grid; grid-template-columns: minmax(190px, .35fr) 1.65fr; gap: 80px; }
.contact-layout .section-label { color: rgba(17,21,22,.6); }
.contact-layout > div:last-child { display: flex; flex-direction: column; }
.contact-layout .eyebrow { color: rgba(17,21,22,.6); }
.contact-layout h2 { margin-top: 35px; font-size: clamp(4.5rem, 10vw, 9rem); line-height: .9; letter-spacing: -.07em; font-weight: 500; }
.email-link { margin-top: auto; padding: 18px 22px; border: 1px solid rgba(17,21,22,.4); border-radius: var(--radius-pill); display: flex; justify-content: space-between; font-size: clamp(1rem, 2vw, 1.5rem); transition: background .2s ease, color .2s ease; }
.email-link:hover { background: #111516; color: #f2f3f1; }
.contact-meta { margin-top: 35px; display: flex; justify-content: space-between; gap: 25px; color: rgba(17,21,22,.65); font: 400 .63rem var(--mono); text-transform: uppercase; }
.footer { background: #080a0a; color: var(--text); padding-block: 25px; }
.footer .container { display: flex; justify-content: space-between; gap: 20px; font: 400 .6rem var(--mono); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-photo.reveal { transform: translateY(18px) rotate(1.2deg); }
.hero-photo.reveal.is-visible { transform: translateY(0) rotate(1.2deg); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 1600px) {
    .container { width: min(1720px, calc(100% - 80px)); }
    .hero { min-height: 720px; padding-block: 28px 36px; grid-template-columns: minmax(0, 1.45fr) 410px; }
    .hero-copy { padding-block: 28px; }
    .hero h1 { margin-top: 48px; max-width: 1080px; font-size: clamp(4.6rem, 6vw, 7rem); }
    .hero-bottom { margin-top: 58px; max-width: 900px; grid-template-columns: 1fr 240px; }
    .hero-stats { margin-top: 40px; }
    .hero-photo { width: 410px; }
    .portrait-image { height: 350px; }
    .section { padding-block: 96px; }
    .profile-grid { margin-top: 64px; }
    .expertise-grid { margin-top: 72px; }
    .projects-section > .container { padding-block: 96px; }
    .projects-heading { margin-bottom: 56px; }
    .work-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .work-overview-card { min-height: 410px; }
    .work-overview-card h3 { font-size: clamp(1.9rem, 2.25vw, 2.7rem); }
    .experience-layout { margin-top: 60px; }
    .contact-layout { min-height: 560px; padding-block: 80px 60px; }
}

@media (max-width: 1000px) {
    .hero { min-height: auto; grid-template-columns: 1fr minmax(320px, 40%); }.hero-bottom { grid-template-columns: 1fr; gap: 30px; }.primary-link { max-width: 220px; }.portrait-image { height: 350px; }
    .profile-grid { grid-template-columns: 1fr; gap: 60px; }
    .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projects-heading { grid-template-columns: 1fr; }
    .experience-layout { grid-template-columns: 1fr; gap: 70px; }.stack { max-width: 520px; }
}

@media (max-width: 720px) {
    body.menu-open { overflow: hidden; }
    .container { width: min(100% - 32px, 1320px); }.nav { grid-template-columns: 1fr auto; }.nav-links, .nav-contact { display: none; }
    .site-header { padding-block: 8px; }.nav { position: relative; z-index: 2; min-height: 60px; padding-inline: 16px; }
    .menu-toggle { justify-self: end; min-width: 88px; height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 12px; font: inherit; font-size: .7rem; cursor: pointer; }
    .menu-icon { width: 18px; height: 14px; position: relative; display: block; }
    .menu-icon i { position: absolute; left: 0; width: 18px; height: 1px; border-radius: 2px; background: currentColor; transition: top .25s ease, transform .25s ease, opacity .2s ease; }
    .menu-icon i:nth-child(1) { top: 1px; }.menu-icon i:nth-child(2) { top: 6px; }.menu-icon i:nth-child(3) { top: 11px; }
    .menu-toggle.is-active .menu-icon i:nth-child(1) { top: 6px; transform: rotate(45deg); }.menu-toggle.is-active .menu-icon i:nth-child(2) { opacity: 0; }.menu-toggle.is-active .menu-icon i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
    .mobile-menu { position: fixed; z-index: 49; top: 76px; right: 10px; left: 10px; height: calc(100vh - 86px); height: calc(100dvh - 86px); padding: 30px 24px 22px; border: 1px solid var(--line); border-radius: 26px; background: rgba(21,24,25,.98); box-shadow: 0 30px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.985); transform-origin: top center; pointer-events: none; transition: opacity .25s ease, visibility .25s ease, transform .25s ease; }
    .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
    .mobile-menu-links { display: grid; }
    .mobile-menu-links a { min-height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: clamp(1.8rem, 9vw, 3rem); line-height: 1; letter-spacing: -.045em; }
    .mobile-menu-links a:first-child { border-top: 1px solid var(--line); }
    .mobile-menu-links a span { color: var(--accent); font-size: 1.2rem; }
    .mobile-menu-footer { margin-top: auto; padding-top: 35px; display: grid; gap: 10px; color: var(--muted); font-size: .66rem; }
    .mobile-menu-footer a { width: fit-content; color: var(--text); }
    .hero { padding-top: 12px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }.hero-copy { padding: 40px 0 25px; }.hero h1 { margin-top: 42px; font-size: clamp(3.4rem, 15vw, 5.2rem); }.hero-photo { width: min(100%, 420px); justify-self: center; }.hero-photo.reveal, .hero-photo.reveal.is-visible { transform: translateY(0); }.portrait-image { height: 390px; }.availability { grid-column: 1; }.hero-stats { gap: 10px; }.hero-stats strong { font-size: 1.05rem; }
    .section, .projects-section > .container, .contact-layout { padding-block: 70px; }.contact-layout { grid-template-columns: 1fr; }.section-label { margin-bottom: 28px; }
    .profile-grid { margin-top: 60px; }.expertise-grid { margin-top: 70px; grid-template-columns: 1fr; }.expertise-grid article { min-height: 190px; padding: 22px; }.expertise-grid article + article { padding-left: 22px; }
    .projects-heading { margin-bottom: 42px; }.work-overview-grid { grid-template-columns: 1fr; }.work-overview-card { min-height: 320px; border-radius: 22px; }.work-overview-card h3 { margin-top: 48px; }
    .projects-archive-link { justify-content: stretch; }.projects-archive-link a { width: 100%; justify-content: space-between; }
    .timeline-item { grid-template-columns: 1fr; gap: 14px; }.contact-layout { min-height: 590px; }.contact-layout h2 { font-size: 4.5rem; }.contact-meta { flex-direction: column; }
    .footer .container { flex-direction: column; }
}