/* embedded fonts */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/geist-400.woff2) format("woff2")
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/geist-500.woff2) format("woff2")
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/geist-600.woff2) format("woff2")
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/geist-700.woff2) format("woff2")
}

:root {
  --fd: "Geist", -apple-system, system-ui, sans-serif;
  --fb: "Geist", -apple-system, system-ui, sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --ink: #101114;
  --muted: #55575e;
  --faint: #6d6f76;
  --line: #e8e8ea;
  --line-2: #f1f1f3;
  --accent: #0f62fe;
  --accent-soft: rgba(15, 98, 254, .07);
  --ok: #0f9d63;
  --pos: #0f9d63;
  --ease: cubic-bezier(.22, .68, 0, 1);
  --ease2: cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="dark"] {
  --bg: #0d0e10;
  --surface: #0d0e10;
  --surface-2: #191a1e;
  --ink: #f1f1f3;
  --muted: #a4a6ad;
  --faint: #82848c;
  --line: #242529;
  --line-2: #1a1b1f;
  --accent: #5b95ff;
  --accent-soft: rgba(91, 149, 255, .1);
  --pos: #37c98d;
  --ok: #2fbf83;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  overflow-x: hidden;
  transition: background .45s var(--ease), color .45s var(--ease);
  -webkit-font-smoothing: antialiased
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--fd);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.024em
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px
}

* {
  -webkit-tap-highlight-color: transparent
}

@media (hover:none) {
  .quote:hover {
    transform: none;
    box-shadow: none
  }

  .chip:hover {
    transform: none
  }
}

.grain {
  display: none
}

/* perf: blur baked into the gradient — no filter rasterization while orbs drift */
.orb {
  display: block;
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: .42;
  will-change: transform
}

.orb.a {
  width: 720px;
  height: 720px;
  top: -130px;
  left: calc(8% - 90px);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, color-mix(in srgb, var(--accent) 15%, transparent) 38%, transparent 74%);
  animation: orbA 26s ease-in-out infinite alternate
}

.orb.b {
  width: 660px;
  height: 660px;
  top: 150px;
  right: calc(4% - 90px);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, #8b5cf6 31%, transparent) 0%, color-mix(in srgb, #8b5cf6 13%, transparent) 38%, transparent 74%);
  animation: orbB 32s ease-in-out infinite alternate
}

@keyframes orbA {
  0% {
    transform: translate(0, 0) scale(1)
  }

  33% {
    transform: translate(240px, 90px) scale(1.12)
  }

  66% {
    transform: translate(380px, 220px) scale(1.2)
  }

  100% {
    transform: translate(150px, 320px) scale(1.06)
  }
}

@keyframes orbB {
  0% {
    transform: translate(0, 0) scale(1)
  }

  33% {
    transform: translate(-210px, 130px) scale(1.15)
  }

  66% {
    transform: translate(-360px, -10px) scale(1.22)
  }

  100% {
    transform: translate(-120px, -90px) scale(1.06)
  }
}

@media (prefers-reduced-motion:reduce) {
  .orb {
    animation: none
  }
}

@media (max-width:640px) {
  .orb {
    opacity: .34
  }

  .orb.a {
    width: 480px;
    height: 480px
  }

  .orb.b {
    width: 440px;
    height: 440px
  }
}

.eyebrow {
  display: none !important
}

.wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative
}

section {
  position: relative
}

/* NAV — quiet top bar */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  background: none;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease)
}

.nav-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 15px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 8px;
  background: none;
  border: none;
  box-shadow: none
}

.brand {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 11px
}

.brand-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line)
}

.brand-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15
}

.brand .brand-name {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--ink) 92%, transparent)
}

.brand .brand-role {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: 2px
}

.brand span {
  color: var(--accent)
}

/* pill segmented nav */
.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px)
}

.pill-ind {
  position: absolute;
  z-index: 0;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(0);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .28s var(--ease);
  pointer-events: none
}

.pill-ind.on {
  opacity: 1
}

.pill-ind-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.pill-ind-hover {
  background: rgba(255, 255, 255, .13)
}

.pill-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--muted);
  transition: color .28s var(--ease)
}

.pill-item:hover {
  color: var(--ink);
  background: none
}

.pill-item.active {
  color: var(--ink)
}

@media(max-width:1040px) {
  .pill-item {
    padding: 8px 12px;
    font-size: 13.5px;
    gap: 7px
  }
}

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

@media(min-width:901px) {
  .nav .brand {
    display: none
  }

  .nav-inner {
    justify-content: flex-end
  }
}

.langseg {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  height: 38px;
  box-sizing: border-box
}

.langseg-ind {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  opacity: 1;
  pointer-events: none;
  transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease)
}

.langseg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 14px;
  border-radius: 999px;
  line-height: 1;
  transition: color .25s var(--ease), background .25s var(--ease)
}

.langseg-btn:hover {
  color: var(--ink)
}

.langseg-btn.active {
  background: none;
  color: var(--ink)
}

/* desktop: collapsible lang switcher — hover to expand,
collapse shows selected */
@media (hover:hover) and (pointer:fine) and (min-width:901px) {
  .langseg {
    gap: 0;
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3)
  }

  .langseg-btn {
    margin: 0 1px;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    max-width: 64px;
    transition: max-width .45s var(--ease), padding .45s var(--ease), margin .45s var(--ease), opacity .28s var(--ease), background .25s var(--ease), color .25s var(--ease)
  }

  .langseg:not(:hover):not(:focus-within) .langseg-btn:not(.active) {
    max-width: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition-delay: .18s
  }

  .langseg:not(:hover):not(:focus-within) .langseg-ind {
    opacity: 0;
    transition-delay: .18s
  }
}

#theme-ic {
  fill: currentColor;
  stroke: none
}

.burger {
  display: none
}

.burger span {
  display: block;
  width: 16px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .45s var(--ease2), opacity .3s var(--ease)
}

.burger span+span {
  margin-top: 4px
}

body.menu-open .burger span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg)
}

body.menu-open .burger span:nth-child(2) {
  opacity: 0
}

body.menu-open .burger span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg)
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity .4s var(--ease), visibility .4s var(--ease)
}

body.menu-open .overlay {
  opacity: 1;
  visibility: visible
}

body.menu-open {
  overflow: hidden
}

body.scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden
}

.overlay a {
  font-family: var(--fd);
  font-size: clamp(1.8rem, 7.5vw, 2.5rem);
  font-weight: 700;
  color: var(--ink);
  padding: 9px 0;
  transform: translateY(22px);
  opacity: 0;
  transition: transform .5s var(--ease2), opacity .5s var(--ease)
}

body.menu-open .overlay a {
  transform: none;
  opacity: 1
}

body.menu-open .overlay a:nth-child(1) {
  transition-delay: .05s
}

body.menu-open .overlay a:nth-child(2) {
  transition-delay: .1s
}

body.menu-open .overlay a:nth-child(3) {
  transition-delay: .15s
}

body.menu-open .overlay a:nth-child(4) {
  transition-delay: .2s
}

body.menu-open .overlay a:nth-child(5) {
  transition-delay: .25s
}

.overlay a span {
  color: var(--accent)
}

/* HERO — quiet,
type-first */
.hero {
  min-height: auto;
  display: block;
  padding: 168px 0 40px
}

.hero .wrap {
  position: relative;
  z-index: 1
}

.hero-grid {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  text-align: center
}

/* HERO ORBIT (eclipse) */
.orbit {
  position: relative;
  width: min(600px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto 42px
}

/* desktop: size the orbit to the viewport height so the headline lands on the first screen */
@media(min-width:641px) {
  .hero {
    padding-top: clamp(96px, 14vh, 168px)
  }

  .orbit {
    width: min(600px, 92vw, max(420px, 100vh - 400px));
    width: min(600px, 92vw, max(420px, 100svh - 400px))
  }
}

.orbit .oring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  pointer-events: none
}

.orbit .r1 {
  width: 100%;
  height: 100%
}

.orbit .r2 {
  width: 74%;
  height: 74%
}

.orbit .r3 {
  width: 47%;
  height: 47%
}

.orbit .ospin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none
}

.orbit .ospin .odot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent) 45%, transparent)
}

.orbit .sA {
  width: 100%;
  height: 100%;
  animation: ospin 46s linear infinite
}

.orbit .sB {
  width: 74%;
  height: 74%;
  animation: ospin 34s linear infinite reverse
}

.orbit .sC {
  width: 47%;
  height: 47%;
  animation: ospin 26s linear infinite
}

.orbit .sD {
  width: 100%;
  height: 100%;
  animation: ospin 62s linear infinite
}

.orbit .sD .odot {
  top: auto;
  bottom: 0;
  left: 34%
}

