/* Techie Tango design system tokens (colors, typography, spacing, fonts) */
:root{
--black:#000000;
--off-black:#0a0a0b;
--panel:#141416;
--grey-800:#1f1f22;
--grey-700:#2e2e31;
--grey-500:#6b6b6f;
--grey-400:#9a9a9e;
--grey-300:#a5a5a8;
--grey-150:#d6d6d4;
--off-white:#f2f2ee;
--white:#ffffff;

--text-body:var(--grey-300);
--text-label:var(--grey-400);
--focus-ring:var(--white);

/* Archivo has no Cyrillic: Russian letters fall through to the Cyr faces below */
--font-display:'Archivo Black','TT Display Cyr','Archivo',system-ui,sans-serif;
--font-body:'Archivo','TT Body Cyr',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;

--leading-crushed:0.86;
--leading-tight:0.95;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-crushed:-0.04em;
--tracking-tight:-0.02em;
--tracking-wide:0.06em;
--tracking-wider:0.14em;

--border-hair:1px;
--border-thin:2px;
--border-thick:4px;

--shadow-hard-sm:3px 3px 0 0 var(--off-white);
--ease-trip:cubic-bezier(.2,.8,.1,1.4);

--rule:var(--border-thin) solid var(--off-white);
}
/* Cyrillic caps carry diacritics (Ё, Й) and descenders (Д, Ц, Щ) that collide at 0.86 */
html[lang="ru"]{--leading-crushed:1;--leading-tight:1.02}

@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/archivo-500.woff2') format('woff2');}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/archivo-black-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plexmono-500.woff2') format('woff2');}
/* Cyrillic, downloaded only when the page has Russian text: Montserrat Black stands in for
   Archivo Black (closest width and weight), Golos Text for Archivo, Plex Mono's own Cyrillic cut */
@font-face{font-family:'TT Display Cyr';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/montserrat-cyr-900.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'TT Body Cyr';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/golos-cyr-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'TT Body Cyr';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/golos-cyr-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/plexmono-cyr-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/plexmono-cyr-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--off-black);color:var(--off-white);font-family:var(--font-body);-webkit-text-size-adjust:100%}
a{color:var(--off-white);text-decoration:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
section{scroll-margin-top:50px}
.mono-label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-label)}

/* primitives: Badge, Button, Tag */
.badge{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:var(--border-hair) solid var(--grey-400);color:var(--grey-300);padding:4px 8px;display:inline-flex;align-items:center}
.badge--strong{background:var(--off-white);color:var(--off-black);border-color:var(--off-white)}
.badge--outline{color:var(--off-white);border-color:var(--off-white)}

.btn{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:12px 22px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:var(--rule)}
.btn--lg{padding:18px 32px;font-size:15px}
.btn--primary{background:var(--off-white);color:var(--off-black);box-shadow:var(--shadow-hard-sm)}
.btn--primary:hover{background:var(--off-black);color:var(--off-white)}
.btn--primary:active{box-shadow:none;transform:translate(3px,3px)}
.btn--secondary{background:transparent;color:var(--off-white)}
.btn--secondary:hover{background:var(--off-white);color:var(--off-black)}

.tag{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:var(--tracking-wide);border:var(--rule);padding:5px 10px;display:inline-flex;align-items:center}
.tag:hover{background:var(--off-white);color:var(--off-black)}

/* nav */
.nav{display:flex;align-items:stretch;border-bottom:var(--rule);position:sticky;top:0;background:var(--off-black);z-index:10}
.nav__brand{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:16px 22px;border-right:var(--rule);display:flex;align-items:center}
.nav__brand span{color:var(--text-label)}
.nav__brand:hover,.nav__brand:hover span{background:var(--off-white);color:var(--off-black)}
.nav__links{display:flex;margin-left:auto}
.nav__links a{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:16px 22px;border-left:var(--rule);display:flex;align-items:center}
.nav__links a:hover{background:var(--off-white);color:var(--off-black)}
/* language switch: the current language is the inverted cell, like an active tab */
.nav__lang{display:flex}
.nav__lang a{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-wider);padding:16px 14px;border-left:var(--rule);display:flex;align-items:center;color:var(--text-label)}
.nav__lang a:hover{background:var(--off-white);color:var(--off-black)}
.nav__lang a[aria-current]{background:var(--off-white);color:var(--off-black)}

/* hero */
.hero{border-bottom:var(--rule);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.hero__copy{padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px) clamp(24px,3vw,40px);border-right:var(--rule)}
.hero__badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(38px,6.4vw,92px);line-height:var(--leading-crushed);letter-spacing:var(--tracking-crushed);margin:0 0 24px}
.hero h1 span{color:var(--grey-500)}
.hero p{font-size:17px;line-height:var(--leading-relaxed);color:var(--text-body);max-width:580px;margin:0 0 30px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__art{position:relative;overflow:hidden}

/* dancers sticker: tilted plate bleeding off the right edge */
.sticker{position:absolute;right:-28px;top:50%;width:clamp(230px,30vw,400px);margin:0;transform:translateY(-50%) rotate(-7deg);border:var(--border-thick) solid var(--off-white);background:var(--off-black)}
.sticker img{display:block;width:100%;height:auto;filter:invert(1) contrast(1.15);transform-origin:55% 85%}
.sticker figcaption{border-top:var(--rule);padding:7px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-label)}
.trip{animation:trip 700ms var(--ease-trip)}
@keyframes trip{0%{transform:none}22%{transform:rotate(-6deg) translateY(8px)}48%{transform:rotate(4deg) translateY(-5px) skewX(-4deg)}72%{transform:rotate(-2deg) translateY(3px)}100%{transform:none}}

/* marquee */
.marquee{border-bottom:var(--rule);overflow:hidden;background:var(--off-white);display:flex}
.marquee__run{display:flex;flex-shrink:0;align-items:stretch;animation:slide 26s linear infinite}
.marquee__run span{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tracking-wider);white-space:nowrap;padding:10px 20px;color:var(--off-black);border-right:var(--border-thin) solid var(--off-black)}
.marquee__run span:nth-child(3n+2){background:var(--off-black);color:var(--off-white)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* focus areas */
.focus{border-bottom:var(--rule)}
.focus__head{display:flex;align-items:baseline;gap:20px;padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px) 22px}
.focus h2{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(26px,3.4vw,46px);letter-spacing:var(--tracking-crushed);line-height:var(--leading-tight);margin:0}
.focus__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule)}
.focus__cell{padding:clamp(22px,3vw,34px) clamp(18px,2.5vw,30px);display:flex;flex-direction:column;gap:14px}
.focus__cell + .focus__cell{border-left:var(--rule)}
.focus__cell:nth-child(2){padding-top:clamp(44px,5vw,64px)}
.focus__cell:hover{background:var(--grey-800)}
.focus h3{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:22px;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:0}
.focus__cell p{font-size:15px;line-height:var(--leading-normal);color:var(--text-body);margin:0;flex:1}
.focus__tags{display:flex;gap:8px;flex-wrap:wrap}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:var(--rule)}
.contact__pitch{background:var(--off-white);color:var(--off-black);padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px);border-right:var(--rule)}
/* grey-400 fails contrast on the off-white panel, so the label steps down to grey-500 here */
.contact__pitch .mono-label{color:var(--grey-500)}
.contact h2{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(32px,4.6vw,66px);letter-spacing:var(--tracking-crushed);line-height:var(--leading-crushed);margin:14px 0 16px}
.contact__pitch p{font-size:16px;line-height:var(--leading-relaxed);max-width:440px;margin:0}
.contact__row{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px);font-family:var(--font-mono)}
.contact__row:hover{background:var(--off-white);color:var(--off-black)}
.contact__row:hover .mono-label{color:var(--grey-500)}
.contact__value{font-size:clamp(20px,2.7vw,38px);letter-spacing:var(--tracking-tight);overflow-wrap:anywhere}
.contact__foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.contact__arrow{font-size:28px;line-height:1}

/* footer */
.footer{display:flex;flex-wrap:wrap}
.footer > span{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-label);padding:16px 22px}
.footer > span:first-child{border-right:var(--rule)}
.footer > span:last-child{border-left:var(--rule);margin-left:auto}

/* tablet and phone: the asymmetric grids collapse into a single column of framed cells */
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero__copy{border-right:0;border-bottom:var(--rule)}
  .hero__art{min-height:clamp(300px,62vw,420px)}
  .sticker{width:clamp(240px,58vw,380px);right:-18px}
  .focus__grid{grid-template-columns:minmax(0,1fr)}
  .focus__cell + .focus__cell{border-left:0;border-top:var(--rule)}
  .focus__cell:nth-child(2){padding-top:clamp(22px,3vw,34px);padding-left:clamp(36px,8vw,60px)}
  .contact{grid-template-columns:minmax(0,1fr)}
  .contact__pitch{border-right:0;border-bottom:var(--rule)}
}
@media (max-width:560px){
  .nav__brand{padding:14px 16px}
  .nav__links a{padding:14px 16px}
  .nav__links a:not(.nav__cta){display:none}
  .nav__lang a{padding:14px 11px}
  .focus__head{flex-direction:column;gap:10px}
  .footer > span{flex:1 1 100%}
  .footer > span:first-child{border-right:0}
  .footer > span:last-child{border-left:0;border-top:var(--rule);margin-left:0}
}
@media (max-width:420px){
  .nav__brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__run,.trip{animation:none}
}