/* ===== 7К Казино · шаблон «zine» · панк-зин / вырезки-коллаж ===== */
:root{
  --acc:#33d6aa;        /* ризо-красный маркер */
  --acc2:#ff8fb1;       /* хайлайтер-жёлтый */
  --ink:#161310;        /* типографская чернота */
  --paper:#f2efe6;      /* бумажный фон */
  --paper2:#e8e3d5;     /* тон плотнее */
  --card:#fbf9f2;       /* белая вырезка */
  --line:#161310;       /* контур */
  --mut:#6f685c;        /* приглушённый текст */
  --tape:rgba(255,210,30,.62);
  --shadow:6px 8px 0 rgba(22,19,16,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.zn{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  /* лёгкий бумажный шум/пятно */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(229,55,42,.05), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(22,19,16,.05), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.zn h1,.zn h2,.zn h3,.zn h4{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em}
.zn a{color:inherit}
.zn img{max-width:100%}
.zn-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:200}
.zn-skip:focus{left:8px;top:8px}
.zn-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---- скотч (переиспользуемый псевдоэлемент) ---- */
.zn-tape::before,.zn-tape::after{
  content:"";position:absolute;width:88px;height:26px;
  background:var(--tape);
  box-shadow:0 1px 2px rgba(22,19,16,.18);
  z-index:3;
}
.zn-tape::before{top:-13px;left:24px;transform:rotate(-6deg)}
.zn-tape::after{top:-11px;right:24px;transform:rotate(5deg)}

/* маркерное подчёркивание */
.zn-mark{background:linear-gradient(180deg,transparent 58%,var(--acc2) 58%,var(--acc2) 92%,transparent 92%);padding:0 .1em}
.zn-mark--r{background:linear-gradient(180deg,transparent 58%,rgba(229,55,42,.5) 58%,rgba(229,55,42,.5) 92%,transparent 92%)}
.zn-bb{font-weight:700}

/* ===== верхний бар ===== */
.zn-bar{
  position:sticky;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  border-bottom:4px solid var(--acc);
}
.zn-bar__in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px}
.zn-word{display:flex;align-items:center;gap:10px;text-decoration:none}
.zn-word__k{
  font-family:"Archivo Black",sans-serif;background:var(--acc2);color:var(--ink);
  padding:4px 9px;border:2px solid var(--paper);transform:rotate(-3deg);display:inline-block;font-size:18px;
}
.zn-word__t{font-family:"Archivo Black",sans-serif;font-size:15px;letter-spacing:.02em}
.zn-word__t small{display:block;font-family:"Space Mono",monospace;font-weight:400;font-size:10px;color:var(--acc2);letter-spacing:.14em}
.zn-nav{display:flex;gap:16px;margin-left:auto;font-size:13px}
.zn-nav a{text-decoration:none;opacity:.85}
.zn-nav a:hover{opacity:1;color:var(--acc2)}
.zn-cta{
  display:inline-block;text-decoration:none;font-family:"Archivo Black",sans-serif;
  background:var(--acc);color:var(--paper);padding:10px 18px;border:2px solid var(--paper);
  transform:rotate(-1.5deg);transition:transform .12s;white-space:nowrap;
}
.zn-cta:hover{transform:rotate(1deg) scale(1.03)}
.zn-cta--sm{padding:8px 14px;font-size:13px;margin-left:8px}
.zn-cta--ink{background:var(--ink);color:var(--acc2);border-color:var(--ink)}
.zn-cta--big{font-size:19px;padding:15px 26px;transform:rotate(-1deg)}
.zn-cta--ghost{background:transparent;color:var(--ink);border:2px dashed var(--ink)}

/* бегущая лента вырезок */
.zn-strip{background:var(--acc2);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap}
.zn-strip__t{display:inline-block;padding:7px 0;animation:zn-roll 26s linear infinite;font-size:13px;font-weight:700}
.zn-strip__t span{padding:0 22px}
.zn-strip__t .zn-hl{color:var(--acc)}
@keyframes zn-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.zn-strip__t{animation:none}}

/* ===== секции ===== */
.zn-sec{padding:52px 0}
.zn-badge{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:5px 12px;transform:rotate(-1.5deg);margin-bottom:16px;
}
.zn-h2{font-size:clamp(26px,4.6vw,44px);max-width:20ch;margin-bottom:14px}
.zn-lead{max-width:64ch;color:var(--ink);margin:0 0 26px}
.zn-lead--mut{color:var(--mut)}