@keyframes ospin {
  to {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

.orbit .ocore-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 42%, transparent 68%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate3d(var(--fx, 0px), var(--fy, 0px), var(--fz, 0px));
  width: 35%;
  height: 35%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 65%, #fff), 0 0 42px 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 96px 20px color-mix(in srgb, var(--accent) 26%, transparent)
}

.orbit .opill {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 11px 16px;
  border-radius: 40px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, #fff), color-mix(in srgb, var(--surface-2) 74%, transparent));
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 12px 28px -18px rgba(0, 0, 0, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: opillfloat 6s ease-in-out infinite
}

.orbit .p1 {
  left: 26%;
  top: 33%
}

.orbit .p2 {
  left: 64%;
  top: 30%
}

.orbit .p3 {
  left: 80%;
  top: 18%
}

.orbit .p4 {
  left: 81%;
  top: 48%
}

.orbit .p5 {
  left: 72%;
  top: 64%
}

.orbit .p6 {
  left: 33%;
  top: 68%
}

.orbit .p7 {
  left: 17%;
  top: 51%
}

.orbit .p8 {
  left: 16%;
  top: 80%
}

.orbit .p2 {
  animation-delay: -1s
}

.orbit .p3 {
  animation-delay: -2s
}

.orbit .p4 {
  animation-delay: -3s
}

.orbit .p5 {
  animation-delay: -4s
}

.orbit .p6 {
  animation-delay: -1.5s
}

.orbit .p7 {
  animation-delay: -2.5s
}

.orbit .p8 {
  animation-delay: -3.5s
}

@keyframes opillfloat {

  0%,
  100% {
    translate: 0 -4px
  }

  50% {
    translate: 0 4px
  }
}

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

  .orbit .ospin,
.orbit .opill {
    animation: none
  }
}

@media(max-width:640px) {
  .orbit {
    margin-bottom: 28px
  }

  .orbit .opill {
    font-size: 9px;
    padding: 8px 10px;
    letter-spacing: .03em
  }

  .orbit .odot {
    width: 6px;
    height: 6px
  }
}

.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  letter-spacing: -.028em;
  line-height: 1.15;
  font-weight: 700;
  max-width: 22ch;
  margin: 0 auto
}

.hero h1 em {
  font-style: normal;
  color: var(--accent)
}

.hl {
  font-size: 17.5px;
  color: var(--muted);
  max-width: 56ch;
  margin: 22px auto 0;
  line-height: 1.65
}

/* buttons (contact only) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), opacity .35s var(--ease), background .35s var(--ease)
}

.btn .ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s var(--ease2)
}

.btn .ic svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8
}

.btn:active {
  transform: scale(.97)
}

.btn-primary {
  background: var(--ink);
  color: var(--bg)
}

/* back-to-top: circular liquid-metal button,
appears after scrolling down */
.to-top {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  isolation: isolate;
  color: #f3f5f9;
  background: linear-gradient(180deg, #2e3036, #17181c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 14px 30px -18px rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease)
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none
}

.to-top.show:hover {
  transform: translateY(-2px)
}

.to-top:active {
  transform: scale(.94)
}

.to-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.to-top::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  z-index: -1;
  background: conic-gradient(from var(--nangle),
      rgba(255, 255, 255, .85) 0deg, rgba(213, 223, 255, .25) 42deg, rgba(255, 213, 236, .65) 84deg,
      rgba(255, 255, 255, .12) 126deg, rgba(213, 255, 243, .55) 168deg, rgba(255, 243, 213, .2) 210deg,
      rgba(223, 213, 255, .7) 252deg, rgba(255, 255, 255, .16) 294deg, rgba(255, 222, 213, .55) 336deg,
      rgba(255, 255, 255, .85) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .8;
  animation: neonspin 5s linear infinite;
  animation-play-state: paused;
  transition: opacity .3s var(--ease)
}

.to-top.show::before {
  animation-play-state: running
}

.to-top:hover::before {
  opacity: 1
}

.to-top::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .16))
}

@media (prefers-reduced-motion:reduce) {
  .to-top::before {
    animation: none
  }
}

/* liquid-metal CTA (CSS take on the shader look) */
.btn-metal {
  position: relative;
  background: linear-gradient(180deg, #2e3036, #17181c);
  color: #f3f5f9;
  border: none;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 14px 30px -18px rgba(0, 0, 0, .9)
}

.btn-metal::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  z-index: -1;
  background: conic-gradient(from var(--nangle),
      rgba(255, 255, 255, .85) 0deg, rgba(213, 223, 255, .25) 42deg, rgba(255, 213, 236, .65) 84deg,
      rgba(255, 255, 255, .12) 126deg, rgba(213, 255, 243, .55) 168deg, rgba(255, 243, 213, .2) 210deg,
      rgba(223, 213, 255, .7) 252deg, rgba(255, 255, 255, .16) 294deg, rgba(255, 222, 213, .55) 336deg,
      rgba(255, 255, 255, .85) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: neonspin 5s linear infinite;
  opacity: .8;
  transition: opacity .3s var(--ease)
}

.btn-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .16))
}

.btn-metal:hover {
  transform: translateY(-1px)
}

.btn-metal:hover::before {
  opacity: 1
}

@media (prefers-reduced-motion:reduce) {
  .btn-metal::before {
    animation: none
  }
}

.btn-primary .ic {
  background: none
}

.btn-primary:hover {
  opacity: .88
}

.btn-primary:hover .ic {
  transform: translateX(3px)
}

/* reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);
  will-change: opacity, transform, filter
}

.reveal.vis {
  opacity: 1;
  transform: none;
  filter: blur(0)
}

.reveal.proj,
.reveal.stat,
.reveal.role,
.reveal.quote,
.reveal.about-card,
.reveal.contact-card,
.reveal.tool-grid {
  filter: none;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft)
}

.reveal.proj.vis,
.reveal.stat.vis,
.reveal.role.vis,
.reveal.quote.vis,
.reveal.about-card.vis,
.reveal.contact-card.vis,
.reveal.tool-grid.vis {
  filter: none;
  transform: none
}

.reveal.d1 {
  transition-delay: .09s
}

.reveal.d2 {
  transition-delay: .18s
}

.reveal.d3 {
  transition-delay: .27s
}

.reveal.proj {
  transform: translateY(30px) scale(.955);
  transition: opacity .55s var(--ease-soft), transform .72s cubic-bezier(.34, 1.44, .5, 1), filter .55s var(--ease-soft)
}

.reveal.proj.vis {
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .reveal.proj {
    transform: none;
    transition: opacity .3s ease
  }
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    transition: opacity .3s ease;
    transform: none;
    filter: none
  }

  .reveal.vis {
    filter: none
  }
}

/* sections */
section {
  scroll-margin-top: 80px
}

.sec-head {
  display: block;
  margin-bottom: 34px;
  border-top: 1px solid var(--line);
  padding-top: 30px
}

.sec-title {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  letter-spacing: -.02em;
  font-weight: 700
}

.sec-note {
  color: var(--muted);
  max-width: none;
  font-size: 15px;
  margin-top: 7px
}

/* ABOUT */
.about {
  padding: 0 0 64px
}

.about-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-radius: 36px;
  padding: clamp(30px, 4.5vw, 52px);
  box-shadow: none
}

.about-core {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0
}

@property --nangle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}

@keyframes neonspin {
  to {
    --nangle: 360deg
  }
}

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

  .about-card::after,
.contact-card::after {
    animation: none
  }
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 85% at 50% -10%, var(--accent-soft), transparent 60%);
  pointer-events: none
}

.about-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent 34%, transparent 62%, color-mix(in srgb, var(--accent) 40%, transparent));
  background: conic-gradient(from var(--nangle), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--accent) 55%, transparent) 255deg, color-mix(in srgb, #eaf1ff 75%, var(--accent)) 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: neonspin 5.5s linear infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent))
}

.about-card {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent)
}

.about-core {
  position: relative;
  z-index: 1
}

.about-core::after {
  display: none
}

/* 3D tilt on hover */
.about-card {
  transform-style: preserve-3d;
  will-change: transform
}

.about-card.tilt {
  transition: transform .1s ease-out
}

.about-card .about-core {
  transition: transform .3s var(--ease-soft)
}

.about-card.tilt .about-core {
  transform: translateZ(26px)
}

@media (hover:none),
(prefers-reduced-motion:reduce) {
  .about-card.tilt {
    transform: none !important
  }

  .about-card.tilt .about-core {
    transform: none
  }
}

.impact .stat {
  transform-style: preserve-3d;
  will-change: transform
}

.impact .stat.tilt {
  transition: transform .1s ease-out, border-color .3s var(--ease)
}

@media (hover:none),
(prefers-reduced-motion:reduce) {
  .impact .stat.tilt {
    transform: none !important
  }
}

.orbit {
  transform-style: preserve-3d;
  will-change: transform
}

.orbit.tilt {
  transition: transform .12s ease-out
}

.orbit-core {
  transition: transform .16s var(--ease-soft)
}

.orbit .ocore-glow {
  transition: transform .35s var(--ease-soft)
}

.orbit.tilt .orbit-core {
  --fz: 48px
}

.orbit.tilt .ocore-glow {
  transform: translate(-50%, -50%) translateZ(26px)
}

@media (hover:none),
(prefers-reduced-motion:reduce) {
  .orbit.tilt {
    transform: none !important
  }

  .orbit.tilt .orbit-core {
    --fz: 0px
  }

  .orbit.tilt .ocore-glow {
    transform: translate(-50%, -50%)
  }
}

.contact-card {
  transform-style: preserve-3d;
  will-change: transform
}

.contact-card.tilt {
  transition: transform .1s ease-out
}

@media (hover:none),
(prefers-reduced-motion:reduce) {
  .contact-card.tilt {
    transform: none !important
  }
}

/* cursor spotlight glow */
.tilt-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 38%, transparent 72%);
  mix-blend-mode: screen
}

.tilt .tilt-glow {
  opacity: .7
}

.impact .stat .tilt-glow {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 11%, transparent) 42%, transparent 72%)
}

@media (hover:none),
(prefers-reduced-motion:reduce) {
  .tilt-glow {
    display: none
  }
}

.about-top {
  display: block;
  text-align: center;
  margin-bottom: 34px
}

.about-lead {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  margin: 0 auto;
  max-width: 36ch
}

.about-lead b {
  color: var(--accent);
  font-weight: 700
}

.mini-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  font-weight: 600;
  margin-bottom: 14px
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  background: var(--bg);
  box-shadow: none;
  color: var(--ink);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease)
}

.chip:hover {
  transform: translateY(-2px);
  background: var(--accent-soft)
}

.marquee {
  position: relative;
  overflow: hidden;
  margin: 0 -6px 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marq 34s linear infinite;
  padding: 2px 0
}

.marquee:hover .marquee-track {
  animation-play-state: paused
}

.marq-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  transition: color .3s var(--ease)
}

.marq-item:hover {
  color: var(--ink)
}

.marq-star {
  width: 10px;
  height: 10px;
  fill: var(--accent);
  opacity: .85;
  margin: 0 24px;
  flex-shrink: 0
}

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

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

@media (prefers-reduced-motion:reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    gap: 6px 0
  }
}

.about-facts {
  margin-top: 6px
}

.skills-band {
  padding: 56px 0 96px
}

.skills-band .marquee {
  margin: 0 -6px
}

.skills-band .marq-item {
  font-size: 15px
}

.about-facts {
  display: flex;
  flex-direction: column
}

.fact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 13px 4px
}

.fact:first-child {
  padding-top: 4px
}

.fact:last-child {
  border-bottom: none
}

.fl {
  color: var(--muted);
  font-size: 14.5px
}

.fv {
  font-weight: 600;
  font-size: 14.5px;
  text-align: right
}

/* WORK — image-first,
quiet */
.work {
  padding: 0 0 64px
}

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px
}

.proj {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: none;
  border-radius: 32px;
  padding: 22px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)
}

.proj::before {
  display: none
}

.proj:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55)
}

.proj .core {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  display: block
}

.proj .visual {
  aspect-ratio: 16/9;
  border-radius: 26px;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  transition: none
}

.proj .visual.shotimg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer
}

.proj .visual.shotimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform .8s var(--ease);
  will-change: transform
}

.proj .visual.shotimg:hover::after,
.proj .visual.shotimg:focus-visible::after {
  transform: scale(1.05)
}

.proj .visual.shotimg::before,
.proj .visual.shotimg::after {
  display: none
}

.tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.tag-s {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--faint);
  border: none;
  border-radius: 0;
  padding: 0;
  background: none
}

.tags .tag-s {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px
}

.mods .tag-s:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: var(--faint);
  letter-spacing: 0
}

.proj h3 {
  font-size: 1.45rem;
  margin-bottom: 8px;
  letter-spacing: -.02em
}

.proj .desc {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 16px;
  max-width: 64ch
}

.proj .res {
  display: flex;
  gap: 36px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  flex-wrap: wrap
}

.proj .res .n {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink)
}

.proj .res .l {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px
}

/* IMPACT — plain numbers */
.impact {
  padding: 0 0 64px
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.stat {
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: none;
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color .3s var(--ease)
}

.stat:hover {}

.stat::after {
  display: none
}

.stat:hover {
  transform: none;
  box-shadow: none
}

.stat .n {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 2.3rem);
  letter-spacing: -.03em;
  line-height: 1
}

.stat .n em {
  font-style: normal;
  color: var(--accent)
}

.stat .l {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.5
}

.impact .stat {
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.impact .stat .n {
  font-variant-numeric: tabular-nums;
  contain: layout
}

.impact .stat .l {
  flex: 0 0 auto
}

.impact .stat .spark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: 18px;
  overflow: visible
}

.spark-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.5s ease
}

.spark-main {
  stroke-width: 2.4
}

.spark-glow {
  stroke-width: 9;
  opacity: .26
}

.stat.spark-play .spark-line {
  stroke-dashoffset: 0
}

.spark-dot,
.spark-halo {
  opacity: 0;
  transition: opacity .5s ease .7s
}

.stat.spark-play .spark-dot {
  opacity: 1;
  animation: sparkPulse 2.6s ease-in-out 1.3s infinite
}

.stat.spark-play .spark-halo {
  opacity: 1
}

@keyframes sparkPulse {

  0%,
  100% {
    r: 3.6
  }

  50% {
    r: 4.5
  }
}

/* one-shot light running along the sparkline: enters at the start,
exits at the end,
never loops */
.spark-runner {
  stroke: url(#runGrad);
  stroke-linecap: round;
  opacity: 0
}

.spark-runner.r1 {
  stroke-width: 3.4;
  stroke-opacity: .13;
  stroke-dasharray: .17 1.4;
  stroke-dashoffset: .185
}

.spark-runner.r2 {
  stroke-width: 2.8;
  stroke-opacity: .3;
  stroke-dasharray: .11 1.4;
  stroke-dashoffset: .155
}

.spark-runner.r3 {
  stroke-width: 2.2;
  stroke-opacity: .8;
  stroke-dasharray: .05 1.4;
  stroke-dashoffset: .125
}

.stat.spark-play .spark-runner {
  opacity: 1
}

.stat.spark-play .spark-runner.r1 {
  animation: sparkRunA 3.6s linear .95s infinite
}

.stat.spark-play .spark-runner.r2 {
  animation: sparkRunB 3.6s linear .95s infinite
}

.stat.spark-play .spark-runner.r3 {
  animation: sparkRunC 3.6s linear .95s infinite
}

@keyframes sparkRunA {
  from {
    stroke-dashoffset: .185
  }

  to {
    stroke-dashoffset: -1.015
  }
}

@keyframes sparkRunB {
  from {
    stroke-dashoffset: .155
  }

  to {
    stroke-dashoffset: -1.045
  }
}

@keyframes sparkRunC {
  from {
    stroke-dashoffset: .125
  }

  to {
    stroke-dashoffset: -1.075
  }
}

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

@media (prefers-reduced-motion:reduce) {
  .spark-line {
    transition: none;
    stroke-dashoffset: 0
  }

  .spark-dot,
.spark-halo {
    opacity: 1;
    transition: none;
    animation: none
  }
}

.stats .stat {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 28px;
  padding: 30px 28px;
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.stats .stat::before {
  display: none
}

.stats .stat>* {
  position: relative;
  z-index: 1
}

.stats .stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .5)
}

/* impact — clearer,
honest stat cards */
.stats .stat {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px
}

.stats .stat .n {
  font-size: clamp(2rem, 4.2vw, 2.5rem)
}

.stats .stat .l {
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 6px
}

.stat .ctx {
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .01em
}

.stat .ctx .cdot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .85;
  flex-shrink: 0
}

.stats .stat .spark {
  margin-top: auto;
  padding-top: 20px;
  overflow: visible
}

.stat .go {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease)
}

.stat .go svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.stat[data-case] .go {
  display: inline-flex
}

.stat[data-case] {
  cursor: pointer
}

.stat[data-case]:hover .go,
.stat[data-case]:focus-visible .go {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translate(2px, -2px)
}

.stat[data-case]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}

/* EXPERIENCE */
.exp {
  padding: 0 0 64px
}

.exp-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 22px;
  padding: 4px 28px
}

.role:last-child {
  border-bottom: none
}

.role {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  transition: none
}

.role[open] {
  box-shadow: none
}

.role summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: 18px
}

.role summary::-webkit-details-marker {
  display: none
}

.role .rmain {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px
}

.role .rtitle {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.014em
}

.role .rtitle b {
  display: block;
  margin-top: 4px;
  font-size: .94em
}

.role .rtitle b {
  color: var(--accent);
  font-weight: 700
}

/* employment type next to the company (two concurrent roles):
   tinted glass chip — green for full-time, accent for part-time */
