:root{--ink:#1b1430;--text:#2c2640;--muted:#5d5772;--bg:#faf8fc;--coral:#ff7a59;--violet:#7c5cff;--teal:#14b8a6;--line:#e7e2f0;--r:18px;--grad:linear-gradient(120deg,#f0603d,#d63f7a 45%,#6a48f0)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;line-height:1.12;margin:0 0 .5em;color:var(--ink)}
a{color:#5b3de0}:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.5rem}.narrow{max-width:840px}.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}.skip:focus{left:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font:700 1.1rem Fraunces,Georgia,serif;color:#fff;background:var(--grad);border-radius:12px;padding:.3rem .6rem;text-decoration:none;box-shadow:0 6px 18px rgba(124,92,255,.3)}
nav a{color:var(--ink);text-decoration:none;margin-left:1.6rem;font-weight:500;font-size:.94rem;position:relative}
nav a:not(.nav-cta):after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav a:hover:after{transform:scaleX(1)}
.nav-cta{background:var(--ink);color:#fff!important;padding:.45rem 1rem;border-radius:999px}
.menu-btn{display:none;font:inherit;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:10px;padding:.35rem .85rem;color:var(--ink)}
.hero{position:relative;overflow:hidden;min-height:92vh;display:flex;align-items:center;padding:7rem 0 5rem;background:#fff3ee}
.mesh{position:absolute;inset:0;overflow:hidden;filter:blur(60px);opacity:.85}
.mesh span{position:absolute;border-radius:50%;animation:float 18s ease-in-out infinite alternate}
.b1{width:55vw;height:55vw;background:#ffb199;top:-20%;left:-10%}
.b2{width:50vw;height:50vw;background:#b9a6ff;top:10%;right:-15%;animation-delay:-6s!important}
.b3{width:40vw;height:40vw;background:#8de2d6;bottom:-25%;left:30%;animation-delay:-12s!important}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,-3vh) scale(.95)}}
.hero-in{position:relative}
.pill{display:inline-block;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:500;color:var(--muted)}
h1{font-size:clamp(3.2rem,10vw,7rem);letter-spacing:-.035em;margin:.3em 0 .1em}
.headline{font:700 clamp(1.25rem,3.2vw,2rem)/1.25 Inter,sans-serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 1rem;letter-spacing:-.01em}
.lede{max-width:640px;font-size:clamp(1.05rem,2vw,1.25rem)}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(27,20,48,.25)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(124,92,255,.35);background:#2a1f4d}
.btn.primary:hover .arr{transform:translateY(3px)}.arr{transition:transform .2s}
.btn.ghost{background:rgba(255,255,255,.65);border:1px solid rgba(27,20,48,.15);color:var(--ink);backdrop-filter:blur(8px)}.btn.ghost:hover{transform:translateY(-3px);background:#fff}
.stats{background:var(--ink);color:#fff}
.stats-in{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-top:2.2rem;padding-bottom:2.2rem}
.stats li{display:flex;flex-direction:column;border-left:2px solid rgba(255,255,255,.14);padding-left:1.1rem}
.stats strong{font:700 clamp(1.7rem,3.5vw,2.4rem)/1.15 Fraunces,Georgia,serif;background:linear-gradient(120deg,#ffb199,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:.88rem;color:#d6cfea}
.sec{padding:6rem 0;position:relative}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5b3de0;margin:0 0 .6rem}
h2{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.02em}
.big{font:600 clamp(1.2rem,2.4vw,1.45rem)/1.5 Fraunces,Georgia,serif;color:var(--ink)}
.dark{background:radial-gradient(ellipse at 10% 0%,#3b2a74 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#6b2f4f 0,transparent 50%),var(--ink);color:#e4def3}
.dark h2,.dark h3{color:#fff}.dark .kicker{color:#ffb199}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-top:2rem}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:1.25rem;margin-top:2rem}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:1.6rem;backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,background .25s}
.dark .glass:hover{transform:translateY(-6px);border-color:rgba(255,177,153,.5);background:rgba(255,255,255,.09)}
.glass p{margin:0;font-size:.98rem}.glass h3{font-size:1.25rem}
.ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;margin-bottom:1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:0 1px 2px rgba(27,20,48,.04);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(124,92,255,.14)}
.card h3{font-size:1.15rem}
.chips,.badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{background:#f3effb;color:var(--ink);border-radius:999px;padding:.3rem .8rem;font-size:.86rem;font-weight:500;transition:background .2s,color .2s}
.chips li:hover{background:#5b3de0;color:#fff}
#experience{background:linear-gradient(#fff,var(--bg))}
.group{font:700 .85rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#c8462a;margin:3rem 0 1.2rem}
.tl{list-style:none;margin:0;padding:0 0 0 2rem;position:relative}
.tl:before{content:"";position:absolute;left:6px;top:.4rem;bottom:1rem;width:2px;background:linear-gradient(var(--coral),var(--violet));border-radius:2px}
.tl>li{position:relative;margin-bottom:1.1rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.tl>li:hover{transform:translateX(6px);box-shadow:0 14px 32px rgba(27,20,48,.08);border-color:#d6ccf5}
.tl>li:before{content:"";position:absolute;left:-2rem;top:1.45rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.15)}
.tl h4{font-size:1.25rem;margin:.15rem 0}
.meta time{display:inline-block;font-size:.78rem;font-weight:700;color:#4b2fd0;background:#f1edff;padding:.15rem .6rem;border-radius:999px}
.org{color:var(--muted);margin:0 0 .4rem;font-weight:500}.tl ul{margin:0;padding-left:1.1rem}.tl ul li{margin:.25rem 0}.tl ul li::marker{color:var(--coral)}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-top:2rem}
#certs .glass{background:rgba(255,255,255,.75);border-color:var(--line);box-shadow:0 10px 30px rgba(27,20,48,.05)}
#certs .glass:hover{transform:translateY(-5px)}.certs h3{font-size:1.15rem}
.badges li{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.4rem .75rem;font-weight:600;font-size:.88rem;color:var(--ink);transition:transform .2s,border-color .2s}
.badges li:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--grad);color:#fff;font-size:.65rem}
.badges li:hover{transform:scale(1.04);border-color:var(--violet)}
.contact{overflow:hidden;background:#fff3ee}.mesh.soft{opacity:.55}
.email{display:inline-block;font:700 clamp(1.3rem,4.5vw,2.3rem) Fraunces,Georgia,serif;margin:.6rem 0;word-break:break-all;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;border-bottom:3px solid rgba(124,92,255,.25);transition:border-color .2s}
.email:hover{border-color:var(--violet)}
.loc{color:var(--muted)}.foot{padding:2rem 0;text-align:center;color:var(--muted);font-size:.9rem;background:#fff}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media(max-width:820px){.stats-in{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.menu-btn{display:block}nav{display:none;position:absolute;top:66px;left:0;right:0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);padding:.5rem 1.5rem 1rem}
nav.open{display:block}nav a{display:block;margin:0;padding:.7rem 0}.nav-cta{display:inline-block!important;margin-top:.4rem}
.hero{min-height:auto;padding:6.5rem 0 4rem}.sec{padding:4rem 0}.grid3{grid-template-columns:1fr}.tl{padding-left:1.6rem}.tl>li:before{left:-1.6rem}.tl:before{left:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}
/* now building */
.building{background:radial-gradient(ellipse at 90% 10%,#e9e3ff 0,transparent 55%),radial-gradient(ellipse at 0% 100%,#d9f5f0 0,transparent 50%),#fff;overflow:hidden}
.build-in{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.app{display:flex;gap:1rem;align-items:center;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(27,20,48,.06);margin:1.5rem 0}
.app img{border-radius:18px;flex:none;box-shadow:0 8px 20px rgba(124,92,255,.25)}
.app h3{margin:0;font-size:1.4rem}.app p{margin:0;color:var(--muted)}
.soon{display:inline-block;font-size:.75rem;font-weight:700;color:#fff;background:var(--grad);padding:.1rem .6rem;border-radius:999px;margin-left:.3rem}
.feat{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.feat li{background:#f3effb;color:var(--ink);border-radius:999px;padding:.35rem .85rem;font-size:.88rem;font-weight:500}
.phone{margin:0 auto;width:min(280px,70vw);padding:10px;border-radius:44px;background:linear-gradient(145deg,#2a2342,#0f0b1c);box-shadow:0 30px 60px rgba(27,20,48,.3),inset 0 0 0 2px rgba(255,255,255,.08);transition:transform .4s}
.phone:hover{transform:translateY(-6px) rotate(-1deg)}
.phone img{display:block;width:100%;height:auto;border-radius:34px}
@media(max-width:820px){.build-in{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.phone:hover{transform:none}}

/* experience cleanup */
.tl>li h3{font-size:1.2rem;margin:0}
.role-head{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap}
.role-head time{flex:none;font-size:.78rem;font-weight:700;color:#4b2fd0;background:#f1edff;padding:.15rem .6rem;border-radius:999px;white-space:nowrap}
.org{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.25rem 0 .6rem}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c8462a;background:#fff1ec;border-radius:999px;padding:.05rem .5rem}
.tl{margin-top:2rem}.tl ul li{line-height:1.55}
.sub{margin:.4rem 0 .7rem;display:grid;gap:.3rem}.sub div{display:flex;justify-content:space-between;gap:.3rem 1rem;flex-wrap:wrap;font-size:.92rem}
.sub dt{color:var(--muted);font-weight:500}.sub dd{margin:0;color:#4b2fd0;font-weight:600;font-size:.82rem;white-space:nowrap}
.edu{margin:0}.email{display:block;width:fit-content;margin:.6rem auto}.email.tel{word-break:normal;white-space:nowrap}
@media(max-width:720px){.tl>li{padding:1rem 1.05rem}.tl>li:hover{transform:none}.stats-in{gap:1.4rem 1rem}.stats span{font-size:.82rem}.app{align-items:flex-start}.app img{width:56px;height:56px}}
@media(max-width:420px){.wrap{padding:0 1.15rem}.cta .btn{flex:1;justify-content:center}}
.app .dev{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b3de0;margin:.15rem 0 .2rem}
