/* info-blocks.css — pros/cons, steps, pros-minus, warnings, author, quiz */

/* Pros / Cons */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  margin-top: var(--space-32);
}

.pros-col, .cons-col {
  display: grid;
  align-content: start;
  gap: var(--space-10);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-28) var(--space-24) var(--space-20);
  overflow: hidden;
}

.pros-col { border-top: 3px solid var(--neon); }
.cons-col { border-top: 3px solid var(--error); }

.pros-col h4, .cons-col h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
  line-height: 1.2;
}
.pros-col h4 { color: var(--neon); }
.cons-col h4 { color: var(--error); }

.pro-item, .con-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  line-height: 1.45;
}
.pro-item:last-child, .con-item:last-child { border-bottom: none; }
.pro-icon,
.con-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  transform: translateY(1px);
  font-size: 14px;
  line-height: 1;
}
.pro-icon { color: var(--neon); }
.con-icon { color: var(--error); }

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  counter-reset: steps;
}

.step-card {
  min-height: 300px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), .1), transparent 42%),
    var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-32) var(--space-24) var(--space-28);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.step-card::before {
  content: '';
  position: absolute;
  inset: -44% 18% auto;
  height: 130px;
  background: radial-gradient(circle, rgba(var(--neon-rgb), .14), transparent 64%);
  opacity: 0;
  transition: opacity .2s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-lg);
}
.step-card:hover::before { opacity: 1; }

.step-num {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: var(--fw-display);
  line-height: 1;
  position: absolute;
  top: var(--space-12);
  right: var(--space-20);
  letter-spacing: 0;
  color: var(--brand);
  opacity: .95;
}

.step-icon {
  width: 62px;
  height: 62px;
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--brand-rgb), .18), rgba(var(--neon-rgb), .08)),
    var(--bg-soft);
  border: 1px solid var(--line-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-display);
  line-height: 1;
  margin-bottom: var(--space-20);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  position: relative;
  z-index: 1;
  animation: choiceIconGlow 3.2s ease-in-out infinite;
}

.step-card h4 {
  max-width: 220px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--space-8);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.step-card p {
  max-width: 260px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-prose);
  position: relative;
  z-index: 1;
}

.step-arrow {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(var(--brand-rgb), .45);
  border-radius: var(--pill);
  color: var(--brand);
  font-size: 26px;
  font-weight: var(--fw-bold);
  animation: choiceArrowNudge 1.8s ease-in-out infinite;
}

/* Inline CTA banner */
.inline-cta {
  background: linear-gradient(135deg, rgba(255,215,0,.08) 0%, rgba(0,255,136,.06) 100%);
  border: 1px solid rgba(255,215,0,.2);
  border-radius: var(--radius-md);
  padding: var(--space-32) var(--space-40);
  text-align: center;
  margin-top: var(--space-40);
}
.inline-cta h3 { font-size: var(--fs-h3); color: var(--white); margin-bottom: var(--space-8); }
.inline-cta p { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--space-24); }

/* Fullwidth CTA banner */
.cta-banner {
  background-image: url("C:\Users\Лиза\Downloads\casino-bonus-site_1\assets\img\bg.webp");
  background-size: cover;
  background-position: center;
  border-top: 1px solid rgba(255,215,0,.2);
  border-bottom: 1px solid rgba(255,215,0,.2);
  padding: var(--space-72) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('C:\Users\Лиза\Downloads\casino-bonus-site_1\assets\img\bg.webp');
  background-size: cover;
  background-position: center;
  opacity: .88;
  pointer-events: none;
  z-index: 0;
}
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 76% at 50% 46%, rgba(5,8,16,.42) 0%, rgba(5,8,16,.78) 66%, rgba(5,8,16,.9) 100%),
    linear-gradient(90deg, rgba(5,8,16,.78), rgba(45,21,0,.2) 34%, rgba(45,21,0,.16) 66%, rgba(5,8,16,.78));
  pointer-events: none;
  z-index: 1;
}
.cta-banner .container { position: relative; z-index: 2; }
.cta-banner h2 { color: var(--white); margin-bottom: var(--space-12); }
.cta-banner p { color: var(--ink-2); font-size: var(--fs-lead); margin-bottom: var(--space-32); max-width: 50ch; margin-left: auto; margin-right: auto; }