.role .rtype {
  --tc: var(--accent);
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tc) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, transparent), color-mix(in srgb, var(--tc) 6%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--tc) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--fb);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--tc) 55%, var(--ink));
  vertical-align: 2px
}

.role .rtype.ft {
  --tc: var(--pos)
}

.role .rdate {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.role .rdur {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted)
}

.role .chev {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s var(--ease2), background .3s var(--ease)
}

.role .chev svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.7
}

.role[open] .chev {
  transform: rotate(45deg);
  background: var(--accent-soft);
  border-color: transparent
}

.role.closing .chev {
  transform: rotate(0);
  background: transparent;
  border-color: var(--line)
}

.role .rbody {
  padding: 0 0 22px;
  overflow: hidden
}

.role .rbody ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.role .rbody li {
  padding-left: 18px;
  position: relative;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 72ch
}

.role .rbody li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint)
}

.role .mods {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 12px
}

.role .mods .tag-s {
  color: var(--muted)
}

/* experience preview */
.role .chev {
  display: none
}

.role summary {
  cursor: default;
  padding: 22px 0 10px
}

.role .rdate {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  padding: 8px 15px;
  border-radius: 999px
}

.role .rbody {
  padding: 0 0 4px;
  transition: max-height .5s var(--ease)
}

.role:not(.expanded) .rbody {
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 34%, transparent 97%)
}

.vmore {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 22px;
  transition: color .3s var(--ease)
}

.vmore:hover {
  color: var(--ink)
}

.vmore .ar2 {
  display: inline-flex;
  align-items: center;
  transition: transform .4s var(--ease2)
}

.vmore .ar2 svg {
  display: block;
  width: 18px;
  height: 18px
}

.role.expanded .vmore .ar2,
.quote.expanded .vmore .ar2 {
  transform: rotate(180deg)
}

.vmore .vm-less {
  display: none
}

.role.expanded .vm-more,
.quote.expanded .vm-more {
  display: none
}

.role.expanded .vm-less,
.quote.expanded .vm-less {
  display: inline
}

/* recommendation person modal (coverflow) */
.quote .who {
  cursor: pointer;
  outline: none;
  transition: opacity .2s var(--ease)
}

.quote .who:hover {
  opacity: .82
}

.quote .who:focus,
.quote .who:focus-visible {
  outline: none;
  border-radius: 0
}

#recModal .skill-goo {
  display: none
}

#recModal .skill-close {
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px
}

#recModal .skill-card {
  border-radius: 32px;
  width: min(440px, 92vw);
  display: none
}

#recModal .skill-card.rec-show {
  display: block;
  animation: recIn .5s var(--spring)
}

#recModal.closing .skill-card.rec-show {
  animation: recOut .32s var(--ease) forwards
}

@keyframes recIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9)
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }
}

@keyframes recOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92)
  }
}

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

  #recModal .skill-card.rec-show,
  #recModal.closing .skill-card.rec-show {
    animation: none
  }
}

#recModal .skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

#recModal .skill-ava {
  object-fit: cover;
  width: 120px;
  height: 120px;
  margin: 6px 0 22px
}

#recModal .skill-item h3 {
  margin: 0 0 8px
}

#recModal .skill-item .skill-role {
  margin: 0 0 6px
}

.pm-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease)
}

.pm-link:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line))
}

.pm-link svg {
  width: 15px;
  height: 15px
}

/* recommendation per-card translate control */
.rec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 0 22px
}

.quote .rec-foot .vmore {
  padding: 0
}

.rec-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px
}

.rl-btn {
  border: none;
  background: none;
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease)
}

.rl-btn:hover {
  color: var(--ink)
}

.rl-btn.on {
  background: color-mix(in srgb, #fff 13%, transparent);
  color: var(--ink)
}

.rec-lang-group {
  display: inline-flex;
  align-items: center;
  gap: 9px
}

.rec-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  cursor: help;
  outline: none
}

.rec-info svg {
  width: 17px;
  height: 17px;
  display: block
}

.rec-info:hover {
  color: var(--muted)
}

.rec-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  right: -4px;
  width: max-content;
  max-width: 250px;
  background: color-mix(in srgb, #fff 9%, #191a1e);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  text-align: left;
  box-shadow: 0 16px 38px -12px rgba(0, 0, 0, .85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  pointer-events: none;
  z-index: 6
}

.rec-info:hover .rec-tip,
.rec-info:focus .rec-tip,
.rec-info:focus-visible .rec-tip {
  opacity: 1;
  visibility: visible;
  transform: none
}

/* TOOLS — plain line */
.tools {
  padding: 0 0 64px
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px
}

.tool {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: none;
  border-radius: 18px;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease)
}

.tool::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 95% at 50% -12%, var(--accent-soft), transparent 62%);
  opacity: .9;
  transition: opacity .4s var(--ease);
  pointer-events: none
}

.tool::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--nangle), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--accent) 55%, transparent) 255deg, color-mix(in srgb, #eaf1ff 75%, var(--accent)) 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: neonspin 5.5s linear infinite;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 50%, transparent))
}

.tool:nth-child(2)::after {
  animation-delay: -1.1s
}

.tool:nth-child(3)::after {
  animation-delay: -2.2s
}

.tool:nth-child(4)::after {
  animation-delay: -3.3s
}

.tool:nth-child(5)::after {
  animation-delay: -4.4s
}

.tool:nth-child(6)::after {
  animation-delay: -1.7s
}

.tool:nth-child(7)::after {
  animation-delay: -2.9s
}

.tool:nth-child(8)::after {
  animation-delay: -3.9s
}

.tool:nth-child(9)::after {
  animation-delay: -0.8s
}

.tool:nth-child(10)::after {
  animation-delay: -4.9s
}

@media (prefers-reduced-motion:reduce) {
  .tool::after {
    animation: none
  }
}

.tool>* {
  position: relative;
  z-index: 1
}

.tool .d {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .9;
  flex-shrink: 0
}

.tool .ic {
  display: block;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
  transition: transform .3s var(--ease)
}

.tool .tool-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent)
}

/* two-icon tiles carry a longer label ("Claude & ChatGPT"): wrap instead of clipping */
.tool:has(.ic-pair) .tool-name {
  white-space: normal;
  line-height: 1.2;
  -webkit-mask-image: none;
  mask-image: none
}

.tool .ic-pair {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0
}

.tool .ic.ic-wl {
  background: #fff;
  border-radius: 50%;
  padding: 5px;
  filter: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4)
}

.tool .ic-pair .ic-wl + .ic-wl {
  margin-left: -12px
}

@media(max-width:560px) {
  .tool:has(.ic-pair) {
    gap: 10px
  }

  .tool .ic-pair .ic-wl + .ic-wl {
    margin-left: -18px
  }
}

/* RECOMMENDATIONS */
.quotes {
  padding: 0 0 64px
}

.quotes .sec-head {
  border-top-color: rgba(255, 255, 255, .1)
}

.q-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: stretch
}

.quote {
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: none;
  padding: 26px;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)
}

.quote:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .5)
}

.quote .mark {
  display: none
}

.quote p {
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.75;
  letter-spacing: .002em;
  max-width: 62ch
}

.quote .who {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: auto
}

.quote .qbody {
  overflow: hidden;
  transition: height .5s var(--ease)
}

.quote:not(.expanded) .qbody {
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%)
}

.quote .vmore {
  padding: 8px 0 14px
}

.quote .qbody p {
  margin-bottom: 0
}

.quote .qbody p+p {
  margin-top: 16px
}

.quote .av {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 32%, var(--surface-2)), color-mix(in srgb, var(--accent) 14%, var(--surface-2)));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em
}

.quote .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.quote .nm {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.01em
}

.quote .rl {
  font-size: 13px;
  color: var(--muted);
  margin-top: 1px
}

/* CONTACT */
.contact {
  padding: 0 0 48px
}

.contact-card {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-radius: 36px;
  padding: 0;
  position: relative;
  overflow: hidden;
  text-align: center
}

.contact-core {
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 95% at 50% -12%, var(--accent-soft), transparent 62%);
  pointer-events: none
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--nangle), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--accent) 55%, transparent) 255deg, color-mix(in srgb, #eaf1ff 75%, var(--accent)) 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: neonspin 5.5s linear infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent))
}

.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ink) 14%, transparent), transparent 34%, transparent 62%, color-mix(in srgb, var(--accent) 40%, transparent));
  background: conic-gradient(from var(--nangle), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--accent) 55%, transparent) 255deg, color-mix(in srgb, #eaf1ff 75%, var(--accent)) 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: neonspin 5.5s linear infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent))
}

.contact-card {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent)
}

.contact-core::after {
  display: none
}

.contact-core {
  padding: clamp(40px, 5.5vw, 68px) clamp(22px, 4vw, 48px);
  position: relative
}

.contact h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 14px;
  letter-spacing: -.026em
}

.contact .lead {
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 28px;
  font-size: 17px
}

.contact .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px
}

.socials {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap
}

