* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:      #f0f7ff;
  --bg2:     #e4f0fc;
  --card:    #ffffff;
  --blue:    #3b82c4;
  --blue-lt: #6aaee0;
  --text:    #1a1a2e;
  --sub:     #444466;
  --muted:   #666688;
  --border:  rgba(59,130,196,0.15);
  --shadow:  rgba(59,130,196,0.1);
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; overflow-x:hidden; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue-lt); border-radius:3px; }

nav {
  position:fixed; top:0; width:100%; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 64px;
  background:rgba(240,247,255,0.93); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 16px var(--shadow);
}
.nav-logo { font-size:1rem; font-weight:700; color:var(--text); }
.nav-logo span { color:var(--blue); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  text-decoration:none; color:var(--sub); font-size:0.88rem;
  font-weight:500; transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--blue); transition:width .2s;
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }

#hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 64px 80px;
  background:linear-gradient(160deg,#ffffff 0%,#e8f3fd 55%,#d4eaf9 100%);
  position:relative; overflow:hidden;
}
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(70px); opacity:0.3;
}
.orb1 { width:480px; height:480px; background:radial-gradient(circle,#a8d4f0,transparent); top:-120px; right:-100px; }
.orb2 { width:340px; height:340px; background:radial-gradient(circle,#b8dff7,transparent); bottom:-80px; left:-80px; }
.hero-content { position:relative; max-width:680px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.9); border:1px solid rgba(59,130,196,0.25);
  border-radius:30px; padding:8px 20px; margin-bottom:28px;
  font-size:0.83rem; font-weight:600; color:var(--sub);
  box-shadow:0 4px 16px var(--shadow);
}
.blink {
  width:9px; height:9px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,0.5);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5)}
  50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
}
.hero-name {
  font-size:clamp(2.2rem,5.5vw,3.8rem); font-weight:800;
  color:var(--text); line-height:1.1; margin-bottom:12px; letter-spacing:-0.5px;
}
.hero-title {
  font-size:clamp(0.95rem,2vw,1.2rem); color:var(--blue);
  font-weight:600; margin-bottom:18px;
}
.hero-sub {
  color:var(--muted); font-size:0.96rem; line-height:1.8;
  max-width:500px; margin:0 auto 40px;
}
.scroll-down {
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted); font-size:0.75rem; font-weight:500; letter-spacing:1.5px;
  text-transform:uppercase; text-decoration:none;
  animation:bobdown 2s ease-in-out infinite;
}
@keyframes bobdown { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

section { padding:96px 64px; }
.section-label {
  font-size:0.73rem; color:var(--blue); letter-spacing:3px;
  text-transform:uppercase; font-weight:700; margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
}
.section-label::before { content:''; width:26px; height:2px; background:var(--blue); border-radius:1px; }
.section-title {
  font-size:clamp(1.6rem,2.8vw,2.1rem); font-weight:800;
  color:var(--text); margin-bottom:10px; letter-spacing:-0.3px;
}
.divider { width:48px; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-lt)); border-radius:2px; margin-bottom:44px; }

#about { background:#fff; }
.about-top { display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:start; margin-bottom:40px; }
.about-stats-left { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:start; }
.about-cards-col { display:flex; flex-direction:column; gap:20px; }

.about-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:18px; padding:28px 24px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.about-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px var(--shadow); border-color:var(--blue-lt); }
.about-card-icon { font-size:1.5rem; margin-bottom:10px; }
.about-card-title { font-size:0.72rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; }
.about-card p { color:var(--sub); font-size:0.89rem; line-height:1.75; }
.about-card p strong { color:var(--text); font-weight:400; }

.photo-circle {
  width:210px; height:210px; border-radius:50%;
  border:3px solid var(--blue-lt); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ddf0fc,#c5e4f7);
  box-shadow:0 6px 24px var(--shadow);
}
.photo-circle img { width:100%; height:100%; object-fit:cover; }


.stat-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:14px; padding:22px 16px; text-align:center;
  transition:transform .25s, box-shadow .25s;
  box-shadow:0 2px 10px var(--shadow);
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 10px 26px var(--shadow); }
.stat-num { font-size:1.45rem; font-weight:800; color:var(--text); display:block; line-height:1.2; }
.stat-label { font-size:0.74rem; color:var(--muted); margin-top:6px; line-height:1.4; }

.skill-group { margin-bottom:16px; }
.skill-group-title { font-size:0.7rem; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:2px; margin-bottom:9px; }
.skill-tags { display:flex; flex-wrap:wrap; gap:7px; }
.tag {
  background:var(--bg); border:1px solid var(--border);
  color:var(--sub); padding:5px 12px; border-radius:20px;
  font-size:0.77rem; font-weight:500; transition:all .2s;
}
.tag:hover { background:var(--bg2); color:var(--text); transform:translateY(-2px); }