/* Warning block */
.warning-block {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  background: rgba(255,193,7,.06);
  border: 1px solid rgba(255,193,7,.25);
  border-radius: var(--radius);
  margin: var(--space-24) 0;
}
.warning-icon { font-size: 22px; flex-shrink: 0; }
.warning-text { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-prose); }
.warning-text strong { color: rgba(255,193,7,.9); }

/* License badge */
.lic-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-10);
  background: rgba(0,255,136,.08);
  border: 1px solid var(--line-green);
  border-radius: var(--pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--neon);
  letter-spacing: 0.02em;
}

/* Second offers list (conditions section) */
.offer-row {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) var(--space-24);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
  transition: border-color .2s, box-shadow .2s;
}
.offer-row:hover { border-color: rgba(255,215,0,.25); box-shadow: var(--shadow-sm); }
.offer-row-name { font-weight: var(--fw-bold); color: var(--white); min-width: 120px; }
.offer-row-bonus { font-family: var(--font-display); font-size: 20px; color: var(--brand); letter-spacing: 0.02em; }
.offer-row-actions { display: flex; gap: var(--space-8); margin-left: auto; }

/* Casino detail section */
.casino-section {
  padding: var(--space-56) 0;
  border-bottom: 1px solid var(--line-2);
}
.casino-section:last-child { border-bottom: none; }

.casino-bonus-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: var(--space-20);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 36px);
  font-weight: var(--fw-display);
  letter-spacing: 0.04em;
  line-height: 1.18;
  text-align: center;
  margin-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.casino-bonus-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 50%);
  z-index: 1;
}

.casino-bonus-visual > span:not(.bonus-particle) {
  position: relative;
  z-index: 3;
}

.bonus-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.bonus-particle {
  position: absolute;
  bottom: -18px;
  width: var(--bonus-particle-size, 22px);
  height: var(--bonus-particle-size, 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pill);
  background: var(--bonus-particle-bg, rgba(var(--brand-rgb), .22));
  color: var(--bonus-particle-ink, rgba(8,12,24,.78));
  font-family: var(--font-base);
  font-size: calc(var(--bonus-particle-size, 22px) * .5);
  font-weight: var(--fw-bold);
  line-height: 1;
  opacity: 0;
  filter: blur(.1px);
  box-shadow: 0 0 16px var(--bonus-particle-glow, rgba(var(--brand-rgb), .2));
  animation: bonusParticleFloat var(--bonus-particle-duration, 7s) ease-in-out infinite;
}

#ice-casino .casino-bonus-visual {
  --bonus-particle-bg: rgba(79,195,247,.24);
  --bonus-particle-ink: rgba(2,62,110,.76);
  --bonus-particle-glow: rgba(79,195,247,.28);
}
#slotoro .casino-bonus-visual {
  --bonus-particle-bg: rgba(255,149,0,.24);
  --bonus-particle-ink: rgba(122,46,0,.78);
  --bonus-particle-glow: rgba(255,149,0,.26);
}
#mrbet .casino-bonus-visual {
  --bonus-particle-bg: rgba(46,204,113,.22);
  --bonus-particle-ink: rgba(11,61,30,.78);
  --bonus-particle-glow: rgba(46,204,113,.24);
}
#verde .casino-bonus-visual {
  --bonus-particle-bg: rgba(0,184,148,.22);
  --bonus-particle-ink: rgba(0,61,53,.78);
  --bonus-particle-glow: rgba(0,184,148,.24);
}
#lemon .casino-bonus-visual {
  --bonus-particle-bg: rgba(102,82,0,.18);
  --bonus-particle-ink: rgba(255,230,0,.72);
  --bonus-particle-glow: rgba(102,82,0,.2);
}

@keyframes bonusParticleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg) scale(.82);
  }
  12% { opacity: .34; }
  68% { opacity: .22; }
  100% {
    opacity: 0;
    transform: translateY(-118px) translateX(var(--bonus-particle-drift, 14px)) rotate(240deg) scale(1.06);
  }
}

.casino-actions { display: flex; gap: var(--space-12); flex-wrap: wrap; justify-content: center; }

/* Reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin: var(--space-24) 0;
}

.review-card {
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-20);
}

.review-top {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.review-avatar {
  width: 38px; height: 38px;
  border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.review-meta-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--white); }
.review-meta-stars { font-size: 12px; color: var(--star); }
.review-text { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-prose); }

/* Promo Final */
.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
}
.promo-grid-5 { grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); }