.soc {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  background: none;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--muted);
  box-shadow: none;
  transition: color .3s var(--ease)
}

.soc:hover {
  transform: none;
  background: none;
  color: var(--accent)
}

.soc svg {
  display: none
}

footer {
  padding: 24px 0 52px;
  border-top: 1px solid var(--line);
  margin-top: 28px
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 13.5px
}

.foot .brand {
  font-size: 14.5px;
  color: var(--ink)
}

/* CASE MODAL */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease)
}

.case-modal.open {
  opacity: 1;
  visibility: visible;
  transform: none
}

.case-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px max(28px, calc((100% - 880px) / 2 + 28px));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2)
}

.case-top .brand {
  font-weight: 700;
  font-size: 15px
}

.case-close {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 14px 8px 16px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--ink);
  transition: background .3s var(--ease), transform .3s var(--ease)
}

.case-close:hover {
  background: var(--surface-2)
}

.case-close:active {
  transform: scale(.95)
}

.case-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none
}

.case-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 46px 28px 90px
}

.case-h1 {
  font-size: clamp(1.9rem, 4.8vw, 2.7rem);
  letter-spacing: -.028em;
  margin-bottom: 14px
}

.case-tagline {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 30px;
  line-height: 1.6
}

.case-metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px
}

.case-metabar .mi .k {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--faint);
  font-weight: 600;
  margin-bottom: 4px
}

.case-metabar .mi .v {
  font-weight: 600;
  font-size: 14.5px
}

.shot {
  border-radius: 14px;
  border: 1px solid var(--line);
  aspect-ratio: 3/2;
  box-shadow: none;
  margin: 28px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat
}

.case-sec {
  margin: 36px 0
}

.case-sec h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  margin-bottom: 12px;
  letter-spacing: -.018em
}

.case-sec p {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 12px;
  max-width: 68ch;
  line-height: 1.66
}

.case-sec ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 6px
}

.case-sec li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.58
}

.case-sec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent)
}

.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 28px 0
}

.case-results .stat {
  padding: 20px 18px
}

.case-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px
}

/* CASE — rich content blocks */
.case-lead {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  max-width: 68ch;
  margin-bottom: 12px
}

.case-note {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 66ch;
  margin: 10px 0
}

.case-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0 6px
}

.cstep {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 14px;
  background: var(--surface-2)
}

.cstep .cnum {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: 9px
}

.cstep .ct {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px
}

.cstep .cd {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 6px
}

.sol {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 18px;
  background: var(--surface-2)
}

.sol .sicon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 5px
}

.sol .sicon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.sol h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em
}

.sol p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.58;
  margin: 0
}

.ds-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px
}

.ds-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--muted)
}

.ds-sw {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 1px solid var(--line);
  flex: none
}

.ds-sw.sw-action {
  background: var(--accent);
  border-color: transparent
}

.ds-sw.sw-text {
  background: var(--ink);
  border-color: transparent
}

.ds-sw.sw-surface {
  background: var(--surface-2)
}

.ds-row .ds-arrow {
  color: var(--faint)
}

.ds-row .ds-role {
  color: var(--ink);
  font-weight: 600
}

/* SKILL MODAL (orbit pills) */
.orbit .opill {
  cursor: pointer;
  user-select: none;
  transition: scale .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)
}

.orbit .opill:hover {
  scale: 1.07;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 28px -18px rgba(0, 0, 0, .85)
}

.orbit .opill:active {
  scale: .96
}

.orbit .orbit-core {
  cursor: pointer;
  transition: transform .16s var(--ease-soft), scale .35s var(--ease)
}

.orbit .orbit-core:hover {
  scale: 1.03
}

.orbit .orbit-core:active {
  scale: .98
}

.skill-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  visibility: hidden
}

.skill-modal.open,
.skill-modal.closing {
  visibility: visible
}

.skill-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity .45s var(--ease-soft), backdrop-filter .45s var(--ease-soft), -webkit-backdrop-filter .45s var(--ease-soft)
}

.skill-modal.open .skill-backdrop {
  opacity: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px)
}

.goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none
}

.skill-goo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  filter: url(#skillGoo);
  -webkit-filter: url(#skillGoo);
  will-change: opacity
}

.goo-blob {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 44px;
  background: linear-gradient(180deg, rgba(54, 57, 65, .98), rgba(33, 34, 40, 1));
  transform: translate(-50%, -50%) scale(0);
  will-change: transform
}

.goo-main {
  width: 130px;
  height: 130px
}

.goo-drop {
  width: 96px;
  height: 96px
}

@media(prefers-reduced-motion:reduce) {
  .skill-goo {
    display: none
  }
}

.skill-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 60;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--muted);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), opacity .2s var(--ease)
}

.skill-close:hover {
  background: rgba(255, 255, 255, .13);
  color: var(--ink)
}

.skill-close:active {
  transform: scale(.92)
}

.skill-close svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round
}

.skill-stage {
  position: relative;
  width: 100%;
  height: min(88vh, 780px);
  perspective: 1500px;
  transition: transform .5s var(--ease-soft)
}

.skill-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 92vw);
  max-height: min(82vh, 700px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(40, 42, 48, .72), rgba(25, 26, 30, .8));
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-radius: 36px;
  padding: 36px 38px 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 90px -24px rgba(0, 0, 0, .65);
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  transition: transform .6s var(--ease-soft), opacity .45s var(--ease), filter .45s var(--ease)
}

/* light-mode surfaces for the coverflow / recommendation modals (base rules are dark-first) */
[data-theme="light"] .skill-card {
  background: linear-gradient(180deg, #ffffff, #f6f6f7);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -30px rgba(20, 22, 30, .32)
}

[data-theme="light"] .goo-blob {
  background: linear-gradient(180deg, #ffffff, #ececed)
}

[data-theme="light"] .pm-link {
  background: var(--surface-2)
}

[data-theme="light"] .skill-close,
[data-theme="light"] .skill-arrow {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--muted)
}

[data-theme="light"] .skill-close:hover,
[data-theme="light"] .skill-arrow:hover {
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  color: var(--ink)
}

.skill-stage {
  cursor: grab
}

.skill-stage.dragging {
  cursor: grabbing
}

.skill-arrows {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 60;
  transition: opacity .2s var(--ease)
}

.skill-modal:not(.open) .skill-close,
.skill-modal:not(.open) .skill-arrows {
  opacity: 0;
  pointer-events: none
}

.skill-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .07);
  color: var(--muted);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease)
}

.skill-arrow:hover {
  background: rgba(255, 255, 255, .13);
  color: var(--ink)
}

.skill-arrow:active {
  transform: scale(.92)
}

.skill-arrow:disabled {
  opacity: .28;
  cursor: default;
  pointer-events: none
}

.skill-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.skill-card:not(.cur) {
  cursor: pointer
}

.skill-card:not(.cur) * {
  pointer-events: none
}

.skill-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 76px;
  line-height: .55;
  color: var(--accent);
  margin: 6px 0 18px;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 35%, transparent))
}

.skill-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px
}

.skill-ava {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  margin: 2px 0 20px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 30%, transparent)
}

.skill-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: -6px 0 16px
}

.skill-item h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: var(--ink)
}

.skill-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px
}

.skill-item p:last-child {
  margin-bottom: 0
}

.skill-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.skill-item ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 86%, transparent)
}

.skill-item ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint)
}

@media(max-width:560px) {
  .skill-modal {
    padding: 14px
  }

  .skill-card {
    padding: 28px 22px 24px;
    border-radius: 36px
  }

  .skill-quote {
    font-size: 60px;
    margin: 4px 0 14px
  }

  .skill-item h3 {
    font-size: 22px
  }

  .skill-item p {
    font-size: 14.5px
  }

  .skill-ava {
    width: 80px;
    height: 80px
  }

  .skill-arrows {
    bottom: 16px
  }

  .case-steps {
    grid-template-columns: repeat(3, 1fr)
  }

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

  .skill-arrow {
    width: 40px;
    height: 40px
  }
}

/* responsive */
html,
body {
  overflow-x: hidden;
  max-width: 100%
}

@media(max-width:900px) {
  .nav.scrolled {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line-2)
  }

  .nav-links {
    display: none
  }

  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background .25s var(--ease);
    flex-shrink: 0
  }

  .burger:hover {
    background: rgba(255, 255, 255, .09)
  }

  .nav-tools {
    flex-shrink: 0
  }
}

@media(max-width:560px) {
  .nav-inner {
    padding: 12px 16px;
    gap: 8px
  }

  .nav-tools {
    gap: 7px
  }

  .langseg {
    height: 33px;
    gap: 2px;
    padding: 2px
  }

  .langseg-btn {
    padding: 0 9px;
    font-size: 12px
  }

  .burger {
    width: 34px;
    height: 33px
  }

  .brand {
    gap: 9px
  }

  .brand .brand-name {
    font-size: 13.5px
  }

  .brand .brand-role {
    font-size: 9.5px;
    letter-spacing: .01em
  }

  .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px
  }

  .orbit {
    width: min(600px, 90vw)
  }

  .orbit .p3 {
    left: 74%
  }

  .orbit .p4 {
    left: 76%
  }

  .orbit .p5 {
    left: 70%
  }

  .orbit .p7 {
    left: 19%
  }

  .orbit .p8 {
    left: 20%
  }
}

