/* =====================================================================
   Мастърхак · стилът, заключен на 07.10.2026
   Изворът: продаващата страница lifehack.bg/klub („Растеж на бизнеса чрез изваждане“, ~/Desktop/klub/index.html).
   Правилата и защо са такива: STIL.md. Тук са само стойностите и готовите парчета.
   Ползване: <link rel="stylesheet" href="…/stil/tokens.css"> + веднъж defs.svg в <body>.
   Класовете са с „mh-“, за да не се бият с чужди стилове (Circle, WordPress).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@700;800;900&family=Oswald:wght@500;600;700&family=Golos+Text:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  /* ---- хартията (основният фон) ---- */
  --mh-paper: #E5E5E4;          /* фонът на страницата */
  --mh-paper-hi: #E9E9E8;       /* центърът на винетката */
  --mh-paper-lo: #E0E0DF;       /* ръбовете на винетката */
  --mh-sheet: #FFFDF9;          /* карта, кутия, бележка: топло бяло */
  --mh-sheet-2: #F2F1EC;        /* хартията в илюстрациите и светлото върху черно */
  --mh-scene: #FBF8F7;          /* сцената с мрежата (анимации, инфографики) */
  --mh-panel: #E9E6E0;          /* сив панел, неизбрано */

  /* ---- мастилото ---- */
  --mh-ink: #161412;            /* черното: текст, рамки, сенки, тъмната повърхност */
  --mh-ink-2: #2D2B29;          /* основен текст в абзаци */
  --mh-ink-3: #3A3633;
  --mh-grey: #5D5955;           /* второстепенен текст */
  --mh-grey-2: #7B7B7B;         /* пред-заглавието (eyebrow) */
  --mh-grey-3: #A29D96;         /* пунктир, неактивно */
  --mh-dash: #ACACAC;           /* сивите квадратчета-тирета */
  --mh-on-ink: #F2F1EC;         /* текстът върху черно */
  --mh-on-ink-2: rgba(242, 241, 236, .82);
  --mh-on-ink-line: rgba(242, 241, 236, .2);

  /* ---- червеното: болката, акцентът, действието ---- */
  --mh-red: #E30607;            /* плътни бутони, „СПЕСТИ“, „NEW“, броячът-значка */
  --mh-red-deep: #A70002;       /* акцентната дума в заглавието („ЧРЕЗ ИЗВАЖДАНЕ“) */
  --mh-red-ink: #BC1D22;        /* печатите, мастилото на иконите */
  --mh-red-text: #C41E24;       /* червен текст в абзац (4,5:1 върху хартията) */

  /* ---- златото: правилното, едното, годишното ---- */
  --mh-gold: #D9A21B;           /* короната от логото, златното „1“, рамката на избраното */
  --mh-gold-2: #E4B33F;
  --mh-gold-d: #C78F14;
  --mh-gold-text: #8E6A0C;      /* златен текст върху хартия */

  /* ---- бледите: бележки и избрано ---- */
  --mh-cream: #FFF1C4;          /* балончета, бележки, „Не видя своя въпрос?“ */
  --mh-cream-2: #F6EAD2;        /* фон на избран ред/таб */
  --mh-peach: #FFEED2;          /* шапката на годишната карта */
  --mh-pink: #FFDEDE;           /* шапката на кутия („МИНИМАЛНО ЕФЕКТИВНА ДОЗА“) */
  --mh-marker: #FFE7A0;         /* жълтият маркер под важните думи */

  /* ---- зеленото: само „да / включено / готово“ и печатът „−%“ ---- */
  --mh-green: #02893F;          /* квадратчето „да“ в чиповете, отметката */
  --mh-green-d: #0B5E30;        /* медалът „−50% ОТСТЪПКА“, звездите на отзивите */
  --mh-green-pale: #EDFFF2;     /* съобщение от клиент (за да се отличи) */

  /* ---- шрифтовете ---- */
  --mh-f-tall: "Alumni Sans", "Oswald", "Arial Narrow", sans-serif;   /* големият: заглавия, цени, числа */
  --mh-f-cond: "Oswald", "Arial Narrow", sans-serif;                  /* етикети, бутони, пред-заглавия, главни букви */
  --mh-f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;  /* текстът */
  --mh-f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;       /* системни дреболии: „сега“, „ВТОРНИК“ */

  /* ---- линии и сенки ---- */
  --mh-rule: 2px solid var(--mh-ink);        /* рамка на всичко важно */
  --mh-rule-thin: 1.5px solid var(--mh-ink); /* редът с фактите под заглавието */
  --mh-shadow-s: 3px 3px 0 var(--mh-ink);
  --mh-shadow: 4px 4px 0 var(--mh-ink);      /* бутон, балонче, карта */
  --mh-shadow-l: 6px 6px 0 var(--mh-ink);    /* голяма карта */
  --mh-shadow-xl: 0 0 0 2px var(--mh-ink), 10px 10px 0 2px var(--mh-ink); /* избраната (годишната) карта */

  /* ---- мрежа и разстояния ---- */
  --mh-max: 1440px;
  --mh-gutter: clamp(18px, 4vw, 56px);
  --mh-grid-cell: 26px;                      /* клетката на мрежата в сцените */

  /* ---- движението (Емил Ковалски) ---- */
  --mh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mh-grain: .1;                            /* силата на зърното върху хартия */
}

