:root{
  --orange:#FF5100;
  --orange-soft:#FF9A66;
  --ink:#1E1E1E;
  --red:#DE2517;
  --paper:#FFFFFF;
  --stone:#F0EFEC;
  --stone-2:#E0DEDA;
  --muted:#6B6965;
  --muted-2:#8B8984;
  --shadow-card:0 4px 10px rgba(30,30,30,.06), 0 20px 44px -22px rgba(30,30,30,.35);
  --radius:20px;
  --wrap:720px;
  --font:"Helvetica Neue","Helvetica",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--ink);text-decoration:none}
button{font-family:inherit}
img,svg{max-width:100%}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.final :focus-visible,.sticker--ink :focus-visible,.sticker--red :focus-visible{outline-color:#fff}

/* ---------- Индекс-стикер ---------- */
.badge{
  position:fixed;top:16px;right:14px;z-index:60;
  background:var(--orange);border-radius:18px;padding:11px 15px;text-align:center;
  box-shadow:0 10px 30px -8px rgba(255,81,0,.5);transform:rotate(4deg);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.badge.pulse{animation:pulse .5s ease}
@keyframes pulse{0%{transform:rotate(4deg) scale(1)}40%{transform:rotate(2deg) scale(1.14)}100%{transform:rotate(4deg) scale(1)}}
.badge__pct{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff}
.badge__label{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-top:4px}
.badge__bar{width:72px;height:5px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden;margin-top:8px}
.badge__fill{width:0%;height:100%;border-radius:999px;background:#fff;transition:width .5s cubic-bezier(.32,.72,0,1)}

/* ---------- Общие ---------- */
.pill{display:inline-block;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pill--dark{background:var(--ink);color:#fff;transform:rotate(-2deg)}
.pill--orange{background:var(--orange);color:#fff;transform:rotate(-1.5deg)}
.pill--on-red{background:#fff;color:var(--red);letter-spacing:.1em}

.btn{display:inline-block;font-size:16px;font-weight:800;padding:15px 26px;border-radius:999px;cursor:pointer;border:none;transition:transform .15s ease;text-align:center}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(0)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 10px 26px -10px rgba(30,30,30,.45)}
.btn--dark{background:var(--ink);color:#fff}
.btn--orange{background:var(--orange);color:#fff;box-shadow:0 12px 28px -12px rgba(255,81,0,.6)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--stone-2)}
.btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}

.section{padding:56px 0}
.section__title{margin:0 0 14px;font-size:clamp(32px,8vw,50px);line-height:1.03;letter-spacing:-.035em;font-weight:800}
.section__title--sm{font-size:clamp(28px,6.5vw,42px);margin-top:16px}
.section__lead{margin:0 0 28px;font-size:16px;font-weight:600;color:var(--muted);max-width:38ch}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:#fff}
.eyebrow--muted{color:var(--muted-2)}

.sticker{border-radius:var(--radius);padding:24px 26px}
.sticker--stone{background:var(--stone)}
.sticker--ink{background:var(--ink);color:#fff;box-shadow:0 18px 40px -20px rgba(30,30,30,.5)}
.sticker--red{background:var(--red);color:#fff;box-shadow:0 24px 50px -24px rgba(222,37,23,.55)}

/* ---------- Hero ---------- */
.hero{background:var(--orange);padding:96px 0 68px;color:#fff}
.hero__kicker{margin-bottom:24px}
.pill--dark.hero__kicker{color:#fff}
.hero__title{margin:0 0 20px;font-size:clamp(68px,20vw,150px);line-height:.9;letter-spacing:-.045em;font-weight:800}
.hero__sub{margin:0 0 32px;font-size:20px;line-height:1.45;max-width:30ch;font-weight:700}

/* ---------- Миф/Факт ---------- */
.myth__myth{transform:rotate(-1deg);max-width:520px}
.myth__fact{transform:rotate(1deg);margin:18px 0 0 auto;max-width:520px}
.myth__text{margin:0;font-size:22px;line-height:1.28;font-weight:700}
.myth__text--muted{color:var(--muted-2)}
.stat{text-align:center;padding:56px 0 8px}
.stat__num{display:inline-block;transform:rotate(-2deg);font-size:clamp(96px,26vw,190px);line-height:.9;font-weight:800;letter-spacing:-.05em;color:var(--orange)}
.stat__cap{margin:14px 0 4px;font-size:19px;font-weight:700}
.stat__src{margin:0;font-size:13px;color:var(--muted-2);font-weight:500}
.microfact{margin:20px auto 0;text-align:center;max-width:34ch;font-size:15px;font-weight:600;color:var(--muted)}

/* ---------- Карточки-правила (flip) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{perspective:1400px;height:236px;cursor:pointer}
.card__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.32,.72,0,1)}
.card.flipped .card__inner{transform:rotateY(180deg)}
.card__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:space-between}
.card__front{background:#fff}
.card__back{background:var(--ink);color:#fff;transform:rotateY(180deg)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between}
.card__num{font-size:50px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--orange)}
.card__check{width:34px;height:34px;flex:none;border-radius:10px;background:var(--stone-2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:rotate(6deg);transition:background .2s ease,transform .2s ease}
.card__check svg{opacity:0;transition:opacity .18s ease}
.card__check[aria-checked="true"]{background:var(--orange)}
.card__check[aria-checked="true"] svg{opacity:1}
.card__check:hover{transform:rotate(6deg) scale(1.08)}
.card__title{font-size:20px;font-weight:800;line-height:1.2}
.card__whatis{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);font-family:inherit}
.card__whatis:hover{color:var(--orange)}
.card__eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-soft);margin-bottom:10px}
.card__desc{margin:0;font-size:15.5px;line-height:1.45;font-weight:500}
.card__desc a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.card__back .card__whatis{color:rgba(255,255,255,.65)}
.card__back .card__whatis:hover{color:#fff}

/* ---------- Фишинг ---------- */
.phish{display:flex;flex-direction:column;gap:16px}
.phish__card{background:var(--stone);border-radius:var(--radius);padding:22px}
.phish__msg{background:#fff;border-radius:20px 20px 20px 6px;padding:16px 18px;box-shadow:0 10px 24px -14px rgba(30,30,30,.3);font-size:16px;line-height:1.5;max-width:36ch}
.phish__from{display:block;font-size:12px;font-weight:700;color:var(--muted-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.phish__link{font-weight:700}
.phish__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.phish__btn{font-size:15px;font-weight:800;padding:12px 20px;border-radius:999px;border:none;cursor:pointer;transition:transform .15s ease}
.phish__btn:hover{transform:scale(1.04) rotate(-1deg)}
.phish__btn--scam{background:var(--ink);color:#fff}
.phish__btn--ok{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(30,30,30,.3)}
.phish__result{margin-top:14px;font-size:15px;font-weight:600;line-height:1.4;display:none}
.phish__card.answered .phish__btns{display:none}
.phish__card.answered .phish__result{display:block}
.phish__result b{font-weight:800}
.phish__result--right{color:#1a7a3c}
.phish__result--wrong{color:var(--red)}

/* ---------- Пароль ---------- */
.pwd{max-width:560px}
.pwd__label{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:10px}
.pwd__row{display:flex;gap:8px;align-items:stretch}
.pwd__input{flex:1;min-width:0;font-size:18px;font-weight:700;padding:14px 16px;border-radius:14px;border:2px solid var(--stone-2);background:#fff;color:var(--ink)}
.pwd__input:focus{outline:none;border-color:var(--orange)}
.pwd__eye{flex:none;width:52px;border-radius:14px;border:2px solid var(--stone-2);background:#fff;cursor:pointer;font-size:18px}
.pwd__meter{height:10px;border-radius:999px;background:var(--stone-2);overflow:hidden;margin:16px 0 12px}
.pwd__meter-fill{width:0%;height:100%;border-radius:999px;background:var(--red);transition:width .3s ease,background .3s ease}
.pwd__verdict{margin:0 0 14px;font-size:17px;font-weight:800;min-height:1.4em}
.pwd__privacy{margin:0;font-size:14px;font-weight:700;color:var(--muted)}

/* ---------- Красная зона ---------- */
.redzone{transform:rotate(-1deg);padding:36px 30px}
.redzone__text{margin:16px 0 0;font-size:clamp(22px,5vw,30px);line-height:1.3;font-weight:800;max-width:28ch}

/* ---------- Финал ---------- */
.final{background:var(--orange);color:#fff;padding:68px 0 96px}
.final__title{margin:0 0 8px;font-size:clamp(36px,9vw,60px);line-height:1;letter-spacing:-.04em;font-weight:800}
.final__pct{font-size:clamp(90px,25vw,180px);line-height:.95;font-weight:800;letter-spacing:-.05em;margin:6px 0 12px}
.final__bar{max-width:360px;height:10px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden;margin-bottom:24px}
.final__fill{width:0%;height:100%;border-radius:999px;background:#fff;transition:width .6s cubic-bezier(.32,.72,0,1)}
.final__verdict{margin:0 0 30px;font-size:20px;line-height:1.45;font-weight:700;max-width:30ch}
.final__btns{display:flex;gap:10px;flex-wrap:wrap}
.final__hint{margin:16px 0 0;font-size:14px;font-weight:700;min-height:1.2em}

/* ---------- Работа / CTA / футер ---------- */
.work__text{margin:0 0 20px;font-size:19px;line-height:1.4;font-weight:700}
.cta__btns{display:flex;gap:10px;flex-wrap:wrap}
.footer{background:var(--ink);color:#fff;padding:40px 0}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer__logo{font-size:24px;font-weight:800;letter-spacing:-.03em}
.footer__team{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.6);font-weight:600}
.footer__qr{width:96px;height:96px;background:#fff;border-radius:12px;padding:8px;flex:none}
.footer__qr svg{display:block;width:100%;height:100%}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.32,.72,0,1)}
[data-reveal].in{opacity:1;transform:none}

@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .badge{top:12px;right:10px;padding:9px 12px}
  .badge__pct{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  [data-reveal]{opacity:1;transform:none}
  .card__inner{transition:none}
}