@media(max-width:760px) {

  .stats {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

@media(max-width:560px) {
  body {
    font-size: 16px
  }

  .wrap {
    padding: 0 20px
  }

  .nav-inner {
    padding: 13px 20px
  }

  .hero {
    padding: 140px 0 30px
  }

  .about-top {
    gap: 18px
  }

  .stats,
.case-results {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .case-steps {
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .sol-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .case-body {
    padding: 34px 20px 72px
  }

  .role .rmain {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px
  }

  .role summary {
    align-items: flex-start
  }

  .role .rdate {
    text-align: left;
    white-space: normal;
    margin-top: 2px
  }

  .exp-list {
    padding: 2px 18px
  }

  .about,
.work,
.impact,
.exp,
.tools,
.quotes {
    padding: 0 0 52px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition-duration: .01ms !important
  }

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

/* CASE — galleries (real product screens) */

/* galleries share the text column's edges — no breakout — so every left edge lines up */
.case-phones {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 230px);
  justify-content: start;
  justify-content: safe center;
  gap: 18px;
  margin: 26px 0 8px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin
}

.case-phones figure,
.case-fig {
  margin: 0;
  scroll-snap-align: start
}

.case-phones img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .55)
}

.case-phones figcaption,
.case-fig figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted)
}

.case-phones figcaption b,
.case-fig figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px
}

.case-fig {
  margin: 26px 0 8px
}

.case-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-2)
}

.case-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 26px 0 8px
}

.case-split .case-fig {
  margin: 0
}

@media(max-width:640px) {
  .case-phones {
    grid-auto-columns: 68%;
    justify-content: start;
    gap: 14px
  }

  .case-phones img {
    border-radius: 22px
  }

  .case-split {
    grid-template-columns: 1fr
  }
}

/* project shots */
.visual.img-zon,
.shot.img-zon {
  background-image: url(../assets/img/work/zon.webp)
}

.visual.img-doczon,
.shot.img-doczon {
  background-image: url(../assets/img/work/doczon.webp)
}

.visual.img-iwon,
.shot.img-iwon {
  background-image: url(../assets/img/work/iwon.webp)
}

.visual.img-foodee,
.shot.img-foodee {
  background-image: url(../assets/img/work/foodee.webp)
}

.about-card {
  cursor: pointer
}

/* How-I-work modal rows */
.hwm-item {
  padding: 15px 0 0;
  margin-top: 15px;
  border-top: 1px solid var(--line-2)
}

.hwm-item:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none
}

.hwm-k {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 5px
}

.hwm-ic {
  width: 20px;
  height: 20px;
  flex: none;
  display: block
}

.hwm-d,
p.hwm-d {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0
}

.tool {
  cursor: pointer
}

/* ===== PERF: identical look,
cheaper pixels ===== */
/* drop per-element layers once the reveal has finished */
.reveal.vis {
  will-change: auto
}

/* infinite animations pause while their section is off screen (invisible change) */
.about-card.offview::after,
.contact-card.offview::after {
  animation-play-state: paused !important
}

.marquee.offview .marquee-track {
  animation-play-state: paused !important
}

.orbit.offview .ospin,
.orbit.offview .opill {
  animation-play-state: paused !important
}

.stat.offview .spark-dot,
.stat.offview .spark-runner {
  animation-play-state: paused !important
}

.contact-card.offview .btn-metal::before {
  animation-play-state: paused !important
}

/* touch devices: swap live backdrop blur for equivalent opaque surfaces */
@media (hover:none) {
  .nav.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: var(--line-2)
  }

  .nav-links {
    background: color-mix(in srgb, var(--surface-2) 96%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .about-card,
  .proj,
  .tool,
  .quote,
  .contact-card {
    background: color-mix(in srgb, var(--surface-2) 90%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .stats .stat {
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .orbit .opill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .overlay {
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none
  }

  .skill-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(44, 46, 53, .97), rgba(27, 28, 32, .985))
  }

  .skill-arrow {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, .09)
  }

  /* modal veil: keep the blur, but animate only opacity (blur radius stays constant) */
  .skill-backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: opacity .45s var(--ease-soft)
  }

  .skill-modal.open .skill-backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px)
  }

  /* lighter goo filter on touch devices */
  .skill-goo {
    filter: url(#skillGooM);
    -webkit-filter: url(#skillGooM)
  }

  /* reveal entrances without the blur component */
  .reveal {
    filter: none;
    transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft)
  }

  .reveal.vis {
    filter: none
  }
}

/* copy protection: disable text selection & image dragging site-wide */
html,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none
}

img,
svg,
canvas {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text
}

/* ===== experience: LinkedIn-style company groups (logo + nested roles timeline) ===== */
.role.co {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 18px;
  padding: 24px 0
}

.co-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px/1 var(--fd);
  letter-spacing: -.02em;
  background: var(--surface);
  color: var(--muted);
  overflow: hidden
}

/* logo images: full-bleed; brand-coloured tiles need no border */
.co-logo.cargo,
.co-logo.newedu {
  border-color: transparent
}

.co-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}


.co-head {
  min-width: 0;
  align-self: center
}

.co-name {
  font: 700 1.08rem/1.3 var(--fd);
  letter-spacing: -.014em;
  margin: 0
}

.co-sub {
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px
}

.co-meta {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted)
}

.co-meta .sep {
  margin: 0 6px;
  opacity: .6
}

.role.co .rtype {
  margin-left: 0;
  padding: 3px 10px;
  vertical-align: 1px
}

.role .rtype.fl {
  --tc: #e3a008
}

/* date is a text line here, not the pill used before */
.role.co .rdate {
  display: inline;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: normal;
  text-align: left;
  margin: 0
}

.role.co .rdur,
.role.co .rtotal {
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted)
}

.role.co .rdur {
  margin-left: 6px;
  white-space: nowrap
}

.role.co .rtotal {
  white-space: nowrap
}

/* nested roles */
.co .roles {
  grid-column: 1 / -1;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px
}

.co .rl {
  position: relative;
  padding-left: 70px
}

.co .rl::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 4px var(--surface-2)
}

.co .rl.now::before {
  background: var(--pos)
}

.co .rl:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 24px;
  bottom: -16px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--faint) 40%, transparent)
}

.co .rl-title {
  font: 600 1rem/1.35 var(--fd);
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px
}

/* bullets + view more sit under the text column */
.role.co .rbody {
  grid-column: 2 / -1;
  margin-top: 14px
}

.role.co > .vmore {
  grid-column: 2 / -1;
  justify-self: start;
  padding-bottom: 0
}

.role.co.multi .rbody,
.role.co.multi > .vmore {
  grid-column: 1 / -1;
  margin-left: 70px
}

@media (max-width:640px) {
  .role.co {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px 0
  }

  .co-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px
  }

  .co .rl {
    padding-left: 58px
  }

  .co .rl::before {
    left: 17px
  }

  .co .rl:not(:last-child)::after {
    left: 21px
  }

  .role.co.multi .rbody,
  .role.co.multi > .vmore {
    margin-left: 58px
  }
}


