:root{
    --ink:#07152f;
    --mid:#173878;
    --blue:#386cff;
    --violet:#8657ff;
    --ice:#f5f8ff;
    --muted:#68728a;
    --line:#dbe2f2;
    --display:'Manrope',sans-serif;
    --mono:'DM Mono',monospace
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
html.splash-active{
    overflow:hidden;
    height:100%
}
body{
    margin:0;
    background:var(--ice);
    /* background:linear-gradient(135deg, #e9f3f8 0%, #4b93f1 100%); */
    color:var(--ink);
    font-family:var(--display);
    overflow-x:hidden
}
body.splash-active{
    overflow:hidden;
    height:100vh;
    overscroll-behavior:none
}
.intro-splash{
    position:fixed;
    inset:0;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    overflow:hidden;
    touch-action:none;
    background:linear-gradient(135deg,#071638 0%,var(--mid) 45%,var(--blue) 78%,#5b93ff 100%)
}
.intro-splash-video{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none
}
.intro-splash-mesh{
    position:absolute;
    inset:-20%;
    z-index:1;
    pointer-events:none;
    background-image:
        radial-gradient(circle,rgba(134,87,255,.4),transparent 45%),
        radial-gradient(circle,rgba(255,255,255,.16),transparent 45%),
        radial-gradient(circle,rgba(56,108,255,.3),transparent 55%);
    animation:meshDrift 20s ease-in-out infinite alternate
}
.intro-splash:after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(7,22,56,.72) 0%,rgba(20,45,109,.6) 45%,rgba(10,29,74,.72) 100%)
}
.intro-splash-content{
    position:relative;
    z-index:2;
    padding:0 24px;
    color:#fff;
    animation:splashRise .8s cubic-bezier(.22,1,.36,1) both
}
.intro-splash-greeting{
    margin:0;
    font:800 clamp(38px,7vw,84px) var(--display);
    letter-spacing:-.03em;
    text-shadow:0 10px 34px rgba(5,14,32,.4)
}
.intro-splash-hint{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:26px;
    font:600 11px var(--mono);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
    animation:splashHintPulse 1.8s ease-in-out infinite
}
/* The welcome screen itself never moves — the home page slides up over it
   (parallax-style: static background layer, sliding foreground layer) and
   hides it from view, at which point it's removed from the DOM. */
