:root{
  --bg:#0c1020;--panel:rgba(255,255,255,.075);--panel-strong:rgba(255,255,255,.11);
  --text:#f7f7fb;--muted:#aab0c2;--line:rgba(255,255,255,.12);
  --pink:#ff4db8;--purple:#8c5cff;--blue:#6ea8ff;--radius:26px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 10% 0%,rgba(140,92,255,.24),transparent 26%),
radial-gradient(circle at 85% 20%,rgba(255,77,184,.15),transparent 28%),
var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 40px));margin:auto}
.ambient{position:fixed;border-radius:999px;filter:blur(100px);opacity:.2;pointer-events:none;z-index:-1}
.ambient-one{width:420px;height:420px;background:var(--purple);top:15%;left:-180px}
.ambient-two{width:360px;height:360px;background:var(--pink);right:-180px;top:45%}
.nav-wrap{position:sticky;top:0;z-index:50;padding:18px 0;background:linear-gradient(to bottom,rgba(12,16,32,.92),rgba(12,16,32,.55),transparent);backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid var(--line);background:rgba(20,24,44,.72);border-radius:20px}
.brand{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font-weight:800;background:linear-gradient(135deg,var(--purple),var(--pink))}
.nav-links{display:flex;gap:28px}.nav-links a{color:var(--muted);font-size:14px}.nav-links a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:10px}.lang{background:transparent;border:1px solid var(--line);color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:15px;background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:700;border:0;box-shadow:0 12px 35px rgba(140,92,255,.28)}
.button-small{padding:11px 15px;font-size:14px}.button.ghost{background:transparent;border:1px solid var(--line);box-shadow:none}
.hero{min-height:82vh;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:80px 0}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;color:#d6c9ff;margin-bottom:18px}
h1,h2,h3{font-family:Manrope,Inter,sans-serif}h1{font-size:clamp(54px,7vw,98px);line-height:.95;letter-spacing:-.065em;margin:0 0 28px;max-width:820px}
h1 span,h1 em{display:block}h1 em{font-style:normal;background:linear-gradient(90deg,#fff,var(--pink));-webkit-background-clip:text;color:transparent}
.lead{font-size:20px;line-height:1.65;color:var(--muted);max-width:690px}.hero-actions{display:flex;gap:12px;margin:32px 0}
.metrics{display:flex;gap:34px;margin-top:48px}.metrics div{display:flex;flex-direction:column;gap:6px}.metrics strong{font-size:30px}.metrics span{color:var(--muted);font-size:13px}
.portrait-card{position:relative;border-radius:38px;min-height:590px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035));box-shadow:0 35px 90px rgba(0,0,0,.35)}
.portrait-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;mix-blend-mode:normal}
.portrait-glow{position:absolute;inset:15% 8% 0;background:radial-gradient(circle,var(--purple),transparent 65%);filter:blur(45px);opacity:.45}
.status-card{position:absolute;bottom:24px;left:24px;right:24px;display:flex;gap:12px;align-items:center;padding:16px 18px;border-radius:18px;background:rgba(15,18,34,.72);backdrop-filter:blur(16px);border:1px solid var(--line)}
.status-dot{width:10px;height:10px;border-radius:50%;background:#58e39a;box-shadow:0 0 0 6px rgba(88,227,154,.12)}.status-card div{display:flex;flex-direction:column}.status-card small{color:var(--muted);margin-top:3px}
.logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:24px 0 70px}.logos span{padding:11px 16px;border:1px solid var(--line);border-radius:999px;color:#d8dbea;background:rgba(255,255,255,.035)}
.section{padding:105px 0}.section-heading{max-width:850px;margin-bottom:48px}.section-heading h2,.contact h2{font-size:clamp(38px,5vw,67px);letter-spacing:-.045em;line-height:1.08;margin:0}
.timeline{border-left:1px solid var(--line);margin-left:120px}.timeline-item{display:grid;grid-template-columns:140px 1fr;gap:32px;margin-left:-120px;padding-bottom:24px}.year{padding-top:28px;color:#d7ccff;font-size:13px;font-weight:700}
.timeline-card{position:relative;padding:26px 30px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.timeline-card:before{content:"";position:absolute;left:-38px;top:35px;width:11px;height:11px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 7px rgba(255,77,184,.12)}
.timeline-card h3{font-size:24px;margin:0}.company{color:#c8b9ff;font-weight:700}.timeline-card p:last-child{color:var(--muted);line-height:1.7}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project{min-height:290px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.035));transition:.25s transform,.25s border-color}
.project:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28)}.project.featured{grid-column:span 2;min-height:360px;background:linear-gradient(145deg,rgba(140,92,255,.26),rgba(255,77,184,.12))}
.project-top{display:flex;justify-content:space-between;align-items:center}.pill,.tags span{display:inline-flex;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;color:#e6e6ef}.project-index{font-size:12px;color:var(--muted)}
.project h3{font-size:34px;margin:48px 0 14px}.project p{color:var(--muted);line-height:1.7;max-width:760px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.skill-card{padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.skill-card h3{margin:0 0 14px}.skill-card p{color:var(--muted);line-height:1.7}
.education-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.edu-card{display:flex;gap:22px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.edu-card>span{color:var(--pink);font-weight:800}.edu-card h3{margin:0 0 8px}.edu-card p{margin:0;color:var(--muted)}
.contact{margin-top:70px;margin-bottom:90px;padding:46px;display:grid;grid-template-columns:1.4fr .6fr;gap:30px;align-items:end;border:1px solid var(--line);border-radius:34px;background:linear-gradient(135deg,rgba(140,92,255,.22),rgba(255,77,184,.12))}
.contact h2{font-size:clamp(34px,4vw,56px)}.contact-actions{display:flex;flex-direction:column;gap:12px}.phone{text-align:center;color:var(--muted);padding-top:8px}
footer{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;padding:0 0 30px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:40px}.hero-visual{order:-1}.portrait-card{min-height:520px}.project-grid,.skills-grid,.education-grid,.contact{grid-template-columns:1fr}.project.featured{grid-column:span 1}.timeline{margin-left:0;border-left:0}.timeline-item{grid-template-columns:1fr;margin-left:0}.timeline-card:before{display:none}.year{padding:0}.contact{align-items:start}}
@media(max-width:620px){.shell{width:min(100% - 24px,1180px)}.nav-actions .button-small{display:none}h1{font-size:54px}.metrics{gap:18px}.metrics strong{font-size:24px}.portrait-card{min-height:430px}.section{padding:75px 0}.project h3{margin-top:34px}.contact{padding:28px}footer{flex-direction:column;gap:8px}}


/* Interactive cursor */
@media (pointer:fine){
  body{cursor:none}
  a,button,.project,.timeline-card,.skill-card,.edu-card{cursor:none}
  .cursor-dot,.cursor-ring{
    position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:7px;height:7px;background:#fff;
    box-shadow:0 0 14px rgba(255,255,255,.9),0 0 24px rgba(140,92,255,.7);
  }
  .cursor-ring{
    width:34px;height:34px;border:1px solid rgba(255,255,255,.65);
    box-shadow:0 0 26px rgba(140,92,255,.28);
    transition:width .18s ease,height .18s ease,border-color .18s ease,background .18s ease;
  }
  body.cursor-hover .cursor-ring{
    width:52px;height:52px;border-color:rgba(255,77,184,.9);
    background:rgba(255,77,184,.08);
  }
}

/* Smaller, sharper portrait composition */
.hero{
  grid-template-columns:1.28fr .72fr;
}
.compact-portrait{
  max-width:420px;
  width:100%;
  justify-self:end;
}
.compact-portrait .portrait-card{
  min-height:500px;
}
.compact-portrait .portrait-card img{
  object-position:center 10%;
}

/* Electric hover details */
.electric-card,
.timeline-card,
.skill-card,
.edu-card,
.button,
.nav,
.portrait-card{
  position:relative;
  isolation:isolate;
}
.electric-card::after,
.timeline-card::after,
.skill-card::after,
.edu-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(115deg,transparent 15%,rgba(110,168,255,.8) 38%,rgba(255,77,184,.8) 55%,transparent 78%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;
}
.electric-card:hover::after,
.timeline-card:hover::after,
.skill-card:hover::after,
.edu-card:hover::after{
  opacity:1;
}
.electric-card:hover,
.timeline-card:hover,
.skill-card:hover,
.edu-card:hover{
  box-shadow:0 20px 60px rgba(53,44,110,.24),0 0 36px rgba(110,168,255,.08);
}

/* Lightning flash used on page and language transitions */
.electric-flash{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:0;
  background:
    linear-gradient(120deg,transparent 0 43%,rgba(255,255,255,.95) 44%,rgba(110,168,255,.9) 45%,transparent 47%),
    radial-gradient(circle at 50% 50%,rgba(140,92,255,.22),transparent 45%);
  mix-blend-mode:screen;
}
.electric-flash.active{
  animation:electricFlash .48s ease-out;
}
@keyframes electricFlash{
  0%{opacity:0}
  15%{opacity:.95}
  30%{opacity:.15}
  45%{opacity:.7}
  100%{opacity:0}
}

/* Magnetic buttons */
.magnetic{
  will-change:transform;
  transition:transform .18s ease,box-shadow .18s ease;
}

/* Section entrance feels more cinematic */
.reveal{
  filter:blur(10px);
}
.reveal.visible{
  filter:blur(0);
}


/* V3 layout adjustments */
.hero{
  grid-template-columns:1fr !important;
  min-height:72vh;
}
.hero-copy{
  max-width:980px;
}
.compact-portrait,.hero-visual{display:none !important}

.contact{
  grid-template-columns:180px 1fr .62fr !important;
  align-items:center !important;
}
.contact-portrait{
  width:150px;
  aspect-ratio:1;
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  box-shadow:0 20px 55px rgba(0,0,0,.28);
}
.contact-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 10%;
}
.contact-copy h2{
  font-size:clamp(32px,4vw,52px);
}

@media(max-width:900px){
  .contact{grid-template-columns:1fr !important}
  .contact-portrait{width:120px}
}


/* Real SVG lightning effect */
.lightning-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10000;
  overflow:hidden;
}
.lightning-svg{
  position:absolute;
  left:0;
  top:0;
  overflow:visible;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(110,168,255,.95))
    drop-shadow(0 0 22px rgba(140,92,255,.75));
}
.lightning-main{
  fill:none;
  stroke:#ffffff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:drawBolt .16s ease-out forwards, fadeBolt .38s .12s ease-out forwards;
}
.lightning-glow{
  fill:none;
  stroke:#79a8ff;
  stroke-width:8;
  opacity:.68;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:drawBolt .16s ease-out forwards, fadeBolt .42s .1s ease-out forwards;
}
.lightning-branch{
  fill:none;
  stroke:#d8e5ff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:drawBolt .14s .03s ease-out forwards, fadeBolt .32s .14s ease-out forwards;
}
@keyframes drawBolt{to{stroke-dashoffset:0}}
@keyframes fadeBolt{to{opacity:0}}

.energy-ring{
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid rgba(148,185,255,.95);
  box-shadow:0 0 15px rgba(110,168,255,.9),0 0 35px rgba(140,92,255,.65);
  transform:translate(-50%,-50%) scale(.15);
  opacity:1;
  animation:ringBurst .48s ease-out forwards;
}
@keyframes ringBurst{
  0%{transform:translate(-50%,-50%) scale(.15);opacity:1}
  70%{opacity:.75}
  100%{transform:translate(-50%,-50%) scale(5.2);opacity:0}
}
.spark{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff,0 0 14px #79a8ff;
  transform:translate(-50%,-50%);
  animation:sparkMove .45s ease-out forwards;
}
@keyframes sparkMove{
  from{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}
  to{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.15)}
}
.screen-strike{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--x) var(--y),rgba(255,255,255,.75),rgba(124,164,255,.22) 9%,transparent 30%);
  mix-blend-mode:screen;
  opacity:0;
  animation:strikeFlash .28s ease-out forwards;
}
@keyframes strikeFlash{
  0%{opacity:0}
  14%{opacity:1}
  30%{opacity:.18}
  46%{opacity:.72}
  100%{opacity:0}
}