/* ===== hero ===== */
.zn-hero{padding:46px 0 30px}
.zn-hero__grid{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;align-items:start}
.zn-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:700;margin:0 0 12px}
.zn-h1{font-size:clamp(34px,6.2vw,68px);line-height:.98;margin-bottom:20px}
.zn-h1 em{font-style:normal;color:var(--acc)}
.zn-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 8px}
.zn-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.zn-kpi{
  position:relative;background:var(--card);border:2px solid var(--ink);padding:14px 12px;
  box-shadow:var(--shadow);
}
.zn-kpi:nth-child(odd){transform:rotate(-1.6deg)}
.zn-kpi:nth-child(even){transform:rotate(1.4deg)}
.zn-kpi__n{font-family:"Archivo Black",sans-serif;font-size:24px;color:var(--acc);display:block}
.zn-kpi__l{font-size:11px;color:var(--mut);letter-spacing:.06em}
/* коллаж-арт справа */
.zn-collage{position:relative;min-height:320px}
.zn-scrap{
  position:absolute;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);
  padding:14px 16px;
}
.zn-scrap--1{top:0;left:0;right:38px;transform:rotate(-3deg);background:var(--acc);color:var(--paper);border-color:var(--ink)}
.zn-scrap__big{font-family:"Archivo Black",sans-serif;font-size:22px;display:block;font-weight:400}
.zn-scrap--2{top:118px;left:34px;right:0;transform:rotate(2.4deg)}
.zn-scrap--3{top:236px;left:0;right:64px;transform:rotate(-1.6deg);background:var(--acc2)}
.zn-scrap small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.8}
.zn-scrap p{margin:4px 0 0;font-size:13px;line-height:1.4}

/* ===== welcome — 3 карточки ===== */
.zn-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.zn-deal{
  position:relative;background:var(--card);border:2px solid var(--ink);padding:26px 20px 22px;
  box-shadow:var(--shadow);
}
.zn-deal:nth-child(1){transform:rotate(-1.8deg)}
.zn-deal:nth-child(2){transform:rotate(1deg)}
.zn-deal:nth-child(3){transform:rotate(-.8deg)}
.zn-deal__pct{font-family:"Archivo Black",sans-serif;font-size:44px;color:var(--acc);line-height:1}
.zn-deal__step{position:absolute;top:-12px;right:14px;background:var(--ink);color:var(--acc2);font-size:11px;font-weight:700;padding:4px 9px;transform:rotate(4deg);letter-spacing:.1em}
.zn-deal h3{font-size:19px;margin:8px 0 6px}
.zn-deal p{font-size:13px;color:var(--mut);margin:0}
.zn-deal__cap{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;border-bottom:3px solid var(--acc2)}

/* ===== каталог ===== */
.zn-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.zn-slot{
  position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);
  overflow:hidden;
}
.zn-slot:nth-child(3n+1){transform:rotate(-1.3deg)}
.zn-slot:nth-child(3n+2){transform:rotate(.8deg)}
.zn-slot:nth-child(3n){transform:rotate(-.5deg)}
.zn-slot__cover{
  height:118px;display:flex;align-items:flex-end;padding:12px;
  font-family:"Archivo Black",sans-serif;color:var(--paper);font-size:20px;
  border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(45deg,var(--ink) 0 10px,#2a2621 10px 20px);
}
.zn-slot:nth-child(2) .zn-slot__cover{background:repeating-linear-gradient(45deg,var(--acc) 0 10px,#c22b21 10px 20px)}
.zn-slot:nth-child(4) .zn-slot__cover{background:repeating-linear-gradient(45deg,#2a4a3a 0 10px,#1f382c 10px 20px)}
.zn-slot:nth-child(6) .zn-slot__cover{background:repeating-linear-gradient(45deg,#3a2a4a 0 10px,#2c1f38 10px 20px)}
.zn-slot__b{padding:14px}
.zn-slot__b h3{font-size:16px;margin:0 0 4px}
.zn-slot__meta{font-size:12px;color:var(--mut);margin:0 0 10px}
.zn-rtp{background:var(--acc2);color:var(--ink);font-weight:700;padding:1px 6px}
.zn-slot__go{display:inline-block;text-decoration:none;font-weight:700;font-size:13px;border:2px solid var(--ink);padding:6px 14px;background:var(--paper)}
.zn-slot__go:hover{background:var(--acc);color:var(--paper)}

/* ===== VIP лестница ===== */
.zn-vip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.zn-tier{
  background:var(--card);border:2px solid var(--ink);padding:16px 12px;text-align:center;box-shadow:var(--shadow);
}
.zn-tier:nth-child(odd){transform:rotate(-1.5deg)}
.zn-tier:nth-child(even){transform:rotate(1.5deg)}
.zn-tier--top{background:var(--ink);color:var(--paper)}
.zn-tier__lvl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.zn-tier--top .zn-tier__lvl{color:var(--acc2)}
.zn-tier__name{font-family:"Archivo Black",sans-serif;font-size:16px;margin:4px 0 8px}
.zn-tier__cb{font-family:"Archivo Black",sans-serif;font-size:30px;color:var(--acc)}
.zn-tier--top .zn-tier__cb{color:var(--acc2)}
.zn-tier__cb small{font-size:14px}

/* ===== live ===== */
.zn-live{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.zn-table{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:0 0 18px}
.zn-table:nth-child(1){transform:rotate(-1.2deg)}
.zn-table:nth-child(2){transform:rotate(1deg)}
.zn-table:nth-child(3){transform:rotate(-.6deg)}
.zn-table__cover{height:130px;display:flex;align-items:center;justify-content:center;font-family:"Archivo Black",sans-serif;font-size:22px;color:var(--paper);background:var(--ink);border-bottom:2px solid var(--ink)}
.zn-table:nth-child(2) .zn-table__cover{background:var(--acc)}
.zn-live__on{position:absolute;top:10px;left:10px;background:var(--acc2);color:var(--ink);font-size:11px;font-weight:700;padding:3px 9px;letter-spacing:.1em}
.zn-live__on::before{content:"●";color:var(--acc);margin-right:5px}
.zn-table h3{font-size:18px;margin:14px 16px 6px}
.zn-table p{font-size:13px;color:var(--mut);margin:0 16px}
.zn-table__m{margin-top:8px !important;font-weight:700;color:var(--ink) !important}

/* ===== касса — таблица ===== */
.zn-tablewrap{overflow-x:auto;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--card)}
.zn-cash{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.zn-cash th,.zn-cash td{padding:13px 16px;text-align:left;border-bottom:1px dashed var(--ink)}
.zn-cash thead th{background:var(--ink);color:var(--paper);font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.06em;border-bottom:none}
.zn-cash tbody tr:last-child td{border-bottom:none}
.zn-cash td:first-child{font-weight:700}
.zn-cash .zn-free{background:var(--acc2);color:var(--ink);font-weight:700;padding:1px 7px}

/* ===== FAQ ===== */
.zn-faq{max-width:820px}
.zn-q{background:var(--card);border:2px solid var(--ink);margin-bottom:14px;box-shadow:var(--shadow)}
.zn-q:nth-child(odd){transform:rotate(-.5deg)}
.zn-q:nth-child(even){transform:rotate(.5deg)}
.zn-q summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:"Archivo Black",sans-serif;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.zn-q summary::-webkit-details-marker{display:none}
.zn-q summary::after{content:"+";color:var(--acc);font-size:22px;line-height:1}
.zn-q[open] summary::after{content:"–"}
.zn-q p{margin:0;padding:0 18px 16px;font-size:14px;color:var(--mut)}

/* ===== заметка автора ===== */
.zn-note{
  position:relative;background:var(--card);border:2px dashed var(--ink);padding:28px 26px;
  box-shadow:var(--shadow);transform:rotate(-.5deg);max-width:860px;
}
.zn-note h2{font-size:24px;margin-bottom:12px}
.zn-note p{font-size:14px;color:var(--ink);margin:0 0 12px}
.zn-18{display:inline-block;margin-top:8px;background:var(--acc);color:var(--paper);font-family:"Archivo Black",sans-serif;padding:8px 16px;transform:rotate(-2deg);letter-spacing:.05em}

/* финальная плашка */
.zn-final{background:var(--ink);color:var(--paper);text-align:center;padding:56px 20px;position:relative}
.zn-final h2{font-size:clamp(26px,5vw,46px);color:var(--paper);margin-bottom:12px}
.zn-final h2 em{font-style:normal;color:var(--acc2)}
.zn-final p{color:#cfc9bd;max-width:52ch;margin:0 auto 24px}

/* бейджи-стикеры */
.zn-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.zn-sticker{
  background:var(--card);border:2px solid var(--ink);padding:8px 14px;font-size:12px;font-weight:700;
  box-shadow:3px 4px 0 rgba(22,19,16,.14);
}
.zn-sticker:nth-child(even){transform:rotate(-2deg)}
.zn-sticker:nth-child(odd){transform:rotate(1.5deg)}
.zn-sticker--acc{background:var(--acc);color:var(--paper)}

/* ===== футер ===== */
.zn-foot{background:var(--paper2);border-top:4px solid var(--ink);padding:44px 0 30px}
.zn-foot__top{display:grid;grid-template-columns:1.3fr 2fr;gap:36px}
.zn-foot__legal{font-size:13px;color:var(--ink);max-width:44ch;margin:14px 0 0}
.zn-foot__legal .zn-em{font-weight:700}
.zn-foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.zn-foot__cols h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.zn-foot__cols ul{list-style:none;margin:0;padding:0;font-size:13px;color:var(--mut)}
.zn-foot__cols li{padding:3px 0}
.zn-foot__bottom{border-top:1px dashed var(--ink);margin-top:30px;padding-top:18px;font-size:12px;color:var(--mut);display:grid;gap:8px}
.zn-lic{display:inline-block;background:var(--ink);color:var(--acc2);font-weight:700;padding:6px 12px;transform:rotate(-1.5deg);margin-bottom:12px}

/* ===== адаптив ===== */
@media (max-width:900px){
  .zn-hero__grid{grid-template-columns:1fr}
  .zn-collage{min-height:300px;margin-top:10px}
  .zn-cols3,.zn-grid6,.zn-live{grid-template-columns:1fr}
  .zn-vip{grid-template-columns:repeat(3,1fr)}
  .zn-foot__top{grid-template-columns:1fr}
  .zn-nav{display:none}
}
@media (max-width:560px){
  .zn-kpis{grid-template-columns:repeat(2,1fr)}
  .zn-vip{grid-template-columns:repeat(2,1fr)}
  .zn-foot__cols{grid-template-columns:1fr}
  .zn-bar__in{gap:8px}
  .zn-cta--sm{margin-left:auto}
}