@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Default to light-mode tokens to avoid initial white flash on load */
  --bg:#cfd3e6;
  --bg-secondary:#eef2f7;
  --card:#f0f8ff;
  --text:#1e1e2f;
  --muted:#5a5a6d;
  --accent:#00d9ff;
  --accent-secondary:#ff006e;
  /* Brand + semantic colors */
  --color-primary:#2563EB;
  --color-primary-bg:rgba(37,99,235,0.12);
  --color-primary-dark:#1d4ed8;
  --color-success:#22c55e;
  --color-warning:#f59e0b;
  --color-danger:#ef4444;

  /* Back-compat token */
  --success:var(--color-success);
  --container:1200px;
  --radius:12px;

  /* Typography */
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale (max 6 levels) */
  --fs-12:12px;
  --fs-14:14px;
  --fs-16:16px;
  --fs-20:20px;
  --fs-24:24px;
  --fs-48:48px;

  /* Line heights */
  --lh-body:1.55;
  --lh-heading:1.15;

  /* Spacing scale (4px multiples) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;

  /* Layout helpers */
  --section-space-y:32px;
  --card-pad:24px;
  --stack-tight:8px;

  /* Shadows (subtle depth) */
  --shadow-card:0 2px 12px rgba(0,0,0,0.08);
  --shadow-float:0 8px 32px rgba(0,0,0,0.12);
  --shadow-modal:0 8px 32px rgba(0,0,0,0.18);
  --shadow-press:inset 0 1px 2px rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.12), 0 2px 12px rgba(0,0,0,0.14);
  font-family: var(--font-body);
}

html,
body{background:var(--bg)}

/* =========================================
   Interaction feedback (focus / loading / inputs)
   ========================================= */

/* Visible focus ring for accessibility */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:3px;
}

/* Skip link (keyboard accessibility) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:var(--space-4);
  padding:var(--space-2) var(--space-4);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(0,217,255,0.25);
  box-shadow:var(--shadow-card);
  z-index:3000;
}
.skip-link:focus{left:var(--space-4)}

/* Screen-reader only */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Inputs (for any current/future form fields; theme switch input is visually hidden) */
:where(input,textarea,select):not(.theme-switch__input){
  border-radius:8px;
}

:where(input,textarea,select):not(.theme-switch__input):focus{
  outline:none;
}

:where(input,textarea,select):not(.theme-switch__input):focus-visible{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Error / warning states (apply class to the control or the wrapping .field) */
:where(input,textarea,select).is-error,
.field.is-error :where(input,textarea,select){
  border-color:var(--color-danger);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-danger) 20%, transparent);
}

:where(input,textarea,select).is-warning,
.field.is-warning :where(input,textarea,select){
  border-color:var(--color-warning);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-warning) 18%, transparent);
}

.field__message{margin-top:var(--space-2);font-size:var(--fs-12);line-height:1.4;color:var(--muted)}
.field.is-error .field__message{color:var(--color-danger)}
.field.is-warning .field__message{color:var(--color-warning)}

/* Button loading state (add/remove `.is-loading` via JS only; visuals only) */
:where(button,.btn,.resume-btn,.nav-toggle,.copy-btn,.cert-modal-close,.screen-toggle).is-loading{
  position:relative;
  color:transparent !important;
  text-shadow:none !important;
}

:where(button,.btn,.resume-btn,.nav-toggle,.copy-btn,.cert-modal-close,.screen-toggle).is-loading :where(svg,img){opacity:0}

:where(button,.btn,.resume-btn,.nav-toggle,.copy-btn,.cert-modal-close,.screen-toggle).is-loading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:1em;
  height:1em;
  margin:-0.5em;
  border-radius:50%;
  border:2px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-top-color:var(--color-primary);
  animation:btn-spin 800ms linear infinite;
}

@keyframes btn-spin{to{transform:rotate(360deg)}}

/* Container skeleton shimmer (apply `.is-loading` to any data-loading container) */
.is-loading:not(button):not(a){
  position:relative;
  overflow:hidden;
}

.is-loading:not(button):not(a)::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--bg-secondary) 70%, var(--text) 10%),
    transparent
  );
  transform:translateX(-100%);
  animation:skeleton-shimmer 1200ms ease-in-out infinite;
  pointer-events:none;
}

@keyframes skeleton-shimmer{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  :where(button,.btn,.resume-btn,.nav-toggle,.copy-btn,.cert-modal-close,.screen-toggle).is-loading::after,
  .is-loading:not(button):not(a)::after{animation:none}
}

[data-theme="dark"]{
  --bg:#111827;
  --bg-secondary:#1f2937;
  --card:#1b2433;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --shadow-card:0 2px 12px rgba(0,0,0,0.18);
  --shadow-float:0 8px 32px rgba(0,0,0,0.18);
  --color-primary-bg:rgba(37,99,235,0.18);
  --accent:#38bdf8;
  --accent-secondary:#22d3ee;
}