.promo-btn {
  min-height: 210px;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--space-18);
  padding: var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(20, 26, 46, .96), rgba(8, 12, 24, .98));
  text-decoration: none;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-md);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}

.promo-btn::after {
  content: '';
  position: absolute;
  inset: auto -20% -45% 28%;
  height: 120px;
  background: radial-gradient(circle, currentColor, transparent 64%);
  opacity: .12;
  pointer-events: none;
}

.promo-btn:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-lg);
}

.promo-thumb {
  position: relative;
  grid-row: 1 / 3;
  min-height: 178px;
  border: 1px solid rgba(var(--white-rgb), .1);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--brand-rgb), .35), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(var(--neon-rgb), .22), transparent 30%),
    linear-gradient(145deg, #111828, #050810);
}

.promo-thumb::before,
.promo-thumb::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(var(--white-rgb), .13);
}

.promo-thumb::before {
  width: 150%;
  height: 86px;
  left: -42%;
  bottom: 24px;
  transform: rotate(-12deg);
}

.promo-thumb::after {
  width: 112%;
  height: 64px;
  right: -38%;
  top: 28px;
  transform: rotate(16deg);
  border-color: rgba(var(--brand-rgb), .24);
}

.promo-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--space-8);
}

.promo-btn-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.promo-btn-amount {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
}

.promo-btn-text {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.55;
}

.promo-btn-arrow {
  justify-self: start;
  align-self: end;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-16);
  border-radius: var(--pill);
  background: var(--brand);
  color: #080c18;
  font-size: var(--fs-btn-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}

.promo-ice { border-color: rgba(79,195,247,.32); color: var(--ice-1); }
.promo-ice .promo-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(79,195,247,.42), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(var(--brand-rgb), .22), transparent 30%),
    linear-gradient(145deg, #08243b, #050810);
}
.promo-slotoro { border-color: rgba(255,107,0,.34); color: var(--slotoro-2); }
.promo-slotoro .promo-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,149,0,.44), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(var(--brand-rgb), .18), transparent 30%),
    linear-gradient(145deg, #2b1202, #050810);
}
.promo-mrbet { border-color: rgba(46,204,113,.34); color: var(--mrbet-1); }
.promo-mrbet .promo-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(46,204,113,.38), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(var(--brand-rgb), .18), transparent 30%),
    linear-gradient(145deg, #092816, #050810);
}
.promo-verde { border-color: rgba(0,184,148,.34); color: var(--verde-1); }
.promo-verde .promo-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(0,184,148,.4), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(79,195,247,.2), transparent 30%),
    linear-gradient(145deg, #042722, #050810);
}
.promo-lemon { border-color: rgba(255,230,0,.34); color: var(--lemon-1); }
.promo-lemon .promo-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,230,0,.42), transparent 24%),
    radial-gradient(circle at 80% 12%, rgba(var(--neon-rgb), .18), transparent 30%),
    linear-gradient(145deg, #302900, #050810);
}

/* Tips */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 800px;
}
.tip-item {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
}
.tip-num {
  width: 36px; height: 36px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  border: 1px solid var(--line-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-display);
  color: var(--brand);
  flex-shrink: 0;
}

.slide-image img,
.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip-text h4 { font-size: var(--fs-body); color: var(--white); margin-bottom: var(--space-4); }
.tip-text p { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-prose); }

/* Quiz */
.quiz-wrap {
  max-width: 640px;
  margin: 0 auto;
}
.quiz-progress {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
}
.quiz-prog-dot {
  height: 4px;
  flex: 1;
  border-radius: var(--pill);
  background: var(--line);
  transition: background .3s;
}
.quiz-prog-dot.active { background: var(--brand); }

.quiz-question {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--white);
  margin-bottom: var(--space-24);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-16) var(--space-20);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  font-size: var(--fs-body);
  color: var(--ink-2);
  text-align: left;
  width: 100%;
}
.quiz-option:hover {
  border-color: rgba(255,215,0,.4);
  background: var(--brand-tint);
  color: var(--white);
}
.quiz-option.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--white);
}

.quiz-result {
  text-align: center;
  padding: var(--space-32);
  background: var(--bg-card);
  border: 1px solid rgba(255,215,0,.25);
  border-radius: var(--radius-md);
  display: none;
}
.quiz-result.show { display: block; }
.quiz-result h3 { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; color: var(--white); margin-bottom: var(--space-8); }
.quiz-result p { color: var(--ink-2); margin-bottom: var(--space-24); }

