@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --shine { syntax: '<percentage>'; inherits: false; initial-value: -30%; }

:root {
  color-scheme: light;
  --ink: #101828;
  --night: #101828;
  --edge: var(--ink);
  --shade: var(--ink);
  --navy: #1E2A38;
  --navy-2: #34495E;
  --muted: #4A5565;
  --bg: #F5F7FB;
  --paper: #FFFFFF;
  --cell: #EEF2F8;
  --line: rgba(16, 24, 40, .065);
  --line-2: rgba(16, 24, 40, .16);
  --g1: #38C9E6;
  --g2: #43E8A0;
  --violet: #5B5BFF;
  --purple: #861BE3;
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  --grad-x: linear-gradient(100deg, var(--g1) 0%, var(--g2) 55%, var(--g1) 100%);

  --px: min(calc(100vw / 1920), 1.12px);
  --gutter: calc(var(--cell-size) * 2);
  --off: clamp(5px, calc(11 * var(--px)), 12px);
  --btn-r: clamp(18px, calc(32 * var(--px)), 34px);
  --cell-size: max(30px, calc(60 * var(--px)));

  --f-head: 'Montserrat', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);

  --h2: clamp(36px, calc(105 * var(--px)), 118px);
  --mx: -999px;
  --my: -999px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #EDF2F9;
  --edge: #070B12;
  --shade: #070B12;
  --muted: #A3B0C2;
  --bg: #1E2A38;
  --paper: #2A3849;
  --cell: #243142;
  --navy: #131B27;
  --navy-2: #3A4D63;
  --line: rgba(237, 242, 249, .06);
  --line-2: rgba(237, 242, 249, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(15px, calc(22 * var(--px)), 24px)/1.35 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--g1); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, .event__title, .wcard__title, .proj__name { text-wrap: balance; }
p, blockquote, .footer__addr { text-wrap: pretty; hanging-punctuation: first; }
.event__day, .event__time, .event__count, .match__pct { font-variant-numeric: tabular-nums; }
section[id], footer[id] { scroll-margin-top: 84px; }
::selection { background: var(--g2); color: var(--night); }

html { scroll-snap-type: y proximity; }
.hero, main .h2 { scroll-snap-align: start; }
main .h2 { scroll-margin-top: calc(var(--cell-size) * 2); }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--line-2); }
::-webkit-scrollbar-thumb { background: var(--grad); border: 2px solid var(--edge); border-radius: 7px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--g2), var(--g1)); }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--g1) var(--bg); scrollbar-width: thin; }
}

@supports (width: round(down, 10.5px, 1px)) {
  :root { --cell-size: max(30px, round(down, calc(60 * var(--px)), 1px)); }
}
body { position: relative; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.container { width: 100%; padding-inline: var(--gutter); max-width: calc(1920px + 0px); margin-inline: auto; }

.bg-grid, .bg-spot {
  inset: 0; z-index: -1; pointer-events: none;
  background-size: var(--cell-size) var(--cell-size);
}
.bg-grid { position: absolute; }
.bg-spot { position: fixed; background-position: 0 calc(var(--sy, 0px) * -1); }
.bg-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
.bg-spot {
  background-image:
    linear-gradient(rgba(56, 201, 230, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 232, 160, .6) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 70%);
          mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000 0%, transparent 70%);
}

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(12px, calc(26 * var(--px)), 30px) clamp(16px, calc(72 * var(--px)), 80px);
  transition: background-color .3s, box-shadow .3s, padding .3s;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line-2);
  padding-block: 10px;
}

.logo {
  --s: clamp(10px, calc(13 * var(--px)), 14px);
  display: inline-flex; align-items: center;
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
.mark {
  flex: none; overflow: visible;
  width: calc(var(--s) * 3.5); height: calc(var(--s) * 3.5); margin: calc(var(--s) * -.29);
}
.mark .px { fill: var(--g2); transform-box: fill-box; transform-origin: 50% 50%; }
.mark .px1 { --n: 0; }
.mark .px2 { --n: 1; }
.mark .px3 { --n: 2; }
.logo__words {
  display: flex; flex-direction: column; margin-left: calc(var(--s) * .6);
  font: 800 calc(var(--s) * 1.42)/.9 var(--f-head); letter-spacing: -.02em; white-space: nowrap;
}
.logo.is-climb .mark .px { animation: climb .7s var(--spring) both; animation-delay: calc(var(--n) * 90ms); }
@keyframes climb { 40% { transform: translateY(-55%); fill: var(--g1); } }

.preloader { display: none; }
.js .preloader {
  display: block; position: fixed; inset: 0; z-index: 100;
  background: var(--night); color: #fff;
  transition: background-color .9s var(--ease);
  animation: plFailsafe .5s 9s forwards;
}
.js.intro-seen .preloader { display: none; }
.preloader::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: var(--cell-size) var(--cell-size);
  transition: opacity .6s;
}
@keyframes plFailsafe { to { opacity: 0; visibility: hidden; } }
.preloader__logo {
  --k: 3.4;
  position: fixed; left: 50%; top: 50%; margin: 0;
  color: inherit;
  transform: translate(-50%, -50%) scale(var(--k));
  transition: color .8s var(--ease);
  pointer-events: none;
}
@media (max-width: 600px) { .preloader__logo { --k: 2.6; } }
.preloader__logo .logo__words { width: 0; margin-left: 0; opacity: 0; transition: width .75s var(--ease), margin-left .75s var(--ease); }
.preloader.pl-words .logo__words { margin-left: calc(var(--s) * .6); opacity: 1; }
.preloader__logo .ch { display: inline-block; font-style: normal; white-space: pre; opacity: 0; transform: scale(.55); }
.pl-liquid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.preloader.pl-loading .mark .px { animation: plStep 1.2s var(--ease) infinite; animation-delay: calc(var(--n) * .18s); }
@keyframes plStep {
  0%, 100% { transform: none; fill: #1f6f58; }
  28% { transform: translate(18%, -62%) scale(.86); fill: var(--g2); }
  55% { transform: none; fill: var(--g2); }
}
.preloader.pl-ready .mark .px { animation: plSettle .6s var(--spring) both; animation-delay: calc(var(--n) * 80ms); }
@keyframes plSettle { 0% { transform: scale(.55); fill: var(--g1); } 100% { transform: none; } }
.preloader.pl-fly { background-color: transparent; color: var(--ink); }
.preloader.pl-fly::before { opacity: 0; }
html.is-loading { overflow: hidden; }
html.is-loading .header .logo { opacity: 0; }

.header__tools { display: flex; align-items: center; gap: clamp(10px, calc(40 * var(--px)), 44px); }
.header__login {
  font: 600 14px/1 var(--f-mono); padding: 10px 16px; border-radius: 14px;
  background: var(--grad); color: var(--night); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--shade);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease), box-shadow .2s;
}
.header.is-scrolled .header__login { opacity: 1; transform: none; pointer-events: auto; }
.header__login:hover { box-shadow: 5px 5px 0 var(--shade); transform: translate(-2px, -2px); }

