/*
Theme Name: Анкетка Ru
Theme URI: https://anketka.info/
Description: Тема сайта anketka.info о панели платных опросов «Анкетка». Язык дизайна «Коллаж».
Version: 1.0.9
Author: Анкетка Ru
Text Domain: anketka-theme
*/

/* ── Токены ─────────────────────────────────────────────── */
:root{
  --blue:#3063F0;--blue-d:#1E4BC8;--blue-dd:#1638A0;--blue-l:#E3EAFE;
  --violet:#8A4CE0;--violet-d:#5A1FB8;--violet-l:#F1E8FD;
  --green:#2E7A00;--green-l:#E8F4DF;
  --ink:#141726;--ink2:#3B4058;--muted:#555B74;
  --news:#EDF2F6;--paper:#FAFBFD;--line:#C6D0DE;--line2:#DDE4EE;
  --f-disp:"Anketka Display","Anketka Text",Arial Narrow,sans-serif;
  --f-text:"Anketka Text",Arial,sans-serif;
  --f-mono:"Anketka Mono",ui-monospace,monospace;
  --wrap:1480px;--gut:clamp(16px,3vw,40px);
  --cut:14px;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.25rem;--s5:3.5rem;--s6:5rem;
}

/* ── База ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--blue) var(--news)}
body{margin:0;background:var(--news);color:var(--ink);font:400 18px/1.6 var(--f-text);font-feature-settings:"lnum" 1;overflow-x:clip;caret-color:var(--blue)}
::selection{background:var(--violet);color:#fff}
img,svg{max-width:100%}
a{color:var(--blue-d);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--violet-d)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
h1,h2,h3{color:var(--ink);text-wrap:balance}
h2{font:700 clamp(34px,4.2vw,56px)/.95 var(--f-disp);letter-spacing:.01em;margin:0 0 var(--s3)}
h3{font:700 20px/1.3 var(--f-text);margin:0 0 .4rem}
p{margin:0 0 1rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:50;background:#fff;padding:8px 12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums}
.nb{white-space:nowrap}

/* ── Кнопки: срезанный угол — единственная форма на сайте ── */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--blue);color:#fff;text-decoration:none;font:700 24px/1 var(--f-disp);letter-spacing:.05em;padding:15px 24px 14px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background .2s}
.btn:hover{background:var(--blue-dd);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .ico{width:22px;height:22px}
.btn--sm{font-size:20px;padding:11px 16px 10px;gap:8px;--cut:10px}
.btn--sm .ico{width:18px;height:18px}
.link-alt{font:700 21px/1 var(--f-disp);letter-spacing:.05em;color:var(--violet-d);text-underline-offset:6px;text-decoration-thickness:2px}
.link-alt:hover{color:var(--blue-d)}
.acts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}

/* ── Шапка ─────────────────────────────────────────────── */
.top{position:relative;z-index:20;background:var(--news)}
.top__in{display:flex;align-items:center;gap:24px;min-height:74px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;flex:0 1 auto}
.mark svg{width:36px;height:36px;flex:none}
.mark__t{font:700 30px/1 var(--f-disp);letter-spacing:.02em;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mark__t em{font-style:normal;color:var(--ink)}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap}
.nav a{font:500 21px/1 var(--f-disp);letter-spacing:.06em;color:var(--ink2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--violet-d)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--violet)}
.top__cta{margin-left:auto;flex:none}
.top__cta .btn__short{display:none}
.burger{display:none;flex:none;width:46px;height:46px;border:2px solid var(--ink);background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger .ico{width:24px;height:24px}
.burger .ico--x{display:none}
.menu-open .burger .ico--menu{display:none}
.menu-open .burger .ico--x{display:block}
.drawer{display:none}

/* ── Первый экран главной: коллаж ───────────────────────── */
.stage{position:relative;overflow:hidden;padding-bottom:var(--s5)}
.stage__px{position:absolute;right:-70px;top:-235px;width:min(50vw,760px);height:auto;aspect-ratio:1;z-index:0;pointer-events:none}
.stage__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4);align-items:end}
.ramp{padding:var(--s4) 0 0 6px}
.ramp h1{margin:0;transform:rotate(-5deg);transform-origin:0 50%;font:700 clamp(56px,7vw,108px)/.9 var(--f-disp);letter-spacing:.005em}
.ramp h1 .r2{display:block;color:var(--blue);white-space:nowrap}
.ramp__rule{height:2px;background:var(--violet);width:min(620px,70%);transform:rotate(-5deg);transform-origin:0 0;margin:30px 0 0}
.stage__lead{max-width:44ch;font-size:19px;color:var(--ink2);margin:var(--s4) 0 var(--s3)}
.stage__lead b{color:var(--ink)}
.facts{display:flex;flex-wrap:wrap;margin-top:var(--s4);border-top:2px solid var(--ink);max-width:700px}
.facts div{padding:12px 22px 0 0;margin-right:22px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0;margin-right:0}
.facts b{display:block;font:700 44px/1 var(--f-disp);color:var(--blue)}
.facts span{font:400 13px/1.4 var(--f-mono);color:var(--muted)}

/* Три слоя наград: наведение или фокус поднимает слой */
.layers{position:relative;min-height:440px}
.ly{position:absolute;width:74%;padding:18px 20px 18px;background:var(--paper);border:2px solid var(--ink);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;box-shadow:0 18px 30px -24px rgba(20,23,38,.55)}
.ly h2,.ly h3{font:700 44px/.9 var(--f-disp);letter-spacing:.02em;margin:0 0 8px}
.ly p{margin:0;font-size:16px;line-height:1.45}
.ly__sum{position:absolute;right:16px;top:14px;font:600 13px/1 var(--f-mono);letter-spacing:.02em}
.ly--rub{left:0;top:0;transform:rotate(-6deg);background:var(--blue);border-color:var(--blue-dd);color:#fff;z-index:3}
.ly--rub h2,.ly--rub h3,.ly--rub p{color:#fff}
.ly--coin{left:16%;top:146px;transform:rotate(3deg);background:var(--violet-l);border-color:var(--violet);z-index:2}
.ly--coin h2,.ly--coin h3{color:var(--violet-d)}
.ly--dobro{left:26%;top:292px;transform:rotate(-2deg);border-color:var(--green);z-index:1}
.ly--dobro h2,.ly--dobro h3{color:var(--green)}
.ly:hover,.ly:focus-within,.ly.is-up{z-index:5;transform:rotate(0) translateY(-8px);box-shadow:0 26px 40px -24px rgba(20,23,38,.6)}
.ly a{color:inherit}

/* ── Шапка внутренней страницы ──────────────────────────── */
.phead{position:relative;overflow:hidden;padding:var(--s3) 0 var(--s5)}
.phead__px{position:absolute;right:-40px;top:-40px;width:min(40vw,560px);aspect-ratio:1;z-index:0;opacity:.9;pointer-events:none}
.phead__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4);align-items:end}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 13px/1.4 var(--f-mono);color:var(--muted);margin-bottom:var(--s4)}
.crumbs a{color:var(--muted)}
.crumbs .ico{width:14px;height:14px}
.phead h1{margin:0 0 0 4px;transform:rotate(-3deg);transform-origin:0 50%;font:700 clamp(44px,4.8vw,76px)/.92 var(--f-disp);letter-spacing:.005em;max-width:21ch}
.phead .ramp__rule{transform:rotate(-3deg);margin-top:22px;width:min(520px,60%)}
.phead .lead{font-size:19px;color:var(--ink2);max-width:52ch;margin:var(--s4) 0 var(--s3)}
.slips{display:grid;gap:12px;justify-items:start}
.slip{display:flex;flex-direction:column-reverse;background:var(--paper);border:2px solid var(--ink);padding:12px 16px;max-width:100%;box-shadow:0 14px 24px -20px rgba(20,23,38,.55)}
.slip:nth-child(1){transform:rotate(-2deg)}
.slip:nth-child(2){transform:rotate(1.5deg);margin-left:24px;border-color:var(--violet)}
.slip:nth-child(3){transform:rotate(-1deg);margin-left:8px;border-color:var(--blue)}
.slip dt{font:400 13px/1.3 var(--f-mono);color:var(--muted);margin:6px 0 0}
.slip dd{margin:0;font:700 30px/1 var(--f-disp);letter-spacing:.02em;color:var(--ink)}

/* ── Секции ────────────────────────────────────────────── */
.band{padding:var(--s6) 0}
.band--paper{background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.band--blue{background:var(--blue);color:#fff}
.band--blue h2,.band--blue h3,.band--blue a{color:#fff}
.band:not(.band--paper):not(.band--blue) + .band:not(.band--paper):not(.band--blue){padding-top:var(--s2)}
.prose{max-width:68ch}
.prose h2{margin-top:var(--s5)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s3)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--violet)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.aside-note{border-left:0;border-top:2px solid var(--violet);padding-top:12px;font-size:16px;color:var(--ink2)}

/* Лента шагов: наклонная полоса с кадрами */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid var(--ink);background:var(--paper);margin:var(--s2) 0}
.strip li{list-style:none;padding:20px 20px 22px;border-right:2px solid var(--ink)}
.strip li:last-child{border-right:0}
.strip ol{display:contents}
.strip b{display:block;font:700 34px/1 var(--f-disp);letter-spacing:.02em;color:var(--blue);margin-bottom:8px}
.strip span{font-size:16px;line-height:1.45;color:var(--ink2)}
.strip li:nth-child(3) b{color:var(--ink)}

/* Деньги: строки «сумма — что за ней» */
.sums{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.sums li{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:var(--s3);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.sums b{font:700 clamp(40px,4.4vw,64px)/.95 var(--f-disp);color:var(--blue);white-space:nowrap}
.sums li:nth-child(even) b{color:var(--ink)}
.sums span{font-size:17px;color:var(--ink2);max-width:62ch}
.sums strong{color:var(--ink)}

/* Таблица */
.tbl{width:100%;max-width:900px;border-collapse:collapse;font-size:16.5px;background:var(--paper);border:2px solid var(--ink)}
.tbl th,.tbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl th{font:700 20px/1.1 var(--f-disp);letter-spacing:.04em;background:var(--blue-l);color:var(--ink)}
.tbl td b{display:block;font-size:17px}
.tbl .btn{white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.tbl--2{max-width:760px}

/* Оценка по критериям */
.grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s4);align-items:start}
.grade__total{border:2px solid var(--ink);background:var(--paper);padding:20px 22px;transform:rotate(-2deg)}
.grade__n{display:block;font:700 96px/.9 var(--f-disp);color:var(--blue)}
.grade__of{display:block;font:400 13px/1.4 var(--f-mono);color:var(--muted);margin-top:8px}
.grade__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.grade__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.grade__name{font-weight:700}
.grade__v{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--f-mono)}
.grade__d{grid-column:1 / -1;font-size:15.5px;color:var(--ink2)}
.stars{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.stars .ico{width:16px;height:16px;fill:currentColor;stroke:none}
.stars__bg{color:var(--line)}
.stars__fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--violet)}

/* Отзывы */
.revs{list-style:none;margin:0;padding:0;columns:2 360px;column-gap:var(--s3)}
.rev{break-inside:avoid;background:var(--paper);border:2px solid var(--ink);padding:18px 20px;margin:0 0 var(--s3)}
.rev:nth-child(3n+2){border-color:var(--violet)}
.rev:nth-child(3n){border-color:var(--blue)}
.rev__top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 13px/1.3 var(--f-mono);color:var(--muted);margin-bottom:10px}
.rev h3{font-size:18px}
.rev p{font-size:16.5px;margin:0 0 .6rem}
.rev__who{font-weight:700;margin:0}