/* ===== EXPERIENCE v2 — scope & outcomes (Nov 2026) ===== */
.xlist{display:grid;gap:14px}
.xcard{border:1px solid var(--line);background:var(--surface-2);border-radius:22px;padding:26px 28px}
.xhd{display:flex;gap:14px;align-items:flex-start}
.xhd .co-logo{width:44px;height:44px;border-radius:12px;flex:none}
.xhd-t{flex:1;min-width:0}
.xco{font-size:17px;font-weight:600;letter-spacing:-.015em;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.xsub{font-size:13.5px;color:var(--faint);margin-top:2px}
.xtot{font-size:13px;color:var(--faint);white-space:nowrap;padding-top:3px}
.xtag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap;letter-spacing:0}
.xrail{margin:18px 0 0 58px;display:grid;gap:10px;border-left:1.5px solid var(--line);padding-left:16px}
.xrl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.xrl::before{content:"";position:absolute;left:-21.5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--faint)}
.xrl.cur::before{background:var(--pos);border-color:var(--pos)}
.xrl-t{font-size:14.5px;font-weight:600}
.xrl-d,.xexp .rdate{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.xexp .rdur{margin-left:4px}
.xbody{margin:18px 0 0 58px}
.xscope{font-size:15px;color:var(--ink);max-width:640px;line-height:1.55}
.xmeta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:13px;color:var(--faint)}
.xmeta b{color:var(--muted);font-weight:500}
.xout{list-style:none;display:grid;gap:9px;margin-top:16px}
.xout li{position:relative;padding-left:18px;font-size:14.5px;color:var(--muted);line-height:1.55}
.xout li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:1.5px;background:var(--faint)}
.xm{color:var(--pos);font-weight:600;font-variant-numeric:tabular-nums}
.xlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.xcs{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--fb);color:var(--accent);background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer;border-radius:6px}
.xcs:hover{text-decoration:underline;text-underline-offset:3px}
.xcs:focus-visible,.xearl summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xcs svg{width:14px;height:14px}
.xearl{border:1px solid var(--line);border-radius:22px;padding:4px 28px}
.xearl summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-size:14px;font-weight:600}
.xearl summary::-webkit-details-marker{display:none}
.xearl-n{font-weight:400;color:var(--faint);font-size:13px}
.xer{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.xer b{font-weight:600}
.xer p{grid-column:1/-1;color:var(--muted);font-size:13.5px}
@media(max-width:640px){
  .xcard{padding:20px 18px}
  .xrail,.xbody{margin-left:0}
  .xtot{display:none}
  .xearl{padding:4px 18px}
  .xer{grid-template-columns:1fr}
}


/* ===== HERO v2 — editorial (Nov 2026) ===== */
.orb{display:none}
.hero2{padding:clamp(112px,16vh,168px) 0 56px}
.hero2 .wrap{text-align:left}
.h2-who{display:flex;align-items:center;gap:12px}
.h2-who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.h2-who b{display:block;font-size:15px;font-weight:600}
.h2-who span{font-size:13px;color:var(--faint)}
.hero2 h1{font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;max-width:860px;margin:36px 0 0;text-wrap:balance}
.hero2 h1 .soft{color:var(--faint)}
.h2-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 40px;margin-top:30px;font-size:14px}
.h2-meta dt{color:var(--faint);font-size:12.5px}
.h2-meta dd{color:var(--ink);font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}
.h2-proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.h2-proof>div{padding:20px 20px 0 0}
.h2-proof>div+div{padding-left:20px;border-left:1px solid var(--line)}
.h2-num{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.h2-lab{font-size:13px;color:var(--muted);margin-top:2px}
.h2-src{font-size:12px;color:var(--faint);margin-top:2px}
.h2-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.h2-btns{display:flex;gap:10px;flex-wrap:wrap}
.h2-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid transparent;transition:transform .15s var(--ease)}
.h2-btn:active{transform:scale(.97)}
.h2-btn.p{background:var(--ink);color:var(--bg)}
.h2-btn.s{border-color:var(--line);color:var(--ink);background:var(--bg)}
.h2-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.h2-btn svg{width:16px;height:16px}
.h2-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.h2-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
@media(max-width:900px){.h2-who{display:none}.hero2 h1{margin-top:0}}
@media(max-width:820px){.h2-meta{grid-template-columns:1fr 1fr}.h2-proof>div{padding:16px 12px 0 0}.h2-proof>div+div{padding-left:12px}.h2-num{font-size:22px}.h2-src{display:none}}
@media(max-width:520px){.hero2{padding-top:96px}.h2-meta{grid-template-columns:1fr}}


/* ===== cleanup pass (Nov 2026) ===== */
button{font:inherit}
.quote[hidden]{display:none!important}
.q-all{margin-top:18px}
.how-link{margin-top:14px}
.contact-card::before,.contact-card::after{display:none}
.contact-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-2)}
.contact .btn-metal{background:var(--ink);color:var(--bg);box-shadow:none}
.contact .btn-metal::before,.contact .btn-metal::after{display:none}


/* ===== case study v2 — decision-led (Nov 2026) ===== */
.case-outcome{margin-top:-8px;margin-bottom:28px;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.case-outcome .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500}
.case-outcome .v{margin-top:6px;font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}
.case-dec{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.case-dec:first-of-type{margin-top:8px}
.case-dec .dn{font-size:12px;color:var(--faint);font-weight:500}
.case-dec h3{font-size:clamp(1.1rem,2vw,1.3rem);letter-spacing:-.02em;font-weight:600;margin:6px 0 10px;line-height:1.3}
.case-dec p+p{margin-top:10px}
.case-one{justify-content:start!important}
.case-note{margin-top:14px;font-size:14px;color:var(--faint)}
.case-sub{margin-top:28px}
.case-sub h3{font-size:17px;font-weight:600;margin-bottom:8px}

/* ===== case deep dive (Nov 2026) ===== */
.case-deep{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.case-kicker{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px}
.case-stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 6px}
.case-stats3>div{border:1px solid var(--line);border-radius:18px;background:var(--surface-2);padding:16px 18px}
.case-stats3 b{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.case-stats3 span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.case-path-h{margin-top:28px;font-size:17px;font-weight:600}
@media(max-width:640px){.case-stats3{grid-template-columns:1fr;gap:8px}.case-stats3>div{display:flex;align-items:center;gap:14px;padding:12px 16px}.case-stats3 b{font-size:22px;min-width:34px}.case-stats3 span{margin-top:0}}

/* case video (Nov 2026) */
.case-video{margin:18px auto 6px;max-width:300px;text-align:center}
.case-video video{display:block;width:100%;height:auto;border-radius:32px;border:1px solid var(--line);background:var(--surface-2);box-shadow:0 22px 44px -30px rgba(0,0,0,.55)}
.case-video figcaption{margin-top:10px;font-size:13px;color:var(--faint);display:grid;gap:2px}
.case-video figcaption b{color:var(--ink);font-weight:600}

/* ===== NDA case · corporate banking (Nov 2026) ===== */
.visual.img-neobiz,.shot.img-neobiz{background-image:url(../assets/img/work/neobiz.webp)}
.nb-nda{display:flex;gap:14px;align-items:flex-start;margin:22px 0 26px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.nb-nda svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-nda b{display:block;font-size:14px;font-weight:600}
.nb-nda p{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.nb-how{list-style:none;counter-reset:nbh;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 16px;padding:0}
.nb-how li{counter-increment:nbh;border:1px solid var(--line);border-radius:16px;padding:14px 14px 16px;background:var(--bg)}
.nb-how li::before{content:counter(nbh);display:block;font-size:12px;color:var(--faint);font-weight:500;margin-bottom:8px;font-variant-numeric:tabular-nums}
.nb-how b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.nb-how span{display:block;margin-top:6px;font-size:13px;color:var(--muted);line-height:1.45}
.nb-flow{margin:18px 0 6px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--surface-2)}
.nb-flow code,.nb-reg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint);letter-spacing:0}
.nb-skip{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.nb-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin:0;padding:0}
.nb-st{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px;min-height:108px}
.nb-st+.nb-st::before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:12px;border-top:1.6px solid var(--faint);border-right:1.6px solid var(--faint);transform:translateY(-50%) rotate(45deg) scale(.7)}
.nb-st i{font-style:normal;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.nb-st b{font-size:13.5px;font-weight:600;line-height:1.3}
.nb-st code{margin-top:auto}
.nb-ext{background:transparent;border-style:dashed;border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.nb-then{margin:16px 0 10px;font-size:13.5px;color:var(--muted)}
.nb-ends{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0}
.nb-ends3{grid-template-columns:repeat(3,1fr);margin-top:16px}
.nb-end{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.nb-end b{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.nb-end>span:not(.nb-dot){font-size:12.5px;color:var(--muted);line-height:1.4}
.nb-end code{margin-top:4px}
.nb-dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.nb-end{position:relative;padding-left:28px}
.nb-end .nb-dot{position:absolute;left:12px;top:17px}
.nb-ok .nb-dot{background:#0f9d63}.nb-warn .nb-dot{background:#c98a04}.nb-bad .nb-dot{background:#d23c3c}.nb-mut .nb-dot{background:var(--faint)}
.nb-flow figcaption{margin-top:16px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.nb-flow figcaption b{color:var(--ink);font-weight:600}
.nb-trade{font-size:14px;color:var(--muted)}
.nb-trade .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-right:4px}
.nb-reg{margin-top:16px;border:1px solid var(--line);border-radius:18px;overflow:hidden;overflow-x:auto}
.nb-reg table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.nb-reg th{text-align:left;font-size:12px;font-weight:500;color:var(--faint);padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.nb-reg td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.nb-reg tr:last-child td{border-bottom:0}
.nb-reg td:first-child,.nb-reg td:nth-child(3){white-space:nowrap}
.nb-pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:500;white-space:nowrap}
.nb-p-ok{background:color-mix(in srgb,#0f9d63 13%,transparent);color:color-mix(in srgb,#0f9d63 62%,var(--ink))}
.nb-p-part{background:color-mix(in srgb,#c98a04 15%,transparent);color:color-mix(in srgb,#a26f00 80%,var(--ink))}
.nb-p-ext{background:color-mix(in srgb,var(--accent) 11%,transparent);color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.nb-deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.nb-deliv>div{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface-2)}
.nb-deliv b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nb-deliv span{display:block;margin-top:4px;font-size:13px;color:var(--muted);line-height:1.4}
.nb-ask{margin-top:40px;padding:22px;border:1px solid var(--line);border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nb-ask p{margin:0;font-weight:500;max-width:42ch}
@media(max-width:900px){.nb-how{grid-template-columns:repeat(2,1fr)}.nb-steps{grid-template-columns:1fr;gap:18px}.nb-st{min-height:0;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}.nb-st code{margin:0 0 0 auto}.nb-st+.nb-st::before{left:22px;top:-14px;transform:rotate(135deg) scale(.6)}.nb-ends,.nb-ends3{grid-template-columns:1fr 1fr}.nb-deliv{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.nb-how,.nb-ends,.nb-ends3{grid-template-columns:1fr}.nb-flow{padding:14px}.nb-deliv b{font-size:21px}}
/* NDA case: reset the case list bullets */
.case-sec .nb-how,.case-sec .nb-steps,.case-sec .nb-ends{display:grid;flex-direction:initial}
.case-sec .nb-how li,.case-sec .nb-st,.case-sec .nb-end{max-width:none;color:var(--ink);line-height:1.4}
.case-sec .nb-how li{padding:14px 14px 16px}
.case-sec .nb-st{padding:12px 12px 10px;display:flex}
.case-sec .nb-end{padding:12px 12px 12px 28px;display:flex}
.case-sec .nb-how li::before{position:static;width:auto;height:auto;background:none;border-radius:0}
.case-sec .nb-st::before,.case-sec .nb-end::before{content:none}
.case-sec .nb-st+.nb-st::before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:12px;border-radius:0;background:none;border-top:1.6px solid var(--faint);border-right:1.6px solid var(--faint);transform:translateY(-50%) rotate(45deg) scale(.7)}
.case-sec .nb-ends3{margin-top:16px}
@media(max-width:900px){.case-sec .nb-st{display:flex;flex-direction:row}.case-sec .nb-st+.nb-st::before{left:22px;top:-14px;transform:rotate(135deg) scale(.6)}}

/* ===== PROCESS · how I work with AI (Nov 2026) ===== */
.proc{padding:0 0 72px}
a.xcs{text-decoration:none}
.pr-tbl{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--bg)}
.pr-hd,.pr-row{display:grid;grid-template-columns:minmax(180px,.8fr) 1fr 1fr}
.pr-hd{background:var(--surface-2);border-bottom:1px solid var(--line)}
.pr-hd>span{padding:12px 22px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500;display:flex;align-items:center;gap:8px}
.pr-hd>span+span{border-left:1px solid var(--line)}
.pr-k{width:8px;height:8px;border-radius:2px;background:var(--faint);display:inline-block}
.pr-k-me{border-radius:50%;background:var(--accent)}
.pr-list{list-style:none;margin:0;padding:0}
.pr-row+.pr-row{border-top:1px solid var(--line)}
.pr-row>div{padding:18px 22px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pr-row>div+div{border-left:1px solid var(--line)}
.pr-step{color:var(--ink)!important;font-weight:600;font-size:15px!important}
.pr-step small{display:block;font-size:12px;color:var(--faint);font-weight:500;margin-bottom:4px;font-variant-numeric:tabular-nums}
.pr-me{color:var(--ink)!important}
.pr-lab{display:none}
.pr-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:18px}
.pr-foot p{margin:0;font-size:14px;color:var(--muted)}
.pr-foot b{color:var(--ink);font-weight:600}
@media(max-width:760px){
 .pr-tbl{border-radius:22px}
 .pr-hd{display:none}
 .pr-row{grid-template-columns:1fr}
 .pr-row>div{padding:12px 18px}
 .pr-row>div+div{border-left:0;border-top:1px dashed var(--line)}
 .pr-step{padding-top:16px!important}
 .pr-lab{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:3px}
 .pr-lab-me{color:var(--accent)}
}

/* ===== case table of contents (Nov 2026) ===== */
.case-toc{position:sticky;top:69px;z-index:2;margin:0 -8px 8px;padding:8px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.case-toc-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.case-toc-in::-webkit-scrollbar{display:none}
.case-toc-b{flex:none;font:500 13px var(--fb);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;min-height:36px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.case-toc-b:hover{color:var(--ink)}
.case-toc-b[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.case-toc-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#case-iwon [id^="iw-"]{scroll-margin-top:136px}
@media(max-width:640px){#case-iwon [id^="iw-"]{scroll-margin-top:128px}}

/* ===== Work: more work row (Nov 2026) ===== */
.more-work{margin-top:40px}
.more-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:14px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.more-card{display:grid;grid-template-columns:132px 1fr auto;grid-template-rows:auto auto;column-gap:18px;row-gap:6px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:color-mix(in srgb,var(--surface-2) 72%,transparent);border:1px solid var(--line);border-radius:24px;padding:12px 18px 12px 12px;cursor:pointer;min-height:112px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.more-card:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.more-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.more-img{grid-row:1/3;width:132px;aspect-ratio:3/2;border-radius:14px;border:1px solid var(--line);background-size:cover;background-position:center;background-color:var(--bg)}
.more-img.img-doczon{background-image:url(../assets/img/work/doczon.webp)}
.more-img.img-foodee{background-image:url(../assets/img/work/foodee.webp)}
.more-tx{display:flex;flex-direction:column;gap:3px;min-width:0;align-self:end}
.more-t{font-size:17px;font-weight:600;letter-spacing:-.01em}
.more-s{font-size:13.5px;color:var(--muted);line-height:1.4}
.more-m{grid-column:2;align-self:start;display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--muted)}
.more-m b{font-size:15px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.more-ic{grid-column:3;grid-row:1/3;width:20px;height:20px;color:var(--faint);transition:transform .2s var(--ease),color .2s}
.more-card:hover .more-ic{color:var(--ink);transform:translate(2px,-2px)}
@media(max-width:760px){.more-grid{grid-template-columns:1fr}.more-card{grid-template-columns:104px 1fr auto;column-gap:14px}.more-img{width:104px}}
@media(prefers-reduced-motion:reduce){.more-card:hover .more-ic{transform:none}}

/* zon.uz case (Nov 2026) */
.sol-grid.zon-also{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.sol-grid.zon-also{grid-template-columns:1fr}}
#case-zon .case-fig{margin-top:14px}

/* ===== Work: own products (Nov 2026) ===== */
.own-work{margin-top:48px}
.own-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:14px}
.own-head .more-h{margin-bottom:0}
.own-note{margin:0;font-size:14px;color:var(--muted);max-width:52ch}
.own-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.own-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--surface-2) 72%,transparent);transition:border-color .2s var(--ease)}
.own-card:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.own-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.own-img{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.own-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.own-card:hover .own-img img{transform:scale(1.02)}
.own-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.own-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.own-t{font-size:18px;font-weight:600;letter-spacing:-.01em}
.own-host{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--faint)}
.own-ic{width:16px;height:16px}
.own-card:hover .own-host{color:var(--ink)}
.own-d{font-size:14px;color:var(--muted);line-height:1.45}
.own-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.own-tag{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:var(--bg)}
@media(max-width:760px){.own-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.own-card:hover .own-img img{transform:none}}

/* CARGOSYS case */
.visual.img-cargo,.shot.img-cargo{background-image:url(../assets/img/work/cargosys.webp)}
.cg-pills{display:grid;gap:10px;margin-top:16px}
.cg-grp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cg-lb{width:118px;font-size:12.5px;color:var(--faint)}
@media(max-width:520px){.cg-lb{width:100%}}
.cg-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--ink);background:var(--bg)}
.cg-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}

/* Side projects section */
.side{padding:0 0 64px}
.own-grid3{grid-template-columns:repeat(3,1fr);margin-top:14px}
.own-grid3 .own-t{font-size:16px}
@media(max-width:900px){.own-grid3{grid-template-columns:1fr}}

/* Side project cases */
button.own-card{font:inherit;text-align:left;padding:0;cursor:pointer;width:100%;appearance:none}
.pc-links{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 8px}
.pc-links .btn svg{width:16px;height:16px}
.nb-how.n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.nb-how.n3{grid-template-columns:1fr}}

/* Sayr — Figma process */
.sf-h{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:36px 0 10px}
.sf-stats{margin:18px 0 6px}
.sf-map{display:grid;justify-items:center;gap:0;margin:22px 0 8px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2)}
.sf-node{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);min-width:0}
.sf-node b{font-size:14px;font-weight:600}
.sf-node span{font-size:12.5px;color:var(--muted);line-height:1.4}
.sf-root{border-color:color-mix(in srgb,var(--ink) 30%,transparent);text-align:center;min-width:260px}
.sf-arrow{width:1px;height:22px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.sf-kids{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;position:relative;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
@media(max-width:700px){.sf-kids{grid-template-columns:1fr 1fr}.sf-root{min-width:0;width:100%}}