/* BangaWin micro 10 - wide split banner: hot offer left, cool review right */
:root {
  --base: #101010;
  --panel: #1b1a1a;
  --panel-2: #232121;
  --seam: #353231;
  --white: #fff6ea;
  --fog: #a7a19c;
  --ember: #d63a1f;
  --ember-hi: #f45834;
  --ember-lo: #8a1f0d;
  --ore: #edaf26;
  --mint: #39d474;
  --vio: #a24bff;
  --mag: #e03fb4;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; overflow-x: hidden; background: radial-gradient(80% 60% at 20% 30%, #241310, transparent 70%), var(--base); color: var(--white); font: 400 15px/1.55 Manrope, Arial, sans-serif; }
a { color: inherit; }

.stage { width: 100%; max-width: 1020px; }
.split { display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; border: 1px solid var(--seam); box-shadow: 0 30px 70px rgba(0,0,0,.6); }

/* hot side */
.split-hot { position: relative; isolation: isolate; overflow: hidden; padding: 28px 22px 26px; text-align: center; background: linear-gradient(160deg, #241614, #151111); }
.split-hot::before, .split-hot::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 14px; left: 50%;
  background: linear-gradient(180deg, transparent, rgba(244,88,52,.85) 40%, #ffe0d4 50%, rgba(244,88,52,.85) 60%, transparent);
  box-shadow: 0 0 36px 12px rgba(214,58,31,.35); filter: blur(2px);
}
.split-hot::before { transform: rotate(35deg); }
.split-hot::after { transform: rotate(-35deg); }
.brandmark { display: inline-flex; align-items: center; text-decoration: none; font: 900 26px/1 "Big Shoulders Display", sans-serif; font-style: italic; letter-spacing: .01em; transform: skewX(-9deg); }
.brandmark span { color: #fff; text-shadow: 0 2px 0 #000; }
.brandmark b { color: var(--ember); -webkit-text-stroke: 1.3px #fff; paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.brandmark svg { width: 34px; height: 28px; margin: 0 3px; filter: drop-shadow(0 2px 0 #000); }
.hot-kicker { margin-top: 22px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ore); }
.hot-sum { font: 900 96px/.95 "Big Shoulders Display", Impact, sans-serif; color: #fff; text-shadow: 0 5px 0 #000, 0 0 40px rgba(244,88,52,.6); }
.hot-fs { font: 700 30px/1.1 "Big Shoulders Display", sans-serif; text-transform: uppercase; color: var(--ore); text-shadow: 0 2px 0 #000; }
.hot-btn {
  display: inline-block; margin-top: 20px; min-width: 240px; padding: 15px 26px; border-radius: 10px; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, var(--ember-hi), var(--ember)); box-shadow: 0 6px 0 var(--ember-lo), 0 16px 30px rgba(214,58,31,.45);
  transition: transform .12s, box-shadow .12s;
}
.hot-btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--ember-lo), 0 10px 20px rgba(214,58,31,.45); }
.hot-tc { margin-top: 14px; font-size: 11.5px; color: #cfc7c0; text-shadow: 0 1px 2px #000; }

/* cool side */
.split-cool { padding: 24px 22px; background: var(--panel); }
.verdict { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.verdict h1 { font: 700 30px/1.05 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.score { flex: none; display: flex; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--ore); }
.score strong { font: 900 34px/1 "Big Shoulders Display", sans-serif; color: var(--ore); }
.score span { font-size: 13px; color: var(--fog); }
.verdict-txt { margin-top: 12px; font-size: 14px; color: #d9d2cb; }
.verdict-txt a { color: var(--ore); font-weight: 800; }
.ticks { list-style: none; display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 14px; font-size: 13.5px; }
.ticks li { position: relative; padding: 7px 10px 7px 30px; border-radius: 8px; background: var(--panel-2); }
.ticks li::before { position: absolute; left: 10px; top: 7px; font-weight: 800; }
.ok::before { content: "✓"; color: var(--mint); }
.meh::before { content: "-"; color: var(--ember-hi); }
.cool-link { display: inline-block; margin-top: 14px; font-weight: 800; color: var(--ore); text-decoration: none; border-bottom: 2px solid rgba(237,175,38,.4); }
.cool-link:hover { border-color: var(--ore); }

.alt { margin-top: 16px; padding: 11px 13px; border-radius: 12px; font-size: 13px; color: #e8def5; background: linear-gradient(120deg, rgba(162,75,255,.16), rgba(224,63,180,.12)); border: 1px solid rgba(162,75,255,.45); }
.alt-chip { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--vio), var(--mag)); }
.alt a { font-weight: 800; color: #d9a8ff; }

.base { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--fog); }
.base a { color: var(--white); }

@media (min-width: 820px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split-hot { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 30px; }
  .split-cool { padding: 32px 30px; }
  .hot-sum { font-size: 128px; }
  .ticks { grid-template-columns: 1fr 1fr; }
  .ticks li.meh { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .hot-sum { font-size: 78px; }
  .hot-btn { min-width: 0; width: 100%; }
  .verdict h1 { font-size: 25px; }
}