@font-face {
  font-family: "Benzin";
  src: url("public/fonts/benzin-bold.b8257b15de48.woff2") format("woff2"),
       url("public/fonts/benzin-bold.d093c6b28947.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Same Inter v20 subsets and glyph coverage as the former Google Fonts CSS.
   Both requested weights share the same variable WOFF2 file per subset. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-cyrillic-ext.fccca918fea4.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-cyrillic.aebf2ab4a4ce.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-greek-ext.a2e2c783ca6f.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-greek.46dd4cdca58c.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-vietnamese.8db00ff46c67.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-latin-ext.a28eb6d3ccb5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("public/fonts/inter-latin.c940764593d0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.1);
  --blue: #006bdd;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
body { position: relative; margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; z-index: 0; top: var(--life-glow-center-y, 0px); left: 50%; width: 2400px; height: 2000px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; transition: opacity 180ms ease-out; }
body.life-glow-ready::before { opacity: 1; background-image: url("public/assets/life/life-glow-desktop.webp?v=20260925-2"); }
body.life-glow-ready.life-glow-hd::before { background-image: url("public/assets/life/life-glow-desktop@2x.webp?v=20260925-2"); }
a { color: inherit; text-decoration: none; }
img { display: block; }
:is(.projects, .vibecoded, .about) img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.mobile-only { display: none; }
.page { position: relative; z-index: 1; width: min(100%, 1440px); min-height: 100vh; margin-inline: auto; overflow: hidden; background: transparent; }
.content { width: 800px; margin-inline: auto; }

.site-header { position: absolute; z-index: 5; inset: 0 0 auto; height: 96px; font-size: 14px; line-height: 20px; pointer-events: none; }
.designer-label { position: absolute; left: 64px; top: 48px; margin: 0; color: var(--muted); }
.tablet-break { display: none; }
.work-status { position: absolute; top: 48px; right: 64px; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.work-status::before, .work-status::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }
.work-status::before { z-index: 1; background: #fa5f05; transform-origin: center; animation: status-pulse 1.2s ease-in-out infinite; }
.work-status::after { z-index: 2; background: #fa5f05; }
.work-status img { position: relative; z-index: 0; width: 20px; height: 20px; opacity: 0; }
.work-status-mobile { display: none; }

@keyframes status-pulse {
  0% { opacity: 0.75; transform: scale(1); }
  62.5% { opacity: 0; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(2.5); }
}

.hero { position: relative; width: 100%; margin-inline: auto; }
.portrait { position: absolute; z-index: 1; top: 32px; left: 50%; width: clamp(360px, 33.333vw, 480px); aspect-ratio: 1; overflow: visible; background: transparent; touch-action: pan-y; transform: translateX(-50%); }
.hero-head, .hero-reveal-canvas { position: absolute; display: block; }
.hero-head { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-head-default { z-index: 0; }
.hero-head-reveal { z-index: 1; opacity: 0; pointer-events: none; }
.hero-head-mobile-video { display: none; z-index: 1; aspect-ratio: 1; background: #000; pointer-events: none; }
.portrait[data-hero-touch] .hero-head-default { z-index: 2; }
.portrait[data-hero-touch][data-mobile-video-ready] .hero-head-default { opacity: 0; }
.portrait[data-hero-touch] .hero-head-mobile-video:not([hidden]) { display: block; }
.hero-haptic-switch { display: none; }
@media (hover: none), (pointer: coarse) {
  .hero-head-reveal, .hero-reveal-canvas { display: none; }
  .portrait[data-hero-touch] .hero-haptic-switch { display: block; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: pointer; touch-action: pan-y; }
  .portrait:has(.hero-haptic-switch:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
}
@media (hover: none) and (pointer: coarse) {
  .hero-content { pointer-events: none; }
  .hero-content > * { pointer-events: auto; }
}
.hero-reveal-canvas { z-index: 2; inset: -50%; width: 200%; height: 200%; pointer-events: none; }
.hero-content { position: relative; z-index: 3; width: min(800px, calc(100% - 64px)); margin-inline: auto; padding-top: clamp(400px, 30.764vw, 443px); display: flex; flex-direction: column; align-items: center; gap: 32px; }
h1, .section-title, .project h2, .contact h2 { font-family: Benzin, Inter, sans-serif; font-weight: 700; }
.hero h1 { margin: 0; font-size: 48px; line-height: 56px; text-align: center; }
.actions { display: flex; gap: 16px; align-items: flex-start; }
.button { --magnet-x: 0px; --magnet-y: 0px; min-height: 56px; padding: 16px 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 80px; background: rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 500; line-height: 24px; white-space: nowrap; transform: translate3d(var(--magnet-x), var(--magnet-y), 0); transition: transform .24s cubic-bezier(.22, 1, .36, 1), background .2s ease; will-change: transform; }
.button.is-magnetic { transition-duration: .08s, .2s; }
.button-primary { background: var(--blue); }

.projects { width: 800px; margin: 80px auto 0; display: grid; grid-template-columns: 380px 380px; column-gap: 40px; row-gap: 40px; }
.project { --project-image-scale: 1; --project-zoom-scale: 1.04; position: relative; min-width: 0; }
.project-esim { width: 460px; }
.project-menu { width: 300px; justify-self: end; }
.project-legacy { grid-column: 1 / -1; width: 800px; }
.project-media { position: relative; display: block; width: 100%; height: 320px; overflow: hidden; border-radius: 32px; }
.case-preview-container { background: #0f0f0f; }
.case-preview-container::before, .case-preview-container::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; }
.case-preview-container::before { box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .04); }
.case-preview-container::after { box-shadow: inset 0 8px 16px 0 rgba(255, 255, 255, .06); }
.project-visual { position: absolute; inset: 0; display: block; transform: scale(var(--project-image-scale)); transform-origin: center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.project-image { width: 100%; height: 100%; object-fit: cover; }
.project-media[data-media-touch] { --project-image-scale: 1; }
.project-media[data-media-held] { --project-image-scale: var(--project-zoom-scale); }
.project-esim .project-visual { background: linear-gradient(152.4792112944034deg, rgb(255, 188, 53) 14.504%, rgb(228, 79, 3) 84.961%); }
.project-chip-poster, .project-chip-video { position: absolute; top: 40px; left: 50%; display: block; width: 240px; height: 240px; transform: translateX(-50%) scale(var(--chip-hover-scale, 1)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); object-fit: contain; pointer-events: none; }
.project-b2b .project-visual { background: #22292e; }
.project-b2b-poster, .project-b2b-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.project-b2b-poster, .project-b2b-video { object-fit: cover; object-position: center; pointer-events: none; }
.project-legacy .project-visual { background: #000; }
.project-legacy-poster, .project-legacy-video { position: absolute; top: -82px; right: calc((100% - 800px) / 2); display: block; width: 1204px; height: auto; pointer-events: none; }
.project-chip-poster, .project-b2b-poster, .project-legacy-poster { z-index: 1; }
.is-video-ready > .project-chip-poster, .is-video-ready > .project-b2b-poster, .is-video-ready > .project-legacy-poster { visibility: hidden; }
.project-chip-video.is-unavailable, .project-b2b-video.is-unavailable, .project-legacy-video.is-unavailable { opacity: 0; }
.project-copy { margin-top: 24px; }
.project h2 { margin: 0; font-size: 24px; line-height: 32px; }
.project p { margin: 4px 0 0; color: var(--muted); font-size: 16px; line-height: 24px; }

.experience { margin-top: 120px; }
.section-title { margin: 0; font-size: 36px; line-height: 48px; }
[data-soft-blur-in] { perspective: 900px; }
.soft-blur-content { display: inline; transform-style: preserve-3d; }
.soft-blur-word { display: inline-block; white-space: nowrap; }
.soft-blur-char { display: inline-block; white-space: pre; transform-origin: 50% 55%; backface-visibility: hidden; will-change: transform, opacity, filter; }
.soft-blur-complete .soft-blur-char { will-change: auto; }
.jobs { margin-top: 40px; display: flex; flex-direction: column; gap: 65px; }
.job { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; align-items: center; gap: 0 16px; min-height: 56px; font-size: 20px; line-height: 28px; }
.job + .job::before { content: ""; position: absolute; left: 0; right: 0; top: -33px; height: 1px; background: var(--line); }
.company { display: flex; grid-column: 1; grid-row: 1 / 3; align-items: center; gap: 20px; min-width: 0; }
.company > span { min-width: 0; flex: 1 1 auto; }
.brand-mark { display: block; flex: none; overflow: hidden; border-radius: 20px; background: var(--brand-mark-bg); }
.brand-mark img { display: block; width: 100%; height: 100%; }
.brand-mark--agency, .brand-mark--creativa { --brand-mark-bg: #fff; }
.brand-mark--freelance { --brand-mark-bg: #00cd5e; }
.brand-mark--chulakov { --brand-mark-bg: #fff534; }
.brand-mark--sber { --brand-mark-bg: #00aa47; }
.brand-mark--sbermobile { --brand-mark-bg: #fa5f05; }
.brand-mark--synaptik { --brand-mark-bg: #2b80ff; }
.company > .company-mark { width: 56px; height: 56px; flex: 0 0 56px; }
.company b, .company small { display: block; font-weight: 400; }
.company b { display: flex; align-items: center; gap: 4px; }
.company-arrow { flex: none; width: 24px; height: 24px; }
.company-arrow, .career-step-arrow { opacity: .5; }
.company small { display: none; color: var(--muted); font-size: 13px; line-height: 18px; }
.role { grid-column: 2; grid-row: 1; align-self: end; color: var(--muted); text-align: right; }
.years { grid-column: 2; grid-row: 2; align-self: start; text-align: right; white-space: nowrap; }
.counter-number { display: inline-block; min-width: 4ch; }
.job[href] { cursor: pointer; }
.career-scroll { display: none; }
.career-flow, .career-flow-stage { display: contents; }

.vibecoded { margin-top: 120px; }
.vibecoded-grid { width: 100%; margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; }
.vibecoded .project-media { height: auto; aspect-ratio: 380 / 247; }

.about { margin-top: 120px; }
.about-copy { width: 680px; margin: 20px 0 0; color: var(--muted); font-size: 20px; line-height: 32px; }
.collage { position: relative; isolation: isolate; width: 1040px; height: 1160px; margin-left: -124px; margin-top: -83px; }
.photo, .sticker { --parallax-y: 0px; --base-rotation: 0deg; transform: translate3d(0, var(--parallax-y), 0) rotate(var(--base-rotation)); }
.photo { position: absolute; display: block; object-fit: cover; border-radius: 32px; filter: blur(.1px); }
.photo-family { left: 112px; top: 178px; width: 390px; height: 520px; --base-rotation: -2.61deg; }
.photo-baby { left: 514px; top: 180px; width: 390px; height: 390px; --base-rotation: 2.29deg; filter: brightness(.94) blur(.1px); }
.photo-baby-poster { z-index: 1; pointer-events: none; }
.photo-baby-poster.is-video-ready { visibility: hidden; }
.photo-gaming { left: 481px; top: 505px; width: 390px; height: 500px; --base-rotation: -7.63deg; }
.photo-boxing { left: 103px; top: 685px; width: 390px; height: 260px; --base-rotation: 9.82deg; }
.sticker { position: absolute; display: block; padding: 0; border: 0; background: transparent; color: inherit; font-family: Inter, sans-serif; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sticker-glyph { display: block; transform-origin: 50% 70%; pointer-events: none; }
.sticker-art { display: block; width: 1em; height: 1em; object-fit: contain; }
.sticker-haptic-switch { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: pointer; }
.sticker, .sticker-haptic-switch { outline: none; }
.sticker-baby { left: 36px; top: 514px; font-size: 197.42px; --base-rotation: -15deg; }
.sticker-game { left: 806px; top: 104px; font-size: 207.4px; --base-rotation: 30deg; }
.sticker-boxing { left: 210px; top: 846px; font-size: 218.09px; --base-rotation: 50.35deg; }
.sticker-argentina { left: 840px; top: 800px; font-size: 169.31px; --base-rotation: 11.34deg; }
.sticker-baby .sticker-glyph { animation: sticker-baby-sway 4.6s ease-in-out infinite; }
.sticker-game .sticker-glyph { animation: sticker-game-sway 4.2s ease-in-out infinite; }
.sticker-boxing .sticker-glyph { animation: sticker-boxing-jab 3.6s cubic-bezier(.22, 1, .36, 1) infinite; transform-origin: 30% 62%; }
.sticker-argentina .sticker-glyph { animation: sticker-flag-sway 4.9s ease-in-out infinite; transform-origin: 50% 70%; }
.collage.is-parallax-active [data-parallax-speed] { will-change: transform; }

.emoji-reaction { position: absolute; z-index: 20; display: block; width: 1em; height: 1em; pointer-events: none; user-select: none; opacity: 0; font-family: Inter, sans-serif; font-size: var(--reaction-size, 32px); line-height: 1; filter: drop-shadow(0 5px 10px rgba(0,0,0,.2)); transform: translate(-50%, -50%) scale(.38); animation: emoji-reaction-burst var(--reaction-duration, 650ms) cubic-bezier(.22, 1, .36, 1) var(--reaction-delay, 0ms) forwards; will-change: transform, opacity; }

@keyframes sticker-baby-sway {
  0%, 100% { transform: rotate(-4deg) translateY(1px); }
  50% { transform: rotate(4deg) translateY(-2px); }
}

@keyframes sticker-game-sway {
  0%, 100% { transform: translate3d(0, 4px, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes sticker-boxing-jab {
  0%, 68%, 88%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  73% { transform: translate3d(-8px, 4px, 0) rotate(5deg) scale(.97); }
  77% { transform: translate3d(34px, -8px, 0) rotate(-9deg) scale(1.12); }
  81% { transform: translate3d(7px, 2px, 0) rotate(2deg) scale(1.02); }
  85% { transform: translate3d(-3px, 1px, 0) rotate(1deg) scale(.99); }
}

@keyframes sticker-flag-sway {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.06); }
}

@keyframes emoji-reaction-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 5px, 0) scale(.38) rotate(0deg); }
  16% { opacity: .92; }
  72% { opacity: .82; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate3d(var(--reaction-x), var(--reaction-y), 0) scale(var(--reaction-scale)) rotate(var(--reaction-rotate)); }
}

.contact { margin-top: 75px; }
.contact h2 { margin: 0 auto; color: var(--muted); font-size: 48px; line-height: 56px; text-align: center; }
.contact a { color: var(--text); }
.contact-keep-together { white-space: nowrap; }
/* Keep descender room outside the inline layout; each rolling copy includes the same room. */
.contact-roll { display: inline-flex; flex-direction: column; vertical-align: baseline; box-sizing: content-box; height: 1lh; padding-bottom: .15em; margin-bottom: -.15em; overflow: hidden; white-space: nowrap; }
.contact-roll-line { display: block; flex: 0 0 calc(1lh + .15em); height: calc(1lh + .15em); line-height: inherit; }
.footer { margin-top: 236px; padding-bottom: 48px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
/* One anchor-menu system: contacts, optional back action, or modal close action. */
:is(.contact-island, .anchor-menu) { position: fixed; z-index: 50; left: 50%; bottom: max(40px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-50%, calc(100% + 64px), 0) scale(.96); transform-origin: 50% 100%; transition: transform 560ms cubic-bezier(.22,1,.36,1), opacity 280ms ease, visibility 0s linear 560ms; }
.anchor-menu:not(.is-visible) { transition: none; }
:is(.contact-island, .anchor-menu).is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(-50%, 0, 0) scale(1); transition-delay: 0s; }
:is(.contact-island, .anchor-menu-panel) { display: flex; align-items: center; justify-content: center; flex: none; gap: 16px; height: 64px; padding: 20px 40px; border: 0; border-radius: 40px; background: rgba(165,165,165,.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font: 500 16px/24px Inter, Arial, sans-serif; white-space: nowrap; }
:is(.contact-island, .anchor-menu-contacts) { width: 282px; }
:is(.contact-island, .anchor-menu) a { position: relative; flex: none; color: inherit; font: inherit; white-space: nowrap; }
:is(.contact-island, .anchor-menu-contacts) a::after { content: ""; position: absolute; inset: -10px -7px; }
:is(.contact-island, .anchor-menu) :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.anchor-menu-panel:is(a, button) { cursor: pointer; }
.anchor-menu-close { width: 149px; }
.anchor-menu-back { width: 64px; padding: 20px; }
.anchor-menu-back img { width: 24px; height: 24px; }
.contact-island-divider { flex: 0 0 1px; width: 1px; height: 24px; background: rgba(217,217,217,.08); }

@media (hover: hover) and (pointer: fine) {
  .job:hover .company-arrow, .career-step:hover .career-step-arrow { opacity: 1; }
  .button:hover { background: rgba(255,255,255,.16); }
  .button-primary:hover { background: #0878ed; }
  .project:hover { --project-image-scale: var(--project-zoom-scale); }
  .project-esim:hover { --chip-hover-scale: 1.06; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .contact-roll-line { transition: transform 200ms linear; }
  .contact-roll:hover .contact-roll-line { transform: translate3d(0, -100%, 0); }
}

@media (hover: none), (pointer: coarse) {
  .project:active { --project-image-scale: var(--project-zoom-scale); }
  .vibecoded-card:active { --project-image-scale: 1; }
}

@media (max-width: 900px) and (min-width: 600px) {
  .page { width: 100%; }
  .content, .projects { width: min(800px, calc(100% - 64px)); }
  .projects { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .project, .project-esim, .project-menu, .project-legacy { width: 100%; }
  .project-legacy { grid-column: 1 / -1; }
  .project h2 { font-size: 22px; line-height: 28px; }
  .vibecoded-grid { column-gap: 24px; }
  .company { gap: 12px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page { --tablet-content-width: min(800px, calc(100% - 64px)); }
  .site-header, .hero-content, .projects { width: var(--tablet-content-width); }
  .site-header { margin-inline: auto; }
  .designer-label { left: 0; white-space: nowrap; }
  .tablet-break { display: initial; }
  .site-header > .work-status { right: 0; }
}

@media (min-width: 600px) {
  .project-legacy .case-preview-container { background: #000; }
  .project-legacy .case-preview-container::before { display: none; }
  .project-legacy .case-preview-container::after { inset: .5px; border-radius: calc(32px - .5px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 8px 16px 0 rgba(255, 255, 255, .06); }
  .collage .photo-family { z-index: 1; }
  .collage .sticker { z-index: 2; }
}

@media (min-width: 601px) and (max-width: 1199px) {
  body::before { width: 2000px; height: 1800px; }
  body.life-glow-ready::before { background-image: url("public/assets/life/life-glow-tablet.webp?v=20260925-2"); }
  body.life-glow-ready.life-glow-hd::before { background-image: url("public/assets/life/life-glow-tablet@2x.webp?v=20260925-2"); }
}

@media (max-width: 600px) {
  body::before { display: none; }
  body.life-glow-ready::before { background-image: none; }
}

@media (max-width: 599px) {
  .brand-mark { border-radius: 16px; }
  :root {
    --mobile-h3: 700 24px/32px Benzin, Inter, sans-serif;
    --mobile-h4-medium: 500 20px/24px Inter, Arial, sans-serif;
    --mobile-card-title: 700 20px/24px Benzin, Inter, sans-serif;
  }
  .type-mobile-h3 { font: var(--mobile-h3); }
  .type-mobile-h4-medium { font: var(--mobile-h4-medium); }
  html, body { background: #000; }
  .desktop-only { display: none !important; }
  .mobile-only { display: inline; }
  .page { width: 100%; overflow: clip; }
  .content { width: calc(100% - 32px); }
  .site-header { height: 72px; }
  .designer-label { top: 24px; left: 50%; width: auto; white-space: nowrap; transform: translateX(-50%); text-align: center; }
  .site-header > .work-status { display: none; }
  .hero { width: 100%; }
  .portrait { top: 72px; width: min(300px, calc(100% - 60px)); }
  .work-status-mobile { position: absolute; top: auto; bottom: 16px; left: 50%; right: auto; display: flex; width: 192px; height: 20px; margin: 0; z-index: 2; transform: translateX(-50%); }
  .hero-content { width: calc(100% - 32px); padding-top: 372px; gap: 24px; pointer-events: none; }
  .hero-content > * { pointer-events: auto; }
  .hero h1 { width: 100%; font-size: clamp(25px, 7.78vw, 28px); line-height: clamp(32px, 10vw, 36px); }
  .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .button { min-height: 56px; padding: 16px 24px; }
  .button-primary { grid-column: 1 / -1; }
  .projects { width: calc(100% - 32px); margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
  .project, .project-esim, .project-menu, .project-ai, .project-b2b, .project-legacy { width: 100%; }
  .project-media { height: auto; aspect-ratio: 328 / 420; border-radius: 24px; }
  .case-preview-container::after { box-shadow: inset 4px 8px 20px 0 rgba(255, 255, 255, .06); }
  .project-esim .project-visual { background: linear-gradient(136.1972573793113deg, rgb(255, 188, 53) 14.504%, rgb(228, 79, 3) 84.961%); }
  .project-chip-poster, .project-chip-video { top: 40%; width: calc(100% * 228 / 328); height: auto; aspect-ratio: 1; }
  .project-b2b-poster, .project-b2b-video { object-position: 15% center; }
  .project-legacy-poster, .project-legacy-video { top: auto; right: -65px; bottom: 0; width: calc(100% * 672 / 328); }
  .project-copy { position: absolute; z-index: 2; left: 24px; top: 24px; width: calc(100% - 48px); height: auto; margin: 0; overflow: visible; clip: auto; color: #fff; white-space: normal; pointer-events: none; }
  .project h2 { font: var(--mobile-card-title); }
  .project p { margin-top: 6px; color: inherit; font-size: 14px; line-height: 20px; }
  .career-flow { display: block; }
  .career-flow-stage { display: block; }
  .experience { --career-pitch: 144px; width: 100%; margin-top: 96px; }
  .section-title { font: var(--mobile-h3); }
  .experience > .section-title, .experience > .jobs { display: none; }
  .career-scroll { display: block; }
  .career-stage { position: relative; width: calc(100% - 32px); margin-inline: auto; padding-bottom: 96px; }
  .career-steps { display: flex; flex-direction: column; margin-top: 40px; }
  .career-step { position: relative; display: grid; flex: 0 0 var(--career-pitch); grid-template-columns: 48px minmax(0, 1fr) 24px; grid-template-rows: min-content; width: 100%; font-family: Inter, Arial, sans-serif; font-weight: 400; cursor: pointer; }
  .career-step:last-child { flex-basis: auto; min-height: 70px; }
  .career-icon { display: block; width: 48px; height: 48px; transform-origin: center; }
  .career-icon.is-pulsing { animation: career-icon-pulse 420ms cubic-bezier(.22, 1, .36, 1); }
  @keyframes career-icon-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
  .career-step-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin-inline: 20px 16px; }
  .career-step-copy > span { display: block; width: 100%; }
  .career-strike-layer { position: absolute; inset: 0; pointer-events: none; }
  .career-strike-line { position: absolute; height: 1px; border-radius: 1px; transform: scaleX(0); transform-origin: left center; }
  .career-step-copy > .career-step-name { display: block; font-size: 18px; line-height: 26px; white-space: normal; }
  .career-step-name-tail { display: inline-flex; align-items: center; white-space: nowrap; }
  .career-step-arrow { display: block; flex: none; width: 16px; height: 16px; margin-left: 4px; }
  .career-step-role, .career-step-years { font-size: 16px; line-height: 24px; }
  .career-step-role { margin-top: 8px; color: var(--muted); }
  .career-step-years { white-space: nowrap; }
  .career-check { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, .2); border-radius: 8px; transform-origin: center; }
  .career-check::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--career-check-color); border-radius: 11px; opacity: 0; pointer-events: none; }
  .career-check svg { display: block; width: 24px; height: 24px; overflow: visible; }
  .career-check path { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 13; stroke-dashoffset: 13; transition: stroke-dashoffset .32s linear; }
  .career-step.is-complete .career-icon { opacity: .2; }
  .career-scroll:not(.has-strike-lines) .career-step.is-complete .career-step-name-text,
  .career-scroll:not(.has-strike-lines) .career-step.is-complete .career-step-role,
  .career-scroll:not(.has-strike-lines) .career-step.is-complete .career-step-years { text-decoration: line-through; text-decoration-thickness: 1px; }
  .career-step.is-complete .career-check { border: 0; background: var(--career-check-color); animation: career-check-impact 360ms cubic-bezier(.22, 1, .36, 1); }
  .career-step.is-complete .career-check::after { animation: career-check-ring 420ms ease-out; }
  @keyframes career-check-impact { 0%, 100% { transform: scale(1); } 38% { transform: scale(1.2); } 68% { transform: scale(.97); } }
  @keyframes career-check-ring { 0% { opacity: .85; transform: scale(.8); } 55% { opacity: .75; } 100% { opacity: 0; transform: scale(1.65); } }
  .career-step.is-complete .career-check path { stroke-dashoffset: 0; }
  .career-step:first-child { --career-check-color: #fff; }
  .career-step:nth-child(2) { --career-check-color: #fff534; }
  .career-step:nth-child(3) { --career-check-color: #00aa47; }
  .career-connector { position: absolute; top: 64px; left: 23px; width: 1px; height: calc(var(--career-pitch) - 80px); overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, .1); pointer-events: none; }
  .career-connector-fill { display: block; width: 100%; height: 100%; background: #fff; transform: scaleY(var(--career-fill, 0)); transform-origin: top; }
  .vibecoded { margin-top: 0; }
  .vibecoded-grid { margin-top: 40px; display: flex; flex-direction: column; gap: 40px; }
  .vibecoded .project-media { aspect-ratio: 328 / 213; }
  .vibecoded .project-copy { position: static; width: 100%; margin-top: 16px; color: var(--text); pointer-events: auto; }
  .vibecoded .project p { color: var(--muted); }
  .about { margin-top: 96px; }
  .about-copy { width: 100%; margin-top: 12px; font-size: 14px; line-height: 24px; }
  .collage { width: 360px; height: 440px; margin-left: calc(50% - 180px); margin-top: 12px; }
  .photo { border-radius: 24px; }
  .collage .photo { transform: translateY(var(--parallax-y)) rotate(var(--base-rotation)); }
  .photo-family { left: 21.371px; top: 39.974px; width: 180px; height: 240px; z-index: 1; }
  .photo-baby { left: 201.341px; top: 56.741px; width: 140px; height: 140px; }
  .photo-gaming { left: 200.658px; top: 198.409px; width: 140px; height: 200px; }
  .photo-boxing { left: 27.915px; top: 281.471px; width: 180px; height: 120px; }
  .collage .sticker { z-index: 2; }
  .sticker-baby { left: -26.64px; top: 206.6px; font-size: 109.98px; }
  .sticker-game { left: 277.144px; top: 2.144px; font-size: 115.54px; }
  .sticker-boxing { left: 53.786px; top: 348.786px; font-size: 121.5px; }
  .sticker-argentina { left: 284.35px; top: 349.35px; font-size: 94.32px; }
  .contact { margin-top: 96px; }
  .contact h2 { width: 100%; font-size: 28px; line-height: 36px; }
  .footer { margin-top: 156px; padding-bottom: 24px; font-size: 14px; line-height: 20px; }
  :is(.contact-island, .anchor-menu) { bottom: max(32px, env(safe-area-inset-bottom)); }
  :is(.contact-island, .anchor-menu-contacts) { width: 234px; padding-inline: 24px; gap: 12px; }
}

@media (max-width: 340px), (max-width: 599px) and (max-height: 540px) {
  .experience { --career-pitch: 108px; }
  .career-step { grid-template-columns: 32px minmax(0, 1fr) 24px; }
  .career-step:last-child { min-height: 68px; }
  .career-icon { width: 32px; height: 32px; border-radius: 10.67px; }
  .career-step-copy { margin-left: 8px; }
  .career-step-copy > .career-step-name { padding-top: 4px; font-size: 16px; line-height: 24px; }
  .career-check { margin-top: 4px; }
  .career-step-role, .career-step-years { font-size: 14px; line-height: 20px; }
  .career-step-role { margin-top: 4px; }
  .career-connector { top: 44px; left: 15px; height: calc(var(--career-pitch) - 56px); }
}

@media (min-width: 360px) and (max-width: 599px) {
  .project p { font-size: 16px; line-height: 24px; }
}

@media (max-width: 340px) and (max-height: 540px) {
  .career-step-copy { margin-inline: 12px; }
  .career-step-copy > .career-step-name { padding-top: 0; }
  .career-check { margin-top: 0; }
}

/* Intermediate Figma composition. Keep the existing 768+ layout and all
   interaction/animation media queries unchanged. */
@media (min-width: 600px) and (max-width: 767px) {
  .designer-label { left: 32px; top: 32px; }
  .site-header > .work-status { right: 32px; top: 32px; }
  .portrait { top: 68px; width: 480px; }
  .hero-content { padding-top: 479px; }
  .actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .actions .button { padding-inline: 24px; }
  .actions .button-primary { grid-column: 1 / -1; }
  .actions .desktop-only { display: none; }
  .actions .mobile-only { display: inline; }
  .projects { display: flex; flex-direction: column; gap: 40px; }
  .project h2 { font-size: 24px; line-height: 32px; }
  .project-esim .project-visual { background: url("public/assets/cases/case-esim-intermediate-background.webp") center / cover; }
  .project-b2b .project-visual { background: url("public/assets/cases/case-b2b-intermediate-background.webp") center / cover; }
  .company { gap: 20px; }
  .company b { white-space: nowrap; }
  .vibecoded-grid { column-gap: 32px; }
  .vibecoded .project-media { height: 247px; aspect-ratio: auto; }
  .about-copy { width: 100%; margin-top: 16px; }
  /* Figma positions use the same photos and transforms, not a scaled wrapper. */
  .collage { width: 600px; height: 809px; margin-left: calc(50% - 300px); margin-top: 0; }
  .photo-family { left: 28px; top: 106px; width: 269px; height: 358px; }
  .photo-baby { left: 311px; top: 103px; width: 269px; height: 269px; }
  .photo-gaming { left: 303px; top: 343px; width: 269px; height: 344px; }
  .photo-boxing { left: 35px; top: 471px; width: 268px; height: 179px; }
  .sticker-baby { left: -34px; top: 341px; font-size: 137px; }
  .sticker-game { left: 482px; top: 52px; font-size: 143px; }
  .sticker-boxing { left: 82px; top: 574px; font-size: 150px; }
  .sticker-argentina { left: 499px; top: 595px; font-size: 117px; }
  .footer { margin-top: 180px; }
}

/* Interpolate only the narrow extension; the existing 360px design is intact. */
@media (max-width: 359px) {
  .page { --narrow-width-delta: calc(100vw - 320px); }
  .portrait { width: min(300px, calc(100% - 32px)); }
  .hero-content { padding-top: calc(72px + min(300px, 100vw - 32px)); }
  .hero h1 { font-size: 28px; line-height: 36px; }
  .projects .project-copy {
    left: calc(16px + var(--narrow-width-delta) * .2);
    top: calc(20px + var(--narrow-width-delta) * .1);
    width: calc(100% - 32px - var(--narrow-width-delta) * .4);
  }
  .collage {
    width: calc(320px + var(--narrow-width-delta));
    height: calc(406px + var(--narrow-width-delta) * .85);
    margin-left: -16px;
  }
  .photo-family { left: calc(14.795px + var(--narrow-width-delta) * .1644); top: calc(40.527px - var(--narrow-width-delta) * .013825); width: calc(163.373px + var(--narrow-width-delta) * .415675); height: calc(217.831px + var(--narrow-width-delta) * .554225); }
  .photo-baby { left: calc(178.138px + var(--narrow-width-delta) * .580075); top: calc(55.744px + var(--narrow-width-delta) * .024925); width: calc(127.068px + var(--narrow-width-delta) * .3233); height: calc(127.068px + var(--narrow-width-delta) * .3233); }
  .photo-gaming { left: calc(177.52px + var(--narrow-width-delta) * .57845); top: calc(184.322px + var(--narrow-width-delta) * .352175); width: calc(127.068px + var(--narrow-width-delta) * .3233); height: calc(181.526px + var(--narrow-width-delta) * .46185); }
  .photo-boxing { left: calc(20.731px + var(--narrow-width-delta) * .1796); top: calc(259.716px + var(--narrow-width-delta) * .543875); width: calc(163.373px + var(--narrow-width-delta) * .415675); height: calc(108.915px + var(--narrow-width-delta) * .277125); }
  .sticker-baby { left: calc(-27.786px + var(--narrow-width-delta) * .02865); top: calc(191.675px + var(--narrow-width-delta) * .373125); font-size: calc(99.826px + var(--narrow-width-delta) * .25385); }
  .sticker-game { left: calc(247.928px + var(--narrow-width-delta) * .7304); top: calc(6.365px - var(--narrow-width-delta) * .105525); font-size: calc(104.867px + var(--narrow-width-delta) * .266825); }
  .sticker-boxing { left: calc(45.15px + var(--narrow-width-delta) * .2159); top: calc(320.65px + var(--narrow-width-delta) * .7034); font-size: calc(110.295px + var(--narrow-width-delta) * .280125); }
  .sticker-argentina { left: calc(254.5px + var(--narrow-width-delta) * .74625); top: calc(321.1px + var(--narrow-width-delta) * .70625); font-size: calc(85.61px + var(--narrow-width-delta) * .21775); }
  .footer { margin-top: calc(120px + var(--narrow-width-delta) * .9); }
}

@media (max-width: 340px) {
  .career-step-copy { margin-inline: 12px; }
  .career-step-copy > .career-step-name { padding-top: 0; }
  .career-check { margin-top: 0; }
  .career-step:last-child { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-reveal-canvas { display: none; }
}

/* Native case links cover the existing card without changing its layout. */
.case-link { position: absolute; inset: 0; z-index: 3; border-radius: 32px; }
.case-link:focus-visible, .vibecoded-card:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }