:root {
      --bg: #06060A;
      --s1: #0C0B11;
      --s2: #111019;
      --s3: #17151F;
      --text: #EBE7E0;
      --sub: #6E6979;
      --dim: #252230;
      --accent: #FF3B1F;
      --lime: #B8FF26;
      --gold: #F4C73E;
      --blue: #4F8EF7;
      --border: rgba(255, 255, 255, .065);
      --ff: 'Space Grotesk', sans-serif;
      --fm: 'JetBrains Mono', monospace;
      --fs: 'Playfair Display', serif;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --t-xs: 11px;
      --t-sm: 13px;
      --t-base: 16px;
      --t-lg: 18px;
      --t-xl: 24px;
      --t-2xl: 30px;
    }

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

    html {
      background: var(--bg);
      color: var(--text);
      font-family: var(--ff);
      overflow-x: hidden;
      scroll-behavior: smooth;
      scroll-padding-top: 60px
    }

    body {
      overflow-x: hidden;
      padding-bottom: 36px
    }

    ::selection {
      background: var(--accent);
      color: #fff
    }

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

    button {
      font: inherit;
      background: none;
      border: none;
      color: inherit
    }

    * {
      cursor: none !important
    }

    #cr,
    #cd {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      will-change: transform
    }

    #cr {
      width: 28px;
      height: 28px;
      border: 1.5px solid rgba(235, 231, 224, .32);
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      transition: width .18s, height .18s, border-color .18s, background .18s
    }

    #cd {
      width: 4px;
      height: 4px;
      background: var(--text);
      top: 0;
      left: 0;
      transform: translate(-50%, -50%)
    }

    body.ch #cr {
      width: 46px;
      height: 46px;
      border-color: var(--accent);
      background: rgba(255, 59, 31, .07)
    }

    body.cg #cr {
      width: 46px;
      height: 46px;
      border-color: var(--lime);
      background: rgba(184, 255, 38, .06)
    }

    #boot {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 64px;
      transition: opacity .55s, visibility .55s
    }

    #boot.done {
      opacity: 0;
      visibility: hidden;
      pointer-events: none
    }

    .bl {
      font-family: var(--fm);
      font-size: var(--t-sm);
      color: var(--sub);
      letter-spacing: .04em;
      margin-bottom: 7px;
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity .22s, transform .22s
    }

    .bl.s {
      opacity: 1;
      transform: none
    }

    .ok {
      color: var(--lime)
    }

    .warn {
      color: var(--gold)
    }

    .err {
      color: var(--accent)
    }

    .inf {
      color: var(--blue)
    }

    .boot-bar {
      margin-top: 28px;
      width: 200px;
      height: 2px;
      background: var(--dim);
      border-radius: 1px;
      overflow: hidden
    }

    .boot-fill {
      height: 100%;
      background: var(--lime);
      width: 0;
      transition: width .04s linear
    }

    #sponsor-strip {
      margin-top: 56px;
      background: rgba(184, 255, 38, .06);
      border-top: 1px solid rgba(184, 255, 38, .14);
      border-bottom: 1px solid rgba(184, 255, 38, .14);
      padding: 8px 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .strip-txt {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(184, 255, 38, .6)
    }

    .strip-btn {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      background: rgba(184, 255, 38, .12);
      border: 1px solid rgba(184, 255, 38, .28);
      color: var(--lime);
      padding: 4px 16px;
      border-radius: 2px;
      transition: background .2s, border-color .2s;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .strip-btn:hover {
      background: rgba(184, 255, 38, .22);
      border-color: var(--lime)
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 48px;
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s, backdrop-filter .3s;
    }

    nav.scrolled {
      background: rgba(6, 6, 10, .92);
      border-color: var(--border);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px)
    }

    .nav-id {
      font-family: var(--fm);
      font-size: var(--t-sm);
      letter-spacing: .14em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sig {
      color: var(--accent)
    }

    .sdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 6px var(--lime);
      animation: blink 2.8s ease-in-out infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 6px var(--lime)
      }

      50% {
        opacity: .35;
        box-shadow: none
      }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      list-style: none
    }

    .nav-links a {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--sub);
      transition: color .2s;
      position: relative
    }

    .nav-links a:hover {
      color: var(--text)
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0;
      height: 1px;
      background: var(--accent);
      transition: width .25s
    }

    .nav-links a:hover::after {
      width: 100%
    }

    .nav-r {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .btn-sponsor {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 5px;
      border: 1px solid rgba(184, 255, 38, .25);
      color: var(--lime);
      padding: 7px 14px;
      border-radius: 3px;
      transition: background .2s, border-color .2s
    }

    .btn-sponsor:hover {
      background: rgba(184, 255, 38, .1);
      border-color: var(--lime)
    }

    .btn-term {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sub);
      border: 1px solid var(--dim);
      padding: 7px 14px;
      border-radius: 3px;
      transition: color .2s, border-color .2s
    }

    .btn-term:hover {
      color: var(--lime);
      border-color: rgba(184, 255, 38, .3)
    }

    .btn-hire {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      background: var(--text);
      color: var(--bg);
      padding: 8px 20px;
      border-radius: 2px;
      transition: background .2s;
      border: none
    }

    .btn-hire:hover {
      background: var(--accent);
      color: #fff
    }

    .ticker {
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--s1);
      padding: 9px 0;
      position: relative;
      z-index: 1
    }

    .t-inner {
      display: flex;
      width: max-content;
      animation: marquee 32s linear infinite
    }

    .t-item {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sub);
      white-space: nowrap;
      padding: 0 24px
    }

    .t-sep {
      color: var(--accent)
    }

    @keyframes marquee {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    #hero {
      min-height: 100vh;
      padding: 80px 48px 80px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      overflow: hidden
    }

    .hero-ghost {
      position: absolute;
      top: -8%;
      right: -5%;
      font-size: 76vw;
      font-weight: 700;
      line-height: .85;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255, 255, 255, .015);
      pointer-events: none;
      user-select: none;
      z-index: 0
    }

    .hero-vtag {
      position: absolute;
      top: 130px;
      right: 48px;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sub);
      z-index: 2;
      writing-mode: vertical-rl;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .hero-vtag::before {
      content: '';
      width: 1px;
      height: 52px;
      background: linear-gradient(to bottom, transparent, var(--sub))
    }

    .hero-body {
      position: relative;
      z-index: 2
    }

    .hero-kicker {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .hero-kicker::before {
      content: '';
      display: inline-block;
      width: 30px;
      height: 1px;
      background: var(--accent)
    }

    .hero-hl {
      font-size: clamp(54px, 9.5vw, 150px);
      font-weight: 700;
      line-height: .88;
      letter-spacing: -.035em;
      text-transform: uppercase;
      margin-bottom: 44px
    }

    .hr {
      display: flex;
      align-items: baseline;
      gap: 16px
    }

    .hs {
      color: var(--text)
    }

    .hg {
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(235, 231, 224, .13)
    }

    .ha {
      color: var(--accent)
    }

    .hser {
      font-family: var(--fs);
      font-style: italic;
      font-weight: 400;
      font-size: .58em;
      color: var(--sub);
      letter-spacing: -.01em;
      text-transform: none;
      margin-left: 4px
    }

    .hero-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px
    }

    .hero-desc {
      max-width: 520px;
      font-size: var(--t-base);
      line-height: 1.8;
      color: var(--sub)
    }

    .hero-desc strong {
      color: var(--text);
      font-weight: 600
    }

    .hero-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px
    }

    .hero-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end
    }

    .htag {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--dim);
      padding: 6px 13px;
      border-radius: 2px;
      color: var(--sub);
      transition: border-color .2s, color .2s
    }

    .htag:hover {
      border-color: var(--sub);
      color: var(--text)
    }

    .hero-stats {
      display: flex;
      gap: 32px;
      border-top: 1px solid var(--border);
      padding-top: 14px
    }

    .hstat .n {
      font-size: 24px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.02em;
      line-height: 1
    }

    .hstat .n .sup {
      color: var(--accent);
      font-size: .5em;
      font-weight: 400
    }

    .hstat .l {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sub);
      margin-top: 4px
    }

    .sec {
      padding: 100px 48px
    }

    .sec-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 64px
    }

    .sn {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .18em;
      color: var(--accent)
    }

    .st {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .sl {
      flex: 1;
      height: 1px;
      background: var(--border)
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .62s var(--ease), transform .62s var(--ease)
    }

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

    .d1 {
      transition-delay: .08s
    }

    .d2 {
      transition-delay: .16s
    }

    .d3 {
      transition-delay: .24s
    }

    .d4 {
      transition-delay: .32s
    }

    .d5 {
      transition-delay: .4s
    }

    .d6 {
      transition-delay: .48s
    }

    #services {
      background: var(--s1)
    }

    .services-intro {
      font-size: var(--t-lg);
      color: var(--sub);
      max-width: 640px;
      margin-bottom: 52px;
      line-height: 1.7
    }

    .services-intro strong {
      color: var(--text)
    }

    .persona-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2px
    }

    .pcard {
      background: var(--bg);
      border: 1px solid var(--border);
      padding: 36px 32px;
      position: relative;
      overflow: hidden;
      transition: border-color .25s, background .25s;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .pcard::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: transparent;
      transition: background .25s
    }

    .pcard:hover {
      background: var(--s2)
    }

    .pcard.enterprise {
      grid-column: span 2
    }

    .pcard.enterprise::before {
      background: var(--blue)
    }

    .pcard.enterprise:hover {
      border-color: rgba(79, 142, 247, .3)
    }

    .pcard.founders {
      grid-column: span 2
    }

    .pcard.founders::before {
      background: var(--accent)
    }

    .pcard.founders:hover {
      border-color: rgba(255, 59, 31, .3)
    }

    .pcard.developers {
      grid-column: span 2
    }

    .pcard.developers::before {
      background: var(--lime)
    }

    .pcard.developers:hover {
      border-color: rgba(184, 255, 38, .3)
    }

    .pcard.mentees {
      grid-column: span 3
    }

    .pcard.mentees::before {
      background: var(--gold)
    }

    .pcard.mentees:hover {
      border-color: rgba(244, 199, 62, .3)
    }

    .pcard.collab {
      grid-column: span 3
    }

    .pcard.collab::before {
      background: var(--sub)
    }

    .pcard.collab:hover {
      border-color: rgba(110, 105, 121, .5)
    }

    .p-icon {
      font-size: 22px;
      display: block;
      opacity: .7;
      margin-bottom: 4px
    }

    .p-who {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .p-ttl {
      font-size: var(--t-xl);
      font-weight: 700;
      color: var(--text);
      line-height: 1.1
    }

    .p-desc {
      font-size: var(--t-sm);
      color: var(--sub);
      line-height: 1.75
    }

    .p-offers {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 2px
    }

    .p-offers li {
      font-family: var(--fm);
      font-size: var(--t-xs);
      color: var(--sub);
      display: flex;
      align-items: center;
      gap: 7px
    }

    .p-offers li::before {
      content: '→';
      color: var(--accent);
      flex-shrink: 0;
      font-size: 10px
    }

    .p-cta {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text);
      border: 1px solid var(--dim);
      padding: 8px 16px;
      border-radius: 2px;
      width: fit-content;
      transition: border-color .2s, color .2s, background .2s
    }

    .pcard.enterprise .p-cta {
      color: var(--blue);
      border-color: rgba(79, 142, 247, .3)
    }

    .pcard.enterprise .p-cta:hover {
      background: rgba(79, 142, 247, .07)
    }

    .pcard.founders .p-cta {
      color: var(--accent);
      border-color: rgba(255, 59, 31, .3)
    }

    .pcard.founders .p-cta:hover {
      background: rgba(255, 59, 31, .07)
    }

    .pcard.developers .p-cta {
      color: var(--lime);
      border-color: rgba(184, 255, 38, .3)
    }

    .pcard.developers .p-cta:hover {
      background: rgba(184, 255, 38, .07)
    }

    .pcard.mentees .p-cta {
      color: var(--gold);
      border-color: rgba(244, 199, 62, .3)
    }

    .pcard.mentees .p-cta:hover {
      background: rgba(244, 199, 62, .07)
    }

    .pcard.collab .p-cta {
      color: var(--sub);
      border-color: var(--dim)
    }

    .pcard.collab .p-cta:hover {
      background: rgba(110, 105, 121, .07)
    }

    .term-hint {
      margin-top: 32px;
      background: var(--s2);
      border: 1px solid var(--border);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-radius: 3px
    }

    .th-left {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .th-key {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .06em;
      background: var(--dim);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--lime);
      padding: 4px 10px;
      border-radius: 3px
    }

    .th-text {
      font-size: var(--t-sm);
      color: var(--sub)
    }

    .th-text strong {
      color: var(--text)
    }

    .th-cmds {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .th-cmd {
      font-family: var(--fm);
      font-size: var(--t-xs);
      color: var(--sub);
      border: 1px solid var(--dim);
      padding: 3px 10px;
      border-radius: 2px;
      transition: border-color .2s, color .2s
    }

    .th-cmd:hover {
      border-color: var(--lime);
      color: var(--lime)
    }

    #work {
      background: var(--bg)
    }

    .pgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px
    }

    .proj {
      background: var(--s1);
      border: 1px solid var(--border);
      padding: 36px 32px;
      position: relative;
      overflow: hidden;
      transition: border-color .25s, background .25s;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 280px
    }

    .proj::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 0;
      background: var(--accent);
      transition: height .35s var(--ease)
    }

    .proj:hover::before {
      height: 100%
    }

    .proj:hover {
      border-color: rgba(255, 59, 31, .22);
      background: var(--s2)
    }

    .proj.kavach {
      border-color: rgba(184, 255, 38, .1)
    }

    .proj.kavach::before {
      background: var(--lime)
    }

    .proj.kavach:hover {
      border-color: rgba(184, 255, 38, .28)
    }

    .proj.amrutya-card {
      border-color: rgba(244, 199, 62, .12)
    }

    .proj.amrutya-card::before {
      background: var(--gold)
    }

    .proj.amrutya-card:hover {
      border-color: rgba(244, 199, 62, .28)
    }

    .proj.portfolio-card {
      border-color: rgba(184, 255, 38, .08)
    }

    .proj.portfolio-card::before {
      background: var(--lime)
    }

    .proj.portfolio-card:hover {
      border-color: rgba(184, 255, 38, .25)
    }

    .pfeat {
      grid-column: span 2;
      flex-direction: row;
      gap: 48px;
      align-items: stretch;
      min-height: 240px
    }

    .pfeat-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .pvis {
      width: 200px;
      flex-shrink: 0;
      border: 1px solid var(--dim);
      border-radius: 4px;
      overflow: hidden;
      background: var(--s2);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .amrutya-inner {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      height: 100%
    }

    .amrutya-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .amrutya-vis {
      flex-shrink: 0;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding-top: 8px
    }

    .cm-flame {
      width: 8px;
      height: 14px;
      background: linear-gradient(to top, var(--accent), var(--gold), rgba(255, 255, 255, .8));
      border-radius: 50% 50% 35% 35%;
      animation: flicker .65s ease-in-out infinite alternate
    }

    .cm-wick {
      width: 1.5px;
      height: 6px;
      background: rgba(255, 255, 255, .3);
      margin: 0 auto
    }

    .cm-body {
      width: 28px;
      height: 50px;
      background: linear-gradient(135deg, #2a2830, #1a1820);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 3px 3px 2px 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -2px
    }

    .cm-lbl {
      font-family: var(--fm);
      font-size: 6px;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .15);
      text-transform: uppercase;
      writing-mode: vertical-rl
    }

    .cm-glow {
      width: 42px;
      height: 3px;
      background: var(--gold);
      border-radius: 50%;
      opacity: .12;
      filter: blur(3px);
      margin-top: -2px
    }

    .cm-name {
      font-family: var(--fm);
      font-size: 8px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(244, 199, 62, .35);
      margin-top: 8px;
      text-align: center;
      line-height: 1.4
    }

    @keyframes flicker {
      from {
        transform: scaleX(1) scaleY(1)
      }

      to {
        transform: scaleX(.82) scaleY(1.1);
        opacity: .9
      }
    }

    .port-terminal {
      background: rgba(0, 0, 0, .3);
      border: 1px solid var(--dim);
      border-radius: 4px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-family: var(--fm);
      font-size: 11px
    }

    .pt-line {
      display: flex;
      align-items: center;
      gap: 7px;
      line-height: 1.6
    }

    .pt-prompt {
      color: var(--lime);
      flex-shrink: 0
    }

    .pt-cmd {
      color: var(--text);
      letter-spacing: .04em
    }

    .pt-out {
      color: var(--sub)
    }

    .pt-ok {
      color: var(--lime)
    }

    .pt-cursor {
      color: var(--lime);
      animation: none;
      font-size: 12px
    }

    .ptyp {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .pname {
      font-size: var(--t-2xl);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--text);
      line-height: 1.1
    }

    .sbadge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--fm);
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 2px;
      margin-left: 8px;
      vertical-align: middle;
      white-space: nowrap
    }

    .sbadge.live {
      background: rgba(184, 255, 38, .1);
      border: 1px solid rgba(184, 255, 38, .25);
      color: var(--lime)
    }

    .sbadge.dev {
      background: rgba(244, 199, 62, .08);
      border: 1px solid rgba(244, 199, 62, .2);
      color: var(--gold)
    }

    .sbadge.tm {
      background: rgba(79, 142, 247, .08);
      border: 1px solid rgba(79, 142, 247, .2);
      color: var(--blue)
    }

    .pdesc {
      font-size: var(--t-base);
      line-height: 1.74;
      color: var(--sub)
    }

    .ptags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .ptag {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sub);
      border: 1px solid var(--dim);
      padding: 3px 10px;
      border-radius: 2px
    }

    .plink {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: auto;
      font-family: var(--fm);
      font-size: var(--t-sm);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      transition: gap .2s
    }

    .plink:hover {
      gap: 13px
    }

    .plink::after {
      content: '→'
    }

    .plink.lime {
      color: var(--lime)
    }

    .plink.gold {
      color: var(--gold)
    }

    .hexgrid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      padding: 16px;
      width: 100%;
      height: 100%
    }

    .hcell {
      aspect-ratio: 1;
      background: var(--dim);
      border-radius: 2px;
      opacity: .25;
      transition: opacity .35s, background .35s
    }

    .hcell.on {
      background: var(--lime);
      opacity: .65
    }

    .hcell.err {
      background: var(--accent);
      opacity: .8
    }

    #about {
      background: var(--s1)
    }

    .about-grid {
      display: grid;
      grid-template-columns: 220px 1fr 340px;
      gap: 56px;
      align-items: start
    }

    .photo-frame {
      position: relative;
      width: 220px
    }

    .photo-frame::before {
      content: '';
      position: absolute;
      top: -6px;
      left: -6px;
      right: 6px;
      bottom: 6px;
      border: 1px solid rgba(255, 59, 31, .28);
      border-radius: 3px;
      z-index: 0
    }

    .photo-frame::after {
      content: '';
      position: absolute;
      bottom: -6px;
      right: -6px;
      left: 6px;
      top: 6px;
      border: 1px solid rgba(255, 59, 31, .1);
      border-radius: 3px;
      z-index: 0
    }

    .photo-img {
      position: relative;
      z-index: 1;
      width: 220px;
      height: 260px;
      object-fit: cover;
      object-position: center top;
      border-radius: 3px;
      filter: grayscale(15%) contrast(1.06);
      display: block
    }

    .photo-placeholder {
      position: relative;
      z-index: 1;
      width: 220px;
      height: 260px;
      background: var(--s2);
      border: 1px dashed var(--dim);
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px
    }

    .pp-icon {
      font-size: 24px;
      opacity: .2
    }

    .pp-txt {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      color: var(--sub);
      text-align: center;
      padding: 0 16px;
      line-height: 1.7;
      text-transform: uppercase
    }

    .photo-cap {
      margin-top: 16px
    }

    .photo-cap strong {
      display: block;
      font-size: var(--t-base);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px
    }

    .photo-cap span {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      color: var(--sub)
    }

    .photo-cap a {
      color: var(--accent);
      transition: opacity .2s
    }

    .photo-cap a:hover {
      opacity: .7
    }

    .about-quote {
      font-family: var(--fs);
      font-style: italic;
      font-size: clamp(22px, 3vw, 44px);
      line-height: 1.18;
      color: var(--text);
      border-left: 2px solid var(--accent);
      padding-left: 26px;
      margin-bottom: 36px
    }

    .about-body {
      font-size: var(--t-base);
      line-height: 1.88;
      color: var(--sub)
    }

    .about-body em {
      color: var(--text);
      font-style: normal
    }

    .about-body p {
      margin-bottom: 18px
    }

    .about-awards {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--border)
    }

    .aw-chip {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .08em;
      text-transform: uppercase;
      border: 1px solid var(--dim);
      padding: 5px 12px;
      border-radius: 2px;
      color: var(--sub);
      transition: border-color .2s, color .2s
    }

    .aw-chip:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    .aw-chip.hot {
      border-color: rgba(244, 199, 62, .3);
      color: var(--gold)
    }

    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      margin-bottom: 2px
    }

    .stat-cell {
      background: var(--s2);
      border: 1px solid var(--border);
      padding: 22px
    }

    .stat-n {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--text)
    }

    .stat-n sup {
      font-size: .45em;
      color: var(--accent)
    }

    .stat-l {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--sub);
      margin-top: 5px
    }

    .sc {
      background: var(--s2);
      border: 1px solid var(--border);
      padding: 26px;
      margin-bottom: 2px
    }

    .sc-lbl {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 10px
    }

    .sc-ttl {
      font-size: var(--t-lg);
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 7px
    }

    .sc-desc {
      font-size: var(--t-sm);
      color: var(--sub);
      line-height: 1.72
    }

    .sc-tag {
      display: inline-block;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--dim);
      padding: 4px 11px;
      color: var(--sub);
      border-radius: 2px;
      margin-top: 10px
    }

    .intl-tag {
      border-color: rgba(79, 142, 247, .22);
      color: var(--blue)
    }

    #certs {
      background: var(--bg)
    }

    .certs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-bottom: 2px
    }

    .cert {
      background: var(--s1);
      border: 1px solid var(--border);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transition: border-color .25s
    }

    .cert::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--dim)
    }

    .cert.google::after {
      background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335)
    }

    .cert.google:hover {
      border-color: rgba(66, 133, 244, .3)
    }

    .cert.ms::after {
      background: var(--blue)
    }

    .cert.ms:hover {
      border-color: rgba(79, 142, 247, .3)
    }

    .cert.ensono::after {
      background: var(--gold)
    }

    .cert.ensono:hover {
      border-color: rgba(244, 199, 62, .3)
    }

    .cert.be10x::after {
      background: var(--accent)
    }

    .cert.be10x:hover {
      border-color: rgba(255, 59, 31, .3)
    }

    .cert-issuer {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .cert-issuer::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }

    .cert.google .cert-issuer {
      color: #5B8EF0
    }

    .cert.ms .cert-issuer {
      color: var(--blue)
    }

    .cert.ensono .cert-issuer {
      color: var(--gold)
    }

    .cert.be10x .cert-issuer {
      color: var(--accent)
    }

    .cert-name {
      font-size: var(--t-base);
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      margin-bottom: 8px
    }

    .cert-date {
      font-family: var(--fm);
      font-size: var(--t-sm);
      letter-spacing: .06em;
      color: var(--sub)
    }

    .cert-date .live {
      color: var(--lime)
    }

    .awards-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px
    }

    .aw-card {
      background: var(--s1);
      border: 1px solid var(--border);
      padding: 24px;
      transition: border-color .25s
    }

    .aw-card:hover {
      border-color: rgba(244, 199, 62, .2)
    }

    .aw-icon {
      font-size: 20px;
      margin-bottom: 10px;
      display: block;
      opacity: .65
    }

    .aw-name {
      font-size: var(--t-base);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px
    }

    .aw-by {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sub);
      line-height: 1.6
    }

    #ask {
      background: var(--s1)
    }

    .ask-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start
    }

    .ask-title {
      font-family: var(--fs);
      font-style: italic;
      font-size: clamp(30px, 3.8vw, 54px);
      line-height: 1.1;
      color: var(--text);
      margin-bottom: 16px
    }

    .ask-sub {
      font-size: var(--t-base);
      line-height: 1.8;
      color: var(--sub);
      margin-bottom: 28px
    }

    .ask-sub a {
      color: var(--accent);
      border-bottom: 1px solid rgba(255, 59, 31, .3)
    }

    .ask-sub a:hover {
      border-color: var(--accent)
    }

    .ask-chips {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .chip {
      font-family: var(--fm);
      font-size: var(--t-sm);
      letter-spacing: .05em;
      border: 1px solid var(--dim);
      padding: 10px 16px;
      border-radius: 2px;
      color: var(--sub);
      text-align: left;
      transition: border-color .2s, color .2s, background .2s
    }

    .chip:hover {
      border-color: var(--accent);
      color: var(--text);
      background: rgba(255, 59, 31, .04)
    }

    .chat-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 460px
    }

    .chat-top {
      background: var(--s2);
      border-bottom: 1px solid var(--border);
      padding: 11px 15px;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .cdots {
      display: flex;
      gap: 5px
    }

    .cdot {
      width: 8px;
      height: 8px;
      border-radius: 50%
    }

    .cdot:nth-child(1) {
      background: #FF5F57
    }

    .cdot:nth-child(2) {
      background: #FFBD2E
    }

    .cdot:nth-child(3) {
      background: #28CA41
    }

    .ctitle {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--sub);
      margin-left: 4px
    }

    .cmodel {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      color: rgba(184, 255, 38, .5);
      margin-left: auto;
      background: rgba(184, 255, 38, .06);
      border: 1px solid rgba(184, 255, 38, .12);
      padding: 2px 9px;
      border-radius: 2px
    }

    .cmsgs {
      flex: 1;
      overflow-y: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 13px;
      scrollbar-width: thin;
      scrollbar-color: var(--dim) transparent
    }

    .cmsg {
      max-width: 88%;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .cmsg.user {
      align-self: flex-end
    }

    .cmsg-c {
      font-size: var(--t-sm);
      line-height: 1.68;
      padding: 10px 14px;
      border-radius: 3px
    }

    .cmsg.ai .cmsg-c {
      background: var(--s2);
      color: var(--text);
      border: 1px solid var(--border)
    }

    .cmsg.user .cmsg-c {
      background: var(--accent);
      color: #fff
    }

    .cmsg-lbl {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .typing {
      display: flex;
      gap: 4px;
      padding: 11px 14px
    }

    .tdot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--sub);
      animation: typing .9s ease-in-out infinite
    }

    .tdot:nth-child(2) {
      animation-delay: .15s
    }

    .tdot:nth-child(3) {
      animation-delay: .3s
    }

    @keyframes typing {

      0%,
      60%,
      100% {
        opacity: .3;
        transform: translateY(0)
      }

      30% {
        opacity: 1;
        transform: translateY(-4px)
      }
    }

    .cfooter {
      border-top: 1px solid var(--border);
      padding: 11px 15px;
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .cfooter-input {
      display: flex;
      gap: 8px
    }

    .cinput {
      flex: 1;
      background: var(--s2);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 10px 14px;
      font-family: var(--fm);
      font-size: var(--t-sm);
      color: var(--text);
      outline: none;
      transition: border-color .2s
    }

    .cinput:focus {
      border-color: var(--accent)
    }

    .cinput::placeholder {
      color: var(--sub)
    }

    .csend {
      background: var(--accent);
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 3px;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .08em;
      transition: opacity .2s
    }

    .csend:hover {
      opacity: .85
    }

    .csend:disabled {
      opacity: .4
    }

    .nvidia-attr {
      font-family: var(--fm);
      font-size: 9px;
      letter-spacing: .06em;
      color: var(--sub);
      opacity: .5;
      padding: 6px 0 2px;
      text-align: center
    }

    #exp {
      background: var(--bg)
    }

    .tl {
      position: relative
    }

    .tl::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--border)
    }

    .tl-item {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 44px;
      padding: 38px 0 38px 32px;
      border-bottom: 1px solid var(--border);
      position: relative
    }

    .tl-item::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 44px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--bg);
      border: 1.5px solid var(--sub);
      transition: background .2s, border-color .2s
    }

    .tl-item:hover::before {
      background: var(--accent);
      border-color: var(--accent)
    }

    .tl-item.cur::before {
      background: var(--lime);
      border-color: var(--lime);
      box-shadow: 0 0 6px var(--lime)
    }

    .tl-date {
      font-family: var(--fm);
      font-size: var(--t-sm);
      letter-spacing: .08em;
      color: var(--sub);
      padding-top: 2px;
      line-height: 1.65
    }

    .tl-date strong {
      display: block;
      color: var(--text);
      font-size: var(--t-sm);
      font-weight: 700;
      margin-bottom: 3px
    }

    .tl-co {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 2px
    }

    .tl-role {
      font-size: var(--t-lg);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 6px;
      line-height: 1.2
    }

    .tl-sub {
      font-size: var(--t-sm);
      color: var(--sub);
      margin-bottom: 14px;
      font-style: italic
    }

    .tl-ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 600px
    }

    .tl-ul li {
      font-size: var(--t-base);
      line-height: 1.72;
      color: var(--sub);
      padding-left: 18px;
      position: relative
    }

    .tl-ul li::before {
      content: '✅';
      position: absolute;
      left: 0;
      font-size: 11px;
      top: 2px
    }

    .tl-tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 14px
    }

    .ttag {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid var(--dim);
      padding: 4px 10px;
      color: var(--sub);
      border-radius: 2px
    }

    #contact {
      background: var(--s1)
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 72px;
      align-items: start
    }

    .contact-hl {
      font-size: clamp(44px, 7vw, 96px);
      font-weight: 700;
      line-height: .88;
      letter-spacing: -.035em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 26px
    }

    .contact-hl span {
      color: var(--accent)
    }

    .contact-sub {
      font-size: var(--t-base);
      line-height: 1.8;
      color: var(--sub);
      max-width: 440px;
      margin-bottom: 36px
    }

    .clinks {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .clink {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg);
      border: 1px solid var(--border);
      padding: 18px 24px;
      transition: border-color .25s, background .25s
    }

    .clink:hover {
      border-color: var(--accent);
      background: rgba(255, 59, 31, .03)
    }

    .clink.spl {
      border-color: rgba(184, 255, 38, .14)
    }

    .clink.spl:hover {
      border-color: var(--lime);
      background: rgba(184, 255, 38, .04)
    }

    .cl-lbl {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .cl-val {
      font-size: var(--t-sm);
      font-weight: 500;
      color: var(--text)
    }

    .cl-arr {
      color: var(--sub);
      font-size: 14px;
      transition: transform .2s, color .2s
    }

    .clink:hover .cl-arr {
      transform: translateX(4px);
      color: var(--accent)
    }

    .clink.spl:hover .cl-arr {
      color: var(--lime)
    }

    .avail-card {
      background: var(--bg);
      border: 1px solid var(--border);
      padding: 30px;
      margin-bottom: 2px
    }

    .avail-st {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--lime);
      margin-bottom: 14px
    }

    .avail-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 6px var(--lime);
      animation: blink 2.5s ease-in-out infinite
    }

    .avail-ttl {
      font-size: var(--t-xl);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px
    }

    .avail-desc {
      font-size: var(--t-sm);
      color: var(--sub);
      line-height: 1.75
    }

    .avail-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 14px
    }

    .av-t {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid var(--dim);
      padding: 4px 11px;
      border-radius: 2px;
      color: var(--sub)
    }

    .av-t.intl {
      border-color: rgba(79, 142, 247, .22);
      color: var(--blue)
    }

    footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 28px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px
    }

    .foot-name {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--sub)
    }

    .foot-name span {
      color: var(--accent)
    }

    .foot-copy {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .06em;
      color: var(--sub)
    }

    .foot-links {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .foot-link {
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--sub);
      transition: color .2s
    }

    .foot-link:hover {
      color: var(--text)
    }

    .foot-template-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: var(--fm);
      font-size: var(--t-xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid rgba(184, 255, 38, .2);
      color: rgba(184, 255, 38, .6);
      padding: 6px 14px;
      border-radius: 2px;
      transition: border-color .2s, color .2s, background .2s
    }

    .foot-template-btn:hover {
      border-color: var(--lime);
      color: var(--lime);
      background: rgba(184, 255, 38, .05)
    }

    #term {
      position: fixed;
      inset: 0;
      z-index: 7000;
      background: rgba(4, 4, 6, .97);
      display: flex;
      flex-direction: column;
      font-family: var(--fm);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .28s, visibility .28s
    }

    #term.open {
      opacity: 1;
      visibility: visible;
      pointer-events: all
    }

    .tbar {
      background: var(--s2);
      border-bottom: 1px solid var(--border);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .tbtn {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .tbtn.r {
      background: #FF5F57
    }

    .tbtn.y {
      background: #FFBD2E
    }

    .tbtn.g {
      background: #28CA41
    }

    .ttitle {
      font-size: var(--t-xs);
      letter-spacing: .12em;
      color: var(--sub);
      margin: 0 auto
    }

    .thelp {
      font-size: var(--t-xs);
      letter-spacing: .08em;
      color: var(--sub);
      opacity: .5
    }

    .tbody {
      flex: 1;
      overflow-y: auto;
      padding: 24px 28px
    }

    .tout {
      font-size: var(--t-sm);
      line-height: 1.7;
      color: #90ee90;
      white-space: pre-wrap
    }

    .tout .d {
      color: var(--sub)
    }

    .tout .a {
      color: var(--accent)
    }

    .tout .g {
      color: var(--gold)
    }

    .tout .l {
      color: var(--lime)
    }

    .tout .w {
      color: var(--text)
    }

    .tout .b {
      color: var(--blue)
    }

    .tin-row {
      display: flex;
      align-items: center;
      gap: 8px;
      border-top: 1px solid var(--border);
      padding: 15px 28px;
      flex-shrink: 0
    }

    .tprompt {
      font-size: var(--t-sm);
      color: var(--lime);
      flex-shrink: 0
    }

    .tinput {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-family: var(--fm);
      font-size: var(--t-sm);
      color: var(--text);
      caret-color: var(--lime)
    }

    #tsb {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 600;
      background: rgba(17, 16, 25, .94);
      border-top: 1px solid var(--border);
      padding: 6px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(10px)
    }

    .tsb-l {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .tsb-key {
      font-family: var(--fm);
      font-size: 10px;
      background: var(--dim);
      border: 1px solid rgba(255, 255, 255, .12);
      color: var(--lime);
      padding: 1px 7px;
      border-radius: 2px;
      letter-spacing: .06em
    }

    .tsb-label {
      font-family: var(--fm);
      font-size: 10px;
      letter-spacing: .1em;
      color: var(--sub)
    }

    .tsb-label strong {
      color: var(--text)
    }

    .tsb-r {
      display: flex;
      gap: 6px
    }

    .tsb-cmd {
      font-family: var(--fm);
      font-size: 10px;
      color: var(--sub);
      opacity: .6
    }

    .tsb-cmd .c {
      color: var(--lime);
      opacity: 1
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: 1px solid var(--dim);
      padding: 8px 10px;
      border-radius: 3px;
      cursor: pointer !important;
      flex-shrink: 0
    }

    .nav-hamburger span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--text);
      border-radius: 1px;
      transition: transform .25s, opacity .25s
    }

    .nav-hamburger.open span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg)
    }

    .nav-hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0)
    }

    .nav-hamburger.open span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg)
    }

    #mob-nav {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 690;
      background: rgba(6, 6, 10, .98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      display: flex;
      flex-direction: column;
      padding: 28px 24px 32px;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .25s, visibility .25s, transform .25s;
    }

    #mob-nav.open {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .mob-link {
      font-family: var(--fm);
      font-size: 20px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--sub);
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
      display: block;
      transition: color .2s;
    }

    .mob-link:active,
    .mob-link:hover {
      color: var(--text)
    }

    .mob-actions {
      display: flex;
      gap: 10px;
      margin-top: 28px;
      flex-wrap: wrap
    }

    .mob-actions .btn-hire {
      cursor: pointer !important
    }

    @media(max-width:1100px) {
      .about-grid {
        grid-template-columns: 200px 1fr;
        gap: 40px
      }

      .about-grid .about-side {
        grid-column: span 2
      }

      .certs-grid {
        grid-template-columns: 1fr 1fr
      }

      .awards-row {
        grid-template-columns: 1fr 1fr
      }

      .persona-grid {
        grid-template-columns: 1fr 1fr
      }

      .pcard.enterprise,
      .pcard.founders,
      .pcard.developers,
      .pcard.mentees,
      .pcard.collab {
        grid-column: span 1
      }
    }

    @media(max-width:900px) {
      html {
        scroll-padding-top: 48px
      }

      body {
        padding-bottom: 40px
      }

      #sponsor-strip {
        margin-top: 44px;
        padding: 7px 16px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center
      }

      .strip-txt {
        font-size: 9px;
        letter-spacing: .1em
      }

      nav {
        padding: 12px 20px
      }

      .nav-links {
        display: none
      }

      .nav-hamburger {
        display: flex
      }

      .btn-sponsor,
      .btn-term {
        display: none
      }

      .btn-hire {
        font-size: 10px;
        padding: 7px 14px
      }

      #boot {
        padding: 28px 20px
      }

      .bl {
        font-size: 11px
      }

      #hero {
        padding: 64px 20px 52px;
        min-height: 100svh
      }

      .hero-ghost {
        display: none
      }

      .hero-vtag {
        display: none
      }

      .hero-hl {
        font-size: clamp(38px, 12vw, 68px);
        margin-bottom: 28px;
        line-height: .9
      }

      .hr {
        gap: 10px
      }

      .hero-kicker {
        font-size: 9px;
        letter-spacing: .14em;
        margin-bottom: 14px
      }

      .hero-foot {
        flex-direction: column;
        gap: 20px
      }

      .hero-desc {
        font-size: 15px;
        max-width: 100%
      }

      .hero-meta {
        align-items: flex-start;
        width: 100%
      }

      .hero-tags {
        justify-content: flex-start
      }

      .hero-stats {
        gap: 14px;
        flex-wrap: wrap;
        padding-top: 12px
      }

      .hstat .n {
        font-size: 20px
      }

      .hstat .l {
        font-size: 9px;
        letter-spacing: .1em
      }

      .sec {
        padding: 56px 20px
      }

      .sec-head {
        margin-bottom: 36px
      }

      .services-intro {
        font-size: var(--t-base);
        margin-bottom: 28px
      }

      .persona-grid {
        grid-template-columns: 1fr;
        gap: 2px
      }

      .pcard {
        padding: 24px 20px;
        grid-column: span 1 !important
      }

      .term-hint {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 18px
      }

      .th-cmds {
        display: none
      }

      .pgrid {
        grid-template-columns: 1fr
      }

      .proj {
        padding: 20px 16px;
        min-height: auto;
        gap: 12px
      }

      .pfeat {
        grid-column: span 1;
        flex-direction: column;
        gap: 16px;
        min-height: auto
      }

      .pfeat-body {
        gap: 12px
      }

      .pvis {
        width: 100%;
        height: 130px
      }

      .pname {
        font-size: 22px
      }

      .pdesc {
        font-size: 15px
      }

      .amrutya-inner {
        flex-direction: column;
        gap: 16px
      }

      .amrutya-vis {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding-top: 0;
        border-top: 1px solid var(--border);
        padding-top: 16px
      }

      .cm-name {
        font-size: 10px;
        writing-mode: horizontal-tb;
        letter-spacing: .08em
      }

      .port-terminal {
        padding: 10px 12px;
        font-size: 10px
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .about-side {
        grid-column: span 1
      }

      .photo-frame,
      .photo-img,
      .photo-placeholder {
        width: 150px;
        height: 190px
      }

      .about-quote {
        font-size: clamp(20px, 5.5vw, 32px)
      }

      .about-body {
        font-size: 15px
      }

      .certs-grid {
        grid-template-columns: 1fr;
        gap: 2px
      }

      .awards-row {
        grid-template-columns: 1fr 1fr;
        gap: 2px
      }

      .cert {
        padding: 22px 18px
      }

      .aw-card {
        padding: 18px
      }

      .ask-grid {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .chat-box {
        height: 360px
      }

      .ask-chips {
        gap: 6px
      }

      .tl-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 24px
      }

      .tl-item::before {
        top: 8px
      }

      .tl-role {
        font-size: var(--t-base)
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .clink {
        padding: 14px 16px;
        flex-wrap: nowrap;
        gap: 8px
      }

      .cl-lbl {
        flex-shrink: 0
      }

      .cl-val {
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        text-align: right
      }

      .cl-arr {
        flex-shrink: 0
      }

      footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 20px 16px
      }

      .foot-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px
      }

      .foot-copy {
        display: none
      }

      #tsb {
        padding: 5px 16px
      }

      .tsb-r {
        display: none
      }

      #cr,
      #cd {
        display: none
      }

      * {
        cursor: auto !important
      }
    }

    @media(max-width:480px) {
      #sponsor-strip {
        flex-direction: column;
        gap: 5px;
        padding: 10px 16px;
        text-align: center
      }

      nav {
        padding: 10px 16px
      }

      .btn-hire {
        font-size: 9px;
        padding: 6px 12px
      }

      #hero {
        padding: 60px 16px 44px
      }

      .hero-hl {
        font-size: clamp(32px, 11vw, 52px)
      }

      .hser {
        display: none
      }

      .sec {
        padding: 48px 16px
      }

      .pcard {
        padding: 20px 16px
      }

      .proj {
        padding: 16px 14px;
        gap: 10px
      }

      .pfeat {
        gap: 12px
      }

      .pvis {
        height: 110px
      }

      .pname {
        font-size: 20px
      }

      .port-terminal {
        display: none
      }

      .hstat .n {
        font-size: 18px
      }

      .hstat {
        flex: 1;
        min-width: 60px
      }

      .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
      }

      .awards-row {
        grid-template-columns: 1fr
      }

      .about-awards {
        gap: 5px
      }

      .aw-chip {
        font-size: 9px;
        padding: 4px 9px
      }

      .cert {
        padding: 18px 14px
      }

      .chat-box {
        height: 320px
      }

      .clink {
        padding: 12px 14px
      }

      footer {
        padding: 18px 14px
      }

      .foot-template-btn {
        font-size: 9px;
        padding: 5px 10px
      }
    }