/* =========================
   Bento Portfolio - Clean CSS
   (De-duped + stable layout + fixed scrolling bg)
   ========================= */

/* ---------- Base ---------- */
:root {
  /* Base palette */
  --bg: #0b0f17;
  --text: rgba(255, 255, 255, 0.85);
  --muted: rgba(255, 255, 255, 0.6);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke2: rgba(255, 255, 255, 0.12);
  --accent: #3B82F6;
  --accent2: #60A5FA;
  --accent-rgb: 59, 130, 246;
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --card-bg: rgba(10, 10, 14, .86);
  --card-border: rgba(255, 255, 255, .06);

  /* Nav / interactive states (merged from a duplicate :root that lived lower in the file) */
  --item-bg: rgba(255, 255, 255, 0.04);
  --item-hover: rgba(255, 255, 255, 0.06);
  --item-active: rgba(59, 130, 246, 0.18);
  --border: rgba(255, 255, 255, 0.08);
  --border-active: rgba(59, 130, 246, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}



body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% 10%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    radial-gradient(800px 500px at 80% 40%, rgba(34, 211, 238, 0.06), transparent 55%),
    #07070b;
  /* Use the exact main page bg color */
  background-attachment: fixed;
}

body.menu-active {
  background-color: rgba(0, 0, 0, 0.7);
  /* The dim effect */
  overflow: hidden;
  /* Prevents scrolling while menu is open */
}

/* Ensure the grey zone actually disappears from the "touch" layer */
body::after {
  content: '';
  /* ... your other styles ... */
  opacity: 0;
  pointer-events: none;
  /* This ensures you can click through it when it's "off" */
  transition: opacity 0.3s;
}

body.menu-active::after {
  opacity: 1;
  pointer-events: auto;
  /* This turns the "wall" back on when menu is open */
}

.page,
.app {
  display: flex;
  /* Switch from Grid to Flex for easier height syncing */
  gap: 18px;
  /* Change padding from '18px' or '20px' to '18px 18px 18px 0' */
  padding: 18px 18px 18px 0;
  align-items: start !important;
  width: 100%;
}

.sidebar {
  top: 20px !important;
}

/* ---------- Layout ---------- */
/* Apply this to the top-level container on every page */
.app {
  display: grid;
  /* Keeps sidebar fixed, lets content take the rest */
  grid-template-columns: 280px 1fr;

  /* Standard 20px gap from the browser edges */
  padding-left: 20px;
  padding-right: 20px;

  /* Standard 20px gap between the sidebar and your content */
  column-gap: 20px;

  /* REMOVE any max-width here if you want it to hit the edges */
  max-width: none;
  width: 100%;

  /* Ensures padding doesn't push the width past 100% */
  box-sizing: border-box;
  margin: 0;
}


.nav__subitem disabled {
  color: rgba(255, 255, 255, 0.2);
  /* Muted/Grayed out color */
  cursor: default;
  /* Changes pointer back to normal arrow */
  pointer-events: none;
  /* Prevents any hover effects or clicks */
  display: block;
  padding: 8px 0;
  /* Match the spacing of your other links */
  font-size: 0.9rem;
  user-select: none;
  /* Prevents text highlighting */
}

.main {
  /* FIXED: max-width none allows it to stretch past 1240px on large screens */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 28px 0 44px;
  flex-grow: 1;
  /* Takes up remaining space */
  min-width: 0;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* --- Navbar Container --- */
.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.nav__item.is-active {
  background: var(--item-active);
  border-color: var(--border-active);
  color: var(--text);
}

/* --- Dropdown Logic --- */
.nav__dropdown {
  width: 100%;
}

.nav__submenu {
  display: flex;
  flex-direction: column;
  margin-left: 28px;
  /* Aligns with the Folder icon */
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);

  /* Animation settings */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show submenu on hover */
.nav__dropdown:hover .nav__submenu {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* --- Sub-items (Side Projects) --- */
.nav__subitem {
  text-decoration: none;
  color: var(--muted);
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.nav__subitem:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  padding-left: 18px;
  /* The "nudge" effect */
}

/* The Blue Dot Indicator */
.nav__subitem::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav__subitem:hover::before {
  opacity: 1;
}

/* Chevron Rotation */
.chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.3s ease;
}

.nav__dropdown:hover .chevron {
  transform: rotate(180deg);
}

/* Sub-links styling from your image */
.nav__subitem {
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.2s, padding-left 0.2s;
}

.nav__subitem:hover {
  color: var(--text);
  padding-left: 5px;
  /* Subtle nudge effect */
}

/* ---------- Mobile bar / drawer ---------- */
.mobilebar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(7, 7, 11, 0.7);
  /* backdrop-filter: blur(12px); */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobilebar__brand {
  font-weight: 800;
  letter-spacing: .06em;
  opacity: .9;
}

.iconbtn {
  width: 42px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}


/* ---------- Sidebar content ---------- */


.avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* standard circle */
  /* This is critical: force the container to be a strict circle */
  overflow: hidden !important;
  border: 1px solid var(--stroke2);
  /* Fixes a Webkit bug where overflow:hidden fails on rounded corners */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

/* Instead of an extra div, we use a pseudo-element for the glow */
.avatar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb), 0.55), transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Delete .avatar__dot from your HTML or hide it here */
.avatar__dot {
  display: none !important;
}

