:root {
      --bg: #0f172a;            /* slate-900 */
      --bg-2: #0b1224;          /* slightly darker */
      --text: #e5e7eb;          /* zinc-200 */
      --muted: #a1a1aa;         /* zinc-400 */
      --card: #111827;          /* gray-900 */
      --accent: #14b8a6;        /* teal-500 */
      --accent-2: #7c3aed;      /* violet-600 */
      --ring: rgba(20,184,166,.35);
      --shadow: 0 10px 30px rgba(0,0,0,.45);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
      color: var(--text);
      background: radial-gradient(1000px 600px at 120% -10%, rgba(124,58,237,.15), transparent 60%),
                  radial-gradient(800px 500px at -20% 10%, rgba(20,184,166,.15), transparent 60%),
                  linear-gradient(180deg, var(--bg-2), var(--bg));
      line-height: 1.65;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { width: min(1100px, 92%); margin: 0 auto; }

    /* --- Navbar --- */
    .nav {
      position: sticky; top: 0; z-index: 40;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(10,12,23,.9), rgba(10,12,23,.65));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
    .brand { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; }
    .brand .logo {
      width: 36px; height: 36px; border-radius: 12px; background:
        conic-gradient(from 180deg, var(--accent), var(--accent-2));
      display:grid; place-items:center; color:#0b1020; font-weight:900;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.15);
    }
    .nav-links { display:flex; gap: 1.2rem; align-items:center; }
    .nav-links a { opacity:.9; padding:8px 12px; border-radius: 10px; }
    .nav-links a:hover { background: rgba(124,58,237,.08); opacity:1; }
    .btn {
      display:inline-flex; align-items:center; gap:.5rem; padding:10px 16px; border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white; font-weight: 600; box-shadow: var(--shadow);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 34px rgba(124,58,237,.35); }

    /* --- Hero --- */
    .hero { position: relative; overflow: hidden; padding: 96px 0 60px; }
    .hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
    .eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size:.82rem; }
    .title { font-family: 'Poppins', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 10px 0 14px; }
    .title .gradient { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color: transparent; }
    .subtitle { color: var(--muted); font-size: 1.05rem; }
    .cta { margin-top: 22px; display:flex; gap:12px; flex-wrap:wrap; }
    .cta .ghost { background: rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.35); }

    .hero-card { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
      padding: 22px; display:flex; gap:14px; align-items:center; box-shadow: var(--shadow); }
    .hero-card i { color: var(--accent); font-size: 1.1rem; }
    .hero .badges { display:grid; grid-template-columns: 1fr; gap:12px; }

    .orb { position:absolute; width: 540px; height:540px; border-radius:50%; background:
      radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 40%),
      radial-gradient(circle at 70% 70%, rgba(20,184,166,.35), transparent 50%);
      filter: blur(40px); opacity:.65; pointer-events:none; right:-120px; top:-120px; }

    /* --- Sections --- */
    section { padding: 72px 0; position: relative; }
    .section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 18px; font-family: 'Poppins', sans-serif; }
    .section-sub { color: var(--muted); margin-bottom: 30px; }

    /* --- About --- */
    .about { display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
    .card { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
    .chip-row { display:flex; flex-wrap:wrap; gap:10px; }
    .chip { padding: 8px 12px; border-radius: 999px; font-size:.9rem; background: rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.35); }

    /* --- Skills --- */
    .skills-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .skill { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); }
    .bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-top: 8px; }
    .bar > span { display:block; height: 8px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:999px; }

    /* --- Projects --- */
    .projects-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .project { position:relative; overflow:hidden; border-radius: var(--radius); background: #0a1020; border:1px solid rgba(255,255,255,.08); }
    .project img { height: 180px; object-fit: cover; width:100%; filter: saturate(1.05); }
    .project .content { padding: 16px 16px 18px; }
    .tag { font-size:.75rem; opacity:.85; background: rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.35); padding: 4px 8px; border-radius: 999px; margin-right:6px; }
    .project .actions { display:flex; gap:10px; margin-top:10px; }
    .project .actions a { font-size:.9rem; padding:8px 12px; border-radius:10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
    .project:hover { transform: translateY(-3px); transition: transform .2s ease; }
    .project:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
        }
        
    /* Modal */
    .modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding: 20px; }
    .modal.active { display:flex; }
    .modal-card { width: min(780px, 95%); background: #0a0f1e; border:1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: var(--shadow); }
    .modal-header { display:flex; align-items:center; justify-content:space-between; padding: 14px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
    .modal-body { padding: 18px; display:grid; grid-template-columns: 1fr; gap:14px; }

    /* --- Certificates (simple carousel) --- */
    .carousel { position:relative; overflow:hidden; }
    .track { display:flex; gap: 16px; transition: transform .5s ease; }
    .cert-card { min-width: 300px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
    .carousel .controls { position:absolute; inset: 0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
    .carousel button { pointer-events:auto; background: rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.5); padding:10px 12px; border-radius: 50%; }

    /* --- Timeline --- */
    .timeline { border-left: 2px solid rgba(255,255,255,.1); padding-left: 18px; }
    .t-item { position:relative; margin: 0 0 14px;padding-left:16px; }
    .t-item::before { content:" "; width: 10px; height:10px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:50%; position:absolute; left:-6px; top:.4rem; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }

    /* --- Contact --- */
    .contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .input { width:100%; background:#0a1020; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; color:var(--text); }
    textarea.input { height: 140px; resize: vertical; }
    .socials { display:flex; gap: 12px; }
    .icon-btn {
                width: 44px;
                height: 44px;
                display: grid;
                place-items: center;
                border-radius: 50%;
                border: 1px solid rgb(102, 102, 96);
                background: linear-gradient(135deg, var(--accent), var(--accent-2));
                color: white;
                font-size: 20px;
                text-decoration: none;
                transition: background 0.3s, transform 0.2s;
              }

              .icon-btn:hover {
                background: linear-gradient(105deg, var(--accent), var(--accent-2));
                transform: scale(1.1);
              }

    /* --- Footer --- */
    footer { padding: 26px 0 42px; color: var(--muted); text-align:center; }

    /* --- Responsive --- */
    @media (max-width: 960px) {
      .hero-grid, .about, .contact-grid { grid-template-columns: 1fr; }
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
      .skills-grid { grid-template-columns: repeat(2, 1fr); }
      .nav-links { display:none; }
      .menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
      .mobile-panel { display:none; position:absolute; right:0; top:60px; background:#0b1224; border:1px solid rgba(255,255,255,.08); border-radius: 14px; padding:10px; }
      .mobile-panel a { display:block; padding:10px 14px; border-radius:10px; }
      .mobile-panel a:hover { background: rgba(255,255,255,.05); }
    }
    @media (max-width: 640px) {
      .projects-grid { grid-template-columns: 1fr; }
      .skills-grid { grid-template-columns: 1fr; }
    }
   
.projects-grid {
  perspective: 1000px;
}

/* Card base */.project {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0a1020;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth out + on mouseleave */
  transform-style: preserve-3d;    /* enable 3D */
  backface-visibility: hidden;
  will-change: transform;
}

.project:hover {
  animation: projectTiltSmooth 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  box-shadow:
    0 28px 55px rgba(20, 184, 166, 0.3),
    0 18px 35px rgba(124, 58, 237, 0.2);
}

@keyframes projectTiltSmooth {
  0%   { transform: translateY(-6px) scale(1.02) rotateX(0deg)  rotateY(0deg); }
  20%  { transform: translateY(-8px) scale(1.03) rotateX(2deg)  rotateY(-2deg); }
  50%  { transform: translateY(-9px) scale(1.04) rotateX(-2deg) rotateY(2deg); }
  80%  { transform: translateY(-8px) scale(1.03) rotateX(1deg)  rotateY(-1deg); }
  100% { transform: translateY(-8px) scale(1.03) rotateX(0deg)  rotateY(0deg); }
}

.project img { height: 180px; object-fit: cover; width: 100%; filter: saturate(1.05); }
.project .content { padding: 16px 16px 18px; }
.project .actions { display:flex; gap:10px; margin-top:10px; }
.project .actions a { font-size:.9rem; padding:8px 12px; border-radius:10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }