@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600&display=swap');

/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #020817; color: #f8fafc; overflow-x: hidden; }

/* ── Grid background ─────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Gradient text ───────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-text-soft {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Glass card ──────────────────────────── */
.glass {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(148,163,184,0.08);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.glass:hover {
  border-color: rgba(99,102,241,0.3);
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(99,102,241,0.08);
}
.glass-static { background: rgba(15,23,42,0.6); backdrop-filter: blur(16px); border: 1px solid rgba(148,163,184,0.08); border-radius: 1.25rem; }

/* ── Glow card ───────────────────────────── */
.glow-card {
  position: relative; background: rgba(15,23,42,0.75);
  border: 1px solid rgba(99,102,241,0.15); border-radius: 1.25rem;
  transition: all 0.4s ease; overflow: hidden;
}
.glow-card::before {
  content:''; position:absolute; inset:-1px; border-radius:1.3rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.3), transparent 55%);
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.glow-card:hover::before { opacity:1; }
.glow-card:hover { border-color:rgba(99,102,241,0.5); box-shadow:0 0 50px rgba(99,102,241,0.1); transform:translateY(-5px); }
.glow-card-featured::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#6366f1,#22d3ee,transparent); }

/* ── Scroll progress ─────────────────────── */
.scroll-progress { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,#6366f1,#22d3ee); z-index:9999; width:0; transition:width 0.1s linear; }

/* ── AOS Animations ──────────────────────── */
[data-aos] { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1); }
[data-aos].aos-animate { opacity:1; transform:translateY(0); }
[data-aos="fade-left"] { transform:translateX(32px); }
[data-aos="fade-left"].aos-animate { transform:translateX(0); }
[data-aos="fade-right"] { transform:translateX(-32px); }
[data-aos="fade-right"].aos-animate { transform:translateX(0); }
[data-aos="zoom-in"] { transform:scale(0.88); }
[data-aos="zoom-in"].aos-animate { transform:scale(1); }
[data-aos-delay="100"] { transition-delay:0.1s; }
[data-aos-delay="150"] { transition-delay:0.15s; }
[data-aos-delay="200"] { transition-delay:0.2s; }
[data-aos-delay="300"] { transition-delay:0.3s; }
[data-aos-delay="400"] { transition-delay:0.4s; }
[data-aos-delay="500"] { transition-delay:0.5s; }