.brand__name {
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand__sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 220px;
  padding-top: 10px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;

  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.2px;

  background: transparent;
  border: 1px solid transparent;

  margin-right: -30px;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

/* icon */
.nav__item span {
  color: inherit;
}

/* hover */
.nav__item:hover {
  background: var(--item-hover);
  border-color: var(--border);
  color: var(--text);
  transform: translateY(-1px);
}

/* active */
.nav__item.is-active {
  background: var(--item-active);
  border-color: var(--border-active);
  color: var(--text);
}


/* Make bottom sit at bottom without absolute */



.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--text);
  font-size: 12px;
}

.hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Aligns button with Portfolio baseline */
  margin-bottom: 15px !important;
  width: 100%;
}

/* THE BUTTON CONTAINER */
.resume-top {
  /* 1. FORCE DIMENSIONS */
  height: 48px !important;
  /* Matches the visual weight of the 'Current Status' cards */
  min-width: 190px !important;
  /* Provides professional horizontal stretch */
  padding: 0 28px !important;
  border-radius: 10px !important;

  /* 2. PREVENT TEXT STACKING */
  display: inline-flex !important;
  flex-direction: row !important;
  /* Force icon and text to stay side-by-side */
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
  /* THE FIX: Prevents "View Resume" from wrapping */

  /* 3. TYPOGRAPHY */
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;

  /* 4. PREMIUM THEME */
  background: linear-gradient(180deg,
      rgba(59, 130, 246, 0.18) 0%,
      rgba(59, 130, 246, 0.08) 100%) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow:
    0 0 20px rgba(59, 130, 246, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.4);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin-bottom: 20px;
}

/* RESET THE ICON SO IT DOESN'T PUSH THE BOX */
.resume-top i {
  font-size: 18px !important;
  margin: 0 !important;
  /* Remove any old margins that might be pushing the height */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* HOVER INTERACTIONS */
.resume-top:hover {
  transform: translateY(-3px) scale(1.02);
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.8) !important;
  box-shadow: 0 0 35px rgba(59, 130, 246, 0.3), 0 15px 45px rgba(0, 0, 0, 0.5);
}

.resume-top:hover i {
  transform: rotate(8deg) scale(1.1);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Space between Resume and LinkedIn */
  margin-left: auto;
  /* Safety net to force it to the right */
}

/* shared */
.top-actions .btn {

  padding: 0 14px;
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 14px 40px rgba(0, 0, 0, .35);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.top-actions .btn:hover {
  transform: translateY(-1px);
}

/* PRIMARY: Resume */
.top-actions .btn-primary {
  background: linear-gradient(180deg,
      rgba(var(--accent-rgb), .28),
      rgba(var(--accent-rgb), .14));
  border: 1px solid rgba(var(--accent-rgb), .55);
  box-shadow:
    0 16px 45px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(var(--accent-rgb), .10),
    0 0 22px rgba(var(--accent-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.top-actions .btn-primary:hover {
  border-color: rgba(var(--accent-rgb), .70);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, .46),
    0 0 28px rgba(var(--accent-rgb), .30),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* SECONDARY: LinkedIn */
.top-actions .btn-outline {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(233, 233, 242, .92);
}

.top-actions .btn-outline:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
}

/* Arrow “nudge” on hover */
.top-actions .btn .arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform .16s ease;
  opacity: .9;
}

.top-actions .btn:hover .arrow {
  transform: translateX(2px);
}


.eyebrow {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 8px;
  margin-top: -10px;
  display: block;
}

.title {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;

  margin-top: 0px;
  margin-bottom: 24px;
  /* Give the title a slight gradient for that 'Senior' finish */
  background: linear-gradient(to bottom, #ffffff, #a7a7bc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Buttons / inputs ---------- */
.btn {
  appearance: none;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(var(--accent-rgb), 0.18);
}

.btn--ghost {
  border-color: var(--stroke);
  background: rgba(255, 255, 255, 0.04);
}

.input {
  width: 260px;
  max-width: 60vw;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  color: var(--text);
  outline: none;
}

.input:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.link {
  color: rgba(var(--accent-rgb), 0.95);
  text-decoration: none;
  font-weight: 700;
}

.link:hover {
  text-decoration: underline;
}

.muted {
  color: var(--muted);
}

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(140px, auto);
  align-items: stretch;

  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.04);

  background:
    radial-gradient(700px 220px at 45% 45%, rgba(var(--accent-rgb), .42), transparent 60%),
    radial-gradient(500px 200px at 55% 60%, rgba(var(--accent-rgb), .24), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 18px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
  min-height: 140px;
}

/* Add this to your card hover specifically for dark images */
.card:hover {
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 280px at 20% 10%, rgba(255, 255, 255, 0.06), transparent 55%);
  opacity: .65;
}

/* ---------- Wide headings ---------- */
.wide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.wide__head h3 {
  margin: 0;
}


/* --- 4-BOX STATUS GRID --- */
.status-grid {
  /* Critical: This tells the grid to span from line 1 to the end (-1) */
  grid-column: 1 / -1;

  display: grid;
  /* This creates 4 equal columns */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
  width: 100%;
}

.stat-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 100px;
  transition: all 0.2s ease;
  height: 100%;
}

.stat-box:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Typography */
.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
}

.stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.stat-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Highlight Box (Box 1) */
.stat-box.highlight {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.stat-box.highlight .stat-value {
  color: #60A5FA;
  /* Blue text for the most important part */
}

.stat-box.highlight:hover {
  background: rgba(59, 130, 246, 0.15);
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulse 2s infinite;
}

/* =========================
   TIMELINE (final - v2 only)
   ========================= */
.timeline {
  grid-column: 1 / span -1;
  grid-row: auto;
  min-height: 340px;
  padding: 24px;

  position: relative;
  overflow: hidden;
}

.timeline::after {
  content: "";
  position: absolute;
  inset: -80px -120px;
  pointer-events: none;
  background:
    radial-gradient(420px 220px at 18% 20%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    radial-gradient(520px 240px at 65% 55%, rgba(255, 255, 255, 0.06), transparent 55%);
  opacity: .85;
}

.timelineList {
  display: grid;
  /* This creates 3 equal columns for your 3 items */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* vertical line */
.timelineList::before {
  display: none;
}

/* Reset the grid inside the item so it fills the box */
.tItem {
  display: block;
  grid-template-columns: none;
  border: none;
}

/* dot ring */
.tDot {
  display: none;
}

.tContent {
  position: relative;
  padding: 14px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tItem:hover .tContent {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), rgba(255, 255, 255, 0.02));
}

.tTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.tTitle {
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* tiny icon bubble */
.tTitle::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.tItem.is-now .tTitle::before {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.tItem.is-learn .tTitle::before {
  background: rgba(255, 255, 255, 0.04);
}

.tItem.is-next .tTitle::before {
  background: rgba(255, 255, 255, 0.03);
}

.tMeta {
  font-size: 12px;
  color: rgba(233, 233, 242, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
}

.tText {
  margin: 0;
  line-height: 1.65;
  font-size: 13.5px;
  color: rgba(233, 233, 242, 0.78);
}

/* =========================
   PROJECTS + SKILLS (row 2)
   ========================= */

/* --- MIDDLE SECTION WRAPPER --- */
.middle-section {
  /* ✅ ADD THIS LINE so the wrapper fills the screen width */
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

/* --- LEFT CHILD --- */
#projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  width: 100%;
  height: 100%;
  min-width: 0;
  /* Prevents squashing */
  /* IMPORTANT: Do NOT put grid-column or grid-row here. The parent handles it. */
}

/* --- RIGHT CHILD --- */
#skills {
  grid-column: auto !important;
  /* Forces it to ignore the old "Column 9" rule */
  grid-row: auto !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 24px;
}

#skills .learning-status {
  margin-top: auto;
}

/* --- THE SUPER HEADER (Stats + Skills) --- */
.dashboard-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Split screen in half */
  gap: 24px;
  margin-bottom: 24px;
}

/* The 2x2 Grid for Stats */
.stats-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 columns inside the cluster */
  gap: 16px;
}

/* Force stats to be square-ish */
.stats-cluster .stat-box {
  aspect-ratio: auto;
  /* Let content dictate height, or use 16/9 */
  min-height: 120px;
}

/* The Skills Card (Right Side) */
.skills-card-tall {
  height: 100%;
  /* Match height of the stats cluster */
  display: flex;
  flex-direction: column;
}

/* --- Grid Container to force Small Boxes --- */
.projectGrid {
  display: grid;
  /* CHANGE from 3 to 2 for better sizing */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

#projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  width: 100%;
  min-width: 0;
  /* Prevents squashing */
  /* IMPORTANT: Do NOT put grid-column or grid-row here. The parent handles it. */
}

/* Forces 3 cards across, prevents them from becoming slivers */
.projectGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.project {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  /* Critical: prevents grid blowouts */
  background: rgba(10, 10, 14, 0.6);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.project:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Thumbnail Logic */
.project__thumb {
  position: relative;
  width: 100%;
  height: 180px;
  /* Slightly taller for more drama */
  overflow: hidden;
  display: block;

  /* THE FIX: Add a glass border at the bottom so it doesn't bleed into the card */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  /* Inner Vignette */
}

.project__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Image Scale Logic */
.project__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Keep the top of the screenshot (the site nav) always in view */
  transform: scale(1);
  transition: filter 0.4s ease;
  filter: brightness(0.9);
  /* Dim slightly so text pops */
}

/* Hover: brighten only — no zoom, so the full screenshot stays visible */
.project:hover .project__thumb img {
  filter: brightness(1.05);
}

/* Text & Meta Area */
.project__meta {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 50%;
  /* Force it to fill the card */
  /* Pushes links to the bottom */
}

.project__tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}

.project__link-title {
  text-decoration: none !important;
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  display: block;
}

.project:hover .project__link-title {
  color: var(--accent) !important;
}

/* Links/Buttons at Bottom */
.project__links {
  margin-top: auto;
  /* Anchors buttons to bottom of card */
  display: flex;
  gap: 8px;
  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* Optional: A faint line above buttons looks very Pro */
  width: 100%;
}



