:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --card-max:520px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --black:#000;
  --green:#00db1a;
  --green-dark:#04e000;
  --danger:#ed1212;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:#fff;
  color:var(--text);
}

.page{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:28px 18px;
}

.card{
  width:100%;
  max-width:var(--card-max);
  display:flex;
  flex-direction:column;
  gap:18px;
}

.block{width:100%}

.progress{
  width:100%;
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}
.progress__bar{
  height:100%;
  background:#000;
  width:0;
}

.block--title .title{font-size:22px; font-weight:700; text-align:center; line-height:1.25}
.block--title .subtitle{margin-top:8px; font-size:14px; color:var(--muted); text-align:center; line-height:1.35}

.block--text{line-height:1.5}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}

.text-size-sm{font-size:14px}
.text-size-md{font-size:16px}
.text-size-lg{font-size:18px}

.img{width:100%; border-radius:12px; display:block}
.img-placeholder{
  width:100%;
  height:220px;
  border-radius:12px;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  border:1px solid #e5e7eb;
}

.btn{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:2px solid #000;
  background:#000;
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
}
.btn--success{
  background:var(--green);
  border-color:var(--green-dark);
  color:#000;
}
.btn--dark{
  background:#000;
  border-color:#000;
  color:#fff;
}

@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.02)}
  100%{transform:scale(1)}
}
.btn--pulse{animation:pulse 1.2s infinite}

.quiz{display:flex; flex-direction:column; gap:12px}
.quiz__form{margin:0}
.quiz__option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius:14px;
  background:#000;
  border:2px solid #000;
  color:#fff;
  cursor:pointer;
}
.quiz__emoji{font-size:22px; width:34px; flex:0 0 34px; text-align:center}
.quiz__text{flex:1; text-align:left; font-weight:700}
.quiz__text p{margin:0}

.note{
  border-radius:14px;
  padding:14px;
  border:2px solid transparent;
}
.note__title{font-weight:900; margin-bottom:8px}
.note__body p{margin:0}
.note--danger{background:var(--danger); border-color:#da1616; color:#fff}

.block--loading{padding:18px 10px; text-align:center}
.loading__title{font-weight:900; font-size:18px}
.loading__subtitle{color:var(--muted); margin-top:6px}
.loading__hint{color:var(--muted); margin-top:10px; font-size:13px}

.spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid #e5e7eb;
  border-top-color:#000;
  margin:14px auto 0;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.pricing{
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:16px;
  text-align:center;
  box-shadow:var(--shadow);
}
.pricing__label{font-weight:800}
.pricing__title{margin-top:6px; font-weight:900; font-size:20px}
.pricing__price{margin-top:8px; font-weight:900; font-size:38px}
.pricing__subtitle{margin-top:6px; color:var(--muted); font-weight:700}

.benefits{
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:16px;
}
.benefits__title{font-weight:900; text-align:center; margin-bottom:10px}
.benefits__list{margin:0; padding-left:18px}
.benefits__item{margin:6px 0; line-height:1.4}

.warranty{
  border-radius:14px;
  border:1px solid #e5e7eb;
  padding:16px;
  text-align:center;
}
.warranty__title{font-weight:900; margin-bottom:8px}
.warranty__body{color:var(--muted)}

.faq{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 14px;
}
.faq__q{font-weight:900; cursor:pointer}
.faq__a{margin-top:10px; color:var(--muted); line-height:1.45}