/* ── Tech tags ───────────────────────────── */
.tech-tag {
  display:inline-flex; align-items:center; gap:0.2rem;
  padding:0.2rem 0.65rem;
  background:rgba(99,102,241,0.08); border:1px solid rgba(99,102,241,0.22);
  border-radius:100px; font-size:0.72rem; font-weight:600;
  color:#818cf8; font-family:'Roboto Mono',monospace; letter-spacing:0.03em; text-transform:uppercase;
}
.tech-tag-cyan   { background:rgba(34,211,238,0.08);  border-color:rgba(34,211,238,0.22);  color:#22d3ee; }
.tech-tag-purple { background:rgba(129,140,248,0.08); border-color:rgba(129,140,248,0.2);  color:#a5b4fc; }
.tech-tag-amber  { background:rgba(245,158,11,0.08);  border-color:rgba(245,158,11,0.2);   color:#fbbf24; }
.tech-tag-teal   { background:rgba(45,212,191,0.08);  border-color:rgba(45,212,191,0.2);   color:#2dd4bf; }

/* ── Badge ───────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.85rem; border-radius:100px; font-size:0.78rem; font-weight:600; }
.badge-indigo  { background:rgba(99,102,241,0.1);  color:#818cf8; border:1px solid rgba(99,102,241,0.3); }
.badge-cyan    { background:rgba(34,211,238,0.1);  color:#22d3ee; border:1px solid rgba(34,211,238,0.3); }
.badge-purple  { background:rgba(168,85,247,0.1);  color:#c084fc; border:1px solid rgba(168,85,247,0.25); }
.badge-amber   { background:rgba(251,191,36,0.1);  color:#fbbf24; border:1px solid rgba(251,191,36,0.25); }
.badge-green   { background:rgba(52,211,153,0.1);  color:#34d399; border:1px solid rgba(34,211,153,0.25); }
.badge-teal    { background:rgba(45,212,191,0.1);  color:#2dd4bf; border:1px solid rgba(45,212,191,0.25); }
/* Legacy aliases kept for sub-pages */
.badge-emerald { background:rgba(99,102,241,0.1);  color:#818cf8; border:1px solid rgba(99,102,241,0.3); }

/* ── Engineering Metric card ─────────────── */
.eng-metric-card {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148,163,184,0.08);
  border-radius: 1.25rem;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.eng-metric-card:hover {
  border-color: rgba(99,102,241,0.28);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(99,102,241,0.07);
}
/* Legacy alias so index.html qa-metric-card class still works */
.qa-metric-card {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148,163,184,0.08);
  border-radius: 1.25rem;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.qa-metric-card:hover {
  border-color: rgba(99,102,241,0.28);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(99,102,241,0.07);
}
.qa-metric-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid;
}

/* ── Terminal block ──────────────────────── */
.terminal { background:#0d1117; border:1px solid rgba(99,102,241,0.18); border-radius:0.875rem; overflow:hidden; font-family:'Roboto Mono',monospace; }
.terminal-header { background:#161b22; padding:0.75rem 1rem; display:flex; align-items:center; gap:0.5rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.terminal-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.terminal-body { padding:1.25rem 1.5rem; color:#e6edf3; line-height:1.85; font-size:0.8rem; }
.terminal-body .kw { color:#ff7b72; }
.terminal-body .fn { color:#d2a8ff; }
.terminal-body .str { color:#a5d6ff; }
.terminal-body .cm { color:#8b949e; font-style:italic; }
.terminal-body .num { color:#79c0ff; }

/* ── CP Rating bar ───────────────────────── */
.rating-bar { height:6px; border-radius:100px; background:rgba(99,102,241,0.12); overflow:hidden; }
.rating-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,#6366f1,#22d3ee); width:0; transition:width 1.6s cubic-bezier(0.4,0,0.2,1) 0.4s; }
.stat-number { font-family:'Roboto Mono',monospace; font-weight:700; }

/* ── Accordion ───────────────────────────── */
.accordion-content { max-height:0; overflow:hidden; transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1); }
.accordion-content.open { max-height:600px; }
.accordion-icon { transition:transform 0.3s ease; }

/* ── Section divider ─────────────────────── */
.section-divider { width:48px; height:3px; border-radius:100px; background:linear-gradient(90deg,#6366f1,#22d3ee); margin:0.85rem auto 0; }

/* ── Orb ─────────────────────────────────── */
.orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }

/* ── Skill card ──────────────────────────── */
.skill-icon-box { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.22); font-size:1.3rem; color:#818cf8; flex-shrink:0; }

/* ── Cyan glow border (featured projects) ── */
.cyan-glow-border {
  border-color: rgba(34,211,238,0.35) !important;
  box-shadow: 0 0 28px rgba(34,211,238,0.08);
}
.cyan-glow-border::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#6366f1,#22d3ee,transparent);
}

/* ── Hero CTA buttons ────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:1rem 2rem; border-radius:0.875rem; font-weight:700; font-size:0.95rem;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  color:#fff;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.btn-primary:hover {
  background:linear-gradient(135deg,#818cf8,#6366f1);
  box-shadow: 0 8px 32px rgba(99,102,241,0.5);
  transform:translateY(-2px);
}
.btn-secondary {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:1rem 2rem; border-radius:0.875rem; font-weight:600; font-size:0.95rem;
  background:transparent; color:#fff;
  border:1px solid rgba(148,163,184,0.2);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-secondary:hover {
  border-color:rgba(34,211,238,0.4);
  background:rgba(34,211,238,0.06);
  color:#22d3ee;
  transform:translateY(-2px);
}

/* ── Input focus ring ────────────────────── */
input:focus, textarea:focus { border-color:rgba(99,102,241,0.6) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* ── Responsive ──────────────────────────── */
@media (max-width:768px) {
  .hero-title { font-size:2.6rem !important; }
}