.blog-quiz-campaign-wrap {
  --bg: #1c1c1c;
  --panel: #121214;
  --panel-2: #17171a;
  --panel-3: #0d0e10;
  --white: #ffffff;
  --soft: #dfdfdf;
  --muted: #a5a5a5;
  --muted-2: #777777;
  --line: #333336;
  --line-soft: #2a2a2c;
  --accent: #ff5722;
  --accent-hot: #ff7a3d;
  --accent-deep: #ff4500;
  --amber: #ffc26e;
  --blue-glow: #5d8ec8;
  box-sizing: border-box;
  width: 100%;
  max-width: 1340px;
  margin: 48px auto 32px;
  padding: 0 20px;
  color: var(--white);
  font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
}

@media (min-width: 640px) {
  .blog-quiz-campaign-wrap {
    padding: 0 32px;
  }
}

.blog-quiz-campaign-wrap *,
.blog-quiz-campaign-wrap *::before,
.blog-quiz-campaign-wrap *::after {
  box-sizing: border-box;
}

.blog-quiz-campaign-wrap .campaign-card {
  display: block;
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.blog-quiz-campaign-wrap .submit-btn {
  cursor: pointer;
  width: 100%;
}

.blog-quiz-campaign-wrap .input-group input {
  width: 100%;
}

.blog-quiz-campaign-error {
  margin-top: 10px;
  color: #ffb4a2;
  font-size: .9rem;
}
:root {
      --bg: #1c1c1c;
      --panel: #121214;
      --panel-2: #17171a;
      --panel-3: #0d0e10;
      --white: #ffffff;
      --soft: #dfdfdf;
      --muted: #a5a5a5;
      --muted-2: #777777;
      --line: #333336;
      --line-soft: #2a2a2c;
      --accent: #ff5722;
      --accent-hot: #ff7a3d;
      --accent-deep: #ff4500;
      --amber: #ffc26e;
      --blue-glow: #5d8ec8;
    }

    .blog-quiz-campaign-wrap, .blog-quiz-campaign-wrap * { box-sizing: border-box; }

    .campaign-card {
      position: relative;
      isolation: isolate;
      width: 100%;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 30px;
      background:
        linear-gradient(135deg, rgba(28, 29, 32, .985), rgba(13, 14, 16, .99) 58%),
        var(--panel);
      box-shadow:
        0 35px 100px rgba(0,0,0,.66),
        0 0 0 1px rgba(255, 87, 34, .055),
        inset 0 1px 0 rgba(255,255,255,.07);
      animation: cardEnter .7s cubic-bezier(.16, 1, .3, 1) both;
    }

    .campaign-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 6% 50%, rgba(255,87,34,.15), transparent 25%),
        radial-gradient(circle at 74% 0%, rgba(255,194,110,.08), transparent 28%),
        linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.025) 50%, transparent 67%);
    }

    .campaign-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 8%;
      right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,194,110,.9), rgba(255,87,34,.75), transparent);
      box-shadow: 0 0 26px rgba(255,87,34,.42);
    }

    @keyframes cardEnter {
      from { opacity: 0; transform: translateY(22px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .card-content {
      display: grid;
      grid-template-columns: 245px 1px minmax(280px, 1.15fr) 1px minmax(280px, .9fr);
      gap: 0 34px;
      align-items: stretch;
      padding: 34px 38px 30px;
    }

    .brand-column {
      position: relative;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .brand-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--amber);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .brand-kicker::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-hot);
      box-shadow: 0 0 12px var(--accent);
    }

    .logo-stage {
      position: relative;
      width: 218px;
      height: 266px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,87,34,.24);
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.07), transparent 30%),
        linear-gradient(155deg, rgba(28,42,63,.55), rgba(9,10,12,.88));
      box-shadow:
        0 22px 42px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -22px 40px rgba(255,87,34,.055);
      transform: perspective(700px) rotateY(-4deg);
      animation: logoFloat 5s ease-in-out infinite;
    }

    .logo-stage::before {
      content: "";
      position: absolute;
      inset: 13px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      pointer-events: none;
    }

    .logo-stage::after {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: 2%;
      height: 34px;
      border-radius: 50%;
      background: rgba(255,87,34,.38);
      filter: blur(22px);
      pointer-events: none;
    }

    .logo-halo {
      position: absolute;
      width: 178px;
      height: 178px;
      border-radius: 50%;
      border: 1px solid rgba(255,194,110,.34);
      box-shadow: 0 0 30px rgba(255,87,34,.18), inset 0 0 24px rgba(93,142,200,.13);
      animation: haloPulse 4.5s ease-in-out infinite;
    }

    .logo-halo::before,
    .logo-halo::after {
      content: "";
      position: absolute;
      inset: 13px;
      border-radius: 50%;
      border: 1px solid rgba(255,87,34,.34);
      transform: rotate(35deg);
      border-left-color: transparent;
      border-bottom-color: transparent;
    }

    .logo-halo::after {
      inset: 25px;
      transform: rotate(-55deg);
      border-color: rgba(93,142,200,.24);
      border-right-color: transparent;
      border-top-color: transparent;
    }

    .brand-logo {
      position: relative;
      z-index: 2;
      width: 184px;
      height: 245px;
      object-fit: contain;
      object-position: center;
      border-radius: 17px;
      mix-blend-mode: screen;
      filter: saturate(1.08) contrast(1.08) drop-shadow(0 12px 17px rgba(0,0,0,.62));
    }

    @keyframes logoFloat {
      0%, 100% { transform: perspective(700px) rotateY(-4deg) translateY(2px); }
      50% { transform: perspective(700px) rotateY(-1deg) translateY(-8px); }
    }

    @keyframes haloPulse {
      0%, 100% { opacity: .62; transform: scale(.98); }
      50% { opacity: 1; transform: scale(1.035); }
    }

    .brand-caption {
      max-width: 220px;
      margin: 17px 0 0;
      color: var(--muted-2);
      font-size: 11px;
      line-height: 1.55;
      letter-spacing: .02em;
    }

    .brand-caption strong { color: #d9d9d9; }

    .vertical-divider {
      width: 1px;
      margin: 3px 0;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,.17) 18%, rgba(255,87,34,.35) 50%, rgba(255,255,255,.12) 82%, transparent);
    }

    .text-content,
    .right-panel {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      margin-bottom: 13px;
      padding: 7px 11px;
      border: 1px solid rgba(255,87,34,.26);
      border-radius: 999px;
      color: var(--amber);
      background: rgba(255,87,34,.07);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-hot);
      box-shadow: 0 0 14px var(--accent);
    }

    h1 {
      margin: 0 0 15px;
      color: var(--white);
      font-size: clamp(30px, 3.4vw, 42px);
      font-weight: 850;
      line-height: 1.02;
      letter-spacing: -.055em;
      text-wrap: balance;
    }

    h1 span { color: var(--accent); }

    .subtitle {
      margin: 0 0 17px;
      color: var(--soft);
      font-size: 14px;
      line-height: 1.58;
    }

    .subtitle span { color: var(--accent-hot); font-weight: 800; }

    .separator {
      width: 52px;
      height: 2px;
      margin: 0 0 17px;
      background: linear-gradient(90deg, var(--accent), var(--amber));
      box-shadow: 0 0 15px rgba(255,87,34,.55);
    }

    .description {
      max-width: 390px;
      margin: 0 0 25px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.62;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      align-self: flex-start;
      padding: 12px 18px;
      border: 1px solid rgba(255,87,34,.55);
      border-radius: 14px;
      background: linear-gradient(100deg, rgba(255,87,34,.13), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 11px 24px rgba(0,0,0,.18);
    }

    .badge svg {
      width: 26px;
      height: 26px;
      stroke: var(--accent-hot);
      filter: drop-shadow(0 0 7px rgba(255,87,34,.35));
    }

    .badge-text {
      color: var(--white);
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -.04em;
    }

    .badge-text span { color: var(--accent-hot); }

    .right-panel { padding-left: 2px; }

    .input-label {
      margin-bottom: 11px;
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
    }

    .input-group { position: relative; margin-bottom: 14px; }

    .input-group svg {
      position: absolute;
      top: 50%;
      left: 15px;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      stroke: #777;
      pointer-events: none;
    }

    .input-group input {
      width: 100%;
      min-height: 51px;
      padding: 15px 15px 15px 45px;
      box-sizing: border-box;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 10px;
      outline: none;
      color: #333;
      background: linear-gradient(180deg, #ffffff, #eeeeef);
      font: inherit;
      font-size: 14px;
      transition: .22s ease;
    }

    .input-group input::placeholder { color: #999; }
    .input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,87,34,.14); }

    .submit-btn {
      width: 100%;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
      padding: 15px 16px;
      border: 0;
      border-radius: 10px;
      color: var(--white);
      background: linear-gradient(115deg, #ff7a18 0%, var(--accent) 46%, var(--accent-deep) 100%);
      box-shadow: 0 14px 28px rgba(255,69,0,.25), inset 0 1px 0 rgba(255,255,255,.34);
      font: inherit;
      font-size: 15px;
      font-weight: 850;
      cursor: pointer;
      transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
    }

    .submit-btn:hover,
    .submit-btn:focus-visible {
      filter: brightness(1.07) saturate(1.08);
      transform: translateY(-2px);
      box-shadow: 0 19px 34px rgba(255,69,0,.34), inset 0 1px 0 rgba(255,255,255,.42);
      outline: none;
    }

    .submit-btn svg { width: 16px; height: 16px; }

    .task-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 27px;
      color: var(--muted-2);
      font-size: 12px;
      text-align: center;
    }

    .task-info svg {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      stroke: var(--accent-hot);
    }

    .steps-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 4px;
      padding: 0 4px;
    }

    .step {
      position: relative;
      width: 31%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 29px;
      left: 65%;
      width: 70%;
      border-top: 1px dashed rgba(255,255,255,.25);
      z-index: 0;
    }

    .step-icon {
      position: relative;
      z-index: 1;
      width: 58px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 11px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.10), rgba(255,87,34,.045) 48%, #121214 76%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 20px rgba(0,0,0,.22);
    }

    .step-icon svg { width: 25px; height: 25px; stroke: #dddddd; }

    .step-number {
      position: absolute;
      top: -5px;
      left: -5px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #121214;
      border-radius: 50%;
      color: var(--white);
      background: var(--accent);
      font-size: 11px;
      font-weight: 800;
    }

    .step-text { color: #aaa; font-size: 11px; line-height: 1.42; }

    .footer-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 17px;
      margin: 0 38px 30px;
      padding: 13px 16px;
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      background: linear-gradient(100deg, rgba(255,87,34,.08), rgba(255,255,255,.025), rgba(93,142,200,.06));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

    .footer-bar svg { width: 18px; height: 18px; stroke: var(--accent-hot); }
    .footer-text-1, .footer-text-2 { font-size: 13px; font-weight: 700; }
    .footer-text-1 { color: var(--white); }
    .footer-text-2 { color: var(--accent-hot); }

    .footer-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px rgba(255,87,34,.58);
    }

    @media (max-width: 980px) {
      .card-content {
        grid-template-columns: 210px 1px minmax(270px, 1fr);
        gap: 0 25px;
      }
      .right-panel {
        grid-column: 3;
        margin-top: 30px;
        padding-top: 28px;
        border-top: 1px solid rgba(255,255,255,.12);
      }
      .card-content > .vertical-divider:nth-of-type(2) { display: none; }
    }

    @media (max-width: 700px) {
      .blog-quiz-campaign-wrap { padding-left: 16px; padding-right: 16px; }
      .blog-quiz-campaign-wrap .campaign-card,
      .campaign-card { border-radius: 24px; margin-left: auto; margin-right: auto; }
      .card-content {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 28px 22px 24px;
      }
      .brand-column { align-items: flex-start; text-align: left; }
      .brand-kicker { margin-left: 4px; }
      .logo-stage { width: 100%; height: 220px; transform: none; }
      .brand-logo { width: 155px; height: 202px; }
      .logo-halo { width: 150px; height: 150px; }
      .brand-caption { max-width: 360px; margin-left: 4px; }
      .vertical-divider { width: 100%; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, rgba(255,87,34,.4), transparent); }
      .right-panel { margin-top: 0; padding-top: 0; border-top: 0; }
      .footer-bar { flex-wrap: wrap; gap: 10px 14px; margin: 0 22px 24px; text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }