/* I define a restrained corporate palette to keep the interface credible for U.S. IT hiring teams. */
    :root {
      color-scheme: dark;
      --background: #0b0f19;
      --background-deep: #000000;
      --surface: rgba(23, 32, 51, 0.82);
      --surface-solid: #172033;
      --surface-raised: #1e293b;
      --surface-muted: rgba(30, 41, 59, 0.58);
      --border: rgba(203, 213, 225, 0.14);
      --border-strong: rgba(148, 163, 184, 0.30);
      --text: #f8fafc;
      --text-soft: #d5dce5;
      --muted: #94a3b8;
      --muted-dark: #64748b;
      --cyan: #0ea5e9;
      --cyan-light: #7dd3fc;
      --cyan-soft: rgba(14, 165, 233, 0.12);
      --silver: #cbd5e1;
      --steel: #64748b;
      --success: #38bdf8;
      --danger: #f87171;
      --shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
      --radius-small: 12px;
      --radius-medium: 18px;
      --radius-large: 28px;
      --content-width: 1180px;
      --header-height: 126px;
      --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: clip;
      background: var(--background);
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      overflow-x: clip;
      background:
        radial-gradient(circle at 14% 10%, rgba(14, 165, 233, 0.07), transparent 28rem),
        radial-gradient(circle at 86% 26%, rgba(148, 163, 184, 0.06), transparent 32rem),
        linear-gradient(180deg, #0b0f19 0%, #0a101b 48%, #070a11 100%);
      color: var(--text);
      font-family: var(--font-sans);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.no-scroll {
      overflow: hidden;
    }

    button,
    input,
    a {
      font: inherit;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    button {
      color: inherit;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img,
    canvas {
      display: block;
      max-width: 100%;
    }

    ::selection {
      background: rgba(14, 165, 233, 0.30);
      color: #ffffff;
    }

    :focus-visible {
      outline: 2px solid var(--cyan-light);
      outline-offset: 4px;
    }

    [hidden] {
      display: none !important;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 9999;
      padding: 10px 14px;
      border: 1px solid var(--cyan);
      border-radius: 10px;
      background: var(--surface-solid);
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.76rem;
      transform: translateY(-160%);
      transition: transform 180ms ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /* I keep the data network deliberately subtle so it supports the content instead of competing with it. */
    #networkCanvas {
      position: fixed;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      opacity: 0.72;
      pointer-events: none;
    }

    .star-field {
      --star-x: 0px;
      --star-y: 0px;
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.5px),
        radial-gradient(circle at 22% 76%, rgba(203, 213, 225, 0.50) 0 1px, transparent 1.4px),
        radial-gradient(circle at 68% 14%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.3px),
        radial-gradient(circle at 88% 62%, rgba(148, 163, 184, 0.55) 0 1px, transparent 1.4px),
        radial-gradient(circle at 45% 42%, rgba(255, 255, 255, 0.32) 0 1px, transparent 1.2px);
      background-size: 390px 390px, 520px 520px, 470px 470px, 610px 610px, 340px 340px;
      opacity: 0.30;
      transform: translate3d(var(--star-x), var(--star-y), 0) scale(1.02);
      transform-origin: center;
      will-change: transform;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(203, 213, 225, 0.10);
      background: rgba(11, 15, 25, 0.78);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(20px) saturate(125%);
      -webkit-backdrop-filter: blur(20px) saturate(125%);
    }

    .header-inner {
      width: min(calc(100% - 40px), var(--content-width));
      margin: 0 auto;
      padding: 15px 0 11px;
    }

    .header-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark {
      display: block;
      width: 76px;
      height: 42px;
      flex: 0 0 auto;
      overflow: hidden;
    }

    .brand-logo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      transform: scale(1.42);
      transform-origin: center;
    }

    .brand-copy {
      display: grid;
      line-height: 1.16;
    }

    .brand-name {
      overflow: hidden;
      color: var(--text);
      font-size: 0.94rem;
      font-weight: 720;
      letter-spacing: -0.01em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand-role {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .header-tools {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .system-status {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      padding: 8px 12px;
      border: 1px solid rgba(125, 211, 252, 0.24);
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.76);
      color: var(--silver);
      font-family: var(--font-mono);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.055em;
      white-space: nowrap;
    }

    .status-dot {
      position: relative;
      color: var(--cyan-light);
      font-size: 0.78rem;
      line-height: 1;
      text-shadow: 0 0 12px rgba(14, 165, 233, 0.85);
    }

    .status-dot::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 15px;
      border: 1px solid rgba(125, 211, 252, 0.50);
      border-radius: 50%;
      content: "";
      transform: translate(-50%, -50%);
      animation: statusPulse 1.9s ease-out infinite;
    }

    @keyframes statusPulse {
      0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.38); }
      72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-muted);
      cursor: pointer;
    }

    .menu-toggle span {
      display: block;
      width: 18px;
      height: 1px;
      margin: 5px auto;
      background: var(--text);
      transition: transform 180ms ease, opacity 180ms ease;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    /* I use a two-tab navigation model to keep the hiring narrative focused and easy to scan. */
    .tab-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
    }

    .tab-button {
      position: relative;
      min-height: 38px;
      padding: 8px 13px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.67rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-align: left;
      text-transform: uppercase;
      transition: color 180ms ease, background 180ms ease;
    }

    .tab-button::before {
      margin-right: 8px;
      color: var(--muted-dark);
      content: attr(data-index);
    }

    .tab-button:hover {
      background: rgba(255, 255, 255, 0.035);
      color: var(--text);
    }

    .tab-button[aria-selected="true"] {
      background: var(--cyan-soft);
      color: var(--cyan-light);
    }

    .tab-button[aria-selected="true"]::after {
      position: absolute;
      right: 12px;
      bottom: -12px;
      left: 12px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      box-shadow: 0 0 12px rgba(14, 165, 233, 0.75);
      content: "";
    }

    .main-content,
    .site-footer {
      position: relative;
      z-index: 1;
    }

    .tab-panel {
      animation: panelIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes panelIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .section-shell {
      width: min(calc(100% - 40px), var(--content-width));
      margin: 0 auto;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
      align-items: center;
      gap: clamp(42px, 6vw, 88px);
      min-height: calc(100vh - var(--header-height));
      padding-top: clamp(58px, 8vw, 102px);
      padding-bottom: clamp(72px, 9vw, 118px);
    }

    .hero-copy {
      min-width: 0;
    }

    .eyebrow,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .eyebrow::before,
    .section-kicker::before {
      width: 27px;
      height: 1px;
      background: currentColor;
      box-shadow: 0 0 10px currentColor;
      content: "";
    }

    .hero h1 {
      max-width: 760px;
      min-height: 1.04em;
      margin: 0;
      color: #ffffff;
      font-size: clamp(3.15rem, 7.6vw, 6.7rem);
      font-weight: 760;
      letter-spacing: -0.075em;
      line-height: 0.92;
      text-wrap: balance;
    }

    .hero-name-word {
      display: inline-block;
      white-space: nowrap;
    }

    .hero-name-char {
      display: inline-block;
      opacity: 0;
      transform: translateY(10px);
      animation: hero-name-reveal 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      animation-delay: calc(100ms + (var(--char-index) * 32ms));
    }

    @keyframes hero-name-reveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-title {
      max-width: 720px;
      margin: 25px 0 0;
      color: var(--text-soft);
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      font-weight: 510;
      letter-spacing: -0.025em;
      line-height: 1.5;
    }

    .hero-title strong {
      color: var(--text);
      font-weight: 650;
    }

    .location-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px 15px;
      margin: 19px 0 0;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.74rem;
    }

    .location-line span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .availability {
      color: var(--cyan-light);
    }

    .availability::before {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 9px currentColor;
      content: "";
    }

    .hero-summary {
      max-width: 690px;
      margin: 24px 0 0;
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.8;
    }

    .hero-actions,
    .footer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
      margin-top: 30px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 11px 17px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface-muted);
      color: var(--text-soft);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.70rem;
      font-weight: 700;
      letter-spacing: 0.035em;
      translate: 0 0;
      transition: border-color 180ms ease, background 180ms ease, color 180ms ease, translate 180ms ease, box-shadow 180ms ease;
    }

    .button:hover,
    .button:focus-visible {
      border-color: rgba(125, 211, 252, 0.38);
      box-shadow: 0 12px 30px rgba(14, 165, 233, 0.16), 0 0 20px rgba(125, 211, 252, 0.10);
      color: var(--text);
      translate: 0 -2px;
    }

    .button-primary {
      border-color: rgba(14, 165, 233, 0.44);
      background: var(--cyan);
      box-shadow: 0 12px 32px rgba(14, 165, 233, 0.16);
      color: #031018;
    }

    .button-primary:hover,
    .button-primary:focus-visible {
      background: #38bdf8;
      color: #031018;
      box-shadow: 0 14px 38px rgba(14, 165, 233, 0.28), 0 0 22px rgba(125, 211, 252, 0.16);
    }

    .button-icon {
      color: currentColor;
      font-size: 0.88rem;
    }

    .hero-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      margin: 34px 0 0;
      padding: 0;
      list-style: none;
    }

    .hero-metrics li {
      min-width: 128px;
      padding: 0 22px;
      border-left: 1px solid var(--border);
    }

    .hero-metrics li:first-child {
      padding-left: 0;
      border-left: 0;
    }

    .metric-value {
      display: block;
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 1.01rem;
      font-weight: 700;
    }

    .metric-label {
      display: block;
      margin-top: 2px;
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    /* I construct the black hole from layered CSS rings so the visual remains fast, scalable, and dependency-free. */
    .black-hole-stage {
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      position: relative;
      display: grid;
      min-height: 500px;
      place-items: center;
      isolation: isolate;
      perspective: 1000px;
    }

    .black-hole-stage::before {
      position: absolute;
      width: min(480px, 100%);
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 0 1px, transparent 1.5px) 15% 22% / 92px 92px,
        radial-gradient(circle, rgba(203, 213, 225, 0.05) 0 1px, transparent 1.4px) 84% 68% / 131px 131px,
        radial-gradient(circle, transparent 48%, rgba(148, 163, 184, 0.04) 49%, transparent 50%),
        radial-gradient(circle, rgba(255, 255, 255, 0.025), transparent 68%);
      content: "";
      filter: blur(0.2px);
    }

    .black-hole {
      position: relative;
      display: grid;
      width: 440px;
      height: 440px;
      place-items: center;
      transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      transform-style: preserve-3d;
      transition: transform 180ms ease-out;
    }

    .gravity-grid,
    .einstein-ring,
    .photon-ring,
    .accretion-flow,
    .lensing-arc,
    .event-horizon {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .gravity-grid {
      inset: 2px;
      border: 1px solid rgba(148, 163, 184, 0.06);
      background: repeating-radial-gradient(
        circle,
        transparent 0 34px,
        rgba(148, 163, 184, 0.035) 35px 36px
      );
      transform: rotateX(68deg);
    }

    .einstein-ring {
      background: conic-gradient(
        from 18deg,
        transparent 0deg,
        rgba(100, 116, 139, 0.18) 24deg,
        rgba(241, 245, 249, 0.84) 53deg,
        rgba(148, 163, 184, 0.28) 88deg,
        transparent 126deg,
        rgba(226, 232, 240, 0.12) 166deg,
        rgba(255, 255, 255, 0.74) 211deg,
        rgba(100, 116, 139, 0.24) 264deg,
        transparent 318deg
      );
      filter: blur(0.55px);
      -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49.5% 52%, transparent 53.5%);
      mask: radial-gradient(circle, transparent 0 48%, #000 49.5% 52%, transparent 53.5%);
    }

    .einstein-ring-outer {
      inset: 11px;
      opacity: 0.55;
      animation: ringSpin 22s linear infinite;
    }

    .einstein-ring-middle {
      inset: 43px;
      opacity: 0.78;
      filter: blur(0.35px) drop-shadow(0 0 7px rgba(226, 232, 240, 0.24));
      animation: ringSpinReverse 14s linear infinite;
    }

    .einstein-ring-inner {
      inset: 71px;
      opacity: 0.92;
      filter: blur(0.25px) drop-shadow(0 0 9px rgba(255, 255, 255, 0.22));
      animation: ringSpin 9s linear infinite;
    }

    .photon-ring {
      width: 272px;
      height: 272px;
      border: 1px solid rgba(255, 255, 255, 0.48);
      box-shadow:
        0 0 6px rgba(255, 255, 255, 0.30),
        0 0 18px rgba(203, 213, 225, 0.20),
        inset 0 0 13px rgba(255, 255, 255, 0.08);
      opacity: 0.72;
    }

    .accretion-flow {
      width: 412px;
      height: 138px;
      background: conic-gradient(
        from 90deg,
        transparent 0deg,
        rgba(71, 85, 105, 0.20) 36deg,
        rgba(241, 245, 249, 0.90) 72deg,
        rgba(100, 116, 139, 0.38) 126deg,
        transparent 170deg,
        rgba(203, 213, 225, 0.20) 225deg,
        rgba(255, 255, 255, 0.82) 286deg,
        transparent 346deg
      );
      box-shadow:
        0 0 16px rgba(226, 232, 240, 0.18),
        0 0 45px rgba(148, 163, 184, 0.10);
      filter: blur(1px);
      transform: rotate(-7deg);
      animation: diskDrift 11s linear infinite;
      -webkit-mask: radial-gradient(ellipse at center, transparent 0 35%, #000 40% 60%, transparent 68%);
      mask: radial-gradient(ellipse at center, transparent 0 35%, #000 40% 60%, transparent 68%);
    }

    .accretion-flow-secondary {
      width: 382px;
      height: 110px;
      opacity: 0.44;
      filter: blur(2px);
      transform: rotate(10deg);
      animation: diskDriftReverse 16s linear infinite;
    }

    .lensing-arc {
      width: 322px;
      height: 322px;
      border-top: 4px solid rgba(255, 255, 255, 0.76);
      border-right: 2px solid rgba(148, 163, 184, 0.16);
      border-bottom: 4px solid rgba(226, 232, 240, 0.50);
      border-left: 2px solid rgba(100, 116, 139, 0.12);
      box-shadow:
        0 -3px 13px rgba(255, 255, 255, 0.13),
        0 4px 15px rgba(203, 213, 225, 0.11);
      opacity: 0.64;
      animation: lensPrecession 17s linear infinite;
    }

    .event-horizon {
      z-index: 4;
      width: 248px;
      height: 248px;
      border: 1px solid rgba(148, 163, 184, 0.20);
      background:
        radial-gradient(circle at 46% 40%, #080b10 0%, #020305 45%, #000000 76%);
      box-shadow:
        inset 0 0 38px rgba(0, 0, 0, 0.98),
        0 0 0 7px rgba(0, 0, 0, 0.78),
        0 0 22px rgba(203, 213, 225, 0.15),
        0 0 55px rgba(0, 0, 0, 0.78);
    }

    .event-horizon::before {
      position: absolute;
      inset: 13px;
      border: 1px solid rgba(203, 213, 225, 0.08);
      border-radius: inherit;
      content: "";
    }

    .photo-frame {
      position: relative;
      z-index: 8;
      display: grid;
      width: 150px;
      height: 150px;
      place-items: center;
      overflow: hidden;
      border: 2px solid rgba(226, 232, 240, 0.70);
      border-radius: 50%;
      background:
        radial-gradient(circle at 45% 35%, #334155, #0f172a 68%),
        #0f172a;
      box-shadow:
        0 0 0 6px rgba(0, 0, 0, 0.78),
        0 0 22px rgba(226, 232, 240, 0.18);
      transform: translateZ(26px);
    }

    .photo-fallback {
      position: absolute;
      color: rgba(226, 232, 240, 0.78);
      font-family: var(--font-mono);
      font-size: 2.65rem;
      font-weight: 800;
      letter-spacing: -0.11em;
      transform: translateX(-0.06em);
    }

    .profile-photo {
      position: relative;
      z-index: 2;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center;
    }

    .black-hole-label {
      position: absolute;
      z-index: 10;
      bottom: 16px;
      left: 50%;
      padding: 7px 10px;
      border: 1px solid rgba(148, 163, 184, 0.20);
      border-radius: 999px;
      background: rgba(3, 6, 12, 0.84);
      color: var(--silver);
      font-family: var(--font-mono);
      font-size: 0.56rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      white-space: nowrap;
      transform: translateX(-50%);
      backdrop-filter: blur(10px);
    }

    .telemetry-label {
      position: absolute;
      z-index: 9;
      padding: 6px 9px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: 8px;
      background: rgba(11, 15, 25, 0.82);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.54rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .telemetry-label::before {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin-right: 7px;
      border-radius: 50%;
      background: var(--silver);
      box-shadow: 0 0 7px rgba(226, 232, 240, 0.60);
      content: "";
      vertical-align: middle;
    }

    .telemetry-top {
      top: 58px;
      right: 0;
    }

    .telemetry-left {
      bottom: 88px;
      left: 0;
    }

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

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

    @keyframes diskDrift {
      to { transform: rotate(353deg); }
    }

    @keyframes diskDriftReverse {
      to { transform: rotate(-350deg); }
    }

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

    .content-section {
      padding: clamp(76px, 9vw, 118px) 0;
      border-top: 1px solid rgba(203, 213, 225, 0.08);
    }

    .section-heading-row {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 40px;
    }

    .section-heading {
      max-width: 760px;
    }

    .section-heading h2 {
      margin: 0;
      color: var(--text);
      font-size: clamp(2rem, 4vw, 3.45rem);
      font-weight: 720;
      letter-spacing: -0.055em;
      line-height: 1.08;
      text-wrap: balance;
    }

    .section-heading p:not(.section-kicker) {
      max-width: 650px;
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.75;
    }

    .section-code {
      flex: 0 0 auto;
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .section-code::before {
      color: var(--cyan);
      content: "[ ";
    }

    .section-code::after {
      color: var(--cyan);
      content: " ]";
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
    }

    .skill-card {
      grid-column: span 4;
      min-height: 210px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius-medium);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 58%),
        var(--surface);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
      translate: 0 0;
      transition: border-color 220ms ease, translate 220ms ease, background 220ms ease, box-shadow 220ms ease;
      backdrop-filter: blur(10px);
    }

    .skill-card:nth-child(1),
    .skill-card:nth-child(5) {
      grid-column: span 5;
    }

    .skill-card:nth-child(2),
    .skill-card:nth-child(6) {
      grid-column: span 4;
    }

    .skill-card:nth-child(3),
    .skill-card:nth-child(7) {
      grid-column: span 3;
    }

    .skill-card:nth-child(4) {
      grid-column: span 12;
      min-height: 180px;
    }

    .skill-card:hover,
    .skill-card:focus-visible {
      border-color: rgba(125, 211, 252, 0.30);
      background:
        linear-gradient(145deg, rgba(14, 165, 233, 0.055), transparent 62%),
        rgba(23, 32, 51, 0.94);
      box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 18px 38px rgba(0, 0, 0, 0.28), 0 0 24px rgba(14, 165, 233, 0.14);
      translate: 0 -4px;
    }

    .skill-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .skill-icon {
      display: grid;
      width: 39px;
      height: 39px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid rgba(125, 211, 252, 0.18);
      border-radius: 10px;
      background: var(--cyan-soft);
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 800;
    }

    .skill-level {
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.57rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .skill-card h3 {
      margin: 30px 0 8px;
      color: var(--text);
      font-size: 0.98rem;
      font-weight: 650;
      letter-spacing: -0.02em;
      line-height: 1.4;
    }

    .skill-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.79rem;
      line-height: 1.65;
    }

    .skill-meter {
      position: relative;
      height: 3px;
      margin-top: 23px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
    }

    .skill-meter span {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--level);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--silver));
      box-shadow: 0 0 12px rgba(14, 165, 233, 0.40);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
    }

    .skill-meter-level-78 {
      --level: 78%;
    }

    .skill-meter-level-80 {
      --level: 80%;
    }

    .skill-meter-level-82 {
      --level: 82%;
    }

    .skill-meter-level-60 {
      --level: 60%;
    }

    .skill-meter-level-90 {
      --level: 90%;
    }

    .skill-meter-level-92 {
      --level: 92%;
    }

    .skill-meter-level-94 {
      --level: 94%;
    }

    .skill-card.is-visible .skill-meter span {
      transform: scaleX(1);
    }

    .trajectory-hero {
      padding-top: clamp(76px, 9vw, 112px);
      padding-bottom: 54px;
    }

    .cert-featured-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
      margin-top: 38px;
    }

    .featured-cert {
      position: relative;
      min-height: 255px;
      padding: 25px;
      overflow: hidden;
      border: 1px solid rgba(125, 211, 252, 0.20);
      border-radius: var(--radius-medium);
      background:
        linear-gradient(155deg, rgba(14, 165, 233, 0.075), transparent 52%),
        rgba(23, 32, 51, 0.82);
      translate: 0 0;
      transition: border-color 220ms ease, translate 220ms ease, box-shadow 220ms ease;
    }

    .featured-cert:hover,
    .featured-cert:focus-visible,
    .featured-cert:focus-within {
      border-color: rgba(125, 211, 252, 0.38);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), 0 0 26px rgba(14, 165, 233, 0.15);
      translate: 0 -3px;
    }

    .featured-cert::after {
      position: absolute;
      right: -45px;
      bottom: -45px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(203, 213, 225, 0.08);
      border-radius: 50%;
      box-shadow: 0 0 0 22px rgba(203, 213, 225, 0.025), 0 0 0 44px rgba(203, 213, 225, 0.016);
      content: "";
    }

    .featured-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 9px;
      border: 1px solid rgba(125, 211, 252, 0.22);
      border-radius: 999px;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .featured-status::before {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 9px currentColor;
      content: "";
    }

    .featured-cert h3 {
      position: relative;
      z-index: 1;
      max-width: 290px;
      margin: 50px 0 11px;
      color: var(--text);
      font-size: 1.1rem;
      font-weight: 650;
      letter-spacing: -0.025em;
      line-height: 1.36;
    }

    .featured-cert p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      font-size: 0.75rem;
    }

    .featured-cert-primary {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 32px;
      min-height: 310px;
      padding: clamp(28px, 4vw, 42px);
      border-color: rgba(125, 211, 252, 0.42);
      background:
        radial-gradient(circle at 88% 22%, rgba(125, 211, 252, 0.13), transparent 24%),
        linear-gradient(145deg, rgba(14, 165, 233, 0.13), transparent 58%),
        rgba(23, 32, 51, 0.92);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.26), 0 0 34px rgba(14, 165, 233, 0.10);
    }

    .featured-cert-primary h3 {
      max-width: 760px;
      margin-top: 42px;
      font-size: clamp(1.45rem, 3.2vw, 2.25rem);
      line-height: 1.18;
    }

    .featured-cert-primary p {
      max-width: 700px;
      font-size: 0.82rem;
      line-height: 1.7;
    }

    .featured-cert-copy {
      position: relative;
      z-index: 1;
    }

    .featured-cert-primary:hover,
    .featured-cert-primary:focus-within {
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), 0 0 42px rgba(14, 165, 233, 0.18);
    }

    .featured-priority {
      position: relative;
      z-index: 1;
      align-self: start;
      padding: 9px 12px;
      border: 1px solid rgba(125, 211, 252, 0.28);
      border-radius: 999px;
      background: rgba(14, 165, 233, 0.10);
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.57rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .credential-link {
      color: inherit;
      text-decoration: underline;
      text-decoration-color: rgba(125, 211, 252, 0.34);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.20em;
      transition: color 180ms ease, text-decoration-color 180ms ease;
    }

    .credential-link:hover,
    .credential-link:focus-visible {
      color: var(--cyan-light);
      text-decoration-color: currentColor;
    }

    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 26px;
    }

    .filter-button {
      min-height: 40px;
      padding: 8px 13px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(23, 32, 51, 0.72);
      color: var(--muted);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .filter-button:hover {
      border-color: rgba(125, 211, 252, 0.34);
      color: var(--text);
      transform: translateY(-1px);
    }

    .filter-button.is-active {
      border-color: rgba(14, 165, 233, 0.42);
      background: var(--cyan-soft);
      color: var(--cyan-light);
    }

    .filter-count {
      margin-left: auto;
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.61rem;
      letter-spacing: 0.05em;
    }

    .cert-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px;
    }

    .cert-card {
      position: relative;
      min-height: 190px;
      padding: 22px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-medium);
      background: var(--surface);
      opacity: 1;
      scale: 1;
      translate: 0 0;
      transition: border-color 200ms ease, translate 200ms ease, scale 230ms ease, opacity 230ms ease, box-shadow 200ms ease;
    }

    .cert-card::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 56px;
      height: 56px;
      border-bottom: 1px solid rgba(125, 211, 252, 0.08);
      border-left: 1px solid rgba(125, 211, 252, 0.08);
      background: linear-gradient(135deg, transparent 48%, rgba(125, 211, 252, 0.035) 49%);
      content: "";
    }

    .cert-card:hover,
    .cert-card:focus-visible,
    .cert-card:focus-within {
      border-color: rgba(125, 211, 252, 0.30);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26), 0 0 22px rgba(125, 211, 252, 0.12);
      translate: 0 -3px;
    }

    .cert-category {
      display: inline-block;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.56rem;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

    .cert-card[data-category="networking"] .cert-category {
      color: var(--silver);
    }

    .cert-card[data-category="data"] .cert-category {
      color: #67e8f9;
    }

    .cert-card[data-category="development"] .cert-category {
      color: #a5b4fc;
    }

    .cert-card[data-category="professional"] .cert-category {
      color: #c4b5fd;
    }

    .cert-card h3 {
      max-width: 270px;
      margin: 30px 0 14px;
      color: var(--text);
      font-size: 0.95rem;
      font-weight: 640;
      letter-spacing: -0.02em;
      line-height: 1.4;
    }

    .cert-meta {
      position: absolute;
      right: 22px;
      bottom: 20px;
      left: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.56rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .cert-check {
      color: var(--cyan-light);
    }

    .timeline {
      --timeline-progress: 1;
      position: relative;
      max-width: 920px;
      margin: 0 auto;
      padding: 5px 0;
    }

    .timeline::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 187px;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(14, 165, 233, 0.28) 10%, rgba(148, 163, 184, 0.20) 88%, transparent);
      content: "";
      transform: scaleY(1);
      transform-origin: top;
    }

    .timeline.is-scroll-animated::before {
      transform: scaleY(var(--timeline-progress));
      will-change: transform;
    }

    .timeline-item {
      position: relative;
      display: grid;
      grid-template-columns: 155px 1fr;
      gap: 65px;
      padding: 0 0 54px;
    }

    .timeline-item:last-child {
      padding-bottom: 0;
    }

    .timeline-date {
      padding-top: 5px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      text-align: right;
    }

    .timeline-dot {
      position: absolute;
      top: 7px;
      left: 181px;
      width: 13px;
      height: 13px;
      border: 3px solid var(--background);
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.42), 0 0 17px rgba(14, 165, 233, 0.44);
      scale: 1;
      transform-origin: center;
    }

    .timeline.is-scroll-animated .timeline-dot {
      opacity: 0;
      scale: 0.55;
      transition: opacity 220ms ease, scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .timeline.is-scroll-animated .timeline-item.is-timeline-reached .timeline-dot {
      opacity: 1;
      scale: 1;
    }

    .timeline-item:nth-child(even) .timeline-dot {
      background: var(--silver);
      box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.32), 0 0 15px rgba(203, 213, 225, 0.22);
    }

    .timeline-type {
      margin: 0 0 8px;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.59rem;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .timeline-item:nth-child(even) .timeline-type {
      color: var(--silver);
    }

    .timeline-content h3 {
      margin: 0;
      color: var(--text);
      font-size: 1.08rem;
      font-weight: 650;
      letter-spacing: -0.025em;
    }

    .timeline-company {
      display: block;
      margin-top: 3px;
      color: var(--text-soft);
      font-size: 0.81rem;
    }

    .timeline-content p:last-child {
      max-width: 650px;
      margin: 13px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.7;
    }

    .contact-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 34px;
      padding: clamp(28px, 5vw, 52px);
      overflow: hidden;
      border: 1px solid rgba(125, 211, 252, 0.26);
      border-radius: var(--radius-large);
      background:
        radial-gradient(circle at 92% 20%, rgba(203, 213, 225, 0.07), transparent 19rem),
        radial-gradient(circle at 8% 100%, rgba(14, 165, 233, 0.08), transparent 20rem),
        rgba(23, 32, 51, 0.88);
      box-shadow: var(--shadow);
    }

    .contact-panel::before {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(125, 211, 252, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.025) 1px, transparent 1px);
      background-size: 28px 28px;
      content: "";
      mask-image: linear-gradient(90deg, #000, transparent 68%);
      pointer-events: none;
    }

    .contact-copy,
    .contact-action {
      position: relative;
      z-index: 1;
    }

    .contact-label {
      margin: 0 0 13px;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.64rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .contact-panel h2 {
      max-width: 680px;
      margin: 0;
      color: var(--text);
      font-size: clamp(1.9rem, 4vw, 3.3rem);
      font-weight: 700;
      letter-spacing: -0.055em;
      line-height: 1.12;
    }

    .contact-panel p:last-child {
      max-width: 650px;
      margin: 15px 0 0;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .contact-email {
      display: block;
      max-width: 380px;
      padding: 14px 17px;
      border: 1px solid rgba(125, 211, 252, 0.28);
      border-radius: 12px;
      background: var(--cyan-soft);
      color: var(--cyan-light);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      overflow-wrap: anywhere;
      transition: background 180ms ease, transform 180ms ease;
    }

    .contact-email:hover {
      background: rgba(14, 165, 233, 0.18);
      transform: translateY(-2px);
    }

    .site-footer {
      padding: 24px 0 34px;
      border-top: 1px solid rgba(203, 213, 225, 0.08);
      background: rgba(3, 6, 12, 0.52);
    }

    .footer-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      width: min(calc(100% - 40px), var(--content-width));
      margin: 0 auto;
    }

    .footer-identity {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .footer-identity p {
      margin: 0;
    }

    .footer-name {
      color: var(--text-soft);
      font-size: 0.81rem;
      font-weight: 650;
    }

    .footer-meta {
      color: var(--muted-dark);
      font-family: var(--font-mono);
      font-size: 0.57rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .footer-actions {
      align-items: center;
      justify-content: flex-end;
      margin: 0;
    }

    .footer-link,
    .audit-badge {
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.60rem;
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .footer-link:hover,
    .audit-badge:hover {
      border-color: rgba(125, 211, 252, 0.30);
      background: var(--cyan-soft);
      color: var(--cyan-light);
    }

    .terminal-launcher {
      position: fixed;
      right: max(20px, env(safe-area-inset-right));
      bottom: max(20px, env(safe-area-inset-bottom));
      z-index: 210;
      display: grid;
      width: 52px;
      height: 52px;
      padding: 0;
      place-items: center;
      border: 1px solid rgba(125, 211, 252, 0.40);
      border-radius: 15px;
      background: rgba(15, 23, 42, 0.92);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42), inset 0 0 18px rgba(14, 165, 233, 0.05);
      color: var(--cyan-light);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 1rem;
      font-weight: 800;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      backdrop-filter: blur(12px);
    }

    .terminal-launcher:hover {
      background: rgba(14, 165, 233, 0.12);
      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48), 0 0 25px rgba(14, 165, 233, 0.16);
      transform: translateY(-3px);
    }

    .terminal-window {
      position: fixed;
      right: max(20px, env(safe-area-inset-right));
      bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
      z-index: 205;
      width: min(470px, calc(100vw - 40px));
      overflow: hidden;
      border: 1px solid rgba(125, 211, 252, 0.30);
      border-radius: 16px;
      background: rgba(7, 12, 22, 0.97);
      box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62), 0 0 38px rgba(14, 165, 233, 0.07);
      opacity: 0;
      transform: translateY(16px) scale(0.98);
      transform-origin: bottom right;
      transition: opacity 180ms ease, transform 180ms ease;
      backdrop-filter: blur(20px);
    }

    .terminal-window.is-open {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .terminal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 42px;
      padding: 8px 11px 8px 14px;
      border-bottom: 1px solid rgba(125, 211, 252, 0.14);
      background: rgba(14, 165, 233, 0.045);
    }

    .terminal-dots {
      display: flex;
      gap: 6px;
    }

    .terminal-dots i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #94a3b8;
    }

    .terminal-dots i:nth-child(2) { background: #cbd5e1; }
    .terminal-dots i:nth-child(3) { background: #38bdf8; }

    .terminal-title {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.06em;
    }

    .terminal-close {
      display: grid;
      width: 28px;
      height: 28px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
    }

    .terminal-close:hover {
      background: rgba(255, 255, 255, 0.04);
      color: #ffffff;
    }

    .terminal-body {
      height: 292px;
      padding: 17px;
      overflow-y: auto;
      color: var(--silver);
      font-family: var(--font-mono);
      font-size: 0.69rem;
      line-height: 1.65;
      scrollbar-color: rgba(14, 165, 233, 0.28) transparent;
    }

    .terminal-line {
      margin: 0 0 5px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .terminal-line.command {
      color: var(--cyan-light);
    }

    .terminal-line.error {
      color: var(--danger);
    }

    .terminal-line.info {
      color: #e2e8f0;
    }

    .terminal-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 16px 14px;
      border-top: 1px solid rgba(125, 211, 252, 0.12);
    }

    .terminal-prompt {
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.71rem;
      font-weight: 800;
    }

    .terminal-input {
      min-width: 0;
      flex: 1;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      caret-color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.71rem;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: grid;
      padding: 20px;
      place-items: center;
      background: rgba(0, 0, 0, 0.78);
      opacity: 0;
      transition: opacity 180ms ease;
      backdrop-filter: blur(12px);
    }

    .modal-backdrop.is-open {
      opacity: 1;
    }

    .audit-modal {
      width: min(520px, 100%);
      padding: 27px;
      border: 1px solid rgba(125, 211, 252, 0.28);
      border-radius: 20px;
      background:
        linear-gradient(145deg, rgba(14, 165, 233, 0.06), transparent 44%),
        #111827;
      box-shadow: 0 34px 100px rgba(0, 0, 0, 0.70), 0 0 50px rgba(14, 165, 233, 0.07);
      opacity: 0;
      transform: translateY(12px) scale(0.98);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .modal-backdrop.is-open .audit-modal {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .modal-kicker {
      margin: 0 0 8px;
      color: var(--cyan-light);
      font-family: var(--font-mono);
      font-size: 0.61rem;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .audit-modal h2 {
      margin: 0;
      color: var(--text);
      font-size: 1.45rem;
      letter-spacing: -0.035em;
    }

    .modal-close {
      display: grid;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      padding: 0;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--muted);
      cursor: pointer;
    }

    .modal-close:hover {
      border-color: rgba(125, 211, 252, 0.28);
      color: #ffffff;
    }

    .audit-list {
      display: grid;
      gap: 10px;
      margin: 24px 0 20px;
      padding: 0;
      list-style: none;
    }

    .audit-list li {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 13px;
      border: 1px solid rgba(125, 211, 252, 0.13);
      border-radius: 11px;
      background: rgba(14, 165, 233, 0.035);
      color: var(--text-soft);
      font-family: var(--font-mono);
      font-size: 0.72rem;
    }

    .audit-check {
      color: var(--cyan-light);
      font-weight: 900;
    }

    .audit-note {
      margin: 0;
      color: var(--muted);
      font-size: 0.70rem;
      line-height: 1.6;
    }

    .toast-region {
      position: fixed;
      top: max(18px, env(safe-area-inset-top));
      right: max(18px, env(safe-area-inset-right));
      z-index: 500;
      display: grid;
      width: min(390px, calc(100vw - 36px));
      gap: 9px;
      pointer-events: none;
    }

    .toast {
      padding: 12px 14px;
      border: 1px solid rgba(125, 211, 252, 0.25);
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.96);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
      color: var(--text-soft);
      font-family: var(--font-mono);
      font-size: 0.66rem;
      line-height: 1.5;
      opacity: 0;
      transform: translateX(18px);
      transition: opacity 180ms ease, transform 180ms ease;
      backdrop-filter: blur(16px);
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 620ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        translate 220ms ease,
        scale 230ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .cert-card.is-filter-transitioning {
      transition:
        opacity 230ms ease,
        scale 230ms ease,
        translate 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
    }

    .cert-card.is-filter-hidden {
      opacity: 0;
      pointer-events: none;
      scale: 0.97;
    }

    @media (max-width: 1020px) {
      .hero {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: auto;
        padding-top: 82px;
      }

      .hero-copy {
        max-width: 780px;
      }

      .black-hole-stage {
        min-height: 450px;
      }

      .skill-card,
      .skill-card:nth-child(n) {
        grid-column: span 6;
      }

      .skill-card:last-child {
        grid-column: span 12;
      }

      .cert-featured-grid {
        grid-template-columns: 1fr;
      }

      .featured-cert {
        min-height: 205px;
      }

      .featured-cert h3 {
        margin-top: 36px;
      }

      .featured-cert-primary {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 260px;
      }

      .featured-priority {
        justify-self: start;
      }

      .contact-panel {
        grid-template-columns: 1fr;
      }

      .contact-action {
        justify-self: start;
      }

      .footer-inner {
        grid-template-columns: 1fr;
      }

      .footer-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 780px) {
      :root {
        --header-height: 79px;
      }

      .header-inner {
        width: min(calc(100% - 28px), var(--content-width));
        padding: 12px 0;
      }

      .brand-role {
        display: none;
      }

      .system-status {
        max-width: 210px;
        overflow: hidden;
        padding-inline: 10px;
        font-size: 0.53rem;
        text-overflow: ellipsis;
      }

      .menu-toggle {
        display: block;
      }

      .tab-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 14px;
        left: 14px;
        display: grid;
        gap: 5px;
        margin: 0;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(11, 15, 25, 0.98);
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 170ms ease, transform 170ms ease;
        visibility: hidden;
      }

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

      .tab-button {
        min-height: 48px;
      }

      .tab-button[aria-selected="true"]::after {
        display: none;
      }

      .section-shell {
        width: min(calc(100% - 28px), var(--content-width));
      }

      .hero {
        padding-top: 64px;
        padding-bottom: 82px;
      }

      .hero h1 {
        font-size: clamp(3.05rem, 16vw, 5.2rem);
      }

      .hero-actions .button {
        flex: 1 1 calc(50% - 8px);
      }

      .hero-actions .button-primary {
        flex-basis: 100%;
      }

      .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .hero-metrics li {
        min-width: 0;
        padding: 0 12px;
      }

      .black-hole-stage {
        min-height: 390px;
        margin: 0 -24px;
        transform: scale(0.88);
      }

      .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
      }

      .skills-grid,
      .cert-grid {
        grid-template-columns: 1fr;
      }

      .skill-card,
      .skill-card:nth-child(n) {
        grid-column: auto;
        min-height: 190px;
      }

      .filter-count {
        width: 100%;
        margin: 6px 0 0;
      }

      .timeline::before {
        left: 6px;
      }

      .timeline-item {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 0 0 47px 34px;
      }

      .timeline-date {
        padding: 0;
        text-align: left;
      }

      .timeline-dot {
        top: 5px;
        left: 0;
      }

      .contact-email {
        width: 100%;
      }

      .footer-inner {
        width: min(calc(100% - 28px), var(--content-width));
      }

      .footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .footer-actions > * {
        text-align: center;
      }
    }

    @media (max-width: 540px) {
      .brand-mark {
        width: 60px;
        height: 36px;
      }

      .brand-name {
        max-width: 122px;
        font-size: 0.80rem;
      }

      .system-status {
        max-width: 38px;
        min-width: 38px;
        justify-content: center;
        padding: 0;
        border-radius: 11px;
      }

      .system-status-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .hero-actions,
      .footer-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-actions .button,
      .footer-actions > * {
        width: 100%;
      }

      .hero-metrics {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .hero-metrics li,
      .hero-metrics li:first-child {
        padding: 0 0 0 13px;
        border-left: 1px solid var(--border);
      }

      .black-hole-stage {
        min-height: 340px;
        margin: -15px -48px 0;
        transform: scale(0.70);
      }

      .section-code,
      .telemetry-label {
        display: none;
      }

      .terminal-window {
        right: 10px;
        bottom: 78px;
        width: calc(100vw - 20px);
      }

      .terminal-body {
        height: min(300px, 42vh);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
      }

      .skill-meter span {
        transform: scaleX(1);
      }

      .hero-name-char {
        animation: none !important;
        opacity: 1;
        transform: none;
      }

      .star-field {
        transform: none !important;
        will-change: auto;
      }

      .timeline.is-scroll-animated::before {
        transform: scaleY(1);
      }

      .timeline.is-scroll-animated .timeline-dot {
        opacity: 1;
        scale: 1;
      }

      .cert-card.is-filter-hidden {
        opacity: 1;
        scale: 1;
      }

      .button:hover,
      .button:focus-visible,
      .skill-card:hover,
      .skill-card:focus-visible,
      .featured-cert:hover,
      .featured-cert:focus-visible,
      .featured-cert:focus-within,
      .cert-card:hover,
      .cert-card:focus-visible,
      .cert-card:focus-within {
        translate: none !important;
      }
    }

    @media print {
      :root {
        color-scheme: light;
      }

      body {
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 10pt;
      }

      #networkCanvas,
      .star-field,
      .site-header,
      .terminal-launcher,
      .terminal-window,
      .toast-region,
      .modal-backdrop,
      .hero-actions,
      .section-code,
      .filter-bar,
      .footer-actions,
      .telemetry-label,
      .black-hole-label {
        display: none !important;
      }

      .tab-panel[hidden],
      .cert-card[hidden] {
        display: block !important;
      }

      .tab-panel,
      .reveal,
      .skill-card {
        opacity: 1 !important;
        transform: none !important;
      }

      .hero {
        grid-template-columns: 1fr auto;
        min-height: auto;
        padding: 28px 0 36px;
      }

      .hero h1,
      .section-heading h2,
      .contact-panel h2 {
        color: #07131a !important;
      }

      .hero h1 {
        font-size: 48pt;
      }

      .hero-title,
      .hero-summary,
      .section-heading p,
      .skill-card p,
      .timeline-content p:last-child,
      .contact-panel p:last-child {
        color: #334155 !important;
      }

      .black-hole-stage {
        min-height: 220px;
        transform: scale(0.55);
      }

      .content-section,
      .trajectory-hero {
        padding: 34px 0;
        border-color: #d8e0e7;
      }

      .skill-card,
      .featured-cert,
      .cert-card,
      .contact-panel {
        break-inside: avoid;
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
        box-shadow: none !important;
      }

      .skill-card h3,
      .featured-cert h3,
      .cert-card h3,
      .timeline-content h3 {
        color: #14232d !important;
      }

      .cert-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .site-footer {
        background: #ffffff;
      }
    }