/* FAQ */
.faq{max-width:900px}
.qa{border-top:2px solid var(--ink)}
.qa:last-child{border-bottom:2px solid var(--ink)}
.qa summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;cursor:pointer;list-style:none;font-weight:700;font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa__ico{transition:transform .25s;color:var(--violet-d)}
.qa[open] .qa__ico{transform:rotate(180deg)}
.qa__a{padding:0 0 18px;color:var(--ink2);max-width:70ch}
.qa__a p{margin:0}

/* Ссылки на разделы */
.more{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5);border-top:2px solid var(--ink)}
.more li{min-width:0;border-bottom:1px solid var(--line)}
.more a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:14px 0;text-decoration:none;color:var(--ink)}
.more a:hover strong{color:var(--violet-d)}

.more strong{font:700 30px/1 var(--f-disp);letter-spacing:.03em;color:var(--blue)}
.more small{font-size:15px;color:var(--ink2)}

/* Контакты */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.contact div{border:2px solid var(--ink);background:var(--paper);padding:18px 20px}
.contact dt{font:400 13px/1.3 var(--f-mono);color:var(--muted);margin-bottom:6px}
.contact dd{margin:0;font-size:17px}
.req{font:400 14.5px/1.6 var(--f-mono);color:var(--ink2);background:var(--paper);border:2px solid var(--line);padding:16px 18px}
.disclaim{font-size:15px;color:var(--muted);max-width:70ch}

/* Финальный блок */
.close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.close h2{margin-bottom:10px}
.close p{max-width:56ch;margin:0;color:#fff}
.band--blue .btn{background:#fff;color:var(--blue-dd)}
.band--blue .btn:hover{background:var(--violet-l);color:var(--blue-dd)}

/* ── Подвал ────────────────────────────────────────────── */
.foot{background:var(--ink);color:#C9CEDF;padding:var(--s5) 0 var(--s4);font-size:15.5px}
.foot a{color:#fff}
.foot a:hover{color:#D8C4FA}
.foot__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:var(--s4)}
.foot .mark__t{color:#fff}
.foot .mark__t em{color:#B9C8FF}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot__cta{margin-top:var(--s4)}
.foot .btn{color:#fff;background:var(--blue)}
.foot .btn:hover{color:#fff;background:var(--blue-d)}
.foot__legal{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid #3A3F57;font-size:14px;color:#A9B0C8}
.foot__legal p{margin:0 0 .5rem;max-width:62ch}

/* 404 */
.lost{padding:var(--s5) 0 var(--s6)}
.lost__code{font:700 clamp(120px,20vw,260px)/.8 var(--f-disp);color:var(--blue);transform:rotate(-6deg);transform-origin:0 100%;display:block;margin:0 0 var(--s5)}

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:inline-flex}
  .top__in{gap:14px}
  .drawer{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:10px 0 18px}
  .menu-open .drawer{display:block}
  .drawer a{display:block;padding:12px 0;font:700 26px/1 var(--f-disp);letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
  .drawer a[aria-current="page"]{color:var(--violet-d)}
}
@media (max-width:980px){
  .stage__grid,.phead__in,.grade,.two,.close{grid-template-columns:minmax(0,1fr)}
  .stage__px{width:92vw;right:-34vw;top:-10px;opacity:.5}
  .layers{min-height:430px;margin-top:var(--s2)}
  .ly{width:84%}.ly--coin{left:8%}.ly--dobro{left:15%}
  .phead__px{width:70vw;right:-30vw;opacity:.45}
  .slips{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));justify-items:stretch}
  .slip:nth-child(n){margin-left:0}
 .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));transform:none}
  .strip li:nth-child(2){border-right:0}
  .strip li:nth-child(-n+2){border-bottom:2px solid var(--ink)}
  .grade__total{max-width:340px}
}
@media (max-width:600px){
  body{font-size:17px}
  .top__in{min-height:64px;gap:10px}
  .mark svg{width:30px;height:30px}
  .mark__t{font-size:26px}
  .top__cta .btn__full{display:none}
  .top__cta .btn__short{display:inline}
  .btn{font-size:22px}
  .btn--sm{font-size:18px;padding:10px 12px 9px}
  .burger{width:42px;height:42px}
  .ramp{padding-top:var(--s3)}
  .ramp h1{transform:rotate(-3deg);font-size:clamp(46px,14vw,64px)}
  .ramp__rule{transform:rotate(-3deg)}
  .phead h1{transform:rotate(-2deg);font-size:clamp(40px,11vw,56px)}
  .phead .ramp__rule{transform:rotate(-2deg)}
  .stage__lead,.phead .lead{font-size:17px;margin-top:var(--s3)}
  .facts b{font-size:34px}
  .facts div{padding-right:12px;margin-right:12px}
  .layers{min-height:0;display:grid;gap:12px}
  .ly{position:relative;left:auto;top:auto;width:auto;transform:none}
  .ly--rub{transform:rotate(-1.5deg)}.ly--coin{transform:rotate(1deg)}.ly--dobro{transform:rotate(-.5deg)}
  .ly h2,.ly h3{font-size:36px}
  .band{padding:var(--s5) 0}
  .sums li{grid-template-columns:minmax(0,1fr);gap:4px}
  .contact,.foot__grid{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip li{border-right:0;border-bottom:2px solid var(--ink)}
  .strip li:last-child{border-bottom:0}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-bottom:2px solid var(--ink)}
  .tbl td{border:0;padding:8px 14px}
  .tbl td::before{content:attr(data-label);display:block;font:400 12.5px/1.3 var(--f-mono);color:var(--muted);margin-bottom:2px}
  .grade__n{font-size:78px}
}
@media (max-width:380px){
  .mark svg{display:none}
  .top__cta .btn{padding:10px 10px 9px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── Мелочи без инлайна ─────────────────────────────────── */
.after{margin-top:var(--s3)}
.strip--r{transform:none}
.two .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.two .strip li:nth-child(2){border-right:0}
.two .strip li:nth-child(-n+2){border-bottom:2px solid var(--ink)}
.foot__about{margin:14px 0 0;max-width:44ch}
.lost__h{font:700 clamp(40px,5vw,72px)/.95 var(--f-disp);margin:0 0 var(--s3);max-width:26ch}
.lost p{max-width:56ch}
@media (max-width:980px){.strip--r{transform:none}}@media (max-width:600px){
  .two .strip{grid-template-columns:minmax(0,1fr)}
  .two .strip li:nth-child(n){border-right:0;border-bottom:2px solid var(--ink)}
  .two .strip li:last-child{border-bottom:0}
}@media (max-width:600px){
  .stage__px{opacity:.22}
  .phead__px{opacity:.25}
}@media (max-width:360px){.mark__t{font-size:22px}.top__in{gap:8px}}
/* Коллаж ниже первого экрана: наклон только у заголовков секций; линейка H1 уходит под слои */
.band h2{transform:rotate(-1.5deg);transform-origin:0 50%}
.ly h2{transform:none}
@media (min-width:981px){
  .ramp__rule{position:relative;z-index:0;width:min(1000px,70vw)}
  .layers{z-index:2}
}
@media (max-width:980px){.more{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .stage__px{opacity:.4;width:78vw;right:-16vw;top:-70px}
  .layers{gap:0}
  .ly + .ly{margin-top:-16px;padding-top:34px}
  .ly--rub{transform:rotate(-3.5deg)}.ly--coin{transform:rotate(3deg)}.ly--dobro{transform:rotate(-2.5deg)}
  .ly:hover,.ly:focus-within,.ly.is-up{transform:rotate(0) translateY(-6px)}
}