.okod-callout {
  --okod-accent: #f5c400;
  --okod-overlay: 76%;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
  background-color: #090a0a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
}
.okod-callout *, .okod-callout *::before, .okod-callout *::after { box-sizing: border-box; }
.okod-callout::before {
  position: absolute; z-index: -2; inset: 0; content: "";
  background: linear-gradient(90deg, rgb(0 0 0 / var(--okod-overlay)) 0%, rgba(0,0,0,.74) 48%, rgba(0,0,0,.22) 100%);
}
.okod-callout::after {
  position: absolute; z-index: -1; inset: auto 0 0; height: 42%; content: "";
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.okod-callout__texture { position: absolute; z-index: -1; inset: 0; opacity: .22; background-image: radial-gradient(circle at 12% 24%, var(--okod-accent) 0 1px, transparent 2px), radial-gradient(circle at 84% 70%, #fff 0 1px, transparent 2px); background-size: 61px 61px, 83px 83px; mix-blend-mode: overlay; }
.okod-callout__inner { width: min(100% - 40px, 1380px); margin-inline: auto; padding: clamp(72px, 8vw, 124px) 0; }
.okod-callout__content { max-width: 820px; padding: clamp(28px, 4vw, 58px); background: linear-gradient(135deg, rgba(13,13,13,.92), rgba(13,13,13,.68)); border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--okod-accent); border-radius: 2px 18px 18px 2px; box-shadow: 0 28px 70px rgba(0,0,0,.4); backdrop-filter: blur(6px); }
.okod-callout__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--okod-accent); font-size: 14px; font-weight: 900; letter-spacing: .18em; }
.okod-callout__kicker::before { width: 38px; height: 3px; content: ""; background: var(--okod-accent); }
.okod-callout__title { margin: 0; color: #fff; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(48px, 6vw, 88px); font-weight: 900; line-height: .94; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 5px 22px rgba(0,0,0,.55); }
.okod-callout__rule { width: min(190px, 38%); height: 5px; margin: 25px 0; background: var(--okod-accent); transform-origin: left; }
.okod-callout__copy { color: #e6e6e6; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; }
.okod-callout__copy p { margin: 0 0 13px; }.okod-callout__copy p:last-child { margin-bottom: 0; }.okod-callout__copy strong { color: #fff; }
.okod-callout__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 220px; min-height: 58px; margin-top: 30px; padding: 13px 25px; overflow: hidden; color: #090909; background: var(--okod-accent); border: 2px solid var(--okod-accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(245,196,0,.2); font-size: 17px; font-weight: 900; letter-spacing: .04em; text-decoration: none; transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.okod-callout__button::before { position: absolute; inset: -60% auto -60% -35%; width: 22%; content: ""; background: rgba(255,255,255,.55); transform: rotate(18deg); transition: left .55s ease; }
.okod-callout__button:hover::before { left: 120%; }.okod-callout__button:hover, .okod-callout__button:focus-visible { color: var(--okod-accent); background: #0a0a0a; box-shadow: 0 14px 38px rgba(245,196,0,.32); outline: none; }
.okod-callout__button svg { width: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.okod-callout__button.is-floating { animation: okod-float 3s ease-in-out infinite; }
.okod-callout [data-okod-animate] { opacity: 0; transform: translate3d(-44px, 18px, 0); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); transition-delay: var(--delay); }
.okod-callout .okod-callout__rule[data-okod-animate] { transform: scaleX(0); }
.okod-callout.is-visible [data-okod-animate] { opacity: 1; transform: translate3d(0,0,0); }
.okod-callout.is-visible .okod-callout__rule[data-okod-animate] { transform: scaleX(1); }
@keyframes okod-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 767px) { .okod-callout { background-position: center top; }.okod-callout.has-mobile-background { background-image: var(--okod-mobile-bg) !important; }.okod-callout::before { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.9) 65%); }.okod-callout__inner { width: min(100% - 24px, 620px); padding: 50px 0; }.okod-callout__content { padding: 30px 22px; }.okod-callout__title { font-size: clamp(42px, 14vw, 66px); }.okod-callout__button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .okod-callout *, .okod-callout *::before { animation: none !important; transition-duration: .01ms !important; }.okod-callout [data-okod-animate] { opacity: 1; transform: none; } }