/* ===== 7К · 7k344.lol · шаблон «zine» · коллаж-вырезки · hue 151 / 331 ===== */
:root{
  --acc:hsl(151 78% 26%);        /* хвойный зелёный — маркер тиража */
  --acc-d:hsl(151 80% 19%);
  --acc2:hsl(331 84% 60%);       /* дополнительный +180° — розовый хайлайтер */
  --acc2-lt:hsl(331 90% 84%);
  --ink:hsl(151 28% 10%);
  --paper:hsl(151 22% 95%);
  --paper2:hsl(151 18% 89%);
  --card:hsl(150 30% 98%);
  --mut:hsl(151 13% 35%);
  --tape:hsl(331 90% 80% / .62);
  --shadow:6px 8px 0 hsl(151 28% 10% / .16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.zn{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Ubuntu",Segoe UI,Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 16% 10%, hsl(151 78% 26% / .07), transparent 40%),
    radial-gradient(circle at 84% 76%, hsl(331 84% 60% / .07), transparent 44%),
    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:"Audiowide",Impact,sans-serif;font-weight:400;line-height:1.12;margin:0;letter-spacing:-.005em}
.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 hsl(151 28% 10% / .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 56%,var(--acc2-lt) 56%,var(--acc2-lt) 93%,transparent 93%);padding:0 .1em}
.zn-mark--g{background:linear-gradient(180deg,transparent 56%,hsl(151 60% 60% / .48) 56%,hsl(151 60% 60% / .48) 93%,transparent 93%)}
.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:9px 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:"Audiowide",sans-serif;background:var(--acc2);color:var(--ink);
  padding:3px 9px;border:2px solid var(--paper);transform:rotate(-3deg);display:inline-block;font-size:16px;
}
.zn-word__t{font-family:"Audiowide",sans-serif;font-size:13px;letter-spacing:.01em}
.zn-word__t small{display:block;font-family:"Ubuntu",sans-serif;font-weight:400;font-size:10px;color:var(--acc2-lt);letter-spacing:.14em}
.zn-nav{display:flex;gap:15px;margin-left:auto;font-size:13.5px}
.zn-nav a{text-decoration:none;opacity:.85}
.zn-nav a:hover{opacity:1;color:var(--acc2-lt)}
.zn-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;text-decoration:none;
  font-family:"Audiowide",sans-serif;font-size:14px;
  background:var(--acc);color:#fff;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:12.5px;margin-left:8px}
.zn-cta--ink{background:var(--acc2);color:var(--ink);border-color:var(--acc2)}
.zn-cta--big{font-size:17px;padding:15px 26px;transform:rotate(-1deg)}
.zn-cta--ghost{background:transparent;color:var(--ink);border:2px dashed var(--ink)}

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

/* ===== секции ===== */
.zn-sec{padding:50px 0}
.zn-badge{
  display:inline-block;font-size:11.5px;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(21px,3.3vw,33px);max-width:22ch;margin-bottom:14px;line-height:1.16}
.zn-lead{max-width:66ch;color:var(--ink);margin:0 0 26px}
.zn-lead--mut{color:var(--mut)}
.zn-after{max-width:66ch;color:var(--mut);font-size:14.5px;margin:22px 0 0}

/* ===== hero ===== */
.zn-hero{padding:44px 0 26px}
.zn-hero__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:34px;align-items:start}
.zn-kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-d);font-weight:700;margin:0 0 12px}
.zn-h1{font-size:clamp(25px,3.9vw,42px);line-height:1.12;margin-bottom:18px}
.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:"Audiowide",sans-serif;font-size:20px;color:var(--acc);display:block;line-height:1.2}
.zn-kpi__l{font-size:11.5px;color:var(--mut);letter-spacing:.03em}
.zn-collage{position:relative;min-height:330px}
.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:#fff;border-color:var(--ink)}
.zn-scrap__big{font-family:"Audiowide",sans-serif;font-size:19px;display:block;margin-top:2px}
.zn-scrap--2{top:124px;left:34px;right:0;transform:rotate(2.4deg)}
.zn-scrap--3{top:242px;left:0;right:64px;transform:rotate(-1.6deg);background:var(--acc2-lt)}
.zn-scrap small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.85}
.zn-scrap p{margin:4px 0 0;font-size:13px;line-height:1.45}

