:root {
  color-scheme: dark;
  --background: #050608;
  --card: #0b0c0f;
  --text: #f5f5f6;
  --muted: #b4b6bf;
  --border: #ffffff14;
  --ease: cubic-bezier(.16,1,.3,1);
  font-family: 'Inter',Helvetica,Arial,sans-serif;
  background: var(--background);
  color: var(--text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--background); overflow-x: clip; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible,.tech-item:focus-visible { outline: 2px solid #dfe2ec; outline-offset: 6px; }
::selection { background: #d8dbe2; color: #050608; }
p,h2,h3 { margin: 0; }
.page { width: min(1280px,calc(100% - 112px)); margin: auto; position: relative; }
.header { height: 96px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; padding: 0 18px; }
.brand { display: flex; align-items: center; gap: 17px; }
.monogram { width: 48px; height: 37px; }
.brand span { font-size: 14px; font-weight: 400; letter-spacing: 3px; white-space: nowrap; }
.availability { display: flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid #ffffff12; border-radius: 99px; background: linear-gradient(110deg,#0d0e10b3,#17181be6); backdrop-filter: blur(12px); font-size: 14px; white-space: nowrap; line-height: 1; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #19df40; flex-shrink: 0; }
.hero { position: relative; min-height: 430px; padding: 39px 18px 34px; isolation: isolate; }
.portrait { position: absolute; z-index: -2; right: -52px; top: -96px; width: 73%; height: 600px; pointer-events: none; mask-image: linear-gradient(to bottom,#000 0%,#000 68%,transparent 98%); }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; mask-image: linear-gradient(90deg,transparent,#000 29%,#000 96%,transparent); }
.hero-content { width: 50%; position: relative; z-index: 1; }
.eyebrow { font-size: 14px; letter-spacing: 3.5px; color: #bfc1ca; margin: 0 0 20px; display: flex; align-items: center; gap: 15px; white-space: nowrap; font-weight: 400; }
.eyebrow span { width: 38px; height: 1px; background: #8b8c93; flex-shrink: 0; transform-origin: left; }
h1 { font-size: 88px; letter-spacing: -4px; font-weight: 300; line-height: .96; margin: 0 0 23px -4px; }
.name-line { display: block; overflow: hidden; padding: 0 4px 8px; margin-bottom: -8px; }
.name-line > span { display: block; }
.intro { font-size: 20px; line-height: 1.45; letter-spacing: -.35px; color: var(--muted); max-width: 375px; font-weight: 400; }
.hero-actions { display: flex; gap: 18px; margin-top: 29px; }
.button { height: 53px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid; border-radius: 99px; font-size: 17px; font-weight: 600; white-space: nowrap; position: relative; transition: transform .6s var(--ease),background .3s,border-color .3s,box-shadow .4s; }
.button-primary { background: #fafafa; color: #08090b; border-color: #fafafa; box-shadow: 0 5px 25px #0003; }
.button-secondary { background: #05060840; border-color: #bfc0c5; color: #fafafa; }
.icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.button .icon { width: 20px; height: 20px; }
.button .icon:last-child { transition: transform .55s var(--ease); }
.facts { display: grid; grid-template-columns: 1.17fr 1.08fr 1.1fr .84fr; padding: 12px 15px 33px; min-height: 105px; position: relative; gap: 0; }
.facts::after { content: ''; position: absolute; height: 1px; bottom: 0; inset-inline: 0; background: linear-gradient(90deg,transparent,#b4b8c251 5%,#b4b8c251 93%,transparent); transform-origin: left; }
.fact { display: flex; align-items: flex-start; gap: 20px; padding: 7px 20px 0 0; position: relative; }
.fact:not(:first-child) { padding-left: 30px; }
.fact:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 0; height: 52px; width: 1px; background: #ffffff30; }
.fact > .icon { width: 29px; height: 29px; margin-top: 3px; }
.fact h3 { font-size: 16px; line-height: 1.2; margin-bottom: 5px; font-weight: 600; letter-spacing: -.35px; }
.fact p { font-size: 13px; line-height: 1.45; color: #d4d5dc; }
.section { margin-top: 33px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 6px 24px; }
.section-heading h2 { font-size: 14px; letter-spacing: 4px; font-weight: 400; color: #bfc1ca; line-height: 1.4; display: flex; align-items: center; gap: 14px; }
.section-heading h2::before { content: ''; display: block; width: 39px; height: 1px; background: #83858a; box-shadow: 0 5px 0 2px #ffffff09; flex-shrink: 0; transform-origin: left; }
.links-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 22px; }
.link-card { border: 1px solid var(--border); border-radius: 19px; min-height: 90px; display: flex; align-items: center; padding: 19px 25px; gap: 26px; background: linear-gradient(115deg,#0f1013b3,#0b0c0fe6); box-shadow: inset 0 1px 0 #ffffff05,0 6px 24px #0002; position: relative; transition: transform .65s var(--ease),border-color .4s,box-shadow .4s,background .4s; }
.platform-icon { width: 44px; height: 44px; stroke-width: 1.4; transition: transform .65s var(--ease); }
.link-card h3 { font-size: 19px; letter-spacing: -.45px; margin-bottom: 6px; line-height: 1.15; font-weight: 650; }
.link-card p { font-size: 14px; line-height: 1.4; color: var(--muted); letter-spacing: -.15px; }
.external-icon { width: 17px; height: 17px; transition: transform .5s var(--ease),color .3s; }
.link-card .external-icon { position: absolute; right: 22px; top: 24px; color: #e0e1e6; }
.link-card > div { padding-right: 22px; }
.projects-section { margin-top: 46px; }
.all-projects { font-size: 14px; display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.all-projects span { font-size: 20px; transition: transform .5s var(--ease); }
.projects-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.project-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: linear-gradient(130deg,#0c0d10,#090a0c); position: relative; transition: transform .7s var(--ease),border-color .4s,box-shadow .4s; min-width: 0; display: flex; flex-direction: column; }
.project-image { height: 146px; position: relative; overflow: hidden; perspective: 700px; background: radial-gradient(ellipse at 60% 0%,#28344a7a,#10131c 50%,#0b0c0f 85%); }
.project-card:nth-child(2) .project-image { background: radial-gradient(ellipse at 62% 0%,#23362b8c,#101714 50%,#0b0c0f 85%); }
.project-card:nth-child(3) .project-image { background: #0b1111; }
.project-image img { width: 104%; height: auto; aspect-ratio: 1.65; object-fit: cover; object-position: top center; display: block; position: absolute; top: 20px; left: 18px; transform: rotateY(-17deg) rotateZ(7deg); transform-origin: center top; border: 1px solid #ffffff1c; border-radius: 7px; box-shadow: -8px 12px 28px #0008; transition: transform 1.1s var(--ease); }
.project-card:nth-child(3) .project-image img { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; border: 0; border-radius: 0; object-position: 58% top; }
.project-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#0c0d10,#0c0d1055 19%,transparent 60%); }
.project-body { padding: 12px 22px 23px; position: relative; flex: 1; min-height: 116px; }
.project-body h3 { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 650; letter-spacing: -.55px; margin-bottom: 10px; }
.project-mark { width: 27px; height: 27px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.project-body p { color: var(--muted); font-size: 14px; line-height: 1.42; max-width: calc(100% - 18px); letter-spacing: -.1px; }
.project-body > .external-icon { position: absolute; right: 21px; bottom: 25px; }
.tech-section { margin-top: 54px; padding: 0 6px 118px; }
.tech-section .section-heading { margin-left: 0; margin-right: 0; }
.tech-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 16px; }
.tech-item { aspect-ratio: 1.04; display: flex; align-items: center; justify-content: center; background: linear-gradient(130deg,#101114b3,#090a0ce6); border: 1px solid var(--border); border-radius: 17px; position: relative; transition: transform .65s var(--ease),border-color .4s,background .4s; }
.tech-item img { width: 55%; height: 55%; object-fit: contain; transition: transform .7s var(--ease); }
.tech-item:nth-child(6) img { background: #000; border-radius: 50%; }
.tech-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%,4px); padding: 6px 10px; border-radius: 7px; border: 1px solid #333; background: #141519; color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .25s,transform .3s var(--ease); pointer-events: none; z-index: 3; }
.tech-item:focus-visible .tech-tooltip { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.image-placeholder { display: grid; place-items: center; color: var(--muted); height: 100%; font-size: 14px; }
.skip-link { position: fixed; top: 10px; left: 10px; padding: 12px 18px; border-radius: 8px; color: #050608; background: #fff; z-index: 10; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.no-script { padding: 24px; text-align: center; }
.no-script a { text-decoration: underline; }

/* The controller enables motion after the content has been built. */
.motion-ready .header { animation: enter-down 1.2s var(--ease) both; }
.motion-ready .portrait img { animation: portrait-enter 1.7s var(--ease) both; }
.motion-ready .eyebrow { animation: enter-up 1.2s var(--ease) .12s both; }
.motion-ready .eyebrow span { animation: line-enter 1.2s var(--ease) .4s both; }
.motion-ready .name-line > span { animation: name-enter 1.35s var(--ease) .2s both; }
.motion-ready .name-line:nth-child(2) > span { animation-delay: .32s; }
.motion-ready .intro { animation: enter-up 1.25s var(--ease) .42s both; }
.motion-ready .hero-actions .button { animation: enter-up 1.2s var(--ease) .54s backwards; }
.motion-ready .hero-actions .button:nth-child(2) { animation-delay: .66s; }
.reveal-pending { opacity: 0; translate: 0 34px; }
.reveal-pending.is-visible { animation: reveal-up 1.25s var(--ease) var(--reveal-delay,0ms) both; }
.section-heading.reveal-pending { translate: -20px 0; }
.section-heading.reveal-pending.is-visible { animation-name: reveal-side; }
.section-heading.is-visible h2::before { animation: line-enter 1s var(--ease) .1s both; }
.facts.is-visible::after { animation: line-enter 1.4s var(--ease) .2s both; }
@keyframes enter-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes enter-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes name-enter { from { transform: translateY(110%); opacity: .2; } to { transform: translateY(0); opacity: 1; } }
@keyframes portrait-enter { from { opacity: 0; transform: translateX(24px) scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes line-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes reveal-up { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-side { from { opacity: 0; translate: -20px 0; } to { opacity: 1; translate: 0 0; } }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform: translateY(-3px); box-shadow: 0 9px 28px #0005; }
  .button-primary:hover { background: #e8e9ed; border-color: #e8e9ed; }
  .button-secondary:hover { background: #16171b; border-color: #fff; }
  .button:hover .icon:last-child { transform: translateX(3px); }
  .link-card:hover,.project-card:hover { transform: translateY(-5px); border-color: #ffffff33; box-shadow: 0 16px 36px #0005; }
  .link-card:hover .platform-icon { transform: translateY(-1px) scale(1.06); }
  .link-card:hover .external-icon,.project-card:hover .external-icon { transform: translate(2px,-2px); }
  .project-card:hover .project-image img { transform: rotateY(-10deg) rotateZ(4deg) scale(1.045); }
  .project-card:nth-child(3):hover .project-image img { transform: scale(1.045); }
  .all-projects:hover span { transform: translateX(5px); }
  .tech-item:hover { transform: translateY(-5px); border-color: #ffffff30; background: #121317; }
  .tech-item:hover img { transform: scale(1.08); }
  .tech-item:hover .tech-tooltip { opacity: 1; visibility: visible; transform: translate(-50%,0); }
}
@media (min-width:1200px) {
  .header { height: 112px; }
  .hero { min-height: 535px; padding-top: 48px; }
  .portrait { top: -112px; height: 735px; width: 72%; }
  h1 { font-size: clamp(108px,8.5vw,124px); letter-spacing: -6px; }
  .eyebrow { font-size: 16px; letter-spacing: 3.8px; }
  .intro { max-width: 435px; font-size: 23px; }
  .hero-actions { margin-top: 32px; gap: 20px; }
  .button { height: 58px; font-size: 18px; padding-inline: 29px; }
  .facts { padding-top: 15px; padding-bottom: 40px; }
  .fact { gap: 23px; }
  .fact h3 { font-size: 18px; }
  .fact p { font-size: 15px; }
  .fact > .icon { width: 32px; height: 32px; }
  .fact:not(:first-child)::before { height: 62px; }
  .section { margin-top: 40px; }
  .section-heading { margin-bottom: 27px; }
  .section-heading h2 { font-size: 15px; }
  .links-grid { gap: 20px 26px; }
  .link-card { min-height: 108px; padding: 24px 29px; gap: 29px; }
  .link-card h3 { font-size: 22px; }
  .link-card p { font-size: 16px; }
  .platform-icon { width: 49px; height: 49px; }
  .projects-section { margin-top: 56px; }
  .projects-grid { gap: 26px; }
  .project-image { height: 195px; }
  .project-body { min-height: 133px; padding: 13px 25px 27px; }
  .project-body h3 { font-size: 23px; margin-bottom: 12px; }
  .project-body p { font-size: 16px; }
  .all-projects { font-size: 16px; }
  .tech-section { margin-top: 64px; padding-bottom: 125px; }
  .tech-grid { gap: 20px; }
}
@media (max-width:950px) and (min-width:701px) {
  .page { width: calc(100% - 64px); }
  .header { padding-inline: 8px; }
  .hero { padding-left: 8px; }
  .portrait { right: -32px; width: 77%; }
  .facts { padding-inline: 8px; }
  .fact { gap: 12px; padding-right: 12px; }
  .fact:not(:first-child) { padding-left: 16px; }
  .fact p { font-size: 12px; }
  .link-card { gap: 18px; padding-left: 20px; }
  .platform-icon { width: 38px; height: 38px; }
  .tech-grid { gap: 10px; }
  .tech-item { border-radius: 14px; }
  .project-body { padding-inline: 16px; }
  .project-body h3 { font-size: 18px; }
  .projects-grid { gap: 16px; }
}
@media (max-width:700px) {
  .page { width: calc(100% - 40px); }
  .header { height: 84px; padding: 0; gap: 12px; }
  .brand { gap: 10px; }
  .monogram { width: 37px; height: 32px; }
  .brand span { font-size: 10px; letter-spacing: 1.8px; max-width: 90px; white-space: normal; line-height: 1.6; }
  .availability { font-size: 10px; padding: 8px 10px; gap: 6px; }
  .status-dot { width: 7px; height: 7px; }
  .hero { padding: 238px 0 34px; min-height: auto; }
  .portrait { top: -84px; right: -20px; width: calc(100% + 40px); height: 430px; mask-image: linear-gradient(#000 38%,#000d 55%,transparent 99%); }
  .portrait img { object-position: 50% 22%; mask-image: linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent); }
  .hero-content { width: 100%; }
  .eyebrow { font-size: 11px; letter-spacing: 2.7px; margin-bottom: 17px; gap: 12px; }
  .eyebrow span { width: 28px; }
  h1 { font-size: clamp(72px,18vw,88px); line-height: .96; letter-spacing: -3.5px; margin-bottom: 22px; }
  .intro { font-size: 17px; line-height: 1.5; max-width: 350px; }
  .hero-actions { gap: 11px; margin-top: 26px; }
  .button { font-size: 14px; height: 51px; padding: 0 20px; gap: 9px; }
  .button .icon { width: 18px; height: 18px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 25px 0; padding: 10px 0 32px; }
  .fact { padding: 0 10px 0 0; gap: 12px; min-height: 55px; }
  .fact:not(:first-child) { padding-left: 17px; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact:nth-child(3)::before { display: none; }
  .fact > .icon { width: 25px; height: 25px; margin-top: 2px; }
  .fact h3 { font-size: 15px; }
  .fact p { font-size: 12px; line-height: 1.5; }
  .section { margin-top: 32px; }
  .section-heading { margin: 0 0 21px; gap: 8px; }
  .section-heading h2 { font-size: 11px; letter-spacing: 2.4px; gap: 11px; }
  .section-heading h2::before { width: 23px; }
  .links-grid { grid-template-columns: 1fr; gap: 13px; }
  .link-card { min-height: 91px; padding: 20px 21px; gap: 22px; border-radius: 17px; }
  .link-card h3 { font-size: 18px; }
  .link-card p { font-size: 13px; }
  .platform-icon { width: 38px; height: 38px; }
  .link-card .external-icon { top: 23px; right: 19px; width: 16px; height: 16px; }
  .projects-section { margin-top: 40px; }
  .all-projects { font-size: 12px; gap: 7px; }
  .all-projects span { font-size: 17px; }
  .projects-grid { grid-template-columns: 1fr; gap: 21px; }
  .project-image { height: auto; aspect-ratio: 1.95; }
  .project-image img { top: 24px; left: 23px; }
  .project-body { padding: 10px 22px 25px; min-height: 117px; }
  .project-body h3 { font-size: 21px; margin-bottom: 11px; }
  .project-body p { font-size: 15px; max-width: calc(100% - 28px); }
  .project-body > .external-icon { bottom: 28px; }
  .tech-section { padding: 0 0 76px; margin-top: 42px; }
  .tech-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
  .tech-item { border-radius: 14px; aspect-ratio: 1; }
  .tech-tooltip { font-size: 11px; }
}
@media (max-width:359px) {
  .page { width: calc(100% - 32px); }
  .availability { font-size: 9px; padding: 7px 8px; }
  .brand { gap: 7px; }
  .brand span { font-size: 9px; letter-spacing: 1.3px; }
  .monogram { width: 32px; }
  .eyebrow { font-size: 10px; letter-spacing: 2px; }
  .hero-actions { gap: 8px; }
  .button { padding: 0 13px; font-size: 13px; }
  .section-heading h2 { letter-spacing: 1.6px; font-size: 10px; }
  .all-projects { font-size: 11px; }
  .fact { gap: 8px; }
  .fact:not(:first-child) { padding-left: 12px; }
  .fact p { font-size: 11px; }
  .tech-grid { gap: 9px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .reveal-pending { opacity: 1; translate: none; }
}