/* =========================================================
   CLEAN GITHUB THEME (FIX PACK)
   1) Skills + Education side-by-side (two-col grid)
   2) Remove "Timeline view for quick scanning." (Experience)
   3) Education gets blue line + dots like Experience/Awards
   4) No outer border unless hover
   5) Uniform theme switching (no fast/slow cards)
   ========================================================= */

/* -------------------------
   THEME TOKENS (DEFAULT: DARK)
------------------------- */
:root{
  --radius: 24px;
  --radius2: 18px;
  --max: 1920px;
  --navh: 56px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --theme-dur: 520ms;                  /* ✅ unified duration */
  --theme-ease: cubic-bezier(.22,.61,.36,1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --h1: clamp(40px, 5vw, 60px);
  --h2: clamp(26px, 2.6vw, 34px);
  --h3: 18px;
  --body: 16px;
  --leading: 1.75;

   /* Gold (Project title highlight) */
  --gold: #f5c518;
  --gold2: #ffd700;
  --gold-ring: rgba(245,197,24,0.22);

  /* GitHub-like (dark) */
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --muted2: #6e7681;
  --accent: #58a6ff;
  --accent2: #2f81f7;

  --shadow: 0 10px 26px rgba(0,0,0,0.35);
  --glow: 0 12px 26px rgba(0,0,0,0.40);

  --hover-lift: translateY(-8px);
  --hover-shadow: 0 18px 55px rgba(0,0,0,0.35);

  /* hover border ring */
  --hover-ring: 0 0 0 1px rgba(88,166,255,0.22) inset;
  --hover-dur: 360ms;
  --hover-ease: cubic-bezier(.22,.61,.36,1);
}

/* Light theme */
html.light{
  --bg: #f5f5f7;
  --panel: #ffffff;   /* ✅ Apple card surface (optional) */
  --panel2:#ffffff;   /* ✅ optional */
  --text: #1d1d1f;    /* ✅ optional */
  --border: #d0d7de;
  --muted: #57606a;
  --muted2: #6e7781;
  --accent: #0969da;
  --accent2: #1f6feb;
  --gold: #c99700;
  --gold2: #ffd24a;
  --gold-ring: rgba(201,151,0,0.22);


  --shadow: 0 10px 22px rgba(27,31,36,0.10);
  --glow: 0 12px 26px rgba(27,31,36,0.12);
  --hover-shadow: 0 18px 55px rgba(12,14,20,0.12);
  --hover-ring: 0 0 0 1px rgba(31,111,235,0.18) inset;
}

/* -------------------------
   GLOBAL
------------------------- */
#top{
  height: 2px;
  display: block;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navh) + 18px);
}