.project__links a,
.pill-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  color: white !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.project__links a:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.project:nth-child(3) a,
.project:nth-child(3) a:hover {
  text-decoration: none !important;
}


/* ============================================================
     END PROJECT SECTION FIX
     ============================================================ */
/* Skills */
#skills #resume {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
  padding: 14px;
  margin-bottom: 14px;
}

#skills {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* FIX 1: Reduce padding from 24px to 16px to give buttons more room */
  padding: 16px 20px !important;

  width: 100%;
  min-width: 0;
}

#skills #resume .wide__head {
  margin-bottom: 8px;
}

#skills #resume .wide__head h3 {
  font-size: 16px;
}

#skills .logos {
  display: grid;
  /* Strict 3 columns */
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));

  /* FIX 2: Reduce gap from 8px to 6px for a tighter fit */
  gap: 6px;

  margin-top: 12px;
  margin-bottom: 20px;
}

#skills .logoBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  border-radius: 10px;

  /* FIX 3: Micro-adjust font size */
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);

  padding: 0 4px;
  cursor: default;

  /* FIX 4: Prevent text from breaking the layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  /* Force it to fill the grid cell */
}

.fa-aws {
  font-size: 16px !important;
  /* Slightly larger than the 14px default */
}

#skills .logoBox:hover {
  /* A subtle blue tint for the background */
  background: rgba(59, 130, 246, 0.05);

  /* The "Glowing" border - using a nice electric blue */
  border-color: rgba(59, 130, 246, 0.5);

  /* The Glow Effect: A sharp inner glow and a soft outer spread */
  box-shadow:
    0 0 15px rgba(59, 130, 246, 0.15),
    inset 0 0 4px rgba(59, 130, 246, 0.2);

  transform: translateY(-2px);
  /* Makes it feel "interactive" when touched */
  color: #fff;
  /* Brightens text on hover */
}

#skills .logoBox i {
  /* Fixed width lane for the icon so text starts at same spot */
  width: 18px;
  margin-right: 8px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(100%) opacity(0.5);
}

.logoBox:hover i {
  /* This removes the gray and brings back the original brand colors */
  filter: grayscale(0%) brightness(1);

  /* IMPORTANT: Remove 'color: #fff' or 'color: blue' if you had them, 
     so the natural FontAwesome brand color shows through */
  /* color: white;  */

  opacity: 1;
  transform: scale(1.12);
  transition: all 0.3s ease;

}

.learning-status {
  margin-top: auto;
  /* Keeps it at the bottom */
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.tiny-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.learning-status .muted {
  font-size: 14px;
}


.learning-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  /* Dashed = "Not yet" */
  border-radius: 4px;
}

.learning-items {
  display: flex;
  flex-wrap: wrap;
  /* Allows it to flow if the box gets small */
  align-items: center;
  gap: 12px;
  /* Controlled spacing */
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-top: 8px;

}

.learning-items span {
  color: rgba(255, 255, 255, 0.2);
}

.separator {
  color: rgba(255, 255, 255, 0.1);
  /* Very faint dot separator */
  font-size: 10px;
}

/* Custom styling for the Internship thumbnail */
.project__thumb--technical {
  background: linear-gradient(145deg, #111, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  text-decoration: none !important;
}

.tech-stack-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.tech-main {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  /* Change from var(--accent) to this brighter Cyan/Blue */
  color: #38bdf8 !important;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
  /* Adds a "Screen Glow" effect */
  /* Use your primary theme color */
  text-transform: uppercase;
}

.tech-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- 1. COLUMN STACKING ENGINE --- */


/* These wrappers hold the cards vertically */
.left-col-stack,
.right-col-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* --- 2. VERTICAL TIMELINE (The "10/10" Look) --- */
#about {
  padding: 24px;
  display: flex;
  /* Required to use 'margin-top: auto' below */
  flex-direction: column;
  /* Keeps your text on top and cards on bottom */
  height: 100%;
  /* Forces the card to fill the entire vertical space */
  box-sizing: border-box;
}

.journey-card {
  padding: 24px;
}

.vertical-timeline {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding-left: 4px;
  /* Slight indent */
}

.v-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 28px;
  /* Space between timeline items */
}

/* Remove padding from last item */
.v-item:last-child {
  padding-bottom: 0;
}

/* The Dot */
.v-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-top: 5px;
  /* Aligns with text */
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(7, 7, 11, 1);
  /* Fake border to cut the line */
}

/* The Active (Top) Dot */
.v-dot.active {
  background: #60A5FA;
  /* Blue */
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
  position: relative;
}

.v-dot.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 100%;

  border-radius: 50%;
  border: 1px solid #10b981;
  /* Match your green color */

  /* Animation settings */
  opacity: 0;
  animation: ringPulse 2s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 3. Define the animation */
@keyframes ringPulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-width: 2px;
  }

  100% {
    width: 300%;
    /* Expands to 3x the size */
    height: 300%;
    opacity: 0;
    border-width: 0px;
  }
}

/* The Connecting Line */
.v-line {
  position: absolute;
  left: 4px;
  /* Center of dot */
  top: 15px;
  /* Start below dot */
  bottom: -5px;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
}

/* Typography */
.v-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 15px;
}

.v-date {
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 2px;
}