#intro-splash ~ main{
    position:relative;
    z-index:1000;
    background:var(--ice)
}
main{
    transform:translateY(100vh);
    transition:transform .85s cubic-bezier(.22,1,.36,1)
}
.site-header{
    opacity:0
}
body.site-revealed main{
    transform:translateY(0)
}
body.header-revealed .site-header{
    opacity:1
}
@keyframes splashRise{
    from{
        opacity:0;
        transform:translateY(18px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes splashHintPulse{
    0%,100%{
        opacity:.55;
        transform:translateY(0)
    }
    50%{
        opacity:1;
        transform:translateY(4px)
    }
}
@media(prefers-reduced-motion:reduce){
    .intro-splash-mesh,.intro-splash-hint{
        animation:none
    }
    .intro-splash-content{
        animation:none
    }
    main{
        transition:none
    }
    .site-header{
        transition:opacity .2s
    }
}
.noise{
    position:fixed;
    inset:0;
    opacity:.045;
    pointer-events:none;
    z-index:9;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")
}
#particles{
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none
}
#particles i{
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--s);
    height:var(--s);
    border-radius:50%;
    background:rgba(78,112,255,.26);
    animation:drift var(--d) var(--l) infinite alternate ease-in-out
}
@keyframes drift{
    to{
        transform:translate(30px,-46px);
        opacity:.1
    }
}
#scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0%;
    background:linear-gradient(90deg,var(--blue),var(--violet));
    z-index:1020;
    transition:width .12s linear
}
#back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    border:0;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .3s,transform .3s,visibility .3s,background .2s;
    z-index:1015;
    box-shadow:0 10px 24px rgba(27,54,112,.25)
}
#back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}
#back-to-top:hover{
    background:var(--violet)
}
.site-header{
    height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(24px,6vw,104px);
    position:fixed;
    inset:0 0 auto;
    z-index:1010;
    transition:.3s;
    margin:20px;
    border-radius:50px;
}
.site-header.scrolled{
    background:rgba(0,0,0,0);
    backdrop-filter:blur(18px);
    box-shadow:0 1px 0 rgba(14,38,89,.08)
}
.brand{
    font:500 25px var(--mono);
    text-decoration:none;
    color:var(--ink);
    letter-spacing:-2px
}
.brand span{
    color:var(--violet)
}
.text-link{
    font-size:12px;
    font-weight:800;
    color:#8657ff;
    text-decoration:none;
    letter-spacing:.04em;
    transition:color .2s
}
.text-link:hover{
    color:var(--violet)
}
.icon-nav{
    display:flex;
    align-items:center;
    gap:10px
}
.nav-pill{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    height:44px;
    padding:0 12px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 2px 10px rgba(27,54,112,.1);
    text-decoration:none;
    overflow:hidden;
    white-space:nowrap;
    transition:background .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),transform .25s
}
.nav-pill-icon{
    width:19px;
    height:19px;
    flex:0 0 19px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    transition:color .3s
}
.nav-pill-icon svg{
    width:100%;
    height:100%
}
.nav-pill-label{
    display:inline-block;
    max-width:0;
    margin-left:0;
    opacity:0;
    overflow:hidden;
    font:800 12px var(--display);
    letter-spacing:.03em;
    color:#fff;
    transition:max-width .4s cubic-bezier(.22,1,.36,1),margin-left .4s cubic-bezier(.22,1,.36,1),opacity .25s
}
.nav-pill:hover,.nav-pill:focus-visible,.nav-pill.active{
    background:linear-gradient(120deg,var(--blue),var(--violet));
    box-shadow:0 10px 22px rgba(56,108,255,.3)
}
.nav-pill:hover .nav-pill-icon,.nav-pill:focus-visible .nav-pill-icon,.nav-pill.active .nav-pill-icon{
    color:#fff
}
.nav-pill:hover .nav-pill-label,.nav-pill:focus-visible .nav-pill-label,.nav-pill.active .nav-pill-label{
    max-width:140px;
    margin-left:8px;
    opacity:1
}
@media(prefers-reduced-motion:reduce){
    .nav-pill,.nav-pill-icon,.nav-pill-label{
        transition:none
    }
}
.section-shell{
    padding-left:clamp(24px,10vw,166px);
    padding-right:clamp(24px,10vw,166px);
    position:relative
}
.hero{
    min-height:740px;
    height:100vh;
    max-height:940px;
    display:flex;
    align-items:center;
    isolation:isolate;
    overflow:hidden
}
.hero:before{
    content:'';
    position:absolute;
    width:min(68vw,1000px);
    aspect-ratio:1;
    border-radius:50%;
    right:-7%;
    top:0;
    background:radial-gradient(circle,rgba(108,93,255,.16),transparent 67%);
    z-index:-1
}
.orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
    will-change:transform
}
.orb-one{
    width:min(46vw,620px);
    aspect-ratio:1;
    right:-8%;
    top:-10%;
    background:radial-gradient(circle,rgba(108,93,255,.22),transparent 68%)
}
.orb-two{
    width:min(28vw,380px);
    aspect-ratio:1;
    left:-4%;
    bottom:4%;
    background:radial-gradient(circle,rgba(56,108,255,.18),transparent 70%)
}
.hero-copy{
    max-width:650px;
    padding-top:40px
}
.eyebrow,.section-label{
    font:500 10px var(--mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#52617c
}
.eyebrow{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 24px
}
.eyebrow span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#62c29e;
    box-shadow:0 0 0 5px rgba(98,194,158,.16)
}
h1,.display{
    margin:0;
    letter-spacing:-.065em;
    line-height:1.04;
    font-size:clamp(44px,5.45vw,84px);
    font-weight:800
}
em{
    font-weight:500;
    color:var(--violet);
    font-style:normal
}
.intro{
    max-width:485px;
    font-size:16px;
    line-height:1.7;
    color:#57637d;
    margin:31px 0
}
.intro strong{
    color:var(--ink)
}
.hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px 27px
}
.button{
    position:relative;
    overflow:hidden;
    border:0;
    font:800 12px var(--display);
    letter-spacing:.03em;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:24px;
    padding:16px 19px;
    transition:transform .25s,box-shadow .25s
}
.button:before{
    content:'';
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none
}
.button:hover:before{
    left:130%
}
.button .ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    transform:scale(0);
    animation:rippleAnim .6s ease-out;
    pointer-events:none
}
@keyframes rippleAnim{
    to{
        transform:scale(2.6);
        opacity:0
    }
}
@media(prefers-reduced-motion:reduce){
    .button:before{
        display:none
    }
    .button .ripple{
        display:none
    }
}
.button-primary{
    background:var(--ink);
    color:white;
    box-shadow:7px 7px 0 #b9c9fc
}
.button-primary:hover{
    transform:translate(-2px,-2px);
    box-shadow:10px 10px 0 #a999ff
}
.button-secondary{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink);
    box-shadow:none
}
.button-secondary:before{
    background:linear-gradient(120deg,transparent,rgba(56,108,255,.22),transparent)
}
.button-secondary .ripple{
    background:rgba(56,108,255,.25)
}
.button-secondary:hover{
    transform:translate(-2px,-2px);
    background:var(--ink);
    color:#fff;
    box-shadow:8px 8px 0 #cdd8f5
}
.button b{
    font-size:17px
}
.text-link span,.direct-links span{
    font-size:17px;
    margin-left:4px
}
.hero-portrait{
    position:absolute;
    right:clamp(26px,11vw,175px);
    bottom:0;
    width:min(31vw,440px);
    height:min(43vw,610px)
}
@media(min-width:1100px){
    .hero-portrait{
        width:min(32vw,455px);
        height:min(45vw,633px)
    }
}
@media(min-width:1600px){
    .hero-portrait{
        right:clamp(20px,8vw,140px);
        width:min(37vw,510px);
        height:min(51vw,710px)
    }
}
.portrait-frame{
    height:100%;
    overflow:hidden;
    position:relative;
    background:linear-gradient(155deg, var(--blue), var(--violet));
    clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 9%);
    cursor:pointer
}
.portrait-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0
}
.portrait-frame:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(205deg, transparent 55%, rgba(7,21,47,.55) 100%);
    pointer-events:none;
    z-index:2
}
.portrait-frame:focus-visible{
    outline:2px solid rgba(255,255,255,.85);
    outline-offset:-4px
}
.portrait-frame img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    filter:saturate(.9) contrast(1.05);
    transition:width .55s cubic-bezier(.22,1,.36,1);
    z-index:1
}
.portrait-info{
    position:absolute;
    inset:0;
    z-index:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-end;
    text-align:right;
    padding:0 18px 30px;
    opacity:0;
    transform:translateX(14px);
    transition:opacity .4s ease .05s, transform .4s ease .05s
}
.portrait-info-name{
    font:800 24px var(--display);
    color:#fff;
    line-height:1.15;
    letter-spacing:.01em
}
.portrait-info-role{
    margin-top:6px;
    font:700 11px var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    /* color:rgba(255,255,255,.85) */
    color:#ffffff;
}
.portrait-frame:hover img,
.portrait-frame:focus-visible img,
.portrait-frame.is-active img{
    width:60%
}
.portrait-frame:hover .portrait-info,
.portrait-frame:focus-visible .portrait-info,
.portrait-frame.is-active .portrait-info{
    opacity:1;
    transform:translateX(0)
}
@media(prefers-reduced-motion:reduce){
    .portrait-frame img,
    .portrait-info{
        transition:none
    }
}
.portrait-ring{
    position:absolute;
    border:1px solid rgba(112,93,255,.42);
    width:125%;
    aspect-ratio:1;
    right:-14%;
    top:7%;
    border-radius:50%;
    z-index:-1
}
.experience-badge{
    position:absolute;
    left:-75px;
    bottom:88px;
    background:white;
    padding:14px 15px;
    box-shadow:0 14px 30px rgba(27,54,112,.12);
    display:flex;
    align-items:center;
    gap:9px;
    z-index:2
}
.experience-badge strong{
    font:800 30px var(--mono);
    letter-spacing:-3px;
    color:var(--violet)
}
.experience-badge span{
    font-size:9px;
    line-height:1.3;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em
}
.scroll-cue{
    position:absolute;
    bottom:32px;
    left:clamp(24px,6vw,104px);
    font:10px var(--mono);
    color:#66728c;
    display:flex;
    align-items:center;
    gap:9px
}
.scroll-cue span{
    width:33px;
    height:1px;
    background:#7d6df6
}
.section-pad{
    padding-top:139px;
    padding-bottom:139px
}
.section-label{
    display:flex;
    gap:18px;
    align-items:center;
    margin-bottom:61px
}
.section-label span{
    color:var(--violet)
}
.mesh{
    position:absolute;
    inset:-25%;
    z-index:-2;
    pointer-events:none;
    background-size:180% 180%;
    animation:meshDrift 24s ease-in-out infinite alternate
}
@keyframes meshDrift{
    0%{
        background-position:0% 0%,100% 0%,50% 100%
    }
    50%{
        background-position:30% 40%,70% 30%,40% 70%
    }
    100%{
        background-position:10% 20%,90% 10%,60% 90%
    }
}
@media(prefers-reduced-motion:reduce){
    .mesh{
        animation:none
    }
}
.mesh-hero{
    background-image:radial-gradient(circle,rgba(56,108,255,.16),transparent 45%),radial-gradient(circle,rgba(134,87,255,.14),transparent 45%),radial-gradient(circle,rgba(56,108,255,.1),transparent 50%)
}
.mesh-about{
    background-image:radial-gradient(circle,rgba(56,108,255,.1),transparent 45%),radial-gradient(circle,rgba(134,87,255,.09),transparent 45%),radial-gradient(circle,rgba(56,108,255,.07),transparent 50%)
}
.mesh-experience{
    background-image:radial-gradient(circle,rgba(134,87,255,.24),transparent 45%),radial-gradient(circle,rgba(56,108,255,.18),transparent 45%),radial-gradient(circle,rgba(134,87,255,.14),transparent 50%)
}
.mesh-skills{
    background-image:radial-gradient(circle,rgba(134,87,255,.09),transparent 45%),radial-gradient(circle,rgba(56,108,255,.08),transparent 45%),radial-gradient(circle,rgba(134,87,255,.06),transparent 50%)
}
.mesh-projects{
    background-image:radial-gradient(circle,rgba(56,108,255,.1),transparent 45%),radial-gradient(circle,rgba(134,87,255,.08),transparent 45%),radial-gradient(circle,rgba(56,108,255,.06),transparent 50%)
}
.mesh-education{
    background-image:radial-gradient(circle,rgba(134,87,255,.08),transparent 45%),radial-gradient(circle,rgba(56,108,255,.07),transparent 45%),radial-gradient(circle,rgba(134,87,255,.06),transparent 50%)
}
.mesh-contact{
    background-image:radial-gradient(circle,rgba(134,87,255,.12),transparent 45%),radial-gradient(circle,rgba(56,108,255,.1),transparent 45%),radial-gradient(circle,rgba(134,87,255,.08),transparent 50%)
}
.section-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(6px);
    pointer-events:none;
    z-index:-1;
    opacity:.6;
    will-change:transform
}
.about{
    background:linear-gradient(135deg, #ffffff 0%, var(--ice) 100%);
    overflow:hidden
}
.section-glow-about{
    width:min(38vw,520px);
    aspect-ratio:1;
    top:-12%;
    right:-8%;
    background:radial-gradient(circle,rgba(56,108,255,.14),transparent 70%)
}
.about-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:clamp(42px,10vw,180px)
}
.about-copy{
    font-size:15px;
    line-height:1.85;
    color:var(--muted);
    padding-top:8px
}
.about-copy p:first-child{
    margin-top:0
}
.about-copy .text-link{
    display:inline-block;
    margin-top:10px;
    color:var(--ink)
}
.metrics{
    margin-top:104px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.metrics div{
    padding:25px 12px 0;
    border-right:1px solid var(--line)
}
.metrics div:last-child{
    border:0
}
.metrics strong{
    display:block;
    font:500 34px var(--mono);
    letter-spacing:-3px;
    color:var(--mid)
}
.metrics span{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#78829a
}
.experience{
    background:#0a1833;
    color:white;
    overflow:hidden
}
.section-glow-experience{
    width:min(40vw,560px);
    aspect-ratio:1;
    bottom:-16%;
    left:-10%;
    background:radial-gradient(circle,rgba(134,87,255,.3),transparent 70%)
}
.experience .section-label{
    color:#8c9ebc
}
.experience .section-label span{
    color:#a990ff
}
.experience-list{
    border-top:1px solid rgba(190,206,240,.2)
}
.job{
    padding:35px 0 40px;
    border-bottom:1px solid rgba(190,206,240,.2)
}
.job-top{
    display:flex;
    justify-content:space-between;
    font:10px var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8d9db8;
    margin-bottom:23px
}
.job-main{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:35px
}
.job h3{
    font-size:clamp(27px,3vw,42px);
    letter-spacing:-.05em;
    line-height:1.12;
    margin:0
}
.job h4{
    font-size:14px;
    margin:0
}
.company-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:0 0 12px
}
.company-logo{
    order:2;
    flex-shrink:0;
    height:30px;
    width:auto;
    max-width:120px;
    object-fit:contain;
    background:white;
    border-radius:6px;
    padding:4px 9px
}
.job p{
    font-size:13px;
    line-height:1.75;
    color:#afbbd1;
    margin:0;
    max-width:570px
}
.job ul{
    list-style:none;
    padding:0;
    margin:18px 0 0;
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.job li{
    font:10px var(--mono);
    letter-spacing:.04em;
    padding:6px 8px;
    border:1px solid rgba(189,203,238,.22);
    color:#c6d1e7
}
.skills{
    background:#eef3ff;
    overflow:hidden
}
.section-glow-skills{
    width:min(36vw,480px);
    aspect-ratio:1;
    top:-14%;
    left:-6%;
    background:radial-gradient(circle,rgba(134,87,255,.14),transparent 70%)
}
.skills-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px
}
.skills-intro p{
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
    max-width:460px
}
.skill-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:34px;
    padding-top:15px
}
.skill-columns p{
    font:500 10px var(--mono);
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--violet)
}
.skill-columns ul{
    list-style:none;
    margin:21px 0;
    padding:0
}
.skill-columns li{
    font-weight:700;
    font-size:14px;
    padding:9px 0;
    border-bottom:1px solid #d4ddef
}
.domains{
    margin-top:110px;
    padding:18px 0;
    border-top:1px solid #cfd8eb;
    border-bottom:1px solid #cfd8eb;
    font:500 11px var(--mono);
    letter-spacing:.05em;
    text-transform:uppercase;
    display:flex;
    gap:30px;
    color:#495a79
}
.domains span{
    color:#8a74f5;
    white-space:nowrap
}
.domains b{
    color:#8069ee;
    margin:0 8px
}
.projects{
    background:var(--ice);
    overflow:hidden
}
.section-glow-projects{
    width:min(38vw,520px);
    aspect-ratio:1;
    bottom:-16%;
    right:-6%;
    background:radial-gradient(circle,rgba(56,108,255,.13),transparent 70%)
}
.projects-intro{
    max-width:660px
}
.projects-intro p{
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
    margin-top:14px
}
.projects-stack-wrap{
    margin-top:64px;
    display:grid;
    grid-template-columns:minmax(240px,340px) 1fr;
    gap:36px;
    align-items:start
}
.projects-stack{
    display:flex;
    flex-direction:column;
    gap:9px;
    position:sticky;
    top:110px
}
.stack-item{
    all:unset;
    box-sizing:border-box;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:17px 20px;
    background:var(--tint);
    color:var(--tint-text);
    font:600 14.5px var(--display);
    letter-spacing:-.01em;
    box-shadow:0 6px 14px rgba(30,15,70,.1);
    transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s
}
.stack-item-index{
    font:700 11px var(--mono);
    opacity:.65;
    flex:0 0 auto
}
.stack-item-title{
    flex:1;
    line-height:1.3
}
.stack-item-arrow{
    opacity:0;
    transform:translateX(-6px);
    transition:opacity .25s,transform .25s;
    flex:0 0 auto
}
.stack-item:hover{
    transform:translateX(6px);
    box-shadow:0 14px 26px rgba(30,15,70,.18)
}
.stack-item.is-active{
    transform:translateX(10px);
    box-shadow:0 18px 34px rgba(30,15,70,.24)
}
.stack-item.is-active .stack-item-arrow,
.stack-item:hover .stack-item-arrow{
    opacity:1;
    transform:translateX(0)
}
.project-detail-card{
    background:linear-gradient(90deg, #8758ff, transparent);
    border:0px solid var(--line);
    padding:44px 40px;
    min-height:340px;
    position:relative;
    perspective:1400px;
    box-shadow:0 24px 50px rgba(27,54,112,.08)
}
.project-detail-index{
    display:inline-block;
    font:700 11px var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    /* color:var(--violet) */
    color:white;
}
.project-detail-panel{
    display:none
}
.project-detail-panel.is-active{
    display:block;
    transform-origin:left center;
    backface-visibility:hidden
}
.project-detail-card.is-flipping .project-detail-panel.is-active{
    animation:projectFlipIn .6s cubic-bezier(.22,1,.36,1)
}
@keyframes projectFlipIn{
    0%{transform:rotateY(-90deg);opacity:0}
    55%{opacity:1}
    100%{transform:rotateY(0deg);opacity:1}
}
.project-detail-panel h3{
    font-size:25px;
    letter-spacing:-.03em;
    line-height:1.25;
    margin:14px 0 16px
}
.project-detail-panel p{
    font-size:14px;
    line-height:1.8;
    /* color:var(--muted); */
    color: white;
    margin:0;
    max-width:560px
}
@media(prefers-reduced-motion:reduce){
    .project-detail-card.is-flipping .project-detail-panel.is-active{
        animation:none
    }
    .stack-item,.stack-item-arrow{
        transition:none
    }
}
.tag-list{
    list-style:none;
    padding:0;
    margin:20px 0 0;
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.tag-list li{
    font:10px var(--mono);
    letter-spacing:.04em;
    padding:6px 8px;
    border:0px solid var(--line);
    /* color:var(--mid); */
    color:#fff;
    /* background:var(--ice); */
    background:linear-gradient(90deg, #8758ff, #3d2279);
    border-radius:3px;
}
.education{
    background:linear-gradient(135deg, var(--ice) 0%, #ffffff 100%);
    overflow:hidden
}
.section-glow-education{
    width:min(26vw,340px);
    aspect-ratio:1;
    top:-22%;
    right:8%;
    background:radial-gradient(circle,rgba(134,87,255,.12),transparent 70%)
}
.education-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px
}
.education article{
    border-top:2px solid var(--ink);
    padding-top:19px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:22px
}
.education p{
    font:10px var(--mono);
    color:var(--violet)
}
.education h3{
    font-size:23px;
    letter-spacing:-.05em;
    margin:18px 0 8px
}
.education span{
    font-size:13px;
    color:var(--muted)
}
.education-logo{
    order:2;
    flex-shrink:0;
    width:64px;
    height:64px;
    object-fit:contain;
    border-radius:10px;
    border:1px solid var(--line);
    background:white;
    padding:7px
}
.contact{
    background:#e8eaff;
    overflow:hidden
}
.contact-glow{
    position:absolute;
    width:720px;
    height:720px;
    background:radial-gradient(circle,rgba(142,105,255,.2),transparent 65%);
    right:-220px;
    bottom:-330px;
    z-index:-1;
    pointer-events:none;
    will-change:transform
}
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(50px,12vw,180px)
}
.contact-grid>div>p{
    font-size:15px;
    line-height:1.8;
    color:var(--muted);
    max-width:390px
}
.direct-links{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:10px
}
.direct-links a{
    font:700 13px var(--display);
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid #abb9de;
    padding-bottom:4px
}
.contact-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-top:5px
}
.contact-form label{
    font:700 11px var(--display);
    letter-spacing:.03em;
    color:#273854
}
.contact-form small{
    font-weight:500;
    color:#7682a0
}
.contact-form input,.contact-form textarea{
    margin-top:7px;
    width:100%;
    border:0;
    border-bottom:1px solid #aebadd;
    background:transparent;
    outline:0;
    padding:8px 0;
    font:14px var(--display);
    color:var(--ink);
    resize:vertical
}
.contact-form input:focus,.contact-form textarea:focus{
    border-color:var(--violet)
}
.contact-form .button{
    align-self:start;
    margin-top:9px
}
.honeypot{
    position:absolute!important;
    opacity:0;
    pointer-events:none
}
.form-success,.form-error{
    font-size:12px;
    margin:0;
    padding:10px 13px
}
.form-success{
    background:#d8f6e9;
    color:#176348
}
.form-error{
    background:#ffe1e9;
    color:#8e1640
}
footer{
    padding:23px clamp(24px,10vw,166px);
    display:flex;
    justify-content:space-between;
    background:var(--ink);
    color:#aab7d0;
    font:10px var(--mono);
    letter-spacing:.06em
}
.reveal{
    opacity:0;
    transform:translateY(34px);
    transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)
}
.reveal.visible{
    opacity:1;
    transform:none
}
.reveal-delay{
    transition-delay:.15s
}
@media(max-width:780px){
    .site-header{
        height:68px
    }
    .icon-nav{
        gap:5px
    }
    .nav-pill{
        height:36px;
        padding:0 8px
    }
    .nav-pill-icon{
        width:16px;
        height:16px;
        flex:0 0 16px
    }
    .nav-pill:hover .nav-pill-label,.nav-pill:focus-visible .nav-pill-label{
        max-width:110px;
        margin-left:6px
    }
    .nav-pill.active .nav-pill-label{
        max-width:0;
        margin-left:0;
        opacity:0
    }
    .hero{
        min-height:730px;
        height:auto;
        padding-top:142px;
        padding-bottom:87px;
        align-items:flex-start
    }
    .hero-portrait{
        position:relative;
        right:auto;
        bottom:auto;
        width:min(66vw,310px);
        height:390px;
        margin:45px auto 0
    }
    .portrait-info-name{
        font-size:21px
    }
    .hero{
        display:block
    }
    .experience-badge{
        left:-35px;
        bottom:40px
    }
    .scroll-cue{
        display:none
    }
    .about-grid,.skills-grid,.contact-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .section-pad{
        padding-top:85px;
        padding-bottom:85px
    }
    .section-label{
        margin-bottom:37px
    }
    .metrics{
        margin-top:65px;
        grid-template-columns:1fr 1fr;
        gap:20px
    }
    .metrics div:nth-child(2){
        border:0
    }
    .job-main{
        grid-template-columns:1fr;
        gap:23px
    }
    .domains{
        margin-top:65px;
        display:block;
        line-height:2.2
    }
    .domains div{
        margin-top:8px
    }
    .education-grid{
        grid-template-columns:1fr;
        gap:40px
    }
    .projects-stack-wrap{
        margin-top:40px;
        grid-template-columns:1fr;
        gap:20px
    }
    .projects-stack{
        position:static;
        gap:7px
    }
    .stack-item{
        padding:14px 16px;
        font-size:13px
    }
    .stack-item.is-active,
    .stack-item:hover{
        transform:translateX(4px)
    }
    .project-detail-card{
        padding:26px 22px;
        min-height:0
    }
    .education-logo{
        width:52px;
        height:52px
    }
    .company-logo{
        height:24px
    }
    .skill-columns{
        padding-top:0
    }
    .contact-grid{
        gap:35px
    }
    footer{
        gap:10px;
        flex-direction:column
    }
    .hero:before{
        width:110vw;
        right:-40%
    }
}
@media(max-width:450px){
    h1,.display{
        font-size:41px
    }
    .icon-nav{
        gap:3px
    }
    .nav-pill{
        height:32px;
        padding:0 6px
    }
    .nav-pill-icon{
        width:14px;
        height:14px;
        flex:0 0 14px
    }
    .hero-portrait{
        width:75vw
    }
    .metrics strong{
        font-size:27px
    }
    .skill-columns{
        gap:19px
    }
    .skill-columns li{
        font-size:12px
    }
}