:root{
  --bg:#0b0b12;
  --text:#f4f6fb;
  --muted:#aeb3c2;
  --brand-1:#7c3aed;
  --brand-2:#a855f7;
  --glass: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body.site-body{
  margin:0; background: radial-gradient(1200px 800px at 100% -10%, #1a1630 0%, transparent 60%),
             radial-gradient(900px 700px at -10% 10%, #131a38 0%, transparent 60%),
             var(--bg);
  color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));display:grid;place-items:center;color:#fff;font-weight:800}
.brand-text{font-weight:800;letter-spacing:.3px}
.nav-wrap{border-radius:18px;border:1px solid var(--border)}
.nav-link{color:var(--muted)}
.nav-link.active,.nav-link:hover{color:#fff}
.glass{backdrop-filter: saturate(140%) blur(12px); background:var(--glass); border:1px solid var(--border); border-radius:18px;}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);padding:.45rem .8rem;border-radius:999px;color:var(--text);text-decoration:none}
.chip:hover{background:rgba(255,255,255,.06)}
.grad-text{background:linear-gradient(90deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-pill{border-radius:999px;padding:.75rem 1.15rem;font-weight:700}
.btn-primary{background: linear-gradient(90deg,var(--brand-1),var(--brand-2)); border:none}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{border:1px solid var(--border); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.eyebrow{border-radius:999px;padding:.35rem .75rem;font-weight:600;color:#fff}
.eyebrow .dot{width:.6rem;height:.6rem;border-radius:999px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2))}
.badge-soft{display:inline-block;border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;color:var(--muted);font-size:.85rem}
.hero .display-3{font-size: clamp(2.4rem, 4.5vw, 4rem);}
.panel, .bio-card { background: rgba(255,255,255,.05); border:1px solid var(--border); }
.subpanel{ background: rgba(0,0,0,.25); border:1px dashed var(--border); }
.avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));display:grid;place-items:center;font-weight:800}
.showcase{overflow:hidden}
.showcase-bar{height:10px;border-radius:12px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));margin-bottom:10px}
.showcase-body{display:grid;gap:10px}
.showcase-card{padding:14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--border)}
.mini-title{font-weight:700}
.mini-desc{color:var(--muted);font-size:.9rem}
.venture{position:relative}
.venture-badge{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--border);display:grid;place-items:center;font-weight:800;color:#c8b5ff}
/* Background decorations */
.bg-blob{position:fixed; width:480px; height:480px; filter: blur(70px); opacity:.35; z-index:0; pointer-events:none;}
.bg-blob-1{top:-120px; right:-120px; background:radial-gradient(circle at center, #8b5cf6, transparent 60%)}
.bg-blob-2{bottom:-160px; left:-120px; background:radial-gradient(circle at center, #6d28d9, transparent 60%)}
.bg-grid{position:fixed; inset:0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; opacity:.25; z-index:1; pointer-events:none;}
/* Form */
.form-control, .form-select{background:rgba(255,255,255,.06); border:1px solid var(--border); color:#fff}
.form-control::placeholder{color:#b8b8c7}
.form-control:focus{background:rgba(255,255,255,.08); color:#fff; border-color:#bda3ff; box-shadow:none}


/* === Accessibility & Contrast Tweaks === */
:root{
  --muted:#cbd0e2;              /* brighter muted text */
  --glass: rgba(17,18,32,.72);  /* more opaque glass */
  --border: rgba(255,255,255,.18);
}
.text-muted{ color: var(--muted) !important; }
.nav-link{ color: #dfe3f0; }
.nav-link.active, .nav-link:hover{ color: #ffffff; }

/* Cards / panels more solid for readability */
.glass{ background: var(--glass); }
.panel, .bio-card, .showcase-card, .venture {
  background: rgba(12,14,24,.86) !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* Improve readability in subpanels and chips */
.subpanel{ background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.25); }
.chip{ color:#fff; }

/* Buttons stay bright */
.btn-ghost{ color:#fff; }

/* Forms: more solid inputs + clearer placeholders */
.form-control, .form-select{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.form-control::placeholder{ color:#e0e3ee !important; opacity:.85; }
.form-control:focus{
  background: rgba(255,255,255,.16) !important;
  border-color: #c7b2ff !important;
  box-shadow: 0 0 0 .25rem rgba(139,92,246,.25) !important;
}

/* Ensure hero paragraph stands out on busy backgrounds */
.hero .lead{ color: #e3e7f5 !important; }


/* === Portfolio-style sections === */

.hero-section{
  padding: 80px 0 40px;
}

.section-block{
  padding: 70px 0;
}

.section-header h2{
  font-weight:700;
}

.section-header p{
  max-width: 540px;
}

/* Resume */
.resume-card{
  border-radius: 24px;
}

.resume-meta{
  font-size: .8rem;
  color: var(--muted);
}

/* Skills */
.skill-item{
  margin-bottom: 18px;
}

.skill-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.skill-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
}

/* Portfolio link style */
.portfolio-link{
  color:#c4b5ff;
}

.portfolio-link:hover{
  color:#ffffff;
  text-decoration:underline;
}



/* Style the Bootstrap toggler to match your design */
.nav-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  font-size: 1.25rem;
  cursor: pointer;
}

.nav-toggle:focus {
  box-shadow: none;
}


/* Fix brand text color being overwritten by Bootstrap */
.navbar .navbar-brand .brand-text {
  color: var(--text) !important;
}

.navbar .nav-link.active {
  color: var(--brand-2) !important;
}

.nav-wrap{
  border-radius:18px;
  border:1px solid var(--border);

  /* NEW: center the glass pill and keep it inset from the edges */
  width: calc(100% - 2rem);   /* 1rem margin on left and right */
  max-width: 1100px;          /* cap the pill width on large screens */
  margin: 1.25rem auto 0;     /* top spacing + horizontal centering */
}

/* Footer fix: allow chips to wrap on small screens */
.site-footer .glass {
  flex-wrap: wrap !important;
  text-align: center;
}

/* Center items and avoid overflow */
.site-footer .glass .d-flex {
  flex-wrap: wrap !important;
  justify-content: center;
  width: 100%;
}

/* Ensure chips shrink nicely on narrow screens */
.chip {
  white-space: nowrap;
}