:root{
    --bg: #07070b;
    --panel: #0e0f16;
    --blue: #4f9bff;
    --blue-soft: #8fc1ff;
    --violet: #6c5ce7;
    --violet-soft: #8f7ff5;
    --success: #34d399;
    --ink: #f4f2ec;
    --ink-dim: #a8a6b3;
    --line: rgba(245,243,236,0.09);
    --card-bg: rgba(255,255,255,0.02);
    --card-bg-2: rgba(255,255,255,0.03);
    --nav-bg: rgba(14,15,22,0.55);
    --canvas-fade: rgba(3,3,6,0.65);
    --btn-ghost-bg: rgba(255,255,255,0.03);
    --btn-ghost-bg-hover: rgba(255,255,255,0.07);
    --field-bg: rgba(255,255,255,0.03);
    --grain-opacity: 0.035;
    --grain-blend: overlay;
    --nav-shadow: 0 8px 30px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
  html, body{ transition: background .5s ease, color .5s ease; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; background: var(--bg); }
  body{
    margin:0; background: var(--bg); color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  ::selection{ background: var(--blue); color: #04101f; }

  h1,h2,h3,.display{ font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-0.02em; font-weight:600; margin:0; }
  .mono{ font-family:'JetBrains Mono', monospace; letter-spacing:.04em; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width: 1160px; margin:0 auto; padding: 0 28px; }
  @media (max-width: 700px){ .wrap{ padding:0 20px; } }

  #core-canvas{ position: fixed; inset:0; z-index:1; pointer-events:none; }
  .grain{ position: fixed; inset:0; z-index:2; pointer-events:none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .vignette{ position: fixed; inset:0; z-index:2; pointer-events:none;
    background: radial-gradient(ellipse at 50% 40%, transparent 40%, var(--canvas-fade) 100%); }

  section[id]{ scroll-margin-top: 110px; }
  header{ position: fixed; top:0; left:0; right:0; z-index:50; padding: 18px 0; }
  .navbar{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:10px 14px 10px 14px;
    border-radius: 999px; background: var(--nav-bg); border:1px solid var(--line);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--nav-shadow); }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo .mark{ width:38px; height:38px; border-radius:10px; object-fit:cover; display:block;
    box-shadow: 0 0 16px rgba(79,155,255,0.45); }
  .logo .name{ font-family:'Space Grotesk'; font-weight:700; font-size:14.5px; }
  .logo .name span{ display:block; font-family:'Inter'; font-weight:400; font-size:11px; color:var(--ink-dim); transition: opacity .35s ease; }
  nav.links{ display:flex; gap:28px; font-size:14px; color:var(--ink-dim); }
  nav.links a{ transition: color .25s ease; }
  nav.links a:hover{ color: var(--ink); }
  @media (max-width: 820px){ nav.links{ display:none; } }

  .nav-actions{ display:flex; align-items:center; gap:10px; }

  .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 11px 22px; border-radius: 999px; font-size:14px; font-weight:600; cursor:pointer;
    border:1px solid transparent; transition: transform .35s cubic-bezier(.2,.8,.2,1); white-space:nowrap; }
  .btn-primary{ background: linear-gradient(135deg, var(--blue), var(--violet)); color:#04101f;
    box-shadow: 0 0 0 0 rgba(79,155,255,0.5); }
  .btn-primary:hover{ box-shadow: 0 6px 24px rgba(79,155,255,0.35); }
  .btn-ghost{ background: var(--btn-ghost-bg); border-color: var(--line); color: var(--ink); }
  .btn-ghost:hover{ background: var(--btn-ghost-bg-hover); }

  .hero{ position:relative; z-index:5; min-height:100svh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding: 140px 24px 80px; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
    border:1px solid var(--line); background: var(--card-bg-2); font-size:12.5px; color:var(--ink-dim); margin-bottom:26px; }
  .eyebrow .pulse{ width:6px; height:6px; border-radius:50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }

  .role-badge{ font-size: 13px; color: var(--blue-soft); margin-bottom: 18px; min-height: 18px; transition: opacity .4s ease; }

  .hero h1{ font-size: clamp(30px, 5.4vw, 60px); line-height: 1.08; max-width: 17ch; }
  .hero h1 em{ font-style:normal; background: linear-gradient(120deg, var(--blue-soft), var(--violet-soft) 65%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.sub{ margin-top:24px; font-size: clamp(15px,1.7vw,19px); color:var(--ink-dim); max-width: 62ch; line-height:1.65; }
  .hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
  .hero-actions .btn-primary{ padding:15px 30px; font-size:15px; }
  .hero-actions .btn-ghost{ padding:15px 26px; font-size:15px; }

  .scroll-cue{ position:absolute; bottom:38px; left:50%; transform: translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-dim); font-size:11px; opacity:.7; }
  .scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--blue), transparent); animation: scrollLine 2s ease-in-out infinite; }
  @keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin:top; } 50%{ transform: scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform: scaleY(0); transform-origin:bottom; } }

  section{ position:relative; z-index:5; }
  .section-pad{ padding: 120px 0; }
  @media (max-width:720px){ .section-pad{ padding:80px 0; } }
  .kicker{ font-size:12.5px; color: var(--blue-soft); text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; font-family:'JetBrains Mono'; }
  .section-head{ max-width:640px; margin:0 auto 60px; text-align:center; }
  .section-head h2{ font-size: clamp(28px,4.2vw,46px); line-height:1.08; }
  .section-head p{ margin-top:14px; color:var(--ink-dim); font-size:15.5px; line-height:1.65; }

  .about-card{ max-width:760px; margin:0 auto; text-align:left; padding: 40px 44px; border-radius:24px;
    border:1px solid var(--line); background: var(--card-bg); backdrop-filter: blur(6px); }
  .about-card p{ font-size:16px; line-height:1.75; color: var(--ink-dim); text-align:justify; }

  /* skills core tabs */
  .cap-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .cap-tab{ padding:12px 22px; border-radius:999px; border:1px solid var(--line); background: var(--card-bg);
    color:var(--ink-dim); font-size:14px; font-weight:600; cursor:pointer; transition: all .4s cubic-bezier(.2,.8,.2,1); }
  .cap-tab.active{ color:#04101f; background: linear-gradient(135deg, var(--blue-soft), var(--violet-soft)); border-color: transparent; }
  .cap-viewport{ height:42vh; min-height:300px; }
  .cap-copy{ max-width:640px; margin:16px auto 0; text-align:center; min-height:100px; }
  .cap-copy h3{ font-size:22px; margin-bottom:8px; }
  .cap-copy p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; }
  .cap-copy .core-quote{ margin-top:14px; font-style:italic; color: var(--blue-soft); font-size:14px; }

  /* experience timeline */
  .timeline{ max-width:820px; margin:0 auto; }
  .tl-item{ position:relative; padding:0 0 44px 34px; border-left:2px solid var(--line); }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
    background: var(--blue); box-shadow: 0 0 12px rgba(79,155,255,0.6); }
  .tl-item .date{ font-family:'JetBrains Mono'; font-size:12.5px; color: var(--blue-soft); margin-bottom:6px; display:block; }
  .tl-item h3{ font-size:19px; margin-bottom:2px; }
  .tl-item .org{ color: var(--ink-dim); font-size:14px; margin-bottom:14px; display:block; }
  .tl-item ul{ margin:0; padding-left:18px; color:var(--ink-dim); font-size:14.5px; line-height:1.7; text-align:justify; }
  .tl-item li{ margin-bottom:6px; }

  /* projects */
  .proj-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
  @media (max-width:800px){ .proj-grid{ grid-template-columns:1fr; } }
  .proj-card{ padding:30px; border-radius:20px; border:1px solid var(--line); background: var(--card-bg);
    cursor:pointer; transition: transform .35s ease, border-color .35s ease; }
  .proj-card:hover{ transform: translateY(-5px); border-color: rgba(79,155,255,0.35); }
  .proj-card h3{ font-size:18.5px; margin-bottom:10px; }
  .proj-card p{ color:var(--ink-dim); font-size:14.5px; line-height:1.65; margin-bottom:16px; text-align:justify; }
  .tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .tag{ font-size:11.5px; padding:5px 10px; border-radius:999px; background: rgba(79,155,255,0.12); color: var(--blue-soft); font-family:'JetBrains Mono'; }
  .proj-link{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color: var(--blue-soft); }
  .proj-card:hover .proj-link{ text-decoration: underline; }

  /* project detail modal */
  .modal-overlay{
    position: fixed; inset:0; z-index: 200; display:none; align-items:center; justify-content:center;
    background: rgba(3,3,6,0.72); backdrop-filter: blur(6px); padding: 24px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    position:relative; max-width: 560px; width:100%; max-height: 86vh; overflow-y:auto;
    background: var(--panel); border:1px solid var(--line); border-radius: 24px; padding: 30px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  }
  .modal-gallery{ display:flex; flex-direction:column; gap:14px; margin-bottom: 20px; }
  .browser-frame{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background: var(--card-bg-2); }
  .browser-frame .bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background: #14151d; }
  .browser-frame .dot{ width:9px; height:9px; border-radius:50%; }
  .browser-frame .dot.r{ background:#ff5f57; }
  .browser-frame .dot.y{ background:#febc2e; }
  .browser-frame .dot.g{ background:#28c840; }
  .browser-frame img{ width:100%; display:block; }
  .modal-box h3{ font-size: 22px; margin-bottom: 12px; }
  .modal-box p{ color: var(--ink-dim); font-size: 14.5px; line-height:1.7; margin-bottom: 18px; text-align:justify; }
  .modal-box .tag-row{ margin-bottom: 22px; }
  .modal-close{
    position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line); background: var(--card-bg-2); color: var(--ink);
    cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
  }
  #modalLink{ display:none; }
  #modalLink.show{ display:inline-flex; }

  /* skills grid */
  .skill-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
  @media (max-width:900px){ .skill-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:600px){ .skill-grid{ grid-template-columns: 1fr; } }
  .skill-card{ padding:24px; border-radius:18px; border:1px solid var(--line); background: var(--card-bg); }
  .skill-card h4{ font-family:'Space Grotesk'; font-size:14px; margin-bottom:12px; color: var(--blue-soft); }
  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ font-size:12.5px; padding:6px 12px; border-radius:999px; background: var(--card-bg-2); border:1px solid var(--line); }

  /* education */
  .info-card{ max-width: 560px; margin: 0 auto; padding:28px; border-radius:20px; border:1px solid var(--line); background: var(--card-bg); }
  .info-card .row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .info-card .row b{ font-size:15px; display:block; }
  .info-card .row span{ font-size:12.5px; color:var(--ink-dim); }
  .info-card .row .meta{ font-family:'JetBrains Mono'; font-size:12px; color: var(--blue-soft); white-space:nowrap; text-align:right; }

  /* contact / hire me form */
  .contact-panel{ padding: 40px 32px; border-radius:24px; border:1px solid var(--line);
    background: rgba(108,92,231,0.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    max-width: 480px; margin: 0 auto; }
  .contact-panel h2{ font-size: clamp(26px,4.2vw,40px); text-align:center; }
  .contact-panel > p{ color:var(--ink-dim); margin-top:12px; text-align:center; }
  form.hire{ margin-top: 34px; display:flex; flex-direction:column; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{ font-size:12.5px; color: var(--ink-dim); font-family:'JetBrains Mono'; letter-spacing:.05em; }
  .field input, .field textarea{
    background: var(--field-bg); border:1px solid var(--line); border-radius:14px; padding:13px 16px;
    color: var(--ink); font-family:'Inter'; font-size:14.5px; resize: vertical; outline:none;
    transition: border-color .3s ease, box-shadow .3s ease;
  }
  .field input:focus, .field textarea:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,155,255,0.15); }
  .field input.valid{ border-color: var(--success); }
  .field input.invalid{ border-color: #e5484d; }
  .field-hint{ font-size:12px; min-height:16px; }
  .field-hint.ok{ color: var(--success); }
  .field-hint.bad{ color: #e5484d; }
  .field-hint button{ background:none; border:none; color: var(--blue-soft); text-decoration:underline; cursor:pointer; font-size:12px; padding:0; font-family:'Inter'; }
  .field textarea{ min-height: 120px; }
  form.hire .btn-primary{ margin-top: 6px; align-self:center; padding: 14px 34px; font-size:15px; border:none; }
  .form-note{ margin-top: 14px; text-align:center; font-size:12.5px; color: var(--ink-dim); min-height: 18px; }

  footer{ position:relative; z-index:5; padding: 34px 0 44px; border-top:1px solid var(--line); background: var(--bg); }
  .foot-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--ink); font-weight:500; }
  .foot-links{ display:flex; gap:12px; }
  .foot-links a{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background: var(--card-bg-2); color: var(--ink-dim);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s ease, border-color .3s ease, background .3s ease;
  }
  .foot-links a svg{ width:17px; height:17px; }
  .foot-links a:hover{ color: var(--blue-soft); border-color: var(--blue-soft); transform: translateY(-3px); background: var(--card-bg); }

  .magnetic{ display:inline-block; will-change: transform; }
  .reveal{ opacity:0; transform: translateY(28px); }