body{
  margin: 0;
  position: relative;   /* ✅ ADD THIS LINE */

  /* ✅ Safe area padding (iPhone notch + home indicator) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);

  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--leading);
  color: var(--text);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg) !important;

  transition:
    background-color var(--theme-dur) var(--theme-ease);
}

/* Subtle wide-screen glow (Apple-like background depth) */
body::before{ content: none !important; }

/* ✅ Only animate theme changes on major UI blocks (avoid * which breaks iOS SVG animations) */
html.theme-switching :where(
  html, body,
  .nav-inner, .nav, .nav-links, .nav-actions,
  .card, .btn,
  .project-card, .timeline-item, .item,
  .cert, .verify-card, .stat, .time-card,
  .objective, .icon-chip, .pill, .tag, .icon-btn,
  #themeFade
){
  transition-property: background-color, border-color, box-shadow, filter, opacity, color;
  transition-duration: var(--theme-dur);
  transition-timing-function: var(--theme-ease);
}

a{ color: inherit; text-decoration: none; }
footer p{ margin: 6px 0; }

a:focus-visible, button:focus-visible{
  outline: 2px solid rgba(88,166,255,0.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
  #introOverlay *{ transition: none !important; }
}

/* -------------------------
   UNIFIED THEME SWITCHING
   Fix: some cards switching faster
------------------------- */
:where(
  .nav-inner, .card, .btn,
  .project-card, .timeline-item, .item,
  .cert, .verify-card, .stat, .time-card,
  .objective, .icon-chip, .pill, .tag, .icon-btn,
  .thumb-badge, .thumb-icon, .logo, .issuer-logo
){
  transition:
    background-color var(--theme-dur) var(--theme-ease),
    color var(--theme-dur) var(--theme-ease),
    border-color var(--theme-dur) var(--theme-ease),
    box-shadow var(--theme-dur) var(--theme-ease),
    filter var(--theme-dur) var(--theme-ease),
    opacity var(--theme-dur) var(--theme-ease),
    transform var(--hover-dur) var(--hover-ease); /* ✅ THIS fixes instant hover */
}
    /* icons/chips visual smoothness */
.icon-chip .sicon,
.thumb-icon,
.icon-btn i{
  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
}

.icon-chip:hover .sicon,
.icon-btn:hover i,
.thumb-badge:hover .thumb-icon{
  transform: scale(1.06);
}


/* During toggle: disable hover “jump” while colors change */
html.theme-switching :where(.card, .project-card, .timeline-item, .item, .cert, .verify-card, .stat, .time-card, .objective, .icon-chip, .pill, .tag, .icon-btn):hover{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* -------------------------
   CONTAINER / LAYOUT
------------------------- */
.container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;

  /* Apple-like fluid side padding */
  padding-left: clamp(16px, 4vw, 72px);
  padding-right: clamp(16px, 4vw, 72px);

  /* keep your top/bottom spacing */
  padding-top: 22px;
  padding-bottom: 80px;

  position: relative;
  z-index: 2;
}

  /* NAV container spacing fix */
.nav .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


.grid{
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 960px){
  .grid{ grid-template-columns: 1fr; }
}

section{
  margin-top: 28px;
}


footer{
  content-visibility: auto;
  contain-intrinsic-size: 200px;
  text-align: center;
  color: var(--muted2);
  padding: 26px 0 10px;
  margin-top: 26px;
}

.anchor{ scroll-margin-top: calc(var(--navh) + 18px); }

/* ✅ Skills + Education side-by-side */
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;

  align-items: stretch;     /* ✅ both columns stretch same height */
}

.two-col > .card{
  height: 100%;             /* ✅ force equal height */
  display: flex;
  flex-direction: column;
}

@media (max-width: 960px){
  .two-col{ grid-template-columns: 1fr; }
}

/* -------------------------
   NAV
------------------------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: calc(14px + env(safe-area-inset-top));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ✅ no border unless hover */
.nav-inner{
  height: var(--navh);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: 999px;
  padding-top: 0;
  padding-bottom: 0;

  background-color: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
  box-shadow: var(--shadow);
}
.nav-inner:hover{
  border-color: var(--border);
  box-shadow: var(--shadow), var(--hover-ring);
}

.brand{
  justify-self: start;

  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  min-width: 0;
}

.nav-links{ justify-self: center; }
.nav-actions{ justify-self: end; }

button.brand{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.brand-initials{
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--accent);
}

.nav-links{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.nav-links a{
  padding: 10px 12px;
  border-radius: 999px;
  flex: 0 0 auto;

  /* Smooth premium animation */
  transition:
    color 220ms ease,
    transform 220ms cubic-bezier(.22,.61,.36,1);
}

.nav-links a:hover{
  color: var(--accent);          /* BLUE like mobile */
  background: transparent;      /* remove gray box */
  transform: translateY(-1px);  /* subtle premium motion */
}
  /* Active nav link (scroll-spy) */
.nav-links a.active{
  color: var(--accent);
  font-weight: 900;
}


.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Hamburger */
.menu-btn{
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid transparent; /* ✅ hidden */
  background: var(--panel);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.menu-btn:hover{
  border-color: var(--border);
  box-shadow: var(--glow), var(--hover-ring);
}
.menu-btn .dot3{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--text);
  opacity: .85;
}

@media (max-width: 1024px){
  .menu-btn{ display: inline-flex; }

  /* Dropdown panel animation: smooth open/close */
  .nav-links{
    display: flex;
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 10px);

    padding: 14px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid transparent;
    box-shadow: var(--shadow);

    flex-direction: column;
    gap: 14px;

    /* Smooth animation */
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
    visibility: hidden;

    transition:
      opacity 220ms var(--theme-ease),
      transform 260ms var(--theme-ease),
      visibility 0ms linear 260ms;
  }

  .nav-links.is-open{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;

    transition:
      opacity 220ms var(--theme-ease),
      transform 260ms var(--theme-ease),
      visibility 0ms;
  }

  /* ✅ Links: text-only (no gray boxes, no borders) */
  .nav-links a{
    padding: 0;                  /* no box */
    background: transparent;      /* no gray */
    border: 0;                    /* no border */
    border-radius: 0;
    color: var(--text);
    font-weight: 800;
    text-align: left;

    transition: color 200ms ease, transform 220ms var(--theme-ease);
  }

  .nav-links a:hover{
    background: transparent;      /* keep it clean */
    color: var(--accent);
    transform: translateX(2px);
  }
}


/* -------------------------
   BUTTONS
------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;     /* remove gray fill */
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    color 220ms ease,
    transform 220ms cubic-bezier(.22,.61,.36,1);
}
.btn:hover{
  color: var(--accent);     /* BLUE */
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

/* Primary stays BLUE */
.btn.btn-primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}
.btn.btn-primary:hover{
  filter: brightness(1.06);
  box-shadow: var(--glow);
}

/* -------------------------
   CARDS / SURFACES
   ✅ No border unless hover
------------------------- */
.card{
  border: 1px solid transparent; /* ✅ hidden */
  background-color: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  position: relative;
  overflow: hidden;
}

/* ✅ Cards: no translateY (prevents hover loop glitch at the bottom edge) */
.card:hover{
  border-color: var(--border);
  box-shadow: var(--hover-shadow), var(--hover-ring);
}

/* ✅ Other components can still lift smoothly */
.item:hover,
.timeline-item:hover,
.project-card:hover,
.cert:hover,
.verify-card:hover,
.stat:hover,
.time-card:hover,
.objective:hover{
  transform: var(--hover-lift);
  border-color: var(--border);
  box-shadow: var(--hover-shadow), var(--hover-ring);
}


/* -------------------------
   HERO (NAME + SUBTITLE + LOCATION)
------------------------- */
.hero-title{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.profile-avatar{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.hero-title h1{
  margin: 0 0 8px;
  font-size: var(--h1);
  letter-spacing: -0.7px;
  white-space: nowrap;
  color: var(--text) !important;
}

/* Optional: if you also want the subtitle/location to snap instantly */
.subtitle,
.locline,
.lead{
}


/* Mobile: add space AFTER NAME */
@media (max-width: 520px){
  .hero-title{ align-items: flex-start; gap: 12px; }
  .hero-title h1{
    white-space: normal;
    line-height: 1.05;
    font-size: clamp(28px, 7vw, 40px);
    margin: 0 0 14px !important;
  }
  .profile-avatar{ width: 46px; height: 46px; }
}

.subtitle-row{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  line-height: 1;
  margin-bottom: 10px;
}
/* ===== PC icon: remove gray square + add hover animation ===== */
.mini-pc{
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;

  background: transparent;     /* ✅ no gray square */
  border: 1px solid transparent;
  box-shadow: none;            /* ✅ remove shadow */

  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
}

.mini-pc i{
  font-size: 18px;     
  position: relative;
  top: -2px;            
  color: var(--accent);
  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
}

.mini-pc:hover{
  transform: translateY(-1px) scale(1.06);
  filter: brightness(1.06);
}

.mini-pc:hover i{
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.35));
}

.subtitle-row:hover .mini-pc{
  transform: translateY(-1px) scale(1.06);
  filter: brightness(1.06);
}
.subtitle-row:hover .mini-pc i{
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.35));
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .mini-pc, .mini-pc i{ transition: none !important; }
}

/* ===== Location icon hover animation ===== */
.locline i{
  font-size: 18px;
  color: var(--accent);
  transform: translateY(1px);

  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
  transform-origin: 50% 80%;
}

.locline:hover i{
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(88,166,255,0.35));
  animation: pinWiggle 700ms var(--hover-ease) 1;
}

@keyframes pinWiggle{
  0%   { transform: translateY(-1px) scale(1.08) rotate(0deg); }
  35%  { transform: translateY(-2px) scale(1.10) rotate(-10deg); }
  70%  { transform: translateY(-2px) scale(1.10) rotate(8deg); }
  100% { transform: translateY(-1px) scale(1.08) rotate(0deg); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .locline:hover i{ animation: none !important; }
}

.subtitle{
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;

  /* alignment nudge */
  position: relative;
  top: 2px;
}


/* Location row */
.locline{
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  margin: 0 0 14px;
  color: var(--muted);
  font-weight: 800;
  margin-left: 8px;
}
.locline span{ padding-left: 6px; }

/* -------------------------
   OBJECTIVE BOX (no border unless hover)
------------------------- */
.objective{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid transparent; /* ✅ hidden */
  background-color: var(--panel);
}
.objective:hover{ border-color: var(--border); }
.objective h3{ margin: 0 0 8px; font-size: 16px; }
.objective p{ margin: 0; color: var(--muted); line-height: 1.7; font-weight: 600; }

/* -------------------------
   PILLS (no border unless hover)
------------------------- */
.pill-row{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pill{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid transparent; /* ✅ hidden */
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  gap: 8px;
}
.pill:hover{
  border-color: var(--border);
  box-shadow: var(--glow), var(--hover-ring);
  transform: translateY(-1px);
}

/* -------------------------
   SKILLS (ICON CHIPS)
------------------------- */
.skill-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 14px 0 2px;
}
.icon-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-weight: 800;
  color: var(--text);
  min-height: 44px;
  border: 1px solid transparent; /* ✅ hidden */
}
.icon-chip:hover{
  border-color: var(--border);
  box-shadow: var(--glow), var(--hover-ring);
  transform: translateY(-1px);
}
.sicon{
  width: 30px; height: 30px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.sicon i{ font-size: 15px; color: #fff; }
.sicon .cpp-badge{
  width: 100%; height: 100%;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 950;
  color: #fff;
}
.sicon.java  { background: linear-gradient(135deg, #ff7a59, #ff3d77); }
.sicon.cpp   { background: linear-gradient(135deg, #5aa7ff, #7c4dff); }
.sicon.python{ background: linear-gradient(135deg, #2dd4bf, #fbbf24); }
.sicon.js    { background: linear-gradient(135deg, #facc15, #f59e0b); }
.sicon.eth   { background: linear-gradient(135deg, #7aa2ff, #6ee7ff); }
.sicon.chain { background: linear-gradient(135deg, #60a5fa, #38bdf8); }

/* -------------------------
   STATS
------------------------- */
.stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.stat{
  border-radius: 18px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
}
.stat:hover{ border-color: var(--border); }
.stat b{ display:block; font-size: 16px; font-weight: 900; }
.stat span{ display:block; margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 800; }
@media (max-width: 960px){
  .stats{ grid-template-columns: 1fr; }
}

/* -------------------------
   SECTION TITLES
------------------------- */
.section-title{
  font-size: var(--h2);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}
.section-sub{
  margin: -4px 0 14px;
  color: var(--muted2);
  line-height: 1.6;
}

/* ✅ Remove ONLY the Experience subtitle (Timeline view...) */
#experience .section-sub{ display:none !important; }

/* -------------------------
   ITEMS (Education)
------------------------- */
.item{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
  position: relative;
}
.item + .item{ margin-top: 12px; }

.item .left{
  min-width: 0;
  display:flex;
  gap: 12px;
  align-items: flex-start;
}
.item .textblock{ min-width:0; }
.item .title{ font-weight: 900; margin: 0 0 4px; font-size: var(--h3); }
.item .meta{ margin: 0; color: var(--muted); line-height: 1.6; }
.item .date{ color: var(--muted2); font-weight: 900; white-space: nowrap; padding-left: 10px; }

/* Logos: stable at browser zoom changes */
.logo,
.issuer-logo{
  width: 46px;
  height: 46px;
  display: block;
  flex: 0 0 46px;

  border-radius: 14px;
  object-fit: contain;

  background: var(--panel);
  border: 1px solid transparent;
  padding: 8px;
  box-shadow: var(--shadow);

  /* IMPORTANT: remove GPU promotion (it can cause zoom artifacts) */
  transform: none;
  backface-visibility: visible;

  /* better downscaling */
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;

  transition: background-color var(--theme-dur) var(--theme-ease),
              border-color var(--theme-dur) var(--theme-ease),
              box-shadow var(--theme-dur) var(--theme-ease);
}

/* -------------------------
   PROJECTS
------------------------- */
.projects-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ 3 per row */
  gap: 16px;
}

/* Tablet */
@media (max-width: 1100px){
  .projects-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 per row */
  }
}

/* Mobile */
@media (max-width: 700px){
  .projects-grid{
    grid-template-columns: 1fr; /* ✅ 1 per row */
  }
}

/* ✅ PROJECT CARD (compact, no wasted top space) */
.project-card{
  border-radius: var(--radius2);
  background: var(--panel);
  border: 1px solid transparent; /* hidden until hover */
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr;   /* ✅ was 150px auto */
}
.project-card:hover{ border-color: var(--border); }

/* ✅ Top area becomes a small “header” for the badge */
.project-thumb{
  position: relative;
  overflow: hidden;

  padding: 14px;                 /* ✅ gives space for the badge */
  min-height: 64px;              /* ✅ small, consistent height */

  background:
    radial-gradient(520px 160px at 10% 0%,
      rgba(88,166,255,0.18),
      transparent 60%),
    var(--panel);
}

/* ✅ Badge is now normal flow (no absolute = no empty space) */
.thumb-badge{
  position: static;              /* ✅ was absolute */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: var(--panel2);

  font-weight: 900;
  color: var(--accent);
}
.thumb-badge i{ color: var(--accent); }
.thumb-badge:hover{ border-color: var(--border); }

.thumb-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--panel);
  border: 1px solid transparent;
}

/* Body stays the same (you can reduce padding if you want even tighter) */
.project-body{ padding: 16px 16px 18px; }

.project-title{ 
  margin: 0 0 8px; 
  font-size: clamp(18px, 1.4vw, 21px); /* ✅ bigger but balanced */
  font-weight: 900;
  letter-spacing: -0.3px;
}

/* ===== Make ONLY Featured badge gold ===== */
.thumb-badge.is-featured{
  color: var(--gold);
}

.thumb-badge.is-featured i{
  color: var(--gold);
}

.thumb-badge.is-featured .thumb-icon{
  background: rgba(245,197,24,0.12);   /* soft gold glow */
}

.thumb-badge.is-featured:hover{
  box-shadow:
    0 0 0 1px var(--gold-ring) inset,
    0 0 22px rgba(245,197,24,0.18);
}

.project-desc{ margin: 0 0 12px; color: var(--muted); line-height: 1.65; font-weight: 600; }
.tags{ display:flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.tag{
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent; /* ✅ hidden */
  background: rgba(127,127,127,0.10);
}
.tag:hover{
  border-color: var(--border);
  box-shadow: var(--glow), var(--hover-ring);
  transform: translateY(-1px);
}

/* -------------------------
   TIMELINE (Experience & Awards)
------------------------- */
.timeline{
  position: relative;
  padding-left: 18px;
  margin-top: 10px;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(88,166,255,0.55), rgba(88,166,255,0.10));
  border-radius: 999px;
  opacity: 0.9;
}

.timeline-item{
  position: relative;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.timeline-item:hover{ border-color: var(--border); }

.timeline-item::before{
  content:"";
  position:absolute;
  left: -18px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: var(--shadow);
}

.t-title{ 
  margin: 0 0 6px; 
  font-weight: 900;
  font-size: clamp(17px, 1.25vw, 19px); 
  letter-spacing: -0.2px;
}
.t-meta{ margin: 0; color: var(--muted); font-weight: 650; line-height: 1.65; }
.t-date{ color: var(--muted2); font-weight: 900; white-space: nowrap; padding-left: 12px; }

    /* =========================
   EDUCATION = SAME TIMELINE STYLE
   (uses .timeline + .timeline-item)
   ========================= */
#education .timeline{
  margin-top: 14px;      /* space under Education title */
  padding-left: 18px;    /* same as awards */
}

#education .timeline::before{
  top: 10px;             /* start line a bit lower (fix "broken" look) */
  bottom: 10px;
}

#education .timeline-item::before{
  top: 20px;             /* dot aligned nicely with logo/text */
}


    

/* -------------------------
   CERTIFICATES
------------------------- */
.cert-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .cert-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cert-grid{ grid-template-columns: 1fr; }
}
.cert{
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
  padding: 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.cert:hover{
  border-color: var(--border);
  box-shadow: var(--hover-shadow), var(--hover-ring);
  transform: translateY(-6px);
}

.cert-top{ display:flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cert-name{ font-weight: 900; line-height: 1.3; }
.cert-date{ color: var(--muted2); font-weight: 900; white-space: nowrap; }
.cert-by{ color: var(--muted); margin: 0; line-height: 1.5; }
.issuer-row{ display:flex; align-items:center; gap: 10px; margin-top: 4px; }

/* -------------------------
   TIME WIDGET (Compact Row Layout)
------------------------- */
.meta-wrap{
  display: flex;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: 4px;
  width: 100%;
}

/* Card */
.time-card.time-compact{
  border-radius: 18px;
  border: 1px solid transparent;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 8px 10px;        /* tighter */
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;                 /* less vertical spacing */
}

.time-card.time-compact:hover{
  border-color: var(--border);
}

/* Row 1: centered label */
.time-top{
  display: flex;
  justify-content: center;
}

.time-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  color: var(--text);
  text-align: center;
}

/* Row 2: time left, weather right */
.time-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;               /* tighter horizontal spacing */
}

/* Clock */
.time-value{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Weather inline */
.weather-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Animated wave */
.wave{
  font-size: 20px;          /* slightly smaller for compact look */
  line-height: 1;
  transform-origin: 70% 70%;
  animation: waveHand 1.35s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(88,166,255,0.18));
}

@keyframes waveHand{
  0%,100% { transform: rotate(0deg); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce){
  .wave{ animation: none !important; }
}

/* Weather text */
.weather-text{
  font-size: 16px;
  font-weight: 850;
  color: var(--text);
  opacity: .92;
}
/* Toggle container (no gray background) */
.unit-toggle{
  display: flex;
  gap: 4px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
}

/* Unit buttons */
.unit-btn{
  border: 0;
  cursor: pointer;
  padding: 4px 8px;        /* smaller */
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 14px;         /* smaller */
  font-weight: 900;
  opacity: .7;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.unit-btn:active{
  transform: scale(0.95);
}

.unit-btn.active{
  background: rgba(88,166,255,0.14);  /* subtle blue highlight */
  opacity: 1;
}

/* Mobile: stack */
@media (max-width: 520px){
  .time-bottom{
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

/* -------------------------
   VERIFICATION
------------------------- */
.verify{ margin-top: 18px; padding-top: 18px; border-top: 0 !important; }
.verify h3{ margin: 0 0 8px; font-size: 22px; }
.verify p{ margin: 0 0 14px; color: var(--muted); font-weight: 650; }
.verify-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .verify-grid{ grid-template-columns: 1fr; } }

.verify-card{
  background: var(--panel);
  border: 1px solid transparent; /* ✅ hidden */
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 6px;
  min-height: 92px;
}
.verify-card:hover{ border-color: var(--border); }

.verify-num{ font-size: 34px; font-weight: 950; letter-spacing: -0.6px; line-height: 1; }
.verify-label{ color: var(--muted); font-weight: 900; }
.verify-card small{ color: var(--muted2); font-weight: 800; }

/* -------------------------
   SOCIAL ICON BUTTONS
------------------------- */
.icon-row{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 8px; }

.icon-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid transparent; /* ✅ hidden */
  background: var(--panel);
  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow: hidden;                 /* ✅ fixes jagged edges */
  background-clip: padding-box;     /* ✅ cleaner border-radius */
  isolation: isolate;               /* ✅ prevents blending artifacts */
  clip-path: circle(50% at 50% 50%);
}

.icon-btn i{
  font-size: 24px;          /* ✅ bigger logo */
  color: var(--text);
  line-height: 1;
  transition: transform 260ms var(--ease);
}

.icon-btn:hover{
  border-color: var(--border);
  transform: translateY(-6px);
  box-shadow: var(--glow), var(--hover-ring);
}
.icon-btn:hover i{ transform: scale(1.10); }

/* Brand style */
.icon-btn.brand{ background: var(--brand, rgba(127,127,127,0.10)); box-shadow: var(--shadow); }
.icon-btn.brand i{ color: #fff !important; }

.icon-btn.github   { --brand:#181717; }
.icon-btn.linkedin { --brand:#0A66C2; }
.icon-btn.email    { --brand:#6c7bff; }
.icon-btn.x        { --brand:#000000; }
.icon-btn.facebook { --brand:#1877F2; }
.icon-btn.instagram{
  background: radial-gradient(circle at 30% 30%,
    #feda75 0%,
    #fa7e1e 25%,
    #d62976 55%,
    #962fbf 75%,
    #4f5bd5 100%
  ) !important;
}

/* -------------------------
   BACK TO TOP
------------------------- */
.to-top{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent2);
  color: white;
  font-weight: 900;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: 200ms ease;
  box-shadow: var(--shadow)   ;
  z-index: 70;
  display: grid; 
  place-items: center;
}

.to-top i{
  font-size: 19px;      /* ✅ bigger arrow */
  line-height: 1;
}

.to-top.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover{ filter: brightness(1.05); }

/* -------------------------
   REVEAL
------------------------- */
.reveal{ opacity:0; transform: translateY(12px); }
.reveal.show{ will-change: opacity, transform; animation: revealIn 520ms var(--theme-ease) forwards; }

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

  /* -------------------------
   THEME FADE OVERLAY (prevents white flash + sync feel)
------------------------- */
#themeFade{
  position: fixed;
  inset: 0;
  z-index: 9998;            /* below introOverlay (9999), above page */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--theme-dur) var(--theme-ease);
  will-change: opacity;
}

#themeFade.show{
  opacity: 1;
}

/* -------------------------
   INTRO OVERLAY — LOGO DRAW + SIGNATURE DRAW
------------------------- */

#introOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg) !important;
  -webkit-transform: translateZ(0);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms var(--theme-ease), visibility 0ms linear 520ms;
}

#introOverlay.intro-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

.intro-stage{
  width: min(980px, calc(100% - 36px));
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

/* Logo */
.intro-mark{
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
}

.mark-svg{
  width: 200px;
  height: 200px;
  overflow: visible;
}

/* Signature */
.intro-sign{
  width: min(860px, 92vw);
  margin-top: 2px;
}

.sig-svg{
  width: 100%;
  height: auto;
}

.sig-path{
  fill: none;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--siglen, 2000);
  stroke-dashoffset: var(--siglen, 2000);
}

/* ===== Premium MS draw (gradient + glow) ===== */
.ms-svg{
  width: 170px;
  height: 170px;
  display: block;
  overflow: visible;

  /* ✅ Optical centering: move slightly LEFT */
  transform: translateX(-10px);
}

.ms-stroke{
  fill: none;
  stroke: url(#msGrad);
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--mslen, 1200);
  stroke-dashoffset: var(--mslen, 1200);
}

.ms-stroke.ms-glow{
  fill: none;
  stroke: url(#msGrad);
  stroke-width: 12;
  opacity: 0.14;
  filter: url(#msGlow);
}

/* ✅ MS = stroke-only (no fill) */
.ms-fill{ display:none !important; }

/* keep the draw animation */
#introOverlay.play .ms-stroke{
  animation: msDraw 950ms var(--theme-ease) forwards;
}
@keyframes msDraw{ to{ stroke-dashoffset: 0; } }

/* keep signature animations (unchanged) */
#introOverlay.play .sig-text{
  animation: sigIn 420ms var(--theme-ease) forwards;
  animation-delay: 860ms;
}

#introOverlay.play .sig-path{
  animation: sigDraw 1200ms var(--theme-ease) forwards;
  animation-delay: 520ms;
}

@keyframes sigDraw{ to{ stroke-dashoffset: 0; } }
@keyframes sigIn{ to{ opacity: 1; } }

   
    
/* ===== Ink Write + Neon Pulse (signature line) ===== */

/* Base ink stroke */
.sig-ink{
  stroke: var(--accent);
  stroke-width: 7;
  opacity: 0.92;
  filter: none;
}

/* Soft neon glow layer */
.sig-glow{
  stroke: var(--accent);
  stroke-width: 14;
  opacity: 0.18;
  filter: blur(1.2px);
}

.sig-pulse{
  fill: var(--accent);
  opacity: 0;
  transform: translateY(34px);
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.55))
          drop-shadow(0 0 22px rgba(88,166,255,0.35));
}

.sig-text{
  font-family: "Pacifico", cursive;
  font-size: 72px;
  fill: var(--text);     /* ✅ works in dark + light */
  opacity: 0;
}

/* Actions */
.intro-actions{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce){
  .hex, .sig-path{ stroke-dashoffset: 0 !important; }
  .mark-initials, .sig-text{ opacity: 1 !important; }
  #introOverlay.play .hex-outer,
  #introOverlay.play .hex-inner,
  #introOverlay.play .mark-initials,
  #introOverlay.play .sig-path,
  #introOverlay.play .sig-text{ animation: none !important; }
}

/* -------------------------
   THEME TOGGLE ICON
------------------------- */
#themeToggle{
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}
#themeToggle:active{ transform: scale(0.97); }

#themeToggle .ticon{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 220ms var(--theme-ease), transform 320ms var(--theme-ease);
  will-change: opacity, transform;
}
#themeToggle .moon{ opacity: 1; transform: rotate(0) scale(1); }
#themeToggle .sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
#themeToggle.is-light .moon{ opacity: 0; transform: rotate(90deg) scale(0.6); }
#themeToggle.is-light .sun { opacity: 1; transform: rotate(0) scale(1); }

    /* =========================
   VERIFICATION BADGE (Hero name)
   ========================= */
.name-wrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ===== Verification badge: remove gray outer circle, keep hover animation ===== */
.v-badge{
  position: relative;              /* needed for ::after shine */
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;

  background: transparent;         /* ✅ no gray circle */
  border: 1px solid transparent;   /* keep clean hit area */
  box-shadow: none;                /* ✅ remove gray shadow */

  transform: translateY(2px);
  transition:
    transform var(--hover-dur) var(--hover-ease),
    box-shadow var(--hover-dur) var(--hover-ease),
    filter var(--hover-dur) var(--hover-ease);
}

/* keep your hover animation (but without gray background) */
.v-badge:hover{
  box-shadow: 0 0 0 6px rgba(88,166,255,0.12), var(--glow);
  transform: translateY(0) scale(1.06) rotate(-6deg);
  filter: brightness(1.05);
}


/* Icon inside */
.v-icon{
  width: 20px;
  height: 20px;
  display: block;
}

/* SVG colors (matches your theme accent) */
.v-icon .v-circle{
  fill: #1877F2; /* Facebook Blue */
}

.v-icon .v-check{ fill: #fff; }

/* Fancy “shine” */
.v-badge::after{
  content:"";
  position:absolute;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 180deg, transparent 0 70%, rgba(255,255,255,0.45), transparent 100%);
  transition: opacity 220ms ease;
}

.v-badge:hover::after{
  opacity: 0.9;
  animation: vSpin 900ms linear infinite;
}

@keyframes vSpin{
  to{ transform: rotate(360deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .v-badge, .v-badge::after{ animation: none !important; transition: none !important; }
}


/* -------------------------
   HERO ACTIONS
------------------------- */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 520px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }
}

/* ✅ Mobile fix: prevent title/date collision in timeline items */
@media (max-width: 520px){
  .timeline-item{
    grid-template-columns: 1fr;   /* stack instead of 2 columns */
    gap: 10px;
  }

  .t-date{
    padding-left: 0;
    justify-self: start;
    margin-top: 2px;
    font-size: 13px;
  }

  /* make long titles wrap safely */
  .t-title{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* also wrap meta text nicely */
  .t-meta{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

.intro-welcome{
  font-weight: 950;
  letter-spacing: 0.6px;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--text);
  opacity: 0.92;
}

/* ===== Fix vertical alignment: subtitle + location rows ===== */

/* 2) Location row (pin icon + text) */
.locline{
  align-items: center;
}
/* ===== Navbar MS Logo Hover Effect ===== */

.brand{
  transition: transform 220ms var(--hover-ease),
              filter 220ms var(--hover-ease);
}

/* Text (MS letters) */
.brand-initials{
  position: relative;
  transition: transform 220ms var(--hover-ease),
              text-shadow 220ms var(--hover-ease),
              filter 220ms var(--hover-ease);
}

/* Hover animation */
.brand:hover{
  transform: translateY(-1px);
}

.brand:hover .brand-initials{
  transform: scale(1.08) rotate(-2deg);
  filter: brightness(1.1);
  text-shadow:
    0 0 8px rgba(88,166,255,0.35),
    0 0 16px rgba(88,166,255,0.18);
}

/* Click feedback */
.brand:active{
  transform: scale(0.96);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .brand,
  .brand-initials{
    transition: none !important;
    transform: none !important;
  }
}

/* ===== Google Maps clickable location (icon + text) ===== */

.map-link{
  display: inline-flex;      /* icon + text aligned */
  align-items: center;
  gap: 12px;

  text-decoration: none;
  cursor: pointer;
}

/* Make icon clickable */
.map-link i{
  pointer-events: auto;
  cursor: pointer;
}

/* Hover visual feedback */
.map-link:hover span{
  color: var(--accent);
}

/* Click feedback */
.map-link:active{
  transform: scale(0.98);
}

/* Keyboard accessibility */
.map-link:focus-visible{
  outline: 2px solid rgba(88,166,255,0.5);
  outline-offset: 4px;
  border-radius: 10px;
}

.section-divider{
  height: 0;
  margin: 48px 0;   /* adjust spacing here */
  background: none;
  border: none;
}

/* =========================
   Academic highlights (align + only GRE animated)
   ========================= */

/* Align left exactly like subtitle/location */
.acadline{
  margin: 6px 0 10px;
  margin-left: 0px;  
  display: grid;
  gap: 12px;           
  font-size: 16px;   
  line-height: 1;
}

.acad-row{
  display: inline-flex;
  align-items: center;
  gap: 0px;            
}

/* Icons same scale as PC/location (slightly smaller) */
.acad-row i{
  font-size: 18px;      
  width: 28px;              
  height: 28px;
  margin-left: 0px;  
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--accent);
  transform: translateY(1px);

  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
}

/* SAME hover feeling like location/pc */
.acad-row:hover i{
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 12px rgba(88,166,255,0.35));
}

/* Make the 2nd icon (document) do a tiny tilt (nice) */
.acad-row:nth-child(2):hover i{
  transform: translateY(-1px) scale(1.08) rotate(-6deg);
}

/* Base pill = subtle (like your theme, not darker) */
.acad-sign{
  position: relative;
  display: inline-block;
  margin-left: -4px;  /* pull GRE closer to icon */
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(88,166,255,0.08);         /* ✅ lighter like your chips */
  border: 1px solid rgba(88,166,255,0.18);    /* ✅ same tone */
  box-shadow: none;
}

/* Text tone */
.acad-sign .muted{
  opacity: .75;
  font-weight: 700;
}

/* ✅ ONLY GRE gets the animation */
.acad-sign.is-anim{
  overflow: hidden;
}

/* animated sweep highlight (ONLY GRE) */
.acad-sign.is-anim::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 60%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(67,229,255,0) 0%,
    rgba(67,229,255,.22) 40%,
    rgba(88,166,255,.30) 60%,
    rgba(27,76,255,0) 100%
  );
  filter: blur(1px);
  opacity: .9;
  animation: acadSweep 3.2s ease-in-out infinite;
}

/* animated underline glow (ONLY GRE) */
.acad-sign.is-anim::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(67,229,255,0),
    rgba(67,229,255,.9),
    rgba(88,166,255,.9),
    rgba(27,76,255,0)
  );
  opacity: .65;
  animation: acadLine 2.6s ease-in-out infinite;
}

@keyframes acadSweep{
  0%   { transform: translateX(-120%) rotate(18deg); opacity: .0; }
  15%  { opacity: .95; }
  50%  { opacity: .85; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}

@keyframes acadLine{
  0%,100% { transform: scaleX(.35); opacity: .35; }
  50%     { transform: scaleX(1);   opacity: .75; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .acad-sign.is-anim::before,
  .acad-sign.is-anim::after{
    animation: none !important;
  }
}

/* MOI = plain text (no pill, no border, no bg) */
.acad-sign.is-plain{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.acad-sign.is-plain::before,
.acad-sign.is-plain::after{
  content: none !important;   
}

/* Put location + MOI on one line */
.locwrap{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;          
  margin: 0 0 14px;
  margin-left: 8px;              
}

/* Make locline behave nicely inside locwrap */
.locwrap .locline{
  margin: 0;                       /* override old margin */
  margin-left: 0;                  /* handled by locwrap */
}

/* MOI next to location (same visual language) */
.moi-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1;
}

/* MOI icon = same as location icon */
.moi-inline i{
  font-size: 16px;                 /* slightly smaller like you want */
  color: var(--accent);
  transform: translateY(1px);
  transition: transform var(--hover-dur) var(--hover-ease),
              filter var(--hover-dur) var(--hover-ease);
}

/* Hover like your location/pc */
.moi-inline:hover i{
  transform: translateY(-1px) scale(1.08) rotate(-6deg);
  filter: drop-shadow(0 0 12px rgba(88,166,255,0.35));
}

/* keep muted part consistent */
.moi-inline .muted{
  opacity: .75;
  font-weight: 700;
}

/* Subtitle + location alignment cleanup (no manual top offsets) */
.subtitle-row,
.locline,
.moi-inline{
  align-items: center;
}

.moi-inline span{
  margin-left: 6px;   /* more breathing from icon */
}

/* =========================
   COMPACT CARD MODE
   ========================= */
.card.card-compact{
  padding: 18px;     /* default card is 26px */
}

.card.card-compact .section-sub{ margin-bottom: 10px; }
.card.card-compact .lead{ margin-bottom: 10px; }

/* timelines inside compact cards */
.card.card-compact .timeline{
  margin-top: 6px;
}

.card.card-compact .timeline-item{
  margin: 0 0 10px;
  padding: 12px 14px;
}

.card.card-compact .timeline-item:last-child{
  margin-bottom: 0;
}

.sicon.qa{
  background: linear-gradient(135deg,#00c6ff,#0072ff);
  color:white;
}

.cert-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cert-name a:hover {
  color: #3b82f6; /* nice modern blue */
}

.cert-name a:hover {
  color: #3b82f6;
  text-decoration: underline;
}

.sicon.cypress {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
}

.sicon.jira {
  background: linear-gradient(135deg, #0052CC, #2684FF);
}

.sicon.agile {
  background: linear-gradient(135deg, #FF9800, #F57C00);
}

.sicon.scrum {
  background: linear-gradient(135deg, #7B1FA2, #BA68C8);
}