:root {
    --bg:        #020508;
    --bg2:       #050b12;
    --surface:   #07111c;
    --surface2:  #0a1825;
    --border:    #0e2236;
    --border2:   #162f46;
    --cyan:      #00c8ff;
    --cyan-dim:  rgba(0,200,255,0.12);
    --cyan-glow: rgba(0,200,255,0.35);
    --cyan2:     #00fff7;
    --orange:    #ff6b00;
    --orange-dim:rgba(255,107,0,0.12);
    --text:      #ccdff0;
    --text2:     #8aaec8;
    --muted:     #3d5f78;
    --green:     #28c840;
    --lc-easy:   #00b8a3;
    --lc-med:    #ffc01e;
    --lc-hard:   #ff375f;
    --mono: 'Share Tech Mono', monospace;
    --display: 'Bebas Neue', sans-serif;
    --body: 'Rajdhani', sans-serif;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
  }
  /* ═══ NAV DISCORD HOVER STATUS ═══ */
.nav-ds-wrap {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: clamp(8px,.6vw,11px);
  letter-spacing: .1em; cursor: default;
  padding: 4px 0;
  user-select: none;
  /* Extend hover area downward to bridge the gap to the tooltip */
  padding-bottom: 12px;
  margin-bottom: -8px;
}
.nav-ds-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #80848e; box-shadow: none; flex-shrink: 0;
  transition: background .4s, box-shadow .4s;
}
.nav-ds-label {
  color: #80848e;
  transition: color .3s;
}

/* Tooltip */
.nav-ds-tooltip {
  position: absolute; top: 100%; right: 0;
  width: clamp(260px, 24vw, 320px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 2px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 500;
  overflow: hidden;
}
.nav-ds-tooltip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #5865F2, #EB459E, #FEE75C);
  z-index: 1;
}
/* Show on hover of wrapper — padding-bottom bridges the gap */
.nav-ds-wrap:hover .nav-ds-tooltip {
  opacity: 1; pointer-events: all; transform: translateY(0);
}

