@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700;900&famil
  y=Barlow:wght@300;400;500&display=swap");

  .crx { font-family: Barlow, Arial, sans-serif; color: #f5f0eb; background: #080808; }
  .crx-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 100vh; padding: 100px 24px 80px; background: radial-gradient(70% 50% at 50% 40%, #1a0000 0%, #080808 70%);
  position: relative; }
  .crx-logo { font-family: "Bebas Neue", Impact, sans-serif; font-size: 72px; letter-spacing: 8px; color: #fff;
  line-height: 1; margin-bottom: 8px; }
  .crx-logo span { color: #cc1111; }
  .crx-tag { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 11px; letter-spacing: 5px; text-transform:
  uppercase; color: #c9a84c; margin-bottom: 24px; }
  .crx-sub { font-size: 16px; color: #aaa; max-width: 560px; line-height: 1.7; margin-bottom: 16px; font-weight: 300; }
  .crx-line { width: 1px; height: 48px; background: #cc1111; margin: 20px auto; }
  .crx-btn { display: inline-block; padding: 14px 32px; font-family: "Barlow Condensed", Arial, sans-serif; font-size:
  13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; text-decoration: none; border-radius: 2px;
  margin: 8px; cursor: pointer; transition: 0.3s ease; }
  .crx-btn-red { background: #cc1111; color: #fff; border: 2px solid #cc1111; }
  .crx-btn-red:hover { background: #a80e0e; border-color: #a80e0e; color: #fff; }
  .crx-btn-green { background: #25d366; color: #fff; border: 2px solid #25d366; }
  .crx-btn-green:hover { background: #1db954; border-color: #1db954; color: #fff; }
  .crx-btn-out { background: transparent; color: #f5f0eb; border: 2px solid rgba(255,255,255,0.3); }
  .crx-btn-out:hover { border-color: #fff; color: #fff; }
  .crx-val { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; background: #0e0e0e; border-top: 1px solid
  #1a1a1a; }
  .crx-val-item { flex: 1 1 250px; padding: 32px 28px; border-right: 1px solid #1a1a1a; text-align: center; }
  .crx-val-item:last-child { border-right: none; }
  .crx-val-t { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 11px; letter-spacing: 3px; text-transform:
  uppercase; color: #c9a84c; margin-bottom: 10px; }
  .crx-val-d { font-size: 13px; color: #888; line-height: 1.6; font-weight: 300; }
  .crx-sec { padding: 80px 40px; background: #0a0a0a; border-top: 1px solid #141414; }
  .crx-label { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 11px; letter-spacing: 4px; text-transform:
  uppercase; color: #c9a84c; text-align: center; margin-bottom: 48px; }
  .crx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
  @media (max-width: 900px) { .crx-grid3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .crx-grid3 { grid-template-columns: 1fr; } }
  .crx-card { background: #fff; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; position:
  relative; }
  .crx-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f8f8f8; padding: 16px; }
  .crx-card-info { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; background: #fff;
  color: #111; }
  .crx-brand-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #999; font-family: "Barlow
  Condensed", Arial, sans-serif; }
  .crx-name { font-family: "Bebas Neue", Impact, sans-serif; font-size: 18px; letter-spacing: 1px; color: #111;
  line-height: 1.2; }
  .crx-detail { font-size: 12px; color: #666; }
  .crx-stars { font-size: 12px; color: #c9a84c; margin: 4px 0; }
  .crx-stars span { color: #888; }
  .crx-pbtn { display: inline-block; margin-top: 12px; padding: 10px 20px; background: #111; color: #fff; font-family:
  "Barlow Condensed", Arial, sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; text-align: center; border-radius: 2px; transition: 0.2s; }
  .crx-pbtn:hover { background: #cc1111; color: #fff; }
  .crx-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; font-family: "Barlow Condensed", Arial,
  sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; border-radius: 2px;
  z-index: 1; }
  .crx-badge-r { background: #cc1111; color: #fff; }
  .crx-badge-g { background: #1a7a3a; color: #fff; }
  .crx-banner { background: #cc1111; padding: 60px 40px; text-align: center; border-top: 1px solid #a80e0e; }
  .crx-banner-t { font-family: "Bebas Neue", Impact, sans-serif; font-size: 42px; letter-spacing: 4px; color: #fff;
  margin-bottom: 12px; }
  .crx-banner-s { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7);
  font-family: "Barlow Condensed", Arial, sans-serif; }
  .crx-test { background: #080808; padding: 80px 40px; border-top: 1px solid #141414; text-align: center; }
  .crx-test-title { font-family: "Bebas Neue", Impact, sans-serif; font-size: 48px; letter-spacing: 3px; color: #f5f0eb;
  margin-bottom: 8px; }
  .crx-test-title span { color: #cc1111; }
  .crx-test-sub { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #555; font-family: "Barlow
  Condensed", Arial, sans-serif; margin-bottom: 48px; }
  .crx-stats { display: flex; justify-content: center; gap: 60px; margin-bottom: 60px; flex-wrap: wrap; }
  .crx-stat-n { font-family: "Bebas Neue", Impact, sans-serif; font-size: 52px; color: #c9a84c; line-height: 1; }
  .crx-stat-n span { font-size: 28px; color: #c9a84c; }
  .crx-stat-l { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #555; font-family: "Barlow
  Condensed", Arial, sans-serif; margin-top: 6px; }
  .crx-tcard { background: #111; border: 1px solid #1e1e1e; border-radius: 4px; padding: 28px 24px 20px; text-align:
  left; display: flex; flex-direction: column; gap: 8px; }
  .crx-tcard-stars { color: #c9a84c; font-size: 14px; }
  .crx-tcard-text { font-size: 14px; color: #bbb; line-height: 1.7; font-style: italic; font-weight: 300; }
  .crx-tcard-prod { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; font-family: "Barlow
  Condensed", Arial, sans-serif; border-top: 1px solid #1e1e1e; padding-top: 12px; margin-top: 4px; }
  .crx-tcard-author { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
  .crx-tcard-name { font-weight: 600; color: #f5f0eb; }
  .crx-tcard-loc { color: #444; font-size: 11px; }
  .crx-avg { margin-top: 48px; text-align: center; }
  .crx-avg-box { display: inline-flex; align-items: center; gap: 12px; background: #111; border: 1px solid #1e1e1e;
  padding: 16px 32px; border-radius: 4px; }
  .crx-avg-score { font-family: "Bebas Neue", Impact, sans-serif; font-size: 42px; color: #c9a84c; line-height: 1; }
  .crx-avg-stars { color: #c9a84c; font-size: 18px; }
  .crx-avg-count { font-size: 12px; color: #555; }
  .crx-brands-label { background: #0e0e0e; border-top: 1px solid #141414; padding: 32px 0 12px; text-align: center;
  font-family: "Barlow Condensed", Arial, sans-serif; font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: #c9a84c; }
  .crx-brands { background: #0e0e0e; display: flex; justify-content: center; gap: 48px; padding: 24px 40px 48px;
  flex-wrap: wrap; border-bottom: 1px solid #141414; }
  .crx-brand-n { font-family: "Bebas Neue", Impact, sans-serif; font-size: 22px; letter-spacing: 3px; color: #f5f0eb;
  text-align: center; }
  .crx-brand-t { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #444; font-family: "Barlow
  Condensed", Arial, sans-serif; text-align: center; margin-top: 4px; }
  .crx-why { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 900px; margin: 0 auto; }
  @media (max-width: 700px) { .crx-why { grid-template-columns: 1fr; gap: 32px; } }
  .crx-why-title { font-family: "Bebas Neue", Impact, sans-serif; font-size: 42px; letter-spacing: 2px; line-height: 1.1;
   color: #f5f0eb; margin-bottom: 20px; }
  .crx-why-title span { color: #cc1111; }
  .crx-why-text { font-size: 15px; color: #aaa; line-height: 1.8; font-weight: 300; margin-bottom: 16px; }
  .crx-why-box { background: #111; border-left: 3px solid #c9a84c; padding: 16px 20px; margin-top: 24px; font-size: 14px;
   color: #888; line-height: 1.6; }
  .crx-check { font-size: 14px; color: #aaa; line-height: 1.8; margin-bottom: 12px; padding-left: 4px; }
  .crx-check strong { color: #f5f0eb; }
  .crx-cta { background: #0a0a0a; border-top: 1px solid #141414; padding: 80px 40px; text-align: center; }
  .crx-cta-title { font-family: "Bebas Neue", Impact, sans-serif; font-size: 52px; letter-spacing: 4px; color: #f5f0eb;
  margin-bottom: 16px; }
  .crx-cta-sub { font-size: 15px; color: #888; margin-bottom: 32px; font-weight: 300; }
  .crx-cat { background: #111; border: 1px solid #1e1e1e; border-radius: 4px; padding: 32px 28px; display: flex;
  flex-direction: column; gap: 0; }
  .crx-cat-label { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: #c9a84c; margin-bottom: 8px; }
  .crx-cat-name { font-family: "Bebas Neue", Impact, sans-serif; font-size: 36px; letter-spacing: 3px; color: #f5f0eb;
  line-height: 1.1; }
  .crx-cat-desc { font-size: 13px; color: #888; line-height: 1.7; font-weight: 300; margin: 12px 0 0; flex: 1; }
  .crx-cat-brands { font-family: "Barlow Condensed", Arial, sans-serif; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #444; border-top: 1px solid #1a1a1a; padding-top: 16px; margin-top: 16px; }
  .crx-cat-btn { display: inline-block; margin-top: 20px; padding: 10px 24px; background: transparent; color: #f5f0eb;
  border: 1px solid #333; font-family: "Barlow Condensed", Arial, sans-serif; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; text-align: center; border-radius: 2px; transition: 0.2s; }
  .crx-cat-btn:hover { border-color: #cc1111; color: #cc1111; }
  .crx-footer { background: #060606; border-top: 1px solid #111; padding: 24px; text-align: center; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: #333; font-family: "Barlow Condensed", Arial, sans-serif; }