.v-title {
  margin: 0;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

.v-desc {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* --- 3. ABOUT CARD STYLING --- */
.about-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
  margin-bottom: 20px;
}

.highlight-text {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

/* 0. Impact Metrics Grid */
.impact-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.impact-metric-box {
  background: rgba(59, 130, 246, 0.05);
  /* Subtle blue tint */
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */
  text-align: center;
  transition: all 0.3s ease;
}

.impact-metric-box:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.metric-value {
  font-size: 28px;
  font-weight: 800;
  color: #60A5FA;
  /* Bright blue */
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(to bottom, #ffffff, #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metric-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 4px;
}

.metric-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* 1. The Container */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: auto;
  /* THIS IS THE FIX: It pushes the grid to the bottom */
  padding-top: 20px;
  /* Adds a little safety breathing room */
}

/* 2. The Mini-Card */
.about-item {
  display: flex;
  align-items: center;
  gap: 14px;
  /* More space between icon and text */
  padding: 16px;
  /* Bigger touch target */
  border-radius: 14px;

  /* Default Dark Glass State */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: all 0.2s ease;
  cursor: default;
}

/* Hover Effect: Subtle lift & glow */
/* Add a blue glow when you hover over the About Me stats */
.about-item:hover {
  background: rgba(56, 189, 248, 0.08);
  /* Subtle Cyan Tint */
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.about-item:hover .about-icon {
  background: #38bdf8;
  /* Icon turns solid bright blue */
  color: #000;
  /* Icon symbol turns black for contrast */
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* 3. The Icon Box */
/* Icon Box Base */
.about-icon {
  width: 42px;
  /* Bigger Icon Box */
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* Bigger Icon */
  flex-shrink: 0;
}

/* 4. Text Styling */
.about-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertically centers the text block against the icon */
  gap: 0px !important;
  /* ❌ Remove the flex gap (was 2px) */
}

/* --- COLOR THEMES (The "Pop") --- */

/* 1. BLUE (Focus) */
.about-item.blue .about-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
}

.about-item.blue:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.05);
}

/* 2. PURPLE (Location) */
.about-item.purple .about-icon {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
}

.about-item.purple:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.05);
}

/* 3. GREEN (Hobby) */
.about-item.green .about-icon {
  background: rgba(34, 197, 94, 0.15);
  color: #4ADE80;
}

.about-item.green:hover {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.05);
}

/* 4. ORANGE (Reading) */
.about-item.orange .about-icon {
  background: rgba(249, 115, 22, 0.15);
  color: #FB923C;
}

.about-item.orange:hover {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.05);
}

/* Text Styles */
.about-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  line-height: 1;
  /* Snap text tight */
  margin-bottom: 4px;
  /* The ONLY spacing source (clean 4px gap) */
}

.about-value {
  display: block;
  /* Forces new line */
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
  margin-top: 0px !important;
  /* ❌ Remove the margin (was 2px) */
  line-height: 1.1;
  /* Tighter line height prevents floating */
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.text-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 55px 0 0px 0;
  /* More space on top to let the bento breathe */
  color: rgba(255, 255, 255, 0.15);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
}

.text-divider::before,
.text-divider::after {

  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.text-divider::before {
  margin-right: 25px;
}

.text-divider::after {
  margin-left: 25px;
}

/* ---------- Responsive ---------- */
@media (min-width: 1025px) {
  .main {
    max-width: none;
  }
}


/* =========================
   Contact (clean + compact)
   For: .contactCard + .contactForm layout
   ========================= */

.contactCard {
  grid-column: 1 / -1;
  box-sizing: border-box;
  /* Crucial for padding */
  margin-top: 0px;

  position: relative;
  overflow: hidden;

  /* layout */
  display: flex;
  /* Changing from flex to block can help stability here */
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;

  /* sizing */
  width: 100% !important;
  max-width: 100%;
  /* fill container */
  padding: 24px;
  /* slightly tighter = shorter */
  border-radius: 22px;

  /* panel look */
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Match the sibling's border */
  background:
    radial-gradient(600px 220px at 15% 30%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
  border-left: none;
  /* Remove the solid blue border */
}

/* subtle accent strip */
.contactCard::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 999px;


}

/* soft highlight wash */
.contactCard::after {
  content: "";
  position: absolute;
  inset: -60px -120px;
  pointer-events: none;
  top: 20%;
  /* Starts 20% down */
  height: 60%;
  /* Only covers the middle 60% of the card */
  width: 3px;

}

.contactForm .input,
.contactTextarea {
  background: rgba(255, 255, 255, 0.03);
  /* Lighter and more transparent */
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  /* Subtle glass effect */
  transition: all 0.3s ease;
}

.contactForm .input:focus,
.contactTextarea:focus {
  background: rgba(59, 130, 246, 0.05);
  /* Tint blue on focus */
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

/* keep content above effects + align to strip */
.contactCard>* {
  position: relative;
  z-index: 1;
  padding-left: 10px;
  text-align: left;
}

/* heading */
.contactCard h3 {
  margin: 0 0 10px;
  font-size: 18.72px;
  letter-spacing: -0.01em;
  padding-top: 6px;
  padding-left: 5px;
}

.contactCard .muted {
  margin: 0;
  font-size: 12px;
  padding-left: 5px;
}

.contactActions .btn {
  width: 100%;
}


/* =========================
     Form layout
     ========================= */

.contactForm {
  width: 100%;
  /* fill to the right */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
}

.contactForm .btn {
  background: #4A90E2;
  /* Same blue as your AWS + STRIPE text */
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Smooth transition fix */
}

.contactForm .btn:hover {
  background: #60a5fa;
  /* Brighter blue on hover */
  transform: translateY(-3px);
  /* Match the card lift effect */
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.4);
}

/* name + email */
.contactRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;

}

