:root{
  --bg:#03050a;
  --border:rgba(59,130,246,.35);
  --bh:rgba(59,130,246,.7);
  --accent:#3b82f6;
  --accent2:#60a5fa;
  --text:#eef2ff;
  --muted:#8fb4f0;
  --glow:rgba(59,130,246,.4);
  --w:150px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-touch-callout:none;
  cursor:default;
}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#03050a}
body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
  border-radius:10px;
  box-shadow:0 0 12px rgba(59,130,246,.8);
}
body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#60a5fa,#2563eb);
  box-shadow:0 0 18px rgba(96,165,250,1);
}
html{scrollbar-color:#3b82f6 #03050a;scrollbar-width:thin}

.scroll-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#1d4ed8,#60a5fa,#93c5fd);
  z-index:9999;pointer-events:none;
  box-shadow:0 0 12px rgba(96,165,250,.9),0 0 24px rgba(59,130,246,.6);
  transition:width .1s linear;
}

.bg-glow{
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(59,130,246,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.07) 1px,transparent 1px);
  background-size:48px 48px,48px 48px;
  animation:gridmove 5s linear infinite,gridpulse 6s ease-in-out infinite;
}
.bg-glow::before,.bg-glow::after{
  content:"";position:absolute;border-radius:50%;
  will-change:transform,opacity;
}
.bg-glow::before{
  width:80vmax;height:60vmax;top:-22%;left:-18%;
  background:radial-gradient(closest-side,rgba(59,130,246,.24),transparent);
  animation:glowA 13s ease-in-out infinite alternate;
}
.bg-glow::after{
  width:70vmax;height:55vmax;bottom:-25%;right:-20%;
  background:radial-gradient(closest-side,rgba(37,99,235,.22),transparent);
  animation:glowB 16s ease-in-out infinite alternate;
}
@keyframes gridmove{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}
@keyframes gridpulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes glowA{0%{transform:translate(0,0) scale(1);opacity:.65}50%{opacity:1}100%{transform:translate(14vw,12vh) scale(1.25);opacity:.75}}
@keyframes glowB{0%{transform:translate(0,0) scale(1.1);opacity:1}50%{opacity:.65}100%{transform:translate(-12vw,-10vh) scale(.9);opacity:.9}}

.wrap{max-width:1200px;margin:0 auto;padding:2.2rem 1.4rem 5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;position:relative;z-index:1}

h1{
  font-size:2.5rem;font-weight:800;
  background:linear-gradient(135deg,#fff 25%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-align:center;margin-bottom:.7rem;
}
.bio{color:var(--muted);text-align:center;max-width:520px;margin-bottom:1.3rem;font-size:.95rem}

.portfolio-sec{
  width:100%;
  display:flex;justify-content:center;
  position:relative;z-index:1;
  padding:0 1.4rem;
  margin-top:1rem;
}
.pf-wrap{
  max-width:1200px;width:100%;
  display:flex;flex-direction:column;align-items:center;
}
.eyebrow{
  display:inline-block;
  margin:2rem 0 1.6rem;
  padding:.4rem 1.1rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent2);
  background:rgba(59,130,246,.12);
  border:1px solid rgba(96,165,250,.35);
  border-radius:99px;
  box-shadow:0 0 18px rgba(59,130,246,.25),inset 0 1px 0 rgba(147,197,253,.35);
  position:relative;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:.6rem;
  border-radius:50%;
  background:#60a5fa;
  box-shadow:0 0 10px #60a5fa,0 0 20px rgba(96,165,250,.6);
  vertical-align:middle;
  transform:translateY(-1px);
}

