:root {
          --bg-0: #0a0d13;
          --bg-1: #0f1420;
          --bg-2: #131a29;
          --glass: rgba(255, 255, 255, 0.055);
          --glass-brd: rgba(255, 255, 255, 0.1);
          --glass-brd-hi: rgba(255, 255, 255, 0.2);
          --text-0: #eef1f6;
          --text-1: #aab2c2;
          --text-2: #6f7789;
          --cyan: #7fd8ea;
          --violet: #b39dff;
          --amber: #ffcf8a;
          --font-display: "Space Grotesk", sans-serif;
          --font-body: "Inter", sans-serif;
          --font-mono: "JetBrains Mono", monospace;
          --grad-a: var(--cyan);
          --grad-b: var(--violet);
          --grad-c: var(--amber);
          color-scheme: dark;
      }

      :root[data-theme="light"] {
          --bg-0: #f6f7fb;
          --bg-1: #eef1f8;
          --bg-2: #e7ebf4;
          --glass: rgba(20, 26, 40, 0.045);
          --glass-brd: rgba(20, 26, 40, 0.1);
          --glass-brd-hi: rgba(20, 26, 40, 0.22);
          --text-0: #11141c;
          --text-1: #4b5262;
          --text-2: #7c8497;
          --grad-a: #0e8fa0;
          --grad-b: #7148c9;
          --grad-c: #c98a2e;
          color-scheme: light;
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      html {
          scroll-behavior: smooth;
      }

      body {
          background:
              radial-gradient(1200px 700px at 82% -10%,
                  rgba(127, 216, 234, 0.1),
                  transparent 60%),
              radial-gradient(1000px 600px at -10% 20%,
                  rgba(179, 157, 255, 0.09),
                  transparent 55%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
          color: var(--text-0);
          font-family: var(--font-body);
          overflow-x: hidden;
          min-height: 100vh;
          transition:
              background 0.4s ease,
              color 0.4s ease;
      }

      :root[data-theme="light"] .grain {
          opacity: 0.02;
      }

      :root[data-theme="light"] .dot-live {
          box-shadow: 0 0 10px var(--cyan);
      }

      :root[data-theme="light"] .btn-primary {
          box-shadow: 0 8px 24px -8px rgba(80, 140, 160, 0.35);
      }

      .glass,
      .btn,
      input,
      textarea,
      .chip,
      .role-chip {
          transition:
              background 0.35s ease,
              border-color 0.25s ease,
              color 0.35s ease,
              box-shadow 0.35s ease,
              transform 0.25s ease;
      }

      ::selection {
          background: rgba(127, 216, 234, 0.28);
          color: #fff;
      }

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

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

      ul {
          list-style: none;
      }

      /* subtle grain */
      .grain {
          position: fixed;
          inset: 0;
          pointer-events: none;
          z-index: 2;
          opacity: 0.035;
          mix-blend-mode: overlay;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      /* ---------- glass utility ---------- */
      .glass {
          background: var(--glass);
          border: 1px solid var(--glass-brd);
          backdrop-filter: blur(18px) saturate(140%);
          -webkit-backdrop-filter: blur(18px) saturate(140%);
          border-radius: 20px;
      }

      .glass:hover {
          border-color: var(--glass-brd-hi);
      }

      /* ---------- nav ---------- */
      nav {
          position: fixed;
          top: 10px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 50;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 5px 15px;
          border-radius: 999px;
          max-width: 92vw;
      }

      nav a {
          font-family: var(--font-mono);
          font-size: 15px;
          letter-spacing: 0.02em;
          color: var(--text-1);
          padding: 10px 12px;
          border-radius: 999px;
          transition: 0.25s;
          white-space: nowrap;
          /* font-weight: 600; */
      }

      nav a:hover {
          color: var(--text-0);
          background: rgba(255, 255, 255, 0.06);
      }

      .nav-brand {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 24px;
          color: var(--text-0) !important;
          padding: 0px 0px 0px 0px !important;
          display: flex;
          align-items: center;
          /* gap: 9px;*/
      }

      .nav-brand svg {
          width: 50px;
          height: 50px;
          flex-shrink: 0;
      }

      .mav-spark {
          transform-box: fill-box;
          transform-origin: center;
          animation: sparkPulse 2.2s ease-in-out infinite;
      }

      @keyframes sparkPulse {

          0%,
          100% {
              transform: scale(1);
              opacity: 1;
          }

          50% {
              transform: scale(1.6);
              opacity: 0.35;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .mav-spark {
              animation: none;
          }
      }

      .theme-toggle {
          width: 30px;
          height: 30px;
          border-radius: 999px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          color: var(--text-0);
          cursor: pointer;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid #6f7789;
          flex-shrink: 0;
      }

      .theme-toggle:hover {
          color: var(--grad-a);
          border-color: var(--glass-brd-hi);
      }

      nav .theme-toggle {
          margin-left: 4px;
      }

      @media (max-width: 820px) {
          nav {
              display: none;
          }
      }

      .mnav {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 50;
          display: none;
          align-items: stretch;
          justify-content: space-between;
          gap: 2px;
          padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
          border-radius: 20px 20px 0 0;
          border-bottom: none;
          box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, 0.35);
      }

      .mnav-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2px;
          padding: 4px 2px 4px;
          border-radius: 10px;
          color: var(--text-1);
          position: relative;
          min-width: 0;
      }

      .mnav-item svg {
          width: 22px;
          height: 22px;
          stroke: rgb(120 121 122);
          flex-shrink: 0;
      }

      .mnav-item span {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.01em;
          white-space: nowrap;
      }

      .mnav-item.active {
          color: var(--grad-a);
          background: rgba(127, 216, 234, 0.12);
      }

      :root[data-theme="light"] .mnav-item.active {
          background: rgba(14, 143, 160, 0.12);
      }

      .mnav-item.active svg {
          filter: drop-shadow(0 0 5px rgba(127, 216, 234, 0.55));
      }

      .mnav .theme-toggle {
          align-self: center;
          margin: 0 0 0 2px;
          flex-shrink: 0;
      }

      @media (max-width: 820px) {
          .mnav {
              display: flex;
          }
      }

      @media (max-width: 360px) {
          .mnav-item span {
              display: none;
          }
      }

      #back-to-top {
          position: fixed;
          right: 26px;
          bottom: 26px;
          z-index: 45;
          width: 46px;
          height: 46px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-1);
          cursor: pointer;
          font-size: 0;
          opacity: 0;
          visibility: hidden;
          transform: translateY(12px);
          transition:
              opacity 0.3s ease,
              transform 0.3s ease,
              visibility 0.3s ease,
              color 0.25s ease,
              border-color 0.25s ease;
      }

      #back-to-top svg {
          width: 18px;
          height: 18px;
          stroke: currentColor;
      }

      #back-to-top.show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }

      #back-to-top:hover {
          color: var(--grad-a);
          border-color: var(--glass-brd-hi);
          transform: translateY(-3px);
      }

      @media (max-width: 820px) {
          #back-to-top {
              display: none;
          }
      }

      section {
          position: relative;
          padding: 30px 20px 30px;
          max-width: 1180px;
          margin: 0 auto;
          scroll-margin-top: 60px;
      }

      .eyebrow {
          font-family: var(--font-mono);
          font-size: 15px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--grad-a);
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .eyebrow::before {
          content: "";
          width: 22px;
          height: 2px;
          background: var(--grad-a);
          opacity: 0.6;
      }

      h2.section-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(26px, 3.6vw, 38px);
          letter-spacing: -0.01em;
          margin-bottom: 30px;
      }

      /* ---------- hero ---------- */
      #hero {
          min-height: 100svh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 100px;
          position: relative;
          max-width: 1280px;
      }

      #canvas-wrap {
          position: absolute;
          top: 0;
          right: -4%;
          width: min(58vw, 720px);
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;
      }

      #hero-canvas {
          width: 100%;
          height: 100%;
      }

      .hero-avatar-group {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -52%);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;
          z-index: 2;
          animation: avatarFloat 5.4s ease-in-out infinite;
      }

      .hero-avatar {
          /* width: 140px; */
          height: 250px;
          border-radius: 50%;
          padding: 4px;
          pointer-events: none;
          background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
          box-shadow: 0 0 34px rgba(127, 216, 234, 0.32), 0 0 64px rgba(179, 157, 255, 0.18);
      }

      .hero-avatar img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
          display: block;
          background: var(--bg-1);
          border: 3px solid var(--bg-1);
      }

      .hero-avatar-group .profile-views {
          margin-bottom: 0;
          pointer-events: auto;
          background: #383636;
      }

      .hero-logo-badge {
          position: absolute;
          bottom: 9%;
          right: 6%;
          width: 58px;
          height: 58px;
          z-index: 3;
          pointer-events: none;
          filter: drop-shadow(0 0 14px rgba(127, 216, 234, 0.45));
          animation: badgeFloat 4.4s ease-in-out infinite;
          animation-delay: -1.5s;
      }

      .hero-logo-badge svg {
          width: 100%;
          height: 100%;
          display: block;
          position: relative;
          z-index: 2;
      }

      .hero-logo-badge .badge-ring {
          position: absolute;
          inset: -9px;
          border-radius: 50%;
          border: 1px dashed var(--grad-a);
          opacity: 0.45;
          animation: ringSpin 13s linear infinite;
      }

      @keyframes ringSpin {
          from {
              transform: rotate(0deg);
          }

          to {
              transform: rotate(360deg);
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .hero-logo-badge .badge-ring {
              animation: none;
          }
      }

      @keyframes badgeFloat {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-10px);
          }
      }

      @keyframes avatarFloat {

          0%,
          100% {
              transform: translate(-50%, -52%) translateY(0);
          }

          50% {
              transform: translate(-50%, -52%) translateY(-9px);
          }
      }

      @media (prefers-reduced-motion: reduce) {

          .hero-logo-badge,
          .hero-avatar-group {
              animation: none;
          }
      }

      @media(max-width:900px) {
          .hero-logo-badge {
              width: 42px;
              height: 42px;
          }

          .hero-avatar {
              /* width: 120px; */
              height: 120px;
          }

          .hero-avatar-group {
              gap: 9px;
          }
      }

      @media(max-width:480px) {
          .hero-logo-badge {
              width: 36px;
              height: 36px;
              bottom: 6%;
              right: 8%;
          }

          .hero-avatar {
              /* width: 96px; */
              height: 100px;
          }

          .hero-avatar-group {
              gap: 7px;
          }
      }

      .hero-inner {
          position: relative;
          z-index: 3;
          max-width: 640px;
      }

      @media(max-width:900px) {
          #hero {
              min-height: auto;
              padding-top: 104px;
              padding-bottom: 40px;
              display: flex;
              flex-direction: column;
          }

          #canvas-wrap {
              position: relative;
              inset: auto;
              top: auto;
              right: auto;
              width: 100%;
              max-width: 340px;
              height: 240px;
              margin: 0 auto 8px;
              order: -1;
              opacity: 0.9;
          }

          .hero-inner {
              max-width: 100%;
              text-align: left;
          }
      }

      @media(max-width:480px) {
          #canvas-wrap {
              height: 200px;
              max-width: 260px;
          }
      }

      .hero-kicker {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--text-1);
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 22px;
      }

      .dot-live {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--cyan);
          box-shadow: 0 0 10px var(--cyan);
          animation: pulse 2s infinite;
      }

      @keyframes pulse {

          0%,
          100% {
              opacity: 1;
          }

          50% {
              opacity: .35;
          }
      }

      h1 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(40px, 6.6vw, 74px);
          line-height: 1.02;
          letter-spacing: -0.02em;
          margin-bottom: 15px;
      }

      h1 .grad {
          background: linear-gradient(100deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .hero-sub {
          font-size: 17px;
          line-height: 1.65;
          color: var(--text-1);
          max-width: 480px;
          margin-bottom: 15px;
      }

      .hero-roles {
          display: flex;
          flex-wrap: wrap;
          gap: 9px;
          margin-bottom: 20px;
      }

      .role-chip {
          font-family: var(--font-mono);
          font-size: 12px;
          padding: 7px 13px;
          border-radius: 999px;
          color: var(--text-1);
      }

      .hero-cta {
          display: flex;
          gap: 14px;
          flex-wrap: wrap;
          align-items: center;
      }

      .btn {
          font-family: var(--font-body);
          font-weight: 600;
          font-size: 14px;
          padding: 12px 20px;
          border-radius: 14px;
          display: inline-flex;
          align-items: center;
          gap: 9px;
          transition: .25s;
          cursor: pointer;
          border: none;
      }

      .btn-primary {
          background: linear-gradient(100deg, var(--cyan), var(--violet));
          color: #0a0d13;
          box-shadow: 0 8px 30px -8px rgba(127, 216, 234, 0.45);
      }

      .btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 34px -8px rgba(127, 216, 234, 0.6);
      }

      .btn-ghost {
          color: var(--text-0);
      }

      .btn-ghost:hover {
          background: rgba(255, 255, 255, 0.06);
      }

      .hero-socials {
          display: flex;
          gap: 12px;
          margin-top: 20px;
      }

      .hero-socials a {
          width: 40px;
          height: 40px;
          border-radius: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--text-1);
          transition: .25s;
      }

      .hero-socials a svg {
          width: 18px;
          height: 18px;
          fill: currentColor;
      }

      .hero-socials a.be-mark {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -0.02em;
      }

      .hero-socials a:hover {
          color: var(--grad-a);
          border-color: var(--glass-brd-hi);
          transform: translateY(-2px);
      }

      .profile-views {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 7px 13px 7px 9px;
          border-radius: 999px;
          white-space: nowrap;
      }

      .profile-views svg {
          width: 14px;
          height: 14px;
          stroke: var(--grad-a);
          flex-shrink: 0;
      }

      .profile-views .pv-count {
          font-family: var(--font-mono);
          font-size: 12px;
          font-weight: 500;
          color: #fff;
      }

      .profile-views .pv-label {
          font-family: var(--font-mono);
          font-size: 10px;
          color: #afb7c7;
          letter-spacing: .02em;
      }

      @media(max-width:900px) {
          .profile-views {
              padding: 5px 10px 5px 8px;
              gap: 5px;
          }

          .profile-views svg {
              width: 12px;
              height: 12px;
          }

          .profile-views .pv-count {
              font-size: 11px;
          }

          .profile-views .pv-label {
              font-size: 9px;
          }
      }

      @media(max-width:480px) {
          .profile-views .pv-label {
              display: none;
          }
      }

      .scroll-cue {
          position: absolute;
          bottom: 35px;
          left: 24px;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-2);
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .scroll-cue .line {
          width: 1px;
          height: 34px;
          background: linear-gradient(var(--cyan), transparent);
          animation: scrolldown 1.8s infinite;
      }

      @keyframes scrolldown {
          0% {
              opacity: 0;
              transform: translateY(-6px);
          }

          50% {
              opacity: 1;
          }

          100% {
              opacity: 0;
              transform: translateY(10px);
          }
      }

      /* ---------- about ---------- */
      .about-grid {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 26px;
          align-items: start;
      }

      @media (max-width: 860px) {
          .about-grid {
              grid-template-columns: 1fr;
          }
      }

      .about-card {
          padding: 30px;
      }

      .about-list li {
          position: relative;
          padding-left: 22px;
          margin-bottom: 16px;
          color: var(--text-1);
          line-height: 1.6;
          font-size: 15px;
          text-align: justify;
      }

      .about-list li::before {
          content: "";
          position: absolute;
          left: 0;
          top: 8px;
          width: 7px;
          height: 7px;
          border-radius: 2px;
          background: var(--cyan);
          transform: rotate(45deg);
      }

      .stat-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .stat-card {
          padding: 16px;
          display: flex;
          align-items: baseline;
          justify-content: space-between;
      }

      .stat-num {
          font-family: var(--font-display);
          font-size: 45px;
          font-weight: 700;
          background: linear-gradient(100deg, var(--grad-a), var(--grad-b));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
      }

      .stat-label {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-1);
          text-align: right;
          line-height: 1.5;
      }

      .contact-strip {
          padding: 26px 28px;
          /* margin-top: 16px; */
          font-family: var(--font-mono);
          font-size: 12.5px;
          color: var(--text-1);
          line-height: 2;
      }

      .contact-strip b {
          color: var(--text-0);
          font-weight: 500;
      }

      /* ---------- skills ---------- */
      .skills-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 18px;
      }

      .skill-card {
          padding: 25px 20px;
      }

      .skill-card h3 {
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--text-2);
          margin-bottom: 16px;
      }

      .chip-row {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .chip {
          font-size: 11px;
          padding: 5px 5px;
          border-radius: 9px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid var(--glass-brd);
          color: var(--text-1);
          transition: 0.2s;
      }

      .skill-card:hover .chip {
          color: var(--text-0);
      }

      /* ---------- experience timeline ---------- */
      .timeline {
          position: relative;
          padding-left: 36px;
      }

      .timeline::before {
          content: "";
          position: absolute;
          left: 5px;
          top: 6px;
          bottom: 6px;
          width: 1px;
          background: linear-gradient(var(--cyan), var(--violet), transparent);
      }

      .tl-item {
          position: relative;
          margin-bottom: 22px;
      }

      .tl-item::before {
          content: "";
          position: absolute;
          left: -36px;
          top: 28px;
          width: 11px;
          height: 11px;
          border-radius: 50%;
          background: var(--bg-1);
          border: 2px solid var(--cyan);
      }

      .tl-card {
          padding: 26px 28px;
      }

      .tl-head {
          display: flex;
          gap: 16px;
          align-items: flex-start;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-bottom: 8px;
      }

      .tl-role-wrap {
          display: flex;
          gap: 14px;
          align-items: center;
      }

      .tl-logo {
          width: 46px;
          height: 46px;
          border-radius: 12px;
          object-fit: cover;
          border: 1px solid var(--glass-brd);
          flex-shrink: 0;
          background: #fff1;
      }

      .tl-role {
          font-family: var(--font-display);
          font-size: 18px;
          font-weight: 600;
      }

      .tl-company {
          font-size: 13px;
          color: var(--grad-a);
          font-family: var(--font-mono);
      }

      .tl-meta {
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-2);
          text-align: right;
          white-space: nowrap;
      }

      .tl-desc {
          color: var(--text-1);
          font-size: 14px;
          line-height: 1.6;
          margin: 14px 0 12px;
          font-style: italic;
      }

      .tl-bullets {
          margin-top: 10px;
      }

      .tl-bullets li {
          position: relative;
          padding-left: 18px;
          margin-bottom: 8px;
          color: var(--text-1);
          font-size: 13.8px;
          line-height: 1.55;
      }

      .tl-bullets li::before {
          content: "—";
          position: absolute;
          left: 0;
          color: var(--text-2);
      }

      .tl-links {
          margin-top: 12px;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .tl-links a {
          font-family: var(--font-mono);
          font-size: 11.5px;
          padding: 5px 10px;
          border-radius: 7px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid var(--glass-brd);
          color: var(--text-1);
      }

      .tl-links a:hover {
          color: var(--grad-a);
      }

      /* ---------- portfolio ---------- */
      .portfolio-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 20px;
      }

      .pf-card {
          padding: 30px 26px;
          transition: 0.3s;
          cursor: pointer;
      }

      .pf-card:hover {
          transform: translateY(-4px);
          border-color: var(--glass-brd-hi);
      }

      .pf-icon {
          font-family: var(--font-display);
          font-size: 30px;
          margin-bottom: 10px;
          color: var(--grad-a);
          font-weight: 600;
      }

      .pf-card h3 {
          font-family: var(--font-display);
          font-size: 19px;
          font-weight: 600;
          margin-bottom: 8px;
      }

      .pf-card p {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-2);
          word-break: break-all;
          margin-bottom: 18px;
      }

      .pf-go {
          font-family: var(--font-mono);
          font-size: 12.5px;
          color: var(--text-1);
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .pf-card:hover .pf-go {
          color: var(--grad-a);
      }

      /* ---------- certifications ---------- */
      .cert-track {
          display: flex;
          gap: 16px;
          overflow-x: auto;
          overflow-y: visible;
          padding: 6px 2px 20px;
          scrollbar-width: thin;
      }

      .cert-track::-webkit-scrollbar {
          height: 6px;
      }

      .cert-track::-webkit-scrollbar-thumb {
          background: var(--glass-brd-hi);
          border-radius: 6px;
      }

      .cert-card {
          flex: 0 0 220px;
          padding: 14px;
          text-align: center;
          cursor: pointer;
          position: relative;
          transition: border-color .25s ease, transform .25s ease;
      }

      .cert-card:hover,
      .cert-card:focus-visible {
          transform: translateY(-3px);
          border-color: var(--glass-brd-hi);
          outline: none;
      }

      .cert-card .cert-img-wrap {
          border-radius: 12px;
          height: 140px;
          margin-bottom: 12px;
          overflow: hidden;
          position: relative;
          background: #fff1;
      }

      .cert-card img {
          height: 140px;
          width: 100%;
          object-fit: cover;
          display: block;
          transition: transform .5s cubic-bezier(.2, .8, .2, 1);
      }

      .cert-card:hover img,
      .cert-card:focus-visible img {
          transform: scale(1.14);
      }

      .cert-zoom-hint {
          position: absolute;
          inset: 0;
          display: flex !important;
          align-items: center;
          justify-content: center;
          background: rgba(6, 9, 15, 0.0);
          opacity: 0;
          transition: opacity .25s ease, background .25s ease;
      }

      .cert-card:hover .cert-zoom-hint,
      .cert-card:focus-visible .cert-zoom-hint {
          opacity: 1;
          background: rgba(6, 9, 15, 0.28);
      }

      .cert-zoom-hint svg {
          width: 26px;
          height: 26px;
          stroke: #fff;
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
      }

      .cert-card span {
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-1);
          line-height: 1.4;
          display: block;
      }

      /* ---------- lightbox ---------- */
      .lightbox {
          position: fixed;
          inset: 0;
          z-index: 200;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 48px 20px;
          background: rgba(4, 6, 10, 0.8);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          opacity: 0;
          visibility: hidden;
          transition: opacity .25s ease, visibility .25s ease;
      }

      .lightbox.open {
          opacity: 1;
          visibility: visible;
      }

      .lightbox-inner {
          max-width: min(640px, 92vw);
          max-height: 86vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
          transform: scale(.94);
          transition: transform .25s ease;
      }

      .lightbox.open .lightbox-inner {
          transform: scale(1);
      }

      .lightbox-inner img {
          max-width: 100%;
          max-height: 72vh;
          object-fit: contain;
          border-radius: 16px;
          border: 1px solid var(--glass-brd-hi);
          background: var(--bg-1);
          box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
      }

      .lightbox-caption {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--text-1);
          text-align: center;
      }

      .lightbox-close {
          position: absolute;
          top: 18px;
          right: 20px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.18);
          color: #fff;
          font-size: 22px;
          line-height: 1;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .lightbox-close:hover {
          background: rgba(255, 255, 255, 0.16);
      }

      @media (prefers-reduced-motion: reduce) {

          .cert-card img,
          .lightbox,
          .lightbox-inner {
              transition: none;
          }
      }

      /* ---------- education ---------- */
      .edu-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
      }

      @media (max-width: 700px) {
          .edu-grid {
              grid-template-columns: 1fr;
          }
      }

      .edu-card {
          padding: 28px;
      }

      .edu-deg {
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #9173fa;
          margin-bottom: 10px;
          font-weight: 500;
      }

      .edu-name {
          font-family: var(--font-display);
          font-size: 19px;
          font-weight: 600;
          margin-bottom: 6px;
      }

      .edu-school {
          color: var(--text-1);
          font-size: 14px;
          margin-bottom: 4px;
      }

      .edu-meta {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-2);
          margin-top: 10px;
      }

      /* ---------- contact ---------- */
      #contact {
          padding-bottom: 70px;
      }

      .contact-wrap {
          display: grid;
          grid-template-columns: 0.85fr 1.15fr;
          gap: 26px;
      }

      @media (max-width: 860px) {
          .contact-wrap {
              grid-template-columns: 1fr;
          }

          #contact {
              padding-bottom: 30px;
          }
      }

      .contact-info {
          padding: 32px;
      }

      .contact-info h3 {
          font-family: var(--font-display);
          font-size: 22px;
          margin-bottom: 14px;
      }

      .contact-info p {
          color: var(--text-1);
          font-size: 14.5px;
          line-height: 1.6;
          margin-bottom: 22px;
      }

      .ci-row {
          display: flex;
          justify-content: space-between;
          padding: 12px 0;
          border-top: 1px solid var(--glass-brd);
          font-size: 13.5px;
      }

      .ci-row:first-of-type {
          border-top: none;
      }

      .ci-row span:first-child {
          color: var(--text-2);
          font-family: var(--font-mono);
          font-size: 11.5px;
      }

      form.glass {
          padding: 32px;
          display: flex;
          flex-direction: column;
          gap: 14px;
      }

      .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
      }

      @media (max-width: 520px) {
          .form-row {
              grid-template-columns: 1fr;
          }
      }

      input,
      textarea {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid var(--glass-brd);
          border-radius: 11px;
          padding: 13px 15px;
          color: var(--text-0);
          font-family: var(--font-body);
          font-size: 14px;
          outline: none;
          transition: 0.2s;
          resize: none;
      }

      input:focus,
      textarea:focus {
          border-color: var(--cyan);
          background: rgba(255, 255, 255, 0.06);
      }

      input::placeholder,
      textarea::placeholder {
          color: var(--text-2);
      }

      textarea {
          min-height: 120px;
      }

      .form-note {
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-2);
          margin-top: 2px;
      }

      footer {
          text-align: center;
          padding: 30px 24px 70px;
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-2);
      }

      footer a {
          color: var(--text-1);
      }

      footer a:hover {
          color: var(--grad-a);
      }

      /* reveal on scroll */
      .reveal {
          opacity: 0;
          transform: translateY(24px);
          transition:
              opacity 0.7s ease,
              transform 0.7s ease;
      }

      .reveal.in {
          opacity: 1;
          transform: translateY(0);
      }

      @media (max-width: 600px) {
          .hero-kicker {
              margin-bottom: 12px;
          }

          h1 {
              font-size: clamp(30px, 6.6vw, 74px);
              margin-bottom: 12px;
          }

          .hero-sub {
              font-size: 14px;
              line-height: 1.4;
              margin-bottom: 12px;
          }

          .hero-roles {
              margin-bottom: 12px;
              gap: 6px;
          }

          .role-chip {
              font-size: 10px;
              padding: 4px 8px;
          }

          .hero-cta {
              gap: 10px;
          }

          .btn {
              font-size: 12px;
              padding: 10px 20px;
              gap: 6px;
          }

          #hero {
              padding-bottom: 40px;
              padding-top: 0px;
          }

          .scroll-cue {
              bottom: 0px;
          }

          section {
              padding: 20px 20px 20px;
          }

          h2.section-title {
              font-size: clamp(22px, 3.6vw, 38px);
              margin-bottom: 20px;
          }

          .about-grid img {
              display: none;
          }

          .about-grid {
              gap: 12px;
          }

          .stat-grid {
              gap: 12px;
          }

          .about-card {
              padding: 20px;
          }

          .about-list li {
              padding-left: 14px;
              margin-bottom: 10px;
              line-height: 1.4;
              font-size: 14px;
          }

          .stat-card {
              padding: 20px;
          }

          .skills-grid {
              gap: 14px;
          }

          .skill-card {
              padding: 15px;
          }

          .skill-card h3 {
              font-size: 12px;
              margin-bottom: 12px;
          }

          .chip-row {
              gap: 5px;
          }

          .chip {
              font-size: 12px;
              padding: 4px 8px;
          }

          .tl-item {
              margin-bottom: 12px;
          }

          .tl-card {
              padding: 20px;
          }

          .tl-head {
              gap: 10px;
              margin-bottom: 6px;
          }

          .tl-role-wrap {
              gap: 12px;
          }

          .tl-role {
              font-size: 16px;
          }

          .tl-company {
              font-size: 12px;
          }

          .tl-meta {
              font-size: 11px;
              text-align: left;
          }

          .tl-desc {
              font-size: 14px;
              line-height: 1.4;
              margin: 12px 0 10px;
          }

          .tl-bullets li {
              padding-left: 12px;
              margin-bottom: 4px;
              font-size: 14px;
              line-height: 1.4;
          }

          .tl-links {
              margin-top: 10px;
              gap: 4px;
          }

          .timeline {
              padding-left: 20px;
          }

          .tl-item::before {
              left: -30px;
          }

          .timeline::before {
              left: -3px;
          }

          .pf-card {
              padding: 20px;
          }

          .portfolio-grid {
              gap: 14px;
          }

          .pf-icon {
              font-size: 30px;
              margin-bottom: 10px;
          }

          .pf-card h3 {
              font-size: 18px;
              margin-bottom: 5px;
          }

          .pf-card p {
              font-size: 12px;
              margin-bottom: 5px;
          }

          .edu-grid {
              gap: 14px;
          }

          .edu-card {
              padding: 20px;
          }

          .edu-deg {
              font-size: 12px;
              margin-bottom: 5px;
          }

          .edu-name {
              font-size: 16px;
              margin-bottom: 5px;
          }

          .contact-info {
              padding: 20px;
          }

          .contact-info h3 {
              font-size: 18px;
              margin-bottom: 10px;
          }

          .contact-info p {
              font-size: 14px;
              line-height: 1.4;
              margin-bottom: 12px;
          }

          .ci-row {
              padding: 10px 0;
              font-size: 12px;
          }

          form.glass {
              padding: 20px;
              gap: 12px;
          }

          input,
          textarea {
              padding: 12px;
              font-size: 12px;
          }

          footer {
              padding: 10px 20px 80px;
              font-size: 12px;
          }

          .stat-num {
              font-size: 35px;
          }
      }

      @media (prefers-reduced-motion: reduce) {
          .reveal {
              transition: none;
              opacity: 1;
              transform: none;
          }

          .dot-live,
          .scroll-cue .line {
              animation: none;
          }
      }