/* ===== пакет ===== */
.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:"Audiowide",sans-serif;font-size:34px;color:var(--acc);line-height:1;display:block}
.zn-deal__step{position:absolute;top:-12px;right:14px;background:var(--ink);color:var(--acc2-lt);font-size:11px;font-weight:700;padding:4px 9px;transform:rotate(4deg);letter-spacing:.1em}
.zn-deal h3{font-size:16px;margin:10px 0 6px}
.zn-deal p{font-size:13.5px;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:112px;display:flex;align-items:flex-end;padding:12px;
  font-family:"Audiowide",sans-serif;color:#fff;font-size:15px;line-height:1.15;
  border-bottom:2px solid var(--ink);
  background:repeating-linear-gradient(45deg,var(--ink) 0 10px,hsl(151 24% 17%) 10px 20px);
}
.zn-slot:nth-child(2) .zn-slot__cover{background:repeating-linear-gradient(45deg,var(--acc) 0 10px,var(--acc-d) 10px 20px)}
.zn-slot:nth-child(4) .zn-slot__cover{background:repeating-linear-gradient(45deg,hsl(331 40% 30%) 0 10px,hsl(331 45% 23%) 10px 20px)}
.zn-slot:nth-child(6) .zn-slot__cover{background:repeating-linear-gradient(45deg,hsl(151 50% 22%) 0 10px,hsl(151 60% 15%) 10px 20px)}
.zn-slot__b{padding:14px}
.zn-slot__b h3{font-size:14.5px;margin:0 0 5px}
.zn-slot__meta{font-size:12.5px;color:var(--mut);margin:0 0 10px}
.zn-rtp{background:var(--acc2-lt);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:7px 14px;background:var(--paper)}
.zn-slot__go:hover{background:var(--acc);color:#fff}

/* ===== Рубежи ===== */
.zn-vip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.zn-tier{background:var(--card);border:2px solid var(--ink);padding:16px 10px;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:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.zn-tier--top .zn-tier__lvl{color:var(--acc2-lt)}
.zn-tier__name{font-family:"Audiowide",sans-serif;font-size:13px;margin:5px 0 8px}
.zn-tier__cb{font-family:"Audiowide",sans-serif;font-size:24px;color:var(--acc)}
.zn-tier--top .zn-tier__cb{color:var(--acc2-lt)}
.zn-tier__cb small{font-size:13px}
.zn-tier__q{display:block;font-size:11px;color:var(--mut);margin-top:6px}
.zn-tier--top .zn-tier__q{color:hsl(151 12% 72%)}

/* ===== 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:122px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font-family:"Audiowide",sans-serif;font-size:17px;color:#fff;background:var(--ink);border-bottom:2px solid var(--ink)}
.zn-table:nth-child(2) .zn-table__cover{background:var(--acc)}
.zn-table:nth-child(3) .zn-table__cover{background:hsl(331 42% 28%)}
.zn-live__on{position:absolute;top:10px;left:10px;background:var(--acc2-lt);color:var(--ink);font-size:10.5px;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:15px;margin:14px 16px 6px}
.zn-table p{font-size:13.5px;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:600px;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:"Audiowide",sans-serif;font-size:11.5px;letter-spacing:.04em;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-lt);color:var(--ink);font-weight:700;padding:1px 7px}

/* ===== вход / маршрут ===== */
.zn-route{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.zn-step{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:22px 18px}
.zn-step:nth-child(odd){transform:rotate(-1deg)}
.zn-step:nth-child(even){transform:rotate(1.2deg)}
.zn-step__n{font-family:"Audiowide",sans-serif;font-size:26px;color:var(--acc2);line-height:1}
.zn-step h3{font-size:15px;margin:8px 0 6px}
.zn-step p{font-size:13.5px;color:var(--mut);margin:0}

/* ===== голоса ===== */
.zn-voices{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.zn-voice{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:var(--shadow);padding:24px 20px 20px}
.zn-voice:nth-child(odd){transform:rotate(-.9deg)}
.zn-voice:nth-child(even){transform:rotate(.9deg)}
.zn-voice__q{font-size:14.5px;margin:0 0 12px}
.zn-voice__w{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--mut);border-top:1px dashed var(--ink);padding-top:10px}
.zn-voice__c{font-weight:700;color:var(--acc-d)}

/* ===== FAQ ===== */
.zn-faq{max-width:840px}
.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:"Audiowide",sans-serif;font-size:13.5px;line-height:1.35;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:880px}
.zn-note h2{font-size:clamp(19px,2.8vw,26px);margin-bottom:12px}
.zn-note p{font-size:14.5px;color:var(--ink);margin:0 0 12px}
.zn-18{display:inline-block;margin-top:8px;background:var(--acc);color:#fff;font-family:"Audiowide",sans-serif;padding:8px 16px;transform:rotate(-2deg);letter-spacing:.05em;font-size:13px}

/* финальная плашка */
.zn-final{background:var(--ink);color:var(--paper);text-align:center;padding:54px 20px;position:relative}
.zn-final__h{font-family:"Audiowide",sans-serif;font-size:clamp(20px,3.4vw,32px);color:var(--paper);margin:0 0 12px;line-height:1.2}
.zn-final__h em{font-style:normal;color:var(--acc2-lt)}
.zn-final p{color:hsl(151 10% 78%);max-width:56ch;margin:0 auto 24px;font-size:15px}

/* стикеры */
.zn-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.zn-sticker{background:var(--card);border:2px solid var(--ink);padding:8px 14px;font-size:12.5px;font-weight:700;box-shadow:3px 4px 0 hsl(151 28% 10% / .16)}
.zn-sticker:nth-child(even){transform:rotate(-2deg)}
.zn-sticker:nth-child(odd){transform:rotate(1.5deg)}
.zn-sticker--acc{background:var(--acc);color:#fff}
.zn-sticker--acc2{background:var(--acc2-lt);color:var(--ink)}

/* ===== футер ===== */
.zn-foot{background:var(--paper2);border-top:4px solid var(--ink);padding:42px 0 28px}
.zn-foot__top{display:grid;grid-template-columns:1.3fr 2fr;gap:36px}
.zn-foot__legal{font-size:13.5px;color:var(--ink);max-width:46ch;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:12.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.zn-foot__cols ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--mut)}
.zn-foot__cols li{padding:3px 0}
.zn-foot__bottom{border-top:1px dashed var(--ink);margin-top:28px;padding-top:18px;font-size:12.5px;color:var(--mut);display:grid;gap:8px}
.zn-lic{display:inline-block;background:var(--ink);color:var(--acc2-lt);font-weight:700;padding:6px 12px;transform:rotate(-1.5deg);margin-bottom:12px;font-size:12.5px}

/* ===== адаптив ===== */
@media (max-width:980px){
  .zn-hero__grid{grid-template-columns:1fr}
  .zn-collage{min-height:310px;margin-top:12px}
  .zn-cols3,.zn-grid6,.zn-live,.zn-route{grid-template-columns:1fr}
  .zn-vip{grid-template-columns:repeat(3,1fr)}
  .zn-voices{grid-template-columns:1fr}
  .zn-foot__top{grid-template-columns:1fr}
  .zn-nav{display:none}
}
@media (max-width:560px){
  .zn-sec{padding:38px 0}
  .zn-hero{padding:26px 0 20px}
  .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;padding:8px 14px}
  .zn-word__t{font-size:11px}
  .zn-cta--sm{margin-left:auto;padding:8px 11px;font-size:11.5px}
  .zn-cta--big{font-size:15px;padding:14px 20px;width:100%}
  .zn-hero__btns{gap:10px}
  .zn-scrap{position:static;margin-bottom:14px;transform:none !important}
  .zn-collage{min-height:0}
}
