/* floating stars (homepage only) */
.float-star-layer { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.float-star { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(180,225,255,.7); box-shadow:0 0 12px rgba(99,179,237,.7),0 0 22px rgba(79,209,197,.25); animation:floatStar var(--fs-dur,18s) ease-in-out infinite alternate, blinkStar var(--blink,4.8s) ease-in-out infinite; opacity:.55; }
.float-star.big { width:4px; height:4px; box-shadow:0 0 18px rgba(99,179,237,.9),0 0 34px rgba(183,148,244,.28); }
.float-star.tiny { width:2px; height:2px; opacity:.45; }
@keyframes floatStar { 0%{transform:translate3d(0,0,0) scale(.9);} 50%{transform:translate3d(var(--fs-x,28px),var(--fs-y,-42px),0) scale(1.15);} 100%{transform:translate3d(calc(var(--fs-x,28px) * -0.45),calc(var(--fs-y,-42px) * .65),0) scale(1);} }
@keyframes blinkStar { 0%,100%{opacity:.28;} 45%{opacity:.92;} 65%{opacity:.55;} }

/* hero aurora + grid */
.h-aurora { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 80% 55% at 15% 55%,rgba(99,179,237,.07) 0%,transparent 60%),radial-gradient(ellipse 55% 75% at 82% 28%,rgba(159,122,234,.05) 0%,transparent 60%),radial-gradient(ellipse 45% 45% at 55% 92%,rgba(79,209,197,.04) 0%,transparent 60%); animation:aur 14s ease-in-out infinite alternate; }
.h-grid { position:absolute; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(rgba(99,179,237,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(99,179,237,.028) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 65% 65% at 50% 50%,black 25%,transparent 75%); }

/* section base */
section { padding:96px 6%; position:relative; z-index:2; }
section:nth-child(even) { background:var(--bg-2); }

/* hero layout */
#hero { min-height:100vh; position:relative; display:flex; align-items:center; padding:100px 6% 80px; overflow:hidden; }
.hero-layout { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; max-width:1100px; width:100%; }
.hc { max-width:620px; }
.hero-name-label { font-size:14px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-2); margin-bottom:14px; }
.hname { font-size:clamp(34px,4.8vw,58px); font-weight:900; line-height:1.08; letter-spacing:-1.5px; margin-bottom:20px; color:#fff; }
.hn2 { background:linear-gradient(90deg,var(--teal) 0%,#a0f0e8 18%,var(--blue) 35%,var(--purple) 52%,var(--blue) 68%,#a0f0e8 82%,var(--teal) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:250% 100%; animation:wave-lr 5s ease-in-out infinite; }
@keyframes wave-lr { 0%{background-position:100% 0%;} 100%{background-position:0% 0%;} }
.htag { font-size:clamp(17px,2.2vw,22px); color:var(--text-2); font-weight:400; margin-bottom:26px; letter-spacing:-.2px; }
.htag strong { color:var(--text); font-weight:600; }
.hdesc { font-size:16px; color:var(--text-2); max-width:560px; line-height:1.82; margin-bottom:44px; }
.hbtns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px; }
.bprimary { position:relative; background:linear-gradient(135deg,var(--blue-v),#553c9a); color:#fff; padding:14px 30px; border-radius:10px; text-decoration:none; font-size:15px; font-weight:700; transition:all .25s; display:inline-flex; align-items:center; gap:8px; overflow:hidden; }
.bprimary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14),transparent); opacity:0; transition:opacity .25s; }
.bprimary:hover::before { opacity:1; }
.bprimary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,179,237,.34); }
.boutline { background:transparent; color:var(--text); padding:14px 30px; border-radius:10px; text-decoration:none; font-size:15px; font-weight:600; border:1px solid var(--border); transition:all .25s; display:inline-flex; align-items:center; gap:8px; }
.boutline:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); transform:translateY(-2px); }
.hstats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:14px; overflow:hidden; max-width:480px; }
.sc-cell { background:var(--bg-card); padding:20px 22px; transition:background .2s; }
.sc-cell:hover { background:var(--bg-card-hover); }
.sn { font-size:30px; font-weight:800; letter-spacing:-1px; background:linear-gradient(135deg,#fff,var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.sl { font-size:12px; color:var(--text-3); margin-top:4px; }

/* hero photo */
.hero-photo-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; flex-shrink:0; }
.hero-photo-ring { position:relative; width:300px; height:300px; }
.hero-photo-glow { position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle,rgba(99,179,237,0.18) 0%,rgba(79,209,197,0.08) 40%,transparent 70%); animation:aur 8s ease-in-out infinite alternate; pointer-events:none; }
.hero-photo { width:300px; height:300px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid rgba(99,179,237,0.3); position:relative; z-index:1; display:block; }
.hero-photo-badge { display:flex; align-items:center; gap:8px; background:rgba(99,179,237,0.08); border:1px solid rgba(99,179,237,0.2); border-radius:100px; padding:8px 18px; font-size:13px; font-weight:500; color:var(--text-2); }
.hpb-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); animation:breathe 2.5s ease-in-out infinite; flex-shrink:0; }

