@font-face{font-family:"eUkraineHead";src:url("fonts/e-UkraineHead-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"eUkraineHead";src:url("fonts/e-UkraineHead-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"eUkraineHead";src:url("fonts/e-UkraineHead-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fixel";src:url("fonts/FixelText-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fixel";src:url("fonts/FixelText-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fixel";src:url("fonts/FixelText-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#0E0E0E; --paper:#F2F0EA; --signal:#D62246; --signal-lt:#EC5A78;
  --n-2:#6B6862; --line-dark:#2A2A28; --ink-2:#1A1A18;
  --d:"eUkraineHead",system-ui,sans-serif; --t:"Fixel",system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad:clamp(20px,4vw,64px); --maxw:1440px;
}
*{box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--t);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1{font-family:var(--d);margin:0;line-height:.96;letter-spacing:-.035em;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.btn{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--d);font-weight:500;
  font-size:15px;letter-spacing:-.01em;padding:18px var(--s4);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(6px)}
.btn--primary{background:var(--signal);color:#fff}
.btn--primary:hover{background:#B21938}
.btn--ghost-light{background:transparent;color:var(--paper);border-color:#4A4A46}
.btn--ghost-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.top{position:relative;z-index:60;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.top .wrap{display:flex;align-items:center;gap:var(--s5);height:72px}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex-shrink:0}
.mono{width:52px;height:40px;flex-shrink:0;display:grid;place-items:center;border:1px solid #4A4A46;
  font-family:var(--d);font-weight:700;font-size:12px;letter-spacing:.04em}
.brand-txt{font-family:var(--d);font-weight:500;font-size:12.5px;line-height:1.25;letter-spacing:-.01em;color:#B8B4AC}
.brand-txt b{display:block;color:var(--paper);font-weight:700;font-size:14px;letter-spacing:.01em}
.nav{display:flex;gap:var(--s4);margin-left:auto;align-items:center}
.nav a{font-size:14.5px;text-decoration:none;color:#B8B4AC;padding:6px 0;border-bottom:2px solid transparent}
.nav a.is-active{color:var(--paper);border-bottom-color:var(--signal);font-weight:500}
.lang{display:flex;align-items:center;gap:2px;font-family:var(--d);font-size:12.5px;font-weight:500;color:#7E7A73}
.lang b{color:var(--paper);font-weight:700}
.lang span{padding:0 4px}
.burger{display:none;background:none;border:1px solid #4A4A46;color:var(--paper);width:44px;height:44px;cursor:pointer;padding:0}
.burger i{display:block;width:18px;height:1.5px;background:var(--paper);margin:4px auto}

.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.hero-meta span{font-family:var(--d);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:#8C8880}
.hero-meta span::before{content:"";display:inline-block;width:5px;height:5px;background:var(--signal);margin-right:10px;vertical-align:3px}
.hero-lead{margin:var(--s4) 0 0;max-width:46ch;font-size:18px;color:#C9C5BD;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
h1 .mark{color:var(--signal)}

@media (max-width:900px){ .nav,.lang{display:none} .burger{display:block;margin-left:auto} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }