@font-face{font-family:Inter;src:url('assets/inter-variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-sans.ttf') format('truetype');font-style:normal;font-weight:200 900;font-display:swap}
:root{--ink:#1d1e23;--secondary:#727682;--surface:#f4f4f6;--radius:16px;--page-width:900px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:#fff;color:var(--ink);font:400 1rem/1.5 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure,dl,dd{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid #1a6097;outline-offset:6px;border-radius:2px}img{display:block}button,a{-webkit-tap-highlight-color:transparent}.skip-link{position:fixed;left:16px;top:16px;z-index:20;padding:10px 16px;background:var(--ink);color:white;transform:translateY(-180%)}.skip-link:focus{transform:none}
.portfolio{width:min(var(--page-width),calc(100% - 64px));margin:0 auto;padding:256px 0 96px}.intro{display:flex;flex-direction:column;gap:40px}.identity{display:flex;align-items:center;gap:24px}.portrait{flex:none;border-radius:50%;object-fit:cover;object-position:bottom}.identity-text{min-width:0}.identity h1{font-size:1.125rem;font-weight:400;line-height:28px}.role{margin-top:8px;line-height:24px;color:var(--secondary)}.statement{font-size:1.875rem;line-height:1.4;font-weight:400}.contacts{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;line-height:24px;color:var(--secondary)}.separator{font-weight:200}.pending{cursor:default}.email{overflow-wrap:anywhere}
.projects{margin-top:200px}.project-description{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}.company-line{display:flex;align-items:center;gap:8px;font-size:1.125rem;line-height:28px}.company-symbol{width:20px;height:20px;margin-right:4px;flex:none}.company-line h2{font:500 1.125rem/28px Inter,Arial,sans-serif}.company-dot{font-weight:200;color:var(--secondary)}.position{color:var(--secondary)}.showcase{display:flex;flex-direction:column;gap:4px}.scaled-preview{position:relative;overflow:hidden}.receipt-preview,.storage-preview,.cheques-preview{background:var(--surface);border-radius:var(--radius)}.artboard{position:absolute;left:0;top:0;transform:scale(var(--art-scale,1));transform-origin:0 0;pointer-events:none;user-select:none}.receipt-preview{aspect-ratio:900/528}.receipt-art{width:900px;height:528px}.receipt-crop{position:absolute;left:78px;top:87px;width:822px;height:441px;overflow:hidden;border-bottom-right-radius:14px}.receipt-crop img{position:absolute;width:125.47%;height:149.3%;max-width:none;left:-.02%;top:0}.detail-grid{display:grid;grid-template-columns:550fr 346fr;gap:4px}.storage-preview{aspect-ratio:550/372}.cheques-preview{aspect-ratio:346/372}.storage-art{width:550px;height:372px}.cheques-art{width:346px;height:372px}.product-ui{font-family:Nunito,Arial,sans-serif;font-variation-settings:'YTLC' 500,'wdth' 100;color:#03050a;font-weight:600}.product-ui h3{font-weight:700}.storage-card-image{position:absolute;left:66px;top:61.5px;width:418px;height:249px;object-fit:contain}.product-ui dl>div{display:flex;justify-content:space-between;gap:8px}.cheques-card-image{position:absolute;width:302px;height:183px;left:44px;top:94.5px;object-fit:contain}
@media(min-width:1000px){.statement{min-height:126px}}
@media(max-width:999px){.portfolio{padding-top:140px}.projects{margin-top:140px}}
@media(max-width:600px){.portfolio{width:calc(100% - 40px);padding:180px 0 96px}.intro{gap:28px}.identity{align-items:flex-start;gap:16px}.portrait{width:56px;height:56px}.identity h1{font-size:1rem;line-height:24px}.role{font-size:.875rem;line-height:21px;margin-top:4px}.statement{font-size:1.5rem;line-height:1.42}.contacts{gap:4px 8px}.email{flex-basis:100%}.before-email{display:none}.projects{margin-top:96px}.company-line{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.company-symbol{margin:0 0 8px}.company-line h2{font-size:1rem;line-height:26px}.company-dot{display:none}.position{font-size:.875rem;line-height:22px}.project-description{gap:16px;margin-bottom:24px}.project-description>p{font-size:1rem;line-height:24px}.receipt-preview{border-radius:12px}.detail-grid{grid-template-columns:1fr;gap:4px}.storage-preview{aspect-ratio:550/340;border-radius:12px}.storage-art{top:calc(50% - 186px * var(--art-scale,1))}.cheques-preview{aspect-ratio:550/250;border-radius:12px}.cheques-art{top:calc(50% - 186px * var(--art-scale,1))}.cheques-card-image{left:124px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.contacts a:hover { color: var(--ink); text-decoration: none; }
.email {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
.email:focus-visible { outline: 2px solid #1a6097; outline-offset: 4px; border-radius: 2px; }
.email-icon {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--secondary);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.email:hover .email-icon, .email:focus-visible .email-icon { opacity: 1; }
.email.is-copied .email-icon { opacity: 1; }
.email.is-icon-hidden .email-icon { opacity: 0; }
.email-icon svg {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 14px;
  height: 14px;
  transition: transform 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out;
}
.email-icon-copy { transform: scale(1); opacity: 1; filter: blur(0); }
.email-icon-check { transform: scale(.7); opacity: 0; filter: blur(2px); }
.email.is-copied .email-icon-copy { transform: scale(0); opacity: 0; filter: blur(2px); }
.email.is-copied .email-icon-check { transform: scale(1); opacity: 1; filter: blur(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (hover: none) { .email-icon { opacity: 1; } }
@media (max-width: 600px) {
  .email { width: 100%; gap: 8px; }
  .email-icon { position: relative; top: auto; left: auto; width: 14px; height: 14px; flex: none; transform: none; opacity: 1; }
  .email-icon svg { top: 0; left: 0; }
  .footer-contacts .email { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .email-icon, .email-icon svg { transition: none; } }
html.home-page { scroll-behavior: auto; }
html.restoring-case-position body { visibility: hidden; }

.case-cover {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 96px;
  aspect-ratio: 900 / 565;
  overflow: hidden;
  border-radius: var(--radius);
  background: #292a26;
  color: #fff;
}
.case-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 350ms ease; }
.case-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.12) 51%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
.case-caption { position: absolute; z-index: 1; left: 48px; right: 112px; bottom: 48px; }
.case-caption p { margin-bottom: 16px; font-size: 1.125rem; line-height: 28px; font-weight: 500; color: rgba(255,255,255,.55); }
.case-caption h2 { margin: 0; font-size: 1.875rem; line-height: 42px; font-weight: 500; }
.case-arrow { position: absolute; z-index: 1; right: 48px; bottom: 53px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #111; }
.case-cover:hover { text-decoration: none; }
.case-cover:hover .case-photo { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .case-photo { transition: none; }
}
.case-cover:focus-visible { outline: 3px solid #1a6097; outline-offset: 6px; }
/* Restored browser focus is not a new keyboard interaction. */
html.home-page:not(.keyboard-navigation) :is(.case-cover, .case-tile):focus { outline: none; }
@media (max-width: 999px) {
  .case-caption { left: 32px; right: 88px; bottom: 32px; }
  .case-caption h2 { font-size: 1.5rem; line-height: 1.4; }
  .case-caption p { font-size: 1rem; line-height: 24px; margin-bottom: 12px; }
  .case-arrow { right: 32px; bottom: 33px; }
}
@media (max-width: 600px) {
  .case-cover { margin-top: 48px; min-height: 0; aspect-ratio: 1290 / 957; border-radius: 12px; }
  .case-cover::after { background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.8) 100%); }
  .case-caption { left: 24px; right: 64px; bottom: 24px; }
  .case-caption h2 { font-size: 1rem; line-height: 1.35; }
  .case-caption p { font-size: .875rem; line-height: 24px; }
  .case-arrow { right: 24px; bottom: 24px; }
}

/* Upcoming cases share the supplied artwork proportions and captions below. */
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.case-tile { min-width: 0; color: var(--secondary); }
.case-tile-preview { width: 100%; aspect-ratio: 1290 / 957; overflow: hidden; border-radius: var(--radius); }
.case-tile-illustration { width: 100%; height: auto; }
.case-tile-caption { margin-top: 24px; }
.case-tile-caption p { margin-bottom: 16px; font-size: 1.125rem; line-height: 28px; font-weight: 400; }
.case-tile-dot { margin-inline: 4px; }
.case-tile-status { color: var(--ink); }
.case-tile-caption h2 { font-size: 1.125rem; line-height: 28px; font-weight: 400; }
@media (max-width: 700px) {
  .case-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .case-tile-preview { border-radius: 12px; }
  .case-tile-caption { margin-top: 20px; }
  .case-tile-caption p { margin-bottom: 12px; }
  .case-tile-caption p, .case-tile-caption h2 { font-size: 1rem; line-height: 24px; }
}

.components-section { margin-top: 96px; }
.components-description { margin-bottom: 64px; }
.components-description > p { width: 100%; }
.components-heading { font-size: 1.125rem; line-height: 28px; }
.components-heading h2 { font-size: inherit; line-height: inherit; font-weight: 500; }
.components-demo { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.components-video { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.site-footer { margin-top: 200px; }
.footer-contacts { justify-content: center; text-align: center; }
@media (max-width: 999px) {
  .site-footer { margin-top: 140px; }
}
@media (max-width: 600px) {
  .components-section { margin-top: 48px; }
  .components-description { margin-bottom: 32px; }
  .components-heading { font-size: 1rem; line-height: 26px; }
  .components-demo { border-radius: 12px; }
  .site-footer { margin-top: 96px; }
}

.ai-section {
  --ai-slide-width: min(900px, calc(100vw - 40px));
  --ai-slide-gap: 128px;
  margin-top: 96px;
}
.ai-intro { position: relative; }
.ai-title { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; line-height: 28px; font-weight: 500; }
.ai-title img { flex: none; }
.ai-pagination { display: flex; align-items: center; width: max-content; height: 14px; margin-top: 20px; }
.ai-dot { display: grid; place-items: center; width: 16px; height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ai-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e1e1e4; transition: background-color 250ms ease, transform 250ms ease; }
.ai-dot.is-active::after { background: var(--ink); }
.ai-dot:hover::after { transform: scale(1.25); }
.ai-dot:focus-visible, .ai-nav:focus-visible { outline: 2px solid #1a6097; outline-offset: 3px; border-radius: 50%; }
.ai-copy { width: 100vw; margin-top: 20px; margin-left: calc(50% - 50vw); overflow: hidden; }
.ai-copy-track { display: flex; gap: var(--ai-slide-gap); width: max-content; padding-inline: calc((100vw - var(--ai-slide-width)) / 2); will-change: transform; }
.ai-copy-slide { flex: 0 0 var(--ai-slide-width); width: var(--ai-slide-width); font-size: 1.125rem; line-height: 1.4; opacity: 0; will-change: opacity; }
.ai-copy-slide:first-child { opacity: 1; }
.ai-carousel-shell { position: relative; margin-top: 64px; }
.ai-carousel-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
}
.ai-carousel-viewport::-webkit-scrollbar { display: none; }
.ai-carousel-viewport:focus { outline: none; }
.ai-carousel-viewport:focus-visible { outline: 2px solid #1a6097; outline-offset: -2px; }
.ai-carousel-track { display: flex; gap: var(--ai-slide-gap); width: max-content; padding-inline: calc((100vw - var(--ai-slide-width)) / 2); }
.ai-slide { position: relative; display: grid; place-items: center; flex: 0 0 var(--ai-slide-width); width: var(--ai-slide-width); aspect-ratio: 900 / 620; overflow: hidden; border-radius: var(--radius); background: var(--surface); scroll-snap-align: center; will-change: opacity; }
.ai-slide-system { opacity: .5; }
.ai-phone-video { position: absolute; top: 50%; left: 50%; display: block; width: auto; max-width: 100%; height: 84%; object-fit: contain; pointer-events: none; transform: translate(-50%, -50%); }
.ai-slide-system img { position: absolute; top: 0; left: 0; width: 100%; height: 103.23%; object-fit: cover; object-position: center top; }
.ai-nav { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translateY(-50%); }
.ai-nav img { width: 40px; height: 40px; }
.ai-nav-prev { right: calc(50% + var(--ai-slide-width) / 2 + 16px); opacity: 0; pointer-events: none; }
.ai-nav-next { left: calc(50% + var(--ai-slide-width) / 2 + 16px); }
.ai-captions { width: 100vw; margin-top: 16px; margin-left: calc(50% - 50vw); overflow: hidden; }
.ai-captions-track { display: flex; gap: var(--ai-slide-gap); width: max-content; padding-inline: calc((100vw - var(--ai-slide-width)) / 2); will-change: transform; }
.ai-image-caption { flex: 0 0 var(--ai-slide-width); width: var(--ai-slide-width); color: var(--secondary); font-size: 14px; line-height: 20px; text-align: center; opacity: 0; will-change: opacity; }
.ai-image-caption:first-child { opacity: 1; }
@media (max-width: 1000px) {
  .ai-nav-prev { right: auto; left: calc(50% - var(--ai-slide-width) / 2 + 8px); }
  .ai-nav-next { left: auto; right: calc(50% - var(--ai-slide-width) / 2 + 8px); }
}
@media (max-width: 600px) {
  .ai-section { --ai-slide-width: calc(100vw - 40px); --ai-slide-gap: 16px; margin-top: 48px; }
  .ai-title, .ai-copy-slide { font-size: 1rem; line-height: 24px; }
  .ai-pagination { position: absolute; top: -4px; right: 0; height: 32px; margin-top: 0; }
  .ai-dot { width: 16px; height: 32px; }
  .ai-copy { margin-top: 20px; }
  .ai-carousel-shell { margin-top: 32px; }
  .ai-slide { aspect-ratio: 1 / 1; border-radius: 12px; }
  .ai-phone-video { height: 90%; }
  .ai-slide-system img { height: 100%; object-position: left top; }
  .ai-nav { width: 40px; height: 40px; }
  .email { min-height: 44px; }
}
@media (max-width: 360px) {
  .statement { font-size: 1.375rem; }
  .case-caption { left: 20px; right: 56px; bottom: 20px; }
  .case-caption h2 { font-size: 1rem; }
  .case-arrow { right: 20px; bottom: 20px; }
  .case-tile-caption p, .case-tile-caption h2 { font-size: .9375rem; }
}
@media (min-width: 500px) and (max-width: 600px) {
  .contacts .before-email { display: inline; }
  .contacts .email { flex-basis: auto; width: auto; min-height: 0; }
  .footer-contacts .email { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .cheques-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-carousel-viewport { scroll-behavior: auto; }
  .ai-dot::after { transition: none; }
}