/* Tooltip header: avatar banner area */
.ndt-header {
  position: relative;
  background: linear-gradient(135deg, #23272a 0%, #5865F230 100%);
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-end; gap: 12px;
}
/* Clickable avatar */
.ndt-avatar-link {
  flex-shrink: 0; display: block; border-radius: 50%;
  text-decoration: none; position: relative;
  transition: transform .2s, box-shadow .2s;
}
.ndt-avatar-link:hover { transform: scale(1.06); box-shadow: 0 0 14px rgba(88,101,242,.55); }
.ndt-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface2); border: 3px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; color: #5865F2;
  overflow: hidden; transition: border-color .25s;
}
.ndt-avatar-link:hover .ndt-avatar { border-color: #5865F2; }
.ndt-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ndt-info { flex: 1; min-width: 0; }
/* Clickable name */
.ndt-name-link { text-decoration: none; display: block; }
.ndt-name {
  font-family: var(--display); font-size: clamp(15px,1.5vw,20px);
  color: #fff; letter-spacing: .04em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.ndt-name-link:hover .ndt-name { color: #5865F2; }
.ndt-username {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .08em; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ndt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; padding: 3px 8px;
  border: 1px solid var(--border2); border-radius: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  color: var(--muted); transition: all .4s;
}
.ndt-badge.b-online  { color: #23a55a; border-color: rgba(35,165,90,.35);  background: rgba(35,165,90,.07);  }
.ndt-badge.b-idle    { color: #f0b232; border-color: rgba(240,178,50,.35); background: rgba(240,178,50,.07); }
.ndt-badge.b-dnd     { color: #f23f43; border-color: rgba(242,63,67,.35);  background: rgba(242,63,67,.07);  }
.ndt-badge.b-offline { color: var(--muted); border-color: var(--border2); }

/* Custom status message */
.ndt-custom-status {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  display: none;
}
.ndt-custom-status.has-content { display: block; }
.ndt-custom-text {
  font-family: var(--mono); font-size: 11px; color: var(--text2);
  letter-spacing: .04em; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Activities list */
.ndt-activities { padding: 10px 16px 14px; }
.ndt-sec-label {
  font-family: var(--mono); font-size: 9px; color: var(--muted);
  letter-spacing: .18em; text-transform: uppercase;
  display: block; margin-bottom: 8px;
}
.ndt-act-item {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px;
}
.ndt-act-item:last-child { margin-bottom: 0; }
.ndt-act-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ndt-act-body { flex: 1; min-width: 0; }
.ndt-act-name {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ndt-act-detail {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: .03em; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ndt-no-activity {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .05em; font-style: italic;
}

/* ═══ DISCORD STATUS CARD ═══ */
.discord-card {
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: border-color .3s, background .3s;
}
.discord-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #5865F2, #EB459E, #FEE75C, var(--cyan));
  z-index: 2;
}
.discord-card:hover { background: var(--surface2); border-color: var(--border2); }
.discord-card-inner { padding: clamp(20px,2vw,32px); }

.discord-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(18px,1.8vw,28px);
  padding-bottom: clamp(12px,1.2vw,18px);
  border-bottom: 1px solid var(--border);
}
.discord-header svg { width: 18px; height: 18px; flex-shrink: 0; }
.discord-header-label {
  font-family: var(--mono); font-size: clamp(9px,.65vw,12px);
  color: var(--muted); letter-spacing: .18em; text-transform: uppercase;
  flex: 1;
}
.discord-live-badge {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: clamp(8px,.6vw,11px);
  color: var(--green); letter-spacing: .1em;
}
.discord-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: blip 2s ease infinite;
}

.discord-profile-row {
  display: flex; align-items: center;
  gap: clamp(12px,1.2vw,20px);
  margin-bottom: clamp(16px,1.6vw,24px);
}

.discord-avatar-wrap { position: relative; flex-shrink: 0; }

.discord-avatar {
  width: clamp(52px,5vw,72px); height: clamp(52px,5vw,72px);
  border-radius: 50%; overflow: hidden;
  background: var(--surface2);
  border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: clamp(18px,2vw,28px);
  color: #5865F2; position: relative;
  transition: border-color .3s;
}
.discord-avatar img { width: 100%; height: 100%; object-fit: cover; }
.discord-card:hover .discord-avatar { border-color: rgba(88,101,242,.5); }

.discord-status-dot {
  width: clamp(12px,1.2vw,16px); height: clamp(12px,1.2vw,16px);
  border-radius: 50%; position: absolute; bottom: 1px; right: 1px;
  border: 2px solid var(--surface); transition: background .4s;
}
.ds-online { background: #23a55a; box-shadow: 0 0 6px rgba(35,165,90,.5); }
.ds-idle    { background: #f0b232; box-shadow: 0 0 6px rgba(240,178,50,.5); }
.ds-dnd     { background: #f23f43; box-shadow: 0 0 6px rgba(242,63,67,.5); }
.ds-offline { background: #80848e; }
.ds-loading { background: var(--border2); animation: blip 1s infinite; }

.discord-user-info { flex: 1; min-width: 0; }
.discord-username {
  font-family: var(--display); font-size: clamp(18px,1.8vw,28px);
  color: #fff; letter-spacing: .04em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.discord-handle {
  font-family: var(--mono); font-size: clamp(9px,.68vw,12px);
  color: var(--muted); letter-spacing: .1em; margin-top: 4px;
}

.discord-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: clamp(6px,.6vw,10px);
  padding: 4px 10px;
  border: 1px solid; border-radius: 2px;
  font-family: var(--mono); font-size: clamp(8px,.6vw,11px);
  letter-spacing: .1em; text-transform: uppercase;
  transition: all .4s;
}
.dsb-online  { color: #23a55a; border-color: rgba(35,165,90,.3);  background: rgba(35,165,90,.06);  }
.dsb-idle    { color: #f0b232; border-color: rgba(240,178,50,.3); background: rgba(240,178,50,.06); }
.dsb-dnd     { color: #f23f43; border-color: rgba(242,63,67,.3);  background: rgba(242,63,67,.06);  }
.dsb-offline { color: var(--muted); border-color: var(--border2); background: transparent; }
.dsb-loading { color: var(--muted); border-color: var(--border2); background: transparent; }

.discord-section-label {
  font-family: var(--mono); font-size: clamp(8px,.62vw,11px);
  color: var(--muted); letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: clamp(8px,.8vw,12px);
}

.discord-activity {
  background: var(--surface2); border: 1px solid var(--border2);
  padding: clamp(10px,1vw,16px) clamp(12px,1.2vw,18px);
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; position: relative; overflow: hidden;
  margin-bottom: clamp(16px,1.6vw,24px);
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  transition: border-color .3s;
}
.discord-activity::before {
  content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: #5865F2; opacity: .6;
}
.da-icon { font-size: clamp(16px,1.6vw,22px); flex-shrink: 0; }
.da-text { flex: 1; min-width: 0; }
.da-name {
  font-family: var(--display); font-size: clamp(14px,1.3vw,20px);
  color: #fff; letter-spacing: .04em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.da-detail {
  font-family: var(--mono); font-size: clamp(9px,.68vw,12px);
  color: var(--muted); margin-top: 3px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.discord-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: clamp(12px,1.2vw,18px);
  border-top: 1px solid var(--border);
}
.discord-refresh {
  flex: 1; padding: 8px 14px;
  border: 1px solid var(--border2);
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: clamp(9px,.68vw,12px);
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .25s;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.discord-refresh:hover { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-dim); }
.discord-refresh:active { transform: scale(0.98); }
.discord-auto-timer {
  font-family: var(--mono); font-size: clamp(8px,.6vw,11px);
  color: var(--muted); letter-spacing: .08em; white-space: nowrap;
}
.discord-error {
  font-family: var(--mono); font-size: clamp(9px,.68vw,12px);
  color: var(--lc-hard); margin-top: 10px; display: none; letter-spacing: .05em;
  padding: 8px 12px; border: 1px solid rgba(255,55,95,.2);
  background: rgba(255,55,95,.05);
}
.discord-loading-pulse {
  display: inline-block; font-family: var(--mono);
  color: var(--muted); font-size: clamp(12px,1vw,14px);
  animation: pulse 1.5s ease infinite;
}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: clamp(14px, 1vw, 20px); }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    min-height: 100vh;
    overflow-x: hidden;
    cursor: crosshair;
  }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0,200,255,0.04) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 20% 80%, rgba(255,107,0,0.03) 0%, transparent 50%),
      linear-gradient(rgba(0,200,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,200,255,0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px;
    pointer-events: none; z-index: 0;
  }

  body::after {
    content: ''; position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,200,255,0.012) 3px, rgba(0,200,255,0.012) 4px);
    pointer-events: none; z-index: 9999;
  }

  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

  /* ═══ NAV ═══ */
  nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: clamp(48px, 4vw, 70px);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px, 2.5vw, 52px);
    background: rgba(2,5,8,0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px) saturate(1.5);
    z-index: 100; font-family: var(--mono);
  }
  nav::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--orange), transparent);
    opacity: 0.3;
  }
  .nav-dots { display: flex; gap: clamp(5px, 0.5vw, 8px); align-items: center; }
  .dot { width: clamp(9px,.7vw,13px); height: clamp(9px,.7vw,13px); border-radius: 50%; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
  .dot:hover { transform: scale(1.3); }
  .dot-r { background: #ff5f57; } .dot-r:hover { box-shadow: 0 0 8px #ff5f57; }
  .dot-y { background: #febc2e; } .dot-y:hover { box-shadow: 0 0 8px #febc2e; }
  .dot-g { background: #28c840; } .dot-g:hover { box-shadow: 0 0 8px #28c840; }
  .nav-center { display: flex; align-items: center; gap: clamp(6px,1.5vw,28px); }
  .nav-logo { font-family: var(--display); font-size: clamp(14px,1.2vw,22px); letter-spacing: .1em; color: rgba(255,255,255,0.15); user-select: none; padding-right: clamp(8px,1.2vw,20px); border-right: 1px solid var(--border); margin-right: clamp(4px,.8vw,14px); }
  .nav-links { display: flex; gap: clamp(14px,1.6vw,32px); }
  .nav-links a { color: var(--muted); text-decoration: none; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(9px,.65vw,13px); transition: color .25s; padding: 4px 0; position: relative; }
  .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--cyan); transition: width .3s var(--ease); }
  .nav-links a:hover, .nav-links a.active { color: var(--text); }
  .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
  .nav-links a.nav-contact { color: var(--cyan); border: 1px solid rgba(0,200,255,0.25); padding: 3px 10px; border-radius: 1px; transition: all .25s; }
  .nav-links a.nav-contact::after { display: none; }
  .nav-links a.nav-contact:hover { background: var(--cyan-dim); border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }
  .nav-right { display: flex; align-items: center; gap: 16px; }
  .nav-date { color: var(--muted); letter-spacing: .08em; font-size: clamp(9px,.65vw,12px); }
  .nav-status { display: flex; align-items: center; gap: 6px; font-size: clamp(8px,.6vw,11px); color: #28c840; letter-spacing: .1em; }
  .nav-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #28c840; box-shadow: 0 0 6px #28c840; animation: blip 2s ease infinite; }
  @keyframes blip { 0%,100%{opacity:1} 50%{opacity:.3} }

  .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; z-index: 201; }
  .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--muted); transition: all .3s var(--ease); }
  .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
  .nav-drawer { display: none; position: fixed; top: clamp(48px,4vw,70px); left: 0; right: 0; background: rgba(2,5,8,0.98); border-bottom: 1px solid var(--border); backdrop-filter: blur(20px); flex-direction: column; padding: 16px 20px 24px; gap: 4px; z-index: 199; transform: translateY(-10px); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
  .nav-drawer.open { transform: translateY(0); opacity: 1; }
  .nav-drawer a { color: var(--muted); text-decoration: none; letter-spacing: .12em; text-transform: uppercase; font-family: var(--mono); font-size: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; transition: color .2s; }
  .nav-drawer a:last-child { border-bottom: none; }
  .nav-drawer a:hover, .nav-drawer a.active { color: var(--cyan); }
  .nav-drawer a.nav-contact { color: var(--cyan); }

  /* ═══ HERO ═══ */
  .hero {
    min-height: 100vh; display: grid;
    grid-template-columns: clamp(44px,4vw,80px) 1fr 1fr;
    position: relative; z-index: 1;
    padding-top: clamp(48px,4vw,70px);
  }
  .side-name { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: var(--display); font-size: clamp(36px,5vw,82px); letter-spacing: .06em; color: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); user-select: none; position: relative; overflow: hidden; }
  .side-name::after { content: ''; position: absolute; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, transparent, rgba(0,200,255,0.06), transparent); animation: sideScan 6s ease-in-out infinite; }
  @keyframes sideScan { 0% { top: -60px; } 100% { top: 100%; } }
  .hero-left { padding: clamp(36px,5vw,80px) clamp(24px,3.5vw,60px); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px,1.6vw,28px); border-right: 1px solid var(--border); position: relative; }
  .hero-left::before { content: ''; position: absolute; top: clamp(36px,5vw,80px); left: 0; width: 3px; height: clamp(60px,8vw,120px); background: linear-gradient(180deg, var(--cyan), transparent); }
  .hero-tag { font-family: var(--mono); font-size: clamp(9px,.72vw,14px); color: var(--cyan); letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; opacity: .9; }
  .hero-tag::before { content: ''; width: clamp(16px,2vw,30px); height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
  .hero-tag .tag-bracket { color: var(--muted); opacity: .6; }
  .hero-h1 { font-family: var(--display); font-size: clamp(44px,5.8vw,100px); line-height: .95; letter-spacing: .01em; color: #fff; }
  .hero-h1 .accent { color: transparent; -webkit-text-stroke: 1.5px var(--cyan); display: block; filter: drop-shadow(0 0 20px var(--cyan-glow)); }
  .hero-sub { font-family: var(--display); font-size: clamp(16px,2.2vw,38px); letter-spacing: .1em; background: linear-gradient(90deg, var(--orange), #ffaa44); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .hero-divider { display: flex; align-items: center; gap: 12px; opacity: .4; }
  .hero-divider span { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: .15em; }
  .hero-divider::before, .hero-divider::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
  .hero-quote { font-size: clamp(13px,1.05vw,18px); color: var(--text2); padding-left: clamp(12px,1.2vw,20px); border-left: 2px solid var(--cyan); line-height: 1.75; font-weight: 500; font-style: italic; }
  .hero-code { font-family: var(--mono); font-size: clamp(10px,.82vw,15px); color: rgba(0,200,255,.45); display: flex; align-items: center; gap: 8px; }
  .hero-code::before { content: '$'; color: var(--orange); opacity: .7; }
  .cursor-blink { display: inline-block; width: 8px; height: 1.1em; background: var(--cyan); opacity: .7; animation: cursorBlink 1.1s step-end infinite; vertical-align: middle; margin-left: 2px; }
  @keyframes cursorBlink { 0%,100%{opacity:.7} 50%{opacity:0} }
  .hero-bio { font-size: clamp(12px,.95vw,17px); color: var(--text2); line-height: 1.85; font-weight: 500; }
  .btn-group { display: flex; gap: clamp(10px,1vw,18px); flex-wrap: wrap; margin-top: 4px; }
  .btn-primary { font-family: var(--mono); font-size: clamp(10px,.75vw,14px); letter-spacing: .14em; text-transform: uppercase; padding: clamp(10px,.9vw,16px) clamp(22px,2.2vw,40px); background: var(--cyan); color: #020508; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: all .25s var(--ease); }
  .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%); transform: translateX(-100%); transition: transform .5s var(--ease); }
  .btn-primary:hover { background: var(--cyan2); box-shadow: 0 0 30px var(--cyan-glow), 0 0 60px rgba(0,200,255,.15); transform: translateY(-2px); }
  .btn-primary:hover::before { transform: translateX(100%); }
  .btn-secondary { font-family: var(--mono); font-size: clamp(9px,.72vw,13px); letter-spacing: .12em; text-transform: uppercase; padding: clamp(10px,.9vw,16px) clamp(18px,1.8vw,32px); color: var(--text2); background: transparent; border: 1px solid var(--border2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: all .25s var(--ease); }
  .btn-secondary::before { content: ''; position: absolute; inset: 0; background: var(--cyan-dim); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .btn-secondary:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0,200,255,.1); }
  .btn-secondary:hover::before { transform: scaleX(1); }
  .btn-secondary span { position: relative; z-index: 1; }
  .btn-icon-dl { display: inline-flex; flex-direction: column; gap: 1px; opacity: .6; transition: transform .3s var(--ease); }
  .btn-secondary:hover .btn-icon-dl { transform: translateY(2px); }
  .btn-icon-dl::before { content: '↓'; font-size: 1em; line-height: 1; }

  .hero-right { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse 60% 80% at 50% 60%, rgba(0,200,255,.04), transparent); }
  .hero-right::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0%, var(--cyan) 10%, transparent 20%, transparent 100%); animation: ringRotate 8s linear infinite; opacity: .05; }
  @keyframes ringRotate { to { transform: rotate(360deg); } }
  .hud-corner { position: absolute; width: clamp(24px,2.5vw,44px); height: clamp(24px,2.5vw,44px); border-color: var(--cyan); border-style: solid; opacity: .35; transition: opacity .3s; }
  .hero-right:hover .hud-corner { opacity: .6; }
  .hud-tl { top: clamp(16px,2vw,32px); left: clamp(16px,2vw,32px); border-width: 1.5px 0 0 1.5px; }
  .hud-tr { top: clamp(16px,2vw,32px); right: clamp(16px,2vw,32px); border-width: 1.5px 1.5px 0 0; }
  .hud-bl { bottom: clamp(16px,2vw,32px); left: clamp(16px,2vw,32px); border-width: 0 0 1.5px 1.5px; }
  .hud-br { bottom: clamp(16px,2vw,32px); right: clamp(16px,2vw,32px); border-width: 0 1.5px 1.5px 0; }
  .scan-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--cyan2) 50%, var(--cyan) 70%, transparent 100%); opacity: .3; animation: scanY 5s linear infinite; z-index: 2; }
  @keyframes scanY { 0% { top: 10%; opacity: 0; } 10% { opacity: .3; } 90% { opacity: .3; } 100% { top: 90%; opacity: 0; } }
  .avatar-frame { position: relative; width: clamp(260px,27vw,460px); max-width: 88%; z-index: 3; filter: drop-shadow(0 0 40px rgba(0,200,255,.2)); transition: filter .4s var(--ease); }
  .avatar-frame:hover { filter: drop-shadow(0 0 60px rgba(0,200,255,.35)); }
  .avatar-border { position: relative; padding: 2px; background: linear-gradient(135deg, var(--cyan) 0%, rgba(0,200,255,.2) 40%, var(--orange) 100%); clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px); }
  .avatar-inner { clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px); overflow: hidden; background: var(--bg); position: relative; }
  .avatar-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(2,5,8,.6) 100%); pointer-events: none; }
  .avatar-img { width: 100%; display: block; filter: saturate(1.05) brightness(1.0) contrast(1.02); transition: transform .5s var(--ease), filter .5s; }
  .avatar-frame:hover .avatar-img { transform: scale(1.04); filter: saturate(1.15) brightness(1.05); }
  .hud-data { position: absolute; font-family: var(--mono); font-size: clamp(8px,.65vw,12px); color: var(--cyan); opacity: .6; line-height: 1.8; letter-spacing: .06em; transition: opacity .3s; }
  .hero-right:hover .hud-data { opacity: .9; }
  .hud-tl-data { top: clamp(56px,6vw,90px); left: clamp(20px,2.5vw,40px); }
  .hud-br-data { bottom: clamp(56px,6vw,90px); right: clamp(20px,2.5vw,40px); text-align: right; }
  .hud-data .hud-row { display: flex; justify-content: space-between; gap: 16px; }
  .hud-data .hud-key { opacity: .5; }
  .hud-data .hud-val { color: var(--cyan2); }
  .avatar-glow { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: clamp(160px,20vw,300px); height: clamp(60px,8vw,120px); background: radial-gradient(ellipse, rgba(0,200,255,.25) 0%, transparent 70%); filter: blur(24px); z-index: 1; animation: glowPulse 4s ease-in-out infinite; }
  @keyframes glowPulse { 0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1)} 50%{opacity:1;transform:translateX(-50%) scaleX(1.15)} }

  /* ═══ MAIN ═══ */
  main { position: relative; z-index: 1; max-width: clamp(900px,80vw,1380px); margin: 0 auto; padding: clamp(56px,6vw,110px) clamp(20px,3vw,60px); }

  .section-wrap { margin-bottom: clamp(52px,6vw,100px); padding-left: clamp(12px,1.5vw,24px); border-left: 1px solid var(--border); position: relative; }
  .section-wrap::before { content: ''; position: absolute; top: 0; left: -1px; width: 1px; height: clamp(30px,4vw,60px); background: linear-gradient(180deg, var(--cyan), transparent); }
  .sec-head { display: flex; align-items: center; gap: clamp(12px,1.4vw,22px); margin-bottom: clamp(22px,2.5vw,44px); padding-bottom: clamp(10px,1.2vw,20px); border-bottom: 1px solid var(--border); position: relative; }
  .sec-head::after { content: ''; position: absolute; bottom: -1px; left: 0; height: 1px; width: clamp(40px,8vw,120px); background: var(--cyan); opacity: .5; }
  .sec-num { font-family: var(--mono); font-size: clamp(9px,.65vw,13px); color: var(--cyan); opacity: .5; letter-spacing: .1em; }
  .sec-title { font-family: var(--display); font-size: clamp(24px,2.4vw,46px); letter-spacing: .1em; color: #fff; }
  .sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border2), transparent); margin-left: 4px; }

  /* ═══ EXPERIENCE ═══ */
  .exp-grid { display: flex; flex-direction: column; }
  .exp-card { display: grid; grid-template-columns: clamp(140px,13vw,220px) 1fr; border: 1px solid var(--border); border-bottom: none; transition: background .3s, border-color .3s; position: relative; overflow: hidden; }
  .exp-card:last-child { border-bottom: 1px solid var(--border); }
  .exp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--cyan-dim), transparent); transition: width .4s var(--ease); }
  .exp-card:hover { border-color: var(--border2); background: var(--surface); }
  .exp-card:hover::before { width: 100%; }
  .exp-left { padding: clamp(16px,1.5vw,26px); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
  .exp-date-tag { font-family: var(--mono); font-size: clamp(7.5px,.62vw,11.5px); color: var(--cyan); letter-spacing: .1em; padding: 2px 7px; border: 1px solid rgba(0,200,255,.25); display: inline-block; width: fit-content; background: rgba(0,200,255,.04); }
  .exp-co { font-size: clamp(11px,.95vw,17px); font-weight: 700; color: var(--orange); letter-spacing: .04em; margin-top: 2px; }
  .exp-place { font-family: var(--mono); font-size: clamp(7.5px,.62vw,11.5px); color: var(--muted); margin-top: 2px; }
  .exp-right { padding: clamp(16px,1.5vw,26px) clamp(20px,2vw,38px); position: relative; z-index: 1; }
  .exp-title { font-family: var(--display); font-size: clamp(17px,1.65vw,30px); color: #fff; letter-spacing: .04em; margin-bottom: clamp(8px,.8vw,14px); }
  .exp-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
  .exp-list li { font-size: clamp(11.5px,.88vw,15.5px); color: var(--text2); padding-left: clamp(12px,1.2vw,18px); position: relative; line-height: 1.65; font-weight: 500; }
  .exp-list li::before { content: '▸'; position: absolute; left: 0; color: var(--cyan); font-size: 8px; top: 5px; opacity: .7; }

  /* ═══ SKILLS ═══ */
  .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(190px,17vw,300px), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
  .skill-box { background: var(--bg2); padding: clamp(16px,1.5vw,26px); position: relative; overflow: hidden; transition: background .3s; }
  .skill-box::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: linear-gradient(180deg, var(--cyan), var(--orange)); transition: height .4s var(--ease); }
  .skill-box::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, var(--cyan-dim), transparent); opacity: 0; transition: opacity .3s; }
  .skill-box:hover { background: var(--surface2); }
  .skill-box:hover::before { height: 100%; }
  .skill-box:hover::after { opacity: 1; }
  .skill-cat { font-family: var(--mono); font-size: clamp(8.5px,.63vw,12.5px); color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; margin-bottom: clamp(8px,.8vw,14px); position: relative; z-index: 1; }
  .skill-items { font-size: clamp(11px,.85vw,15px); color: var(--text2); line-height: 1.85; font-weight: 500; position: relative; z-index: 1; }

  /* ═══ CERTIFICATIONS ═══ */
  .cert-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px,25vw,400px), 1fr));
    gap: clamp(12px,1.2vw,20px);
  }
  .cert-card-new {
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    transition: background .3s, border-color .3s, transform .3s var(--ease);
    display: flex; flex-direction: column;
  }
  .cert-card-new::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent 60%); opacity: .6; transition: opacity .3s; }
  .cert-card-new:hover { background: var(--surface2); border-color: var(--border2); transform: translateY(-3px); }
  .cert-card-new:hover::before { opacity: 1; }
  .cert-card-inner { padding: clamp(18px,1.8vw,28px); flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .cert-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .cert-diamond { width: clamp(8px,.7vw,12px); height: clamp(8px,.7vw,12px); background: var(--cyan); transform: rotate(45deg); flex-shrink: 0; box-shadow: 0 0 8px rgba(0,200,255,.5); }
  .cert-issuer-tag { font-family: var(--mono); font-size: clamp(8px,.6vw,11px); color: var(--orange); letter-spacing: .15em; text-transform: uppercase; background: var(--orange-dim); border: 1px solid rgba(255,107,0,.2); padding: 2px 8px; }
  .cert-name-new { font-size: clamp(13px,1vw,17px); font-weight: 700; color: var(--text); line-height: 1.4; }
  .cert-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cert-date { font-family: var(--mono); font-size: clamp(8px,.6vw,11px); color: var(--muted); letter-spacing: .08em; display: flex; align-items: center; gap: 5px; }
  .cert-date::before { content: '◷'; color: var(--cyan); opacity: .7; }
  .cert-id { font-family: var(--mono); font-size: clamp(7px,.55vw,10px); color: var(--muted); letter-spacing: .06em; background: var(--surface2); border: 1px solid var(--border2); padding: 2px 7px; opacity: .8; }
  .cert-desc { font-size: clamp(11px,.82vw,14px); color: var(--text2); line-height: 1.7; font-weight: 500; flex: 1; }
  .cert-actions { padding: clamp(12px,1.2vw,18px); padding-top: 0; display: flex; gap: 8px; }
  .btn-cert {
    font-family: var(--mono); font-size: clamp(8px,.62vw,12px);
    letter-spacing: .12em; text-transform: uppercase;
    padding: 8px 16px; border: 1px solid var(--border2);
    color: var(--muted); background: transparent; cursor: pointer;
    transition: all .25s var(--ease); position: relative; overflow: hidden;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
  }
  .btn-cert::before { content: ''; position: absolute; inset: 0; background: var(--cyan-dim); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .btn-cert:hover { color: var(--cyan); border-color: var(--cyan); }
  .btn-cert:hover::before { transform: scaleX(1); }
  .btn-cert span { position: relative; z-index: 1; }
  .btn-cert.primary-cert { border-color: rgba(0,200,255,.3); color: var(--cyan); background: var(--cyan-dim); }
  .btn-cert.primary-cert:hover { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }

  /* ═══ CERT MODAL ═══ */
  .cert-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(2,5,8,.92);
    backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
  }
  .cert-modal-overlay.active { opacity: 1; pointer-events: all; }
  .cert-modal {
    background: var(--surface);
    border: 1px solid var(--border2);
    max-width: 960px; width: 100%; max-height: 92vh;
    display: flex; flex-direction: column;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    transform: translateY(20px) scale(.98);
    transition: transform .3s var(--ease);
    position: relative;
  }
  .cert-modal-overlay.active .cert-modal { transform: translateY(0) scale(1); }
  .cert-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange), transparent); }
  .cert-modal-header { padding: clamp(16px,1.6vw,24px) clamp(20px,2vw,32px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .cert-modal-title { font-family: var(--display); font-size: clamp(18px,1.6vw,28px); color: #fff; letter-spacing: .06em; line-height: 1.2; }
  .cert-modal-sub { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); letter-spacing: .1em; margin-top: 4px; }
  .cert-modal-controls { display: flex; gap: 8px; flex-shrink: 0; }
  .modal-btn { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--border2); color: var(--text2); background: transparent; cursor: pointer; transition: all .25s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .modal-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-dim); }
  .modal-btn.close-btn { border-color: rgba(255,55,95,.3); color: #ff375f; }
  .modal-btn.close-btn:hover { border-color: #ff375f; background: rgba(255,55,95,.1); color: #ff375f; }
  .cert-modal-body { flex: 1; overflow: auto; display: flex; flex-direction: column; }

  /* Certificate image display */
  .cert-img-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg2);
    min-height: 300px;
    position: relative;
    overflow: hidden;
  }
  .cert-img-container::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(rgba(0,200,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,200,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .cert-img-container img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    border: 1px solid var(--border);
    box-shadow: 0 0 40px rgba(0,200,255,0.08);
  }
  .cert-img-container .cert-img-loading {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    letter-spacing: .1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
  }
  .cert-img-loading .cert-spinner {
    width: 40px; height: 40px;
    border: 2px solid var(--border2);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .cert-no-preview {
    font-family: var(--mono);
    text-align: center;
    padding: 60px 30px;
    position: relative; z-index: 1;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 2;
  }
  .cert-no-preview .cert-icon { font-size: 2.5em; display: block; margin-bottom: 16px; opacity: .3; }

  .cert-modal-footer { padding: clamp(12px,1.2vw,20px) clamp(20px,2vw,32px); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .cert-modal-id { font-family: var(--mono); font-size: clamp(8px,.62vw,12px); color: var(--muted); letter-spacing: .1em; }
  .cert-modal-id strong { color: var(--cyan); }

  /* ═══ TOOLS ═══ */
  .tools-wrap { display: flex; flex-wrap: wrap; gap: clamp(6px,.6vw,11px); }
  .tool { font-family: var(--mono); font-size: clamp(8.5px,.68vw,13px); padding: clamp(5px,.45vw,9px) clamp(12px,1.2vw,22px); border: 1px solid var(--border2); color: var(--muted); letter-spacing: .1em; cursor: default; position: relative; overflow: hidden; transition: color .25s, border-color .25s, background .25s; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); background: var(--surface); }
  .tool::before { content: ''; position: absolute; inset: 0; background: var(--cyan-dim); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .tool:hover { border-color: var(--cyan); color: var(--cyan); }
  .tool:hover::before { transform: scaleX(1); }

  /* ═══ PROJECTS ═══ */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px,28vw,420px), 1fr));
    gap: clamp(16px,1.6vw,28px);
  }
  .project-card-new {
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    transition: border-color .3s, background .3s, transform .3s var(--ease);
    display: flex; flex-direction: column;
  }
  .project-card-new::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange), var(--cyan)); background-size: 200% 100%; animation: gradientShift 4s linear infinite; }
  @keyframes gradientShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
  .project-card-new::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(0,200,255,.04), transparent); opacity: 0; transition: opacity .4s; }
  .project-card-new:hover { border-color: var(--border2); background: var(--surface2); transform: translateY(-4px); }
  .project-card-new:hover::after { opacity: 1; }
  .proj-card-inner { padding: clamp(20px,2vw,32px); flex: 1; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
  .proj-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .proj-card-name { font-family: var(--display); font-size: clamp(18px,1.8vw,32px); color: #fff; letter-spacing: .04em; line-height: 1.1; }
  .proj-badge { font-family: var(--mono); font-size: clamp(7.5px,.62vw,11px); color: var(--orange); border: 1px solid rgba(255,107,0,.4); padding: 3px 10px; letter-spacing: .12em; background: var(--orange-dim); flex-shrink: 0; margin-top: 4px; white-space: nowrap; }
  .proj-card-desc { font-size: clamp(12px,.92vw,15px); color: var(--text2); line-height: 1.8; font-weight: 500; flex: 1; }
  .proj-tech-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
  .proj-tech { font-family: var(--mono); font-size: clamp(8px,.6vw,11px); padding: 3px 9px; border: 1px solid var(--border2); color: var(--text2); letter-spacing: .08em; background: var(--surface2); clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%); }
  .proj-card-footer { padding: clamp(14px,1.4vw,22px) clamp(20px,2vw,32px); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
  .btn-proj { font-family: var(--mono); font-size: clamp(8px,.6vw,11px); letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--border2); color: var(--muted); background: transparent; cursor: pointer; transition: all .25s; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%); }
  .btn-proj:hover { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-dim); }
  .btn-proj.btn-proj-primary { border-color: rgba(0,200,255,.3); color: var(--cyan); background: var(--cyan-dim); }
  .btn-proj.btn-proj-primary:hover { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }

  /* ═══ GITHUB METRICS ═══ */
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px,16vw,260px), 1fr));
    gap: clamp(10px,1vw,18px);
    margin-bottom: clamp(24px,2.4vw,40px);
  }
  .metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: clamp(18px,1.8vw,30px) clamp(16px,1.6vw,24px);
    position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    transition: background .3s, border-color .3s;
    display: flex; flex-direction: column; gap: 8px;
  }
  .metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cyan); opacity: 0; transition: opacity .3s; }
  .metric-card:hover { background: var(--surface2); border-color: var(--border2); }
  .metric-card:hover::before { opacity: .7; }
  .metric-icon { font-size: clamp(18px,1.8vw,28px); opacity: .7; }
  .metric-val { font-family: var(--display); font-size: clamp(36px,4vw,64px); color: var(--cyan); letter-spacing: .02em; line-height: 1; text-shadow: 0 0 30px var(--cyan-glow); }
  .metric-val.loading { color: var(--muted); font-size: clamp(20px,2vw,32px); animation: pulse 1.5s ease infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
  .metric-label { font-family: var(--mono); font-size: clamp(8px,.62vw,12px); color: var(--muted); letter-spacing: .15em; text-transform: uppercase; }
  .metrics-charts {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(16px,1.6vw,28px);
  }
  @media (max-width: 768px) { .metrics-charts { grid-template-columns: 1fr; } }
  .metric-chart-card {
    background: var(--surface); border: 1px solid var(--border);
    padding: clamp(16px,1.6vw,24px); position: relative; overflow: hidden;
  }
  .metric-chart-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--orange), transparent); }
  .metric-chart-title { font-family: var(--mono); font-size: clamp(9px,.68vw,13px); color: var(--cyan); letter-spacing: .15em; text-transform: uppercase; margin-bottom: clamp(14px,1.4vw,22px); }
  .github-img-wrap { width: 100%; overflow: hidden; border-radius: 4px; }
  .github-img-wrap img { width: 100%; height: auto; display: block; filter: hue-rotate(0deg) saturate(1.2); }
  .github-stat-bar { display: flex; flex-direction: column; gap: 10px; }
  .stat-bar-row { display: flex; flex-direction: column; gap: 5px; }
  .stat-bar-meta { display: flex; justify-content: space-between; align-items: center; }
  .stat-bar-name { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--text2); letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
  .stat-bar-pct { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); }
  .lang-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .stat-bar-track { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
  .stat-bar-fill { height: 100%; border-radius: 2px; width: 0%; transition: width 1.2s cubic-bezier(0.23,1,0.32,1); }
  .metrics-link { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(20px,2vw,32px); padding-top: clamp(14px,1.4vw,22px); border-top: 1px solid var(--border); text-decoration: none; font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; transition: color .25s; }
  .metrics-link:hover { color: var(--cyan); }
  .metrics-link .arr { color: var(--cyan); transition: transform .25s var(--ease); }
  .metrics-link:hover .arr { transform: translateX(4px); }

  /* ═══ LIVE STATS (LeetCode + Monkeytype) ═══ */
  .live-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px,1.6vw,28px);
  }
  @media (max-width: 860px) { .live-stats-grid { grid-template-columns: 1fr; } }

  .stat-platform-card {
    background: var(--surface);
    border: 1px solid var(--border);
    position: relative; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition: border-color .3s, background .3s;
  }
  .stat-platform-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--orange), transparent);
    z-index: 2;
  }
  .stat-platform-card:hover { background: var(--surface2); border-color: var(--border2); }

  .stat-card-inner { padding: clamp(20px,2vw,32px); }

  .platform-header {
    display: flex; align-items: center; gap: clamp(10px,1vw,16px);
    margin-bottom: clamp(20px,2vw,28px); padding-bottom: clamp(14px,1.4vw,20px);
    border-bottom: 1px solid var(--border);
  }
  .platform-icon {
    width: clamp(36px,3.2vw,52px); height: clamp(36px,3.2vw,52px);
    background: var(--surface2); border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-family: var(--display);
    font-size: clamp(14px,1.3vw,20px); letter-spacing: .06em;
  }
  .platform-meta { flex: 1; min-width: 0; }
  .platform-name { font-family: var(--display); font-size: clamp(16px,1.5vw,26px); color: #fff; letter-spacing: .08em; line-height: 1; }
  .platform-handle { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); letter-spacing: .1em; margin-top: 4px; }
  .live-badge { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: clamp(8px,.6vw,11px); color: var(--green); letter-spacing: .1em; flex-shrink: 0; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: blip 2s ease infinite; }

  /* LeetCode specific */
  .lc-main-metric { text-align: center; padding: clamp(12px,1.2vw,20px) 0; }
  .lc-number { font-family: var(--display); font-size: clamp(52px,5.5vw,86px); letter-spacing: .02em; color: #fff; line-height: 1; text-shadow: 0 0 40px rgba(0,200,255,.25); }
  .lc-label { font-family: var(--mono); font-size: clamp(9px,.7vw,13px); color: var(--muted); letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; }

  .lc-breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(6px,.6vw,10px); margin-top: clamp(14px,1.4vw,22px); }
  .lc-tier { background: var(--surface2); border: 1px solid var(--border2); padding: clamp(10px,1vw,16px) clamp(6px,.6vw,10px); display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; overflow: hidden; }
  .lc-tier::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
  .lc-tier.easy::before { background: var(--lc-easy); }
  .lc-tier.medium::before { background: var(--lc-med); }
  .lc-tier.hard::before { background: var(--lc-hard); }
  .tier-count { font-family: var(--display); font-size: clamp(24px,2.4vw,40px); line-height: 1; letter-spacing: .04em; }
  .lc-tier.easy .tier-count { color: var(--lc-easy); text-shadow: 0 0 16px rgba(0,184,163,.4); }
  .lc-tier.medium .tier-count { color: var(--lc-med); text-shadow: 0 0 16px rgba(255,192,30,.4); }
  .lc-tier.hard .tier-count { color: var(--lc-hard); text-shadow: 0 0 16px rgba(255,55,95,.4); }
  .tier-label { font-family: var(--mono); font-size: clamp(8px,.6vw,11px); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

  .lc-bars { display: flex; flex-direction: column; gap: clamp(8px,.8vw,12px); margin-top: clamp(14px,1.4vw,22px); }
  .bar-row { display: flex; flex-direction: column; gap: 5px; }
  .bar-meta { display: flex; justify-content: space-between; align-items: center; }
  .bar-name { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--text2); letter-spacing: .08em; }
  .bar-nums { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); }
  .bar-track { height: 4px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
  .bar-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 1.2s cubic-bezier(0.23,1,0.32,1); }
  .bar-row.easy .bar-fill { background: var(--lc-easy); box-shadow: 0 0 8px rgba(0,184,163,.5); }
  .bar-row.medium .bar-fill { background: var(--lc-med); box-shadow: 0 0 8px rgba(255,192,30,.5); }
  .bar-row.hard .bar-fill { background: var(--lc-hard); box-shadow: 0 0 8px rgba(255,55,95,.5); }

  /* Monkeytype specific */
  .mt-main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,.8vw,14px); margin-bottom: clamp(14px,1.4vw,22px); }
  .mt-metric { background: var(--surface2); border: 1px solid var(--border2); padding: clamp(14px,1.4vw,22px); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; transition: border-color .3s; }
  .mt-metric:first-child { border-color: rgba(0,200,255,.2); }
  .mt-metric:first-child::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
  .mt-value { font-family: var(--display); font-size: clamp(36px,3.6vw,60px); color: #fff; letter-spacing: .04em; line-height: 1; }
  .mt-metric:first-child .mt-value { color: var(--cyan); text-shadow: 0 0 24px rgba(0,200,255,.35); }
  .mt-unit { font-family: var(--mono); font-size: clamp(9px,.7vw,13px); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }

  .mt-accuracy-wrap { display: flex; align-items: center; gap: clamp(14px,1.4vw,20px); background: var(--surface2); border: 1px solid var(--border2); padding: clamp(14px,1.4vw,22px); margin-bottom: clamp(14px,1.4vw,20px); }
  .acc-ring-wrap { position: relative; width: clamp(60px,6vw,90px); height: clamp(60px,6vw,90px); flex-shrink: 0; }
  .acc-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .acc-ring-track { fill: none; stroke: var(--border2); stroke-width: 3; }
  .acc-ring-fill { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.23,1,0.32,1); filter: drop-shadow(0 0 4px var(--cyan-glow)); }
  .acc-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .acc-pct { font-family: var(--display); font-size: clamp(14px,1.4vw,22px); color: var(--cyan); line-height: 1; }
  .acc-sub { font-family: var(--mono); font-size: clamp(7px,.55vw,10px); color: var(--muted); letter-spacing: .08em; }
  .acc-meta { flex: 1; }
  .acc-meta-title { font-family: var(--mono); font-size: clamp(9px,.68vw,13px); color: var(--text2); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
  .acc-meta-val { font-family: var(--display); font-size: clamp(20px,2vw,32px); color: #fff; letter-spacing: .04em; line-height: 1.1; }
  .acc-meta-sub { font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); margin-top: 4px; }

  .mt-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(70px,7vw,110px), 1fr)); gap: clamp(5px,.5vw,8px); margin-bottom: clamp(14px,1.4vw,20px); }
  .mt-mode { background: var(--surface2); border: 1px solid var(--border2); padding: clamp(8px,.8vw,12px) clamp(6px,.6vw,10px); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: border-color .3s, background .3s; }
  .mt-mode:hover { border-color: rgba(0,200,255,.2); background: rgba(0,200,255,.03); }
  .mt-mode-val { font-family: var(--display); font-size: clamp(18px,1.8vw,26px); color: var(--text); letter-spacing: .04em; line-height: 1; }
  .mt-mode-key { font-family: var(--mono); font-size: clamp(7px,.58vw,10px); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

  /* Shared link styles */
  .stat-profile-link { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(14px,1.4vw,20px); padding-top: clamp(12px,1.2vw,18px); border-top: 1px solid var(--border); text-decoration: none; font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; transition: color .25s; }
  .stat-profile-link:hover { color: var(--cyan); }
  .stat-profile-link .arr { color: var(--cyan); transition: transform .25s var(--ease); }
  .stat-profile-link:hover .arr { transform: translateX(4px); }

  .loading-pulse { display: inline-block; font-family: var(--mono); font-size: clamp(12px,1vw,16px); color: var(--muted); letter-spacing: .1em; animation: pulse 1.5s ease infinite; }
  .err-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: clamp(9px,.68vw,12px); color: var(--lc-hard); background: rgba(255,55,95,.08); border: 1px solid rgba(255,55,95,.2); padding: 4px 10px; }

  /* ═══ EDUCATION ═══ */
  .edu-list { display: flex; flex-direction: column; }
  .edu-row { display: flex; justify-content: space-between; align-items: center; padding: clamp(14px,1.4vw,26px) 0; border-bottom: 1px solid var(--border); transition: background .2s; position: relative; }
  .edu-row::before { content: ''; position: absolute; left: -clamp(12px,1.5vw,24px); top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--border2); border-radius: 50%; transition: background .25s, box-shadow .25s; }
  .edu-row:hover::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
  .edu-row:last-child { border-bottom: none; }
  .edu-deg { font-size: clamp(13px,1.05vw,19px); font-weight: 700; color: var(--text); letter-spacing: .02em; }
  .edu-sch { font-family: var(--mono); font-size: clamp(8.5px,.65vw,12.5px); color: var(--muted); margin-top: 3px; }
  .edu-yr { font-family: var(--mono); font-size: clamp(9.5px,.75vw,14px); color: var(--cyan); white-space: nowrap; padding-left: 20px; }

  /* ═══ FOOTER ═══ */
  footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: clamp(20px,2vw,40px) clamp(20px,3vw,60px); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: clamp(8.5px,.68vw,13px); color: var(--muted); gap: 16px; flex-wrap: wrap; }
  footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border2), transparent); }
  footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
  footer a:hover { color: var(--cyan); }
  .footer-contact { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); border: 1px solid rgba(0,200,255,.2); padding: 6px 14px; text-decoration: none; font-family: var(--mono); font-size: clamp(8.5px,.65vw,12px); letter-spacing: .1em; transition: all .25s; clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%); }
  .footer-contact:hover { background: var(--cyan-dim); border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,200,255,.15); color: var(--cyan) !important; }

  /* ═══ ANIMATIONS ═══ */
  .fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp .7s var(--ease) forwards; }
  @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
  .d1{animation-delay:.08s} .d2{animation-delay:.18s} .d3{animation-delay:.28s}
  .d4{animation-delay:.38s} .d5{animation-delay:.48s} .d6{animation-delay:.58s}

  /* ═══ RESPONSIVE ═══ */
  @media (max-width: 1024px) {
    main { padding: clamp(40px,5vw,80px) 24px; }
    .hero { grid-template-columns: 0 1fr 1fr; }
    .side-name { display: none; }
    .section-wrap { padding-left: 16px; }
  }
  @media (max-width: 768px) {
    html { font-size: 15px; }
    .nav-center, .nav-status, .nav-date { display: none; }
    .nav-hamburger { display: flex; }
    .nav-drawer { display: flex; }
    nav { padding: 0 16px; height: 52px; }
    .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; padding-top: 52px; }
    .side-name { display: none; }
    .hero-left { padding: 36px 16px 28px; border-right: none; border-bottom: 1px solid var(--border); gap: 16px; }
    .hero-right { min-height: 55vw; max-height: 380px; }
    .avatar-frame { width: clamp(180px,46vw,280px); }
    .hero-h1 { font-size: clamp(40px,12vw,72px); }
    .hero-sub { font-size: clamp(16px,5vw,28px); }
    .btn-group { flex-direction: column; gap: 10px; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; font-size: 12px; padding: 13px 20px; }
    main { padding: 28px 16px 56px; }
    .section-wrap { padding-left: 12px; margin-bottom: clamp(36px,8vw,60px); }
    .exp-card { grid-template-columns: 1fr; }
    .exp-left { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 14px 10px; }
    .exp-right { padding: 14px; }
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .sec-title { font-size: clamp(22px,7vw,38px); }
    .edu-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .edu-yr { padding-left: 0; }
    footer { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
    .footer-contact { width: 100%; justify-content: center; }
    .cert-modal { clip-path: none; }
    .live-stats-grid { grid-template-columns: 1fr; }
    .mt-main { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .skills-grid { grid-template-columns: 1fr; }
    .metrics-grid { grid-template-columns: 1fr; }
    .hero-left { padding: 30px 14px 24px; }
    main { padding: 24px 14px 48px; }
    .mt-main { grid-template-columns: 1fr; }
  }