/* Основата на трите варианта на първия екран.
   Марката от години: черно, червено, сиво, бяло + един контрастен цвят (злато — короната от логото и златното „1“).
   Движението: силни криви по Емил Ковалски, само transform/opacity, щадящ вариант при намалено движение. */
:root {
  --paper: #F1F1EF;      /* светлосиво-бяло */
  --paper-2: #E8E5DF;    /* сива хартия */
  --ink: #111111;
  --ink-2: #2C2C2C;
  --grey: #5F5C57;
  --grey-2: #A8A39B;
  --line: #D3CEC6;
  --red: #E0262B;
  --red-d: #B31B20;
  --red-ink: #C41E24;    /* червеното за текст: 4,5:1 върху светлото */
  --gold: #D9A21B;       /* контрастният цвят: правилното, едното */
  --gold-d: #A87A0E;
  --white: #FFFFFF;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(18px, 4vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- грейн (ретро зърно, живо) ---------- */
.grain::after {
  content: ""; position: fixed; inset: -60%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--grain, .1); mix-blend-mode: multiply;
  animation: grain .9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 2%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-2%, 4%); } 80% { transform: translate(4%, 1%); } 100% { transform: translate(0, 0); } }

/* ---------- горната лента ---------- */
.nav { position: relative; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 18px var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px/1 var(--f-body); letter-spacing: .01em; }
.brand img { width: 38px; height: auto; }
.nav nav { display: flex; gap: 26px; margin-left: auto; font: 500 15px/1 var(--f-body); }
.nav nav a { text-decoration: none; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .nav nav a:hover { color: var(--red); } }
@media (max-width: 760px) { .nav nav { display: none; } .nav .btn-sm { margin-left: auto; } }

/* ---------- бутоните: плътни, с твърда сянка (ретро), без хапчета ---------- */
.btn { display: inline-flex; align-items: center; gap: 16px; padding: 19px 22px 19px 26px; background: var(--ink); color: var(--white); text-decoration: none; border: 2px solid var(--ink); border-radius: 3px;
  font: 700 17px/1 var(--f-body); box-shadow: 5px 5px 0 var(--red); cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s ease; }
.btn .arr { display: grid; place-items: center; width: 30px; height: 30px; background: var(--red); color: var(--white); border-radius: 2px; transition: transform .25s var(--ease-out); }
.btn .arr svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red); }
  .btn:hover .arr { transform: translate(2px, -2px); }
}
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--red); transition-duration: .1s; }
.btn-sm { padding: 11px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--red); }
.link2 { font: 600 16px/1 var(--f-body); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 2px; border-bottom: 2px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .link2:hover { color: var(--red); } }
.risk { display: flex; align-items: center; gap: 9px; margin-top: 18px; font: 500 14px/1.4 var(--f-body); color: var(--grey); }
.risk svg { flex: none; width: 18px; height: 18px; }

/* ---------- движещата се лента ---------- */
.ticker { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.ticker__track { display: flex; width: max-content; animation: tick var(--tick, 42s) linear infinite; }
.ticker__item { display: flex; align-items: center; font: 600 13.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; padding: 17px 0; white-space: nowrap; }
.ticker__item::after { content: "✕"; color: var(--red); margin: 0 26px; font-size: 11px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker__track { animation-play-state: paused; } }

/* ---------- влизането: думите и редовете излизат подред ---------- */
[data-in] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms + 150ms); }
.ready [data-in] { opacity: 1; transform: none; }
.hl { display: block; overflow: hidden; padding: .04em 0 .1em; margin: -.04em 0 -.1em; }
.hl > span { display: inline-block; transform: translateY(108%); transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--d, 0) * 85ms + 220ms); }
.ready .hl > span { transform: none; }
/* подчертаването, което се изписва */
.mark { position: relative; white-space: nowrap; }
.mark svg { position: absolute; left: -2%; width: 104%; bottom: -.14em; height: .3em; overflow: visible; pointer-events: none; }
.mark path { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out) 1.05s; }
.ready .mark path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-in], .hl > span { transition-duration: .01s !important; transition-delay: 0s !important; transform: none !important; }
  .mark path { transition: none; stroke-dashoffset: 0; }
  .grain::after, .ticker__track { animation: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }