/* ============================================================================
   binwash.pro - landing styles ("hydro night showroom", 2026-07-19)
   Loaded AFTER bw-core.css. Holds landing-only pieces: hero + operator
   console mock, rising bubbles + water spray, lifecycle ticker, the
   trash-day "difference" rail, feature tiles, how-it-works steps, the
   old-way-vs-binwash swap panel, featured-operator cards, final CTA.
   ============================================================================ */

/* ---------------------------------------------------------------- hero ---- */

.bw-hero { position: relative; padding: clamp(56px, 9vh, 104px) 0 34px; }
.bw-hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(34rem 24rem at var(--mx, 72%) var(--my, 28%), rgba(36, 224, 230, .09), transparent 60%);
  transition: background .18s linear;
}
.bw-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 6.1fr) minmax(0, 5.5fr);
  gap: clamp(28px, 4.5vw, 60px); align-items: center;
}
@media (max-width: 960px) { .bw-hero__grid { grid-template-columns: 1fr; } }

.bw-hero__pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--bw-glass); border: 1px solid var(--bw-line);
  color: #b4ecef; font: 600 12.5px/1 var(--bw-mono);
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 26px;
}
.bw-hero__pill i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bw-mint);
  box-shadow: 0 0 0 4px rgba(88, 240, 166, .18);
  animation: bw-pulse 2.6s ease-in-out infinite;
}
@keyframes bw-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(88, 240, 166, .22); }
  50%      { box-shadow: 0 0 0 7px rgba(88, 240, 166, .04); }
}

.bw-hero h1 {
  font-family: var(--bw-display);
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  font-weight: 600; line-height: 1.0; letter-spacing: -.025em;
  color: var(--bw-ink); margin: 0 0 22px;
}
.bw-hero h1 .bw-w {
  display: inline-block;
  opacity: 0; transform: translateY(.5em);
  animation: bw-word-in .7s var(--bw-ease) forwards;
}
.bw-hero h1 .bw-w:nth-child(1) { animation-delay: .05s; }
.bw-hero h1 .bw-w:nth-child(2) { animation-delay: .14s; }
.bw-hero h1 .bw-w:nth-child(3) { animation-delay: .23s; }
@keyframes bw-word-in { to { opacity: 1; transform: translateY(0); } }

.bw-hero h1 .bw-payoff {
  display: block; opacity: 0;
  background: var(--bw-grad-text); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation-name: bw-word-in, bw-sheen;
  animation-duration: .8s, 9s;
  animation-delay: .4s, 1.6s;
  animation-iteration-count: 1, infinite;
  animation-timing-function: var(--bw-ease), ease-in-out;
  animation-fill-mode: forwards, none;
  padding-bottom: .08em; margin-bottom: -.08em;
}
@keyframes bw-sheen {
  0%, 55%, 100% { background-position: 0% 0; }
  72%           { background-position: 92% 0; }
}

.bw-hero__sub {
  max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  color: var(--bw-body); margin: 0 0 30px; text-wrap: pretty;
}
.bw-hero__sub strong { color: #d6e8f0; font-weight: 600; }

.bw-hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; }
.bw-hero__facts {
  display: flex; flex-wrap: wrap; gap: 7px 18px; padding: 0; margin: 0; list-style: none;
  color: var(--bw-dim); font-size: .87rem;
}
.bw-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.bw-hero__facts li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--bw-aqua-deep); }

/* rising bubbles inside the hero */
.bw-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bw-bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(36,224,230,.16) 55%, rgba(36,224,230,0) 72%);
  border: 1px solid rgba(150, 230, 235, .18);
  opacity: 0; animation: bw-rise linear infinite;
}
@keyframes bw-rise {
  0%   { opacity: 0; transform: translateY(0) scale(.7); }
  12%  { opacity: .8; }
  85%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-88vh) scale(1.05); }
}
.bw-bubble:nth-child(1) { left: 8%;  width: 12px; height: 12px; animation-duration: 15s; animation-delay: 0s; }
.bw-bubble:nth-child(2) { left: 22%; width: 8px;  height: 8px;  animation-duration: 19s; animation-delay: 3s; }
.bw-bubble:nth-child(3) { left: 40%; width: 16px; height: 16px; animation-duration: 22s; animation-delay: 6s; }
.bw-bubble:nth-child(4) { left: 63%; width: 7px;  height: 7px;  animation-duration: 17s; animation-delay: 2s; }
.bw-bubble:nth-child(5) { left: 78%; width: 13px; height: 13px; animation-duration: 21s; animation-delay: 5s; }
.bw-bubble:nth-child(6) { left: 91%; width: 9px;  height: 9px;  animation-duration: 18s; animation-delay: 8s; }

/* --------------------------------------------------- hero console mock ---- */

