:root{
  --bg:#131313; --card:#1b1b1b; --line:#2a2a2a; --line-2:#505050;
  --white:#ffffff; --text:#cacaca; --muted:#888888; --dim:#505050;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
h1,h2,h3,h4{color:var(--white);font-weight:700;letter-spacing:-.025em;line-height:1.1}

/* Animated background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.o1{width:560px;height:560px;background:radial-gradient(circle,rgba(52,74,112,.55) 0%,rgba(52,74,112,0) 70%);top:-12%;left:-10%;animation:drift1 28s ease-in-out infinite alternate}
.o2{width:480px;height:480px;background:radial-gradient(circle,rgba(90,90,90,.35) 0%,rgba(90,90,90,0) 70%);top:35%;right:-12%;animation:drift2 34s ease-in-out infinite alternate}
.o3{width:420px;height:420px;background:radial-gradient(circle,rgba(40,58,92,.45) 0%,rgba(40,58,92,0) 70%);bottom:-15%;left:30%;animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(35vw,30vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-40vw,-20vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-25vw,-45vh) scale(1.2)}}
.grid{position:absolute;inset:-80px;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 80%);animation:gridmove 30s linear infinite}
@keyframes gridmove{to{transform:translate(80px,80px)}}
.spot{position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.05),transparent 60%);transition:background .1s}
@media (max-width:767px){.orb{filter:blur(60px)}.o1,.o2,.o3{width:320px;height:320px}}

/* Lifeline (heartbeat) running across the background */
.ecg{position:absolute;left:0;width:100%;height:180px;overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ecg.e1{top:58%}
.ecg.e2{top:18%;opacity:.45;transform:scaleY(.7)}
.ecg path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ecg .base{stroke:rgba(255,255,255,.06);stroke-width:1.5}
.ecg .trail{stroke:rgba(94,234,212,.35);stroke-width:2;stroke-dasharray:160 840;animation:beat 7s linear infinite}
.ecg .head{stroke:#a7f3d0;stroke-width:2.5;stroke-dasharray:28 972;animation:beatHead 7s linear infinite;filter:drop-shadow(0 0 6px rgba(94,234,212,.9))}
.ecg.e2 .trail,.ecg.e2 .head{animation-duration:11s;animation-delay:-4s}
@keyframes beat{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes beatHead{from{stroke-dashoffset:868}to{stroke-dashoffset:-132}}
@media (max-width:767px){.ecg{height:120px}.ecg.e2{display:none}}
@media (prefers-reduced-motion:reduce){.ecg .trail,.ecg .head{animation:none;opacity:0}}

/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(19,19,19,.85);backdrop-filter:blur(12px);border-color:var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
/* Logo: EV monogram tile + wordmark */
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--white)}
.logo .mark{position:relative;flex:none;width:40px;height:40px;border-radius:13px 3px 13px 3px;background:var(--white);color:var(--bg);
  display:grid;place-items:center;font-weight:800;font-size:.98rem;letter-spacing:-.06em;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.logo .mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#5eead4;border:2px solid var(--bg)}
.logo:hover .mark{transform:rotate(-8deg)}
.logo .word{display:flex;flex-direction:column;line-height:1.15}
.logo .word b{font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.logo .word small{font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
@media (max-width:380px){.logo .word small{display:none}}
.menu{display:flex;gap:36px;font-size:1rem;font-weight:500}
.menu a{color:var(--muted);transition:color .2s}
.menu a:hover{color:var(--white)}
/* Buttons: text roll, fill that spreads from the cursor, magnetic pull */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:18px;
  background:var(--white);color:var(--bg);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  padding:7px 7px 7px 26px;border-radius:22px 4px 22px 4px;transition:color .45s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.pill .lbl{display:block;height:1.5em;line-height:1.5em;overflow:hidden}
.pill .t{display:block;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.pill .t::after{content:attr(data-t);display:block}
.pill:hover .t{transform:translateY(-100%)}
.pill .fill{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#0c0c0c;
  clip-path:circle(0% at var(--fx,50%) var(--fy,50%));transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.pill:hover .fill{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}
.pill:hover{color:var(--white)}
.pill .arrow{flex:none;width:42px;height:42px;border-radius:16px 3px 16px 3px;background:var(--bg);color:var(--white);display:grid;place-items:center;font-size:1rem;
  transition:transform .55s cubic-bezier(.7,0,.2,1),background .45s,color .45s}
.pill:hover .arrow{background:var(--white);color:var(--bg)}
/* Arrow icon: one arrow shoots out top-right, a fresh one flies in from bottom-left */
.pill .arrow{position:relative;overflow:hidden}
.pill .arrow svg{position:absolute;inset:0;margin:auto;width:18px;height:18px;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.pill .arrow svg+svg{transform:translate(-160%,160%)}
.pill:hover .arrow svg:first-child{transform:translate(160%,-160%)}
.pill:hover .arrow svg+svg{transform:none;transition-delay:.08s}
.pill:not(:hover) .arrow{animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(19,19,19,.45)}70%,100%{box-shadow:0 0 0 7px rgba(19,19,19,0)}}

.pill.ghost{color:var(--white);padding:16px 30px;border:1px solid transparent;
  background:linear-gradient(#161616,#161616) padding-box,
             conic-gradient(from var(--a),#333 0 65%,#fff 80%,#333 95%) border-box;
  animation:sweep 4s linear infinite}
.pill.ghost .fill{background:var(--white)}
.pill.ghost:hover{color:var(--bg)}
@keyframes sweep{to{--a:360deg}}

header .pill{padding:5px 5px 5px 22px;gap:14px}
header .pill .arrow{width:36px;height:36px;border-radius:13px 3px 13px 3px}
header .pill{border-radius:18px 4px 18px 4px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:24px;height:2px;border-radius:40px;background:var(--muted);margin:5px 0}

/* Hero */
.hero{padding:170px 0 0;text-align:center;position:relative}
.hero h1{font-size:clamp(2.8rem,7vw,5rem);max-width:980px;margin:0 auto 28px}
.hero h1 em{font-style:normal;color:var(--muted)}
.hero p{max-width:620px;margin:0 auto 40px;font-size:1.15rem}
.hero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.socials{display:flex;gap:28px;justify-content:center;margin-top:36px;font-size:.95rem;color:var(--muted)}
.socials a:hover{color:var(--white)}
.portrait{position:relative;width:min(460px,80vw);margin:70px auto 0;aspect-ratio:4/5;overflow:hidden;border-radius:52px 52px 0 0}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.portrait{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hero-line{height:1px;background:var(--line);margin-top:-1px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stat{padding:48px 0 48px 32px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat small{display:block;color:var(--dim);font-size:1rem;font-weight:500;margin-bottom:6px}
.stat strong{color:var(--white);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1}

section{padding:130px 0}
.title{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.title span{display:block;color:var(--dim)}
.center{text-align:center}

/* About */
.about{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.about p{margin-bottom:22px}
.about p.big{color:var(--white);font-size:1.45rem;line-height:1.5;font-weight:500;letter-spacing:-.01em}

/* Services accordion */
.services{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.services .intro{position:sticky;top:130px}
.services .intro p{margin-top:24px;max-width:380px}
.acc{list-style:none;border-top:1px solid var(--line)}
.acc li{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;cursor:pointer;padding:30px 0;text-align:left;font:inherit}
.acc h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;color:var(--muted);transition:color .25s}
.acc .num{color:var(--dim);font-size:1rem;font-weight:600;margin-right:24px}
.acc .plus{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--white);display:grid;place-items:center;font-size:1.3rem;transition:transform .3s,background .3s,color .3s}
.acc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc .panel>div{overflow:hidden}
.acc .panel p{padding:0 64px 30px 0;max-width:620px}
.acc li.open h3,.acc button:hover h3{color:var(--white)}
.acc li.open .plus{transform:rotate(45deg);background:var(--white);color:var(--bg)}
.acc li.open .panel{grid-template-rows:1fr}

/* Experience */
.jobs{list-style:none;margin-top:70px;border-top:1px solid var(--line)}
.job{border-bottom:1px solid var(--line)}
.job-row{width:100%;display:grid;grid-template-columns:1.1fr 1.4fr 1fr 44px;gap:24px;align-items:center;padding:34px 0;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.job-row h4{font-size:1.4rem;font-weight:600}
.job-row .r{color:var(--text);font-size:1.05rem}
.job-row .d{color:var(--muted);font-size:1rem;text-align:right}
.job-row .d b{display:inline-block;background:var(--white);color:var(--bg);font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:500px;margin-right:8px;vertical-align:2px}
.job-row .plus{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);color:var(--white);display:grid;place-items:center;font-size:1.3rem;transition:transform .3s,background .3s,color .3s}
.job .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.job .panel>div{overflow:hidden}
.job ul{list-style:none;padding:0 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;max-width:960px}
.job ul li{position:relative;padding-left:22px;font-size:1rem}
.job ul li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--muted)}
.job.open .plus{transform:rotate(45deg);background:var(--white);color:var(--bg)}
.job.open .panel{grid-template-rows:1fr}
.job-row:hover h4{color:var(--white)}

/* Skills / Education */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:40px;padding:48px}
.card h3{font-size:1.6rem;margin-bottom:26px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{border:1px solid var(--line-2);border-radius:500px;padding:9px 18px;font-size:.95rem;color:var(--white)}
.edu small{color:var(--dim);font-weight:600;font-size:1rem}
.edu h4{font-size:1.5rem;margin:8px 0 6px}

/* Footer */
footer{border-top:1px solid var(--line);padding:130px 0 50px;text-align:center}
footer h2{font-size:clamp(2.6rem,7vw,5rem);max-width:900px;margin:0 auto 30px}
footer .reach{color:var(--muted);margin-bottom:10px}
footer .mail{display:inline-block;color:var(--white);font-size:clamp(1.3rem,3vw,2rem);font-weight:600;border-bottom:1px solid var(--line-2);padding-bottom:6px;transition:border-color .2s}
footer .mail:hover{border-color:var(--white)}
footer .phone{display:block;margin-top:18px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:110px;padding-top:30px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.foot nav{display:flex;gap:28px}
.foot nav a:hover{color:var(--white)}

/* Appear */
.up{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.up.in{opacity:1;transform:none}

@media (max-width:991px){
  .about,.services{grid-template-columns:1fr;gap:40px}
  .services .intro{position:static}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .job-row{grid-template-columns:1fr 44px;gap:6px 16px}
  .job-row h4{grid-column:1}
  .job-row .r,.job-row .d{grid-column:1;text-align:left}
  .job-row .plus{grid-column:2;grid-row:1/4}
  .job ul{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
}
@media (max-width:767px){
  .wrap{padding:0 22px}
  .menu,header .pill{display:none}
  .burger{display:block}
  .menu.open{display:flex;position:absolute;top:88px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .menu.open a{padding:18px 22px;border-top:1px solid var(--line)}
  .hero{padding-top:140px}
  section{padding:90px 0}
  .stat{padding:32px 0 32px 20px}
  .card{padding:32px;border-radius:28px}
  .acc .panel p{padding-right:0}
  footer{padding-top:90px}
}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.orb,.grid,.pill.ghost{animation:none}.pill .t,.pill .fill,.pill .arrow,.pill .arrow svg{transition:none}.pill .arrow{animation:none}}