/* input fields */
.contactForm .input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  color: rgba(233, 233, 242, 0.90);
}

.contactForm .input::placeholder {
  color: rgba(233, 233, 242, 0.35);
}

.contactForm .input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.30);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}

/* textarea (shorter + nicer proportions) */
.contactTextarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  color: rgba(233, 233, 242, 0.90);
  outline: none;
  resize: vertical;

  min-height: 110px;
  /* shorter */
  max-height: 220px;
  /* prevents huge box */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.contactTextarea::placeholder {
  color: rgba(233, 233, 242, 0.35);
}

.contactTextarea:focus {
  border-color: rgba(var(--accent-rgb), 0.30);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}

/* bottom row: note left, send right */
.contactActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.contactNote {
  font-size: 12px;
  opacity: 0.85;
}

/* Send button */
.contactActions .btn {
  margin-left: auto;
  border-radius: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.16);
  align-items: center;
  justify-content: center;
  width: 15%;
  width: auto;
  min-width: 100px;
  padding: 10px 24px;
}

.contactActions .btn:hover {
  background: rgba(var(--accent-rgb), 0.22);
}





/* =========================
   HOME page matches PROJECTS
   ========================= */

/* Use same layout wrapper as projects */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

/* Main becomes a single big "bubble" container */
.main {
  min-width: 0;
  padding: 10px;

  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The bubble itself */
.main__inner {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 14, 0.75);
  backdrop-filter: blur(12px);

  /* DEPTH ENGINE */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    /* Large outer shadow */
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  /* Inner specular highlight */

  /* Remove the negative margins to keep the 20px alignment perfect */
  margin: 0;
  padding: 40px;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 60px;
  margin-top: 0px !important;
  /* Removed the -29px which caused the overlap */
  margin-bottom: -15px;
  margin-left: 40px;
  /* Reset this to let the grid handle spacing */
  margin-top: 0 !important;
  align-items: start !important;
  /* Change from 'stretch' to 'start' to snap to top */
}