/* Casino choice flow */
.casino-choice-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
}

.choice-step {
  min-height: 268px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-14);
  padding: var(--space-28) var(--space-18);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), .1), transparent 42%),
    var(--bg-card);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.choice-step::before {
  content: '';
  position: absolute;
  inset: -40% 20% auto;
  height: 120px;
  background: radial-gradient(circle, rgba(var(--neon-rgb), .16), transparent 64%);
  opacity: 0;
  transition: opacity .2s ease;
}

.choice-step:hover {
  transform: translateY(-6px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow-lg);
}

.choice-step:hover::before { opacity: 1; }

.choice-icon {
  width: 86px;
  height: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(var(--brand-rgb), .18), rgba(var(--neon-rgb), .08)),
    var(--bg-soft);
  color: var(--brand);
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-display);
  line-height: 1;
  position: relative;
  z-index: 1;
  animation: choiceIconGlow 3.2s ease-in-out infinite;
}

.choice-step h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.choice-step p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.choice-arrow {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(var(--brand-rgb), .45);
  border-radius: var(--pill);
  color: var(--brand);
  font-size: 26px;
  font-weight: var(--fw-bold);
  animation: choiceArrowNudge 1.8s ease-in-out infinite;
}

@keyframes choiceArrowNudge {
  0%, 100% { transform: translateX(-3px); opacity: .58; }
  50% { transform: translateX(3px); opacity: 1; }
}

@keyframes choiceIconGlow {
  0%, 100% { box-shadow: 0 18px 38px rgba(0,0,0,.28), 0 0 0 rgba(var(--brand-rgb), 0); }
  50% { box-shadow: 0 18px 38px rgba(0,0,0,.28), 0 0 26px rgba(var(--brand-rgb), .22); }
}

/* Author */
.author-card {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-40);
  max-width: 760px;
  margin: 0 auto;
}
.author-avatar {
  width: 80px; height: 80px;
  border-radius: var(--pill);
  background: linear-gradient(135deg, #2a1800, var(--brand-ink));
  border: 2px solid var(--line-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-display);
  color: var(--brand);
  flex-shrink: 0;
}
.author-name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--white); margin-bottom: var(--space-4); }
.author-title { font-size: var(--fs-sm); color: var(--neon); margin-bottom: var(--space-16); }
.author-bio { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-prose); }
.author-socials { display: flex; gap: var(--space-12); margin-top: var(--space-16); }
.social-chip {
  padding: var(--space-6) var(--space-14);
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  transition: border-color .15s, color .15s;
}
.social-chip:hover { border-color: var(--brand); color: var(--brand); }

