@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/raleway-100.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(fonts/raleway-200.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/raleway-300.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/raleway-400.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/raleway-500.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/raleway-600.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/raleway-700.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/raleway-800.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/raleway-900.woff) format('woff');
}

/* v1.0.101: centred reference composition over the original showreel. */
.stage.reference-stage{width:calc(100% - 24px);min-height:calc(100svh - 12px);margin:12px 12px 0;padding-inline:max(18px,calc(var(--pad) - 12px));border:1px solid rgba(255,255,255,.16);border-radius:28px;background:#080911;isolation:isolate;display:flex;flex-direction:column}
.stage.reference-stage::after{background:linear-gradient(180deg,rgba(7,8,15,.40),rgba(7,8,15,.64) 40%,rgba(7,8,15,.52) 72%,rgba(7,8,15,.76))}
.stage.reference-stage .hero-video{opacity:1;object-position:center;pointer-events:none}
.reference-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:auto;min-height:96px;padding:24px 0;border:0;background:none;backdrop-filter:none}
.reference-nav .site-brand{grid-column:1;grid-row:1;width:clamp(116px,9vw,156px);justify-self:start}
.reference-nav .reference-menu{position:relative;isolation:isolate;grid-column:2;grid-row:1;display:flex;align-items:center;gap:2px;width:auto;padding:5px;border:1px solid rgba(255,255,255,.21);border-radius:999px;background:rgba(255,255,255,.11);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.12);overflow:visible;white-space:nowrap}
.reference-menu .nav-glider{position:absolute;z-index:-1;left:0;top:5px;height:calc(100% - 10px);width:var(--nav-width,76px);transform:translate3d(var(--nav-left,5px),0,0);border-radius:999px;background:rgba(10,9,20,.86);border:1px solid rgba(255,255,255,.30);box-shadow:0 1px 10px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.12);transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.reference-nav .reference-menu a{position:relative;display:inline-flex;justify-content:center;align-items:center;min-height:34px;min-width:0;padding:8px 15px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.78);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:0;text-transform:none;transition:color .2s ease}
.reference-nav .reference-menu a[aria-current],.reference-nav .reference-menu a:hover{color:#fff}
.reference-nav .reference-menu .nav-education{grid-column:auto;min-height:34px;border:0;background:none;letter-spacing:0}
.reference-nav .reference-actions{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.reference-nav .reference-actions .lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:40px;margin:0;padding:8px;border:0;background:transparent;color:#fff;font-size:13px;font-weight:500;letter-spacing:0;border-radius:999px}
.reference-nav .reference-actions .telegram{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 20px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:#fff;color:#111019;font-size:13px;font-weight:550;letter-spacing:0;line-height:1.3;transition:background .2s,transform .2s}
.reference-nav .reference-actions .telegram:hover{background:#ede9f6;transform:translateY(-1px)}
.reference-stage a:focus-visible,.reference-stage button:focus-visible,.reference-nav a:focus-visible,.reference-nav button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.stage.reference-stage .reference-main{display:flex;flex:1;min-width:0;min-height:0}
.stage.reference-stage .reference-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:0;width:100%;min-width:0;margin:0;padding:clamp(32px,6svh,80px) 0 clamp(28px,5svh,60px);flex:1}
.stage.reference-stage .reference-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;max-width:1160px;width:100%;min-width:0;margin-inline:auto;padding-block:24px 30px;text-align:center}

.stage.reference-stage .reference-copy h1.hero-intro{max-width:1120px;margin:0;font:400 clamp(40px,3.8vw,78px)/1.08 "Raleway",Arial,sans-serif;font-variation-settings:"wght" 400;letter-spacing:-.045em;text-transform:none;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.25);color:#fff;transform:none}
.stage.reference-stage .reference-copy .hero-support{max-width:660px;margin:24px 0 0;color:rgba(255,255,255,.82);font:400 clamp(14px,1vw,18px)/1.65 "Raleway",Arial,sans-serif;letter-spacing:0;text-wrap:balance}
.stage.reference-stage .hero-portfolio{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:30px;padding:14px 29px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(10,8,20,.92);color:#fff;font:550 14px/1.4 "Raleway",Arial,sans-serif;letter-spacing:0;box-shadow:0 0 14px rgba(216,255,0,.52),0 0 38px rgba(216,255,0,.3),inset 0 0 12px rgba(255,255,255,.05);transition:transform .25s,box-shadow .25s}
.hero-portfolio::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:inherit;background:linear-gradient(110deg,#d8ff00,#fff,#c5ff00,#fff,#d8ff00);background-size:300% 100%;animation:portfolio-gradient 6s ease-in-out infinite;filter:blur(4px);opacity:.88;pointer-events:none}
.hero-portfolio::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:linear-gradient(130deg,rgba(15,20,8,.94),rgba(5,8,4,.91));pointer-events:none}
.stage.reference-stage .hero-portfolio:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(216,255,0,.64),0 0 52px rgba(216,255,0,.34)}
@keyframes portfolio-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.reference-clients{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(16px,2.5vw,42px);width:min(1180px,100%);margin:clamp(28px,4svh,48px) auto 0;padding:0;list-style:none}
.reference-clients li{display:flex;justify-content:center;align-items:center;width:100%;height:48px;min-width:0}
.reference-clients img{display:block;width:auto;max-width:100%;height:auto;max-height:42px;object-fit:contain;filter:brightness(0) invert(1);box-shadow:none}

@media(min-width:2400px){.reference-nav{min-height:112px}.stage.reference-stage .reference-copy h1.hero-intro{font-size:clamp(78px,3.3vw,100px);max-width:1440px}.stage.reference-stage .reference-copy{max-width:1480px}.reference-clients{width:1280px}}
@media(max-width:1100px){.reference-nav{grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:20px 0;min-height:0}.reference-nav .reference-actions{grid-column:2}.reference-nav .reference-menu{grid-column:1/-1;grid-row:2;justify-self:center}.stage.reference-stage .reference-hero{padding-top:24px}.stage.reference-stage .reference-copy h1.hero-intro{font-size:clamp(38px,5vw,60px);max-width:900px}}
@media(max-width:600px){.stage.reference-stage{width:calc(100% - 16px);margin:8px 8px 0;min-height:calc(100svh - 8px);padding-inline:18px;border-radius:22px}.reference-nav{gap:16px 12px;padding-block:18px}.reference-nav .site-brand{width:116px}.reference-nav .reference-actions{gap:8px}.reference-nav .reference-actions .telegram{padding:9px 14px;font-size:12px;min-height:40px}.reference-nav .reference-actions .lang-switch{min-width:36px;font-size:12px}.reference-nav .reference-menu{width:max-content;max-width:100%;padding:4px;gap:0;overflow:visible}.reference-nav .reference-menu a,.reference-nav .reference-menu .nav-education{min-height:40px;padding:9px 10px;font-size:11px}.reference-menu .nav-glider{top:4px;height:calc(100% - 8px)}.stage.reference-stage .reference-hero{padding:20px 0 max(25px,env(safe-area-inset-bottom))}.stage.reference-stage .reference-copy{padding:20px 0}.stage.reference-stage .reference-copy h1.hero-intro{font-size:clamp(34px,8vw,48px);line-height:1.1;letter-spacing:-.04em;max-width:100%}.stage.reference-stage .reference-copy .hero-support{margin-top:18px;font-size:14px;max-width:28ch}.stage.reference-stage .hero-portfolio{margin-top:25px;min-height:50px;padding:13px 26px}.reference-clients{column-gap:15px;row-gap:18px;grid-template-columns:repeat(6,minmax(0,1fr));max-width:390px;margin-top:28px}.reference-clients li{grid-column:span 2;height:36px}.reference-clients li:nth-child(4){grid-column:2/span 2}.reference-clients li:nth-child(5){grid-column:4/span 2}.reference-clients li:nth-child(6){grid-column:2/span 2}.reference-clients li:nth-child(7){grid-column:4/span 2}.reference-clients img{max-height:30px;max-width:100%}}
@media(max-width:359px){.stage.reference-stage{padding-inline:14px}.reference-nav .site-brand{width:104px}.reference-nav .reference-actions .telegram{padding-inline:12px}.reference-nav .reference-menu a,.reference-nav .reference-menu .nav-education{padding-inline:8px;font-size:10px}.stage.reference-stage .reference-copy h1.hero-intro{font-size:32px}}
@media(prefers-reduced-motion:reduce){.reference-menu .nav-glider{transition:none}.hero-portfolio::before{animation:none}.stage.reference-stage .hero-portfolio,.reference-nav .reference-actions .telegram{transition:none}}

/* Persistent header lives outside the clipped showreel frame. */
.reference-nav{position:fixed;z-index:80;top:12px;left:max(31px,var(--pad));right:max(31px,var(--pad));border-radius:24px;transition:background .25s,box-shadow .25s}
.reference-nav.is-scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.reference-nav-spacer{height:var(--reference-header-height,96px);flex:0 0 var(--reference-header-height,96px);pointer-events:none}
#work,#blog,#about{scroll-margin-top:calc(var(--reference-header-height,96px) + 28px)}
.stage.reference-stage .reference-hero{padding-bottom:calc(clamp(28px,5svh,60px) + 50px)}
.reference-clients img{max-width:min(150px,100%);text-shadow:none}
@media(max-width:600px){.reference-nav{top:8px;left:27px;right:27px;border-radius:20px}.stage.reference-stage .reference-hero{padding-bottom:calc(max(25px,env(safe-area-inset-bottom)) + 50px)}}
@media(max-width:359px){.reference-nav{left:23px;right:23px}}

body,button,input,textarea,select{font-family:"Raleway",Arial,sans-serif}
/* A white portfolio button keeps the approved acid-green/white light field. */
.stage.reference-stage .hero-portfolio{background:#fff;color:#1d1d1b;border-color:#fff}
.hero-portfolio::after{background:#fff}
/* Raleway needs room for the longer Cyrillic words in the lower cards. */
.quote h2{max-width:min(1100px,100%);font-size:clamp(42px,5.8vw,96px);font-weight:500;font-variation-settings:"wght" 500;line-height:1.08;letter-spacing:-.025em;overflow-wrap:normal;text-wrap:balance}
.contact h2{max-width:100%;font-size:clamp(42px,6.8vw,112px);font-weight:500;font-variation-settings:"wght" 500;line-height:1.06;letter-spacing:-.025em;overflow-wrap:normal}
@media(max-width:780px){
 .quote{min-height:310px;padding:26px 24px;min-width:0}
 .quote h2{font-size:clamp(26px,7.5vw,42px);line-height:1.13;letter-spacing:-.02em}
 .contact{padding:28px 24px 24px}
 .contact h2{font-size:clamp(30px,8.1vw,46px);line-height:1.08;letter-spacing:-.025em}
 .contact>a{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:48px;margin-top:24px;padding:12px 18px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
 .skill{min-width:0;padding:20px;min-height:180px}
 .skill h3{margin-top:24px;font-size:clamp(19px,5.2vw,24px);line-height:1.18;letter-spacing:-.02em;overflow-wrap:anywhere}
 .skill p{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
 .blog-feature h3{font-size:clamp(15px,4vw,19px);line-height:1.18;letter-spacing:-.015em;overflow-wrap:anywhere}
 .blog-feature-copy{padding:18px 16px 62px}
 .blog-link{left:16px;bottom:16px;max-width:calc(100% - 32px)}
 .footer{font-size:12px;line-height:1.6}
 .footer>span,.footer>button,.footer .footer-contact a{line-height:1.6}
}
@media(max-width:699px),(hover:none) and (pointer:coarse) and (max-width:1100px){
 .stage.reference-stage{min-height:100svh;min-height:100dvh;min-height:100lvh}
 .reference-clients{display:none}
 .stage.reference-stage .reference-hero{grid-template-rows:minmax(0,1fr);padding-bottom:max(38px,env(safe-area-inset-bottom))}
 .stage.reference-stage .reference-copy{padding-block:24px}
}

/* Stable logo frames: only the source changes, never the position or slot size. */
.reference-clients img{width:100%;height:42px;max-width:min(150px,100%);max-height:42px;object-fit:contain;transform:none;transition:none;animation:none;filter:brightness(0) invert(1);box-shadow:none}