/* Light Theme */
[data-theme="light"]{
  --bg:#cfd3e6;
  --bg-secondary:#eef2f7;
  --card:#d8e8f7;
  --text:#1e1e2f;
  --muted:#5a5a6d;
  --color-primary-bg:rgba(37,99,235,0.12);
  --accent:#00d9ff;
  --accent-secondary:#ff006e;
}
[data-theme="light"],
[data-theme="light"] body{background:var(--bg)}
[data-theme="light"] .site-header{background:rgba(222,235,246,0.94);border-bottom:1px solid rgba(0,217,255,0.28)}
[data-theme="light"] .site-header.scrolled{background:rgba(217,231,243,0.98)}
[data-theme="light"] .nav a{color:#64748b}
[data-theme="light"] .nav a:hover{color:#0891b2;background:rgba(8,145,178,0.1)}
[data-theme="light"] main,
[data-theme="light"] .hero,
[data-theme="light"] .hero-wrapper,
[data-theme="light"] .hero-left,
[data-theme="light"] .hero-right,
[data-theme="light"] .section,
[data-theme="light"] .site-footer{background:var(--bg) !important}
[data-theme="light"] .profile-card{background:var(--card);border-color:rgba(0,217,255,0.25)}
[data-theme="light"] .code-editor,[data-theme="light"] .concepts-terminal,[data-theme="light"] .package-json,[data-theme="light"] .git-log,[data-theme="light"] .api-endpoint,[data-theme="light"] .achievements-terminal,[data-theme="light"] .education-notepad,[data-theme="light"] .about-terminal,[data-theme="light"] .profile-card,[data-theme="light"] .footer-terminal{background:var(--card);border-color:rgba(0,217,255,0.25)}
[data-theme="light"] .code-editor,
[data-theme="light"] .concepts-terminal,
[data-theme="light"] .package-json,
[data-theme="light"] .git-log,
[data-theme="light"] .api-endpoint,
[data-theme="light"] .achievements-terminal,
[data-theme="light"] .education-notepad,
[data-theme="light"] .about-terminal,
[data-theme="light"] .profile-card,
[data-theme="light"] .footer-terminal{color:var(--text)}
[data-theme="light"] .profile-card-header,
[data-theme="light"] .editor-header,
[data-theme="light"] .notepad-header,
[data-theme="light"] .about-terminal-header,
[data-theme="light"] .achieve-header,
[data-theme="light"] .json-header,
[data-theme="light"] .git-header,
[data-theme="light"] .api-header{background:#d4e6f6;border-color:rgba(0,217,255,0.28)}
[data-theme="light"] .editor-tab,
[data-theme="light"] .editor-tab.active,
[data-theme="light"] .notepad-tab,
[data-theme="light"] .notepad-tab.active{background:#e4f0fb;color:#1e1e2f;border-right:1px solid rgba(0,217,255,0.24)}
[data-theme="light"] .notepad-tab-new{color:#5a5a6d}
[data-theme="light"] .notepad-tab-new:hover{color:#0b7f99}
[data-theme="light"] .achieve-tab{background:rgba(0,217,255,0.14);color:#1e1e2f;border:1px solid rgba(0,217,255,0.22)}
[data-theme="light"] .status-text{color:var(--color-success)}
[data-theme="light"] .education-card{background:var(--card);border-color:rgba(0,217,255,0.25)}
[data-theme="light"] .notepad-sidebar,
[data-theme="light"] .editor-sidebar{background:#d2e4f4;border-right:1px solid rgba(0,217,255,0.24)}
[data-theme="light"] .notepad-sidebar .line-numbers,
[data-theme="light"] .editor-sidebar .line-numbers{color:#5a5a6d}
[data-theme="light"] .section-divider{background:linear-gradient(90deg,transparent,rgba(0,217,255,0.35),transparent)}
[data-theme="light"] .site-footer{border-top-color:rgba(0,217,255,0.25)}
[data-theme="light"] .hero{background:linear-gradient(180deg,rgba(8,145,178,0.12) 0%,rgba(8,145,178,0.03) 60%,transparent 100%)}
[data-theme="light"] .hero-left{border-right:1px solid rgba(0,217,255,0.15)}
[data-theme="light"] .site-header{box-shadow:var(--shadow-float)}
[data-theme="light"] .logo{background:none;color:#0b7f99;-webkit-text-fill-color:#0b7f99;font-size:var(--fs-20)}
[data-theme="light"] .site-header.scrolled .logo{color:#0b7f99;-webkit-text-fill-color:#0b7f99}

[data-theme="light"] .card,
[data-theme="light"] .education-card,
[data-theme="light"] .cert-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .code-editor,
[data-theme="light"] .concepts-terminal,
[data-theme="light"] .package-json,
[data-theme="light"] .git-log,
[data-theme="light"] .api-endpoint,
[data-theme="light"] .achievements-terminal,
[data-theme="light"] .education-notepad,
[data-theme="light"] .about-terminal,
[data-theme="light"] .footer-terminal{box-shadow:var(--shadow-card);border-color:rgba(0,217,255,0.22)}

[data-theme="light"] .card{background:linear-gradient(145deg,#e5f1fb,#d9e8f6)}
[data-theme="light"] .cert-card{background:linear-gradient(145deg,#e3f0fa,#d7e7f5)}
[data-theme="light"] .cert-entry{background:#e7f2fb;border-color:rgba(0,217,255,0.2)}
[data-theme="light"] .cert-entry:hover{background:#dbeaf7;border-color:rgba(0,217,255,0.35)}

[data-theme="light"] .about-terminal-header,
[data-theme="light"] .terminal-header,
[data-theme="light"] .json-header,
[data-theme="light"] .git-header,
[data-theme="light"] .api-header,
[data-theme="light"] .achieve-header,
[data-theme="light"] .editor-header,
[data-theme="light"] .notepad-header,
[data-theme="light"] .profile-card-header{background:#d4e6f6;border-bottom:1px solid rgba(0,217,255,0.24)}

[data-theme="light"] .terminal-title,
[data-theme="light"] .json-filename,
[data-theme="light"] .git-title,
[data-theme="light"] .profile-filename,
[data-theme="light"] .terminal-line,
[data-theme="light"] .commit-details p,
[data-theme="light"] .footer-output,
[data-theme="light"] .line-num,
[data-theme="light"] .prompt-separator,
[data-theme="light"] .prompt-symbol{color:#55607a}

[data-theme="light"] .about-terminal-body .json-key,
[data-theme="light"] .json-key,
[data-theme="light"] .api-key{color:#0f766e}
[data-theme="light"] .about-terminal-body .json-string,
[data-theme="light"] .json-string,
[data-theme="light"] .api-string{color:#1d4ed8}
[data-theme="light"] .about-terminal-body .json-boolean{color:#be123c}
[data-theme="light"] .about-terminal-body .json-colon,
[data-theme="light"] .about-terminal-body .json-comma,
[data-theme="light"] .about-terminal-body .json-brace,
[data-theme="light"] .json-colon,
[data-theme="light"] .json-comma,
[data-theme="light"] .json-brace,
[data-theme="light"] .api-colon,
[data-theme="light"] .api-comma,
[data-theme="light"] .api-brace{color:#64748b}

[data-theme="light"] .commit-hash{background:rgba(255,0,110,0.08);color:#be185d}
[data-theme="light"] .commit-tag,
[data-theme="light"] .cert-date,
[data-theme="light"] .cert-skill,
[data-theme="light"] .tool-badge,
[data-theme="light"] .tech-badge{background:rgba(0,217,255,0.08);border-color:rgba(0,217,255,0.22);color:#0b7f99}

[data-theme="light"] .api-link{background:#f6fbff;border-color:rgba(0,217,255,0.22)}
[data-theme="light"] .api-link:hover{background:#edf8ff;border-color:rgba(0,217,255,0.4)}
[data-theme="light"] .api-link .link-label{color:#5a5a6d}
[data-theme="light"] .api-link .link-value{color:#0b7f99}
[data-theme="light"] .api-link:hover .link-value{color:#0b7f99}

[data-theme="light"] .site-footer{background:var(--bg);color:#4b5563}
[data-theme="light"] .footer-terminal{background:#d5e6f5}
[data-theme="light"] .prompt-user{color:var(--color-success)}
[data-theme="light"] .prompt-path{color:var(--color-primary)}

/* =========================================
   Premium Glass Theme Switch (pill)
   ========================================= */
.theme-switcher{position:fixed;top:calc(4rem + 12px);right:1rem;z-index:950;display:flex;justify-content:flex-end;pointer-events:auto}

.theme-switch{display:inline-flex;align-items:center;cursor:pointer;user-select:none}

.theme-switch__input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.theme-switch__track{
  position:relative;
  width:100px;
  min-width:100px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
  border-radius:999px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-float);
  transition:background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Track backgrounds per theme */
[data-theme="light"] .theme-switch__track{
  background:rgba(254,243,199,0.72); /* #fef3c7 tint */
}
[data-theme="dark"] .theme-switch__track{
  background:rgba(30,58,138,0.28); /* #1e3a8a tint */
  box-shadow:0 0 0 1px rgba(14,165,233,0.16), var(--shadow-float);
}


.theme-switch__thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:left 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow:var(--shadow-float);
}

/* Thumb color + icon color */
[data-theme="light"] .theme-switch__thumb{
  background:rgba(253,230,138,0.95); /* #fde68a */
  box-shadow:var(--shadow-float);
  color:#92400e;
}
[data-theme="dark"] .theme-switch__thumb{
  background:rgba(14,165,233,0.9); /* #0ea5e9 */
  box-shadow:var(--shadow-float);
  color:#0b1220;
}

.theme-switch__icon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Keep inline SVG icons aligned to text line-height (avoid oversized icons) */
.theme-switch__icon svg{width:20px;height:20px;display:block}

/* Icon swap animation */
.theme-switch__icon--sun{opacity:1;transform:scale(1)}
.theme-switch__icon--moon{opacity:0;transform:scale(0.85)}

/* When checked => dark */
.theme-switch__input:checked + .theme-switch__track .theme-switch__thumb{left:calc(100% - 3px - 30px)}
.theme-switch__input:checked + .theme-switch__track .theme-switch__icon--sun{opacity:0;transform:scale(0.85)}
.theme-switch__input:checked + .theme-switch__track .theme-switch__icon--moon{opacity:1;transform:scale(1)}

.theme-switch:focus-within .theme-switch__track{outline:2px solid var(--color-primary);outline-offset:3px}

@media (max-width:600px){
  .theme-switcher{right:0.75rem}
  .theme-switch__track{width:100px;min-width:100px;height:36px;padding:3px}
  .theme-switch__thumb{width:30px;height:30px}
  .theme-switch__input:checked + .theme-switch__track .theme-switch__thumb{left:calc(100% - 3px - 30px)}
}

@media (max-width:767px){
  .theme-switcher{top:calc(3.5rem + 12px)}
}

@media (max-width:600px){
  .theme-switcher{top:calc(3rem + 12px)}
}

@media (prefers-reduced-motion:reduce){
  .theme-switch__track,.theme-switch__thumb,.theme-switch__icon,.theme-switch__label{transition:none !important}
}

/* Screen Maximize/Minimize Toggle */
.screen-toggle{position:fixed;right:1rem;bottom:1rem;z-index:1500;width:50px;height:50px;border-radius:50%;border:1px solid rgba(0,217,255,0.35);background:rgba(10,14,39,0.85);backdrop-filter:blur(10px);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-float);transition:all 0.25s ease}
.screen-toggle:hover{transform:translateY(-2px) scale(1.04);border-color:rgba(0,217,255,0.55);box-shadow:var(--shadow-float)}
.screen-toggle:active{transform:translateY(-1px) scale(0.99);filter:brightness(0.95)}
.screen-toggle:disabled{opacity:0.55;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.screen-toggle .maximize-icon,.screen-toggle .minimize-icon{position:absolute;font-size:var(--fs-20);line-height:1;transition:opacity 0.2s ease,transform 0.2s ease}
.screen-toggle .maximize-icon{opacity:1;transform:scale(1)}
.screen-toggle .minimize-icon{opacity:0;transform:scale(0.8)}
.screen-toggle.active .maximize-icon{opacity:0;transform:scale(0.8)}
.screen-toggle.active .minimize-icon{opacity:1;transform:scale(1)}
[data-theme="light"] .screen-toggle{background:rgba(240,244,248,0.9);border-color:rgba(8,145,178,0.35);color:#0891b2}
*{box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;scroll-behavior:smooth}
html,body,.site-header,.site-footer,.hero,.hero-left,.hero-right,.section,.nav a,.resume-btn,.screen-toggle{transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
html,body{height:100%;margin:0;padding-top:4rem;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-16);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,textarea,select{font:inherit}
.container{max-width:var(--container);margin:0 auto;padding:var(--space-8)}
main{display:flex;flex-direction:column;gap:var(--space-8)}
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);background:rgba(10,14,39,0.7);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,217,255,0.1);box-shadow:var(--shadow-float)}
.site-header.scrolled{background:rgba(10,14,39,0.85);box-shadow:var(--shadow-float)}
.site-header.scrolled .logo{color:var(--accent)}
.site-header.scrolled .nav a{color:var(--text)}
.site-header.scrolled .nav a:hover{background:rgba(0,217,255,0.12);border-bottom:2px solid var(--accent)}
.site-header.scrolled .resume-btn{background:#7dd3fc;color:#000;box-shadow:var(--shadow-float);font-weight:700}
.site-header.scrolled .resume-btn:hover{box-shadow:var(--shadow-modal)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-4) 0}
.header-inner{position:relative}
.logo{font-weight:800;letter-spacing:2px;font-size:var(--fs-20);background:linear-gradient(135deg,var(--accent),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:all 0.3s ease}
.nav{display:block;margin-left:auto}
.nav ul{display:flex;gap:var(--space-2);list-style:none;padding:var(--space-1);margin:0;align-items:center;border-radius:12px;background:rgba(255,255,255,0.02);box-shadow:inset 0 0 0 1px rgba(0,217,255,0.10)}
.nav a{color:var(--muted);text-decoration:none;padding:0.5rem 1rem;border-radius:6px;transition:all 0.3s ease;border-bottom:2px solid transparent;font-weight:500;font-size:var(--fs-16)}
.nav a:hover{color:var(--accent);background:rgba(0,217,255,0.08);border-bottom:2px solid var(--accent)}
.nav a:active{background:rgba(0,217,255,0.14)}
.nav a:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.nav a.active{background:rgba(0,217,255,0.12)}
.resume-btn{background:#7dd3fc;color:#000;padding:var(--space-2) var(--space-4);border-radius:8px;transition:all 0.3s ease;box-shadow:var(--shadow-card);font-weight:700;border:none;cursor:pointer}
.resume-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.resume-btn{display:inline-flex;align-items:center;gap:var(--space-2);line-height:1.2}
.resume-btn:active{transform:translateY(-1px);filter:brightness(0.95)}
.resume-btn:active{box-shadow:var(--shadow-press)}
.resume-btn[aria-disabled="true"]{opacity:0.55;pointer-events:none}
.nav-toggle{display:none;background:none;border:1px solid rgba(0,217,255,0.3);color:var(--accent);padding:var(--space-2) var(--space-3);border-radius:6px;cursor:pointer;transition:all 0.3s ease;align-items:center;gap:var(--space-2);line-height:1.2}
.nav-toggle:hover{background:var(--color-primary-bg);box-shadow:var(--shadow-card)}
.nav-toggle:active{background:color-mix(in srgb, var(--color-primary) 18%, transparent)}
.nav-toggle:disabled{opacity:0.55;cursor:not-allowed}

.nav-toggle__icon{display:grid;gap:5px}
.nav-toggle__icon span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform 200ms ease,opacity 200ms ease}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================
  Visual signifiers: pressed / disabled / grouped-actives
  (CSS-only; no changes to data/state logic)
  ========================================= */
.pressable{transition:transform 120ms ease,filter 120ms ease,background-color 120ms ease,box-shadow 120ms ease}
.pressable:active{transform:scale(0.98);filter:brightness(0.92)}
button.pressable:active{background-color:rgba(0,217,255,0.12)}

button:disabled,
button[disabled]{opacity:0.55;cursor:not-allowed}

button:disabled:hover,
button[disabled]:hover{transform:none;filter:none;box-shadow:none}

/* Group containers (tabs/nav links) */
.editor-tabs,
.notepad-tabs,
.achieve-tabs{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,217,255,0.10)}

[data-theme="light"] .nav ul{background:rgba(8,145,178,0.05);box-shadow:inset 0 0 0 1px rgba(8,145,178,0.12)}
[data-theme="light"] .nav a:active{background:rgba(8,145,178,0.16)}
[data-theme="light"] .nav a.active{background:rgba(8,145,178,0.12)}
.hero{position:relative;padding:0;overflow:visible;min-height:100vh;background:linear-gradient(180deg,rgba(255,0,110,0.02) 0%,transparent 50%)}
.hero-wrapper{display:flex;height:100vh;position:relative}
.hero-left{width:50%;position:sticky;top:0;height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:4rem 2rem 2rem;background:linear-gradient(135deg,rgba(26,0,51,0.98),rgba(13,2,33,0.98));border-right:1px solid rgba(255,0,110,0.1)}
.hero-sticky{width:100%;animation:slideInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1)}
.hero-right{width:50%;overflow-y:auto;padding:4rem 2rem;display:flex;flex-direction:column;justify-content:flex-start}
.about-heading{font-size:var(--fs-24);margin:var(--space-12) 0 var(--space-6) 0;color:var(--accent);font-weight:700;letter-spacing:0.5px}
.about-content{color:var(--text);line-height:var(--lh-body);font-size:var(--fs-20)}
.about-content p{margin:0 0 1rem 0;color:var(--muted)}

/* About Terminal Style */
.about-terminal{background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card);margin-top:2rem}
.hero-right .about-terminal{margin-top:0}
.about-terminal-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1)}
.about-terminal-body{padding:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6}
.about-terminal-body .json-line{padding:0.1rem 0}
.about-terminal-body .json-line.indent{padding-left:2rem}
.about-terminal-body .json-key{color:#7ee787}
.about-terminal-body .json-string{color:#a5d6ff}
.about-terminal-body .json-colon{color:#8b949e;margin:0 var(--space-1)}
.about-terminal-body .json-comma{color:#8b949e}
.about-terminal-body .json-brace{color:#8b949e}
.about-terminal-body .json-boolean{color:#ff7b72}
.copy-btn{background:rgba(0,217,255,0.15);border:1px solid rgba(0,217,255,0.3);color:var(--accent);padding:var(--space-1) var(--space-2);border-radius:6px;cursor:pointer;font-size:var(--fs-14);margin-left:var(--space-3);transition:all 0.3s ease;vertical-align:middle;display:inline-flex;align-items:center;gap:var(--space-2)}
.copy-btn:hover{background:rgba(0,217,255,0.25);box-shadow:var(--shadow-card);transform:scale(1.05)}
.copy-btn.copied{background:rgba(34,197,94,0.2);border-color:rgba(34,197,94,0.4);color:var(--success)}
.copy-btn:active{transform:scale(1.02);filter:brightness(0.95)}
.copy-btn:active{box-shadow:var(--shadow-press)}
.copy-btn:disabled{opacity:0.55;cursor:not-allowed}
@media print{.about-content,.about-heading{display:none}}

/* Certificate Modal */
.cert-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:2000;justify-content:center;align-items:center;backdrop-filter:blur(8px);animation:fadeIn 0.3s ease}
.cert-modal.active{display:flex}
.cert-modal-content{position:relative;max-width:95%;max-height:95%;display:flex;justify-content:center;align-items:center}
.cert-modal-close{position:fixed;top:1.5rem;right:1.5rem;background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:var(--fs-48);width:50px;height:50px;border-radius:50%;cursor:pointer;transition:all 0.3s ease;z-index:10;display:flex;align-items:center;justify-content:center}
.cert-modal-close:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}
.cert-modal-close:active{background:rgba(255,255,255,0.22);transform:scale(1.06)}
.cert-modal-close:disabled{opacity:0.55;cursor:not-allowed}
.cert-modal-body{display:flex;justify-content:center;align-items:center;max-width:90vw;max-height:90vh}
.cert-modal-body iframe{width:85vw;height:85vh;border:none;border-radius:8px;box-shadow:var(--shadow-modal)}
.cert-modal-body img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:var(--shadow-modal)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tech-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(0,217,255,0.1);padding:0.3rem 0.7rem;border-radius:4px;border:1px solid rgba(0,217,255,0.2)}
.tech-logo{width:1em;height:1em;vertical-align:middle;flex:0 0 auto}
.skill-logo{width:1em;height:1em;vertical-align:middle;flex:0 0 auto;margin-right:var(--space-2)}
.edu-logo{width:40px;height:40px;object-fit:contain;border-radius:8px;border:1px solid rgba(0,217,255,0.2)}
.section-divider{height:2px;background:linear-gradient(90deg,transparent,rgba(0,217,255,0.3),transparent);margin:var(--space-8) 0}
.hero h1{font-size:var(--fs-48);line-height:var(--lh-heading);letter-spacing:-0.02em;margin:0;margin-bottom:var(--space-2);color:var(--text);font-weight:800;animation:slideInUp 0.8s ease 0.1s both}
.job-title{font-size:var(--fs-20);color:var(--accent);margin:0;margin-bottom:var(--space-6);font-weight:600;animation:slideInUp 0.8s ease 0.2s both}
.profile-image-container{width:300px;height:300px;margin:var(--space-6) auto;border-radius:50%;overflow:hidden;border:3px solid var(--accent);box-shadow:var(--shadow-float);background:transparent;display:flex;align-items:center;justify-content:center;animation:slideInLeft 0.8s ease;position:relative}
.profile-image-container::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-secondary),var(--accent));opacity:0;animation:spin 3s linear infinite;z-index:-1}
.profile-image-container:hover::before{opacity:1}
.profile-image{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;transition:transform 0.4s ease;filter:brightness(1) saturate(1)}
.profile-image-container:hover .profile-image{transform:scale(1.05);filter:brightness(1.1) saturate(1.2)}
.profile-card{background:#1e1e1e;border-radius:var(--radius);padding:0;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center}
.profile-card:hover{border:1px solid rgba(0,217,255,0.5);box-shadow:var(--shadow-float);transform:translateY(-8px)}
.profile-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(0,217,255,0.1),transparent 50%);opacity:0;transition:opacity 0.4s ease;pointer-events:none}
.profile-card:hover::after{opacity:1}
.profile-card.active{animation:pulseCard 0.6s ease}
.profile-card-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:#252526;border-bottom:1px solid #3c3c3c;width:100%}
.profile-dots{display:flex;gap:var(--space-2)}
.profile-dots .dot{width:12px;height:12px;border-radius:50%}
.profile-dots .dot.red{background:#ff5f56}
.profile-dots .dot.yellow{background:#ffbd2e}
.profile-dots .dot.green{background:#27c93f}
.profile-filename{color:#8b949e;font-size:var(--fs-14);font-family:var(--font-mono)}
.profile-code-name{font-family:var(--font-mono);font-size:var(--fs-14);margin-top:1rem;padding:0 1.5rem}
.code-keyword{color:#569cd6}
.code-var{color:#4ec9b0}
.code-brace{color:#8b949e}
.profile-code-end{font-family:var(--font-mono);font-size:var(--fs-14);margin-bottom:1.5rem;color:#8b949e}
.details-container{margin-top:1rem}
.hero-left .lead{color:var(--muted);margin-top:var(--space-2);margin-bottom:var(--space-4);line-height:1.6}
.lead.secondary{color:var(--muted);font-size:var(--fs-16)}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3) var(--space-6);background:linear-gradient(135deg,var(--accent),var(--accent-secondary));color:#1e1e2f;border-radius:8px;text-decoration:none;font-weight:700;transition:all 0.3s ease;box-shadow:var(--shadow-card);cursor:pointer;border:none;line-height:1.2}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.btn:active{transform:translateY(-1px);filter:brightness(0.95)}
.btn:active{box-shadow:var(--shadow-press)}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:0.55;cursor:not-allowed;pointer-events:none}
.wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:80px;opacity:0.08;fill:var(--accent);transform:translateY(20px)}
.section{padding:0;scroll-margin-top:5rem;position:relative}
.section h2{font-size:var(--fs-24);margin:0 0 var(--space-6) 0;color:var(--accent);font-weight:800;letter-spacing:0.5px;position:relative;display:inline-block}
.section h2::after{content:'';position:absolute;bottom:calc(-1 * var(--space-3));left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px}
#about{scroll-margin-top:5rem}
#education{scroll-margin-top:5rem}
#skills{scroll-margin-top:5rem}
#tools{scroll-margin-top:5rem}
#projects{scroll-margin-top:5rem}
#contact{scroll-margin-top:5rem}
#projects h2{text-align:center}
#projects h2::after{left:50%;transform:translateX(-50%)}
#contact h2{text-align:center;display:block;width:100%;margin-left:0}
#contact h2::after{left:50%;transform:translateX(-50%)}
.projects-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8)}
.projects-grid > *{grid-column:span 4}
.card{background:linear-gradient(135deg,rgba(15,20,60,0.4),rgba(10,15,45,0.3));border-radius:var(--radius);padding:var(--card-pad);border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,217,255,0.1),transparent);transition:left 0.5s ease}
.card:hover::before{left:100%}
.card:hover{border:1px solid rgba(0,217,255,0.5);box-shadow:var(--shadow-float);transform:translateY(-4px)}
.card h3{margin:0 0 var(--space-3);color:var(--text);font-size:var(--fs-20);font-weight:800;letter-spacing:0.2px;line-height:1.25}
.card p{color:var(--muted);margin:0 0 var(--space-3) 0;line-height:var(--lh-body)}
.card ul{margin:var(--space-2) 0;padding-left:var(--space-6);color:var(--muted)}
.card li{margin:var(--space-2) 0;color:var(--muted)}
.muted{color:var(--muted);font-size:var(--fs-14)}
.card-link{display:inline-block;margin-top:var(--space-3);color:var(--accent);text-decoration:none;font-weight:600}
.site-footer{padding:var(--space-8) 0;border-top:1px solid rgba(0,217,255,0.1);text-align:center;color:var(--muted);margin-top:var(--space-8);background:#0d1117}
.footer-terminal{font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6;text-align:left;max-width:700px;margin:0 auto;padding:var(--space-4);background:rgba(0,0,0,0.3);border-radius:8px;border:1px solid rgba(0,217,255,0.1)}
.footer-prompt{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-bottom:var(--space-1)}
.prompt-user{color:var(--color-success)}
.prompt-separator{color:#8b949e}
.prompt-path{color:var(--color-primary)}
.prompt-symbol{color:#8b949e;margin-right:var(--space-2)}
.footer-command{color:var(--text)}
.footer-output{color:#8b949e;margin:var(--space-2) 0 var(--space-3) 0;padding-left:0}
.footer-terminal .cursor{color:var(--accent);animation:blink 1s infinite}

/* Programming Section - Code Editor Style */
.code-editor{margin-top:1.5rem;background:#1e1e1e;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.editor-header{display:flex;align-items:center;justify-content:space-between;padding:0;background:#252526;border-bottom:1px solid #3c3c3c}
.editor-tabs{display:flex}
.editor-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#1e1e1e;color:#fff;font-family:var(--font-mono);font-size:var(--fs-14);border-right:1px solid #3c3c3c;position:relative}
.editor-tab::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.editor-tab.active{background:#1e1e1e}
.tab-icon{font-size:1em;line-height:1;flex:0 0 auto;display:inline-flex;align-items:center}
.editor-actions{display:flex;gap:var(--space-2);padding-right:var(--space-4)}
.editor-actions .action-dot{width:12px;height:12px;border-radius:50%;background:#3c3c3c}
.editor-actions .action-dot:nth-child(1){background:#ff5f56}
.editor-actions .action-dot:nth-child(2){background:#ffbd2e}
.editor-actions .action-dot:nth-child(3){background:#27c93f}
.editor-body{display:flex;min-height:350px}
.editor-sidebar{background:#1e1e1e;border-right:1px solid #3c3c3c;padding:1rem 0}
.line-numbers{display:flex;flex-direction:column;padding:0 1rem;color:#858585;font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6;text-align:right;user-select:none}
.editor-content{flex:1;padding:1rem 1.5rem;overflow-x:auto}
.editor-content .code-line{font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem;margin:0 -0.5rem;border-radius:4px;transition:background 0.2s ease}
.editor-content .code-line:hover{background:rgba(255,255,255,0.05)}
.editor-content .comment{color:#6a9955;font-style:italic}
.editor-content .keyword{color:#569cd6}
.editor-content .class-name{color:#4ec9b0}
.editor-content .string{color:#ce9178}
.lang-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.25rem 0.7rem;border-radius:6px;font-size:var(--fs-12);font-weight:600;margin-left:auto;transition:all 0.3s ease}
.lang-badge img{width:1em;height:1em;flex:0 0 auto;object-fit:contain}
.lang-badge.expert{background:rgba(244,114,182,0.15);color:#f472b6;border:1px solid rgba(244,114,182,0.3)}
.lang-badge.advanced{background:color-mix(in srgb, var(--color-success) 15%, transparent);color:var(--color-success);border:1px solid color-mix(in srgb, var(--color-success) 30%, transparent)}
.lang-badge.intermediate{background:color-mix(in srgb, var(--color-primary) 15%, transparent);color:var(--color-primary);border:1px solid color-mix(in srgb, var(--color-primary) 30%, transparent)}
.lang-badge.beginner{background:color-mix(in srgb, var(--color-warning) 15%, transparent);color:var(--color-warning);border:1px solid color-mix(in srgb, var(--color-warning) 30%, transparent)}
.code-line:hover .lang-badge{transform:scale(1.05);box-shadow:var(--shadow-card)}
.editor-content .cursor-line .cursor{color:var(--accent);animation:blink 1s infinite}
.skill-card[data-level="beginner"] .skill-level{color:var(--color-warning);border-color:color-mix(in srgb, var(--color-warning) 40%, transparent)}
.skill-card[data-level="intermediate"] .skill-level{color:var(--color-primary);border-color:color-mix(in srgb, var(--color-primary) 40%, transparent)}
.skill-card[data-level="advanced"] .skill-level{color:var(--color-success);border-color:color-mix(in srgb, var(--color-success) 40%, transparent)}
.skill-card[data-level="expert"] .skill-level{color:#f472b6;border-color:rgba(244,114,182,0.4)}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Education Section - Coding Notepad Style */
.education-notepad{margin-top:1.5rem;background:#1e1e1e;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.notepad-header{display:flex;align-items:center;justify-content:space-between;padding:0;background:#252526;border-bottom:1px solid #3c3c3c}
.notepad-tabs{display:flex;align-items:center}
.notepad-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#1e1e1e;color:#fff;font-family:var(--font-mono);font-size:var(--fs-14);border-right:1px solid #3c3c3c;position:relative}
.notepad-tab::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.notepad-tab.active{background:#1e1e1e}
.notepad-tab-new{padding:var(--space-3) var(--space-4);color:#858585;font-size:var(--fs-16);cursor:pointer;transition:color 0.3s ease}
.notepad-tab-new:hover{color:var(--accent)}
.notepad-actions{display:flex;gap:var(--space-2);padding-right:var(--space-4)}
.notepad-actions .action-dot{width:12px;height:12px;border-radius:50%}
.notepad-actions .action-dot:nth-child(1){background:#ff5f56}
.notepad-actions .action-dot:nth-child(2){background:#ffbd2e}
.notepad-actions .action-dot:nth-child(3){background:#27c93f}
.notepad-body{display:flex;min-height:380px}
.notepad-sidebar{background:#1e1e1e;border-right:1px solid #3c3c3c;padding:1rem 0}
.notepad-sidebar .line-numbers{display:flex;flex-direction:column;padding:0 1rem;color:#858585;font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6;text-align:right;user-select:none}
.notepad-content{flex:1;padding:1rem 1.5rem;overflow-x:auto}
.edu-code-block .code-line{font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem;margin:0 -0.5rem;border-radius:4px;transition:background 0.2s ease}
.edu-code-block .code-line:hover{background:rgba(255,255,255,0.05)}
.edu-code-block .code-line.indent{padding-left:2rem;padding-right:120px;position:relative}
.edu-code-block .code-line.with-logo{padding-right:120px;position:relative}
.edu-code-block .code-line.blank{height:1.9rem}
.edu-code-block .comment{color:#6a9955;font-style:italic}
.edu-code-block .keyword{color:#569cd6;font-weight:600}
.edu-code-block .variable{color:#4ec9b0}
.edu-code-block .key{color:#9cdcfe}
.edu-code-block .string{color:#ce9178}
.edu-inline-logo{width:96px;height:96px;object-fit:contain;border-radius:4px;border:1px solid rgba(0,217,255,0.3);margin:0;vertical-align:middle;background:rgba(255,255,255,0.9);padding:var(--space-1);position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%)}
.aims-logo{right:var(--space-3)}
.status-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:4px;font-size:var(--fs-12);font-weight:600;background:var(--color-primary-bg);color:var(--color-primary);border:1px solid color-mix(in srgb, var(--color-primary) 30%, transparent)}
.status-badge.completed{background:color-mix(in srgb, var(--color-success) 15%, transparent);color:var(--color-success);border-color:color-mix(in srgb, var(--color-success) 30%, transparent)}
.edu-code-block .cursor-line .cursor{color:var(--accent);animation:blink 1s infinite}

/* Legacy Education Grid Support */
.education-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
.education-card{padding:2rem;background:linear-gradient(135deg,rgba(15,20,60,0.4),rgba(10,15,45,0.3));border:1px solid rgba(0,217,255,0.2);border-radius:var(--radius);transition:all 0.3s ease}
.education-card:hover{border-color:rgba(0,217,255,0.5);box-shadow:var(--shadow-card)}
.education-card strong{color:var(--accent);font-size:var(--fs-20)}

/* Certifications Section - Terminal Style */
.achievements-terminal{margin-top:1.5rem;background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.achieve-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1)}
.achieve-tabs{display:flex;gap:var(--space-2)}
.achieve-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(0,217,255,0.1);border-radius:6px;color:#e6edf3;font-family:var(--font-mono);font-size:var(--fs-14)}
.achieve-status{display:flex;align-items:center;gap:var(--space-2)}
.status-text{color:var(--color-success);font-family:var(--font-mono);font-size:var(--fs-12);text-transform:uppercase}
.status-dot{width:8px;height:8px;background:var(--color-success);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-success) 25%, transparent)}50%{box-shadow:0 0 0 8px transparent}}
.achieve-body{padding:var(--space-6);font-family:var(--font-mono)}
.terminal-line{font-size:var(--fs-14);line-height:1.6;color:#8b949e}
.terminal-line.prompt{color:#8b949e}
.terminal-line.prompt::before{content:'';display:inline}
.terminal-line .prompt-symbol{color:var(--color-success)}
.terminal-line.output{color:var(--color-primary)}
.terminal-line.blank{height:var(--space-2)}
.cert-entry{margin:var(--space-4) 0;padding:var(--space-12) var(--space-4) var(--space-4);background:rgba(255,255,255,0.02);border:1px solid rgba(0,217,255,0.1);border-radius:8px;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden}
.cert-entry{display:block;width:100%;text-align:left;font:inherit;color:inherit}
.cert-entry::before{content:'';position:absolute;left:var(--space-4);right:var(--space-4);top:var(--space-3);height:24px;border-radius:12px;pointer-events:none;background:
  radial-gradient(circle at 14px 50%, rgba(0,217,255,0.32) 0 6px, rgba(0,217,255,0.12) 7px 14px, transparent 15px),
  linear-gradient(90deg, rgba(0,217,255,0.10), rgba(0,217,255,0.02));
  box-shadow:inset 0 0 0 1px rgba(0,217,255,0.10)}
.cert-entry > *{position:relative;z-index:1}
.cert-entry:hover{background:rgba(0,217,255,0.05);border-color:rgba(0,217,255,0.3);transform:translateX(5px)}
.cert-entry .terminal-line.prompt{color:var(--color-success);margin-bottom:var(--space-2)}
.cert-content{padding-left:var(--space-4);border-left:2px solid rgba(0,217,255,0.3)}
.cert-row{display:flex;align-items:flex-start;gap:var(--stack-tight);padding:var(--space-1) 0;font-size:0.8125rem;line-height:1.5}
.cert-label{color:#888;min-width:60px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.4px}
.cert-value{color:#888;font-size:0.8125rem}
.cert-value.title{color:var(--text);font-weight:700;font-size:1.375rem;letter-spacing:0.15px;line-height:1.2}
.cert-value.issuer{color:#888}
.cert-value.date{margin-left:auto;text-align:right;color:var(--accent);font-weight:700;font-size:0.8125rem}
.cert-value.skills{color:#888}
.cert-value.status{color:#888;font-weight:600;font-size:0.75rem}
.cert-tag{margin-left:auto;padding:var(--space-1) var(--space-2);background:rgba(0,217,255,0.1);border:1px solid rgba(0,217,255,0.2);border-radius:12px;font-size:0.7rem;color:var(--accent)}
.achieve-body .cursor{color:var(--accent);animation:blink 1s infinite}
.cert-card{background:linear-gradient(135deg,rgba(15,20,60,0.5),rgba(10,15,45,0.4));border:1px solid rgba(0,217,255,0.2);border-radius:var(--radius);padding:var(--space-8);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden;display:flex;flex-direction:column}
.cert-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,217,255,0.1),transparent);transition:left 0.5s ease}
.cert-card:hover::before{left:100%}
.cert-card:hover{border-color:rgba(0,217,255,0.5);box-shadow:var(--shadow-float);transform:translateY(-6px)}
.cert-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.cert-badge{font-size:2rem;filter:drop-shadow(0 0 8px rgba(0,217,255,0.3))}
.cert-date{background:rgba(0,217,255,0.15);padding:var(--space-1) var(--space-3);border-radius:20px;font-size:0.75rem;color:var(--accent);font-weight:700}
.cert-card h3{margin:0 0 0.5rem;color:var(--accent);font-size:1.1rem;font-weight:700}
.cert-issuer{margin:0 0 0.8rem;color:var(--accent);font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.cert-description{margin:0 0 var(--space-6);color:var(--muted);font-size:0.9rem;line-height:1.6;flex-grow:1}
.cert-skills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cert-skill{display:inline-block;background:rgba(0,217,255,0.1);color:var(--accent);padding:0.3rem 0.7rem;border-radius:4px;font-size:0.75rem;font-weight:600;border:1px solid rgba(0,217,255,0.2);transition:all 0.3s ease}
.cert-skill:hover{background:rgba(0,217,255,0.2);border-color:rgba(0,217,255,0.4)}

/* Concepts Section - Terminal Style */
.concepts-terminal{margin-top:var(--space-6);background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.terminal-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1)}
.terminal-dots{display:flex;gap:var(--space-2)}
.terminal-dots .dot{width:12px;height:12px;border-radius:50%;transition:all 0.3s ease}
.terminal-dots .dot.red{background:#ff5f56;box-shadow:0 0 8px rgba(255,95,86,0.22)}
.terminal-dots .dot.yellow{background:#ffbd2e;box-shadow:0 0 8px rgba(255,189,46,0.22)}
.terminal-dots .dot.green{background:#27c93f;box-shadow:0 0 8px rgba(39,201,63,0.22)}
.terminal-title{color:#8b949e;font-size:0.8rem;font-family:'JetBrains Mono',monospace}
.terminal-body{padding:var(--space-6);font-family:'JetBrains Mono',monospace;font-size:0.85rem;line-height:1.8;overflow-x:auto}
.code-line{display:flex;align-items:center;padding:0.15rem 0;transition:background 0.2s ease;border-radius:4px}
.code-line:hover{background:rgba(0,217,255,0.05)}
.line-num{color:#6e7681;min-width:2.5rem;text-align:right;padding-right:1rem;border-right:1px solid rgba(255,255,255,0.1);margin-right:1rem;font-size:0.75rem}
.keyword{color:#ff7b72;font-weight:600}
.variable{color:#79c0ff}
.string{color:#a5d6ff}
.cursor-line .cursor{color:var(--accent);animation:blink 1s infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Tools Section - Package.json Style */
.package-json{margin-top:var(--space-6);background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.json-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1)}
.json-icon{font-size:1em;line-height:1;flex:0 0 auto;display:inline-flex;align-items:center}
.json-filename{color:#8b949e;font-size:0.85rem;font-family:'JetBrains Mono',monospace}
.json-body{padding:var(--space-6);font-family:'JetBrains Mono',monospace;font-size:0.85rem;line-height:2}
.json-line{padding:0.1rem 0}
.json-line.indent{padding:var(--space-3) 0 var(--space-3) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.json-key{color:#7ee787}
.json-string{color:#a5d6ff}
.json-colon{color:#8b949e;margin:0 var(--space-1)}
.json-comma{color:#8b949e}
.json-brace{color:#8b949e}
.tool-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.5rem 1rem;background:rgba(0,217,255,0.08);border:1px solid rgba(0,217,255,0.2);border-radius:8px;transition:all 0.3s ease;cursor:default}
.tool-badge:hover{background:rgba(0,217,255,0.15);border-color:rgba(0,217,255,0.4);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.tool-badge img{width:1em;height:1em;flex:0 0 auto;object-fit:contain}
.tool-badge span{color:var(--text);font-size:0.8rem;font-weight:500}

/* Projects Section - Git Log Style */
.git-log{margin-top:var(--space-6);background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.git-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1)}
.git-branch{display:flex;align-items:center;gap:0.5rem;color:var(--color-primary);font-family:'JetBrains Mono',monospace;font-size:0.85rem}
.branch-icon{width:12px;height:12px;background:var(--color-success);border-radius:50%;box-shadow:0 0 8px color-mix(in srgb, var(--color-success) 22%, transparent)}
.git-title{color:#8b949e;font-family:'JetBrains Mono',monospace;font-size:0.8rem}
.git-body{padding:var(--space-4)}
.commit{border-left:2px solid rgba(0,217,255,0.3);padding:var(--space-12) 0 var(--space-6) var(--space-6);margin-left:var(--space-2);position:relative;transition:all 0.3s ease;overflow:hidden}
.commit:last-child{padding-bottom:var(--space-2)}
.commit::before{content:'';position:absolute;left:calc(-1 * var(--space-2));top:0;width:var(--space-3);height:var(--space-3);background:#0d1117;border:2px solid var(--accent);border-radius:50%;transition:all 0.3s ease}
.commit::after{content:'';position:absolute;left:var(--space-6);right:var(--space-1);top:var(--space-3);height:24px;border-radius:12px;pointer-events:none;background:
  radial-gradient(circle at 14px 50%, rgba(0,217,255,0.30) 0 6px, rgba(0,217,255,0.12) 7px 14px, transparent 15px),
  linear-gradient(90deg, rgba(0,217,255,0.08), rgba(0,217,255,0.02));
  box-shadow:inset 0 0 0 1px rgba(0,217,255,0.10)}
.commit:hover::before{background:var(--accent);box-shadow:0 0 12px rgba(0,217,255,0.22)}
.commit:hover{border-left-color:var(--accent)}
.commit-line{display:flex;align-items:flex-start;gap:var(--stack-tight);flex-wrap:wrap;position:relative;padding-right:6.5rem}
.commit-hash{font-family:'JetBrains Mono',monospace;color:#888;font-size:0.75rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);padding:var(--space-1) var(--space-2);border-radius:6px;position:absolute;right:0;top:0;transform:translateY(-2px)}
.commit-msg{color:var(--text);font-weight:700;font-size:1.375rem;line-height:1.2;letter-spacing:0.15px}
.commit-tag{font-size:0.75rem;padding:var(--space-1) var(--space-3);background:rgba(0,217,255,0.12);color:var(--accent);border-radius:999px;font-weight:600}
.commit-details{margin-top:var(--stack-tight);padding-left:var(--space-2)}
.commit-details p{color:#888;font-size:0.8125rem;margin:0 0 var(--space-2) 0;line-height:1.6}
.commit-stats{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.commit-stats .stat{display:inline-flex;align-items:center;gap:var(--space-2);font-size:0.75rem;color:#888;background:rgba(255,255,255,0.03);padding:var(--space-1) var(--space-3);border-radius:6px}
.stat-icon{font-size:1em;line-height:1;flex:0 0 auto;display:inline-flex;align-items:center}

/* Contact Section - API Endpoint Style */
.api-endpoint{margin-top:var(--space-6);background:#0d1117;border-radius:12px;overflow:hidden;border:1px solid rgba(0,217,255,0.2);box-shadow:var(--shadow-card)}
.api-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:linear-gradient(180deg,#161b22,#0d1117);border-bottom:1px solid rgba(255,255,255,0.1);flex-wrap:wrap}
.api-method{background:var(--color-success);color:#fff;padding:var(--space-1) var(--space-3);border-radius:4px;font-family:var(--font-mono);font-size:var(--fs-14);font-weight:700}
.api-url{color:var(--color-primary);font-family:var(--font-mono);font-size:var(--fs-14);flex:1}
.api-status{color:var(--color-success);font-family:var(--font-mono);font-size:var(--fs-14);background:color-mix(in srgb, var(--color-success) 12%, transparent);padding:var(--space-1) var(--space-3);border-radius:4px}
.api-body{padding:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-14);line-height:1.6}
.api-line{padding:0.1rem 0}
.api-key{color:#7ee787}
.api-string{color:#a5d6ff}
.api-colon{color:#8b949e;margin:0 var(--space-1)}
.api-comma{color:#8b949e}
.api-brace{color:#8b949e}
.api-links{padding:var(--space-4) 0 var(--space-4) var(--space-8);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4)}
.api-links > .api-link{grid-column:span 6}
.api-link{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:var(--space-2);row-gap:var(--space-1);align-items:center;padding:var(--space-4) var(--card-pad);background:rgba(0,217,255,0.05);border:1px solid rgba(0,217,255,0.2);border-radius:10px;text-decoration:none;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);min-width:200px}
.api-link:hover{background:rgba(0,217,255,0.12);border-color:rgba(0,217,255,0.5);transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-float)}
.api-link img{grid-column:1;grid-row:1 / span 2;width:24px;height:24px;min-width:24px;min-height:24px;border-radius:6px;object-fit:contain;background:rgba(255,255,255,0.95);padding:4px;opacity:1;visibility:visible;display:block}
.api-link .link-label{color:#888;font-size:var(--fs-12);text-transform:uppercase;letter-spacing:0.5px}
.api-link .link-value{color:var(--text);font-size:var(--fs-20);font-weight:700;line-height:1.25}
.api-link:hover .link-value{color:#fff}

/* Responsive */
@media (max-width:1024px){
  .education-grid{grid-template-columns:1fr}
  .skills-container{grid-template-columns:1fr}
  .education-notepad{border-radius:10px}
  .notepad-body{min-height:320px}
  .edu-code-block .code-line{font-size:var(--fs-14)}
  .edu-inline-logo{width:22px;height:22px}
}

/* Surface Pro & Tablets (768px - 1024px) - Keep horizontal layout */
@media (max-width:1024px) and (min-width:768px){
  .hero-wrapper{display:flex;flex-direction:row;height:100vh;align-items:stretch}
  .hero-left{width:45%;height:100vh;position:sticky;top:0;padding:var(--space-8) var(--space-6) var(--space-6);display:flex;align-items:flex-start;justify-content:center}
  .hero-right{width:55%;overflow-y:auto;padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;justify-content:flex-start}
  .profile-image-container{width:180px;height:180px;margin:1rem auto}
  .profile-card{padding:0}
  .profile-card-header{padding:var(--space-2) var(--space-3)}
  .profile-code-name{font-size:var(--fs-12);margin-top:0.8rem}
  .profile-code-end{margin-bottom:1rem;font-size:var(--fs-12)}
  .hero h1{font-size:var(--fs-24);line-height:var(--lh-heading);letter-spacing:-0.02em}
  .job-title{font-size:var(--fs-14)}
  .about-terminal{margin-top:0}
  .about-terminal-body{padding:1rem;font-size:var(--fs-14);line-height:1.6}
  .hero-sticky{width:100%}
  .nav a{padding:0.4rem 0.8rem;font-size:var(--fs-14)}
  .resume-btn{padding:0.5rem 1rem;font-size:var(--fs-14)}
}

/* Large Phones (below 768px) */
@media (max-width:767px){
  .hero-wrapper{flex-direction:column;height:auto}
  .hero-left{width:100%;height:auto;position:relative;padding:2rem;border-right:none;border-bottom:1px solid rgba(0,217,255,0.1)}
  .hero-right{width:100%;overflow:visible;padding:2rem}
  .nav-toggle{display:inline-flex}

  .nav{position:absolute;top:100%;left:0;right:0;margin-left:0;z-index:1200;max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:max-height 260ms ease,opacity 200ms ease,transform 260ms ease}
  .nav.open{max-height:520px;opacity:1;transform:translateY(0);pointer-events:auto}

  .nav ul{display:flex;flex-direction:column;position:relative;background:var(--bg-secondary);backdrop-filter:blur(20px);padding:1rem;border:1px solid rgba(0,217,255,0.2);gap:0.5rem;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,217,255,0.10)}
  .nav a{width:100%}
  .nav li{width:100%}
  .container{padding:var(--space-6)}
  .section h2{font-size:var(--fs-24)}
  .projects-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .projects-grid > *{grid-column:span 4}
  .package-json,.git-log,.api-endpoint{border-radius:10px}
  .json-body,.git-body,.api-body{padding:1rem;font-size:var(--fs-14)}
  .tool-badge{padding:0.4rem 0.8rem}
  .tool-badge img{width:1em;height:1em}
  .tool-badge span{font-size:var(--fs-12)}
  .api-link{min-width:180px;padding:var(--space-3) var(--space-4)}
  .commit-line{padding-right:5.4rem}
  .commit-msg{font-size:1.1rem}
  html,body{padding-top:3.5rem}
  .profile-image-container{width:220px;height:220px;margin:1rem auto}
  .profile-card-header{padding:var(--space-2) var(--space-3)}
  .profile-code-name{font-size:0.75rem}
  .profile-code-end{margin-bottom:1rem}
  .certifications-grid{grid-template-columns:1fr}
  .cert-value.title{font-size:1.15rem}
  .education-notepad{border-radius:10px}
  .notepad-body{flex-direction:column;min-height:auto}
  .notepad-sidebar{display:none}
  .notepad-content{padding:1rem}
  .edu-code-block .code-line{font-size:0.75rem;line-height:1.8}
  .edu-code-block .code-line::before{content:attr(data-line);color:#858585;min-width:1.8rem;font-size:0.65rem}
  .edu-inline-logo{width:20px;height:20px}
  .status-badge{font-size:0.65rem;padding:0.15rem 0.5rem}
  .about-terminal{margin-top:1.5rem;border-radius:10px}
  .about-terminal-body{padding:1rem;font-size:0.75rem;line-height:1.8}
  .about-terminal-body .json-line.indent{padding-left:1.5rem}
  .footer-terminal{font-size:0.75rem;padding:0.8rem}
}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav-toggle__icon span{transition:none}
}

/* Medium Phones (480px - 600px) */
@media (max-width:600px){
  html,body{padding-top:3rem}
  .container{padding:var(--space-4)}
  .site-header .container{padding:var(--space-3) var(--space-4)}
  .header-inner{gap:var(--space-4)}
  .logo{font-size:1rem;letter-spacing:1px}
  .nav-toggle{padding:var(--space-2) var(--space-3);font-size:0.85rem}
  
  .hero-left{padding:var(--space-6) var(--space-4)}
  .hero-right{padding:var(--space-6) var(--space-4)}
  .profile-card{padding:2rem 1.5rem}
  .profile-image-container{width:220px;height:220px;margin:0 auto 1rem auto}
  .hero h1{font-size:clamp(1.5rem,6vw,2rem)}
  .job-title{font-size:1rem;margin-bottom:1rem}
  .about-heading{font-size:1.5rem;margin:var(--space-8) 0 var(--space-4) 0}
  .about-content{font-size:1rem}
  
  .section{padding:0}
  .section h2{font-size:1.5rem}
  .section h2::after{width:40px;height:2px}
  
  .education-card{padding:var(--space-6)}
  .education-card strong{font-size:1rem}
  .edu-logo{width:35px;height:35px}
  
  .education-notepad{border-radius:8px}
  .notepad-header{flex-wrap:wrap;gap:var(--space-2)}
  .notepad-tab{font-size:0.7rem;padding:var(--space-2) var(--space-3)}
  .notepad-content{padding:var(--space-3)}
  .edu-code-block .code-line{font-size:0.7rem;line-height:1.7;flex-wrap:wrap}
  .edu-code-block .code-line.indent{padding-left:1.5rem}
  .edu-inline-logo{width:18px;height:18px;margin-right:var(--space-1)}
  .status-badge{font-size:0.6rem;padding:0.12rem 0.4rem}
  
  .code-editor{border-radius:10px}
  .editor-body{min-height:280px}
  .editor-content{padding:0.8rem 1rem}
  .editor-content .code-line{font-size:0.75rem;line-height:1.8;flex-wrap:wrap}
  .line-numbers{font-size:0.7rem;padding:0 0.8rem;line-height:1.8}
  .lang-badge{font-size:0.6rem;padding:0.2rem 0.5rem;margin-top:0.3rem}
  .lang-badge img{width:1em;height:1em}
  .editor-tab{font-size:0.7rem;padding:0.5rem 0.8rem}
  
  .achievements-terminal{border-radius:10px}
  .achieve-body{padding:1rem;font-size:0.8rem}
  .terminal-line{font-size:0.75rem}
  .cert-row{font-size:0.7rem;gap:var(--stack-tight)}
  .cert-label{min-width:50px}
  .cert-value.title{font-size:1.15rem}
  .cert-tag{font-size:0.6rem;padding:0.15rem 0.5rem}
  
  .package-json,.git-log,.api-endpoint{border-radius:8px}
  .json-body,.api-body{font-size:0.75rem;padding:0.8rem;line-height:1.8}
  .json-line.indent{padding-left:1rem;gap:var(--space-2)}
  .projects-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .projects-grid > *{grid-column:span 4}
  .api-links{padding-left:var(--space-4);grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-3)}
  .api-links > .api-link{grid-column:span 4}
  .tool-badge{padding:0.35rem 0.7rem}
  .tool-badge img{width:1em;height:1em}
  .tool-badge span{font-size:0.7rem}
  .git-body{padding:0.8rem}
  .commit{padding-left:1rem}
  .commit-line{gap:var(--stack-tight)}
  .commit-line{padding-right:5.8rem}
  .commit-msg{font-size:1.15rem}
  .commit-hash{font-size:0.65rem}
  .commit-details p{font-size:0.75rem}
  .commit-stats .stat{font-size:0.65rem;padding:0.2rem 0.4rem}
  .api-link{min-width:160px;padding:var(--space-3) var(--space-4)}
  .api-link img{width:20px;height:20px;min-width:20px;min-height:20px;padding:var(--space-1)}
  .api-link .link-value{font-size:1.05rem}
  .api-header{gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .api-method{font-size:0.7rem;padding:0.3rem 0.6rem}
  .api-url{font-size:0.7rem}
  
  .concepts-terminal{border-radius:10px}
  .terminal-body{padding:1rem;font-size:0.8rem;line-height:1.7}
  .terminal-dots .dot{width:10px;height:10px}
  .line-num{min-width:2rem;font-size:0.7rem}
  
  .btn{padding:0.6rem 1.2rem;font-size:0.9rem}
  .resume-btn{padding:0.5rem 1rem;font-size:0.85rem}
  
  .site-footer{padding:2rem 0}
}

/* Small Phones (320px - 480px) */
@media (max-width:480px){
  html,body{padding-top:2.5rem}
  .container{padding:var(--space-3)}
  .site-header .container{padding:var(--space-2) var(--space-3)}
  .logo{font-size:0.9rem}
  .nav-toggle{padding:var(--space-2) var(--space-2);font-size:0.8rem}
  .nav ul{padding:var(--space-3)}
  .nav a{padding:var(--space-2) var(--space-3);font-size:0.85rem}
  
  .hero-left{padding:var(--space-4) var(--space-3)}
  .hero-right{padding:var(--space-4) var(--space-3)}
  .profile-card{padding:0;border-radius:10px}
  .profile-card-header{padding:var(--space-2) var(--space-3)}
  .profile-dots .dot{width:8px;height:8px}
  .profile-filename{font-size:0.7rem}
  .profile-code-name{font-size:0.65rem;margin-top:var(--space-2);padding:0 var(--space-3)}
  .profile-code-end{font-size:0.65rem;margin-bottom:var(--space-3)}
  .profile-image-container{width:150px;height:150px;border-width:2px;margin:var(--space-3) auto}
  .hero h1{font-size:1.2rem;letter-spacing:0}
  .job-title{font-size:0.8rem}
  .about-terminal{margin-top:var(--space-4);border-radius:8px}
  .about-terminal-header{padding:var(--space-2) var(--space-3)}
  .about-terminal-body{padding:var(--space-3);font-size:0.65rem;line-height:1.7}
  .about-terminal-body .json-line.indent{padding-left:var(--space-4)}
  .footer-terminal{font-size:0.65rem;padding:var(--space-2)}
  
  .section{padding:0;scroll-margin-top:var(--space-12)}
  .section h2{font-size:1.3rem;margin-bottom:var(--space-6)}
  
  .education-grid{gap:var(--space-4)}
  .education-card{padding:var(--space-6)}
  .education-card div[style*="display:flex"]{flex-direction:column;gap:var(--space-3);align-items:center;text-align:center}
  .edu-logo{width:50px;height:50px}
  .education-card p{font-size:0.85rem}
  
  .education-notepad{border-radius:6px}
  .notepad-header{padding:0.5rem 0.8rem}
  .notepad-tab{font-size:0.6rem;padding:0.4rem 0.6rem}
  .notepad-actions .action-dot{width:8px;height:8px}
  .notepad-content{padding:0.6rem}
  .edu-code-block .code-line{font-size:0.6rem;line-height:1.6;gap:var(--space-1)}
  .edu-code-block .code-line.indent{padding-left:1rem}
  .edu-inline-logo{width:16px;height:16px;margin-right:0.2rem;padding:1px}
  .status-badge{font-size:0.55rem;padding:0.1rem 0.35rem}
  
  .skills-orbit{gap:var(--space-3);padding:var(--space-4) 0}
  .skill-card{width:85px;height:105px;border-radius:12px}
  .skill-icon{width:36px;height:36px;border-radius:10px}
  .skill-icon img{width:24px;height:24px}
  .skill-label{font-size:0.75rem}
  .skill-level{font-size:0.6rem;padding:0.2rem 0.6rem}
  
  .code-editor{border-radius:8px}
  .editor-header{flex-wrap:wrap;gap:var(--space-2)}
  .editor-body{flex-direction:column;min-height:auto}
  .editor-sidebar{display:none}
  .editor-content{padding:0.8rem}
  .editor-content .code-line{font-size:0.65rem;line-height:1.7;gap:var(--space-1)}
  .editor-content .code-line::before{content:attr(data-line);color:#858585;min-width:1.5rem;font-size:0.6rem}
  .lang-badge{font-size:0.55rem;padding:0.15rem 0.4rem;margin-left:0;margin-top:0.2rem}
  .lang-badge img{width:1em;height:1em}
  .editor-tab{font-size:0.65rem;padding:0.4rem 0.6rem}
  .editor-actions .action-dot{width:8px;height:8px}
  
  .achievements-terminal{border-radius:8px}
  .achieve-header{padding:var(--space-2) var(--space-3);flex-wrap:wrap;gap:var(--space-2)}
  .achieve-tab{font-size:0.7rem;padding:0.3rem 0.8rem}
  .achieve-body{padding:0.8rem}
  .terminal-line{font-size:0.65rem;line-height:1.8}
  .cert-entry{padding:2.3rem 0.6rem 0.6rem;margin:0.8rem 0}
  .cert-entry::before{left:0.6rem;right:0.6rem;top:0.65rem;height:18px}
  .cert-content{padding-left:0.8rem}
  .cert-row{font-size:0.62rem;gap:var(--stack-tight);flex-wrap:wrap}
  .cert-label{min-width:45px}
  .cert-value.title{font-size:1.05rem}
  .cert-tag{font-size:0.55rem;padding:0.1rem 0.4rem}
  .status-text{font-size:0.65rem}
  .certifications-grid{gap:var(--space-4)}
  .cert-card{padding:1.2rem}
  .cert-header{margin-bottom:var(--space-3)}
  .cert-card h3{font-size:0.95rem}
  .cert-issuer{font-size:0.75rem}
  .cert-description{font-size:0.8rem;margin-bottom:var(--space-4)}
  .cert-badge{font-size:1.3rem}
  .cert-date{font-size:0.65rem;padding:0.2rem 0.6rem}
  .cert-skills{gap:var(--space-2)}
  .cert-skill{font-size:0.65rem;padding:0.15rem 0.4rem}
  .card-link{font-size:0.85rem}
  
  .package-json,.git-log,.api-endpoint{border-radius:8px}
  .json-header,.git-header,.api-header{padding:var(--space-2) var(--space-3)}
  .json-body,.git-body,.api-body{padding:var(--space-3);font-size:0.65rem;line-height:1.6}
  .json-line.indent{padding:var(--space-2) 0 var(--space-2) var(--space-4);gap:var(--space-2)}
  .tool-badge{padding:var(--space-1) var(--space-3);border-radius:6px}
  .tool-badge img{width:1em;height:1em}
  .tool-badge span{font-size:0.65rem}
  .commit{padding-left:var(--space-3);padding-bottom:var(--space-4);margin-left:var(--space-1);padding-top:var(--space-8)}
  .commit::after{left:var(--space-3);top:var(--space-2);height:16px}
  .commit-line{gap:var(--stack-tight);padding-right:5.4rem}
  .commit-msg{font-size:1.05rem}
  .commit-hash{font-size:0.6rem;padding:var(--space-1) var(--space-2)}
  .commit-tag{font-size:0.6rem;padding:var(--space-1) var(--space-2)}
  .commit-details{margin-top:var(--stack-tight)}
  .commit-details p{font-size:0.75rem}
  .commit-stats{gap:var(--space-2)}
  .commit-stats .stat{font-size:0.6rem;padding:var(--space-1) var(--space-2)}
  .api-links{padding:var(--space-3) 0 var(--space-3) var(--space-4);grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
  .api-links > .api-link{grid-column:span 4}
  .api-link{min-width:auto;padding:var(--space-3) var(--space-4)}
  .api-link img{width:20px;height:20px;min-width:20px;min-height:20px;padding:var(--space-1)}
  .api-link .link-label{font-size:0.6rem}
  .api-link .link-value{font-size:1rem}
  .api-method{font-size:0.65rem}
  .api-url{font-size:0.6rem}
  .api-status{font-size:0.6rem;padding:var(--space-1) var(--space-2)}
  
  .projects-grid{gap:var(--space-4)}
  .card{padding:var(--space-12) var(--space-4) var(--space-4);border-radius:10px}
  .card::after{left:var(--space-4);right:var(--space-4);top:var(--space-3);height:16px}
  .card h3{font-size:1.05rem;margin-bottom:var(--space-3)}
  .card p{font-size:0.85rem;line-height:1.6}
  .card ul{padding-left:var(--space-4);font-size:0.85rem}
  .card li{margin:var(--space-1) 0}
  
  .concepts-terminal{border-radius:8px}
  .terminal-header{padding:var(--space-3) var(--space-4)}
  .terminal-body{padding:var(--space-3);font-size:0.65rem;line-height:1.6}
  .terminal-title{font-size:0.7rem}
  .terminal-dots .dot{width:8px;height:8px}
  .line-num{min-width:var(--space-6);padding-right:var(--space-2);margin-right:var(--space-2);font-size:0.6rem}
  
  .contact-links{gap:var(--space-4);margin-top:var(--space-6)}
  .contact-link{width:50px;height:50px;border-width:1.5px}
  .contact-link img{width:1.8rem;height:1.8rem}
  
  .btn{padding:var(--space-2) var(--space-4);font-size:0.85rem;border-radius:6px}
  .resume-btn{padding:var(--space-1) var(--space-2);font-size:0.8rem}
  
  .section-divider{margin:var(--space-8) 0}
  .site-footer{padding:var(--space-6) 0;font-size:0.85rem}
}

/* Extra Small Phones (below 320px) */
@media (max-width:320px){
  html,body{padding-top:2rem}
  .container{padding:var(--space-2)}
  .site-header .container{padding:var(--space-2) var(--space-2)}
  .logo{font-size:0.8rem}
  .nav-toggle{padding:var(--space-1) var(--space-2);font-size:0.75rem}
  
  .profile-card{padding:var(--space-6) var(--space-4)}
  .profile-image-container{width:150px;height:150px}
  .hero h1{font-size:1.2rem}
  .job-title{font-size:0.8rem}
  .about-heading{font-size:1.1rem}
  .about-content{font-size:0.85rem}
  
  .section h2{font-size:1.1rem}
  
  .education-card{padding:var(--space-4)}
  .edu-logo{width:40px;height:40px}
  .education-card p{font-size:0.8rem}
  
  .skills-orbit{gap:var(--space-2)}
  .skill-card{width:75px;height:95px}
  .skill-icon{width:32px;height:32px}
  .skill-icon img{width:20px;height:20px}
  .skill-label{font-size:0.7rem}
  
  .cert-card{padding:1rem}
  .cert-card h3{font-size:0.85rem}
  .cert-description{font-size:0.75rem}
  
  .tools-grid{gap:var(--space-3)}
  .tool-circle{width:45px;height:45px}
  .tool-circle img{width:1.4rem;height:1.4rem}
  .tool-name{font-size:0.65rem}
  
  .card{padding:1rem}
  .card h3{font-size:0.9rem}
  .card p{font-size:0.8rem}
  
  .contact-link{width:45px;height:45px}
  .contact-link img{width:1.5rem;height:1.5rem}
  
  .terminal-body{font-size:0.55rem;padding:var(--space-2)}
  .terminal-header{padding:var(--space-2) var(--space-2);gap:var(--space-2)}
  .line-num{min-width:1.2rem;padding-right:0.4rem;margin-right:0.4rem}
}

/* Landscape Mode for Phones */
@media (max-height:500px) and (orientation:landscape){
  .hero-wrapper{flex-direction:row;height:auto;min-height:100vh}
  .hero-left{width:40%;height:auto;min-height:100vh;padding:1rem}
  .hero-right{width:60%;padding:1rem}
  .profile-image-container{width:120px;height:120px;margin:0 auto 0.8rem auto}
  .hero h1{font-size:1.2rem}
  .job-title{font-size:0.85rem}
  .profile-card{padding:1rem}
  .about-heading{margin-top:var(--space-6)}
}

/* Animations */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes floatX{0%{transform:translateX(-2%)}50%{transform:translateX(2%)}100%{transform:translateX(-2%)}}
@keyframes floatImage{0%{transform:translateY(0px)}50%{transform:translateY(-10px)}100%{transform:translateY(0px)}}
@keyframes pulseCard{0%{box-shadow:var(--shadow-float)}50%{box-shadow:var(--shadow-modal)}100%{box-shadow:var(--shadow-float)}}
.wave{animation:floatX 6s ease-in-out infinite}

/* Scrollbar Styling */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,217,255,0.3);border-radius:10px;transition:background 0.3s ease}
::-webkit-scrollbar-thumb:hover{background:rgba(0,217,255,0.6)}