/* Responsive */
@media (max-width: 980px) {
  .steps-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .step-card {
    min-height: 0;
    padding: var(--space-28) var(--space-24);
  }
  .step-card h4,
  .step-card p {
    max-width: calc(100% - 58px);
  }
  .step-arrow {
    justify-self: center;
    animation-name: choiceArrowDown;
  }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .promo-grid { grid-template-columns: 1fr 1fr; }
  .promo-grid-5 { width: 100%; }
  .promo-btn {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .promo-thumb {
    grid-row: auto;
    min-height: 156px;
  }
  .casino-choice-flow {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
  .choice-step { min-height: 0; }
  .choice-arrow {
    justify-self: center;
    transform: rotate(90deg);
    animation-name: choiceArrowDown;
  }
}

@media (max-width: 720px) {

  /* Mobile performance guard */
  .step-icon,
  .choice-icon,
  .step-arrow,
  .choice-arrow,
  .btn-pulse,
  .bonus-particle {
    animation: none !important;
  }
  .review-card,
  .promo-btn,
  .step-card,
  .choice-step,
  .offer-box {
    box-shadow: none !important;
  }
  .bonus-particles {
    display: none;
  }
  .pros-cons { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-grid-5 { width: 100%; }
  .promo-btn {
    min-height: 0;
    gap: var(--space-14);
    padding: var(--space-14);
    border-radius: var(--radius);
  }
  .promo-thumb {
    min-height: 142px;
    aspect-ratio: 16 / 9;
  }
  .promo-copy { gap: var(--space-6); }
  .promo-btn-name { font-size: 17px; }
  .promo-btn-amount { font-size: 22px; }
  .promo-btn-text { font-size: 13px; }
  .promo-btn-arrow {
    width: 100%;
    min-height: 42px;
  }
  .step-card {
    padding: var(--space-24) var(--space-18);
  }
  .step-num {
    font-size: 48px;
    top: var(--space-10);
    right: var(--space-16);
    opacity: .75;
  }
  .step-icon {
    width: 56px;
    height: 56px;
    font-size: 18px;
    margin-bottom: var(--space-16);
  }
  .step-card h4,
  .step-card p {
    max-width: 100%;
  }
  .step-card h4 {
    padding-right: var(--space-48);
    font-size: 19px;
  }
  .step-card p {
    font-size: 13.5px;
    line-height: 1.65;
  }
  .step-arrow {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .inline-cta {
    margin-top: var(--space-28);
  }
  .casino-section {
    padding: var(--space-40) 0;
  }
  .casino-section h3 {
    font-size: 21px;
    line-height: 1.22;
  }
  .casino-bonus-visual {
    min-height: 112px;
    height: auto;
    padding: var(--space-18);
    font-size: clamp(25px, 8.2vw, 31px);
    letter-spacing: 0.02em;
  }
  .pros-col,
  .cons-col,
  .review-card,
  .quiz-result {
    padding: var(--space-20) var(--space-18) var(--space-16);
  }
  .pros-col h4,
  .cons-col h4 {
    margin-bottom: var(--space-8);
  }
  .pro-item,
  .con-item {
    padding: var(--space-9) 0;
    font-size: 13.5px;
  }
  .warning-block,
  .tip-item {
    gap: var(--space-12);
  }
  .quiz-question {
    font-size: 21px;
    line-height: 1.22;
  }
  .quiz-options { gap: var(--space-10); }
  .quiz-option {
    padding: var(--space-14) var(--space-16);
    font-size: var(--fs-sm);
  }
  .choice-step {
    padding: var(--space-24) var(--space-18);
  }
  .choice-icon {
    width: 74px;
    height: 74px;
    font-size: 21px;
  }
  .choice-step h3 {
    font-size: 19px;
  }
  .offer-row { flex-direction: column; align-items: flex-start; }
  .offer-row-actions { width: 100%; flex-direction: column; }
  .offer-row-actions .btn { width: 100%; }
  .casino-actions { flex-direction: column; }
  .casino-actions .btn { width: 100%; }
  .author-card { flex-direction: column; gap: var(--space-20); padding: var(--space-24); }
  .inline-cta { padding: var(--space-24); }
  .cta-banner {
    padding: var(--space-56) 0;
  }
  .cta-banner::before {
    background-position: 58% center;
    opacity: .78;
  }
  .cta-banner::after {
    background:
      radial-gradient(ellipse 92% 72% at 50% 48%, rgba(5,8,16,.5) 0%, rgba(5,8,16,.86) 72%, rgba(5,8,16,.94) 100%),
      linear-gradient(180deg, rgba(5,8,16,.82), rgba(45,21,0,.16) 48%, rgba(5,8,16,.88));
  }
  .cta-banner h2 {
    font-size: clamp(26px, 8vw, 34px);
  }
  .cta-banner p {
    font-size: var(--fs-body);
  }
}

@keyframes choiceArrowDown {
  0%, 100% { transform: rotate(90deg) translateX(-3px); opacity: .58; }
  50% { transform: rotate(90deg) translateX(3px); opacity: 1; }
}

@media (max-width: 380px) {
  .step-card,
  .choice-step,
  .promo-btn,
  .pros-col,
  .cons-col,
  .review-card,
  .quiz-result,
  .inline-cta {
    border-radius: var(--radius-sm);
  }
  .step-card,
  .choice-step {
    padding: var(--space-20) var(--space-14);
  }
  .step-card h4 {
    padding-right: var(--space-40);
    font-size: 18px;
  }
  .step-num {
    font-size: 42px;
    right: var(--space-12);
  }
  .promo-thumb {
    min-height: 122px;
  }
  .pros-col,
  .cons-col {
    padding: var(--space-20) var(--space-14) var(--space-14);
  }
  .casino-bonus-visual {
    font-size: 24px;
  }
  .cta-banner {
    padding: var(--space-48) 0;
  }
  .cta-banner::before {
    background-position: 62% center;
  }
}