/* Soft glow like projects */
.main__inner::after {
  content: "";
  position: absolute;
  inset: -80px -140px;
  pointer-events: none;
  background:
    radial-gradient(520px 240px at 75% 35%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(620px 280px at 25% 55%, rgba(var(--accent-rgb, 59, 130, 246), 0.10), transparent 60%);
  opacity: .85;

  /* DEPTH ENGINE */
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    /* Large outer shadow */
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  /* Inner specular highlight */
}

/* Keep content above glow */
.main__inner>* {
  position: relative;
  z-index: 1;
}

/* 1. Hide the X button by default for Desktop */
.close-menu {
  display: none;
}



body {
  overflow-x: hidden;
  /* This prevents the layout from shifting when animations trigger */
}

/* 1. THE ENGINE */
/* 1. THE IMPROVED ENGINE (No Movement) */
@keyframes universalSpawn {
  0% {
    opacity: 0;
    filter: blur(10px);
    /* Use blur instead of scale to prevent shifting */
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* 2. APPLY TO ALL MAIN CARDS */
.topbar,
.card,
.timeline,
#projects,
#skills,
.contactCard,
.main__inner {
  /* Set initial state to hidden so there is no 'flash' of content */
  opacity: 0;
  animation: universalSpawn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* 3. STAGGERED REVEAL (Optional but looks premium) */
.topbar {
  animation-delay: 0.1s;
}

.status-grid {
  animation-delay: 0.2s;
}

.middle-section {
  animation-delay: 0.3s;
}

#about {
  animation-delay: 0.4s;
}

/* 6. MOBILE SAFETY GUARD */
/* Only apply hidden state if the screen is actually small */
@media (min-width: 901px) {}

/* LOADING ANIMATION */
/* Improve the skimmability of your text */
.now-description {
  color: rgba(255, 255, 255, 0.6);
  /* Fade non-essential text */
  line-height: 1.6;
}

.now-description b {
  color: #fff;
  /* Pop the important tech stack keywords */
  font-weight: 500;
}

/* Add premium 'glass' effect to cards */
.card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Project Card Hover Animation */
.project-card:hover .project-thumb {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.tText.muted {
  color: rgba(255, 255, 255, 0.5);
  /* Dim the secondary text */
  font-weight: 300;
  line-height: 1.6;
}

.tText b {
  color: #ffffff;
  /* Make the bold text pure white */
  font-weight: 600;
  letter-spacing: 0.2px;
}


.statusLabel {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.statusTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Add a separator between tags without extra HTML */
.statusTag:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.2);
}

/* Pulse Animation for the 'Available' Badge */
.pulse-dot {
  width: 5px;
  /* Smaller dot for the smaller pill */
  height: 5px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 8px #4ade80;
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

/* 1. Only apply background to main containers, NOT the internal timeline items */
.card {
  background-color: rgba(20, 20, 20, 0.6) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px;
  /* Ensure this matches your design */
}

/* 2. Reset tItem so it doesn't have its own box/border */
.tItem {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  padding: 4px 0 !important;
  /* Adjust vertical spacing between items */
}

/* 3. The Hover State (Only for the main card) */
.card:hover {
  background-color: rgba(30, 30, 30, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.3s ease;
}

/* 1025px and above  */
@media (min-width: 1025px) {


  .app {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;

  }

  .main {
    margin-left: -10px !important;
    max-width: calc(100% - 20px) !important;

  }

  .eyebrow {
    width: 100% !important
  }




  .close-menu {
    display: none !important;
  }

  .mobilebar {
    display: none !important;
    /* Always hide mobile bar on desktop */
  }


}

/* 1025px and above  */
/* --- THE 10/10 MOBILE OVERHAUL --- */
@media (max-width: 1100px) {

  /* 1. Reset Global Layout */
  .app,
  .page {
    display: block !important;
    padding: 0 !important;
  }

  /* 2. Hide Desktop Elements */
  .floating-dock {
    display: none !important;
  }

  /* 3. Force Sidebar into Drawer Mode */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-105%) !important;
    /* Hide off-screen */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 9999 !important;
    /* Above everything */
    background: #0C0C0E !important;
    border-radius: 0 !important;
  }

  /* 4. The Trigger Class */
  .sidebar.is-open {
    transform: translateX(0) !important;
  }

  /* 5. Fix Main Content Overlap */
  .main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main__inner {
    margin: 0 !important;
    padding: 80px 20px 40px 20px !important;
    /* Space for toggle */
    border-radius: 0 !important;
    width: 100% !important;
    min-height: 100vh;
  }

  /* 6. Fix the Toggle Button Visibility & Clickability */
  /* 1. Ensure the container doesn't block clicks */
  .mobilebar {
    display: flex !important;
    position: fixed !important;
    top: 20px;
    left: 20px;
    z-index: 10001 !important;
    /* Higher than the main section */
    background: transparent !important;
    pointer-events: auto !important;
  }

  /* 2. Style the button to be explicitly clickable */
  .mobile-toggle {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    cursor: pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    /* Force click layer */
  }

  /* 1. Layout Reset */
  .app,
  .page {
    display: block !important;
    padding: 10px !important;
  }

  @media (max-width: 1100px) {
    .sidebar {
      z-index: 20000 !important;
      /* Higher than mobilebar and backdrop */
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      height: 100vh !important;
      width: 300px !important;
      transform: translateX(-100%) !important;
      background: #0C0C0E !important;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .backdrop {
      z-index: 10000 !important;
    }

    .mobilebar {
      display: flex !important;
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 70px;
      padding: 0 20px !important;
      align-items: center;
      justify-content: flex-start;
      /* Keeps menu on the left */
      gap: 15px;

      /* Premium Glass Look */
      background: rgba(7, 7, 11, 0.8) !important;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 10000 !important;
    }

    /* Polish the icon button to look like a "tab" */
    .mobile-toggle {
      position: static !important;
      /* Reset from your fixed positioning */
      width: 44px !important;
      height: 44px !important;
      background: rgba(255, 255, 255, 0.03) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 12px !important;
    }

    /* 1. Stack the Title and Button */
    .topbar {
      display: flex !important;
      flex-direction: column !important;
      /* Forces vertical stacking */
      align-items: flex-start !important;
      /* Aligns title and button to the left */
      gap: 24px !important;
      /* Space between Portfolio and Resume button */
      padding-top: 60px !important;
      /* Ensures space below the sandwich menu */
      margin-bottom: 40px !important;
    }

    /* 2. Make Resume Bar 100% Width */
    .top-actions {
      width: 100% !important;
      /* Container fills width */
      margin-left: 0 !important;
    }

    .resume-top {
      width: 100% !important;
      /* Button fills container */
      height: 54px !important;
      /* Matches desktop height for consistency */
      justify-content: center !important;
      /* Centers text and icon inside */
      margin: 0 !important;

    }

    /* 3. Adjust Title Size for Mobile */
    .title {
      font-size: 42px !important;
      /* Prevents title from bleeding off-screen */
      margin-bottom: 0 !important;
    }

    /* 3. The Grid Killer (Forces everything into one column) */
    .bento,
    .middle-section,
    .projectGrid,
    .timelineList,
    .dashboard-header,
    .stats-cluster {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: 1fr !important;
      width: 100% !important;
      gap: 16px !important;
    }

    /* THE FIX: Specifically targets the status section to be 2x2 */
    .status-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
      /* Slightly tighter gap for mobile */
      width: 100% !important;
    }

    .stat-box {
      /* Ensures boxes have consistent height in the 2x2 grid */
      min-height: 110px !important;
      padding: 16px !important;
    }

    /* About mini-cards (Focus / Languages / Methodology / Reading):
       single column so long values get room to breathe on phones */
    .about-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    .about-item {
      padding: 14px !important;
    }

    .about-value {
      white-space: normal !important;
      overflow-wrap: anywhere;
      line-height: 1.3 !important;
    }

    /* 4. Card Sizing */
    .card,
    .stat-box,
    .project,
    .about-item,
    .stat-box.highlight {
      grid-column: span 1 !important;
      width: 100% !important;
      min-height: auto !important;
    }

    /* 5. Main Container Cleanup */
    .main {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .main__inner {
      padding: 20px 20px !important;
      margin-left: 0 !important;
      /* Removes the 40px desktop gap */
      border-radius: 20px !important;
      /* Full width looks better on mobile */
      margin-top: 70px !important;
    }
  }

  .resume-top {
    width: 100% !important;
    /* Full width button is easier to tap */
    justify-content: center !important;
  }
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 9998;
  /* Just below the sidebar */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* =========================
   MOBILE RESPONSIVENESS OVERRIDES (PHONES)
   ========================= */
@media (max-width: 768px) {

  /* 1. Impact Metrics */
  .impact-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 2. Main Feature Cards Padding */
  #about,
  .skills-card-tall,
  .card {
    padding: 16px !important;
  }

  /* 3. Case Study Text Columns */
  .case-text,
  .about-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4. Case Study Images Scaling */
  .case-image img,
  .screenshot,
  .main__inner img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =====================================================================
   POLISH LAYER  —  global refinements (loaded last so it wins ties)
   Smoother physics, better type, accessible focus, subtle motion.
   ===================================================================== */

/* ---------- Base rendering & typography ---------- */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Accent text selection */
::selection {
  background: rgba(var(--accent-rgb), 0.35);
  color: #fff;
}

/* ---------- Custom scrollbar ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
  background-clip: content-box;
}

/* ---------- Accessible focus ring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.stat-box:focus-visible,
.filter-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.9);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Cards: smooth physics + hover lift ---------- */
.card {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(var(--accent-rgb), 0.18) !important;
}

/* Soft interactive top-light that follows the card into hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(600px 200px at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.card:hover::before {
  opacity: 1;
}

/* keep card content above the glow layer */
.card>* {
  position: relative;
  z-index: 1;
}

/* ---------- Stat boxes: refined lift + highlight glow ---------- */
.stat-box {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.stat-box.highlight:hover {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(var(--accent-rgb), 0.25);
}

/* ---------- Featured project thumbs & pills ---------- */
.project__thumb {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.project:hover .project__thumb {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.pill-btn {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pill-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Projects page cards & tags ---------- */
.project-card {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-card .openBtn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.project-card:hover .openBtn {
  transform: translate(3px, -3px);
  color: var(--accent2);
}

.tag {
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* ---------- Skill chips: subtle interactive shine ---------- */
#skills .logoBox {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

#skills .logoBox:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ---------- Filter buttons ---------- */
.filter-btn {
  transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-btn:hover {
  transform: translateY(-1px);
}

/* ---------- Sidebar nav polish ---------- */
.nav-link {
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover {
  transform: translateX(3px);
}

.social-btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-3px);
}

/* ---------- Entrance animations (hero region) ---------- */
@keyframes polishFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.topbar,
.status-grid .stat-box,
.middle-section {
  animation: polishFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.topbar {
  animation-delay: 0.02s;
}

.status-grid .stat-box:nth-child(1) {
  animation-delay: 0.08s;
}

.status-grid .stat-box:nth-child(2) {
  animation-delay: 0.14s;
}

.status-grid .stat-box:nth-child(3) {
  animation-delay: 0.20s;
}

.status-grid .stat-box:nth-child(4) {
  animation-delay: 0.26s;
}

.middle-section {
  animation-delay: 0.30s;
}

/* Projects page grid entrance */
.grid .project-card {
  animation: polishFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.grid .project-card:nth-child(1) {
  animation-delay: 0.06s;
}

.grid .project-card:nth-child(2) {
  animation-delay: 0.12s;
}

.grid .project-card:nth-child(3) {
  animation-delay: 0.18s;
}

.grid .project-card:nth-child(4) {
  animation-delay: 0.24s;
}

.grid .project-card:nth-child(5) {
  animation-delay: 0.30s;
}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }

  .topbar,
  .status-grid .stat-box,
  .middle-section,
  .grid .project-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   CONTRAST BUMP  —  lift muted labels/subs to meet WCAG AA on dark bg
   ===================================================================== */
.stat-label,
.about-label,
.tiny-label {
  color: rgba(255, 255, 255, 0.62) !important;
}

.stat-sub,
.metric-sub {
  color: rgba(255, 255, 255, 0.7);
}

.project__tag {
  color: rgba(233, 233, 242, 0.72);
}

/* =====================================================================
   ABOUT + JOURNEY  —  side-by-side row (Recognition sits full-width above)
   ===================================================================== */
.about-journey-row {
  grid-column: 1 / -1;
  display: grid;
  /* Match the Featured Projects / Skills row above so About lines up under
     Featured (2fr) and Journey lines up under Skills (1fr, same width) */
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.about-journey-row #about,
.about-journey-row .journey-card {
  height: 100%;
  margin: 0;
  min-width: 0;
}

/* Stack them on smaller screens so neither column gets cramped */
@media (max-width: 900px) {
  .about-journey-row {
    grid-template-columns: 1fr;
  }
}