:root {
  --bg: #07090f;
  --bg-soft: #0d111b;
  --surface: rgba(255,255,255,.055);
  --surface-strong: #111725;
  --text: #f4f7fb;
  --muted: #9aa5b7;
  --line: rgba(255,255,255,.10);
  --accent: #7c5cff;
  --accent-2: #25d9ff;
  --accent-soft: rgba(124,92,255,.15);
  --shadow: 0 25px 80px rgba(0,0,0,.35);
  --radius: 24px;
}
body.light {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --surface: rgba(255,255,255,.82);
  --surface-strong: #ffffff;
  --text: #111827;
  --muted: #5f6b7a;
  --line: rgba(17,24,39,.10);
  --accent: #6046e8;
  --accent-2: #079fc5;
  --accent-soft: rgba(96,70,232,.10);
  --shadow: 0 25px 70px rgba(31,41,55,.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, sans-serif; background: var(--bg); color: var(--text);
  line-height: 1.65; overflow-x: hidden; transition: background .35s ease, color .35s ease;
}
body:before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background: radial-gradient(circle at 15% 10%, var(--accent-soft), transparent 30%),
              radial-gradient(circle at 90% 65%, rgba(37,217,255,.07), transparent 25%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.narrow { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 110px 0; position: relative; }
.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
  padding: 0 max(20px, calc((100vw - 1200px)/2)); backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:10px; font: 700 13px "Space Grotesk"; letter-spacing:.06em; white-space:nowrap; }
.brand-mark { width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:11px; }
.desktop-nav { display:flex; gap:25px; font-size:13px; color:var(--muted); }
.desktop-nav a, .mobile-nav a { transition: color .2s, transform .2s; }
.desktop-nav a:hover, .mobile-nav a:hover { color:var(--text); }
.header-actions { display:flex; gap:8px; }
.theme-toggle, .menu-toggle {
  width:40px; height:40px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--text); cursor:pointer; display:grid; place-items:center;
}
.menu-toggle { display:none; font-size:20px; }
.mobile-nav { display:none; position:absolute; top:76px; left:12px; right:12px; padding:12px;
  background:var(--surface-strong); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.mobile-nav.open { display:grid; }
.mobile-nav a { padding:12px 14px; border-radius:10px; }
.mobile-nav a:hover { background:var(--surface); }
.hero { min-height: 100vh; padding-top:150px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:70px; width:min(1200px,calc(100% - 40px)); margin:auto; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--line);
  border-radius:100px; color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.pulse-dot { width:7px;height:7px;border-radius:50%; background:#44e58b; box-shadow:0 0 0 6px rgba(68,229,139,.1); }
h1,h2,h3,.brand { font-family:"Space Grotesk",sans-serif; }
h1 { font-size:clamp(48px,8vw,100px); line-height:.93; letter-spacing:-.065em; margin:26px 0 18px; max-width:850px; }
h1 span,h2 span { color:var(--accent); }
.hero-role { font-size:clamp(16px,2vw,20px); color:var(--muted); }
.hero-role i { color:var(--accent-2); font-style:normal; margin:0 8px; }
.hero-text { max-width:610px; color:var(--muted); margin:20px 0 28px; font-size:16px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { padding:13px 19px; border-radius:13px; font-size:13px; font-weight:700; border:1px solid var(--line); transition:.25s; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#9279ff); color:#fff; border:0; box-shadow:0 10px 35px rgba(124,92,255,.25); }
.btn:hover { transform:translateY(-3px); }
.btn-ghost { background:var(--surface); }
.social-row { margin-top:28px; display:flex; gap:10px; color:var(--muted); font-size:12px; }
.social-row a:hover { color:var(--accent-2); }
.hero-image-wrap { min-height:550px; position:relative; display:grid; place-items:center; }
.profile-frame { width:min(390px,72vw); aspect-ratio:4/5; border-radius:42% 42% 18% 18%; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(145deg,var(--surface-strong),var(--surface));
  box-shadow:var(--shadow); transform:rotate(2deg); position:relative; z-index:2; }
.profile-frame img { width:100%;height:100%;object-fit:cover; display:block; }
.placeholder-content { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:8px;
  background:linear-gradient(145deg,rgba(124,92,255,.25),rgba(37,217,255,.08)); }
.placeholder-content span { font:700 90px "Space Grotesk"; color:rgba(255,255,255,.8); }
.placeholder-content small { color:var(--muted); }
.profile-frame:not(.image-placeholder) .placeholder-content { display:none; }
.image-orbit { position:absolute; border:1px solid var(--line); border-radius:50%; }
.orbit-one { width:500px;height:500px; animation:spin 22s linear infinite; }
.orbit-two { width:600px;height:600px; border-style:dashed; animation:spin 30s linear infinite reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
.floating-card { position:absolute; z-index:3; padding:14px 17px; border:1px solid var(--line); background:var(--surface);
  backdrop-filter:blur(15px); border-radius:15px; box-shadow:var(--shadow); display:grid; }
.floating-card strong { font:700 23px "Space Grotesk"; color:var(--accent-2); }
.floating-card span { color:var(--muted); font-size:10px; }
.card-top { top:100px; right:0; }
.card-bottom { bottom:90px; left:0; }
.section-heading { display:flex; gap:22px; align-items:flex-start; margin-bottom:50px; }
.section-number { color:var(--accent-2); font:600 12px "Space Grotesk"; padding-top:7px; }
.kicker { color:var(--muted); font:600 11px "Space Grotesk"; letter-spacing:.16em; margin-bottom:8px; }
h2 { font-size:clamp(32px,5vw,58px); letter-spacing:-.045em; line-height:1.05; }
.about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; }
.about-lead { font:500 clamp(22px,3vw,31px) "Space Grotesk"; line-height:1.35; letter-spacing:-.025em; }
.about-side { color:var(--muted); font-size:14px; }
.about-side p + p { margin-top:20px; }
.location { border-top:1px solid var(--line); padding-top:18px; }
.location strong { color:var(--text); }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.skill-card { padding:25px; border:1px solid var(--line); background:var(--surface); border-radius:18px; transition:.3s; }
.skill-card:hover { transform:translateY(-7px); border-color:rgba(124,92,255,.5); box-shadow:var(--shadow); }
.skill-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);
  color:var(--accent-2);font:700 15px "Space Grotesk";margin-bottom:18px; }
.skill-card h3 { font-size:18px; }
.skill-card p { color:var(--muted);font-size:12px;margin-top:5px; }
.skill-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.skill-tags span,.tech-row span { padding:7px 10px; border:1px solid var(--line); border-radius:100px; color:var(--muted); font-size:10px; }
.experience-list { display:grid; gap:14px; }
.experience-card { display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start; padding:24px;
  border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:.3s; }
.experience-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(124,92,255,.35); }
.experience-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-2); font:700 13px "Space Grotesk"; }
.experience-card h3 { font-size:16px; margin-bottom:6px; }
.experience-card p { color:var(--muted); font-size:13px; }
.projects-list { display:grid; gap:18px; }
.project-card { display:grid; grid-template-columns:65px 1fr 270px; gap:25px; align-items:center; padding:30px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:.35s; }
.project-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(124,92,255,.35); }
.project-index { color:var(--accent-2); font:600 12px "Space Grotesk"; align-self:start; }
.project-meta { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.project-content h3 { font-size:30px; margin:5px 0 7px; }
.project-content > p { color:var(--muted); font-size:13px; max-width:650px; }
.tech-row { display:flex; gap:6px; flex-wrap:wrap; margin:17px 0; }
.project-link { display:inline-flex; gap:7px; color:var(--accent-2); font-size:12px; font-weight:700; }
.project-link:hover { color:var(--text); }
.edit-note { display:block; color:var(--muted); opacity:.75; font-size:9px; margin-top:9px; }
code { font-family:monospace; color:var(--accent-2); }
.project-visual { min-height:180px; border-radius:18px; display:grid; place-items:center; align-content:center; gap:4px;
  border:1px solid var(--line); background:linear-gradient(145deg,var(--accent-soft),rgba(37,217,255,.06)); }
.project-visual span { font:700 58px "Space Grotesk"; letter-spacing:-.08em; }
.project-visual small { color:var(--muted); font-size:10px; }
.certificates-section { background:linear-gradient(180deg,transparent,rgba(124,92,255,.04),transparent); }
.certificates-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.certificate-card { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:12px; overflow:hidden; transition:.3s; }
.certificate-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.certificate-image { aspect-ratio:16/10; background:var(--bg-soft); border-radius:13px; overflow:hidden; display:grid; place-items:center; position:relative; }
.certificate-image img { width:100%;height:100%;object-fit:contain; display:block; }
.certificate-image > span { display:none; color:var(--muted); font:600 12px "Space Grotesk"; }
.certificate-image.cert-placeholder > span { display:block; }
.certificate-card h3 { font-size:16px; margin:15px 8px 2px; }
.certificate-card p { color:var(--muted); font-size:11px; margin:0 8px 9px; }
.certificate-note { color:var(--muted); font-size:11px; margin-top:18px; }
.contact-panel { padding:55px; border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,var(--accent-soft),var(--surface)); display:grid; grid-template-columns:1fr .9fr; gap:60px; }
.contact-panel h2 { margin:8px 0 18px; }
.contact-intro { color:var(--muted); max-width:490px; font-size:14px; }
.contact-details { display:grid; gap:0; }
.contact-details a,.contact-details div { padding:14px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.contact-details span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.contact-details strong { font-size:13px; font-weight:600; margin-top:2px; }
.contact-details a:hover strong { color:var(--accent-2); }
.final-links { display:flex; justify-content:center; gap:30px; padding-top:30px; color:var(--muted); font-size:12px; }
.final-links a:hover { color:var(--text); }
footer { border-top:1px solid var(--line); padding:24px 0; color:var(--muted); font-size:10px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:grid; }
  .hero { grid-template-columns:1fr; text-align:center; padding-top:125px; gap:40px; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero-text { max-width:600px; }
  .hero-image-wrap { min-height:520px; }
  .about-grid { grid-template-columns:1fr; gap:25px; }
  .experience-card { grid-template-columns:44px 1fr; padding:18px; gap:14px; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .project-card { grid-template-columns:45px 1fr; }
  .project-visual { grid-column:2; }
  .contact-panel { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .narrow { width:min(100% - 28px,1120px); }
  .section { padding:78px 0; }
  .site-header { height:68px; padding:0 14px; }
  .mobile-nav { top:68px; }
  .brand { font-size:11px; }
  .brand-mark { width:33px;height:33px; }
  h1 { font-size:clamp(43px,15vw,72px); }
  .hero { width:calc(100% - 28px); min-height:auto; padding-top:115px; }
  .hero-image-wrap { min-height:420px; }
  .profile-frame { width:min(310px,78vw); }
  .orbit-one { width:390px;height:390px; }
  .orbit-two { width:450px;height:450px; }
  .card-top { right:-4px; top:55px; }
  .card-bottom { left:-2px; bottom:55px; }
  .section-heading { gap:12px; margin-bottom:35px; }
  .section-number { font-size:10px; }
  .skills-grid,.certificates-grid { grid-template-columns:1fr; }
  .skill-card { padding:20px; }
  .project-card { grid-template-columns:1fr; padding:22px; gap:12px; }
  .project-visual { grid-column:auto; min-height:145px; }
  .project-index { margin-bottom:-3px; }
  .project-content h3 { font-size:25px; }
  .contact-panel { padding:28px 22px; gap:35px; }
  .final-links { flex-wrap:wrap; gap:16px 25px; }
  .footer-inner { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}