.icon-btn {
  display: grid; place-items: center;
  width: clamp(44px, calc(60 * var(--px)), 62px); aspect-ratio: 1;
  color: var(--ink); border-radius: 50%;
  transition: transform .4s var(--spring), color .2s;
}
.icon-btn svg { width: 100%; height: 100%; }
.icon-btn:hover { transform: rotate(-10deg) scale(1.1); }
.icon-btn:hover svg { filter: drop-shadow(3px 3px 0 var(--g2)); }
.icon-btn[aria-pressed="true"] { color: var(--g1); }

.lang { position: relative; }
.lang__btn {
  font: 700 clamp(18px, calc(30 * var(--px)), 32px)/1 var(--f-head);
  padding: 6px 4px; position: relative;
}
.lang__btn::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.lang__btn:hover::after, .lang__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.lang__menu {
  position: absolute; right: -10px; top: calc(100% + 12px); min-width: 170px;
  background: var(--paper); border: 2px solid var(--edge); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--shade); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top right;
  transition: opacity .2s, transform .3s var(--spring), visibility .2s;
}
.lang__btn[aria-expanded="true"] + .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu button {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left;
  font: 700 16px/1 var(--f-head); padding: 11px 12px; border-radius: 12px;
}
.lang__menu small { font: 400 13px/1 var(--f-mono); color: var(--muted); }
.lang__menu button:hover, .lang__menu button[aria-selected="true"] { background: var(--cell); }
.lang__menu button[aria-selected="true"] small { color: var(--ink); }

.btn {
  --lift: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  font: 700 clamp(18px, calc(40 * var(--px)), 42px)/1 var(--f-head);
  color: var(--night);
  background: var(--grad-x); background-size: 220% 100%; background-position: 0% 0;
  border: 3px solid var(--edge);
  border-radius: var(--btn-r);
  box-shadow: calc(var(--off) + var(--lift)) calc(var(--off) + var(--lift)) 0 var(--shade);
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  will-change: transform;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-position .8s var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: -20% auto -20% 0; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: btnShine 4.5s 2s var(--ease) infinite;
}
.btn:hover { --lift: 4px; background-position: 100% 0; }
.btn:active { --lift: calc(var(--off) * -1); transition-duration: .08s; }
.btn__arrow { width: .9em; height: .9em; margin-right: -1.2em; opacity: 0; transform: translateX(-10px); transition: all .35s var(--ease); }
.btn:hover .btn__arrow { margin-right: 0; opacity: 1; transform: none; }
@keyframes btnShine { 0%, 60% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(460%) skewX(-18deg); } }

.btn--xl { width: clamp(220px, calc(530 * var(--px)), 560px); height: clamp(58px, calc(92 * var(--px)), 96px); }
.btn--lg { width: clamp(200px, calc(390 * var(--px)), 410px); height: clamp(56px, calc(92 * var(--px)), 96px); }

.btn-shell { --sink: 0; position: relative; display: inline-flex; vertical-align: top; width: fit-content; }
.btn-shell .btn { box-shadow: none; transform: translate(calc(var(--off) * var(--sink)), calc(var(--off) * var(--sink))); }
.btn-shell__ink {
  position: absolute; inset: 0; translate: var(--off) var(--off); pointer-events: none;
  border-radius: var(--btn-r); background: var(--shade); filter: url(#goo-ink);
}
.btn-shell__ink i {
  --drip: 34px;
  position: absolute; bottom: 6px; left: 24%; width: 18px; height: 18px; border-radius: 50%; background: var(--shade);
  translate: 0 calc(var(--drip) * var(--sink)); transition: translate .7s var(--ease);
}
.btn-shell__ink i::before {
  content: ''; position: absolute; left: 50%; bottom: 50%; translate: -50% 0;
  width: calc(60% - 25% * var(--sink)); height: calc(var(--drip) * var(--sink) + 50%); border-radius: 99px; background: inherit;
  transition: height .7s var(--ease), width .7s var(--ease); transition-delay: inherit;
}
.btn-shell__ink i:nth-child(2) { --drip: 56px; left: 58%; width: 24px; height: 24px; transition-delay: .08s; }
.btn-shell__ink i:nth-child(3) { --drip: 22px; left: 82%; width: 14px; height: 14px; transition-delay: .16s; }
@media (hover: hover) { .btn-shell:hover { --sink: .55; } }
.btn-shell:has(.btn:active) { --sink: 1; }

.h2 {
  font: 400 var(--h2)/1.02 var(--f-head);
  letter-spacing: -.01em;
  position: relative;
}
.h2--right { width: fit-content; margin-left: auto; text-align: center; }
.line { display: block; overflow: hidden; padding: .2em 0 .27em; margin: -.2em 0 -.27em; }
.line > span { display: inline-block; }
.js [data-reveal] .line > span, .js .hero__title .line > span { transform: translateY(140%); transition: transform 1s var(--ease); }
.js [data-reveal].is-in .line > span, .js .hero__title.is-in .line > span { transform: none; }
[data-reveal] .line:nth-child(2) > span { transition-delay: .1s; }
.hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.hero__title .line:nth-child(3) > span { transition-delay: .24s; }

.stair { display: inline-block; width: .6em; height: .6em; margin-left: .2em; vertical-align: -.03em; overflow: visible; }
.stair .px { fill: var(--g2); transform-box: fill-box; transform-origin: 50% 50%; }
.stair .px2 { fill: #3fdcb4; }
.stair .px1 { fill: var(--g1); }
.is-split .line > .stair { display: none; }
.js .stair .px { transform: scale(0); transition: transform .7s var(--ease); }
.js .is-in .stair .px { transform: none; }
.is-in .stair .px1 { transition-delay: .45s; }
.is-in .stair .px2 { transition-delay: .55s; }
.is-in .stair .px3 { transition-delay: .65s; }

.js [data-reveal="up"] { opacity: 0; transform: translateY(46px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="up"].is-in { opacity: 1; transform: none; }
.js [data-reveal="flip"] { opacity: 0; transition: opacity .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="flip"].is-in { opacity: 1; }

.folder__bg { position: absolute; inset: 0; filter: drop-shadow(var(--off) var(--off) 0 var(--shade)); pointer-events: none; }
.folder__shape, .folder__fill {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, var(--tab-w, 30%) 0, calc(var(--tab-w, 30%) + var(--tab-s, 30px)) var(--tab-h, 40px), 100% var(--tab-h, 40px), 100% 100%, 0 100%);
}
.folder__shape { background: var(--edge); }
.folder__fill { inset: 1.5px; background: var(--paper); }

.dots {
  --dsz: clamp(10px, calc(15 * var(--px)), 16px); --dr: calc(var(--dsz) * .3); --dw: calc(var(--dsz) * 2.6);
  display: flex; align-items: center; gap: max(calc(25px - var(--dsz)), clamp(8px, calc(12 * var(--px)), 13px));
}
.dot {
  width: var(--dsz); height: var(--dsz); border-radius: var(--dr);
  background: color-mix(in srgb, var(--ink) 20%, var(--bg)); position: relative;
  transition: width .6s var(--spring), background-color .3s;
}
.dot::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform: scale(0); border-radius: inherit; transition: transform .35s var(--spring); }
.dot::before { content: ''; position: absolute; inset: -12px; }
.dot.is-active { width: var(--dw); }
.dot.is-active::after { transform: scale(1); }
.dot:hover { background: color-mix(in srgb, var(--ink) 34%, var(--bg)); }
.dots--goo { position: relative; filter: url(#goo-dots); }
.dots--goo .dot::after { content: none; }
.dots--goo:focus-within, .a11y .dots--goo { filter: none; }
.dots__blob {
  position: absolute; left: 0; top: 50%; width: var(--dw); height: var(--dsz); margin-top: calc(var(--dsz) / -2);
  border-radius: var(--dr); background: var(--grad); pointer-events: none;
  translate: var(--bx, 0px) 0; transition: translate .6s cubic-bezier(.7, 0, .2, 1);
}
.dots__blob.is-moving { animation: dotStretch .6s cubic-bezier(.7, 0, .2, 1); }
@keyframes dotStretch { 45% { scale: 1.3 .78; } 100% { scale: 1 1; } }

.cone { position: absolute; pointer-events: none; }
.cone > svg { width: 100%; height: 100%; overflow: visible; animation: coneBob 4.2s ease-in-out infinite; transform-origin: 60% 50%; }
.cone .w { opacity: 0; animation: wave 2.4s ease-out infinite; transform-box: fill-box; transform-origin: 100% 50%; }
.cone .w2 { animation-delay: .35s; }
.cone .w3 { animation-delay: .7s; }
@keyframes coneBob { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-4px, -7px) rotate(-3deg); } }
@keyframes wave { 0% { opacity: 0; transform: translateX(10px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(-14px) scale(1.15); } }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 clamp(11px, calc(15 * var(--px)), 15px)/1 var(--f-mono);
  padding: 8px 12px; border: 1.5px solid currentColor; border-radius: 999px; white-space: nowrap;
}
.tag--live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 0 0 rgba(67, 232, 160, .7); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(67, 232, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 232, 160, 0); } }

.mb-layer { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.mb { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.mb--partners { width: 100%; height: 100%; }

.hero {
  position: relative;
  min-height: max(640px, calc(1000 * var(--px)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(640 * var(--px));
  grid-template-rows: 1fr auto;
  column-gap: calc(40 * var(--px));
  padding: calc(225 * var(--px)) calc(var(--cell-size) * 3) calc(78 * var(--px)) calc(var(--cell-size) * 3);
}
.hero > * { position: relative; z-index: 1; }

.hero__title {
  grid-column: 1; grid-row: 1; align-self: start;
  font: 400 clamp(44px, calc(132 * var(--px)), 148px)/.9 var(--f-head);
  letter-spacing: -.005em;
}
.line--strong { font-weight: 600; letter-spacing: .015em; }
.type { white-space: pre; }
.caret {
  display: inline-block; width: .42em; height: .72em; margin-left: .06em; vertical-align: -.02em;
  background: var(--grad); border: 2px solid var(--edge); border-radius: .06em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero__cta { grid-column: 1; grid-row: 2; align-self: end; }

.hero__visual { grid-column: 2; grid-row: 1; margin-top: calc(-70 * var(--px)); }
.dots--hero { justify-content: flex-end; padding-right: calc(25 * var(--px)); margin-bottom: calc(10 * var(--px)); }

.stack {
  position: relative; width: calc(640 * var(--px)); height: calc(560 * var(--px));
}
.stack__papers { position: absolute; inset: 0; }
.paper {
  --tab-w: 46%; --tab-h: calc(36 * var(--px)); --tab-s: calc(30 * var(--px));
  position: absolute; left: calc(125 * var(--px)); top: calc(10 * var(--px));
  width: calc(355 * var(--px)); height: calc(400 * var(--px));
  transform-origin: 50% 60%;
  transition: transform .8s var(--ease);
}
.paper[data-pos="0"] { transform: translate(0, 0) rotate(-8deg); z-index: 3; }
.paper[data-pos="1"] { transform: translate(calc(78 * var(--px)), calc(22 * var(--px))) rotate(-3.5deg); z-index: 2; }
.paper[data-pos="2"] { transform: translate(calc(98 * var(--px)), calc(62 * var(--px))) rotate(-2deg); z-index: 1; }
.paper.is-leaving { animation: paperOut 1s var(--ease) forwards; }
@keyframes paperOut {
  0% { transform: translate(0, 0) rotate(-8deg); z-index: 4; }
  42% { transform: translate(calc(-90 * var(--px)), calc(-120 * var(--px))) rotate(-20deg); z-index: 4; }
  50% { z-index: 0; }
  100% { transform: translate(calc(98 * var(--px)), calc(62 * var(--px))) rotate(-2deg); z-index: 0; }
}
.js .stack:not(.is-in) .paper { transform: translate(calc(40 * var(--px)), calc(60 * var(--px))) rotate(0deg) scale(.9); opacity: 0; }
.stack .paper { transition: transform .8s var(--ease), opacity .6s; }
.stack.is-in .paper[data-pos="1"] { transition-delay: .1s; }
.stack.is-in .paper[data-pos="0"] { transition-delay: .2s; }

.paper__body {
  position: absolute; inset: 0;
  padding: calc(105 * var(--px)) calc(38 * var(--px)) calc(40 * var(--px)) calc(42 * var(--px));
  display: flex; flex-direction: column; justify-content: flex-start; gap: calc(30 * var(--px));
  font: 400 clamp(11px, calc(25 * var(--px)), 27px)/1.18 var(--f-head);
  opacity: 0; transition: opacity .4s;
}
.paper[data-pos="0"] .paper__body { opacity: 1; transition: opacity .5s .45s; }
.paper__more { display: inline-flex; gap: .3em; align-items: center; font-weight: 500; width: fit-content; position: relative; }
.paper__more b { font-weight: 500; transition: transform .3s var(--spring); }
.paper__more:hover b { transform: translateX(6px); }
.paper__more::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.paper__more:hover::after { transform: scaleX(1); }

.cone--hero-1 { left: calc(-5 * var(--px)); top: calc(30 * var(--px)); width: calc(170 * var(--px)); height: calc(110 * var(--px)); transform: rotate(4deg); z-index: 5; }
.cone--hero-2 { left: calc(395 * var(--px)); top: calc(395 * var(--px)); width: calc(215 * var(--px)); height: calc(140 * var(--px)); transform: rotate(-123deg); z-index: 5; }
.cone--hero-2 > svg { animation-delay: -2s; }
.js .stack:not(.is-in) .cone { opacity: 0; }
.cone { transition: opacity .6s .5s; }

.hero__desc {
  grid-column: 2; grid-row: 2; align-self: end;
  margin-left: calc(165 * var(--px));
  font: 400 clamp(16px, calc(28 * var(--px)), 30px)/1.25 var(--f-body);
  letter-spacing: .01em;
  max-width: 30ch;
}

.partners { padding-top: calc(200 * var(--px)); }
.partners .h2 { margin-bottom: calc(30 * var(--px)); }
.pgrid {
  --cols: 10; --rows: 4;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  border-top: 1px solid var(--line-2);
  background: var(--cell);
  isolation: isolate;
}
.pcell {
  position: relative; aspect-ratio: 192 / 150;
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: grid; place-items: center; overflow: hidden;
}
.pcell.is-edge { border-right: 0; }
.pcell::before {
  content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.pcell.is-lit::before { opacity: .38; transition-duration: .08s; }
.pcell img {
  position: relative; width: 62%; height: 48%; object-fit: contain;
  filter: grayscale(1) invert(0) hue-rotate(0deg) contrast(1.05); opacity: .55;
  border: 2px solid transparent; border-radius: 12px; padding: 6px 10px;
  transition: filter .4s, opacity .4s, transform .5s var(--spring), background-color .3s, border-color .3s, box-shadow .3s;
}
.pcell:hover img { filter: none; opacity: 1; transform: scale(1.12); }
.js .pcell img { opacity: 0; transform: translateY(14px); }
.pgrid.is-in .pcell img { opacity: .55; transform: none; transition-delay: calc(var(--i) * 18ms); }
.pgrid.is-in .pcell:hover img { opacity: 1; transform: scale(1.12); transition-delay: 0s; }

.pgrid.is-in .pcell.is-glow img, .pcell.is-glow img {
  filter: none; opacity: 1; transition-delay: 0s;
  background-color: #fff; border-color: var(--edge); box-shadow: 4px 4px 0 var(--shade);
  transform: rotate(-3deg) scale(1.06); animation: stickerPop .65s var(--spring) both;
}
@keyframes stickerPop {
  0% { transform: scale(.3) rotate(10deg); }
  55% { transform: scale(1.18) rotate(-6deg); }
  100% { transform: rotate(-3deg) scale(1.06); }
}

.events { padding-top: calc(170 * var(--px)); }
.events .h2 { margin-right: calc(65 * var(--px)); }
.events__grid {
  margin-top: calc(130 * var(--px));
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(50 * var(--px)) calc(50 * var(--px));
}
.event { position: relative; min-height: clamp(260px, calc(450 * var(--px)), 480px); }
.event__back {
  position: absolute; inset: 0; border-radius: clamp(14px, calc(22 * var(--px)), 24px);
  background: var(--grad); border: 1.5px solid var(--edge);
  transform: rotate(0deg); transition: transform 1.1s var(--spring) .25s;
}
.event--a .event__back { inset: calc(-40 * var(--px)) calc(110 * var(--px)) calc(55 * var(--px)) calc(-35 * var(--px)); background: linear-gradient(160deg, var(--g1), var(--g2) 70%); }
.event--b .event__back { inset: calc(-25 * var(--px)) calc(-25 * var(--px)) calc(20 * var(--px)) calc(45 * var(--px)); background: linear-gradient(90deg, var(--g2), var(--g2) 70%, var(--g1)); }
.event--c .event__back { inset: calc(80 * var(--px)) calc(40 * var(--px)) calc(-30 * var(--px)) calc(-20 * var(--px)); background: linear-gradient(20deg, var(--g2), var(--g1)); }
.event--d .event__back { inset: calc(-25 * var(--px)) calc(-25 * var(--px)) calc(-40 * var(--px)) calc(90 * var(--px)); background: linear-gradient(200deg, var(--g1), var(--g2) 40%); }
.event.is-in.event--a .event__back { transform: rotate(-4deg); }
.event.is-in.event--b .event__back { transform: rotate(1.6deg); }
.event.is-in.event--c .event__back { transform: rotate(1.8deg); }
.event.is-in.event--d .event__back { transform: rotate(-1.8deg); }
@media (hover: hover) { .event:hover .event__back { transform: rotate(0deg) scale(1.02) !important; transition-delay: 0s; } }

.event__card {
  --lift: 0px;
  position: relative; height: 100%;
  border-radius: clamp(22px, calc(40 * var(--px)), 42px);
  padding: clamp(22px, calc(48 * var(--px)), 52px) clamp(22px, calc(54 * var(--px)), 58px);
  display: flex; flex-direction: column;
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.event:hover .event__card { --lift: 4px; }
.event--light .event__card { background: var(--paper); box-shadow: calc(var(--off) + var(--lift)) calc(var(--off) + var(--lift)) 0 var(--shade); }
.event--dark .event__card { background: var(--navy); color: #fff; box-shadow: calc(var(--off) + var(--lift)) calc(var(--off) + var(--lift)) 0 var(--ev-shadow, rgba(16, 24, 40, .35)); }

.event__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.event__date { display: flex; align-items: baseline; gap: 10px; line-height: .9; }
.event__day { font: 800 clamp(48px, calc(110 * var(--px)), 118px)/.85 var(--f-head); letter-spacing: -.03em; }
.event__mon { font: 500 clamp(15px, calc(26 * var(--px)), 28px)/1 var(--f-mono); text-transform: lowercase; }
.event--dark .event__day { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.event--light .event__day { -webkit-text-stroke: 0; }
.event__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.event__count { font: 500 clamp(11px, calc(15 * var(--px)), 15px)/1 var(--f-mono); opacity: .65; }
.event__title { margin-top: auto; padding-top: 18px; font: 600 clamp(22px, calc(42 * var(--px)), 46px)/1.08 var(--f-head); letter-spacing: -.01em; }
.event__desc { margin-top: 12px; max-width: 38ch; font-size: clamp(14px, calc(20 * var(--px)), 21px); opacity: .78; }
.event__bottom { margin-top: clamp(16px, calc(28 * var(--px)), 30px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: clamp(12px, calc(20 * var(--px)), 22px); border-top: 1.5px dashed currentColor; border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
.event__time { font: 500 clamp(14px, calc(20 * var(--px)), 21px)/1 var(--f-mono); }
.event__link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 clamp(13px, calc(18 * var(--px)), 19px)/1 var(--f-mono);
  padding: 11px 16px; border-radius: 14px; border: 2px solid var(--edge);
  background: var(--grad); color: var(--night); box-shadow: 3px 3px 0 var(--shade);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.event--dark .event__link { box-shadow: 3px 3px 0 #000; }
.event__link svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.event__link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shade); }
.event__link:hover svg { transform: translateX(4px); }

.stories { padding-top: calc(180 * var(--px)); }
.stories__grid {
  margin-top: calc(95 * var(--px));
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(150 * var(--px));
}
.story__head { display: flex; flex-direction: column; align-items: flex-end; gap: calc(14 * var(--px)); margin-bottom: calc(-22 * var(--px)); position: relative; z-index: 2; }
.story__label { font: 400 clamp(18px, calc(32 * var(--px)), 34px)/1 var(--f-body); }
.story__head .dots { margin-right: 0; }
.story__wrap { position: relative; margin-top: calc(-20 * var(--px)); }
.story__back {
  position: absolute; inset: calc(-40 * var(--px)) calc(-40 * var(--px)) calc(55 * var(--px)) calc(-25 * var(--px));
  background: var(--grad); border: 1.5px solid var(--edge); border-radius: clamp(14px, calc(22 * var(--px)), 24px);
  transform: rotate(0deg); transition: transform 1.1s var(--spring) .3s;
}
.story--peer .story__back { inset: calc(-40 * var(--px)) calc(-50 * var(--px)) calc(80 * var(--px)) calc(-28 * var(--px)); background: linear-gradient(170deg, var(--g2), var(--g1)); }
.story--company .story__back { inset: calc(35 * var(--px)) calc(-35 * var(--px)) calc(55 * var(--px)) calc(-30 * var(--px)); background: linear-gradient(90deg, var(--g1), var(--g2) 40%); }
.story.is-in.story--peer .story__back { transform: rotate(-4deg); }
.story.is-in.story--company .story__back { transform: rotate(2.2deg); }

.story__card {
  --tab-w: 27%; --tab-h: calc(56 * var(--px)); --tab-s: calc(32 * var(--px));
  position: relative;
  min-height: clamp(360px, calc(525 * var(--px)), 560px);
}
.story.is-switching .story__card { animation: shuffle .7s var(--ease); }
@keyframes shuffle { 0% { transform: none; } 35% { transform: translate(10px, -14px) rotate(1.4deg); } 100% { transform: none; } }

.story__slides { position: relative; height: 100%; min-height: inherit; }
.story__slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  grid-template-rows: 1fr auto;
  column-gap: calc(46 * var(--px));
  padding: calc(105 * var(--px)) calc(58 * var(--px)) calc(42 * var(--px)) calc(65 * var(--px));
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.story__slide.is-active { opacity: 1; visibility: visible; position: relative; min-height: inherit; }
.story__media { grid-column: 1; grid-row: 1; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1.5px solid var(--edge); margin-right: calc(-46 * var(--px)); padding-right: calc(46 * var(--px)); }
.story__media img { width: 92%; max-height: calc(300 * var(--px)); min-height: 150px; object-fit: contain; object-position: bottom; transform: translateY(16px); opacity: 0; transition: transform .7s var(--ease) .1s, opacity .5s .1s; }
.story__slide.is-active .story__media img { transform: none; opacity: 1; }
.story__quote { grid-column: 2; grid-row: 1; align-self: center; padding-bottom: calc(26 * var(--px)); border-bottom: 1.5px solid var(--edge); align-self: stretch; display: flex; align-items: center;
  font: 400 clamp(14px, calc(23 * var(--px)), 24px)/1.15 var(--f-body); }
.story__slide .story__quote { transform: translateX(14px); opacity: 0; transition: transform .7s var(--ease) .18s, opacity .5s .18s; }
.story__slide.is-active .story__quote { transform: none; opacity: 1; }
.story__who { grid-column: 1 / -1; grid-row: 2; padding: calc(28 * var(--px)) 0 0 calc(25 * var(--px)); display: flex; flex-direction: column; gap: 6px;
  font: 400 clamp(18px, calc(32 * var(--px)), 34px)/1.15 var(--f-body); }
.story__who b { font-weight: 600; }
.story__media--logo { align-items: center; padding-bottom: calc(20 * var(--px)); }
.story__media--logo .s21 { width: 78%; height: auto; aspect-ratio: 245 / 200; color: #000; }
.story__media--logo .s21 .inv { fill: #fff; }

.avatar, .mono-logo {
  display: grid; place-items: center; margin-bottom: calc(30 * var(--px));
  width: clamp(110px, calc(200 * var(--px)), 210px); aspect-ratio: 1;
  font: 700 clamp(34px, calc(64 * var(--px)), 68px)/1 var(--f-head); color: #fff;
  border: 2px solid var(--edge); border-radius: clamp(20px, calc(34 * var(--px)), 36px);
  background: var(--grad); box-shadow: 6px 6px 0 var(--shade);
}
.avatar--v, .mono-logo--v { background: linear-gradient(135deg, var(--g1), var(--violet)); }
.mono-logo { background: var(--navy); color: var(--g2); font-family: var(--f-mono); border-radius: 50%; }
.mono-logo--v { color: #fff; }

.cone--story-1 { left: calc(-40 * var(--px)); bottom: calc(-130 * var(--px)); width: calc(180 * var(--px)); height: calc(115 * var(--px)); transform: rotate(-62deg) scaleY(-1); z-index: 3; }
.cone--story-2 { right: calc(-95 * var(--px)); top: calc(55 * var(--px)); width: calc(170 * var(--px)); height: calc(105 * var(--px)); transform: rotate(160deg) scaleY(-1); z-index: 3; }
.cone--story-2 > svg { animation-delay: -1.4s; }

.projects { padding-top: calc(250 * var(--px)); }
.projects .h2 { margin-right: calc(-10 * var(--px)); }
.projects__grid {
  margin-top: calc(80 * var(--px));
  display: grid; grid-template-columns: 700fr 450fr 450fr; gap: calc(30 * var(--px));
  align-items: end;
}
.proj__name { text-align: center; font: 400 clamp(17px, calc(32 * var(--px)), 34px)/1.1 var(--f-body); margin-bottom: calc(42 * var(--px)); transition: transform .4s var(--spring); }
.proj:hover .proj__name { transform: translateY(-6px); }
.proj__name::after { content: ''; display: block; width: 40px; height: 3px; margin: 12px auto 0; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .45s var(--ease); }
.proj:hover .proj__name::after { transform: scaleX(1); }
.proj__comp { position: relative; height: clamp(520px, calc(930 * var(--px)), 980px); }

.pfold { position: absolute; transition: transform .55s var(--ease); }
.pfold .folder__bg { filter: none; }
.pfold--shadow .folder__bg { filter: drop-shadow(var(--off) var(--off) 0 var(--shade)); }
.pfold--dark .folder__shape, .pfold--dark .folder__fill { background: var(--navy); }
.pfold--dark .folder__fill { inset: 0; }
.pfold--light { --tab-w: 40%; --tab-h: calc(22 * var(--px)); --tab-s: calc(30 * var(--px)); }
.pfold--tab-right { --tab-w: 90%; --tab-h: calc(23 * var(--px)); --tab-s: calc(30 * var(--px)); }
.pfold--plain { background: var(--navy); }

.proj--a .pfold--full { inset: 0 0 0 calc(8 * var(--px)); }
.proj--a .psheet--bottom {
  position: absolute; left: 0; right: calc(10 * var(--px)); bottom: calc(10 * var(--px)); height: 54%;
  background: var(--paper); border: 1.5px solid var(--edge);
  padding: clamp(18px, calc(44 * var(--px)), 48px);
  display: flex; flex-direction: column; transition: transform .55s var(--ease);
}
.proj--a:hover .psheet--bottom { transform: translateY(-14px) rotate(-.6deg); }
.proj--a .viz { position: absolute; inset: calc(40 * var(--px)) calc(46 * var(--px)) calc(56% + 28px) calc(40 * var(--px)); }
.proj--a .viz--chat { justify-content: center; }

.proj--b .pfold--full { inset: calc(20 * var(--px)) 0 0 calc(8 * var(--px)); }
.proj--b .pfold--top { left: 0; right: calc(10 * var(--px)); top: 0; height: 61%; }
.proj--b .pfold--top .folder__shape { background: var(--edge); }
.proj--b:hover .pfold--top { transform: translateY(-12px) rotate(.6deg); }
.proj--b .viz { position: absolute; inset: 64% calc(36 * var(--px)) calc(36 * var(--px)) calc(30 * var(--px)); }

.proj--c .pfold--half { left: 0; right: calc(10 * var(--px)); height: calc(50% - 22px); top: 0; }
.proj--c .pfold--second { top: auto; bottom: calc(10 * var(--px)); }
.proj--c:hover .pfold--half:first-child { transform: translateY(-10px) rotate(-.8deg); }
.proj--c:hover .pfold--second { transform: translateY(6px) rotate(.5deg); }
.proj--c .viz { position: absolute; inset: calc(60 * var(--px)) calc(30 * var(--px)) calc(30 * var(--px)); }

.psheet__in { position: absolute; inset: 0; padding: calc(70 * var(--px)) clamp(18px, calc(40 * var(--px)), 44px) clamp(18px, calc(36 * var(--px)), 40px); display: flex; flex-direction: column; }
.proj__desc { font-size: clamp(14px, calc(22 * var(--px)), 23px); line-height: 1.3; }
.proj__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.proj__tags li { font: 500 clamp(11px, calc(15 * var(--px)), 15px)/1 var(--f-mono); padding: 7px 10px; border-radius: 999px; background: var(--cell); border: 1.5px solid var(--edge); }
.proj__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font: 600 clamp(13px, calc(18 * var(--px)), 19px)/1 var(--f-mono); padding-top: 16px; position: relative; }
.proj__link svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.proj__link:hover svg { transform: translateX(6px); }
.proj__link::after { content: ''; position: absolute; left: 0; right: 26px; bottom: -5px; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.proj__link:hover::after { transform: scaleX(1); }

.viz--chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; font: 500 clamp(11px, calc(17 * var(--px)), 18px)/1.3 var(--f-mono); }
.msg { max-width: 86%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--navy-2); color: #fff; width: fit-content;
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.msg--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--grad); color: var(--night); }
.msg.is-on { opacity: 1; transform: none; }
.msg--typing { letter-spacing: .2em; }
.viz--chat.is-out .msg { opacity: 0; transform: translateY(-8px); }

.viz--skills { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font: 500 clamp(10px, calc(14 * var(--px)), 15px)/1 var(--f-mono); color: rgba(255, 255, 255, .72); }
.skills__head { display: flex; justify-content: space-between; color: #fff; margin-bottom: 4px; transition: opacity .4s var(--ease); }
.skills__head b { font-weight: 600; color: var(--g2); }
.skill { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; }
.skill__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.skill__bar i { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .08); transition: background-color .5s var(--ease); }
.skill__bar i.on { background: var(--g2); }
.skill__bar i.on:nth-child(n + 7) { background: var(--g1); }
.skill__bar i.on:nth-child(n + 9) { background: var(--violet); }
.viz--skills.is-out .skills__head { opacity: 0; }

.viz--code { display: flex; flex-direction: column; border: 1.5px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--navy); container-type: inline-size; }
.code__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--navy-2); }
.code__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.code__bar i:nth-child(2) { background: #febc2e; }
.code__bar i:nth-child(3) { background: var(--g2); }
.code__bar span { margin-left: 8px; font: 500 12px/1 var(--f-mono); color: rgba(255, 255, 255, .6); }
.code { flex: 1; margin: 0; padding: 14px 16px; color: #dfe7f2; font: 400 clamp(11px, calc(16 * var(--px)), 17px)/1.6 var(--f-mono); white-space: pre; overflow: hidden; }
.code { font-size: min(clamp(11px, calc(16 * var(--px)), 17px), calc((100cqw - 44px) / (var(--cols, 40) * .6))); }
.code .k { color: var(--g2); }
.code .n { color: var(--g1); }
.code .c { color: #8494ab; }
.code .p { color: var(--g2); }
.code .d { color: #8494ab; }
.caret--code { width: .55em; height: 1.1em; vertical-align: -.2em; border-width: 0; }

.why {
  padding-top: calc(200 * var(--px)); padding-bottom: calc(40 * var(--px));
  display: grid; grid-template-columns: calc(470 * var(--px)) 1fr; gap: calc(50 * var(--px));
  align-items: start;
}
.why__lead { display: flex; flex-direction: column; gap: calc(180 * var(--px)); padding-top: calc(20 * var(--px)); }
.why__lead .h2 { line-height: .98; }
.why__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--px)); padding-top: calc(50 * var(--px)); }

.wcard { position: relative; perspective: 1100px; }
.wcard__back, .wcard__face { border-radius: clamp(16px, calc(24 * var(--px)), 26px); transition: transform .8s var(--spring); }
.wcard__back { position: absolute; inset: 0; }
.wcard__face { position: relative; min-height: clamp(300px, calc(430 * var(--px)), 460px); }
.wcard__back { background: var(--grad); border: 1.5px solid var(--edge); }
.wcard__face {
  background: var(--paper); border: 2px solid var(--edge);
  box-shadow: var(--off) var(--off) 0 var(--shade);
  padding: clamp(22px, calc(46 * var(--px)), 50px) clamp(20px, calc(48 * var(--px)), 52px);
  display: flex; flex-direction: column; gap: clamp(10px, calc(18 * var(--px)), 20px);
  transform-style: preserve-3d;
}
.wcard__icon { flex: none; width: clamp(42px, calc(58 * var(--px)), 60px); height: clamp(42px, calc(58 * var(--px)), 60px); display: grid; place-items: center; border-radius: 14px; border: 2px solid var(--edge); background: var(--grad); color: var(--night); box-shadow: 3px 3px 0 var(--shade); transition: transform .5s var(--spring); }
.wcard__icon svg { width: 55%; height: 55%; }
.wcard:nth-child(2) .wcard__icon { background: linear-gradient(135deg, var(--g1), var(--violet)); color: #fff; }
.wcard:hover .wcard__icon { transform: rotate(-10deg) scale(1.12); }
.wcard__title { font: 400 clamp(21px, calc(40 * var(--px)), 44px)/1.04 var(--f-head); margin-top: auto; }
.wcard__text { font-size: clamp(14px, calc(21 * var(--px)), 22px); line-height: 1.22; }

.wcard--1 .wcard__face { transform: rotateY(16deg) rotateZ(-3deg); }
.wcard--1 .wcard__back { transform: translate(calc(45 * var(--px)), calc(10 * var(--px))) rotateY(16deg) rotateZ(4deg); background: linear-gradient(200deg, var(--g1), var(--g2)); }
.wcard--2 .wcard__face { transform: rotateY(-4deg) rotateZ(-8deg) translateY(calc(12 * var(--px))); }
.wcard--2 .wcard__back { transform: translate(calc(30 * var(--px)), calc(-18 * var(--px))) rotateZ(4deg); background: linear-gradient(20deg, var(--g2), var(--g1)); }
.wcard--3 .wcard__face { transform: rotateY(-14deg) rotateZ(6deg) translateY(calc(30 * var(--px))); }
.wcard--3 .wcard__back { transform: translate(calc(40 * var(--px)), calc(-5 * var(--px))) rotateZ(-3deg); background: linear-gradient(60deg, var(--g1), var(--g2) 60%); }
@media (hover: hover) {
  .wcard:hover .wcard__face { transform: rotateY(0) rotateZ(0) translateY(-10px); box-shadow: calc(var(--off) + 6px) calc(var(--off) + 6px) 0 var(--shade); }
  .wcard:hover .wcard__back { transform: translate(calc(18 * var(--px)), calc(18 * var(--px))) rotateZ(0); }
}
.js .wcard:not(.is-in) .wcard__face { transform: rotateX(80deg) translateY(-60px); }
.js .wcard:not(.is-in) .wcard__back { transform: rotateX(80deg) translateY(-60px); }
.wcard.is-in .wcard__face, .wcard.is-in .wcard__back { transition-delay: var(--d, 0s); }
.wcard.is-in:hover .wcard__face, .wcard.is-in:hover .wcard__back { transition-delay: 0s; }

.footer { position: relative; margin-top: calc(60 * var(--px)); padding-top: calc(400 * var(--px)); }
.footer__inner { position: relative; z-index: 1; }
.footer__cols {
  display: grid; align-items: start; column-gap: var(--cell-size);
  grid-template-columns: calc(var(--cell-size) * 7) calc(var(--cell-size) * 5) calc(var(--cell-size) * 5) 1fr;
}
.footer__h { font: 600 clamp(12px, calc(16 * var(--px)), 16px)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.footer__h::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--grad); }
.footer__col p, .footer__links { font: 400 clamp(15px, calc(22 * var(--px)), 23px)/1.4 var(--f-body); }
.footer__links { display: flex; flex-direction: column; gap: 0; }
.footer__links a { position: relative; display: inline-block; transition: transform .3s var(--ease); }
.footer__links a::before { content: '→'; position: absolute; left: -1.1em; opacity: 0; transform: translateX(-6px); transition: all .3s var(--ease); color: var(--g1); }
.footer__links a:hover { transform: translateX(1.1em); }
.footer__links a:hover::before { opacity: 1; transform: none; }

.footer__contact { justify-self: stretch; }
.socials { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; row-gap: calc(40 * var(--px)); padding-right: calc(10 * var(--px)); }
.socials a {
  --sh: 9px;
  display: grid; place-items: center;
  width: clamp(48px, calc(80 * var(--px)), 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--navy); color: #fff;
  box-shadow: var(--sh) calc(var(--sh) * .9) 0 var(--g2);
  transition: transform .4s var(--spring), box-shadow .4s var(--spring), background .3s;
}
.socials svg { width: 44%; height: 44%; transition: transform .45s var(--spring); }
.socials a:hover { --sh: 4px; transform: translate(4px, 4px); background: var(--night); }
.socials a:hover svg { transform: rotate(-12deg) scale(1.15); color: var(--g2); }
.socials li:nth-child(odd) a { box-shadow: var(--sh) calc(var(--sh) * .9) 0 var(--g1); }
.footer__addr { margin-top: calc(70 * var(--px)); font: 400 clamp(14px, calc(23 * var(--px)), 24px)/1.15 var(--f-body); }
.footer__addr a { border-bottom: 1.5px solid transparent; transition: border-color .2s; white-space: nowrap; }
.footer__addr a:hover { border-color: var(--g1); }

.giant {
  margin: calc(110 * var(--px)) calc(-35 * var(--px)) 0;
  display: flex; justify-content: space-between;
  font: 700 clamp(44px, calc(214 * var(--px)), 240px)/1 var(--f-head);
  letter-spacing: -.005em; white-space: nowrap; user-select: none;
}
.giant .gl { display: inline-block; position: relative; transition: transform .5s var(--spring), color .3s; cursor: default; }
.giant .gl::after { content: attr(data-c); position: absolute; inset: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transition: opacity .3s; }
.giant .gl:hover { transform: translateY(-14%) rotate(-4deg); }
.giant .gl:hover::after { opacity: 1; }
.giant .gs { width: .28em; }
.js .giant .gl { transform: translateY(70%); opacity: 0; }
.giant.is-in .gl { transform: none; opacity: 1; transition: transform .9s var(--spring) calc(var(--i) * 45ms), opacity .5s calc(var(--i) * 45ms); }
.giant.is-in .gl:hover { transform: translateY(-14%) rotate(-4deg); transition-delay: 0s; }
.giant.is-wave .gl { animation: giantWave 1.2s var(--ease) calc(var(--i) * 60ms); animation-composition: add; }
@keyframes giantWave { 0%, 100% { transform: none; } 40% { transform: translateY(-10%); } }
.giant.is-wave .gl::after { animation: giantGlow 1.2s var(--ease) calc(var(--i) * 60ms); animation-composition: add; }
@keyframes giantGlow { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: calc(40 * var(--px)) 0 calc(36 * var(--px));
  font: 400 clamp(12px, calc(16 * var(--px)), 16px)/1 var(--f-mono); color: var(--muted);
}
.totop { display: inline-flex; align-items: center; gap: 8px; }
.totop svg { width: 18px; height: 18px; transform: rotate(-90deg); transition: transform .3s var(--spring); }
.totop:hover svg { transform: rotate(-90deg) translateX(5px); }

.word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; }
.js .is-split .line:not(.line--strong) > span { transform: none; }
.js .is-split .char {
  transform: translateY(140%) rotate(8deg); transform-origin: 0 100%; opacity: 0;
  transition: transform .85s var(--spring) calc(var(--ci) * 26ms), opacity .35s calc(var(--ci) * 26ms);
}
.js .is-split.is-in .char { transform: none; opacity: 1; }

@supports (animation-timeline: scroll()) {
  .progress i { transform: none; animation: progressGrow linear both; animation-timeline: scroll(root); }
  @keyframes progressGrow { from { scale: 0 1; } to { scale: 1 1; } }

  .hero__title, .hero__title .line, .stack__papers, .cone--hero-1, .cone--hero-2 {
    animation-timing-function: linear; animation-fill-mode: both;
    animation-duration: auto; animation-timeline: scroll(root); animation-range: 0 100vh;
  }
  .hero__title { animation-name: heroFade; }
  .hero__title .line:nth-child(1) { animation-name: heroL1; }
  .hero__title .line:nth-child(2) { animation-name: heroL2; }
  .hero__title .line:nth-child(3) { animation-name: heroL3; }
  .stack__papers { animation-name: papersOut; }
  .cone--hero-1 { animation-name: coneOut1; }
  .cone--hero-2 { animation-name: coneOut2; }
  @keyframes heroFade { to { opacity: .3; } }
  @keyframes heroL1 { to { translate: -16vw 0; } }
  @keyframes heroL2 { to { translate: -8vw 0; } }
  @keyframes heroL3 { to { translate: 7vw 0; } }
  @keyframes papersOut { to { translate: 60px -220px; rotate: 8deg; } }
  @keyframes coneOut1 { to { translate: -220px -140px; } }
  @keyframes coneOut2 { to { translate: 180px 240px; } }

  .wcard { animation: wcardIn linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes wcardIn { from { rotate: calc(var(--wr) * .5); translate: 0 calc(var(--wy) * .5px); } to { rotate: 0deg; translate: 0 0; } }

  .giant { view-timeline: --giant block; --gl-range: entry 0% entry 100%; }
  .giant .gl { animation: glIn linear both; animation-timeline: --giant; animation-range: var(--gl-range); }
  .giant.is-wave .gl {
    animation: glIn linear both, giantWave 1.2s var(--ease) calc(var(--i) * 60ms);
    animation-timeline: --giant, auto;
    animation-range: var(--gl-range), normal;
    animation-composition: replace, add;
  }
  @keyframes glIn { from { translate: calc((var(--i) - 5) * var(--gs)) 0; } to { translate: 0 0; } }
}
.wcard { --wr: 0deg; --wy: 0; }
.wcard--1 { --wr: -40deg; --wy: 260; }
.wcard--2 { --wr: 32deg; --wy: 440; }
.wcard--3 { --wr: 56deg; --wy: 620; }
.giant { --gs: 2.4vw; }

@media (max-width: 1280px) {
  :root { --px: calc(100vw / 1600); }
  .hero { padding-left: var(--gutter); padding-right: var(--gutter); grid-template-columns: minmax(0, 1fr) calc(640 * var(--px)); }
  .why { grid-template-columns: 1fr; }
  .why__lead { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 30px; }
  .why__cards { padding-top: 70px; }
}

@media (max-width: 900px) {
  :root { --px: calc(100vw / 1100); --off: 6px; }
  .header__login { display: none; }

  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 120px var(--gutter) 40px;
    row-gap: 28px;
  }
  .hero__title, .hero__cta, .hero__visual, .hero__desc { grid-column: 1; grid-row: auto; }
  .hero__title { font-size: clamp(44px, 11.5vw, 96px); }
  .hero__visual { margin-top: 0; justify-self: center; }
  .stack { --px: calc(min(100vw - 2 * var(--gutter), 560px) / 660); }
  .hero__desc { margin-left: 0; order: 3; }
  .hero__cta { order: 4; }
  .btn--xl, .hero__cta .btn-shell { width: 100%; }

  .events__grid { grid-template-columns: 1fr; gap: 56px; }
  .wcard--1 { --wy: 120; } .wcard--2 { --wy: 160; } .wcard--3 { --wy: 200; }
  .giant { --gs: 1.2vw; }
  .events .h2 { margin-right: 0; }

  .stories__grid { grid-template-columns: 1fr; gap: 90px; }
  .story__head { margin-bottom: 4px; }

  .projects__grid { grid-template-columns: 1fr; gap: 70px; }
  .proj__comp { height: 560px; }
  .projects .h2 { margin-right: 0; }

  .why__lead { flex-direction: column; align-items: flex-start; }
  .why__lead .btn-shell { order: 2; }
  .why__cards { grid-template-columns: 1fr; gap: 46px; padding-top: 10px; }
  .wcard__face { min-height: 240px; }
  .wcard--1 .wcard__face { transform: rotateZ(-2deg); }
  .wcard--2 .wcard__face { transform: rotateZ(1.5deg); }
  .wcard--3 .wcard__face { transform: rotateZ(-1deg); }
  .wcard--1 .wcard__back { transform: translate(12px, 12px) rotateZ(2deg); }
  .wcard--2 .wcard__back { transform: translate(-10px, 12px) rotateZ(-2deg); }
  .wcard--3 .wcard__back { transform: translate(12px, -8px) rotateZ(2deg); }

  .footer { padding-top: 140px; }
  .footer__cols { grid-template-columns: 1fr 1fr; row-gap: 40px; column-gap: 28px; padding-left: 0; }
  .footer__contact { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .socials { grid-template-columns: repeat(6, auto); }
  .giant { margin-inline: 0; font-size: 11.6vw; }
}

@media (max-width: 600px) {
  .header__tools { gap: 6px; }
  .icon-btn { width: 40px; }
  .lang__btn { font-size: 17px; }
  .pgrid { border-top: 1px solid var(--line-2); }
  .story__slide { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 64px 22px 26px; row-gap: 16px; }
  .story__media { grid-row: 1; margin-right: 0; padding-right: 0; }
  .story__media img { max-height: 210px; }
  .story__quote { grid-column: 1; grid-row: 2; padding-bottom: 16px; }
  .story__who { grid-row: 3; padding: 0; }
  .story__card { --tab-h: 34px; --tab-s: 22px; --tab-w: 38%; }
  .cone--story-1 { width: 110px; height: 72px; bottom: -70px; left: -18px; }
  .cone--story-2 { width: 100px; height: 66px; right: -30px; top: 40px; }
  .proj__comp { height: 470px; }
  .pfold--light { --tab-h: 18px; }
  .giant { font-size: 9.6vw; }
  .psheet__in { padding-top: 34px; }
  .footer__cols { grid-template-columns: 1fr; }
  .socials { grid-template-columns: repeat(3, auto); row-gap: 22px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .event__top { flex-wrap: wrap; }
}

@media (hover: none) {
  .btn:hover { --lift: 0px; background-position: 0% 0; }
  .event:hover .event__card { --lift: 0px; }

  .proj:hover .proj__name { transform: none; }
  .proj--a:hover .psheet--bottom, .proj--b:hover .pfold--top,
  .proj--c:hover .pfold--half:first-child, .proj--c:hover .pfold--second { transform: none; }
  .socials a:hover { --sh: 9px; transform: none; background: var(--navy); }
  .logo.is-climb .mark .px { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { translate: none !important; rotate: none !important; }
  .hero__title { opacity: 1 !important; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
.a11y *, .a11y *::before, .a11y *::after { animation: none !important; transition: none !important; translate: none !important; rotate: none !important; }
.a11y .hero__title, .a11y .char { opacity: 1 !important; }
.a11y .char { transform: none !important; }
.a11y body { font-size: 1.2em; }
.a11y { --line: rgba(0, 0, 0, .12); --muted: #1a1a1a; --ink: #000; }
.a11y .bg-spot { display: none; }
.a11y p, .a11y .story__quote, .a11y .event__desc, .a11y .proj__desc, .a11y .wcard__text { font-size: max(1.15em, 18px); opacity: 1; }
.a11y a:not(.btn):not(.icon-btn):not(.logo):not(.socials a) { text-decoration: underline; text-underline-offset: 3px; }
.a11y [data-reveal], .a11y .line > span, .a11y .gl, .a11y .paper, .a11y .pcell img, .a11y .wcard__face, .a11y .wcard__back, .a11y .cone, .a11y .msg { opacity: 1 !important; }
.a11y .line > span, .a11y [data-reveal="up"], .a11y .gl { transform: none !important; }
.a11y .pcell img { filter: none; }

[data-theme="dark"] .pcell img { filter: grayscale(1) invert(1) hue-rotate(180deg) contrast(1.05); }
[data-theme="dark"] .pcell:hover img { filter: grayscale(0) invert(1) hue-rotate(180deg) contrast(1); }
[data-theme="dark"].a11y .pcell img { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] .event--dark .event__card { --ev-shadow: var(--shade); }
[data-theme="dark"] .story__media--logo .s21 { color: var(--ink); }
[data-theme="dark"] .story__media--logo .s21 .inv { fill: var(--paper); }
[data-theme="dark"].a11y { --line: rgba(255, 255, 255, .14); --muted: #e6e6e6; --ink: #fff; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-btn .theme-half { transform-origin: 34px 31.8px; transition: transform .7s var(--ease); }
[data-theme="dark"] .theme-btn .theme-half { transform: rotate(180deg); }