:root{
  --bg:#f7f7fb; --surface:#ffffff; --ink:#0f172a; --muted:#525b76; --line:#e6e7ef;
  --accent:#6d28d9; --accent-2:#4f46e5; --accent-3:#22c55e;
  --blue-tint:#eef2ff;
  --nav-offset:96px; /* JS will update if header height changes */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body { max-width:100%; overflow-x:hidden; }
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.tone-pure {
  background: #feffff !important;
}
/* ================= NAV ================= */
.nav{
  position:fixed; top:12px; left:0; right:0; z-index:1000;
}
.nav-inner{display:flex;align-items:center;justify-content:center}
.navbar{
  display:flex;gap:1rem;align-items:center;background:var(--surface);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 8px 30px rgba(22,22,26,.06);
  padding:.5rem .75rem;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.brand{
  font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;letter-spacing:.5px;
  padding:.4rem .8rem;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  border:1px solid var(--line)
}
.links a,.links a:visited{
  color:var(--muted);text-decoration:none;padding:.4rem .7rem;
  border-radius:.6rem;font-weight:500;position:relative;
  transition:background .2s ease,color .2s ease
}
.links a:after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.35rem;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease
}
.links a:hover{background:#eeeff8;color:var(--ink)}
.links a:hover:after{transform:scaleX(1)}
.links a.active{color:var(--accent);font-weight:600}
.links a.active:after{transform:scaleX(1)}

/* Scroll blur/glass on nav when page moves */
.nav.scrolled .navbar{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* Mobile menu button */
.menu-toggle{
  display:none; width:42px; height:42px; margin-left:.25rem;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 18px rgba(17,17,26,.08);
  align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .2s ease;
}
.menu-toggle:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(17,17,26,.12); }
.menu-toggle i{ font-size:18px; color:var(--ink); }

/* Mobile drawer */
.nav-drawer{
  position:fixed; left:12px; right:12px; top:76px; z-index:1100;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(17,17,26,.18);
  padding:.8rem; opacity:0; transform:translateY(-8px);
  pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.drawer-links a{
  display:block; padding:.75rem .9rem; border-radius:.7rem;
  color:var(--ink); text-decoration:none; font-weight:600;
}
.drawer-links a:hover{ background:#eeeff8; }
.drawer-cta{ display:block; text-align:center; margin-top:.3rem; }

/* Open state */
body.menu-open{ overflow:hidden; }
body.menu-open .nav-drawer{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Hide inline links/cta on mobile, show toggle */
@media (max-width:900px){
  .menu-toggle{ display:inline-flex; }
  .links{ display:none; }
  .navbar .btn{ display:none; }
}

/* Give room for the fixed nav */
main{ padding-top: var(--nav-offset); }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  padding:.55rem .9rem;border-radius:.75rem;color:var(--surface);
  text-decoration:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:transform .15s ease, box-shadow .2s ease
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(79,70,229,.25)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:#eeeff8}

/* ================= HERO ================= */
.hero{position:relative;padding:96px 0}
.blobs:before,.blobs:after{content:"";position:absolute;filter:blur(40px);opacity:.35;pointer-events:none}
.blobs:before{width:420px;height:420px;left:-40px;top:-60px;background:radial-gradient(closest-side,#a78bfa,transparent)}
.blobs:after{width:420px;height:420px;right:-40px;bottom:-60px;background:radial-gradient(closest-side,#34d399,transparent)}
h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;margin:.2rem 0 .6rem}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.25rem;align-items:center}
.hero.blobs{overflow:hidden}
.hero.blobs .container{position:relative;z-index:1}

/* ================= CARDS ================= */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:1rem;
  padding:1.1rem; box-shadow:0 6px 16px rgba(22,22,26,.05);
  transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease;
}
.project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.project-head .chip{margin-top:2px}
.card:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 18px 40px rgba(79,70,229,.25); border-color:rgba(79,70,229,.3); }

/* ================= AVATAR ================= */
.portrait{ position:relative; width:min(86vw,360px); aspect-ratio:1/1; margin-inline:auto; overflow:visible; }
.portrait .photo{
  position:relative; inset:0; width:100%; height:100%; border-radius:50%; overflow:hidden;
  border:8px solid #fff; box-shadow:0 20px 45px rgba(17,17,26,.16); z-index:3;
}
.portrait .photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.portrait .glow{ position:absolute; inset:-34px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(99,102,241,.35), transparent 70%); filter:blur(18px); z-index:1; }
.portrait .frame{
  position:absolute; inset:-12px; border-radius:50%;
  background:conic-gradient(from 0deg,#8b5cf6,#22c55e,#60a5fa,#f59e0b,#8b5cf6);
  filter:saturate(115%); animation:spin 14s linear infinite; z-index:2;
  mask:radial-gradient(circle at 50% 50%, transparent 64%, #000 66%);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 64%, #000 66%);
}
.portrait .orbit{position:absolute; inset:-6px; border-radius:50%; animation:spin 18s linear infinite; z-index:4; pointer-events:none;}
.portrait .orbit.rev{ animation-duration:22s; animation-direction:reverse; }
.portrait .badge{ position:absolute; top:-10px; left:50%; transform:translate(-50%,0);
  width:46px; height:46px; border-radius:50%; background:#fff; color:#4f46e5;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(17,17,26,.18);}
.portrait .badge i{ font-size:18px; }
.portrait .badge.bolt{ color:#f59e0b; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ================= LAYOUTS ================= */
section{padding:72px 0}
section[id]{ scroll-margin-top: var(--nav-offset); }
.section-head{margin-bottom:18px}
.section-head h2{font-family:"Space Grotesk";font-size:2.2rem;margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

/* ================= BADGES ================= */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:999px;border:1px dashed var(--line);background:#f4f4fb;color:#3f3f46;font-size:.8rem;transition: transform .3s ease, box-shadow .3s ease}
.chip:hover {transform: translateY(-6px) scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,.15);}
.tag{display:inline-block;margin:.25rem .35rem .35rem 0;padding:.35rem .7rem;border-radius:.6rem;border:1px solid #ddd;background:#fafafa;color:#4338ca;font-weight:600;font-size:.8rem;transition:all .3s ease;cursor:default}
.tag:hover{transform:translateY(-4px) scale(1.08);background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;box-shadow:0 8px 20px rgba(99,102,241,.4);}

/* ================= TIMELINE ================= */
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:linear-gradient(var(--accent),var(--accent-2))}
.t-item{position:relative;margin-bottom:16px}
.t-item:before{content:"";position:absolute;left:-16px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* ================= SKILLS ================= */
#skills { background: linear-gradient(180deg,#f0f6ff 0%,#ffffff 100%); padding: 60px 0; }
.skills-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px; justify-items:center; max-width:1100px; margin:0 auto;
}
.flip{ width:100%; max-width:180px; perspective:1000px; }
.flip-inner{ position:relative; width:100%; height:80px; cursor:pointer; transition:transform .6s; transform-style:preserve-3d; }
.flip:hover .flip-inner{ transform:rotateY(180deg); }
.front,.back{
  position:absolute; inset:0; border-radius:.75rem; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:.4rem .5rem; font-weight:700; backface-visibility:hidden;
  box-shadow:0 8px 20px rgba(17,17,26,.08);
}
.front{ background:linear-gradient(180deg,hsla(var(--h,260),70%,55%,1),hsla(var(--h,260),70%,48%,1)); color:#fff; }
.back{ transform:rotateY(180deg); background:linear-gradient(180deg,hsla(var(--h,260),70%,94%,1),hsla(var(--h,260),70%,90%,1)); color:#0f172a; font-size:.86rem; font-weight:600; }
.skills-grid .flip:nth-child(6n+1){ --h:265; }
.skills-grid .flip:nth-child(6n+2){ --h:35; }
.skills-grid .flip:nth-child(6n+3){ --h:210; }
.skills-grid .flip:nth-child(6n+4){ --h:15; }
.skills-grid .flip:nth-child(6n+5){ --h:155; }
.skills-grid .flip:nth-child(6n){ --h:295; }
@media (max-width:1200px){ .skills-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:992px) { .skills-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:768px) { .skills-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .skills-grid{ grid-template-columns:repeat(2,1fr); } .flip-inner{ height:72px; } }

/* ================= FOOTER ================= */
.footer{
  padding:28px 0; border-top:1px solid var(--line); text-align:center; color:var(--muted);
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#6a11cb,#2575fc); border-image-slice:1;
}

/* Chips state colors */
.chip.success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.chip.warn{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-inner{justify-content:flex-start;padding:0 1rem}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.show{opacity:1;transform:none}