#experience { background:var(--bg2); }
.exp-timeline { position:relative; padding-left:30px; }
.exp-timeline::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:2px; background:linear-gradient(to bottom,var(--blue-lt),rgba(106,174,224,0.1));
  border-radius:1px;
}
.exp-item { position:relative; margin-bottom:36px; }
.exp-item:last-child { margin-bottom:0; }
.exp-dot {
  position:absolute; left:-37px; top:12px;
  width:12px; height:12px; border-radius:50%;
  background:var(--blue); border:3px solid var(--bg2);
  box-shadow:0 0 0 2px var(--blue-lt);
}
.exp-card {
  background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:26px 28px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow:0 2px 10px var(--shadow);
}
.exp-card:hover { transform:translateX(6px); box-shadow:0 8px 28px var(--shadow); border-color:var(--blue-lt); }
.exp-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; margin-bottom:3px; }
.exp-role { font-size:0.98rem; font-weight:700; color:var(--text); }
.exp-date {
  font-size:0.75rem; color:var(--blue); font-weight:600;
  background:var(--bg); padding:4px 11px; border-radius:20px; white-space:nowrap;
  border:1px solid var(--border);
}
.exp-company { color:var(--blue); font-size:0.86rem; font-weight:600; margin-bottom:2px; }
.exp-location { color:var(--muted); font-size:0.79rem; margin-bottom:12px; }
.exp-bullets { list-style:disc; padding-left:18px; }
.exp-bullets li { color:var(--sub); font-size:0.89rem; line-height:1.7; padding-left:4px; margin-bottom:7px; }

#projects { background:#fff; }
.projects-layout { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:22px; align-items:stretch; }
.proj-card-large { grid-column:1; grid-row:1 / span 2; display:flex; flex-direction:column; }
.proj-card-large .proj-img-area { height:auto; min-height:unset; flex:none; }
.proj-stack { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:22px; }
.proj-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow:0 2px 10px var(--shadow); display:flex; flex-direction:column;
}
.proj-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px var(--shadow); border-color:var(--blue-lt); }
.proj-img-area {
  width:100%; height:160px; overflow:hidden;
  background:linear-gradient(135deg,#d6ecfa,#c0e1f5);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.proj-img-area img { width:100%; height:100%; object-fit:cover; }
.proj-card-large .proj-img-area img { width:100%; height:auto; object-fit:unset; }
.proj-body { padding:20px 18px; flex:1; display:flex; flex-direction:column; gap:10px; }
.proj-title { font-size:0.97rem; font-weight:700; color:var(--text); }
.proj-desc { color:var(--sub); font-size:0.86rem; line-height:1.6; flex:1; }
.proj-tags { display:flex; flex-wrap:wrap; gap:6px; }
.proj-tag { font-size:0.7rem; padding:3px 10px; border-radius:12px; background:#fff; color:var(--sub); border:1px solid var(--border); }

.toolkit {
  margin-top:52px; background:var(--bg2); border:1px solid var(--border);
  border-radius:18px; padding:32px 30px;
}
.toolkit-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:24px; letter-spacing:-0.2px; }

#contact { background:var(--bg2); display:flex; flex-direction:column; align-items:center; }
#contact .fade-in { display:flex; flex-direction:column; align-items:center; width:100%; }
#contact .section-title { text-align:center; }
#contact .divider { margin-left:auto; margin-right:auto; }
.contact-intro { color:var(--sub); font-size:0.95rem; line-height:1.78; max-width:500px; margin-bottom:40px; text-align:center; margin-left:auto; margin-right:auto; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:640px; margin-left:auto; margin-right:auto; }
.contact-card {
  background:#fff; border:1px solid var(--border);
  border-radius:16px; padding:22px 20px;
  display:flex; align-items:center; gap:14px;
  text-decoration:none; transition:all .25s;
  box-shadow:0 2px 10px var(--shadow);
}
.contact-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px var(--shadow); border-color:var(--blue-lt); }
.contact-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.ci-resume   { background:linear-gradient(135deg,#2a7fb5,#5aade0); }
.ci-email    { background:linear-gradient(135deg,#b23121,#e05a3a); }
.ci-linkedin { background:linear-gradient(135deg,#0a66c2,#3b97d3); }
.ci-github   { background:linear-gradient(135deg,#24292e,#4a5568); }
.contact-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.contact-name { font-size:0.92rem; font-weight:700; color:var(--text); }

footer { background:#fff; border-top:1px solid var(--border); text-align:center; padding:22px; color:var(--muted); font-size:0.82rem; }
footer span { color:var(--text); font-weight:600; }

.fade-in { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

@media(max-width:860px) {
  nav { padding:16px 24px; }
  section { padding:80px 24px; }
  #hero { padding:120px 24px 80px; }
  .about-top { grid-template-columns:1fr; justify-items:center; }
  .about-stats-left { width:100%; }
  .about-cards-col { width:100%; }
  .photo-wrap { display:flex; justify-content:center; }
  .contact-grid { grid-template-columns:1fr; max-width:100%; }
  .projects-layout { grid-template-columns:1fr; grid-template-rows:auto; }
  .proj-card-large { grid-column:1; grid-row:auto; }
  .proj-stack { grid-column:1; grid-row:auto; }
  .exp-timeline { padding-left:20px; }
  .exp-dot { left:-27px; }
}
@media(max-width:500px) {
  .nav-links { display:none; }
  .hero-name { font-size:2rem; }
  .section-title { font-size:1.4rem; }
  .about-stats-left { grid-template-columns:1fr 1fr; }
  .exp-header { flex-direction:column; }
  .contact-grid { grid-template-columns:1fr; }
  .toolkit { padding:24px 18px; }
}