/* ===================== повърхностите ===================== */
.mh-paper { background-color: var(--mh-paper); background-image: radial-gradient(120% 90% at 50% 38%, var(--mh-paper-hi) 0%, var(--mh-paper) 55%, var(--mh-paper-lo) 100%); color: var(--mh-ink); }

/* живо ретро зърно върху цялата страница: сложи class="mh-grain" на <body> */
.mh-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(--mh-grain); mix-blend-mode: multiply; animation: mh-grain .9s steps(5) infinite; }
@keyframes mh-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); } }

/* тъмната повърхност: мастило + бяло зърно (лентата, финалът, футърът, тъмните видеа) */
.mh-ink { position: relative; isolation: isolate; background: var(--mh-ink); color: var(--mh-on-ink); }
.mh-ink::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* сцената: топла бяла хартия, мрежа 26px и ситни точки, които избледняват надолу */
.mh-scene { position: relative; overflow: hidden; isolation: isolate; background-color: var(--mh-scene);
  background-image: linear-gradient(rgba(49, 38, 59, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 38, 59, .07) 1px, transparent 1px);
  background-size: var(--mh-grid-cell) var(--mh-grid-cell); background-position: center -1px; }
.mh-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(49, 38, 59, .26) .65px, transparent 1px); background-size: 4px 4px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 18%, rgba(0, 0, 0, .12) 42%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 18%, rgba(0, 0, 0, .12) 42%, transparent 62%); }

/* карта: топло бяло, рамка от мастило, твърда сянка */
.mh-card { background: var(--mh-sheet); border: var(--mh-rule); box-shadow: var(--mh-shadow-l); }
.mh-card.is-chosen { background: var(--mh-peach); box-shadow: var(--mh-shadow-xl); }

/* кутия с розова шапка (демо, игра, брояч) */
.mh-box { border: var(--mh-rule); background: rgba(255, 255, 255, .26); }
.mh-box__head { display: flex; justify-content: center; align-items: center; gap: .5em; padding: 13px 14px 12px; border-bottom: var(--mh-rule); background: var(--mh-pink);
  font: 600 18px/1 var(--mh-f-cond); text-transform: uppercase; }

/* ===================== шрифтът ===================== */
.mh-display { font-family: var(--mh-f-tall); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .86; text-wrap: balance; }
.mh-h1 { font: 900 clamp(56px, 8.4vw, 120px)/.84 var(--mh-f-tall); text-transform: uppercase; letter-spacing: .005em; margin: 0; }
.mh-h2 { font: 900 clamp(46px, 4.75vw, 70px)/.86 var(--mh-f-tall); text-transform: uppercase; letter-spacing: .005em; margin: 0; text-wrap: balance; }
.mh-h1 em, .mh-h2 em, .mh-display em { font-style: normal; color: var(--mh-red-deep); }
.mh-ink .mh-h2 em, .mh-ink .mh-display em { color: var(--mh-gold); }   /* върху черно акцентът е злато */

/* пред-заглавието: сиви главни букви между две тирета */
.mh-eyebrow { display: flex; align-items: center; gap: .6em; margin: 0; font: 700 18px/1.3 var(--mh-f-cond); letter-spacing: .03rem; text-transform: uppercase; color: var(--mh-grey-2); }
.mh-eyebrow::before, .mh-eyebrow::after, .mh-sq { content: ""; display: inline-block; width: .75em; height: .3em; background: var(--mh-dash); flex: none; }
.mh-label { font: 600 15px/1.2 var(--mh-f-cond); letter-spacing: .04em; text-transform: uppercase; }
.mh-lead { font: 500 clamp(18px, 1.5vw, 22px)/1.3 var(--mh-f-cond); color: var(--mh-ink-2); text-wrap: balance; }
.mh-body { font: 400 17px/1.55 var(--mh-f-body); color: var(--mh-ink-2); }

/* редът с фактите: „1,700+ ЧЛЕНОВЕ ▬ БЕЗ ОБЩИ ПРИКАЗКИ ▬ НЕ ВСЕКИ ОСТАВА“ */
.mh-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3em .9em; margin: 0; padding: 12px 0; border-block: var(--mh-rule-thin);
  font: 600 clamp(13px, 1.25vw, 18px)/1.3 var(--mh-f-cond); letter-spacing: .03rem; text-transform: uppercase; }
.mh-facts > * + *::before { content: ""; display: inline-block; width: .75em; height: .3em; margin-right: .9em; vertical-align: .22em; background: var(--mh-dash); }

/* ===================== бутоните ===================== */
.mh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 18px; border: 2px solid var(--mh-ink); border-radius: 2px;
  background: var(--mh-paper); color: var(--mh-ink); text-decoration: none; text-align: center; cursor: pointer;
  font: 600 15px/1.1 var(--mh-f-cond); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--mh-shadow);
  transition: transform .16s var(--mh-ease-out), box-shadow .16s var(--mh-ease-out), background-color .15s ease, color .15s ease; }
.mh-btn--red { background: var(--mh-red); color: #fff; }
.mh-btn--gold { background: var(--mh-gold); box-shadow: var(--mh-shadow-s); }
.mh-btn--big { padding: 15px 24px; font-size: 17px; box-shadow: 5px 5px 0 var(--mh-ink); }
.mh-btn svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .mh-btn:hover:not(:active) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--mh-ink); }
  .mh-btn:not(.mh-btn--red):not(.mh-btn--gold):hover { background: var(--mh-ink); color: var(--mh-paper); }
}
.mh-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mh-ink); transition-duration: .1s; }
.mh-btn:focus-visible, .mh-chip:focus-visible { outline: 3px solid var(--mh-red); outline-offset: 3px; }

/* ===================== етикети, чипове, печати ===================== */
/* чип: рамка + квадратче (зелено = да, злато = годишно/правилно, сиво = неутрално) */
.mh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 5px; border: 2px solid var(--mh-ink); background: transparent;
  font: 600 15px/1.25 var(--mh-f-cond); text-transform: uppercase; white-space: nowrap; }
.mh-chip::before { content: ""; width: 13px; height: 13px; background: var(--mh-green); flex: none; }
.mh-chip.is-gold::before { background: var(--mh-gold); }
.mh-chip.is-grey::before { background: var(--mh-grey-3); }

/* „NEW“: червено, наклонено, с мастилена рамка */
.mh-new { display: inline-block; padding: 4px 7px 3px; background: var(--mh-red); color: #fff; border: 2px solid var(--mh-ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--mh-ink);
  font: 700 12px/1 var(--mh-f-cond); letter-spacing: .08em; transform: rotate(-6deg); }

/* „СПЕСТИ €297“: червената кутийка до зачертаната цена */
.mh-save { display: inline-block; padding: 6px 10px 7px; background: var(--mh-red); color: #fff; border: 2px solid var(--mh-ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--mh-ink);
  font: 600 15px/1 var(--mh-f-cond); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

/* зачертана цена: червена диагонал, която се „изписва“ (добави .is-on, когато влезе в кадър) */
.mh-strike { position: relative; display: inline-block; color: var(--mh-grey); font: 600 21px/1 var(--mh-f-cond); }
.mh-strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: 2.5px; margin-top: -1px; background: #C41E24; transform: rotate(-8deg); clip-path: inset(0 100% 0 0); }
.mh-strike.is-on::after { clip-path: inset(0 0 0 0); transition: clip-path .45s var(--mh-ease-out) .2s; }

/* балонче-бележка: бледожълто, рамка, твърда сянка */
.mh-tip { padding: 9px 13px 10px; background: var(--mh-cream); border: 2px solid var(--mh-ink); border-radius: 6px; box-shadow: var(--mh-shadow);
  font: 500 15px/1.4 var(--mh-f-body); color: var(--mh-ink-2); text-wrap: pretty; }

/* жълтият маркер под важната фраза */
.mh-mark { font-weight: 700; color: var(--mh-ink); background: linear-gradient(transparent 58%, var(--mh-marker) 58%); }

/* звездите на отзивите: тъмнозелени */
.mh-stars { font-size: 19px; line-height: 1; letter-spacing: 2px; color: var(--mh-green-d); }

/* (i) с пулс: подсказва „кликни“ само на първото; спри го (.is-seen) след първото докосване */
.mh-i { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--mh-ink); border-radius: 50%; background: var(--mh-sheet);
  font: 700 14px/1 var(--mh-f-body); color: var(--mh-ink); }
.mh-i::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--mh-red); border-radius: 50%; opacity: 0; pointer-events: none; }
.mh-i.is-hint:not(.is-seen)::after { animation: mh-ping 2.6s var(--mh-ease-out) .9s infinite; }

/* ===================== движението ===================== */
@keyframes mh-ping { 0% { opacity: .85; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(2.15); } }
@keyframes mh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 70% { transform: scale(.985); } 100% { transform: scale(1); } }   /* печатът „тупва“ */
@keyframes mh-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mh-pop { animation: mh-pop .5s var(--mh-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .mh-grain::after { animation: none; }
  .mh-i.is-hint:not(.is-seen)::after { animation: none; opacity: 1; transform: none; }
  .mh-pop { animation: none; }
  .mh-btn { transition: background-color .15s ease, color .15s ease; }
}