/* plinko-bonus.site — архетип confetti, namespace cfe */

:root{
  --bg:#FFFFFF;          /* фон страницы — светлая тема, как на оригинале */
  --bg-soft:#FFF6F9;     /* очень светлая розовая подложка */
  --surface:#FFE6EF;     /* заливка секций и карточек */
  --surface-2:#FFD3E2;   /* вторая заливка, таблицы и выделенные блоки */
  --line:#FFB9D0;        /* границы, разделители, рамки таблиц */
  --pink:#FF6FA3;        /* основной акцент, фон главной кнопки */
  --pink-soft:#FF9FBD;   /* ховер, второстепенные акценты */
  --pink-mid:#E85F91;    /* активное состояние */
  --pink-deep:#D94F85;   /* нажатие */
  --plum:#4A1D2C;        /* основной текст */
  --plum-soft:#4E3441;   /* подписи, второстепенный текст */
  --gold:#FFBF19;        /* рейтинг, значки, акцент в цифрах */
  --green:#15AC24;       /* «да» в таблицах сравнения */
  --red:#E40539;         /* «нет» в таблицах сравнения */
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 6% 4%, var(--surface) 0 7px, transparent 8px),
    radial-gradient(circle at 93% 11%, var(--surface-2) 0 5px, transparent 6px),
    radial-gradient(circle at 17% 26%, var(--surface-2) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 38%, var(--surface) 0 9px, transparent 10px),
    radial-gradient(circle at 4% 57%, var(--surface-2) 0 6px, transparent 7px),
    radial-gradient(circle at 96% 69%, var(--surface) 0 8px, transparent 9px),
    radial-gradient(circle at 12% 84%, var(--surface-2) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 95%, var(--surface) 0 7px, transparent 8px);
  background-attachment:fixed;
  color:var(--plum);
  font-family:"Piazzolla",Georgia,serif;
  font-size:17px;
  line-height:1.66;
}

.cfe-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

h1,h2,h3,.cfe-logo,.cfe-kpi-n,.cfe-btn,.cfe-btn-sec{font-family:"Prosto One","Piazzolla",Georgia,serif;font-weight:400}

h1{font-size:2.05rem;line-height:1.24;margin:0 0 14px}
h2{font-size:1.44rem;line-height:1.3;margin:0 0 12px}
h3{font-size:1.08rem;line-height:1.36;margin:22px 0 8px;color:var(--pink-deep)}
p{margin:0 0 14px}
a{color:var(--pink-mid)}

/* ——— шапка: лого слева, кнопки справа среди мелких кружков ——— */
.cfe-hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.95);
  border-bottom:2px dotted var(--line);
  backdrop-filter:blur(6px);
}
.cfe-hdr-in{
  max-width:1080px;margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;gap:14px;
}
.cfe-logo{
  font-size:1.2rem;letter-spacing:.02em;color:var(--plum);
  text-decoration:none;white-space:nowrap;
}
.cfe-logo i{font-style:normal;color:var(--pink)}
.cfe-scatter{
  flex:1 1 auto;min-width:0;height:34px;margin:0 4px;border-radius:17px;
  background-image:
    radial-gradient(circle at 12% 30%, var(--pink-soft) 0 3px, transparent 4px),
    radial-gradient(circle at 26% 72%, var(--gold) 0 2px, transparent 3px),
    radial-gradient(circle at 41% 22%, var(--surface-2) 0 4px, transparent 5px),
    radial-gradient(circle at 57% 66%, var(--pink) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, var(--surface-2) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 74%, var(--pink-soft) 0 2px, transparent 3px),
    radial-gradient(circle at 96% 34%, var(--gold) 0 3px, transparent 4px);
}
.cfe-hdr-btns{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.cfe-btn,.cfe-btn-sec{
  display:inline-block;text-decoration:none;text-align:center;
  border-radius:20px;padding:.625rem 1.25rem;
  text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;
  transition:background-color .15s ease,color .15s ease;
}
.cfe-btn{background:var(--pink);color:#fff;border:2px solid var(--pink)}
.cfe-btn:hover{background:var(--pink-mid);border-color:var(--pink-mid)}
.cfe-btn:active{background:var(--pink-deep);border-color:var(--pink-deep)}
.cfe-btn-sec{background:transparent;color:var(--pink);border:2px solid var(--pink)}
.cfe-btn-sec:hover{color:var(--pink-mid);border-color:var(--pink-mid)}
.cfe-btn-lg{font-size:.95rem;padding:.8rem 2rem}

/* ——— секции ——— */
.cfe-sec{padding:38px 0}
.cfe-sec--soft{background:var(--bg-soft)}
.cfe-sec--tint{background:var(--surface)}
.cfe-hero{
  background:var(--bg-soft);
  border-bottom:2px dotted var(--line);
  padding:34px 0 40px;
}
.cfe-lead{font-size:1.07rem;color:var(--plum-soft);max-width:72ch}

/* ——— KPI-россыпь ——— */
.cfe-kpi{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:24px 0 26px;
  list-style:none;padding:0;
}
.cfe-kpi li{
  background:#fff;border:2px solid var(--line);border-radius:18px;
  padding:14px 12px;text-align:center;position:relative;
}
.cfe-kpi li:nth-child(2n){background:var(--surface)}
.cfe-kpi li::after{
  content:"";position:absolute;top:-6px;right:-6px;width:12px;height:12px;
  border-radius:50%;background:var(--gold);
}
.cfe-kpi li:nth-child(3n)::after{background:var(--pink)}
.cfe-kpi-n{display:block;font-size:1.22rem;color:var(--pink-deep);line-height:1.2}
.cfe-kpi-t{display:block;font-size:.78rem;color:var(--plum-soft);text-transform:uppercase;letter-spacing:.04em;margin-top:5px}

/* ——— карточки-россыпь ——— */
.cfe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin:18px 0}
.cfe-card{
  background:#fff;border:1px solid var(--line);border-left:6px solid var(--pink-soft);
  border-radius:16px;padding:15px 17px;
}
.cfe-card:nth-child(2n){border-left-color:var(--gold)}
.cfe-card:nth-child(3n){border-left-color:var(--pink)}
.cfe-card h3{margin-top:0}
.cfe-ch{
  font-family:"Prosto One","Piazzolla",Georgia,serif;font-weight:400;
  font-size:1.04rem;line-height:1.36;color:var(--pink-deep);margin:0 0 8px;
}
.cfe-card p:last-child{margin-bottom:0}

.cfe-note{
  background:var(--surface-2);border-radius:18px;padding:16px 20px;margin:20px 0;
  border:1px dashed var(--plum);
}
.cfe-num{color:var(--pink-deep)}
.cfe-hi{color:var(--plum);background:linear-gradient(transparent 62%,var(--surface-2) 62%)}
.cfe-yes{color:var(--green)}
.cfe-no{color:var(--red)}
.cfe-star{color:var(--gold)}

/* ——— SVG ——— */
.cfe-fig{margin:22px 0}
.cfe-fig svg{display:block;width:100%;height:auto;max-width:100%}
.cfe-cap{font-size:.84rem;color:var(--plum-soft);margin-top:8px;text-align:center}

/* ——— таблицы ——— */
.cfe-tw{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
.cfe-tbl{border-collapse:collapse;width:100%;min-width:520px;background:#fff;font-size:.93rem}
.cfe-tbl caption{caption-side:top;text-align:left;font-size:.86rem;color:var(--plum-soft);padding-bottom:8px}
.cfe-tbl th,.cfe-tbl td{border:1px solid var(--plum);padding:9px 11px;text-align:center}
.cfe-tbl thead th{background:var(--surface-2);font-family:"Prosto One","Piazzolla",serif;font-weight:400;font-size:.86rem}
.cfe-tbl tbody tr:nth-child(2n) td{background:var(--bg-soft)}

/* ——— FAQ ——— */
.cfe-faq details{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:12px 16px;margin-bottom:10px;
}
.cfe-faq details[open]{background:var(--bg-soft)}
.cfe-faq summary{cursor:pointer;color:var(--plum);font-size:1rem;list-style:none}
.cfe-faq summary::-webkit-details-marker{display:none}
.cfe-faq summary::before{content:"●";color:var(--pink);margin-right:9px;font-size:.7rem;vertical-align:middle}
.cfe-faq details[open] summary::before{color:var(--gold)}
.cfe-faq p{margin:10px 0 2px;color:var(--plum-soft);font-size:.96rem}

/* ——— отзыв ——— */
.cfe-quote{
  background:#fff;border:2px dotted var(--line);border-radius:20px;padding:18px 22px;margin:22px 0;
}
.cfe-quote-who{font-size:.85rem;color:var(--plum-soft);margin:0}

/* ——— CTA-полоса ——— */
.cfe-cta{
  background:var(--surface);border-radius:24px;padding:24px;margin:26px 0;text-align:center;
  border:2px dotted var(--pink-soft);
}
.cfe-cta p{max-width:64ch;margin:0 auto 16px}

/* ——— подвал ——— */
.cfe-foot{
  background:var(--bg-soft);border-top:2px dotted var(--line);
  padding:28px 0 34px;font-size:.88rem;color:var(--plum-soft);
}
.cfe-foot p{margin:0 0 9px}
.cfe-age{color:var(--plum);border-top:1px dashed var(--line);padding-top:12px;margin-top:14px}

@media (max-width:900px){
  .cfe-kpi{grid-template-columns:repeat(3,1fr)}
  .cfe-scatter{display:none}
}

@media (max-width:640px){
  body{font-size:16px;background-image:none}
  .cfe-wrap{padding:0 16px}
  h1{font-size:1.52rem}
  h2{font-size:1.2rem}
  .cfe-hdr-in{padding:9px 14px;gap:8px}
  .cfe-logo{font-size:1rem}
  .cfe-hdr-btns{gap:7px}
  .cfe-btn,.cfe-btn-sec{padding:.5rem .75rem;font-size:.7rem;letter-spacing:0}
  .cfe-btn-lg{padding:.7rem 1.2rem;font-size:.82rem}
  .cfe-kpi{grid-template-columns:repeat(2,1fr);gap:9px}
  .cfe-sec{padding:28px 0}
  .cfe-tbl{min-width:460px}
  img,svg{max-width:100%;height:auto}
}