.container{margin-bottom:2.2rem;max-width:100%}
.tabs{
  display:flex;position:relative;
  background:rgba(5,8,16,.88);
  border:1px solid var(--border);
  padding:.5rem;border-radius:99px;
  touch-action:pan-y;max-width:100%;
  cursor:grab;
  box-shadow:0 0 24px rgba(59,130,246,.15);
}
.tabs.dragging{cursor:grabbing}
.tabs.dragging .glider{transition:none;box-shadow:0 0 26px var(--glow),0 0 0 1px var(--bh)}
.tabs *{z-index:2}
.container input{display:none}
.tab{
  min-width:0;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  height:40px;width:var(--w);
  font-size:.85rem;font-weight:700;letter-spacing:.4px;
  color:var(--muted);border-radius:99px;cursor:pointer;
  transition:color .2s;text-transform:uppercase;
  user-select:none;-webkit-user-select:none;
}
.tab svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;pointer-events:none}
.container input:checked+label{color:#fff}
#f1:checked~.glider{transform:translateX(0)}
#f2:checked~.glider{transform:translateX(100%)}
#f3:checked~.glider{transform:translateX(200%)}
.glider{
  position:absolute;height:40px;width:var(--w);
  background:rgba(59,130,246,.35);
  border:1px solid var(--bh);
  z-index:1;border-radius:99px;
  box-shadow:0 0 14px var(--glow);
  transition:transform .3s cubic-bezier(.34,1.3,.64,1);
  pointer-events:none;
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem;width:100%}
.vcard{
  background:rgba(8,13,26,.78);backdrop-filter:blur(4px);
  border:1px solid var(--border);border-radius:1.25rem;
  overflow:hidden;cursor:pointer;
  opacity:0;
  transition:transform .25s,border-color .2s,box-shadow .2s;
}
.vcard.in{opacity:1;animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.vcard:hover{
  transform:translateY(-6px);border-color:var(--bh);
  background:rgba(12,22,46,.85);
  box-shadow:0 20px 32px rgba(59,130,246,.3);
}
.thumb{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#070b16,#1e3a8a);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s;pointer-events:none}
.vcard:hover .thumb img{transform:scale(1.06)}
.play{
  width:54px;height:54px;border-radius:50%;
  background:rgba(3,5,10,.75);
  border:1px solid var(--accent2);
  display:flex;align-items:center;justify-content:center;
  z-index:1;color:var(--accent2);transition:.25s;
}
.vcard:hover .play{background:var(--accent);color:#fff;transform:scale(1.12);box-shadow:0 0 20px var(--glow)}
.vinfo{
  padding:.85rem 1rem 1rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;border-top:1px solid rgba(59,130,246,.2);
}
.vtitle{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.tag{font-size:.65rem;letter-spacing:1px;color:var(--accent2);background:rgba(59,130,246,.2);padding:.2rem .6rem;border-radius:30px;white-space:nowrap}

.loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:1.1rem}
.loader{width:56px;height:56px;position:relative}
.loader i{position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:.6;animation:ring 1.5s infinite}
.loader i+i{animation-delay:-.75s;background:var(--accent2)}
@keyframes ring{0%{transform:scale(.3);opacity:.8}80%,100%{transform:scale(1.2);opacity:0}}
.ltxt{font-size:.85rem;letter-spacing:2px;color:var(--accent2);background:rgba(59,130,246,.15);padding:.4rem 1.2rem;border-radius:40px}

.modal{
  display:none;position:fixed;inset:0;
  background:rgba(3,7,22,.94);backdrop-filter:blur(16px);
  z-index:100;justify-content:center;align-items:center;padding:1rem;
}
.modal.on{display:flex;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}}
.mc{
  position:relative;width:100%;max-width:1000px;
  border:1px solid rgba(59,130,246,.6);
  border-radius:1.6rem;overflow:hidden;background:#000;
  animation:pop .45s cubic-bezier(.34,1.3,.64,1);
  box-shadow:0 0 50px var(--glow);
}
@keyframes pop{from{transform:scale(.9) translateY(30px);opacity:0}}
.mc.vert{max-width:min(380px,100%)}
.mc iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.mc.vert iframe{aspect-ratio:9/16;max-height:82vh}
.x{
  position:absolute;top:12px;right:12px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bh);background:rgba(0,0,0,.75);
  color:#fff;font-size:18px;cursor:pointer;z-index:2;transition:.3s;
}
.x:hover{background:var(--accent);transform:rotate(90deg) scale(1.1)}

.feat{
  width:100%;max-width:820px;margin:0 auto 2.4rem;
  border:1px solid var(--bh);border-radius:1.5rem;overflow:hidden;
  background:rgba(22,36,71,.75);cursor:pointer;
  box-shadow:0 0 30px rgba(59,130,246,.25);
  transition:.3s;position:relative;
}
.feat:hover{transform:translateY(-4px);box-shadow:0 0 44px var(--glow)}
.feat .thumb{aspect-ratio:16/9}
.feat .play{width:74px;height:74px;font-size:1.4rem}
.feat .vinfo{padding:1rem 1.2rem}
.feat .vtitle{font-size:1.05rem;white-space:normal}

.featured-sec{
  width:100%;
  display:flex;justify-content:center;
  margin:1.5rem 0 2.2rem;
}

.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv-r{transform:translateX(70px)}
.rv.in{opacity:1;transform:none}
.timeline .clip{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.featured-sec.in .timeline .clip{transform:scaleX(1)}
.timeline .c2{transition-delay:.3s}.timeline .c3{transition-delay:.6s}.timeline .c4{transition-delay:.15s}.timeline .c5{transition-delay:.45s}
.timeline .c6{transition-delay:.25s}.timeline .c7{transition-delay:.5s}.timeline .c8{transition-delay:.7s}
@media (prefers-reduced-motion:reduce){.rv,.vcard,.timeline .clip{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center;width:100%;margin:1rem 0 2rem}
.hero h1{text-align:left;font-size:3rem;line-height:1.1;font-weight:800;margin-bottom:1.2rem;background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff}
.hero em{font-style:normal}
.lime{background:linear-gradient(90deg,#93c5fd,#3b82f6 55%,#1d4ed8);-webkit-background-clip:text;background-clip:text;color:transparent}
.vio{color:#60a5fa}
.hero .bio{text-align:left;margin:0 0 1.6rem;max-width:520px;line-height:1.7}
.hero .bio b{color:#fff}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:14px 26px;border-radius:999px;
  font-weight:600;font-size:.95rem;text-decoration:none;color:#fff;
  position:relative;overflow:hidden;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(96,165,250,.4);
  transition:transform .25s,filter .3s,box-shadow .3s;
}
.btn.pri{
  background:linear-gradient(180deg,rgba(96,165,250,.5),rgba(37,99,235,.34));
  box-shadow:inset 0 1px 0 rgba(147,197,253,.55),0 12px 34px -10px rgba(59,130,246,.75);
}
.btn.pri:hover{
  transform:translateY(-2px);filter:brightness(1.14);
  box-shadow:inset 0 1px 0 rgba(147,197,253,.55),0 20px 46px -10px rgba(59,130,246,.65);
}

.hero-tl{width:100%}
.hero-tl .feat{margin:0;max-width:none;transform:perspective(1000px) rotateY(-9deg) rotateX(3deg);transition:transform .4s}
.hero-tl:hover .feat{transform:perspective(1000px) rotateY(0) rotateX(0) scale(1.02)}

.timeline-window{
  width:100%;
  max-width:820px;
  border:1px solid rgba(96,165,250,.35);
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(59,130,246,.03));
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(96,165,250,.4),0 10px 30px rgba(2,10,25,.4);
}
.tl-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  background:rgba(3,6,14,.85);
  border-bottom:1px solid rgba(96,165,250,.25);
}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)}
.dot.red{background:#ff5f57}
.dot.yellow{background:#febc2e}
.dot.green{background:#28c840}
.tl-title{
  margin-left:10px;
  font-size:.78rem;letter-spacing:.08em;
  color:#8fb4f0;text-transform:uppercase;font-weight:600;
}
.timeline{
  position:relative;overflow:hidden;padding:14px 16px;
}
.tl-head{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#60a5fa;margin-bottom:10px}
.tracks{display:flex;flex-direction:column;gap:8px;position:relative}
.track{height:20px;border-radius:5px;background:rgba(59,130,246,.12);position:relative;overflow:hidden}
.clip{position:absolute;top:0;bottom:0;border-radius:5px}
.c1{left:2%;width:34%;background:linear-gradient(90deg,#1d4ed8,#3b82f6)}
.c2{left:38%;width:26%;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.c3{left:66%;width:31%;background:linear-gradient(90deg,#1e40af,#3b82f6)}
.c4{left:8%;width:22%;background:linear-gradient(90deg,#3b82f6,#93c5fd)}
.c5{left:33%;width:30%;background:linear-gradient(90deg,#1d4ed8,#60a5fa)}
.c6{left:66%;width:30%;background:linear-gradient(90deg,#2563eb,#38bdf8)}
.c7{left:4%;width:44%;background:linear-gradient(90deg,#1e3a8a,#3b82f6)}
.c8{left:52%;width:44%;background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.playhead{position:absolute;top:-4px;bottom:-4px;z-index:3;width:2px;background:#93c5fd;box-shadow:0 0 12px #60a5fa;animation:play 2.6s ease-in-out infinite alternate}
@keyframes play{from{left:1%}to{left:99%}}

html{scroll-behavior:smooth}
@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .hero-tl .feat{transform:none}
  .clip{font-size:.55rem}
}

.cursor-dot{
  position:fixed;top:0;left:0;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(96,165,250,.6);
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .25s cubic-bezier(.34,1.56,.64,1),height .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,background .25s,opacity .3s;
}
.cursor-dot.hov{width:46px;height:46px;border-color:#60a5fa;background:rgba(59,130,246,.15)}
.cursor-dot.dn{width:14px;height:14px;background:rgba(96,165,250,.35)}
@media (hover:none),(max-width:900px){.cursor-dot{display:none}}

.totop{
  position:fixed;
  right:max(18px,env(safe-area-inset-right,0px));
  bottom:max(18px,env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(96,165,250,.45);
  background:linear-gradient(180deg,rgba(59,130,246,.45),rgba(29,78,216,.3));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;cursor:pointer;z-index:90;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(59,130,246,.7);
  opacity:0;transform:translateY(20px) scale(.8);
  pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-4px);box-shadow:0 16px 36px -8px rgba(96,165,250,.85)}
.totop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:2.5}
.totop .bg{stroke:rgba(96,165,250,.2)}
.totop .pr{stroke:#93c5fd;stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2}
.totop .ar{position:relative;width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;transform:none}

.foot{
  text-align:center;
  max-width:1200px;
  margin:4rem auto 0;
  padding:0 1.4rem calc(2.2rem + env(safe-area-inset-bottom,0px));
  position:relative;z-index:1;
}
.foot-line{height:1px;margin:0 auto 1.4rem;background:linear-gradient(90deg,transparent,rgba(96,165,250,.5),transparent)}
.foot-main{font-size:.85rem;letter-spacing:.5px;color:var(--muted)}
.foot-main b{color:#fff;letter-spacing:1px}
@media(max-width:680px){
  :root{--w:min(108px,calc((100vw - 3.8rem - 4px)/3))}
  h1{font-size:1.8rem}
  .tab{font-size:.68rem;gap:.25rem}
  .tab svg{width:13px;height:13px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .tl-title{font-size:.68rem}
  .eyebrow{font-size:.68rem;letter-spacing:.22em}
}
@media (prefers-reduced-motion:reduce){.playhead{animation:none!important}}

.apps{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;margin:0 0 1rem}
.apps-label{font-size:.78rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--accent2)}
.apps-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%}
.app{
  display:flex;align-items:center;gap:.9rem;
  min-width:220px;padding:.8rem 1.3rem .8rem .8rem;
  border:1px solid var(--border);border-radius:1.1rem;
  background:linear-gradient(180deg,rgba(59,130,246,.14),rgba(8,13,26,.78));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(147,197,253,.25);
  transition:transform .25s,border-color .2s,box-shadow .2s;
}
.app:hover{transform:translateY(-4px);border-color:var(--bh);box-shadow:inset 0 1px 0 rgba(147,197,253,.35),0 14px 30px -10px var(--glow)}
.ai{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  border:1px solid rgba(147,197,253,.6);
  box-shadow:0 0 18px var(--glow),inset 0 1px 0 rgba(255,255,255,.3);
}
.at{display:flex;flex-direction:column;line-height:1.25}
.at b{font-size:.98rem;color:#fff}
@media(max-width:680px){.app{min-width:0;width:100%}}
.portfolio-sec{touch-action:pan-y}

.scroll-hint{
  position:absolute;bottom:1.3rem;left:0;right:0;margin:0 auto;width:max-content;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  color:var(--accent2);text-decoration:none;
  font-size:.72rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;
}
.scroll-hint svg{animation:bob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--glow))}
.scroll-hint:hover{color:#fff}
.scroll-hint.gone{opacity:0;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bg-glow,.bg-glow::before,.bg-glow::after,.scroll-hint svg{animation:none!important}
}