/* about */
.about-g { display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:start; max-width:1100px; }
.ap p { color:var(--text-2); font-size:16px; line-height:1.85; margin-bottom:22px; }
.ap p strong { color:#fff; font-weight:600; }
.pillars { display:flex; flex-direction:column; gap:13px; }
.pillar { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:21px 23px; transition:all .3s var(--ease); position:relative; overflow:hidden; cursor:default; }
.pillar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--blue),var(--teal)); opacity:0; transition:opacity .3s; }
.pillar:hover { border-color:var(--border-blue); background:var(--bg-card-hover); transform:translateX(5px); }
.pillar:hover::before { opacity:1; }
.pt { color:#fff; font-size:14px; font-weight:700; margin-bottom:5px; }
.pd { color:var(--text-2); font-size:13.5px; line-height:1.65; }

/* experience accordion */
.exps { max-width:860px; display:flex; flex-direction:column; gap:11px; }
.expitem { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .3s var(--ease); }
.expitem.open { border-color:rgba(99,179,237,.33); }
.expitem:hover { border-color:rgba(99,179,237,.18); }
.exphdr { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer; user-select:none; transition:background .2s; }
.exphdr:hover { background:rgba(255,255,255,.018); }
.exphdr-l { display:flex; align-items:center; gap:16px; }
.elogo { width:46px; height:46px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; border:1px solid var(--border); }
.lx { background:rgba(99,179,237,.12); color:var(--blue); border-color:rgba(99,179,237,.25); }
.lt { background:rgba(159,122,234,.12); color:var(--purple); border-color:rgba(159,122,234,.25); }
.lz { background:rgba(79,209,197,.12); color:var(--teal); border-color:rgba(79,209,197,.25); }
.lm { background:rgba(246,135,179,.12); color:var(--pink); border-color:rgba(246,135,179,.25); }
.lc { background:rgba(255,255,255,.05); color:var(--text-2); }
.erole { font-size:15.5px; font-weight:700; color:#fff; }
.eco { font-size:13px; color:var(--text-2); margin-top:2px; }
.exphdr-r { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.eperiod { font-size:12px; font-weight:600; letter-spacing:.4px; color:var(--text-3); white-space:nowrap; }
.expitem.open .eperiod { color:var(--blue); }
.ecur { font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px; background:rgba(79,209,197,.1); color:var(--teal); border:1px solid rgba(79,209,197,.22); }
.echev { width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); flex-shrink:0; color:var(--text-3); }
.expitem.open .echev { background:var(--blue-dim); border-color:rgba(99,179,237,.3); color:var(--blue); transform:rotate(180deg); }
.expbody { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1),padding .3s; padding:0 24px; }
.expitem.open .expbody { max-height:600px; padding-bottom:24px; }
.exp-impact { border-top:1px solid var(--border); padding-top:18px; color:var(--text); font-size:15px; line-height:1.78; font-weight:400; letter-spacing:-.2px; }
.ebullets { list-style:none; display:flex; flex-direction:column; gap:9px; }
.ebullets li { color:var(--text-2); font-size:14.5px; line-height:1.65; padding-left:18px; position:relative; }
.ebullets li::before { content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--teal)); }

/* skills */
.skill-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; max-width:1100px; }
.skill-box { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:24px; transition:all .3s var(--ease); }
.skill-box:hover { border-color:rgba(99,179,237,.28); background:var(--bg-card-hover); transform:translateY(-3px); }
.skill-box-title { font-size:16px; font-weight:700; color:#fff; margin-bottom:16px; letter-spacing:-.2px; }
.skill-box-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.spill { padding:8px 16px; border-radius:8px; font-size:13.5px; font-weight:500; border:1px solid var(--border); color:var(--text-2); cursor:default; transition:all .25s; position:relative; overflow:hidden; }
.spill::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--blue-dim),transparent); opacity:0; transition:opacity .25s; }
.spill:hover { color:#fff; border-color:var(--blue); transform:translateY(-2px); }
.spill:hover::before { opacity:1; }

/* contact */
#contact { text-align:center; }
.cwrap { max-width:600px; margin:0 auto; }
.ccard { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:50px 44px; margin-top:8px; position:relative; overflow:hidden; }
.ccard::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(99,179,237,.07) 0%,transparent 70%); pointer-events:none; }
.clinks { display:flex; flex-direction:column; gap:13px; margin:28px 0; }
.clink { display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:12px; padding:17px 21px; text-decoration:none; transition:all .3s var(--ease); color:var(--text); text-align:left; }
.clink:hover { border-color:var(--border-blue); background:var(--blue-dim); transform:translateX(6px); }
.cico { width:42px; height:42px; border-radius:10px; flex-shrink:0; background:var(--blue-dim); border:1px solid rgba(99,179,237,.2); display:flex; align-items:center; justify-content:center; }
.clbl { font-size:11px; color:var(--text-3); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.cval { font-size:15px; color:var(--text); font-weight:500; margin-top:1px; }

@media(max-width:900px) {
  .hero-layout { grid-template-columns:1fr; gap:40px; }
  .hero-photo-wrap { order:-1; }
  .hero-photo-ring { width:180px; height:180px; }
  .hero-photo { width:180px; height:180px; }
  .hero-photo-glow { inset:-14px; }
  .about-g { grid-template-columns:1fr; gap:40px; }
}
@media(max-width:768px) {
  .exphdr { padding:16px; }
  .exphdr-r { gap:8px; }
  .eperiod { display:none; }
  .ccard { padding:30px 20px; }
  section { padding:64px 5%; }
}