:root {
      --ink: #101828;
      --muted: #667085;
      --line: #e4e7ec;
      --soft: #f8fafc;
      --accent: #635bff;
      --accent-dark: #4f46e5;
      --cyan: #06b6d4;
      --navy: #0b1020;
      --card-radius: 22px;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: "Inter", sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.7;
    }
    section { scroll-margin-top: 80px; }
    .navbar {
      backdrop-filter: blur(18px);
      background: rgba(255,255,255,.88);
      border-bottom: 1px solid rgba(228,231,236,.8);
    }
    .navbar-brand { font-weight: 800; letter-spacing: -.04em; }
    .brand-dot { color: var(--accent); }
    .nav-link { font-weight: 600; color: #344054; }
    .nav-link:hover { color: var(--accent); }

    .hero {
      min-height: 92vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 15%, rgba(99,91,255,.16), transparent 32%),
        radial-gradient(circle at 10% 85%, rgba(6,182,212,.11), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .32;
      background-image:
        linear-gradient(rgba(16,24,40,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,24,40,.05) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, black, transparent 90%);
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border: 1px solid #dfe3ff;
      background: #f5f4ff;
      color: #5148c9;
      border-radius: 999px;
      font-weight: 700;
      font-size: .82rem;
    }
    .status-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #12b76a;
      box-shadow: 0 0 0 4px rgba(18,183,106,.12);
    }
    .hero h1 {
      font-size: clamp(2.7rem, 6vw, 5.5rem);
      line-height: .98;
      letter-spacing: -.065em;
      font-weight: 800;
    }
    .gradient-text {
      background: linear-gradient(90deg, var(--accent), #8b5cf6, var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-lead { max-width: 720px; color: #475467; font-size: 1.12rem; }
    .btn-main {
      background: var(--accent);
      border-color: var(--accent);
      color: white;
      font-weight: 700;
      border-radius: 12px;
      padding: 12px 20px;
      box-shadow: 0 10px 24px rgba(99,91,255,.22);
    }
    .btn-main:hover { background: var(--accent-dark); color: #fff; }
    .btn-soft {
      border: 1px solid var(--line);
      color: var(--ink);
      font-weight: 700;
      border-radius: 12px;
      padding: 12px 20px;
      background: white;
    }
    .btn-soft:hover { border-color: #c7cbd3; background: #f8fafc; }

    .code-card {
      border: 1px solid #23283a;
      background: #0c1020;
      color: #d0d5dd;
      border-radius: 22px;
      box-shadow: 0 30px 70px rgba(16,24,40,.18);
      overflow: hidden;
      transform: rotate(1deg);
    }
    .code-top {
      padding: 12px 16px;
      border-bottom: 1px solid #252a3b;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .window-dot { width: 10px; height: 10px; border-radius: 50%; background: #475467; }
    .code-body {
      padding: 24px;
      font: 500 .88rem/1.85 "JetBrains Mono", monospace;
    }
    .code-key { color: #9b8cff; }
    .code-string { color: #67e8f9; }
    .code-comment { color: #667085; }

    .section-label {
      color: var(--accent);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: .76rem;
    }
    .section-title {
      font-weight: 800;
      letter-spacing: -.045em;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }
    .section-copy { color: var(--muted); max-width: 700px; }

    .stat-card, .skill-card, .project-card, .timeline-card {
      border: 1px solid var(--line);
      border-radius: var(--card-radius);
      background: #fff;
      transition: .25s ease;
    }
    .stat-card:hover, .skill-card:hover, .project-card:hover, .timeline-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 45px rgba(16,24,40,.08);
      border-color: #d7d9ff;
    }
    .stat-number { font-size: 2.2rem; font-weight: 800; letter-spacing: -.05em; }
    .stat-label { color: var(--muted); font-size: .9rem; }

    .skill-icon {
      width: 48px; height: 48px;
      display: grid; place-items: center;
      border-radius: 14px;
      background: #f5f4ff;
      color: var(--accent);
      font-size: 1.3rem;
    }
    .tech-pill {
      display: inline-block;
      padding: 6px 10px;
      margin: 4px 3px 0 0;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: #344054;
      font-size: .78rem;
      font-weight: 600;
    }

    .project-card { overflow: hidden; height: 100%; }
    .project-top {
      min-height: 165px;
      padding: 25px;
      background: linear-gradient(135deg, #111827, #20264a);
      color: white;
      position: relative;
      overflow: hidden;
    }
    .project-top::after {
      content: "";
      position: absolute;
      width: 180px; height: 180px;
      border-radius: 50%;
      right: -50px; top: -70px;
      background: rgba(99,91,255,.35);
      filter: blur(2px);
    }
    .project-icon {
      width: 48px; height: 48px; display: grid; place-items: center;
      border-radius: 14px; background: rgba(255,255,255,.1);
      position: relative; z-index: 2;
    }
    .project-top h3 { position: relative; z-index: 2; font-size: 1.2rem; margin-top: 22px; }
    .project-body { padding: 24px; }
    .project-body p { color: var(--muted); font-size: .92rem; }

    .timeline { position: relative; }
    .timeline::before {
      content: "";
      position: absolute;
      left: 15px; top: 0; bottom: 0;
      width: 2px; background: #e4e7ec;
    }
    .timeline-item { position: relative; padding-left: 48px; }
    .timeline-dot {
      position: absolute; left: 8px; top: 6px;
      width: 16px; height: 16px;
      background: #fff; border: 4px solid var(--accent);
      border-radius: 50%;
    }
    .timeline-card { padding: 24px; }
    .timeline-card h3 { font-size: 1.1rem; font-weight: 800; }
    .timeline-date { color: var(--accent); font-weight: 700; font-size: .85rem; }

    .ai-banner {
      border-radius: 28px;
      background: #0b1020;
      color: white;
      overflow: hidden;
      position: relative;
    }
    .ai-banner::before {
      content: "";
      position: absolute;
      width: 450px; height: 450px;
      right: -100px; top: -250px;
      background: radial-gradient(circle, rgba(99,91,255,.45), transparent 65%);
    }
    .ai-banner p { color: #b8c0d0; }
    .ai-tag {
      border: 1px solid #30384f;
      background: #151b2d;
      border-radius: 10px;
      padding: 8px 11px;
      font-size: .78rem;
      color: #d0d5dd;
    }

    .contact-box {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #fff;
      padding: 32px;
    }
    .contact-item {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 15px 0;
      border-bottom: 1px solid #f0f1f3;
    }
    .contact-item:last-child { border-bottom: 0; }
    .contact-icon { color: var(--accent); font-size: 1.2rem; }

    footer { background: #0b1020; color: #98a2b3; }
    footer a { color: #d0d5dd; text-decoration: none; }
    footer a:hover { color: white; }

    @media (max-width: 991px) {
      .hero { min-height: auto; padding: 110px 0 70px; }
      .code-card { margin-top: 40px; transform: none; }
    }
  
/* Global scroll-reveal and micro-interactions */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].reveal-in { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.hero .eyebrow { animation: fadeDown .7s ease both; }
.hero h1 { animation: fadeUp .8s .08s ease both; }
.hero-lead { animation: fadeUp .8s .16s ease both; }
.hero .btn-main, .hero .btn-soft { animation: fadeUp .8s .24s ease both; }
.code-card { animation: floatCard 5s ease-in-out infinite; }
.stat-card, .skill-card, .project-card, .timeline-card { will-change: transform; }
@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes floatCard { 0%,100% { transform: rotate(1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-8px); } }
@media (max-width: 991px) { .code-card { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .hero .eyebrow, .hero h1, .hero-lead, .hero .btn-main, .hero .btn-soft, .code-card {
    opacity: 1; transform: none; animation: none; transition: none;
  }
}