.bw-stage { perspective: 1300px; position: relative; }
.bw-console {
  position: relative; border-radius: 22px;
  background:
    linear-gradient(rgba(11, 22, 38, .93), rgba(8, 17, 30, .96)) padding-box,
    linear-gradient(150deg, rgba(36, 224, 230, .5), rgba(150, 185, 205, .12) 40%, rgba(88, 240, 166, .45)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .85), 0 0 60px -30px rgba(36, 224, 230, .35);
  transform: rotateX(var(--rx, 2deg)) rotateY(var(--ry, -7deg));
  transform-style: preserve-3d;
  transition: transform .22s var(--bw-ease);
  overflow: hidden;
}
.bw-console::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(26rem 16rem at var(--gx, 78%) var(--gy, 12%), rgba(255, 255, 255, .07), transparent 58%);
}
.bw-console__chrome {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--bw-line-soft); background: rgba(255, 255, 255, .022);
}
.bw-console__dots { display: inline-flex; gap: 6px; }
.bw-console__dots i { width: 9px; height: 9px; border-radius: 50%; background: #26384c; }
.bw-console__dots i:first-child { background: #f87171aa; }
.bw-console__dots i:nth-child(2) { background: #fbbf55aa; }
.bw-console__dots i:last-child  { background: #58f0a6aa; }
.bw-console__url {
  flex: 1; text-align: center; font: 500 11.5px/1 var(--bw-mono); color: #7c93a5;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--bw-line-soft);
  border-radius: 999px; padding: 6px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bw-console__url b { color: var(--bw-aqua); font-weight: 600; }

.bw-console__body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; padding: 14px; }
@media (max-width: 480px) { .bw-console__body { grid-template-columns: 1fr; } }

.bw-console__head {
  grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 2px 4px 0;
}
.bw-console__title { font: 700 14px/1.2 var(--bw-display); color: var(--bw-ink); letter-spacing: -.01em; }
.bw-console__meta { font: 600 11px/1 var(--bw-mono); color: var(--bw-dim); letter-spacing: .04em; }
.bw-console__meta b { color: var(--bw-mint); font-weight: 700; }

.bw-jobs { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bw-job {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; background: rgba(255, 255, 255, .03);
  border: 1px solid var(--bw-line-soft); border-radius: 13px;
}
.bw-job__time { grid-row: span 2; font: 700 10.5px/1.5 var(--bw-mono); color: #7fe6dc; text-align: center; padding-right: 10px; border-right: 1px solid var(--bw-line-soft); }
.bw-job__name { grid-column: 2 / 4; font-size: 12.5px; font-weight: 650; color: #e6eef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-job__sub { grid-column: 2; grid-row: 2; font-size: 11px; color: var(--bw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .bw-job__name, .bw-job__sub { white-space: normal; } }
.bw-pill {
  grid-column: 3; grid-row: 2; justify-self: end;
  font: 700 9px/1 var(--bw-mono); letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.bw-pill--ok   { color: #6ff0c0; background: rgba(88, 240, 166, .1);  border: 1px solid rgba(88, 240, 166, .28); }
.bw-pill--live { color: #7fe6ea; background: rgba(36, 224, 230, .1);  border: 1px solid rgba(36, 224, 230, .32); }
.bw-pill--hold { color: #a8b6c8; background: rgba(150, 175, 200, .1); border: 1px solid rgba(150, 175, 200, .25); }

.bw-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bw-stat { padding: 13px 14px 11px; background: rgba(255, 255, 255, .03); border: 1px solid var(--bw-line-soft); border-radius: 13px; }
.bw-stat__label { font: 600 9.5px/1.3 var(--bw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bw-dim); margin-bottom: 7px; white-space: nowrap; }
.bw-stat__num { font: 700 22px/1 var(--bw-display); color: var(--bw-ink); letter-spacing: -.02em; }
.bw-stat__num small { font: 700 11px/1 var(--bw-mono); color: #6ff0c0; margin-left: 7px; }
.bw-spark { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 10px; }
.bw-spark i {
  flex: 1; border-radius: 3px 3px 1px 1px; min-height: 4px;
  background: linear-gradient(180deg, rgba(36, 224, 230, .85), rgba(10, 166, 191, .26));
  transform-origin: bottom; transform: scaleY(0);
  animation: bw-bar .8s var(--bw-ease) forwards;
}
.bw-spark i:nth-child(1) { height: 34%; animation-delay: .9s; }
.bw-spark i:nth-child(2) { height: 50%; animation-delay: 1.0s; }
.bw-spark i:nth-child(3) { height: 42%; animation-delay: 1.1s; }
.bw-spark i:nth-child(4) { height: 66%; animation-delay: 1.2s; }
.bw-spark i:nth-child(5) { height: 56%; animation-delay: 1.3s; }
.bw-spark i:nth-child(6) { height: 82%; animation-delay: 1.4s; }
.bw-spark i:nth-child(7) { height: 100%; animation-delay: 1.5s; background: linear-gradient(180deg, rgba(88, 240, 166, .9), rgba(31, 207, 128, .3)); }
@keyframes bw-bar { to { transform: scaleY(1); } }

.bw-toasts { position: relative; height: 58px; }
.bw-toast {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; background: rgba(11, 24, 40, .9);
  border: 1px solid rgba(36, 224, 230, .28); border-radius: 13px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(10px); overflow: hidden;
  animation: bw-toast 8s ease-in-out infinite;
}
.bw-toast:nth-child(2) { animation-delay: 4s; border-color: rgba(88, 240, 166, .32); }
@keyframes bw-toast {
  0%        { opacity: 0; transform: translateY(10px); }
  6%, 49%   { opacity: 1; transform: translateY(0); }
  55%, 100% { opacity: 0; transform: translateY(-8px); }
}
.bw-toast__icon { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(36, 224, 230, .12); color: var(--bw-aqua); }
.bw-toast:nth-child(2) .bw-toast__icon { background: rgba(88, 240, 166, .13); color: var(--bw-mint); }
.bw-toast__icon svg { width: 15px; height: 15px; }
.bw-toast__txt { min-width: 0; }
.bw-toast__txt b { display: block; font-size: 12px; color: #e6eef5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-toast__txt span { display: block; font-size: 11px; color: var(--bw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bw-chipline { display: flex; flex-wrap: wrap; gap: 7px; }
.bw-chip {
  font: 600 10.5px/1 var(--bw-mono); color: #b6c6d5; background: rgba(255, 255, 255, .035);
  border: 1px solid var(--bw-line-soft); padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.bw-chip b { color: var(--bw-mint); font-weight: 700; }

/* water spray arc sweeping across the console head, GPU-cheap */
.bw-spray {
  position: absolute; top: 40px; left: -12%; width: 42%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(120, 240, 235, .0), rgba(120, 240, 235, .55), rgba(255,255,255,.75));
  filter: blur(.4px); border-radius: 999px; opacity: 0; transform: rotate(8deg);
  animation: bw-spray 7.5s var(--bw-ease) infinite; pointer-events: none;
}
@keyframes bw-spray {
  0%, 100% { opacity: 0; transform: translateX(0) rotate(8deg); }
  8%       { opacity: .0; }
  16%      { opacity: .9; }
  30%      { opacity: 0; transform: translateX(220%) rotate(8deg); }
}

/* -------------------------------------------------------------- ticker ---- */

.bw-ticker {
  margin: 46px 0 0; border-top: 1px solid var(--bw-line-soft); border-bottom: 1px solid var(--bw-line-soft);
  background: rgba(255, 255, 255, .014); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bw-ticker__track { display: flex; width: max-content; animation: bw-marquee 36s linear infinite; }
.bw-ticker:hover .bw-ticker__track { animation-play-state: paused; }
.bw-ticker__seq { display: flex; align-items: center; flex: none; padding: 15px 0; }
.bw-ticker__seq span { font: 640 13.5px/1 var(--bw-display); letter-spacing: .16em; text-transform: uppercase; color: #7688a0; white-space: nowrap; padding: 0 14px; }
.bw-ticker__seq span.is-loop { color: var(--bw-aqua); }
.bw-ticker__seq i { font-style: normal; color: var(--bw-mint-deep); font-size: 12px; opacity: .85; }
@keyframes bw-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------ trash-day difference ---- */

.bw-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; position: relative; }
@media (max-width: 820px) { .bw-flow { grid-template-columns: 1fr; } }
.bw-flow__card {
  position: relative; padding: 26px 24px 24px; border-radius: var(--bw-r);
  background: linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  border: 1px solid var(--bw-line-soft); overflow: hidden;
}
.bw-flow__step { font: 700 10.5px/1 var(--bw-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bw-aqua); margin-bottom: 12px; }
.bw-flow__card h3 { font-family: var(--bw-display); font-size: 1.08rem; font-weight: 650; color: var(--bw-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.bw-flow__card p { margin: 0 0 16px; font-size: .92rem; color: var(--bw-body); }
.bw-cad { display: flex; flex-wrap: wrap; gap: 7px; }
.bw-cad span {
  font: 600 11.5px/1 var(--bw-mono); color: #c2d2df; padding: 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--bw-line-soft);
}
.bw-cad span.on { color: #04211f; background: var(--bw-grad-cta); border-color: transparent; font-weight: 700; }
.bw-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bw-week span {
  display: grid; place-items: center; height: 30px; border-radius: 8px;
  font: 700 10px/1 var(--bw-mono); color: #8ba0b2;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--bw-line-soft);
}
.bw-week span.on { color: #04211f; background: var(--bw-mint); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(88, 240, 166, .6); }
.bw-collect { display: flex; align-items: center; gap: 10px; }
.bw-collect__bin { flex: none; width: 40px; height: 44px; color: var(--bw-aqua); }
.bw-collect__bin svg { width: 100%; height: 100%; display: block; }
.bw-collect__txt b { display: block; font: 700 13px/1.3 var(--bw-display); color: var(--bw-ink); }
.bw-collect__txt span { font-size: .84rem; color: var(--bw-dim); }

/* --------------------------------------------------------------- tiles ---- */

.bw-tiles { display: grid; gap: 14px; margin-top: 38px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .bw-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bw-tiles { grid-template-columns: 1fr; } }
.bw-tile {
  position: relative; padding: 24px 22px 22px; border-radius: var(--bw-r);
  background: linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .014));
  border: 1px solid var(--bw-line-soft); overflow: hidden;
  transition: transform .25s var(--bw-ease), border-color .25s, background .25s, box-shadow .25s;
}
.bw-tile::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(36, 224, 230, .5), transparent);
  opacity: 0; transition: opacity .25s;
}
.bw-tile:hover {
  transform: translateY(-5px); border-color: rgba(36, 224, 230, .3);
  background: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
  box-shadow: 0 26px 50px -30px rgba(2, 10, 20, .9), 0 0 40px -22px rgba(36, 224, 230, .4);
}
.bw-tile:hover::before { opacity: 1; }
.bw-tile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.bw-tile__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--bw-aqua); background: rgba(36, 224, 230, .09); border: 1px solid rgba(36, 224, 230, .18);
  transition: color .25s, background .25s, transform .25s var(--bw-ease);
}
.bw-tile:hover .bw-tile__icon { color: var(--bw-mint); background: rgba(88, 240, 166, .1); border-color: rgba(88, 240, 166, .24); transform: rotate(-4deg) scale(1.06); }
.bw-tile__icon svg { width: 21px; height: 21px; }
.bw-tile__num { font: 700 11px/1 var(--bw-mono); color: #445468; letter-spacing: .14em; }
.bw-tile h3 { font-family: var(--bw-display); font-size: 1.06rem; font-weight: 650; letter-spacing: -.012em; color: var(--bw-ink); margin: 0 0 7px; }
.bw-tile p { margin: 0; font-size: .915rem; line-height: 1.55; color: var(--bw-body); }

/* --------------------------------------------------------------- steps ---- */

.bw-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; counter-reset: bw-step; }
@media (max-width: 900px) { .bw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bw-steps { grid-template-columns: 1fr; } }
.bw-steps::before {
  content: ""; position: absolute; top: 21px; left: 4%; right: 4%; height: 2px;
  background: linear-gradient(90deg, var(--bw-aqua-deep), var(--bw-aqua) 45%, var(--bw-mint-deep));
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  transition: transform 1.4s var(--bw-ease) .25s; opacity: .5;
}
.bw-steps.is-in::before { transform: scaleX(1); }
@media (max-width: 900px) { .bw-steps::before { display: none; } }
.bw-step {
  position: relative; padding: 30px 20px 22px; border-radius: var(--bw-r);
  background: linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  border: 1px solid var(--bw-line-soft);
}
.bw-step::before {
  counter-increment: bw-step; content: "0" counter(bw-step);
  position: absolute; top: -21px; left: 18px; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font: 700 15px/1 var(--bw-display); color: #04211f;
  background: linear-gradient(135deg, #7ff3ec, var(--bw-aqua-deep));
  box-shadow: 0 10px 24px -10px rgba(36, 224, 230, .6);
}
.bw-step:last-child::before { background: linear-gradient(135deg, #7ef2b4, var(--bw-mint-deep)); box-shadow: 0 10px 24px -10px rgba(88, 240, 166, .6); }
.bw-step h3 { font-family: var(--bw-display); font-size: 1.03rem; font-weight: 650; color: var(--bw-ink); margin: 6px 0 7px; letter-spacing: -.01em; }
.bw-step p { margin: 0; font-size: .91rem; color: var(--bw-body); }

/* ------------------------------------------------------------- swap ------- */

.bw-swap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 38px; align-items: stretch; }
@media (max-width: 880px) { .bw-swap { grid-template-columns: 1fr; } }
.bw-receipt {
  border-radius: var(--bw-r); padding: 26px 26px 22px;
  background: linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  border: 1px solid var(--bw-line-soft);
}
.bw-receipt__head {
  font: 700 11px/1 var(--bw-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bw-dim); margin-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline;
}
.bw-receipt ul { list-style: none; margin: 0; padding: 0; }
.bw-receipt li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 2px; border-bottom: 1px dashed rgba(150, 185, 205, .12); font-size: .95rem;
}
.bw-receipt li span { color: #c9d6e2; font-weight: 550; }
.bw-receipt li small { font: 600 12px/1 var(--bw-mono); color: var(--bw-dim); white-space: nowrap; }
.bw-receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 2px 0; font-weight: 700; color: var(--bw-ink); }
.bw-receipt__total small { font: 700 13px/1 var(--bw-mono); color: #f0a35f; }
.bw-receipt__total s { color: #f0a35f; text-decoration-thickness: 2px; }

.bw-deal {
  position: relative; overflow: hidden; border-radius: var(--bw-r); padding: 30px 28px;
  background:
    linear-gradient(rgba(9, 20, 34, .9), rgba(8, 16, 28, .95)) padding-box,
    linear-gradient(150deg, rgba(88, 240, 166, .55), rgba(36, 224, 230, .4)) border-box;
  border: 1px solid transparent; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.bw-deal::before {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(24rem 14rem at 80% 0%, rgba(88, 240, 166, .12), transparent 60%); pointer-events: none;
}
.bw-deal__whisper { font: 700 11px/1 var(--bw-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bw-mint); }
.bw-deal__price { font-family: var(--bw-display); font-size: clamp(3.2rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -.04em; color: var(--bw-ink); line-height: 1; }
.bw-deal__price small { font: 600 1rem var(--bw-mono); color: var(--bw-dim); letter-spacing: 0; }
.bw-deal__copy { color: var(--bw-body); font-size: .97rem; margin: 6px 0 18px; max-width: 34ch; }
.bw-deal .bw-btn { align-self: flex-start; }

/* --------------------------------------------------- featured operators ---- */

.bw-featured { display: grid; gap: 15px; margin-top: 38px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bw-featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bw-featured { grid-template-columns: repeat(3, 1fr); } }
.bw-fcard {
  position: relative; display: flex; flex-direction: column; border-radius: var(--bw-r); overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .012));
  padding: 20px 22px; color: var(--bw-ink); text-decoration: none;
  border: 1px solid var(--bw-line-soft);
  transition: transform .25s var(--bw-ease), box-shadow .25s, border-color .25s;
}
.bw-fcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--bw-aqua), transparent 92%); }
.bw-fcard:hover {
  transform: translateY(-5px); color: var(--bw-ink); border-color: rgba(36, 224, 230, .4);
  box-shadow: 0 26px 55px -30px rgba(2, 10, 20, .9), 0 0 44px -20px rgba(36, 224, 230, .45);
}
.bw-fcard__name { font-family: var(--bw-display); font-weight: 650; font-size: 1.06rem; letter-spacing: -.01em; margin-bottom: 3px; }
.bw-fcard__loc { color: var(--bw-dim); font: 600 11.5px/1.4 var(--bw-mono); margin-bottom: 9px; }
.bw-fcard__tag { color: var(--bw-body); font-size: .9rem; line-height: 1.5; margin: 2px 0 10px; }
.bw-fcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.bw-fcard__chip { font: 600 10.5px/1 var(--bw-mono); color: #a9d9dd; background: rgba(36, 224, 230, .08); border: 1px solid rgba(36, 224, 230, .18); padding: 5px 9px; border-radius: 999px; }
.bw-fcard__badge { margin-top: 12px; font: 700 10.5px/1 var(--bw-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bw-aqua); }

/* ----------------------------------------------------------- final cta ---- */

.bw-final { padding: clamp(80px, 10vw, 130px) 22px 0; }
.bw-final__panel {
  position: relative; overflow: hidden; max-width: var(--bw-max); margin: 0 auto;
  padding: clamp(52px, 7vw, 84px) clamp(24px, 5vw, 72px); border-radius: 30px; text-align: center;
  background:
    linear-gradient(rgba(9, 18, 32, .88), rgba(7, 14, 26, .94)) padding-box,
    linear-gradient(140deg, rgba(36, 224, 230, .55), rgba(150, 185, 205, .12) 45%, rgba(88, 240, 166, .55)) border-box;
  border: 1px solid transparent; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .9);
}
.bw-final__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(30rem 16rem at 18% 0%, rgba(36, 224, 230, .12), transparent 60%),
    radial-gradient(30rem 16rem at 85% 100%, rgba(88, 240, 166, .1), transparent 60%);
}
.bw-final__mark { position: absolute; right: -2%; bottom: -20%; width: 340px; height: 340px; opacity: .05; pointer-events: none; user-select: none; color: #fff; }
.bw-final__mark svg { width: 100%; height: 100%; display: block; }
.bw-final h2 {
  position: relative; font-family: var(--bw-display); font-size: clamp(2.2rem, 4.6vw, 3.3rem);
  font-weight: 600; letter-spacing: -.022em; line-height: 1.02; color: var(--bw-ink); margin: 0 0 16px;
}
.bw-final p { position: relative; color: var(--bw-body); margin: 0 auto 30px; max-width: 46ch; font-size: 1.05rem; }
.bw-final__actions { position: relative; display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }