/* === Broadway Originals – Combined CSS Bundle === */
/*! ======================================================================
 * Broadway Originals — Single Tailwind CSS Bundle
 */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial
    }
  }
}

@layer theme {

  :root,
  :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-500: #dc3545;
    --color-red-600: oklch(57.7% .245 27.325);
    --color-green-500: #198754;
    --color-blue-400: #4285f4;
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-gray-50: #f9f9f9;
    --color-gray-100: #f4f4f4;
    --color-gray-200: #e3e3e3;
    --color-gray-300: #d5d5d5;
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: #8e8e8e;
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: #3b3838;
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: #212529;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xl: 36rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1/.75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25/.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5/1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75/1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75/1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2/1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25/1.875);
    --font-weight-light: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand-teal: #00a8a9;
    --color-brand-dark: #1f6767
  }
}

@layer base {

  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit
  }

  b,
  strong {
    font-weight: bolder
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  :-moz-focusring {
    outline: auto
  }

  progress {
    vertical-align: baseline
  }

  summary {
    display: list-item
  }

  ol,
  ul,
  menu {
    list-style: none
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block
  }

  img,
  video {
    max-width: 100%;
    height: auto
  }

  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px
  }

  ::file-selector-button {
    margin-inline-end: 4px
  }

  ::placeholder {
    opacity: 1
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color: currentColor
    }

    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }

  textarea {
    resize: vertical
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit
  }

  ::-webkit-datetime-edit {
    display: inline-flex
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0
  }

  ::-webkit-datetime-edit {
    padding-block: 0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  button,
  input:where([type=button], [type=reset], [type=submit]) {
    appearance: button
  }

  ::file-selector-button {
    appearance: button
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none !important
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse
  }

  .invisible {
    visibility: hidden
  }

  .visible {
    visibility: visible
  }

  .absolute {
    position: absolute
  }

  .fixed {
    position: fixed
  }

  .relative {
    position: relative
  }

  .static {
    position: static
  }

  .sticky {
    position: sticky
  }

  .inset-0 {
    inset: calc(var(--spacing)*0)
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing)*0)
  }

  .start-0 {
    inset-inline-start: calc(var(--spacing)*0)
  }

  .start-50 {
    inset-inline-start: calc(var(--spacing)*50)
  }

  .start-100 {
    inset-inline-start: calc(var(--spacing)*100)
  }

  .end-0 {
    inset-inline-end: calc(var(--spacing)*0)
  }

  .end-50 {
    inset-inline-end: calc(var(--spacing)*50)
  }

  .end-100 {
    inset-inline-end: calc(var(--spacing)*100)
  }

  .top-0 {
    top: calc(var(--spacing)*0)
  }

  .top-1\/2 {
    top: 50%
  }

  .top-50 {
    top: calc(var(--spacing)*50)
  }

  .top-100 {
    top: calc(var(--spacing)*100)
  }

  .right-0 {
    right: calc(var(--spacing)*0)
  }

  .bottom-0 {
    bottom: calc(var(--spacing)*0)
  }

  .bottom-50 {
    bottom: calc(var(--spacing)*50)
  }

  .bottom-100 {
    bottom: calc(var(--spacing)*100)
  }

  .left-0 {
    left: calc(var(--spacing)*0)
  }

  .left-1\/2 {
    left: 50%
  }

  .z-0 {
    z-index: 0
  }

  .z-1 {
    z-index: 1
  }

  .z-2 {
    z-index: 2
  }

  .z-3 {
    z-index: 3
  }

  .z-40 {
    z-index: 40
  }

  .z-50 {
    z-index: 50
  }

  .order-0 {
    order: 0
  }

  .order-1 {
    order: 1
  }

  .order-2 {
    order: 2
  }

  .order-3 {
    order: 3
  }

  .order-4 {
    order: 4
  }

  .order-5 {
    order: 5
  }

  .order-first {
    order: -9999
  }

  .order-last {
    order: 9999
  }

  .col-1 {
    grid-column: 1
  }

  .col-2 {
    grid-column: 2
  }

  .col-3 {
    grid-column: 3
  }

  .col-4 {
    grid-column: 4
  }

  .col-5 {
    grid-column: 5
  }

  .col-6 {
    grid-column: 6
  }

  .col-7 {
    grid-column: 7
  }

  .col-8 {
    grid-column: 8
  }

  .col-9 {
    grid-column: 9
  }

  .col-10 {
    grid-column: 10
  }

  .col-11 {
    grid-column: 11
  }

  .col-12 {
    grid-column: 12
  }

  .col-auto {
    grid-column: auto
  }

  .float-end {
    float: inline-end
  }

  .float-none {
    float: none
  }

  .float-start {
    float: inline-start
  }

  .container {
    width: 100%
  }

  @media (min-width:40rem) {
    .container {
      max-width: 40rem
    }
  }

  @media (min-width:48rem) {
    .container {
      max-width: 48rem
    }
  }

  @media (min-width:64rem) {
    .container {
      max-width: 64rem
    }
  }

  @media (min-width:80rem) {
    .container {
      max-width: 80rem
    }
  }

  @media (min-width:96rem) {
    .container {
      max-width: 96rem
    }
  }

  .m-0 {
    margin: calc(var(--spacing)*0)
  }

  .m-1 {
    margin: calc(var(--spacing)*1)
  }

  .m-2 {
    margin: calc(var(--spacing)*2)
  }

  .m-3 {
    margin: calc(var(--spacing)*3)
  }

  .m-4 {
    margin: calc(var(--spacing)*4)
  }

  .m-5 {
    margin: calc(var(--spacing)*5)
  }

  .m-auto {
    margin: auto
  }

  .mx-0 {
    margin-inline: calc(var(--spacing)*0)
  }

  .mx-1 {
    margin-inline: calc(var(--spacing)*1)
  }

  .mx-2 {
    margin-inline: calc(var(--spacing)*2)
  }

  .mx-3 {
    margin-inline: calc(var(--spacing)*3)
  }

  .mx-4 {
    margin-inline: calc(var(--spacing)*4)
  }

  .mx-5 {
    margin-inline: calc(var(--spacing)*5)
  }

  .mx-auto {
    margin-inline: auto
  }

  .my-0 {
    margin-block: calc(var(--spacing)*0)
  }

  .my-1 {
    margin-block: calc(var(--spacing)*1)
  }

  .my-2 {
    margin-block: calc(var(--spacing)*2)
  }

  .my-3 {
    margin-block: calc(var(--spacing)*3)
  }

  .my-4 {
    margin-block: calc(var(--spacing)*4)
  }

  .my-5 {
    margin-block: calc(var(--spacing)*5)
  }

  .my-6 {
    margin-block: calc(var(--spacing)*6)
  }

  .my-8 {
    margin-block: calc(var(--spacing)*8)
  }

  .my-auto {
    margin-block: auto
  }

  .ms-0 {
    margin-inline-start: calc(var(--spacing)*0)
  }

  .ms-1 {
    margin-inline-start: calc(var(--spacing)*1)
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing)*2)
  }

  .ms-3 {
    margin-inline-start: calc(var(--spacing)*3)
  }

  .ms-4 {
    margin-inline-start: calc(var(--spacing)*4)
  }

  .ms-5 {
    margin-inline-start: calc(var(--spacing)*5)
  }

  .ms-auto {
    margin-inline-start: auto
  }

  .me-0 {
    margin-inline-end: calc(var(--spacing)*0)
  }

  .me-1 {
    margin-inline-end: calc(var(--spacing)*1)
  }

  .me-2 {
    margin-inline-end: calc(var(--spacing)*2)
  }

  .me-3 {
    margin-inline-end: calc(var(--spacing)*3)
  }

  .me-4 {
    margin-inline-end: calc(var(--spacing)*4)
  }

  .me-5 {
    margin-inline-end: calc(var(--spacing)*5)
  }

  .me-auto {
    margin-inline-end: auto
  }

  .-mt-8 {
    margin-top: calc(var(--spacing)*-8)
  }

  .mt-0 {
    margin-top: calc(var(--spacing)*0)
  }

  .mt-1 {
    margin-top: calc(var(--spacing)*1)
  }

  .mt-2 {
    margin-top: calc(var(--spacing)*2)
  }

  .mt-3 {
    margin-top: calc(var(--spacing)*3)
  }

  .mt-4 {
    margin-top: calc(var(--spacing)*4)
  }

  .mt-5 {
    margin-top: calc(var(--spacing)*5)
  }

  .mt-8 {
    margin-top: calc(var(--spacing)*8)
  }

  .mt-auto {
    margin-top: auto
  }

  .mr-2 {
    margin-right: calc(var(--spacing)*2)
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing)*0)
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing)*1)
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing)*2)
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing)*3)
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing)*4)
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing)*5)
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing)*6)
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing)*8)
  }

  .mb-auto {
    margin-bottom: auto
  }

  .btn-brand {
    background-color: var(--color-brand-teal);
    padding-inline: calc(var(--spacing)*4);
    padding-block: calc(var(--spacing)*2);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    display: inline-flex
  }

  @media (hover:hover) {
    .btn-brand:hover {
      background-color: var(--color-brand-dark)
    }
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
  }

  .block {
    display: block
  }

  .contents {
    display: contents
  }

  .flex {
    display: flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .inline {
    display: inline
  }

  .inline-block {
    display: inline-block
  }

  .inline-flex {
    display: inline-flex
  }

  .inline-grid {
    display: inline-grid
  }

  .table {
    display: table
  }

  .table-cell {
    display: table-cell
  }

  .table-row {
    display: table-row
  }

  .h-8 {
    height: calc(var(--spacing)*8)
  }

  .h-10 {
    height: calc(var(--spacing)*10)
  }

  .h-16 {
    height: calc(var(--spacing)*16)
  }

  .h-25 {
    height: calc(var(--spacing)*25)
  }

  .h-50 {
    height: calc(var(--spacing)*50)
  }

  .h-75 {
    height: calc(var(--spacing)*75)
  }

  .h-100 {
    height: calc(var(--spacing)*100)
  }

  .h-\[25px\] {
    height: 25px
  }

  .h-\[35px\] {
    height: 35px
  }

  .h-\[50px\] {
    height: 50px
  }

  .h-\[100px\] {
    height: 100px
  }

  .h-\[120px\] {
    height: 120px
  }

  .h-\[330px\] {
    height: 330px
  }

  .h-auto {
    height: auto
  }

  .h-full {
    height: 100%
  }

  .max-h-\[360px\] {
    max-height: 360px
  }

  .w-8 {
    width: calc(var(--spacing)*8)
  }

  .w-10 {
    width: calc(var(--spacing)*10)
  }

  .w-24 {
    width: calc(var(--spacing)*24)
  }

  .w-25 {
    width: calc(var(--spacing)*25)
  }

  .w-48 {
    width: calc(var(--spacing)*48)
  }

  .w-50 {
    width: calc(var(--spacing)*50)
  }

  .w-56 {
    width: calc(var(--spacing)*56)
  }

  .w-72 {
    width: calc(var(--spacing)*72)
  }

  .w-75 {
    width: calc(var(--spacing)*75)
  }

  .w-100 {
    width: calc(var(--spacing)*100)
  }

  .w-\[25px\] {
    width: 25px
  }

  .w-\[35px\] {
    width: 35px
  }

  .w-\[50px\] {
    width: 50px
  }

  .w-\[90\%\] {
    width: 90%
  }

  .w-\[120px\] {
    width: 120px
  }

  .w-auto {
    width: auto
  }

  .w-full {
    width: 100%
  }

  .max-w-\[85vw\] {
    max-width: 85vw
  }

  .max-w-xl {
    max-width: var(--container-xl)
  }

  .min-w-0 {
    min-width: calc(var(--spacing)*0)
  }

  .flex-1 {
    flex: 1
  }

  .flex-shrink {
    flex-shrink: 1
  }

  .flex-shrink-0 {
    flex-shrink: 0
  }

  .flex-shrink-1,
  .shrink {
    flex-shrink: 1
  }

  .shrink-0 {
    flex-shrink: 0
  }

  .flex-grow {
    flex-grow: 1
  }

  .flex-grow-0 {
    flex-grow: 0
  }

  .flex-grow-1,
  .grow {
    flex-grow: 1
  }

  .caption-top {
    caption-side: top
  }

  .border-collapse {
    border-collapse: collapse
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2*100%)*-1);
    translate: var(--tw-translate-x)var(--tw-translate-y)
  }

  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x)var(--tw-translate-y)
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2*100%)*-1);
    translate: var(--tw-translate-x)var(--tw-translate-y)
  }

  .transform {
    transform: var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )
  }

  .cursor-pointer {
    cursor: pointer
  }

  .cursor-text {
    cursor: text
  }

  .resize {
    resize: both
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .flex-col {
    flex-direction: column
  }

  .flex-row {
    flex-direction: row
  }

  .flex-row-reverse {
    flex-direction: row-reverse
  }

  .flex-nowrap {
    flex-wrap: nowrap
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse
  }

  .items-center {
    align-items: center
  }

  .items-end {
    align-items: flex-end
  }

  .justify-between {
    justify-content: space-between
  }

  .justify-center {
    justify-content: center
  }

  .gap-0 {
    gap: calc(var(--spacing)*0)
  }

  .gap-1 {
    gap: calc(var(--spacing)*1)
  }

  .gap-2 {
    gap: calc(var(--spacing)*2)
  }

  .gap-3 {
    gap: calc(var(--spacing)*3)
  }

  .gap-4 {
    gap: calc(var(--spacing)*4)
  }

  .gap-5 {
    gap: calc(var(--spacing)*5)
  }

  .gap-6 {
    gap: calc(var(--spacing)*6)
  }

  :where(.space-y-1>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-y-2>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-y-3>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-y-6>:not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))
  }

  :where(.space-x-6>:not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing)*6)*var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-x-reverse)))
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .overflow-auto {
    overflow: auto
  }

  .overflow-hidden {
    overflow: hidden
  }

  .overflow-scroll {
    overflow: scroll
  }

  .overflow-visible {
    overflow: visible
  }

  .overflow-x-auto {
    overflow-x: auto
  }

  .overflow-x-hidden {
    overflow-x: hidden
  }

  .overflow-x-scroll {
    overflow-x: scroll
  }

  .overflow-x-visible {
    overflow-x: visible
  }

  .overflow-y-auto {
    overflow-y: auto
  }

  .overflow-y-hidden {
    overflow-y: hidden
  }

  .overflow-y-scroll {
    overflow-y: scroll
  }

  .overflow-y-visible {
    overflow-y: visible
  }

  .\!rounded-full {
    border-radius: 3.40282e38px !important
  }

  .rounded {
    border-radius: .25rem
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl)
  }

  .rounded-\[10px\] {
    border-radius: 10px
  }

  .rounded-full {
    border-radius: 3.40282e38px
  }

  .rounded-lg {
    border-radius: var(--radius-lg)
  }

  .rounded-md {
    border-radius: var(--radius-md)
  }

  .rounded-xl {
    border-radius: var(--radius-xl)
  }

  .rounded-l-full {
    border-top-left-radius: 3.40282e38px;
    border-bottom-left-radius: 3.40282e38px
  }

  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0
  }

  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px
  }

  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px
  }

  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px
  }

  .border-5 {
    border-style: var(--tw-border-style);
    border-width: 5px
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px
  }

  .border-black {
    border-color: var(--color-black)
  }

  .border-brand-teal {
    border-color: var(--color-brand-teal)
  }

  .border-gray-200 {
    border-color: var(--color-gray-200)
  }

  .border-gray-300 {
    border-color: var(--color-gray-300)
  }

  .border-gray-700 {
    border-color: var(--color-gray-700)
  }

  .border-white {
    border-color: var(--color-white)
  }

  .border-white\/10 {
    border-color: #ffffff1a
  }

  @supports (color:color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white)10%, transparent)
    }
  }

  .border-white\/20 {
    border-color: #fff3
  }

  @supports (color:color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white)20%, transparent)
    }
  }

  .bg-black {
    background-color: var(--color-black)
  }

  .bg-blue-400 {
    background-color: var(--color-blue-400)
  }

  .bg-brand-dark {
    background-color: var(--color-brand-dark)
  }

  .bg-brand-teal {
    background-color: var(--color-brand-teal)
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100)
  }

  .bg-gray-900 {
    background-color: var(--color-gray-900)
  }

  .bg-transparent {
    background-color: #0000
  }

  .bg-white {
    background-color: var(--color-white)
  }

  .bg-white\/10 {
    background-color: #ffffff1a
  }

  @supports (color:color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white)10%, transparent)
    }
  }

  .object-cover {
    object-fit: cover
  }

  .p-0 {
    padding: calc(var(--spacing)*0)
  }

  .p-1 {
    padding: calc(var(--spacing)*1)
  }

  .p-2 {
    padding: calc(var(--spacing)*2)
  }

  .p-3 {
    padding: calc(var(--spacing)*3)
  }

  .p-4 {
    padding: calc(var(--spacing)*4)
  }

  .p-5 {
    padding: calc(var(--spacing)*5)
  }

  .px-0 {
    padding-inline: calc(var(--spacing)*0)
  }

  .px-1 {
    padding-inline: calc(var(--spacing)*1)
  }

  .px-2 {
    padding-inline: calc(var(--spacing)*2)
  }

  .px-3 {
    padding-inline: calc(var(--spacing)*3)
  }

  .px-4 {
    padding-inline: calc(var(--spacing)*4)
  }

  .px-5 {
    padding-inline: calc(var(--spacing)*5)
  }

  .py-0 {
    padding-block: calc(var(--spacing)*0)
  }

  .py-1 {
    padding-block: calc(var(--spacing)*1)
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing)*1.5)
  }

  .py-2 {
    padding-block: calc(var(--spacing)*2)
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing)*2.5)
  }

  .py-3 {
    padding-block: calc(var(--spacing)*3)
  }

  .py-4 {
    padding-block: calc(var(--spacing)*4)
  }

  .py-5 {
    padding-block: calc(var(--spacing)*5)
  }

  .py-10 {
    padding-block: calc(var(--spacing)*10)
  }

  .ps-0 {
    padding-inline-start: calc(var(--spacing)*0)
  }

  .ps-1 {
    padding-inline-start: calc(var(--spacing)*1)
  }

  .ps-2 {
    padding-inline-start: calc(var(--spacing)*2)
  }

  .ps-3 {
    padding-inline-start: calc(var(--spacing)*3)
  }

  .ps-4 {
    padding-inline-start: calc(var(--spacing)*4)
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing)*5)
  }

  .pe-0 {
    padding-inline-end: calc(var(--spacing)*0)
  }

  .pe-1 {
    padding-inline-end: calc(var(--spacing)*1)
  }

  .pe-2 {
    padding-inline-end: calc(var(--spacing)*2)
  }

  .pe-3 {
    padding-inline-end: calc(var(--spacing)*3)
  }

  .pe-4 {
    padding-inline-end: calc(var(--spacing)*4)
  }

  .pe-5 {
    padding-inline-end: calc(var(--spacing)*5)
  }

  .pt-0 {
    padding-top: calc(var(--spacing)*0)
  }

  .pt-1 {
    padding-top: calc(var(--spacing)*1)
  }

  .pt-2 {
    padding-top: calc(var(--spacing)*2)
  }

  .pt-3 {
    padding-top: calc(var(--spacing)*3)
  }

  .pt-4 {
    padding-top: calc(var(--spacing)*4)
  }

  .pt-5 {
    padding-top: calc(var(--spacing)*5)
  }

  .pt-6 {
    padding-top: calc(var(--spacing)*6)
  }

  .pr-\[5px\] {
    padding-right: 5px
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing)*0)
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing)*1)
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing)*2)
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing)*3)
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing)*4)
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing)*5)
  }

  .text-center {
    text-align: center
  }

  .text-end {
    text-align: end
  }

  .text-left {
    text-align: left
  }

  .text-right {
    text-align: right
  }

  .text-start {
    text-align: start
  }

  .align-baseline {
    vertical-align: baseline
  }

  .align-bottom {
    vertical-align: bottom
  }

  .align-middle {
    vertical-align: middle
  }

  .align-text-bottom {
    vertical-align: text-bottom
  }

  .align-text-top {
    vertical-align: text-top
  }

  .align-top {
    vertical-align: top
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height))
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height))
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height))
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height))
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height))
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height))
  }

  .text-\[1\.1rem\] {
    font-size: 1.1rem
  }

  .text-\[1\.2rem\] {
    font-size: 1.2rem
  }

  .text-\[1\.5rem\] {
    font-size: 1.5rem
  }

  .text-\[1\.25rem\] {
    font-size: 1.25rem
  }

  .text-\[1\.35rem\] {
    font-size: 1.35rem
  }

  .text-\[1rem\] {
    font-size: 1rem
  }

  .text-\[10px\] {
    font-size: 10px
  }

  .text-\[13px\] {
    font-size: 13px
  }

  .text-\[16px\] {
    font-size: 16px
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight)
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold)
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold)
  }

  .text-nowrap {
    text-wrap: nowrap
  }

  .text-wrap {
    text-wrap: wrap
  }

  .break-words {
    overflow-wrap: break-word
  }

  .text-black {
    color: var(--color-black)
  }

  .text-brand-teal {
    color: var(--color-brand-teal)
  }

  .text-gray-200 {
    color: var(--color-gray-200)
  }

  .text-gray-400 {
    color: var(--color-gray-400)
  }

  .text-gray-500 {
    color: var(--color-gray-500)
  }

  .text-gray-600 {
    color: var(--color-gray-600)
  }

  .text-gray-700 {
    color: var(--color-gray-700)
  }

  .text-gray-800 {
    color: var(--color-gray-800)
  }

  .text-gray-900 {
    color: var(--color-gray-900)
  }

  .text-red-600 {
    color: var(--color-red-600)
  }

  .text-white {
    color: var(--color-white)
  }

  .text-white\/80 {
    color: #fffc
  }

  @supports (color:color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white)80%, transparent)
    }
  }

  .text-white\/90 {
    color: #ffffffe6
  }

  @supports (color:color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white)90%, transparent)
    }
  }

  .capitalize {
    text-transform: capitalize
  }

  .lowercase {
    text-transform: lowercase
  }

  .uppercase {
    text-transform: uppercase
  }

  .italic {
    font-style: italic
  }

  .line-through {
    text-decoration-line: line-through
  }

  .no-underline {
    text-decoration-line: none
  }

  .underline {
    text-decoration-line: underline
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }

  .opacity-0 {
    opacity: 0
  }

  .opacity-25 {
    opacity: .25
  }

  .opacity-50 {
    opacity: .5
  }

  .opacity-75 {
    opacity: .75
  }

  .opacity-100 {
    opacity: 1
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
  }

  .filter {
    filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out)
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out)
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none
  }

  @media (hover:hover) {
    .group-hover\:visible:is(:where(.group):hover *) {
      visibility: visible
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1
    }

    .hover\:bg-brand-teal:hover {
      background-color: var(--color-brand-teal)
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50)
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100)
    }

    .hover\:bg-white\/5:hover {
      background-color: #ffffff0d
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-white\/5:hover {
        background-color: color-mix(in oklab, var(--color-white)5%, transparent)
      }
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white)10%, transparent)
      }
    }

    .hover\:bg-white\/20:hover {
      background-color: #fff3
    }

    @supports (color:color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white)20%, transparent)
      }
    }

    .hover\:text-brand-teal:hover {
      color: var(--color-brand-teal)
    }

    .hover\:text-white:hover {
      color: var(--color-white)
    }

    .hover\:underline:hover {
      text-decoration-line: underline
    }

    .hover\:opacity-90:hover {
      opacity: .9
    }
  }

  .focus\:border-brand-teal:focus {
    border-color: var(--color-brand-teal)
  }

  @media (min-width:40rem) {
    .sm\:flex {
      display: flex
    }

    .sm\:inline {
      display: inline
    }
  }

  @media (min-width:48rem) {
    .md\:sticky {
      position: sticky
    }

    .md\:top-6 {
      top: calc(var(--spacing)*6)
    }

    .md\:block {
      display: block
    }

    .md\:flex {
      display: flex
    }

    .md\:grid {
      display: grid
    }

    .md\:hidden {
      display: none
    }

    .md\:inline-block {
      display: inline-block
    }

    .md\:h-10 {
      height: calc(var(--spacing)*10)
    }

    .md\:w-60 {
      width: calc(var(--spacing)*60)
    }

    .md\:w-80 {
      width: calc(var(--spacing)*80)
    }

    .md\:w-auto {
      width: auto
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:text-left {
      text-align: left
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height))
    }
  }

  @media (min-width:64rem) {
    .lg\:w-72 {
      width: calc(var(--spacing)*72)
    }

    .lg\:w-96 {
      width: calc(var(--spacing)*96)
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

/* ==== END: tailwind.min.css ==== */

:root {
  /* Logo-based teal scale */
  --bdo-teal-500: #3eaaab;
  /* primary */
  --bdo-teal-600: #318888;
  /* hover / strong */
  --bdo-teal-700: #256666;
  /* deepest */

  /* Map original brand tokens to new teal */
  --color-brand-teal: var(--bdo-teal-500);
  --color-brand-dark: var(--bdo-teal-700);

  /* Header underline / small gradients */
  --grad-a: #256666;
  --grad-b: #4dd4d5;
}

/* 2) App surfaces & text (light / dark) */

html[data-theme="light"] {
  /* Light: soft teal-tinted UI */
  --bg-app: #e5f4f4;
  /* page background */
  --bg-surface: #ffffff;
  /* cards / header */
  --text-app: #022021;
  /* main text */
  --text-muted: #4b6f70;
  /* secondary text */
  --card-ring: #c2e4e5;
  /* card borders */
  --soft-shadow: 0 10px 24px rgba(0, 0, 0, .08);

  /* Video band / hero-like sections */
  --band-from: #0c4043;
  --band-to: #093033;

  /* Section backgrounds used by .section-angled */
  --section-grad-1-from: #f1fbfb;
  --section-grad-1-to: #d5f0f1;

  --section-grad-2-from: #e7f8f8;
  --section-grad-2-to: #d0f0f0;

  --section-grad-3-from: #e9fafa;
  --section-grad-3-to: #d2f0f0;
}

html[data-theme="dark"] {
  /* Dark: deep teal with good contrast */
  --bg-app: #041b1c;
  --bg-surface: #062325;
  --text-app: #e5fafa;
  --text-muted: #8fb3b4;
  --card-ring: #123c3d;
  --soft-shadow: 0 12px 24px rgba(0, 0, 0, .45);

  --band-from: #052124;
  --band-to: #021415;

  --section-grad-1-from: #041b1c;
  --section-grad-1-to: #072629;

  --section-grad-2-from: #031718;
  --section-grad-2-to: #062325;

  --section-grad-3-from: #072629;
  --section-grad-3-to: #041b1c;
}

/* 3) HERO / search tokens aligned with teal */

:root[data-theme="light"] {
  --bdo-grad-a: #3eaaab;
  --bdo-grad-b: #44bbbc;
  --bdo-grad-c: #256666;
  --bdo-ink: #022021;

  --glass-bg: rgba(255, 255, 255, .88);
  --glass-stroke: rgba(31, 137, 138, .18);
  --field-bg: rgba(226, 246, 246, .9);
  --field-stroke: rgba(48, 144, 144, .45);

  /* CTA + focus ring */
  --accent: #3eaaab;
  --ring: #256666;
}

:root[data-theme="dark"] {
  --bdo-grad-a: #3eaaab;
  --bdo-grad-b: #256666;
  --bdo-grad-c: #44bbbc;
  --bdo-ink: #e5fafa;

  --glass-bg: rgba(6, 30, 32, .78);
  --glass-stroke: rgba(245, 255, 255, .10);
  --field-bg: rgba(10, 46, 48, .9);
  --field-stroke: rgba(148, 221, 221, .35);

  --accent: #4dd4d5;
  --ring: #9be3e3;
}

/* 4) Components that need the new color directly */

/* Primary pill / brand buttons that use btn-brand */
.btn-brand {
  background-color: var(--color-brand-teal);
  border-color: var(--color-brand-dark);
  color: #ffffff;
}

.btn-brand:hover {
  background-color: var(--color-brand-dark);
}

/* Accent pills (multi-color ones) → teal variations */
.accent--teal {
  color: #ffffff;
  background: linear-gradient(90deg, #256666, #3eaaab, #4dd4d5);
}

/* Header active link gradient */
.bdo-active {
  background: linear-gradient(90deg, #256666, #4dd4d5);
}

/* Footer glow bar → teal shades only */
.footer-glow {
  background: linear-gradient(90deg,
      #256666,
      #3eaaab,
      #4dd4d5,
      #256666);
}

/* Hero primary CTA */
.bdo-cta {
  background: linear-gradient(90deg, #256666, #3eaaab);
  border-color: color-mix(in oklab, #3eaaab 85%, #ffffff 15%);
}

/* Ghost CTA: keep glassy but shift tint to teal */
.bdo-cta-ghost {
  background: linear-gradient(180deg,
      rgba(62, 170, 171, .18),
      rgba(62, 170, 171, .06));
  border-color: rgba(157, 221, 222, .6);
}

/* ---------- Core Utilities ---------- */

.card-hover {
  transition: box-shadow .2s ease, transform .25s ease;
}

/* ---------- Multi-color Accents ---------- */
.accent-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .875rem;
}

.accent--teal {
  color: #fff;
  background: linear-gradient(90deg, var(--bdo-teal-600), #22d3ee);
}

.accent--pink {
  color: #fff;
  background: linear-gradient(90deg, var(--bdo-pink-500), #fb7185);
}

.accent--purple {
  color: #fff;
  background: linear-gradient(90deg, var(--bdo-purple-500), #a78bfa);
}

.accent--blue {
  color: #fff;
  background: linear-gradient(90deg, var(--bdo-blue-500), #60a5fa);
}

.accent--amber {
  color: #111827;
  background: linear-gradient(90deg, var(--bdo-amber-500), #fde68a);
}

/* ---------- Buttons & Badges ---------- */

/* ---------- Decorative Backgrounds ---------- */
.section-angled {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.25rem;
  padding: 1px;
  /* gradient border trick */
  background: linear-gradient(135deg, rgba(20, 184, 166, .35), rgba(139, 92, 246, .35));
}

.section-angled>.inner {
  border-radius: 1.2rem;
  background: linear-gradient(180deg, var(--section-grad-1-from), var(--section-grad-1-to));
}

.section-angled.alt-2>.inner {
  background: linear-gradient(180deg, var(--section-grad-2-from), var(--section-grad-2-to));
}

.section-angled.alt-3>.inner {
  background: linear-gradient(180deg, var(--section-grad-3-from), var(--section-grad-3-to));
}

/* Subtle dot pattern overlay */
.pattern-dots {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .12;
  z-index: -1;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 16px 16px;
  color: #64748b;
  transform: rotate(-3deg);
}

/* Floating “orbs” */
@keyframes floaty {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }

  100% {
    transform: translateY(0)
  }
}

.orb {
  position: absolute;
  filter: blur(28px);
  opacity: .35;
  border-radius: 9999px;
  z-index: -1;
  animation: floaty 6s ease-in-out infinite;
}

.orb.teal {
  background: radial-gradient(circle at 40% 40%, #22d3ee, transparent 60%);
}

.orb.pink {
  background: radial-gradient(circle at 60% 60%, #fb7185, transparent 60%);
  animation-duration: 8s;
}

.orb.vio {
  background: radial-gradient(circle at 50% 50%, #a78bfa, transparent 60%);
  animation-duration: 7s;
}

/* ---------- Video band ---------- */


/* ---------- Media helpers ---------- */










/* ---------- Slick polish ---------- */










/* Equal heights for card rows */
.trending-card {
  min-height: 340px;
}

/* ---------- Theme Toggle ---------- */




/* ---------- Footer glow bar ---------- */
.footer-glow {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--bdo-teal-600), var(--bdo-purple-500), var(--bdo-pink-500), var(--bdo-blue-500));
  background-size: 300% 100%;
  animation: glowbar 8s linear infinite;
}

@keyframes glowbar {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

/* ==== END: bdo.theme.css ==== */

/* ==== BEGIN: bdo.tailwind-addons.css ==== */
/* =========================
   Broadway Originals Theme
   (light + dark, no build step)
   ========================= */

/* Brand palette */
:root {
  --bdo-teal-500: #14b8a6;
  --bdo-teal-600: #0d9488;
  --bdo-teal-700: #0f766e;
}

/* ---------- Light / Dark tokens ---------- */
html[data-theme="light"] {
  --bg-app: #f3f4f6;
  /* gray-100 */
  --bg-surface: #ffffff;
  --text-app: #0f172a;
  /* slate-900 */
  --text-muted: #64748b;
  /* slate-500 */
  --card-ring: #e5e7eb;
  /* gray-200 */
  --soft-shadow: 0 10px 24px rgba(0, 0, 0, .08);
  --band-from: #0b1220;
  --band-to: #0a0f1a;
}

html[data-theme="dark"] {
  --bg-app: #0b1220;
  /* deep */
  --bg-surface: #0f172a;
  /* slate-900 */
  --text-app: #e5e7eb;
  /* gray-200 */
  --text-muted: #94a3b8;
  /* slate-400 */
  --card-ring: #1f2937;
  /* gray-800 */
  --soft-shadow: 0 12px 24px rgba(0, 0, 0, .35);
  --band-from: #0a0f1a;
  --band-to: #05070b;
}

/* ---------- Utilities that map to tokens ---------- */
.bg-app {
  background-color: var(--bg-app);
}

.bg-surface {
  background-color: var(--bg-surface);
}

.text-app {
  color: var(--text-app);
}

.text-muted {
  color: var(--text-muted);
}

.card {
  background: var(--bg-surface);
  box-shadow: var(--soft-shadow);
  border: 1px solid var(--card-ring);
  border-radius: 1rem;
}

.section-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.badge-explore {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 9999px;
  border: 1px solid var(--bdo-teal-600);
  color: var(--bdo-teal-600);
}

.btn-brand {
  border: 1px solid var(--bdo-teal-600);
  color: var(--bdo-teal-600);
  transition: all .2s ease;
  border-radius: 9999px;
}

.btn-brand:hover {
  background: var(--bdo-teal-600);
  color: #fff;
}

.text-brand-teal {
  color: var(--bdo-teal-600);
}

.border-brand-teal {
  border-color: var(--bdo-teal-600);
}

.bg-brand-teal {
  background-color: var(--bdo-teal-600);
}

.hover\:bg-brand-teal:hover {
  background-color: var(--bdo-teal-600);
}

.hover\:text-brand-teal:hover {
  color: var(--bdo-teal-600);
}

/* Video band uses theme tokens */
.video-section {
  background: linear-gradient(180deg, var(--band-from) 0%, var(--band-to) 100%);
  padding: 2rem 0;
}

/* Media helpers */
.play-btn {
  width: 64px;
  height: 64px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.video-card-featureed-img {
  height: 330px;
  object-fit: cover;
}

.video-left-card-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.city-img,
.lifestyle-img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Banner safety */
.bdo-banner-img-fluid {
  max-height: 70vh;
  object-fit: cover;
}

/* Card hover */
.card-hover {
  transition: box-shadow .2s ease, transform .2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* Slick polish */
.carousel-base .slick-slide {
  outline: none;
}

.slider-item {
  height: 100%;
}

.slick-dots li button:before {
  font-size: 10px;
  color: #94a3b8;
}

.slick-dots li.slick-active button:before {
  color: var(--bdo-teal-600);
}

.slick-prev:before,
.slick-next:before {
  color: #334155;
}

/* Toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  border-radius: 9999px;
  cursor: pointer;
  background: var(--bg-surface);
  color: var(--text-app);
  border: 1px solid var(--card-ring);
  box-shadow: var(--soft-shadow);
}

.theme-toggle i {
  font-size: 1rem;
}

/* ==== END: bdo.tailwind-addons.css ==== */

/* =======================================================================
   Broadway Originals — Header + Fonts integration
   Appended: 2025-09-02T11:41:48
   Notes:
   - Sets default fonts (Poppins → Roboto) via Tailwind tokens.
   - Moves header inline CSS into the bundle.
   ======================================================================= */

/* ---------------------------
   Font faces (local /fonts/)
   --------------------------- */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/RobotoRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/RobotoBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------
   Make Poppins → Roboto the default Tailwind sans family.
   ------------------------------------------------------- */
:root,
:host {
  --font-sans: "Poppins", "Roboto", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --default-font-family: var(--font-sans);
}

/* -----------------------------------------------
   Global page rules used by your header template
   ----------------------------------------------- */
:root {
  --container-max: 1200px;
  --nav-h: 42px;
  --nav-pad-x: .85rem;
  --grad-a: #7c3aed;
  --grad-b: #06b6d4;
  --ease-in-out: cubic-bezier(.22, .61, .36, 1);
  --soft-shadow: 0 36px 120px rgba(0, 0, 0, .55);
}

/* No horizontal scroll; allow header dropdowns to escape */


html,
body {
  width: 100%;
  overflow-x: clip;
}

.bdo-max,
header,
main,
nav {
  max-width: 100vw;
}

/* Page background */
body {
  min-height: 100dvh;
  color: var(--text-app);
}

/* Container max */
.bdo-max {
  max-width: var(--container-max);
}

/* -----------------
   Header shell
   ----------------- */
.bdo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, .28);
  isolation: isolate;
  overflow: visible;
  /* allow dropdowns outside header */
}

html[data-theme="light"] .bdo-header {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(255, 255, 255, .75));
  --soft-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

html[data-theme="dark"] .bdo-header {
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(124, 58, 237, .12), transparent 60%),
    radial-gradient(1000px 380px at 90% -10%, rgba(6, 182, 212, .12), transparent 60%),
    linear-gradient(to bottom, rgba(15, 23, 42, .92), rgba(15, 23, 42, .78));
  border-bottom-color: rgba(51, 65, 85, .55);
}

/* Ornaments (scoped to header) */
.bdo-header .pattern-dots {
  position: absolute;
  inset: -15%;
  z-index: -1;
  opacity: .10;
  pointer-events: none;
}

.bdo-header .orb {
  width: 240px;
  height: 240px;
  filter: blur(26px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}

.bdo-header .orb.teal {
  left: -60px;
  top: -80px;
  background: radial-gradient(circle at 40% 40%, #22d3ee, transparent 60%);
}

.bdo-header .orb.vio {
  right: -80px;
  top: -90px;
  background: radial-gradient(circle at 50% 50%, #a78bfa, transparent 60%);
}

.bdo-header .orb.pink {
  right: 20%;
  top: -60px;
  background: radial-gradient(circle at 60% 60%, #fb7185, transparent 60%);
}

/* Top row */
.bdo-top {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
}

.bdo-left {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.bdo-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* Logo chip */
.bdo-logo {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  text-decoration: none;
  border-radius: 9999px;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid transparent;
}


.bdo-logo-img {
  height: 24px;
  width: auto;
  object-fit: contain;
  display: block;
}

html[data-theme="dark"] .bdo-logo-img[data-auto-invert="1"] {
  filter: invert(1) hue-rotate(180deg) brightness(1.08);
}

/* Icon rail */
.icon-rail {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 4px;
  border-radius: 14px;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid rgba(148, 163, 184, .25);
  background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

html[data-theme="dark"] .icon-rail {
  border-color: rgba(51, 65, 85, .6);
  background: linear-gradient(180deg, rgba(2, 6, 23, .55), rgba(2, 6, 23, .45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background .2s, transform .15s, border-color .2s, box-shadow .2s;
  color: var(--text-app);
  background: var(--bg-surface);
}

html[data-theme="dark"] .icon-btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .08);
}

.icon-btn i {
  font-size: 18px;
  line-height: 1;
  display: block;
  transform: translateY(.5px);
}

.icon-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.rail-sep {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, .5), transparent);
}

html[data-theme="dark"] .rail-sep {
  background: linear-gradient(to bottom, transparent, rgba(71, 85, 105, .7), transparent);
}

/* CTA buttons */
.cta-btn {
  height: 40px;
  padding: .5rem .7rem;
  gap: .45rem;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .35);
  display: inline-flex;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .2s, background .2s, color .2s, transform .15s;
  color: var(--text-app);
  background: var(--bg-surface);
}

html[data-theme="dark"] .cta-btn {
  border-color: rgba(51, 65, 85, .7);
}

.cta-btn:hover {
  transform: translateY(-1px);
}

.cta-accent {
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(20, 184, 166, .25);
}

/* Category bar */
.bdo-nav {
  border-top: 1px solid rgba(148, 163, 184, .25);
}

html[data-theme="dark"] .bdo-nav {
  border-top-color: rgba(51, 65, 85, .5);
}

.nav-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .25rem 0;
}

/* Links + active state underline */
.bdo-a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 var(--nav-pad-x);
  border-radius: .6rem;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .1px;
  transition: background .18s, color .18s, box-shadow .18s;
  color: var(--text-app);
}

.bdo-a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s;
  border-radius: 9999px;
}

.bdo-link:hover {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="light"] .bdo-link:hover {
  background: rgba(2, 6, 23, .06);
}

.bdo-link:hover::after {
  transform: scaleX(1);
}

.bdo-active {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  color: #fff;
  box-shadow: 0 8px 16px rgba(20, 184, 166, .25);
}

.bdo-active::after {
  transform: scaleX(1);
  opacity: .9;
}

/* Dropdowns */
.bdo-dd {
  position: relative;
}

.bdo-dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: var(--nav-h);
  padding: 0 var(--nav-pad-x);
  font-weight: 800;
  letter-spacing: .1px;
  border-radius: .6rem;
  transition: background .18s, color .18s;
  color: var(--text-app);
}

.bdo-dd:hover .bdo-dd-btn {
  background: rgba(255, 255, 255, .08);
}

html[data-theme="light"] .bdo-dd:hover .bdo-dd-btn {
  background: rgba(2, 6, 23, .06);
}

.bdo-dd-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 16rem;
  padding: .4rem;
  z-index: 100;
  background: var(--bg-surface);
  color: var(--text-app);
  border: 1px solid var(--card-ring);
  border-radius: 14px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  will-change: transform, opacity;
}

.bdo-dd.open .bdo-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bdo-dd-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.bdo-dd-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .65rem;
  border-radius: .65rem;
  text-decoration: none;
  color: inherit;
  transition: background .18s, color .18s;
  white-space: nowrap;
}

.bdo-dd-item i {
  opacity: .8;
  font-size: 16px;
}

.bdo-dd-item:hover {
  background: linear-gradient(90deg, rgba(124, 58, 237, .12), rgba(6, 182, 212, .12));
}

/* Section polish used by the demo content */
.section-angled .inner {
  border: 1px solid var(--card-ring);
  background:
    radial-gradient(800px 200px at 5% -5%, rgba(124, 58, 237, .10), transparent 60%),
    radial-gradient(700px 180px at 95% -5%, rgba(6, 182, 212, .10), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg-surface) 96%, transparent), var(--bg-surface));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.section-title {
  font-weight: 800;
  letter-spacing: .2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .icon-btn:hover {
    transform: none;
  }

  .bdo-active,
  .cta-btn:hover {
    box-shadow: none;
  }
}

/* ===== END bdo.tailwind.bundle.css ===== */

/* ===== BEGIN bdo.hero.css ===== */

/* ========================================================= 
   Broadway Originals — HERO + header polish (search upgraded)
   ========================================================= */

/* ---------- Global helpers ---------- */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  overflow: clip;
  /* prevent rare horizontal scroll */
}

.bdo-max {
  max-width: 1160px;
}

/* Logo auto-invert */
.bdo-logo-img[data-auto-invert="1"] {
  filter: none;
  transition: filter .15s ease;
}

html[data-theme="dark"] .bdo-logo-img[data-auto-invert="1"] {
  filter: invert(1) hue-rotate(180deg) saturate(.9) brightness(1.08);
}

/* ---------- HERO container & height ---------- */
.hero-card {
  border-radius: 0;
  background: linear-gradient(180deg, rgba(20, 27, 45, .85), rgba(12, 17, 32, .95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  border-block: 1px solid rgba(255, 255, 255, .06);
  position: relative;
  isolation: isolate;
}

#bdoHeroSwiper {
  min-height: clamp(480px, 64vh, 720px);
}

.hero-slide {
  height: clamp(340px, 48vw, 560px);
  min-height: inherit;
}

/* ---------- Theme tokens ---------- */
:root[data-theme="dark"] {
  --bdo-grad-a: #06b6d4;
  --bdo-grad-b: #7c3aed;
  --bdo-grad-c: #f43f5e;
  --bdo-ink: #e5e7eb;
  --glass-bg: rgba(12, 17, 32, .55);
  --glass-stroke: rgba(255, 255, 255, .08);
  --field-bg: rgba(255, 255, 255, .06);
  --field-stroke: rgba(255, 255, 255, .10);
  --accent: #ef233c;
  --ring: #60a5fa;
}

:root[data-theme="light"] {
  --bdo-grad-a: #0891b2;
  --bdo-grad-b: #6d28d9;
  --bdo-grad-c: #dc2626;
  --bdo-ink: #0f172a;
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-stroke: rgba(15, 23, 42, .12);
  --field-bg: rgba(15, 23, 42, .05);
  --field-stroke: rgba(15, 23, 42, .12);
  --accent: #ef233c;
  --ring: #2563eb;
}

/* ---------- Animated gradients ---------- */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

.slide--one .hero-bg {
  background:
    radial-gradient(1200px 600px at 0% 0%, #22d3ee33 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, #a78bfa33 0%, transparent 65%),
    linear-gradient(135deg, var(--bdo-grad-a) 0%, var(--bdo-grad-b) 50%, var(--bdo-grad-c) 100%);
  background-size: 200% 200%;
  animation: gradientShift 18s ease infinite;
}

.slide--two .hero-bg {
  background:
    radial-gradient(1200px 600px at 100% 0%, #f59e0b33 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 100%, #22d3ee33 0%, transparent 65%),
    linear-gradient(135deg, var(--bdo-grad-c) 0%, #f59e0b 45%, var(--bdo-grad-a) 100%);
  background-size: 200% 200%;
  animation: gradientShift 20s ease infinite;
}

.slide--three .hero-bg {
  background:
    radial-gradient(1100px 560px at 30% 10%, #34d39933 0%, transparent 60%),
    radial-gradient(900px 520px at 90% 80%, #60a5fa33 0%, transparent 65%),
    linear-gradient(135deg, #10b981 0%, #60a5fa 45%, #a855f7 100%);
  background-size: 200% 200%;
  animation: gradientShift 22s ease infinite;
}

@media (prefers-reduced-motion:reduce) {

  .slide--one .hero-bg,
  .slide--two .hero-bg,
  .slide--three .hero-bg {
    animation: none
  }
}

/* ---------- Pattern & depth ---------- */
.hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .12;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .45) 1px, transparent 1.6px);
  background-size: 18px 18px;
}

.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-orbs::before,
.hero-orbs::after {
  content: "";
  position: absolute;
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .28;
}

.hero-orbs::before {
  left: -8vmin;
  top: -6vmin;
  background: radial-gradient(closest-side, #22d3ee66, transparent 70%);
}

.hero-orbs::after {
  right: -6vmin;
  bottom: -8vmin;
  background: radial-gradient(closest-side, #a855f766, transparent 70%);
}

.grad-mask-top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 14%;
  z-index: 3;
  background: linear-gradient(0deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .35) 100%);
}

.grad-mask-bottom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 22%;
  z-index: 3;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .55) 100%);
}

/* ---------- Icons motion ---------- */
.hero-anim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero-anim i {
  color: rgba(255, 255, 255, .86);
  opacity: .42;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}

.sz-sm {
  font-size: 22px
}

.sz-md {
  font-size: 30px
}

.sz-lg {
  font-size: 48px
}

@keyframes floatY {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }

  100% {
    transform: translateY(0)
  }
}

@keyframes floatX {
  0% {
    transform: translateX(0)
  }

  50% {
    transform: translateX(12px)
  }

  100% {
    transform: translateX(0)
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.anim-floatY {
  animation: floatY 6s ease-in-out infinite;
  will-change: transform
}

.anim-floatX {
  animation: floatX 8s ease-in-out infinite;
  will-change: transform
}

.anim-spin {
  animation: spinSlow 22s linear infinite;
  transform-origin: 50% 50%
}

@media (prefers-reduced-motion:reduce) {

  .anim-floatY,
  .anim-floatX,
  .anim-spin {
    animation: none !important
  }
}

/* ---------- Content ---------- */
.hero-content {
  position: relative;
  z-index: 10;
}

/* ---------- CTAs ---------- */
.bdo-cta {
  --tw-shadow: 0 10px 26px rgba(124, 58, 237, .38);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem 1.2rem;
  border-radius: 9999px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #a855f7 0%, #22d3ee 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--tw-shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.bdo-cta:hover {
  transform: translateY(-1px) scale(1.01);
  filter: saturate(1.06) brightness(1.04);
}

.bdo-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem 1.1rem;
  border-radius: 9999px;
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.bdo-cta-ghost:hover {
  background: linear-gradient(90deg, rgba(168, 85, 247, .20), rgba(34, 211, 238, .20));
  transform: translateY(-1px)
}

/* ---------- Search dock ---------- */
.hero-search-wrap {
  position: absolute;
  inset-inline: 0;
  bottom: -36px;
  z-index: 60;
  pointer-events: none;
}

.hero-search-form {
  pointer-events: auto;
  position: relative;
  z-index: 60;
  animation: slideUp .35s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(18px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

/* Dock container */
.hero-search-form .hero-search-bar {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1fr auto;
  gap: 10px;
  align-items: center;
  background: color-mix(in oklab, var(--glass-bg) 100%, transparent);
  border-radius: 20px;
  padding: 65px;
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), 0 10px 0 -6px rgba(255, 255, 255, .06) inset;
  backdrop-filter: blur(14px) saturate(130%);
}

/* Fields */
.hero-search-form .field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-stroke);
  border-radius: 14px;
  padding: 14px 14px 14px 44px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.hero-search-form .field:focus-within {
  background: color-mix(in oklab, var(--field-bg) 70%, #ffffff 10%);
  border-color: color-mix(in oklab, var(--ring) 40%, #ffffff 20%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 28%, transparent);
  transform: translateY(-1px);
}

.hero-search-form .field .ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: .9;
}

.hero-search-form input,
.hero-search-form select {
  width: 100%;
  background: transparent;
  color: #fff;
  border: none;
  outline: none;
  font: 600 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
}

html[data-theme="light"] .hero-search-form input,
html[data-theme="light"] .hero-search-form select {
  color: #0f172a;
}

.hero-search-form input::placeholder {
  color: rgba(255, 255, 255, .75);
}

html[data-theme="light"] .hero-search-form input::placeholder {
  color: rgba(15, 23, 42, .55);
}

.hero-search-form .field--category {
  padding-right: 46px;
}

.hero-search-form .field--category .chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .85;
  pointer-events: none;
  transition: transform .2s ease;
}

.hero-search-form .field--category .chev.rot {
  transform: translateY(-50%) rotate(180deg);
}

.hero-search-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Submit */
.hero-search-form .btn-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .25px;
  color: #fff;
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 85%, #ffffff 15%);
  box-shadow: 0 14px 28px -10px color-mix(in oklab, var(--accent) 60%, #000 40%), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.hero-search-form .btn-go:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow: 0 22px 36px -16px color-mix(in oklab, var(--accent) 70%, #000 30%);
}

/* Focus-visible */
.hero-search-form input:focus-visible,
.hero-search-form select:focus-visible,
.hero-search-form .btn-go:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Mobile */
@media (max-width: 860px) {
  .hero-search-form .hero-search-bar {
    grid-template-columns: 1fr;
    border-radius: 18px;
    padding: 12px;
    gap: 8px;
  }

  .hero-search-form .btn-go {
    width: 100%;
  }
}

/* ---------- Quick Filters (chips) ---------- */
.hero-quick-filters {
  margin-top: 10px;
  pointer-events: auto;
}

.chip-row {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.chip-row::-webkit-scrollbar {
  height: 8px;
}

.chip-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
}

html[data-theme="light"] .chip-row::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .18);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font: 800 12.5px/1 system-ui, -apple-system, Segoe UI, Inter, Roboto, "Helvetica Neue", Arial;
  letter-spacing: .25px;
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}

html[data-theme="light"] .chip {
  color: #0f172a;
  background: rgba(15, 23, 42, .06);
  border-color: rgba(15, 23, 42, .12);
}

.chip i {
  font-size: 14px;
  opacity: .95;
}

.chip:hover {
  transform: translateY(-1px);
}

.chip:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.chip.is-active {
  color: #fff;
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 85%, #ffffff 15%);
  box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--accent) 65%, #000 35%);
}

html[data-theme="light"] .chip.is-active {
  color: #fff;
}

/* ---------- Swiper controls ---------- */
.swiper {
  overflow: visible;
}

.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  position: relative;
}

#bdoHeroSwiper {
  position: relative;
  z-index: 10;
}

.swiper-button-prev,
.swiper-button-next {
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  color: #fff;
  z-index: 45;
  backdrop-filter: blur(6px);
  background: rgba(15, 23, 42, .38);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(15, 23, 42, .6);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px;
}

.swiper-pagination {
  z-index: 44;
}

.swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #fff;
  opacity: .65;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
  background: linear-gradient(90deg, #a855f7, #22d3ee);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset;
}

.autoplay-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  height: 4px;
  width: 200px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  z-index: 44;
}

.autoplay-bar>span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a855f7, #22d3ee);
}

/* ===== END bdo.hero.css ===== */

/* ===== BEGIN bdo.sections.css ===== */

/* ==========================================================================
   Broadway Originals — Master Stylesheet (Consolidated)
   Premium, responsive, theme-aware (light/dark)
   Date: 2025-09-08
   Notes:
   - Duplicates removed & tokens unified
   - Section backgrounds are theme-aware & non-destructive
   - Utilities kept minimal and reusable
   ========================================================================== */

/* =========================
   THEME TOKENS (root + dark)
   ========================= */
:root {
  --bdo-max: 1200px;
  --radius: 16px;
  --radius-sm: 12px;
  --ring: 1px;

  /* Light theme surfaces / text */
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --card: #ffffff;
  --card-border: rgba(15, 23, 42, .08);
  --text: #0f172a;
  --text-muted: #475569;
  --muted: #64748b;
  --primary: #0ea5e9;
  --primary-ink: #0b5d7a;

  --input-bg: #ffffff;
  --input-border: rgba(15, 23, 42, .14);
  --input-focus: rgba(14, 165, 233, .45);
  --shadow: 0 10px 24px rgba(2, 6, 23, .06), 0 2px 6px rgba(2, 6, 23, .05);

  /* Section-safe defaults (cards over soft bg) */
  --card-bg: var(--card);
  --card-stroke: var(--card-border);

  /* Rhythm + gradients (from finishing pass) */
  --rythm-1: .5rem;
  --rythm-2: .75rem;
  --rythm-3: 1rem;
  --rythm-4: 1.25rem;
  --rythm-5: 1.5rem;
  --rythm-6: 2rem;
  --rythm-7: 2.5rem;

  --muted-2: rgba(2, 6, 23, .45);
  --shade-1: linear-gradient(180deg, rgba(2, 6, 23, 0.00) 5%, rgba(2, 6, 23, 0.12) 45%, rgba(2, 6, 23, 0.24) 100%);
  --grad-a: linear-gradient(135deg, #6366f1, #22d3ee);
  --grad-b: linear-gradient(135deg, #14b8a6, #6366f1);
  --grad-c: linear-gradient(135deg, #f59e0b, #ef4444);

  /* Soft BG tokens (theme-aware section painters) */
  --bg-soft-a-light: radial-gradient(1000px 480px at 10% -10%, #eef2ff 0%, transparent 60%),
    radial-gradient(720px 420px at 100% 0%, #e0f2fe 0%, transparent 55%);
  --bg-soft-b-light: radial-gradient(880px 420px at 0% 10%, #fffbeb 0%, transparent 55%),
    radial-gradient(680px 360px at 90% 0%, #fee2e2 0%, transparent 60%);
  --bg-soft-c-light: radial-gradient(900px 500px at 15% 0%, #f5f3ff 0%, transparent 58%);

  /* Global padding utilities */
  --pad-x: clamp(12px, 3.6vw, 24px);
  --pad-y: clamp(28px, 5.5vw, 56px);

  /* Utility */
  --bdo-bg: #ffffff;
}

[data-theme="dark"] {
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --card: rgba(2, 6, 23, .55);
  --card-border: rgba(255, 255, 255, .08);
  --text: #e5e7eb;
  --text-muted: #a8b3cf;
  --muted: #8aa0bf;
  --primary: #38bdf8;
  --primary-ink: #0f172a;

  --input-bg: rgba(2, 6, 23, .65);
  --input-border: rgba(255, 255, 255, .14);
  --input-focus: rgba(56, 189, 248, .45);
  --shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);

  /* Finishing pass dark lifts */
  --card-bg: #0b1020;
  --card-stroke: rgba(255, 255, 255, .12);
  --muted-2: rgba(255, 255, 255, .62);
  --shade-1: linear-gradient(180deg, rgba(12, 16, 32, 0.00) 5%, rgba(12, 16, 32, 0.35) 45%, rgba(12, 16, 32, 0.70) 100%);

  --bg-soft-a-dark: radial-gradient(900px 460px at 8% -12%, #0b1020 0%, transparent 60%),
    radial-gradient(720px 420px at 100% -6%, #0f172a 0%, transparent 60%);
  --bg-soft-b-dark: radial-gradient(880px 420px at 0% -6%, #1a1020 0%, transparent 55%),
    radial-gradient(680px 360px at 96% -10%, #1a1420 0%, transparent 60%);
  --bg-soft-c-dark: radial-gradient(900px 500px at 15% -10%, #111827 0%, transparent 58%);

  --bdo-bg: #0b1020;
}

/* Global helpers */
.bdo-max {
  max-width: var(--bdo-max)
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga", "kern", "ss01"
}

/* Auto-invert (logos etc.) */
[data-theme="dark"] img[data-auto-invert="1"]:not([src$=".svg"]) {
  filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
}

/* =========================
   SECTION WRAPPERS
   ========================= */
.bdo-section {
  background: var(--bg-soft);
  padding: 28px 0
}

@media (min-width:768px) {
  .bdo-section {
    padding: 40px 0
  }
}

.bdo-section--search {
  padding-top: 28px
}

.bdo-section--cats {
  padding-top: 0
}

/* Full-bleed utilities */
@layer utilities {
  .full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw
  }

  .full-bleed>.bdo-max {
    margin-inline: auto
  }

  /* Parallax promo stripe */
  .full-bleed-alt {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    isolation: isolate;
    --parallax-strength: 18;
    --scroll: 0;
    --pad-y: clamp(36px, 10vw, 120px)
  }

  .full-bleed-alt>.bdo-max {
    margin-inline: auto;
    position: relative;
    z-index: 2
  }

  .full-bleed-alt::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-url, none);
    background-size: cover;
    background-position: 50% calc(50% + var(--scroll));
    background-repeat: no-repeat;
    transform: translateZ(0);
    z-index: 1
  }

  .full-bleed-alt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .35) 0%, rgba(2, 6, 23, .55) 60%, rgba(2, 6, 23, .8) 100%);
    z-index: 1;
    pointer-events: none
  }

  .full-bleed-alt .section-inner {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center
  }

  /* Page section rhythm */
  .bdo-home-sec {
    padding-block: var(--pad-y);
    margin-top: var(--rythm-6);
    position: relative;
    isolation: isolate
  }

  @media (max-width:640px) {
    .bdo-home-sec {
      margin-top: var(--rythm-5)
    }
  }
}

/* Soft gradient painters (theme-aware) */
.bdo-home-sec::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  opacity: .9
}

/* Trending */
.bdo-sec-trending-neo::before {
  opacity: .85;
  background: var(--bg-soft-a-light)
}

[data-theme="dark"] .bdo-sec-trending-neo::before {
  background: var(--bg-soft-a-dark)
}

/* City Guides */
.bdo-sec-cityguides::before {
  background: var(--bg-soft-c-light),
    radial-gradient(520px 240px at 92% 24%, rgba(99, 102, 241, .06), transparent 70%),
    radial-gradient(320px 220px at 12% 64%, rgba(34, 211, 238, .08), transparent 70%)
}

[data-theme="dark"] .bdo-sec-cityguides::before {
  background: var(--bg-soft-c-dark),
    radial-gradient(520px 240px at 92% 24%, rgba(99, 102, 241, .10), transparent 70%),
    radial-gradient(320px 220px at 12% 64%, rgba(34, 211, 238, .10), transparent 70%)
}

/* Partner Highlights */
.bdo-sec-ads::before {
  background: var(--bg-soft-b-light),
    radial-gradient(420px 220px at 86% 18%, rgba(245, 158, 11, .10), transparent 70%),
    radial-gradient(340px 200px at 10% 80%, rgba(239, 68, 68, .08), transparent 70%)
}

[data-theme="dark"] .bdo-sec-ads::before {
  background: var(--bg-soft-b-dark),
    radial-gradient(420px 220px at 86% 18%, rgba(245, 158, 11, .14), transparent 70%),
    radial-gradient(340px 200px at 10% 80%, rgba(239, 68, 68, .12), transparent 70%)
}

/* =========================
   TYPOGRAPHY
   ========================= */
.bdo-h2 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--text)
}

@media (min-width:768px) {
  .bdo-h2 {
    font-size: 1.5rem
  }
}

.bdo-sub {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .9375rem
}

/* =========================
   CARDS
   ========================= */
.bdo-card {
  background: var(--card);
  border: var(--ring) solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px
}

@media (min-width:768px) {
  .bdo-card {
    padding: 22px
  }
}

.bdo-card+.bdo-card {
  margin-top: 16px
}

.bdo-card-head {
  margin-bottom: 14px
}

@media (min-width:768px) {
  .bdo-card-head {
    margin-bottom: 18px
  }
}

/* Keep new soft BG readable */
.bdo-sec-trending-neo .neo-item,
.bdo-sec-trending-neo .neo-submit,
.bdo-sec-trending-neo .neo-quick,
.bdo-sec-cityguides .cg-card,
.bdo-sec-ads .ad-card {
  background: var(--card-bg);
  box-shadow: 0 10px 26px -22px rgba(0, 0, 0, .45)
}

/* =========================
   FORM GRID
   ========================= */
.bdo-form.bdo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

@media (min-width:768px) {
  .bdo-form.bdo-grid {
    grid-template-columns: 1fr 1fr 1fr auto
  }
}

.bdo-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.bdo-label {
  font-size: .85rem;
  color: var(--muted)
}

.bdo-input-wrap {
  position: relative;
  display: flex;
  align-items: center
}

.bdo-input-wrap>i {
  position: absolute;
  left: 12px;
  font-size: 1rem;
  color: var(--muted);
  pointer-events: none
}

.bdo-input,
.bdo-select {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: var(--input-bg);
  border: var(--ring) solid var(--input-border);
  color: var(--text);
  padding: 0 12px 0 38px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease
}

.bdo-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none
}

.bdo-input::placeholder {
  color: var(--muted)
}

.bdo-input:focus,
.bdo-select:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--input-focus)
}

.bdo-chev {
  position: absolute;
  right: 12px;
  font-size: 1rem;
  color: var(--muted);
  pointer-events: none
}

.bdo-actions {
  display: flex;
  align-items: end;
  justify-content: flex-start
}

@media (min-width:768px) {
  .bdo-actions {
    align-items: center;
    justify-content: flex-end
  }
}

.bdo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: var(--ring) solid transparent;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease
}

.bdo-btn i {
  font-size: 1rem
}

.bdo-btn--primary {
  background: var(--primary);
  color: #001018;
  box-shadow: 0 6px 14px rgba(14, 165, 233, .28)
}

[data-theme="dark"] .bdo-btn--primary {
  color: #071018
}

.bdo-btn--primary:hover {
  transform: translateY(-1px)
}

.bdo-btn--primary:active {
  transform: translateY(0)
}

/* =========================
   CATEGORIES — SIMPLE GRID
   ========================= */
.cats-simple-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr
}

@media (min-width:640px) {
  .cats-simple-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (min-width:1024px) {
  .cats-simple-grid {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.cat-simple {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 12px;
  align-items: center;
  background: var(--bg);
  border: var(--ring) solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .06s ease
}

.cat-simple:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-1px)
}

.cat-simple:active {
  transform: translateY(0)
}

.cat-simple-ico {
  height: 40px;
  width: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(56, 189, 248, .18), rgba(56, 189, 248, .06));
  color: var(--primary-ink);
  border: var(--ring) solid var(--card-border)
}

[data-theme="dark"] .cat-simple-ico {
  background: linear-gradient(180deg, rgba(56, 189, 248, .25), rgba(56, 189, 248, .08));
  color: #e7f6ff
}

.cat-simple-ico i {
  font-size: 1.25rem;
  line-height: 1
}

.cat-simple-main {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.cat-simple-name {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cat-simple-count {
  font-size: .85rem;
  color: var(--text-muted)
}

.cat-simple-arrow {
  color: var(--muted)
}

/* Pro variant */
.bdo-card-head--with-action {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px
}

.bdo-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  background: var(--bg);
  color: var(--text);
  border: var(--ring) solid var(--card-border);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease
}

.bdo-link-ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow)
}

.cats-simple-grid--pro {
  gap: 12px;
  margin-top: 14px
}

@media (min-width:1024px) {
  .cats-simple-grid--pro {
    gap: 14px
  }
}

.cat-simple--pro {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  transition: transform .08s ease, box-shadow .18s ease, border-color .15s ease, background .15s ease
}

.cat-simple--pro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: conic-gradient(from 140deg, var(--acc1) 0deg, var(--acc2) 120deg, var(--acc3) 240deg, var(--acc1) 360deg);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: .35;
  pointer-events: none;
  transition: opacity .2s ease
}

.cat-simple--pro:hover::before {
  opacity: .6
}

.cat-simple--pro:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-1px)
}

.cat-simple--pro .cat-simple-ico {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--acc2) 20%, transparent), color-mix(in oklab, var(--acc1) 10%, transparent));
  border-color: var(--card-border)
}

.cat-simple--pro .cat-simple-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(120% 120% at 20% 10%, color-mix(in oklab, var(--acc3) 20%, transparent), transparent 50%);
  opacity: .55;
  pointer-events: none
}

.cat-simple--pro .cat-simple-ico i {
  font-size: 1.35rem
}

.cat-simple--pro .cat-simple-arrow {
  transition: transform .15s ease, opacity .15s ease;
  opacity: .8
}

.cat-simple--pro:hover .cat-simple-arrow {
  transform: translateX(2px);
  opacity: 1
}

.cat-simple--pro .cat-simple-name {
  letter-spacing: .2px
}

.cat-simple--pro .cat-simple-count {
  font-size: .82rem
}

.cat-simple--pro.acc-1 {
  --acc1: #38bdf8;
  --acc2: #a78bfa;
  --acc3: #f472b6
}

.cat-simple--pro.acc-2 {
  --acc1: #22d3ee;
  --acc2: #f59e0b;
  --acc3: #34d399
}

.cat-simple--pro.acc-3 {
  --acc1: #60a5fa;
  --acc2: #f43f5e;
  --acc3: #fb923c
}

.cat-simple--pro.acc-4 {
  --acc1: #a78bfa;
  --acc2: #34d399;
  --acc3: #60a5fa
}

.cat-simple--pro.acc-5 {
  --acc1: #f59e0b;
  --acc2: #38bdf8;
  --acc3: #a78bfa
}

.cat-simple--pro.acc-6 {
  --acc1: #fb7185;
  --acc2: #818cf8;
  --acc3: #22d3ee
}

[data-theme="dark"] .cat-simple--pro {
  background: color-mix(in oklab, var(--bg) 92%, transparent)
}

.cat-simple--pro:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--acc1) 60%, #fff);
  outline-offset: 2px
}

@media (max-width:380px) {
  .cat-simple--pro {
    grid-template-columns: 36px 1fr 20px;
    padding: 10px
  }

  .cat-simple--pro .cat-simple-ico {
    height: 36px;
    width: 36px;
    border-radius: 9px
  }
}

/* =========================
   CATEGORIES HERO (full-bleed header)
   ========================= */
.cats-hero {
  position: relative;
  isolation: isolate;
  padding: 48px 0 56px;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(1100px 60% at 10% 0%, color-mix(in oklab, var(--primary) 20%, transparent) 0%, transparent 60%),
    radial-gradient(1100px 60% at 90% 100%, color-mix(in oklab, #a78bfa 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg-soft) 70%, transparent), var(--bg-soft))
}

.cats-hero .cats-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none
}

.cats-hero .cats-bg.pattern {
  opacity: .10;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.6px);
  background-size: 18px 18px
}

[data-theme="light"] .cats-hero .cats-bg.pattern {
  opacity: .14;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .7) 1px, transparent 1.6px)
}

.cats-hero .cats-bg.glow-l::before,
.cats-hero .cats-bg.glow-r::before {
  content: "";
  position: absolute;
  width: 38vmin;
  height: 38vmin;
  border-radius: 50%;
  filter: blur(44px);
  opacity: .35
}

.cats-hero .cats-bg.glow-l::before {
  left: -6vmin;
  top: -8vmin;
  background: #38bdf8
}

.cats-hero .cats-bg.glow-r::before {
  right: -8vmin;
  bottom: -10vmin;
  background: #a78bfa
}

[data-theme="light"] .cats-hero .cats-bg.glow-l::before,
[data-theme="light"] .cats-hero .cats-bg.glow-r::before {
  opacity: .28
}

.cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 18px;
}

.cats-titles {
  display: grid;
  gap: 6px
}

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .28px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border: var(--ring) solid var(--card-border)
}

.sec-eyebrow i {
  font-size: 14px
}

.sec-title {
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem)
}

.sec-sub {
  color: var(--text-muted);
  font-size: .95rem
}

.sec-actions .bdo-link-ghost {
  background: color-mix(in oklab, var(--bg) 92%, transparent)
}

@media (prefers-reduced-motion:no-preference) {
  .cats-hero .cat-simple--pro {
    transform: translateY(2px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease, background .15s ease
  }

  .cats-hero .cat-simple--pro:hover {
    transform: translateY(0)
  }
}

@media (max-width:640px) {
  .cats-hero {
    padding: 36px 0 44px
  }

  .sec-actions {
    display: none
  }
}

/* =========================
   TRENDING — “pro” slider
   ========================= */
.bdo-sec-trending {
  position: relative
}

.bdo-sec-trending .sec-head--split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end
}

@media (max-width:640px) {
  .bdo-sec-trending .sec-head--split {
    grid-template-columns: 1fr;
    align-items: start
  }
}

.bdo-sec-trending .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .8rem;
  padding: .35rem .6rem;
  border-radius: 9999px;
  color: var(--bdo-eyebrow-fg, #0f172a);
  background: var(--bdo-eyebrow-bg, #e2e8f0)
}

[data-theme="dark"] .bdo-sec-trending .sec-eyebrow {
  --bdo-eyebrow-fg: #e2e8f0;
  --bdo-eyebrow-bg: rgba(226, 232, 240, .12)
}

.bdo-trending.pro {
  --gap: 16px
}

@media (min-width:768px) {
  .bdo-trending.pro {
    --gap: 18px
  }
}

.trend-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .65rem;
  background: color-mix(in srgb, #ffffff 86%, transparent);
  border: 1px solid color-mix(in srgb, #000 12%, transparent);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s
}

[data-theme="dark"] .trend-card__link {
  background: color-mix(in srgb, #0b1020 76%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent)
}

.trend-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35);
  border-color: color-mix(in srgb, var(--bdo-accent, #6366f1) 22%, transparent)
}

.trend-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--thumb-ratio, 3/2);
  background: rgba(255, 255, 255, .04)
}

[data-theme="dark"] .trend-card__media {
  background: rgba(255, 255, 255, .04)
}

.trend-card__media.is-loading {
  animation: bdoShimmer 1.2s linear infinite
}

@keyframes bdoShimmer {
  to {
    background-position: 200% 0
  }
}

.trend-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  will-change: transform
}

.trend-card__link:hover .trend-card__media img {
  transform: scale(1.06)
}

.trend-card__grad {
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  pointer-events: none
}

.trend-card__chip {
  position: absolute;
  top: .6rem;
  left: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in oklab, #14b8a6 70%, #0ea5e9) 0%, #6366f1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 18px -8px rgba(0, 0, 0, .5)
}

.trend-card__author {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25)
}

.trend-card__author img {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .28)
}

.trend-card__body {
  padding: .2rem .9rem .9rem .9rem
}

.trend-card__title {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  color: var(--bdo-title, #0f172a)
}

[data-theme="dark"] .trend-card__title {
  --bdo-title: #e5e7eb
}

.trend-card__meta {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: color-mix(in srgb, currentColor 72%, transparent)
}

.bdo-trending.pro .swiper-wrapper {
  padding-bottom: .2rem
}

.bdo-trending.pro .swiper-scrollbar {
  margin-top: .6rem;
  height: 4px
}

.bdo-trending.pro .swiper-scrollbar-drag {
  border-radius: 9999px
}

.bdo-trending.pro .swiper-nav {
  position: absolute;
  inset: -54px 0 auto auto;
  display: flex;
  gap: .5rem
}

@media (max-width:768px) {
  .bdo-trending.pro .swiper-nav {
    position: static;
    margin-top: .2rem
  }
}

.bdo-trending.pro .nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #fff 86%, transparent);
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  transition: transform .2s, background .2s
}

[data-theme="dark"] .bdo-trending.pro .nav-btn {
  background: color-mix(in srgb, #0b1020 76%, transparent);
  border-color: color-mix(in srgb, #fff 10%, transparent)
}

.bdo-trending.pro .nav-btn:hover {
  transform: translateY(-1px)
}

/* =========================
   TRENDING — “NEO” list + aside
   ========================= */
.bdo-sec-trending-neo {
  position: relative;
  margin-top: 4px
}

.bdo-sec-trending-neo .neo-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: .9rem
}

@media (max-width:640px) {
  .bdo-sec-trending-neo .neo-head {
    grid-template-columns: 1fr
  }
}

.bdo-sec-trending-neo .neo-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1.25rem, 1.5vw + 1rem, 1.6rem);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .2px
}

.bdo-sec-trending-neo .neo-title .ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  box-shadow: 0 6px 16px rgba(20, 184, 166, .25)
}

.bdo-sec-trending-neo .neo-cta {
  align-self: end;
  text-decoration: none;
  font-weight: 800
}

.bdo-sec-trending-neo .neo-grid {
  display: block
}

@media (min-width:768px) {
  .bdo-sec-trending-neo .neo-grid {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 18px
  }
}

.bdo-sec-trending-neo .neo-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  counter-reset: rank var(--start, 0);
  padding: 0;
  margin: 0;
  list-style: none
}

.bdo-sec-trending-neo .neo-item {
  background: transparent;
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  backdrop-filter: saturate(1.02)
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-item {
  border-color: rgba(255, 255, 255, .14)
}

.bdo-sec-trending-neo .neo-link {
  display: grid;
  grid-template-columns: auto 168px 1fr auto;
  gap: .9rem;
  padding: .85rem .9rem;
  text-decoration: none;
  align-items: center
}

@media (max-width:640px) {
  .bdo-sec-trending-neo .neo-link {
    grid-template-columns: auto 128px 1fr
  }
}

.bdo-sec-trending-neo .neo-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .35);
  border-color: rgba(99, 102, 241, .35);
  background: color-mix(in oklab, currentColor 4%, transparent)
}

.bdo-sec-trending-neo .neo-rank {
  width: 42px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.bdo-sec-trending-neo .neo-thumb {
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
}

.bdo-sec-trending-neo .neo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .45s
}

.bdo-sec-trending-neo .neo-item:hover .neo-thumb img {
  transform: scale(1.06)
}

.bdo-sec-trending-neo .neo-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.bdo-sec-trending-neo .neo-h {
  font-size: 1.02rem;
  line-height: 1.35;
  margin-top: .15rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: .1px
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-h {
  color: #e5e7eb
}

.bdo-sec-trending-neo .neo-author {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--muted)
}

.bdo-sec-trending-neo .neo-author img {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  object-fit: cover
}

.bdo-sec-trending-neo .neo-meta {
  margin-top: .38rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem
}

.bdo-sec-trending-neo .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .81rem;
  font-weight: 800;
  padding: .34rem .58rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, currentColor 24%, transparent);
  background: transparent;
  color: inherit
}

.bdo-sec-trending-neo .chip.fill {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  border-color: transparent
}

.bdo-sec-trending-neo .neo-col--aside {
  position: relative
}

@media (min-width:1024px) {
  .bdo-sec-trending-neo .neo-col--aside {
    position: sticky;
    top: 88px;
    height: fit-content
  }
}

.bdo-sec-trending-neo .neo-submit {
  padding: 18px;
  border-radius: 16px;
  border-color: var(--card-stroke);
  background: var(--card-bg)
}

.bdo-sec-trending-neo .neo-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 900;
  font-size: .72rem;
  color: #fff;
  padding: .35rem .6rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%)
}

.bdo-sec-trending-neo .neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  border-radius: 12px;
  padding: .6rem .8rem;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  margin-top: .6rem;
  box-shadow: 0 6px 18px -8px rgba(34, 211, 238, .35)
}

.bdo-sec-trending-neo .neo-btn.ghost {
  background: transparent;
  color: #6366f1;
  border: 1px solid color-mix(in oklab, #6366f1 55%, transparent)
}

.bdo-sec-trending-neo .neo-quick {
  margin-top: var(--rythm-3);
  border-radius: 14px;
  border-color: var(--card-stroke);
  background: var(--card-bg);
  padding: 12px
}

.bdo-sec-trending-neo .neo-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  border-radius: 9999px;
  border: 1px solid rgba(99, 102, 241, .35);
  text-decoration: none;
  color: #6366f1;
  background: transparent;
  font-weight: 800;
  font-size: .86rem
}

.bdo-sec-trending-neo .neo-pill:hover {
  background: rgba(99, 102, 241, .08)
}

/* In-feed ad */
.bdo-sec-trending-neo .neo-item.neo-ad {
  border-style: dashed;
  position: relative;
  background: transparent
}

.bdo-sec-trending-neo .neo-item.neo-ad .neo-rank {
  width: 44px;
  display: grid;
  place-items: center
}

.bdo-sec-trending-neo .neo-item.neo-ad .neo-rank::after {
  content: "AD";
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #fff;
  background: #ef4444;
  border-radius: 6px;
  padding: .08rem .32rem;
  display: inline-block
}

.bdo-sec-trending-neo .neo-item.neo-ad .chip.ad {
  border-color: rgba(239, 68, 68, .5);
  color: #ef4444;
  background: transparent
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-item.neo-ad .chip.ad {
  border-color: rgba(239, 68, 68, .6)
}

/* =========================
   CITY GUIDES
   ========================= */
.bdo-sec-cityguides {
  position: relative
}

.bdo-sec-cityguides .cg-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: .85rem
}

@media (max-width:640px) {
  .bdo-sec-cityguides .cg-head {
    grid-template-columns: 1fr
  }
}

.bdo-sec-cityguides .cg-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 1000;
  letter-spacing: .2px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.bdo-sec-cityguides .cg-title .ico {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #06b6d4, #818cf8);
  box-shadow: 0 6px 16px rgba(6, 182, 212, .25)
}

.bdo-sec-cityguides .cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  padding: .34rem .6rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .72rem;
  color: #0f172a;
  background: linear-gradient(135deg, #e0f2fe, #ede9fe);
  border: 1px solid rgba(99, 102, 241, .25)
}

[data-theme="dark"] .bdo-sec-cityguides .cg-eyebrow {
  color: #e5e7eb;
  background: linear-gradient(135deg, #0b1020, #0f172a);
  border-color: rgba(255, 255, 255, .14)
}

.bdo-sec-cityguides .cg-sub {
  margin-top: .25rem;
  margin-bottom: 1rem;
  color: color-mix(in srgb, currentColor 62%, transparent)
}

.bdo-sec-cityguides .neo-cta {
  align-self: end;
  text-decoration: none;
  font-weight: 800
}

/* Filters */
.cg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .4rem 0 .9rem
}

.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .36rem .62rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .82rem;
  text-decoration: none;
  color: #6366f1;
  border: 1px solid color-mix(in oklab, #6366f1 45%, transparent);
  background: transparent;
  letter-spacing: .1px
}

.cg-chip i {
  font-size: .95rem
}

.cg-chip:hover {
  background: rgba(99, 102, 241, .08)
}

.cg-chip.is-active {
  color: #fff;
  background: var(--grad-a);
  border-color: transparent
}

/* Mosaic */
.cg-mosaic {
  display: grid;
  gap: 12px
}

@media (min-width:1024px) {
  .cg-mosaic {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 232px 232px;
    grid-template-areas: "A B C" "A D E"
  }
}

@media (max-width:1023.98px) {
  .cg-mosaic {
    grid-template-columns: 1fr
  }
}

.cg-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;
  isolation: isolate;
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  transition: transform .25s, box-shadow .25s, border-color .25s
}

.cg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, #22d3ee80, #a78bfa80, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none
}

.cg-card::after {
  content: "";
  position: absolute;
  inset: -40% -120%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .08) 40%, transparent 60%);
  opacity: 0;
  transition: opacity .25s, transform .8s cubic-bezier(.2, .6, .2, 1)
}

.cg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .55)
}

.cg-card:hover::after {
  opacity: 1;
  transform: translateX(22%) rotate(12deg)
}

.cg-card .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.02);
  transition: transform .5s ease;
  z-index: -1
}

.cg-card:hover .img {
  transform: scale(1.07)
}

.cg-card .shade {
  position: absolute;
  inset: 0;
  background: var(--shade-1)
}

.cg-card .content {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff
}

[data-theme="light"] .cg-card .content {
  color: #f8fafc
}

.cg-badges {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .45rem
}

.cg-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .5rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .72rem;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px)
}

.cg-name {
  font-weight: 1000;
  font-size: 1.28rem;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35)
}

.cg-tags {
  margin-top: .4rem;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap
}

.cg-tag {
  font-size: .72rem;
  font-weight: 900;
  padding: .26rem .48rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .12)
}

.cg-cta {
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .7rem;
  border-radius: 12px;
  font-weight: 1000;
  font-size: .9rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #22d3ee)
}

.cg-A {
  grid-area: A
}

.cg-B {
  grid-area: B
}

.cg-C {
  grid-area: C
}

.cg-D {
  grid-area: D
}

.cg-E {
  grid-area: E
}

/* Rail */
.cg-rail {
  margin-top: 16px;
  border: 1px solid var(--card-stroke);
  border-radius: 18px;
  padding: 12px;
  background: transparent;
  position: relative
}

.cg-rail .mask-l,
.cg-rail .mask-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 5;
  pointer-events: none;
  opacity: .85
}

.cg-rail .mask-l {
  left: 0;
  background: linear-gradient(90deg, var(--mcol, #0b1020) 0%, transparent 100%)
}

.cg-rail .mask-r {
  right: 0;
  background: linear-gradient(270deg, var(--mcol, #0b1020) 0%, transparent 100%)
}

[data-theme="light"] .cg-rail .mask-l {
  --mcol: #ffffff
}

[data-theme="light"] .cg-rail .mask-r {
  --mcol: #ffffff
}

.cg-rail-nav {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  z-index: 6
}

.cg-rail-nav.btn-prev {
  left: 6px
}

.cg-rail-nav.btn-next {
  right: 6px
}

.cg-rail-nav button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid rgba(99, 102, 241, .35);
  background: color-mix(in srgb, currentColor 4%, transparent);
  backdrop-filter: blur(6px);
  color: #6366f1;
  font-weight: 900;
  outline: none
}

.cg-rail-nav button:hover {
  background: rgba(99, 102, 241, .08)
}

.cg-rail-nav button:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .35)
}

.cg-rail-card {
  width: 150px
}

@media (max-width:480px) {
  .cg-rail-card {
    width: 120px
  }
}

.cg-rail-img {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--card-stroke);
  background: linear-gradient(135deg, #eef2ff, #f1f5f9);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35)
}

[data-theme="dark"] .cg-rail-img {
  background: linear-gradient(135deg, #0f172a, #0b1020)
}

.cg-rail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.cg-rail-name {
  margin-top: .45rem;
  font-weight: 1000;
  font-size: .95rem;
  text-align: center
}

.cg-rail-cta {
  font-size: .76rem;
  opacity: .85;
  text-align: center;
  display: block;
  margin-top: .15rem
}

@media (max-width:480px) {
  .cg-rail-img {
    width: 84px;
    height: 84px
  }

  .cg-rail-name {
    font-size: .9rem
  }
}

/* =========================
   PARTNER HIGHLIGHTS (ADS)
   ========================= */
.bdo-sec-ads {
  position: relative
}

.ads-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
  margin-bottom: .9rem
}

@media (max-width:640px) {
  .ads-head {
    grid-template-columns: 1fr
  }
}

.ads-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.55rem;
  font-weight: 1000
}

.ads-title .ico {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: radial-gradient(circle at 0% 0%, #ef4444, #ef4444 60%);
  box-shadow: 0 6px 16px rgba(245, 158, 11, .25)
}

.ads-sub {
  margin-top: .25rem;
  color: color-mix(in srgb, currentColor 62%, transparent)
}

.ads-grid {
  display: grid;
  gap: 12px
}

@media (min-width:1024px) {
  .ads-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

.ad-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 220px;
  background: var(--card-bg);
  border: 1px solid color-mix(in oklab, #ef4444 30%, transparent);
  transition: transform .25s, box-shadow .25s, border-color .25s
}

[data-theme="light"] .ad-card {
  background: #fff7ed
}

.ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .55);
  border-color: rgba(239, 68, 68, .45)
}

.ad-card .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.02);
  transition: transform .45s
}

.ad-card:hover .img {
  transform: scale(1.06)
}

.ad-shade {
  position: absolute;
  inset: 0;
  background: var(--shade-1)
}

.ad-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .34rem .54rem;
  border-radius: 9999px;
  font-weight: 1000;
  font-size: .72rem;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f59e0b)
}

.ad-content {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff
}

[data-theme="light"] .ad-content {
  color: #111827
}

.ad-brand {
  display: flex;
  align-items: center;
  gap: .5rem
}

.ad-brand img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .5)
}

.ad-name {
  font-weight: 1000
}

.ad-title {
  margin-top: .35rem;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .1px
}

.ad-meta {
  margin-top: .4rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .78rem;
  font-weight: 900;
  opacity: .95
}

.ad-cta {
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  border-radius: 12px;
  font-weight: 1000;
  text-decoration: none;
  color: #fff;
  background: var(--grad-c);
  box-shadow: 0 8px 20px -12px rgba(239, 68, 68, .35)
}

.ads-rail {
  margin-top: 14px;
  border: 1px dashed rgba(239, 68, 68, .35);
  border-radius: 16px;
  padding: 12px
}

.ads-rail .rail-title {
  font-weight: 1000;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.offer-card {
  border: 1px solid color-mix(in oklab, #ef4444 34%, transparent);
  border-radius: 14px;
  padding: 10px;
  background: var(--card-bg);
  display: flex;
  gap: .6rem;
  align-items: center
}

.offer-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, #ef4444 34%, transparent);
  flex: 0 0 auto
}

.offer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.offer-main {
  min-width: 0
}

.offer-title {
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.2
}

.offer-sub {
  font-size: .82rem;
  opacity: .85
}

/* =========================
   FOOTER (skins + visuals)  — consolidated
   ========================= */
.bdo-footer {
  --ft-bg-top: #0b0b0c;
  --ft-bg-bot: #141416;
  --ft-text: #f5f7fa;
  --ft-muted: #b8bcc6;
  --ft-ring: color-mix(in oklab, var(--ft-text) 16%, transparent);
  --ft-card: color-mix(in oklab, var(--ft-text) 6%, transparent);
  --ft-a1: #f59e0b;
  --ft-a2: #8b5cf6;
  --ft-orb-1: var(--ft-a1);
  --ft-orb-2: var(--ft-a2);
  position: relative;
  color: var(--ft-text);
  background:
    radial-gradient(1100px 520px at 15% -10%, color-mix(in oklab, var(--ft-a1) 18%, transparent), transparent 70%),
    radial-gradient(1100px 520px at 85% 115%, color-mix(in oklab, var(--ft-a2) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--ft-bg-top), var(--ft-bg-bot));
}

html[data-theme="light"] .bdo-footer:not(.skin-paper) {
  --ft-text: #e9eef7;
  --ft-muted: #b3c0cf
}

.bdo-footer.skin-ocean {
  --ft-bg-top: #061423;
  --ft-bg-bot: #0b1930;
  --ft-text: #e6f7ff;
  --ft-muted: #9fb6c7;
  --ft-a1: #06b6d4;
  --ft-a2: #60a5fa
}

.bdo-footer.skin-sunset {
  --ft-bg-top: #1b0f12;
  --ft-bg-bot: #230f1b;
  --ft-text: #ffeef5;
  --ft-muted: #f3bacf;
  --ft-a1: #fb7185;
  --ft-a2: #f59e0b;
  --ft-orb-1: #fb7185;
  --ft-orb-2: #f59e0b
}

.bdo-footer.skin-paper {
  --ft-bg-top: #ffffff;
  --ft-bg-bot: #fafbff;
  --ft-text: #0b1220;
  --ft-muted: #475569;
  --ft-a1: #2563eb;
  --ft-a2: #14b8a6;
  --ft-ring: #e6eaf2;
  --ft-card: #f6f8fb
}

.bdo-footer .footer-pattern-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in oklab, var(--ft-text) 35%, transparent) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .08;
  pointer-events: none
}

.bdo-footer .footer-grad-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--ft-a2) 22%, transparent), transparent);
  pointer-events: none
}

.bdo-footer .footer-grad-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--ft-a1) 16%, transparent), transparent);
  pointer-events: none
}

.bdo-footer .footer-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(60px);
  opacity: .2
}

.bdo-footer .footer-orb.orb-teal {
  left: -120px;
  top: -120px;
  background: var(--ft-orb-1)
}

.bdo-footer .footer-orb.orb-pink {
  right: -140px;
  bottom: -160px;
  background: var(--ft-orb-2)
}

html[data-theme="light"] .bdo-footer:not(.skin-paper) .footer-orb {
  opacity: .14
}

.bdo-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ft-a1), var(--ft-a2));
  opacity: .8
}

.footer-cta {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  background: var(--ft-card);
  border: 1px solid var(--ft-ring);
  border-radius: 1.25rem;
  padding: 1.1rem
}

@media (min-width:768px) {
  .footer-cta {
    grid-template-columns: 1.1fr .9fr;
    padding: 1.35rem 1.5rem
  }
}

.footer-cta__text .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ft-text) 8%, transparent);
  border: 1px solid var(--ft-ring)
}

.footer-cta__text .title {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 900;
  line-height: 1.15;
  margin: .55rem 0 .35rem
}

.footer-cta__text .sub {
  color: var(--ft-muted);
  font-size: .96rem
}

.footer-cta__form .input-wrap {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: color-mix(in oklab, var(--ft-text) 5%, transparent);
  border: 1px solid var(--ft-ring);
  padding: .35rem;
  border-radius: .9rem
}

.footer-cta__form .nl-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ft-text);
  padding: .65rem .8rem;
  font-size: .96rem
}

.footer-cta__form .nl-input::placeholder {
  color: color-mix(in oklab, var(--ft-text) 55%, transparent)
}

.footer-cta__form .nl-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  padding: .6rem .9rem;
  border-radius: .7rem;
  background: linear-gradient(135deg, var(--ft-a1), var(--ft-a2));
  border: 0;
  color: #fff;
  box-shadow: 0 6px 24px color-mix(in oklab, var(--ft-a2) 35%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease
}

.footer-cta__form .nl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in oklab, var(--ft-a2) 45%, transparent)
}

.footer-cta__form .footnote {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--ft-muted)
}

.footer-cta__form .link {
  color: color-mix(in oklab, var(--ft-a2) 65%, #64748b);
  text-decoration: none
}

.footer-cta__form .link:hover {
  text-decoration: underline
}

.footer-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ft-ring);
  margin-top: 1.25rem;
  padding-top: 1.25rem
}

@media (min-width:768px) {
  .footer-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 1.35rem
  }
}

.footer-grid .col .col-title {
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: .2rem 0 .6rem;
  color: var(--ft-text)
}

.footer-grid .linklist {
  display: grid;
  gap: .35rem
}

.footer-grid .link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: color-mix(in oklab, var(--ft-text) 88%, transparent);
  text-decoration: none;
  opacity: .95;
  padding: .25rem 0;
  border-radius: .5rem
}

.footer-grid .link i {
  opacity: .9;
  font-size: 1rem
}

.footer-grid .link:hover {
  opacity: 1;
  text-decoration: underline
}

.col-brand .brand {
  display: inline-flex;
  align-items: center
}

.col-brand .brand-img {
  width: 148px;
  height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35))
}

.col-brand .brand-copy {
  margin: .65rem 0 .75rem;
  color: var(--ft-muted);
  max-width: 42ch
}

.col-brand .social {
  display: flex;
  gap: .5rem;
  margin: .25rem 0 1rem
}

.col-brand .social-btn,
.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ft-text) 6%, transparent);
  border: 1px solid var(--ft-ring);
  color: var(--ft-text);
  transition: background .2s, transform .15s
}

.col-brand .social-btn:hover,
.store-badge:hover {
  background: color-mix(in oklab, var(--ft-text) 12%, transparent);
  transform: translateY(-1px)
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.store-badge {
  padding: .5rem .65rem;
  border-radius: .7rem;
  font-weight: 700;
  text-decoration: none;
  font-size: .9rem;
  width: auto
}

.store-badge i {
  font-size: 1rem
}

.footer-bottom {
  border-top: 1px solid var(--ft-ring);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--ft-text) 2%, transparent))
}

.footer-bottom .copy {
  color: var(--ft-muted);
  font-size: .9rem
}

.footer-bottom .mini-nav {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap
}

.footer-bottom .mini-nav .link {
  color: color-mix(in oklab, var(--ft-text) 88%, transparent);
  text-decoration: none
}

.footer-bottom .mini-nav .link:hover {
  text-decoration: underline
}

.footer-bottom .mini-nav .sep {
  opacity: .35
}

.footer-bottom .to-top {
  background: none;
  border: 0;
  cursor: pointer;
  color: color-mix(in oklab, var(--ft-text) 88%, transparent)
}

.bdo-footer :is(a, button).to-top,
.bdo-footer :is(a, button):focus-visible {
  outline-offset: 2px
}

.bdo-footer :is(a, button):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ft-text) 65%, transparent)
}

.bdo-footer .footer-grid {
  row-gap: 1rem
}

@media (max-width:420px) {
  .bdo-footer .footer-cta {
    padding: .9rem
  }

  .bdo-footer .footer-grid .link {
    padding: .15rem 0
  }
}

.bdo-footer a:focus-visible,
.bdo-footer button:focus-visible,
.bdo-footer .social-btn:focus-visible,
.bdo-footer .store-badge:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ft-text) 65%, transparent);
  outline-offset: 2px;
  border-radius: .5rem
}

/* =========================
   HERO HEIGHT HELPERS (safe)
   ========================= */
.full-bleed.hero-card #bdoHeroSwiper,
.full-bleed.hero-card .hero-slide {
  min-height: clamp(280px, 46vh, 420px)
}

@media (min-width:1024px) {

  .full-bleed.hero-card #bdoHeroSwiper,
  .full-bleed.hero-card .hero-slide {
    min-height: 420px
  }
}

@media (max-width:640px) {

  .full-bleed.hero-card #bdoHeroSwiper,
  .full-bleed.hero-card .hero-slide {
    min-height: 320px
  }
}

/* =========================
   ACCESSIBILITY / FOCUS
   ========================= */
.bdo-link,
.bdo-cta,
.bdo-cta-ghost,
.neo-cta,
.cg-cta,
.ad-cta,
.neo-btn,
.cg-chip,
.neo-pill {
  outline: none
}

.bdo-link:focus-visible,
.bdo-cta:focus-visible,
.bdo-cta-ghost:focus-visible,
.neo-cta:focus-visible,
.cg-cta:focus-visible,
.ad-cta:focus-visible,
.neo-btn:focus-visible,
.cg-chip:focus-visible,
.neo-pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .35);
  border-radius: 12px
}

/* =========================
   SWIPER REFINEMENTS (global)
   ========================= */
.swiper-button-prev,
.swiper-button-next {
  color: inherit;
  background: color-mix(in oklab, currentColor 6%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
  width: 38px;
  height: 38px;
  border-radius: 9999px
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: color-mix(in oklab, currentColor 10%, transparent)
}

.swiper-pagination-bullet {
  opacity: .35
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: color-mix(in oklab, currentColor 60%, #22d3ee)
}

/* =========================
   MISC UTILITIES
   ========================= */
.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden
}

.aspect-16x9 {
  aspect-ratio: 16/9
}

.aspect-4x3 {
  aspect-ratio: 4/3
}

.round-xl {
  border-radius: var(--radius);
  overflow: hidden
}

.round-lg {
  border-radius: var(--radius-sm);
  overflow: hidden
}

@media (hover:none) {

  .bdo-nav .bdo-a,
  .bdo-dd .bdo-dd-btn,
  .sec-cta,
  .cat-simple {
    padding-block: 12px
  }
}

/* =========================
   PRINT SAFE
   ========================= */
@media print {

  .hero-card,
  .bdo-darkband,
  .cats-bg,
  .orb,
  .pattern-dots,
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none !important
  }

  .card-pro,
  .cat-simple {
    border: 1px solid #ccc;
    box-shadow: none
  }
}

/* Remove vertical gaps between sections sitewide */
.bdo-section,
.bdo-home-sec,
.cats-hero,
.full-bleed,
section[class*="bdo-sec-"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 10 !important;
  padding-bottom: 10 !important;
}

/* If any heads add spacing, flatten them */
.neo-head,
.cg-head,
.ads-head,
.cats-head,
.cats-titles {
  margin-top: 0 !important;
  margin-bottom: 10 !important;
  padding-top: 10 !important;
  padding-bottom: 10 !important;
}

/* Remove default vertical rhythm added by wrapper utilities */
.bdo-max {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.neo-grid,
.ads-grid,
.cg-mosaic,
.cg-rail,
.cats-simple-grid {
  margin-top: 10 !important;
  margin-bottom: 10 !important;
}

/* Collapse any remaining gaps that come from stacked sections */
.full-bleed+.full-bleed,
.bdo-home-sec+.bdo-home-sec,
.bdo-section+.bdo-section,
section+section {
  margin-top: 0 !important;
}

/* Tailwind utility resets if they sneak in */
[class*="py-"],
[class*="my-"] {
  --tw-space-y-reverse: 0;
}

.space-y-12,
.space-y-10,
.space-y-8,
.space-y-6,
.space-y-4,
.space-y-2,
.space-y-0 {
  --tw-space-y-reverse: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Footer top block had extra vertical padding; keep it tight */
.bdo-footer .bdo-max {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.footer-bottom {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== END bdo.sections.css ===== */

/* ===== BEGIN bdo.tune.css ===== */

/* ==========================================================================
   bdo.tune.clean.css — Global tokens, helpers, components (Light/Dark)
   Load order: tailwind bundle -> bdo.hero.css -> bdo.sections.css -> this file
   ========================================================================== */

/* ========== Base + Tokens ========== */
@layer base {
  :root {
    /* Layout */
    --bdo-max: 1200px;
    --radius-2xl: 20px;
    --radius-xl: 16px;
    --radius-lg: 14px;
    --radius: 12px;
    --radius-sm: 10px;

    /* Spacing (fluid) */
    --pad-0: 0;
    --pad-1: clamp(6px, 0.6vw, 8px);
    --pad-2: clamp(8px, 1.0vw, 12px);
    --pad-3: clamp(10px, 1.2vw, 14px);
    --pad-4: clamp(12px, 1.6vw, 18px);
    --pad-5: clamp(16px, 2.0vw, 22px);
    --pad-6: clamp(18px, 2.4vw, 26px);
    --pad-7: clamp(22px, 3.0vw, 32px);
    --pad-8: clamp(28px, 3.6vw, 40px);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --lead: clamp(14px, 1.6vw, 18px);

    /* Palette (light) */
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --card: #ffffff;
    --card-elev: #ffffff;
    --card-border: rgba(2, 6, 23, .08);
    --surface: #0f172a0a;
    --text: #0f172a;
    --text-2: #111827;
    --muted: #475569;
    --muted-2: #64748b;

    /* Brand */
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --brand-gradient: linear-gradient(135deg, #0ea5e9, #22d3ee);

    /* Accents */
    --accent-1: #f97316;
    --accent-2: #8b5cf6;
    --accent-3: #22c55e;
    --accent-4: #ef4444;
    --accent-5: #06b6d4;
    --accent-6: #eab308;

    /* Effects */
    --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
    --shadow-sm: 0 6px 14px rgba(2, 6, 23, .08), 0 1px 2px rgba(2, 6, 23, .06);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, .10), 0 2px 6px rgba(2, 6, 23, .08);
    --shadow-lg: 0 16px 36px rgba(2, 6, 23, .12), 0 4px 10px rgba(2, 6, 23, .08);

    /* Controls */
    --control-bg: #fff;
    --control-border: #e2e8f0;
    --control-text: #0f172a;
    --control-placeholder: #94a3b8;
    --control-focus: color-mix(in oklab, var(--primary) 65%, white 35%);

    /* Utility paddings for sections */
    --pad-x: clamp(12px, 3.6vw, 24px);
    --pad-y: clamp(28px, 5.5vw, 56px);
  }

  [data-theme="dark"] {
    --bg: #0b1220;
    --bg-soft: #0f172a;
    --card: #0f172a;
    --card-elev: #0b1220;
    --card-border: rgba(148, 163, 184, .14);
    --surface: #ffffff10;
    --text: #e5e7eb;
    --text-2: #f1f5f9;
    --muted: #9aa7b8;
    --muted-2: #94a3b8;

    --primary: #22d3ee;
    --primary-600: #06b6d4;
    --primary-700: #0891b2;
    --brand-gradient: linear-gradient(135deg, #22d3ee, #60a5fa);

    --control-bg: #0b1220;
    --control-border: #1f2a44;
    --control-text: #e2e8f0;
    --control-placeholder: #7c8aa3;
  }

  html,
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .bdo-max {
    max-width: var(--bdo-max);
    margin-inline: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -0.02em;
  }

  h1 {
    font-weight: 900;
    line-height: 1.05;
  }

  h2 {
    font-weight: 900;
    line-height: 1.08;
  }

  h3 {
    font-weight: 800;
    line-height: 1.12;
  }

  .lead {
    font-size: var(--lead);
    color: var(--muted);
  }

  :where(a, button, input, select, textarea, .focusable):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: max(6px, var(--radius-sm));
  }

  /* Invert non-SVG images for dark backgrounds when needed */
  [data-theme="dark"] img[data-auto-invert="1"]:not([src$=".svg"]) {
    filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
  }
}

/* ========== Utilities ========== */
@layer utilities {
  .full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    isolation: isolate;
  }

  .full-bleed>.bdo-max {
    position: relative;
    z-index: 2;
  }

  .bdo-home-sec {
    padding-block: var(--pad-y);
  }

  .hero-card #bdoHeroSwiper,
  .hero-card .hero-slide {
    min-height: clamp(320px, 46vh, 460px);
  }

  @media (min-width:1024px) {

    .hero-card #bdoHeroSwiper,
    .hero-card .hero-slide {
      min-height: 460px;
    }
  }

  @media (max-width:640px) {

    .hero-card #bdoHeroSwiper,
    .hero-card .hero-slide {
      min-height: 320px;
    }
  }

  .has-edge-mask .mask-l {
    background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
  }

  .has-edge-mask .mask-r {
    background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
  }

  .icon-btn:focus-visible,
  .bdo-dd-btn:focus-visible,
  .bdo-link:focus-visible {
    outline: 2px solid color-mix(in oklab, #6366f1 85%, #fff);
    outline-offset: 2px;
  }

  /* Parallax full-bleed */
  .full-bleed-alt {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    isolation: isolate;
    --parallax-strength: 18;
    --scroll: 0;
    --pad-y: clamp(36px, 10vw, 120px);
  }

  .full-bleed-alt>.bdo-max {
    position: relative;
    z-index: 2;
  }

  .full-bleed-alt::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-url, none);
    background-size: cover;
    background-position: 50% calc(50% + var(--scroll));
    background-repeat: no-repeat;
    transform: translateZ(0);
    z-index: 1;
  }

  .full-bleed-alt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 6, 23, .35) 0%, rgba(2, 6, 23, .55) 60%, rgba(2, 6, 23, .8) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .full-bleed-alt .section-inner {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
  }
}

/* ========== Components ========== */
@layer components {

  /* Header / Nav */
  .bdo-header {
    position: relative;
    isolation: isolate;
  }

  .bdo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-3) 0;
  }

  .bdo-logo-img {
    height: 36px;
    width: auto;
  }

  .bdo-a,
  .bdo-link {
    color: var(--text);
    opacity: .9;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
  }

  .bdo-link:hover {
    opacity: 1;
    color: color-mix(in oklab, var(--text) 80%, var(--primary) 20%);
  }

  .bdo-active {
    color: var(--primary) !important;
    font-weight: 700;
  }

  .icon-btn {
    height: 40px;
    width: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: color-mix(in oklab, var(--card) 88%, transparent);
    transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .icon-btn:hover {
    transform: translateY(-2px);
    background: var(--surface);
    border-color: color-mix(in oklab, var(--primary) 28%, var(--card-border));
    box-shadow: var(--shadow-sm);
  }

  .icon-btn:active {
    transform: translateY(0);
  }

  /* Dropdown */
  .bdo-dd {
    position: relative;
  }

  .bdo-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }

  .bdo-dd:hover .bdo-dd-btn {
    background: var(--surface);
    border-color: var(--card-border);
  }

  .bdo-dd.open .bdo-dd-btn {
    background: color-mix(in oklab, var(--surface) 80%, transparent);
    border-color: color-mix(in oklab, var(--primary) 25%, var(--card-border));
  }

  .bdo-dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 240px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--card-border);
    background: color-mix(in oklab, var(--card) 82%, transparent);
    backdrop-filter: blur(8px) saturate(1.2);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .bdo-dd.align-right .bdo-dd-panel {
    right: 0;
    left: auto;
  }

  .bdo-dd.open .bdo-dd-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .bdo-dd-list {
    display: flex;
    flex-direction: column;
    padding: .35rem;
  }

  .bdo-dd-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    opacity: .92;
  }

  .bdo-dd-item i {
    font-size: 1.05rem;
    opacity: .82;
  }

  .bdo-dd-item:hover {
    background: var(--surface);
    opacity: 1;
    transform: translateY(-1px);
  }

  /* Buttons */
  .bdo-cta,
  .neo-btn,
  .nl-btn {
    --bg-cta: var(--brand-gradient);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .95rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    text-decoration: none;
    background: var(--bg-cta);
    box-shadow: 0 6px 18px color-mix(in oklab, #000 6%, var(--primary) 24%);
    transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
  }

  .bdo-cta i,
  .neo-btn i {
    font-size: 1.05rem;
  }

  .bdo-cta:hover,
  .neo-btn:hover,
  .nl-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
    box-shadow: 0 10px 26px color-mix(in oklab, #000 8%, var(--primary) 32%);
  }

  .bdo-cta:active,
  .neo-btn:active,
  .nl-btn:active {
    transform: translateY(0);
  }

  .bdo-cta-ghost,
  .neo-btn.ghost,
  .bdo-link-ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    text-decoration: none;
    color: var(--text);
    background: color-mix(in oklab, var(--card) 86%, transparent);
    transition: border-color .2s ease, background .2s ease, transform .18s ease;
  }

  .bdo-cta-ghost:hover,
  .neo-btn.ghost:hover,
  .bdo-link-ghost:hover {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--card-border));
    background: var(--surface);
    transform: translateY(-2px);
  }

  /* Chips */
  .chip,
  .neo-pill,
  .cg-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
    background: color-mix(in oklab, var(--text) 4%, transparent);
    color: color-mix(in oklab, var(--text) 84%, #0000);
    font-weight: 600;
    font-size: .82rem;
  }

  .chip.fill {
    background: color-mix(in oklab, var(--primary) 16%, transparent);
    border-color: color-mix(in oklab, var(--primary) 28%, var(--card-border));
  }

  /* Cards / Lists */
  .card,
  .neo-item,
  .cg-card,
  .ad-card,
  .offer-card,
  .cat-simple {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    will-change: transform;
  }

  .card:hover,
  .neo-item:hover,
  .cg-card:hover,
  .ad-card:hover,
  .offer-card:hover,
  .cat-simple:hover {
    transform: translateY(-4px);
    border-color: color-mix(in oklab, var(--primary) 25%, var(--card-border));
    box-shadow: var(--shadow-md);
  }

  /* Category simple */
  .cat-simple {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem;
  }

  .cat-simple-ico {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--surface);
  }

  .cat-simple-name {
    font-weight: 800;
  }

  .cat-simple-count {
    font-size: .84rem;
    color: var(--muted);
  }

  .cat-simple-arrow {
    margin-left: auto;
    opacity: .6;
    transition: transform .14s ease, opacity .14s ease;
  }

  .cat-simple:hover .cat-simple-arrow {
    opacity: 1;
    transform: translateX(2px);
  }

  .cat-simple.acc-1 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-1) 16%, transparent);
  }

  .cat-simple.acc-2 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-2) 16%, transparent);
  }

  .cat-simple.acc-3 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-3) 16%, transparent);
  }

  .cat-simple.acc-4 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-4) 16%, transparent);
  }

  .cat-simple.acc-5 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-5) 16%, transparent);
  }

  .cat-simple.acc-6 .cat-simple-ico {
    background: color-mix(in oklab, var(--accent-6) 16%, transparent);
  }

  /* Trending list */
  .neo-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .neo-item {
    padding: .6rem;
  }

  .neo-link {
    display: flex;
    align-items: stretch;
    gap: .8rem;
    text-decoration: none;
    color: inherit;
  }

  .neo-rank {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: color-mix(in oklab, var(--primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary) 26%, var(--card-border));
  }

  .neo-thumb {
    flex: 0 0 160px;
    border-radius: 12px;
    overflow: hidden;
    background: #0001;
  }

  .neo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .neo-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    min-width: 0;
  }

  .neo-h {
    font-weight: 900;
    font-size: clamp(16px, 2.1vw, 18px);
    line-height: 1.25;
  }

  .neo-author {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    color: var(--muted);
  }

  .neo-author img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
  }

  .neo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--muted);
  }

  .neo-ad {
    background: color-mix(in oklab, var(--accent-6) 6%, var(--card));
    border-style: dashed;
  }

  .neo-ad .neo-link {
    align-items: center;
  }

  .neo-ad .neo-thumb {
    flex-basis: 148px;
  }

  /* Submit panel */
  .neo-submit {
    border-radius: var(--radius-2xl);
    padding: var(--pad-6);
    background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 8%, transparent), transparent);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
  }

  .neo-badge {
    background: color-mix(in oklab, var(--text) 6%, transparent);
    border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
    padding: .28rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
  }

  .neo-btn {
    margin-top: .6rem;
  }

  .neo-btn+.neo-btn {
    margin-left: .5rem;
  }

  .neo-bullets li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
  }

  .neo-bullets i {
    color: var(--primary);
  }

  /* City Guides */
  .cg-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 900;
  }

  .cg-sub {
    color: var(--muted);
    margin: .35rem 0 .6rem;
  }

  .cg-mosaic {
    display: grid;
    grid-template-areas: "A B B" "C B B" "C D E";
    gap: 12px;
  }

  .cg-card {
    position: relative;
    height: 220px;
    color: #fff;
    overflow: hidden;
  }

  .cg-A {
    grid-area: A;
  }

  .cg-B {
    grid-area: B;
    height: 452px;
  }

  .cg-C {
    grid-area: C;
    height: 452px;
  }

  .cg-D {
    grid-area: D;
  }

  .cg-E {
    grid-area: E;
  }

  .cg-card .img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.02);
  }

  .cg-card .shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #00000066, #00000010 38%, #00000080);
  }

  .cg-card .content {
    position: absolute;
    inset: 0;
    padding: var(--pad-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
  }

  .cg-name {
    font-size: clamp(18px, 2.6vw, 26px);
    font-weight: 1000;
    letter-spacing: -.01em;
  }

  .cg-badge {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #ffffff22;
    border: 1px solid #ffffff38;
    font-weight: 800;
    font-size: .78rem;
  }

  .cg-tags {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
  }

  .cg-tag {
    background: #ffffff1a;
    border: 1px solid #ffffff26;
    border-radius: 999px;
    padding: .18rem .5rem;
    font-size: .78rem;
  }

  .cg-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .2rem;
    font-weight: 800;
    opacity: .95;
  }

  .cg-card:hover .cg-cta {
    transform: translateX(2px);
  }

  .cg-rail-name {
    font-weight: 800;
    margin-top: .35rem;
  }

  .cg-rail-cta {
    font-size: .84rem;
  }

  /* Ads / Offers */
  .ad-card {
    position: relative;
    height: 220px;
    color: #fff;
  }

  .ad-card .img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.02);
  }

  .ad-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #00000066, transparent 40%, #00000099);
  }

  .ad-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00000088;
    border: 1px solid #ffffff2e;
    color: #fff;
    padding: .22rem .5rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .72rem;
  }

  .ad-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--pad-4);
    display: flex;
    flex-direction: column;
    gap: .45rem;
  }

  .ad-brand {
    display: flex;
    align-items: center;
    gap: .45rem;
    opacity: .95;
  }

  .ad-brand img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .ad-title {
    font-weight: 1000;
    letter-spacing: -.01em;
  }

  .ad-meta {
    color: #ffffffcc;
  }

  .ad-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 800;
    margin-top: .2rem;
  }

  .offer-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    min-width: 260px;
  }

  .offer-logo img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .offer-title {
    font-weight: 800;
  }

  .offer-sub {
    font-size: .86rem;
    color: var(--muted);
  }

  /* Footer */
  .bdo-footer {
    color: #e5e7eb;
    background: radial-gradient(1000px 480px at 100% -120px, #1e40af26, transparent 60%) no-repeat, #0b1220;
  }

  .bdo-footer .link {
    color: #cbd5e1;
    opacity: .9;
    text-decoration: none;
  }

  .bdo-footer .link:hover {
    color: #fff;
    opacity: 1;
  }

  .footer-cta {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: clamp(12px, 3vw, 20px);
    background: linear-gradient(135deg, #0ea5e922, #6366f122);
    border: 1px solid #ffffff1a;
    border-radius: var(--radius-2xl);
    padding: var(--pad-7);
    box-shadow: inset 0 1px 0 #ffffff14, var(--shadow-sm);
  }

  .footer-cta .title {
    font-weight: 1000;
    letter-spacing: -.01em;
  }

  .footer-cta .sub {
    color: #cbd5e1;
  }

  .footer-cta .input-wrap {
    display: flex;
    gap: .5rem;
    align-items: center;
  }

  /* Inputs (newsletter) */
  .nl-input {
    height: 46px;
    flex: 1;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    color: var(--control-text);
    border-radius: 999px;
    padding: 0 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .nl-input::placeholder {
    color: var(--control-placeholder);
  }

  .nl-input:focus {
    border-color: var(--control-focus);
    box-shadow: var(--ring);
  }

  /* Small section chrome */
  .sec-eyebrow,
  .cg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .sec-title,
  .neo-title {
    font-weight: 1000;
    letter-spacing: -.01em;
  }

  .sec-sub {
    color: var(--muted);
  }
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .neo-thumb {
    flex-basis: 140px;
  }

  .cg-card {
    height: 200px;
  }

  .cg-B,
  .cg-C {
    height: 408px;
  }
}

@media (max-width: 768px) {
  .bdo-top {
    padding: var(--pad-2) 0;
  }

  .neo-link {
    align-items: center;
  }

  .neo-thumb {
    flex-basis: 132px;
  }

  .cg-mosaic {
    grid-template-areas: "A" "B" "C" "D" "E";
  }

  .cg-card,
  .cg-B,
  .cg-C {
    height: 240px;
  }

  .footer-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .neo-item {
    padding: .5rem;
  }

  .neo-thumb {
    flex-basis: 120px;
  }

  .cat-simple {
    padding: .7rem;
  }

  .bdo-cta,
  .neo-btn,
  .nl-btn {
    padding: .6rem .85rem;
  }
}

/* === City Guides — Hi-res image polish === */

/* Use actual <img> for better decoding/sizes/DPR */








/* Layout: give big tiles more breathing room so images aren’t over-cropped */


/* Base heights (mobile first) */




/* Tablet */
@media (min-width: 640px) {

  .cg-card,
  .cg-A,
  .cg-D,
  .cg-E {
    height: 240px;
  }

  .cg-B,
  .cg-C {
    height: 420px;
  }
}

/* Desktop */
@media (min-width: 1024px) {

  .cg-card,
  .cg-A,
  .cg-D,
  .cg-E {
    height: 260px;
  }

  .cg-B,
  .cg-C {
    height: 480px;
  }

  /* was ~452 — a touch taller reduces aggressive crops */
}

/* Optional: use aspect-ratio for smoother CLS on load */
@supports (aspect-ratio: 1) {

  .cg-A,
  .cg-D,
  .cg-E {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .cg-B,
  .cg-C {
    height: auto;
    aspect-ratio: 5 / 4;
  }
}

/* Optional focus helpers: set data-focus="top|bottom|left|right|center" on .cg-img */










/* Slightly denser text shadow on large tiles to keep titles legible */


/* ========================
   City Guides — big rect images (mosaic + rail)
   ======================== */

/* --- Mosaic big cards (A–E) --- */


/* If you still use the <span class="img" style="background-image:..."> */


/* If you switched to <img class="cg-img"> from earlier step */


/* Maintain comfortable heights/ratios so images aren’t over-cropped */




@media (min-width:640px) {

  .cg-A,
  .cg-D,
  .cg-E {
    height: 260px;
  }

  .cg-B,
  .cg-C {
    height: 460px;
  }
}

@media (min-width:1024px) {

  .cg-A,
  .cg-D,
  .cg-E {
    height: 280px;
  }

  .cg-B,
  .cg-C {
    height: 500px;
  }
}

/* Prefer aspect-ratio where supported (prevents CLS while loading) */
@supports (aspect-ratio:1) {

  .cg-A,
  .cg-D,
  .cg-E {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .cg-B,
  .cg-C {
    height: auto;
    aspect-ratio: 5 / 4;
  }
}

/* Slightly stronger legibility on overlays */


/* --- Rail cards (horizontal scroller) --- */






/* The image wrapper: turn OFF circle, make it full-bleed rectangular */


/* Remove any legacy circle rules */


/* Actual image fit */


/* Text area below image */




/* ===== END bdo.tune.css ===== */

/* ===== BEGIN bdo.enhanced.css ===== */

/* ==========================================================================
   BDO Enhanced UI (images, backgrounds, icons, responsive)
*/
:root {
  --bdo-max: 1160px;
  --bdo-radius: 1.25rem;
  /* xl rounded feel */
  --bdo-radius-sm: .875rem;
  --bdo-shadow: 0 6px 20px rgba(0, 0, 0, .10);
  --bdo-shadow-hover: 0 10px 30px rgba(0, 0, 0, .14);
  --bdo-ring: rgba(255, 255, 255, .12);
  --bdo-surface: rgba(255, 255, 255, .06);
  --bdo-border: rgba(0, 0, 0, .08);
  --bdo-muted: rgba(17, 24, 39, .6);
  /* slate-800 60% */
  --bdo-muted-ink: rgba(255, 255, 255, .72);
  --bdo-primary: #00a8a9;
  --bdo-gradient-1: radial-gradient(1200px 600px at 5% 0%, rgba(0, 168, 169, .15), transparent 60%),
    radial-gradient(900px 520px at 95% 30%, rgba(199, 81, 192, .12), transparent 60%);
}

[data-theme="dark"] {
  --bdo-ring: rgba(255, 255, 255, .14);
  --bdo-surface: rgba(255, 255, 255, .05);
  --bdo-border: rgba(255, 255, 255, .08);
  --bdo-muted: rgba(255, 255, 255, .72);
}

/* -------------------- Global media rendering -------------------- */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* reduce blurring during GPU transforms */
}

picture>img {
  width: 100%;
  height: auto;
}

/* Low-quality blur-up helper (optional; add class="bdo-blur" to <img>) */
.bdo-blur {
  filter: blur(12px);
  transform: scale(1.03);
}

.bdo-blur.is-loaded {
  filter: none;
  transform: none;
  transition: filter .35s ease, transform .35s ease;
}

/* Auto invert logos on dark backgrounds if data-auto-invert="1" on <img> */
[data-theme="dark"] img[data-auto-invert="1"] {
  filter: brightness(0) invert(1);
}

/* -------------------- Layout helpers -------------------- */
.bdo-max {
  max-width: var(--bdo-max);
}

/* Card container defaults (used by many sections) */
.card-pro,
.cat-simple {
  border-radius: var(--bdo-radius);
  overflow: hidden;
  background: var(--bdo-surface);
  box-shadow: var(--bdo-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid var(--bdo-border);
}

.card-pro:hover,
.cat-simple:hover {
  transform: translateY(-2px);
  box-shadow: var(--bdo-shadow-hover);
}

/* -------------------- Hero (swiper + ornaments) -------------------- */
.hero-card {
  position: relative;
  overflow: hidden;
  background: #0b1220;
  isolation: isolate;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bdo-gradient-1);
  pointer-events: none;
  z-index: 0;
}

/* Safe mask fades for any background image underneath */
.grad-mask-top,
.grad-mask-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
}

.grad-mask-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
}

.grad-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

/* Animated icons sizing */
.sz-md {
  font-size: clamp(18px, 2.6vw, 28px);
}

.sz-lg {
  font-size: clamp(28px, 4vw, 38px);
}

@media (prefers-reduced-motion: reduce) {

  .anim-floatX,
  .anim-floatY,
  .anim-spin {
    animation: none !important;
  }
}

/* Swiper controls polished for dark/light */
.hero-card .swiper-button-prev,
.hero-card .swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .16s ease, transform .16s ease;
}

.hero-card .swiper-button-prev:hover,
.hero-card .swiper-button-next:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .22);
}

.hero-card .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .55);
  opacity: 1;
}

.hero-card .swiper-pagination-bullet-active {
  background: #fff;
}

.hero-card .autoplay-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  z-index: 3;
  background: rgba(255, 255, 255, .15);
}

.hero-card .autoplay-bar>span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .75));
}

/* Hero search dock refinements */
.hero-search-wrap {
  z-index: 4;
}

.hero-search-form {
  border-radius: calc(var(--bdo-radius) + 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  border: 1px solid var(--bdo-ring);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
}

.hero-search-form .field input,
.hero-search-form .field select {
  font-size: clamp(14px, 1.2vw, 16px);
}

/* -------------------- Category “simple pro” tiles -------------------- */
.cats-hero {
  position: relative;
}

.cats-bg.pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0, 168, 169, .12) 0 20%, transparent 21%),
    radial-gradient(circle at 80% 30%, rgba(199, 81, 192, .10) 0 18%, transparent 19%);
  opacity: .55;
}

.cats-bg.glow-l,
.cats-bg.glow-r {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 40%;
  z-index: 0;
  filter: blur(40px);
}

.cats-bg.glow-l {
  left: -10%;
  background: radial-gradient(closest-side, rgba(0, 168, 169, .12), transparent);
}

.cats-bg.glow-r {
  right: -10%;
  background: radial-gradient(closest-side, rgba(199, 81, 192, .10), transparent);
}

.cats-simple-grid--pro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .cats-simple-grid--pro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cats-simple-grid--pro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cat-simple--pro {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
}

.cat-simple-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 20px;
}

.cat-simple-arrow {
  opacity: .65;
  transition: transform .16s ease, opacity .16s ease;
}

.cat-simple:hover .cat-simple-arrow {
  transform: translateX(2px);
  opacity: .95;
}

/* Accent rings (cycling) */
.cat-simple--pro.acc-1 {
  border-color: rgba(0, 168, 169, .18);
}

.cat-simple--pro.acc-2 {
  border-color: rgba(199, 81, 192, .18);
}

.cat-simple--pro.acc-3 {
  border-color: rgba(255, 187, 0, .20);
}

.cat-simple--pro.acc-4 {
  border-color: rgba(0, 180, 255, .18);
}

.cat-simple--pro.acc-5 {
  border-color: rgba(0, 255, 163, .20);
}

.cat-simple--pro.acc-6 {
  border-color: rgba(255, 99, 132, .20);
}

/* -------------------- Universal media wrappers -------------------- */
/* Common structure:
   .card-pro > .card-pro-media > img
*/
.card-pro-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}

.card-pro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .35s ease;
}

.card-pro:hover .card-pro-media img {
  transform: scale(1.045);
}

/* Aspect helpers */
.card-pro.feature .card-pro-media {
  aspect-ratio: 16 / 9;
}

.card-pro.overlay-sm .card-pro-media {
  aspect-ratio: 32 / 11;
}

.card-pro.list .list-media {
  aspect-ratio: 4 / 3;
  width: 128px;
  min-width: 128px;
  border-radius: var(--bdo-radius-sm);
  overflow: hidden;
}

@media (min-width: 480px) {
  .card-pro.list .list-media {
    width: 140px;
    min-width: 140px;
  }
}

@media (min-width: 768px) {
  .card-pro.list .list-media {
    width: 150px;
    min-width: 150px;
  }
}

/* Overlay titles on images */
.card-pro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 35%, rgba(2, 6, 23, .55));
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.card-pro-overlay .card-pro-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Body + author strip */
.card-pro-body {
  padding: 12px 14px 16px;
}

.card-pro .author {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--bdo-muted);
  font-weight: 600;
  letter-spacing: .2px;
}

.card-pro .author img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.card-pro .author.mini img {
  width: 26px;
  height: 26px;
}

.card-pro .meta {
  font-size: 12px;
  opacity: .7;
  margin-top: 4px;
}

/* Titles */
.card-pro-title {
  color: inherit;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Darkband variant for Videos section */
.bdo-darkband {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border-radius: var(--bdo-radius);
  padding: 18px 16px 22px;
  border: 1px solid var(--bdo-ring);
}

/* -------------------- Trending (Swiper row) -------------------- */
.swiper.bdo-trending {
  padding-bottom: 22px;
}

.swiper.bdo-trending .swiper-slide {
  height: auto;
}

.swiper.bdo-trending .swiper-scrollbar {
  background: rgba(255, 255, 255, .08);
}

.swiper.bdo-trending .swiper-scrollbar-drag {
  background: #fff;
}

/* -------------------- Section headers -------------------- */
.bdo-home-sec .sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bdo-home-sec .sec-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bdo-home-sec .sec-ico {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .25));
}

.bdo-home-sec .sec-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
}

.bdo-home-sec .sec-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--bdo-primary);
}

.only-mobile-cta {
  display: none;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .only-mobile-cta {
    display: block;
  }

  .m-ghost-cta {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--bdo-primary);
    color: var(--bdo-primary);
    background: transparent;
    font-weight: 700;
  }
}

/* -------------------- Videos: play UX -------------------- */
.video-feature {
  position: relative;
  border-radius: var(--bdo-radius);
  overflow: hidden;
}

.video-feature .video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}

.video-feature .play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #e31d1a;
  border: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .16s ease, background .16s ease;
}

.video-feature .play-btn:hover {
  transform: translateY(-1px);
  background: #fff;
}

.video-feature .video-iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.video-mini {
  position: relative;
}

.video-mini .mini-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  color: #e31d1a;
}

/* -------------------- Header décor -------------------- */
.bdo-header .pattern-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12px 12px, rgba(255, 255, 255, .18), transparent 40px);
  background-size: 36px 36px;
  opacity: .14;
}

.bdo-header .orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .24;
  z-index: 0;
}

.bdo-header .orb.teal {
  left: -120px;
  top: -80px;
  background: rgba(0, 168, 169, .6);
}

.bdo-header .orb.vio {
  right: -140px;
  top: -60px;
  background: rgba(130, 76, 230, .5);
}

.bdo-header .orb.pink {
  left: 40%;
  top: -100px;
  background: rgba(237, 90, 181, .35);
}

/* -------------------- Nav pills / links -------------------- */
.bdo-nav .bdo-a {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  color: inherit;
  border: 1px solid transparent;
}

.bdo-nav .bdo-link:hover {
  background: rgba(0, 0, 0, .05);
}

[data-theme="dark"] .bdo-nav .bdo-link:hover {
  background: rgba(255, 255, 255, .08);
}

.bdo-nav .bdo-active {
  background: rgba(0, 168, 169, .14);
  border-color: rgba(0, 168, 169, .3);
  color: var(--bdo-primary);
}

/* -------------------- Dropdown polish -------------------- */
.bdo-dd .bdo-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid transparent;
}

.bdo-dd.open .bdo-dd-btn {
  border-color: var(--bdo-ring);
  background: rgba(255, 255, 255, .06);
}

.bdo-dd .bdo-dd-panel {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bdo-ring);
}

.bdo-dd .bdo-dd-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
}

.bdo-dd .bdo-dd-item:hover {
  background: rgba(255, 255, 255, .06);
}

/* -------------------- Footer contrast -------------------- */
footer {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .04));
}

[data-theme="dark"] footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .03));
}

/* -------------------- Utilities -------------------- */
/* Crop long titles gracefully everywhere */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prevent layout shift on image loading (reserve space) */
.aspect-16x9 {
  aspect-ratio: 16 / 9;
}

.aspect-4x3 {
  aspect-ratio: 4 / 3;
}

.round-xl {
  border-radius: var(--bdo-radius);
  overflow: hidden;
}

.round-lg {
  border-radius: var(--bdo-radius-sm);
  overflow: hidden;
}

/* Improve tap targets on touch */
@media (hover: none) {

  .bdo-nav .bdo-a,
  .bdo-dd .bdo-dd-btn,
  .sec-cta,
  .cat-simple {
    padding-block: 12px;
  }
}

/* -------------------- Light theme tweaks for readability -------------------- */
[data-theme="light"] .card-pro {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .86));
}

[data-theme="light"] .card-pro.list {
  background: rgba(255, 255, 255, .92);
}

[data-theme="light"] .bdo-darkband {
  background: linear-gradient(180deg, rgba(13, 18, 28, .9), rgba(13, 18, 28, .84));
}

/* -------------------- Print-friendly fallback -------------------- */
@media print {

  .hero-card,
  .bdo-darkband,
  .cats-bg,
  .orb,
  .pattern-dots,
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    display: none !important;
  }

  .card-pro,
  .cat-simple {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}

/* ===== END bdo.enhanced.css ===== */

/* ===== BEGIN bdo.header.css ===== */

[data-theme="dark"] img[data-auto-invert="1"] {
  filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
}

/* bdo.header.css - extracted from your inline style and extended */

.bdo-logo-img {
  height: 44px;
  width: auto;
}

/* ------- SIZE OVERRIDES: header icons + nav font ------- */

/* Increase top-right action icons (social, account, theme) */
.bdo-actions .icon-rail .icon-btn,
.bdo-actions .icon-btn {
  width: 48px;
  /* larger tap target */
  height: 48px;
  padding: 8px;
  border-radius: 10px;
  font-size: 20px;
  /* icon size */
  align-items: center;
  justify-content: center;
}

/* Account / avatar button */
.bdo-dd[data-dd="user"] .icon-btn {
  width: 50px;
  height: 50px;
  font-size: 22px;
}

/* Theme button state visual bump */
#themeToggle {
  font-size: 20px;
  width: 48px;
  height: 48px;
}

/* Logo: slightly larger */
.bdo-logo-img {
  height: 56px;
}

/* Nav link font size & spacing (desktop) */
.nav-wrap a.bdo-a {
  font-size: 16px;
  /* increase nav font (desktop) */
  padding: 8px 10px;
  line-height: 1.2;
}

/* Dropdown toggle button (the "City Guides" / "Life Style" labels) */
.bdo-dd-btn {
  font-size: 16px;
  /* match nav size */
  padding: 6px 10px;
}

/* Dropdown items */
.bdo-dd-list .bdo-dd-item {
  font-size: 15px;
  padding: 10px 12px;
}

/* Right-side nav links (About/Contact) */
.hidden.md\\:flex .bdo-a {
  font-size: 16px;
}


/* Mobile: scale up touch targets + text so thumbs are happy */
@media (max-width: 780px) {

  .bdo-actions .icon-rail .icon-btn,
  .bdo-actions .icon-btn,
  .menu-toggle {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  /* make mobile nav links slightly bigger for readability */
  #primaryNav[data-open="true"] .nav-wrap a.bdo-a,
  #primaryNav[data-open="true"] .bdo-dd-btn {
    font-size: 17px;
    padding: 12px 14px;
    display: block;
  }

  .bdo-dd-list .bdo-dd-item {
    font-size: 16px;
    padding: 12px 14px;
  }
}

/* Optional: subtle emphasis for active link when font size grows */
.bdo-a.bdo-active {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.bdo-max {
  max-width: 82% !important;
  width: 82% !important;
}

/* bdo.header.css — header refinements (replace existing) */

/* Header base */
.bdo-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  backdrop-filter: blur(8px) saturate(1.05);
  background: color-mix(in oklab, var(--bg) 88%, rgba(255, 255, 255, 0.32));
  border-bottom: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Slight lift when page scrolled (you can toggle .scrolled via JS if desired) */
.bdo-header.scrolled {
  background: color-mix(in oklab, var(--bg) 92%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}

/* Top row spacing */
.bdo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(8px, 1.4vw, 14px) var(--pad-x);
}

/* logo sizing + accessible hit area */
.bdo-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.bdo-logo-img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform .18s ease;
}

.bdo-logo:focus-visible,
.bdo-logo:hover {
  transform: translateY(-2px);
}

/* Nav container (desktop) */
.bdo-nav {
  border-top: 0;
  --nav-gap: 18px;
}

.bdo-nav .mx-auto.bdo-max {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--pad-x);
}

/* Nav links visual update */
.bdo-a.bdo-link,
.bdo-a.bdo-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--nav-gap);
  padding: 8px 6px;
  font-weight: 700;
  letter-spacing: .2px;
  color: color-mix(in oklab, var(--text) 88%, transparent);
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: color .15s ease, transform .12s ease;
}

/* active state */
.bdo-a.bdo-active {
  color: var(--primary);
}

/* animated underline on hover */
.bdo-a.bdo-link::after,
.bdo-a.bdo-active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 60%, #fff));
  transition: transform .18s ease;
  opacity: 0.95;
}

.bdo-a.bdo-link:hover::after,
.bdo-a.bdo-active::after {
  transform: scaleX(1);
}

/* dropdown trigger */
.bdo-dd {
  position: relative;
  display: inline-block;
}

.bdo-dd-btn {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
}

.bdo-dd-btn:hover {
  background: var(--surface);
  transform: translateY(-1px);
}

/* dropdown panel */
.bdo-dd-panel {
  min-width: 220px;
  max-width: 320px;
  background: color-mix(in oklab, var(--card) 96%, transparent);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.12);
  border-radius: 12px;
  padding: .45rem;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .15s ease, transform .16s ease;
}

/* visible panel */
.bdo-dd.open .bdo-dd-panel,
.bdo-dd-panel[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* dropdown list items */
.bdo-dd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bdo-dd-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: .55rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.bdo-dd-item:hover,
.bdo-dd-item:focus-visible {
  background: var(--surface);
  transform: translateY(-1px);
}

/* icon rail */
.icon-rail {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06);
}

/* mobile: hide desktop nav, show mobile-only elements */
.mobile-only {
  display: none;
}

/* mobile slide panel for nav */
.mobile-nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  right: -100%;
  width: min(92vw, 420px);
  height: 100vh;
  background: var(--card);
  box-shadow: -12px 0 40px rgba(2, 6, 23, 0.25);
  transition: right .28s cubic-bezier(.2, .9, .24, 1);
  z-index: 99999;
  overflow-y: auto;
  padding: 20px;
}

.mobile-nav-panel.open {
  right: 0;
}

/* mobile nav inside */
.mobile-nav-panel .bdo-a {
  display: block;
  padding: 12px 10px;
  margin: 0;
  border-radius: 8px;
}

.mobile-nav-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

/* responsive rules */
@media (max-width: 880px) {
  .bdo-nav .mx-auto.bdo-max {
    justify-content: space-between;
  }

  .nav-wrap {
    display: none;
  }

  /* hide desktop nav links */
  .mobile-only {
    display: inline-flex;
  }

  .bdo-top {
    padding: 10px var(--pad-x);
  }

  .bdo-logo-img {
    height: 40px;
  }
}

/* small accessibility polish */
.bdo-dd-panel:focus {
  outline: none;
}

.bdo-dd-panel [tabindex] {
  outline: none;
}

/* Mobile: show only logo + menu icon, hide other header chrome */
@media (max-width: 880px) {

  /* Layout: make top row compact and balanced */
  .bdo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px var(--pad-x);
  }

  /* Left side: keep logo visible */
  .bdo-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }

  /* Hide social rail, user dd, theme toggle etc. on mobile; keep only .menu-toggle */
  .bdo-top .bdo-actions> :not(.menu-toggle) {
    display: none !important;
  }

  /* Make menu button visible and visually on the right */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in oklab, var(--card) 94%, transparent);
    border: 1px solid color-mix(in oklab, var(--card-border) 60%, transparent);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
    gap: 6px;
  }

  /* Optional: slightly smaller logo to avoid crowding */
  .bdo-logo-img {
    height: 40px;
  }

  /* Hide desktop nav in favour of the mobile panel */
  .nav-wrap {
    display: none !important;
  }

  .ml-2.hidden.md\\:flex {
    display: none !important;
  }

  /* Adjust header height so logo+menu centre nicely */
  .bdo-header {
    height: auto;
    padding-block: 8px;
  }

  /* Mobile slide-over panel base (will be created by JS if not present) */
  .mobile-nav-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(92vw, 420px);
    height: 100vh;
    background: var(--card);
    box-shadow: -24px 0 60px rgba(2, 6, 23, 0.30);
    transition: right .34s cubic-bezier(.2, .9, .2, 1);
    z-index: 99999;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
  }

  .mobile-nav-panel.open {
    right: 0;
  }

  /* Mobile header inside panel (logo + close) */
  .mobile-nav-panel .mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .mobile-nav-panel .mobile-logo img {
    height: 36px;
  }

  .mobile-nav-panel .mobile-close {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid color-mix(in oklab, var(--card-border)40%, transparent);
    background: color-mix(in oklab, var(--card)92%, transparent);
  }

  /* Mobile nav links (stacked) */
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .mobile-nav-links .bdo-a {
    display: block;
    padding: 12px 10px;
    border-radius: 10px;
    font-weight: 800;
  }

  .mobile-nav-links .bdo-dd-btn {
    width: 100%;
    text-align: left;
    padding: 12px;
    border-radius: 10px;
  }

  /* Mobile dropdown content blocks inside panel */
  .mobile-dd-panel {
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
  }

  .mobile-dd-panel .bdo-dd-item {
    padding: 10px;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* Subtle backdrop overlay while panel open */
  body.mobile-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    z-index: 99998;
    pointer-events: none;
    opacity: 1;
  }
}

/* MOBILE MENU ICON — polished & accessible */
@media (max-width: 880px) {

  /* Ensure the menu toggle is visible and prominent */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 6px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--card) 96%, transparent);
    border: 1px solid color-mix(in oklab, var(--card-border) 60%, transparent);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.06);
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2, .9, .2, 1), box-shadow .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Icon inside button — scale + smooth transition */
  .menu-toggle i[class^="bi"],
  .menu-toggle svg {
    font-size: 22px;
    display: inline-block;
    transition: transform .22s cubic-bezier(.2, .9, .2, 1), opacity .18s ease;
    transform-origin: center;
  }

  /* pressed & active visual */
  .menu-toggle:active {
    transform: translateY(1px) scale(.99);
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.05);
  }

  /* 'open' state - subtle rotate/scale to feel lively */
  .menu-toggle.open {
    background: linear-gradient(180deg, color-mix(in oklab, var(--card)96%, transparent), color-mix(in oklab, var(--surface)6%, transparent));
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.12);
    transform: translateY(-2px) scale(1.02);
  }

  .menu-toggle.open i {
    transform: rotate(90deg) scale(1.02);
  }

  /* add a tiny ring for focus-visible */
  .menu-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 14%, transparent);
  }

  /* ensure .bdo-actions doesn't hide the menu-toggle accidentally (specificity) */
  .bdo-top .bdo-actions>.menu-toggle {
    display: inline-flex !important;
  }

  /* overlay behind mobile panel when open (if JS toggles .mobile-nav-open on body) */
  body.mobile-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(2px);
    z-index: 99998;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .2s ease;
  }

  /* slightly larger close button inside mobile panel */
  .mobile-close {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 20px;
    display: inline-grid;
    place-items: center;
    transition: transform .14s ease, box-shadow .14s ease;
  }

  .mobile-close:active {
    transform: translateY(1px);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

  .menu-toggle,
  .menu-toggle i,
  .mobile-nav-panel,
  .mobile-close {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ===== END bdo.header.css ===== */

/* ===== BEGIN bdo.register.css ===== */

/* =========================================
   Register Page Styles (bdo.register.css)
   — Broadway Originals
   — Light/Dark theme aware, premium UI polish
   ========================================= */

/* ---------- TOKENS ---------- */
:root {
  --brand: #7c3aed;
  --brand-2: #3b82f6;
  --brand-3: #06b6d4;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e5e7eb;
  --ring: rgba(124, 58, 237, .50);
  --card: #ffffff;
  --card-soft: #fbfdff;
  --glass: #ffffffD9;
  --shadow: 0 24px 64px rgba(2, 6, 23, .12);
  --max: 1200px;

  --ico-size: 42px;
  --ico-radius: 12px;
  --ico-left-gap: 12px;
  --ip-pad-x: 16px;
  --ip-pad-left: calc(var(--ico-left-gap) + var(--ico-size) + 10px);

  --glass-border: color-mix(in oklab, white 65%, transparent);
  --grid: radial-gradient(1px 1px at 50% 50%, color-mix(in oklab, var(--brand) 14%, transparent) 0 60%, transparent 61%);
}

[data-theme="dark"] {
  --ink: #e6ebf3;
  --muted: #9fb1c7;
  --line: rgba(148, 163, 184, .24);
  --card: #0b1220;
  --card-soft: #0e172a;
  --glass: #0b1220D9;
  --shadow: 0 30px 70px rgba(0, 0, 0, .55);
  --glass-border: color-mix(in oklab, white 10%, transparent);
}

/* ---------- BACKDROP (Aurora) ---------- */
.aurora {
  position: relative;
  margin: 28px auto 44px;
  max-width: var(--max);
  padding: 28px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1100px 580px at -5% -15%, color-mix(in oklab, var(--brand) 26%, transparent) 12%, transparent 62%),
    radial-gradient(980px 560px at 105% 0%, color-mix(in oklab, var(--brand-3) 24%, transparent) 10%, transparent 64%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand) 6%, transparent), color-mix(in oklab, var(--brand-2) 6%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(16, 24, 40, .22);
}

.aurora:before {
  content: "";
  position: absolute;
  inset: -25% -10% -35% -10%;
  filter: blur(50px);
  opacity: .22;
  mix-blend-mode: overlay;
  background: conic-gradient(from 180deg, color-mix(in oklab, var(--brand) 26%, transparent), color-mix(in oklab, var(--brand-2) 22%, transparent), color-mix(in oklab, var(--brand-3) 22%, transparent), color-mix(in oklab, var(--brand) 26%, transparent));
  animation: spin 48s linear infinite;
}

.aurora:after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06), transparent), var(--grid);
  background-size: auto, 24px 24px;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  opacity: .8;
}

@keyframes spin {
  to {
    transform: rotate(1turn)
  }
}

/* ---------- SHELL ---------- */
.shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  outline: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (min-width:1024px) {
  .shell {
    grid-template-columns: 1.05fr .95fr;
  }
}

.shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
  opacity: .9;
}

/* ---------- STEPPER ---------- */
.stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  font-weight: 900;
  color: var(--muted);
}

.step .dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  font-size: .8rem;
}

.step.active {
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
}

.step.active .dot {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-color: transparent;
}

.step.done {
  opacity: .8
}

.step.done .dot {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

/* ---------- LEFT FORM ---------- */
.form-pane {
  padding: 48px 42px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
}

.form-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 900;
  color: color-mix(in oklab, var(--brand) 60%, var(--ink));
}

.form-head h1 {
  margin: .2rem 0 .5rem;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
}

.form-head p {
  margin: 0 0 1.2rem;
  color: var(--muted);
}

.grid-2 {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width:560px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  margin: 14px 0;
}

.with-icon {
  position: relative;
  display: block;
}

.label {
  display: block;
  font-weight: 850;
  font-size: .9rem;
  margin: 0 0 .5rem;
  color: color-mix(in oklab, var(--ink) 82%, var(--muted));
}

.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: var(--ink);
  padding: 14px var(--ip-pad-x);
  padding-left: var(--ip-pad-left);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px rgba(2, 6, 23, .05);
  transition: border-color .14s ease, box-shadow .14s ease, transform .04s ease;
}

[data-theme="dark"] .input {
  background: linear-gradient(180deg, #0b1220, #0e172a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.input::placeholder {
  color: #94a3b8;
}

.with-icon:focus-within .input {
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ico-l {
  position: absolute;
  left: var(--ico-left-gap);
  top: 50%;
  transform: translateY(-50%);
  width: var(--ico-size);
  height: var(--ico-size);
  border-radius: var(--ico-radius);
  display: grid;
  place-items: center;
  color: #6d28d9;
  background: #f5f3ff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18);
  transition: transform .14s ease;
}

[data-theme="dark"] .ico-l {
  background: #221a3a;
  color: #d2c8ff;
  box-shadow: inset 0 0 0 1px rgba(189, 167, 255, .18);
}

.with-icon:hover .ico-l {
  transform: translateY(-50%) translateZ(0) scale(1.03);
}

.ico-r {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  color: #6d28d9;
  width: 40px;
  height: 40px;
}

.ico-r:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 10px;
}

.hint {
  font-size: .85rem;
  color: var(--muted);
  margin-top: .5rem;
}

.err {
  display: none;
  margin-top: .5rem;
  font-size: .86rem;
  color: #ef4444;
  font-weight: 800;
}

.is-invalid .input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .2);
}

/* Email suggestion */
.email-suggest {
  display: none;
  margin-top: .45rem;
  font-size: .86rem;
}

.email-suggest a {
  color: var(--brand);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Strength */
.str-wrap {
  margin-top: .55rem;
  display: grid;
  gap: .45rem;
}

.str-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb 50%, #e5e7eb 0);
  overflow: hidden
}

.str-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b 35%, #10b981 80%);
  transition: width .25s ease;
}

.str-req {
  display: grid;
  gap: .25rem;
  font-size: .84rem;
  color: var(--muted);
}

.str-req .ok {
  color: #10b981;
  font-weight: 800;
}

.str-req i {
  margin-right: .35rem;
}

/* Meta & Buttons */
.meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: .92rem;
  color: var(--muted);
}

.meta a {
  color: var(--brand);
  font-weight: 850;
  text-decoration: none;
}

.meta a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-primary {
  --shine: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, .4) 50%, transparent 65% 100%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 950;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 62%, #9333ea);
  box-shadow: 0 18px 44px rgba(60, 64, 255, .35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:before {
  content: "";
  position: absolute;
  inset: -200% -40% auto -40%;
  height: 200%;
  width: 160%;
  background: var(--shine);
  transform: translateX(-120%) rotate(4deg);
  opacity: .55;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 58px rgba(60, 64, 255, .38);
}

.btn-primary:hover:before {
  animation: shine 900ms ease;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 22px 58px rgba(60, 64, 255, .38);
}

@keyframes shine {
  to {
    transform: translateX(120%) rotate(4deg)
  }
}

.btn-primary[disabled] {
  opacity: .7;
  cursor: not-allowed
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: center;
  margin: 18px 0 12px;
  color: #94a3b8;
  font-size: .86rem;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

/* Google button */
.g-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 900;
  background: #fff;
  color: #0f172a;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(2, 6, 23, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.g-btn:hover {
  transform: translateY(-1px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
}

.g-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

.g-ico {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

/* Passkey CTA */
.passkey {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .92rem;
  color: var(--muted);
}

.passkey .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.passkey .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  border-color: #c7d2fe;
}

/* ---------- RIGHT: Highlights (upgraded layout) ---------- */
.side-pane {
  position: relative;
  padding: 48px 40px;
  background: linear-gradient(180deg, var(--card-soft), var(--card));
  border-left: 1px dashed var(--line);
  overflow: hidden;
}

/* subtle glossy header bar on the right */
.side-pane::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 35%, transparent), transparent 50%, color-mix(in oklab, var(--brand-2) 35%, transparent));
  opacity: .6;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .7rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: .8rem;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

[data-theme="dark"] .badge {
  background: linear-gradient(180deg, #0e172a, #0b1220);
  color: #cbd5e1;
}

.side-title {
  margin: .7rem 0 1rem;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: clamp(26px, 3vw, 34px);
}

.side-sub {
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 1.1rem;
}

.stack {
  display: grid;
  gap: 12px;
}

.stack .card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease;
}

.stack .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
}

.stack .ico {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2) 70%);
  box-shadow: 0 10px 24px rgba(60, 64, 255, .25);
}

/* Accent floaters / glow */
.side-pane .glow {
  position: absolute;
  inset: auto -60px -80px auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: .65;
  pointer-events: none;
}

/* Tabs (pills) */
.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}

.tab-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 900;
  font-size: .9rem;
  color: var(--muted);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tab-btn[aria-selected="true"] {
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .10);
}

.tab-btn:hover {
  transform: translateY(-1px);
}

.tab-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

/* Panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Stat row */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 18px;
}

.kpi {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

.kpi .num {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 950;
  letter-spacing: -.02em;
}

.kpi .sub {
  font-size: .85rem;
  color: var(--muted);
}

/* Card grid */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width:560px) {
  .grid-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
}

.feature .ico {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2) 70%);
  box-shadow: 0 10px 24px rgba(60, 64, 255, .25);
}

.feature h4 {
  margin: 2px 0 2px;
  font-weight: 950;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
}

/* Testimonial slider */
.t-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
  padding: 18px;
}

.t-track {
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}

.t-card {
  min-width: 100%;
  padding: 4px 6px;
}

.t-quote {
  font-size: 1rem;
  line-height: 1.55;
}

.t-author {
  margin-top: 10px;
  font-weight: 900;
  display: flex;
  gap: 8px;
  align-items: center;
}

.t-author .av {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: inline-block;
}

.t-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.t-btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
}

.t-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

/* Mini CTA */
.side-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
}

.side-cta .text {
  font-weight: 900;
}

.side-cta .btn-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 62%, #9333ea);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(60, 64, 255, .30);
}

/* A11Y + Motion */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width:520px) {

  .form-pane,
  .side-pane {
    padding: 28px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .aurora:before,
  .btn-primary:before {
    animation: none;
  }
}

/* Spinner for BI icons */
.bi-spin {
  animation: bi-spin 1s linear infinite;
}

@keyframes bi-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* reCAPTCHA wrapper */
.captcha-wrap {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  display: flex;
  align-items: center;
  justify-content: center;
}

.captcha-err {
  display: none;
  margin-top: 8px;
  color: #ef4444;
  font-weight: 800;
  font-size: .9rem;
}

/* ===== Modern Feature Cards – robust border + icon fix ===== */
.grid-cards.grid-modern {
  gap: 16px;
}

/* Gradient border without masks (works everywhere) */
.grid-cards.grid-modern .feature {
  --rim: 3px;
  position: relative;
  border-radius: 22px;
  /* two backgrounds: panel (padding-box) + gradient rim (border-box) */
  background:
    linear-gradient(180deg, var(--card), var(--card-soft)) padding-box,
    var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6)) border-box;
  border: var(--rim) solid transparent;
  padding: 0;
  /* rim handled by border */
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  isolation: isolate;
}

/* inner panel */
.grid-cards.grid-modern .feature .inner {
  position: relative;
  border-radius: calc(22px - var(--rim));
  padding: 22px 18px 18px;
  background: transparent;
  /* already set via padding-box */
}

/* corner blob background */
.grid-cards.grid-modern .feature .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120px 120px at 10% 12%,
      var(--fm-accent-bg, #7c3aed) 0 40%, transparent 56%),
    linear-gradient(180deg, transparent 0 84%,
      color-mix(in oklab, var(--fm-accent-bg, #7c3aed) 18%, transparent) 85% 100%);
  opacity: .14;
  pointer-events: none;
  z-index: 1;
  /* behind icon */
}

/* icon bubble */
.grid-cards.grid-modern .feature .ico {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6));
  box-shadow: 0 10px 26px color-mix(in oklab, var(--fm-accent-bg, #7c3aed) 40%, transparent);
  border: 3px solid rgba(255, 255, 255, .18);
  /* visible rim around icon */
  z-index: 2;
  /* above blob overlay */
}

/* content spacing under the icon */
.grid-cards.grid-modern .feature .content {
  margin-top: 62px;
}

.grid-cards.grid-modern .feature h4 {
  margin: 0 0 6px;
  font-weight: 950;
  letter-spacing: .02em;
}

.grid-cards.grid-modern .feature p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* CTA button */




/* Hover lift for the whole card */
.grid-cards.grid-modern .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(2, 6, 23, .16);
}

/* Accent variants */








/* Dark inner subtle tweak */
[data-theme="dark"] .grid-cards.grid-modern .feature {
  background:
    linear-gradient(180deg, #0b1220, #0e172a) padding-box,
    var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6)) border-box;
}

/* --- make modern style usable both by container or per-card --- */
:root {
  /* keep your tokens as-is */
}

/* container OR per-card triggers */
:where(.grid-cards.grid-modern .feature, .feature.modern) {
  --rim: 3px;
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card), var(--card-soft)) padding-box,
    var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6)) border-box;
  border: var(--rim) solid transparent;
  padding: 0;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  isolation: isolate;
}

:where(.grid-cards.grid-modern .feature .inner, .feature.modern .inner) {
  position: relative;
  border-radius: calc(22px - var(--rim));
  padding: 22px 18px 18px;
  background: transparent;
}

:where(.grid-cards.grid-modern .feature .inner::before, .feature.modern .inner::before) {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120px 120px at 10% 12%, var(--fm-accent-bg, #7c3aed) 0 45%, transparent 56%),
    linear-gradient(180deg, transparent 0 84%, color-mix(in oklab, var(--fm-accent-bg, #7c3aed) 18%, transparent) 85% 100%);
  opacity: .14;
  pointer-events: none;
  z-index: 1;
}

:where(.grid-cards.grid-modern .feature .ico, .feature.modern .ico) {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6));
  box-shadow: 0 10px 26px color-mix(in oklab, var(--fm-accent-bg, #7c3aed) 40%, transparent);
  border: 3px solid rgba(255, 255, 255, .18);
  z-index: 2;
}

:where(.grid-cards.grid-modern .feature .content, .feature.modern .content) {
  margin-top: 62px;
}

:where(.grid-cards.grid-modern .feature h4, .feature.modern h4) {
  margin: 0 0 6px;
  font-weight: 950;
  letter-spacing: .02em;
}

:where(.grid-cards.grid-modern .feature p, .feature.modern p) {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

:where(.grid-cards.grid-modern .feature:hover, .feature.modern:hover) {
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(2, 6, 23, .16);
}

/* CTA button (reusable) */
.fm-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background: var(--fm-accent-grad, linear-gradient(90deg, #7c3aed, #3b82f6));
  box-shadow: 0 12px 28px color-mix(in oklab, var(--fm-accent-bg, #7c3aed) 35%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.fm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Accent variants (just add one of these) */
.fm-blue {
  --fm-accent-bg: #2563eb;
  --fm-accent-grad: linear-gradient(135deg, #2563eb, #06b6d4);
}

.fm-pink {
  --fm-accent-bg: #ec4899;
  --fm-accent-grad: linear-gradient(135deg, #ec4899, #fb7185);
}

.fm-green {
  --fm-accent-bg: #22c55e;
  --fm-accent-grad: linear-gradient(135deg, #22c55e, #84cc16);
}

.fm-violet {
  --fm-accent-bg: #7c3aed;
  --fm-accent-grad: linear-gradient(135deg, #7c3aed, #3b82f6);
}

/* Dark tweak */
[data-theme="dark"] :where(.grid-cards.grid-modern .feature, .feature.modern) {
  background: linear-gradient(180deg, #0b1220, #0e172a) padding-box,
    var(--fm-accent-grad, linear-gradient(135deg, #7c3aed, #3b82f6)) border-box;
}

/* ===== Upgraded Tabs ===== */
.tabs-upgraded {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

[data-theme="dark"] .tabs-upgraded {
  background: linear-gradient(180deg, #0b1220, #0e172a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.tabs-upgraded .tab-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .95rem;
  color: var(--muted);
  letter-spacing: .01em;
  transition: color .15s ease, transform .12s ease, filter .12s ease;
}

.tabs-upgraded .tab-btn:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.tabs-upgraded .tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 9999px;
}

.tabs-upgraded .tab-btn[aria-selected="true"] {
  color: var(--ink);
}

/* floating indicator (animated) */
.tabs-upgraded .tab-indicator {
  position: absolute;
  inset: auto auto 6px 6px;
  height: 36px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 62%, var(--brand-3));
  box-shadow: 0 10px 26px rgba(60, 64, 255, .28);
  transform: translateX(0);
  width: 0;
  z-index: 0;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), width .22s;
  /* subtle inner glow */
  outline: 1px solid color-mix(in oklab, white 16%, transparent);
}

/* compact mode on very small screens */
@media (max-width:420px) {
  .tabs-upgraded {
    gap: 6px;
    padding: 4px;
  }

  .tabs-upgraded .tab-btn {
    padding: 8px 12px;
    font-size: .9rem;
  }

  .tabs-upgraded .tab-indicator {
    height: 32px;
    inset: auto auto 4px 4px;
  }
}

/* ===== Combined KPI Card ===== */
.kpis-combined {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  overflow: hidden;
}

.kpis-combined .kpi {
  flex: 1;
  text-align: center;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* vertical dividers between items */
.kpis-combined .kpi:not(:last-child) {
  border-right: 1px solid var(--line);
}

.kpis-combined .num {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .5px;
}

.kpis-combined .sub {
  margin-top: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
}

/* mobile: stack instead of horizontal */
@media (max-width: 640px) {
  .kpis-combined {
    flex-direction: column;
  }

  .kpis-combined .kpi:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

/* ===== END bdo.register.css ===== */

/* ===== BEGIN bdo.noeffects.css ===== */

/* =========================================================
   BDO – Disable Effects on NAVBAR and BANNERS (Hero)
   Load this AFTER all other styles.
   ========================================================= */

/* -------------------- NAVBAR: no hover/active visuals -------------------- */
.bdo-nav .bdo-a,
.bdo-dd .bdo-dd-btn {
  transition: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.bdo-nav .bdo-link:hover,
.bdo-dd .bdo-dd-btn:hover {
  background: transparent !important;
}

.bdo-nav .bdo-active {
  /* keep plain text only */
  background: transparent !important;
  color: inherit !important;
  border-color: transparent !important;
}

.bdo-dd.open .bdo-dd-btn {
  background: transparent !important;
  border-color: transparent !important;
}

.bdo-dd .bdo-dd-item:hover {
  background: transparent !important;
}

/* Remove header decorations (dots/orbs) */
.bdo-header .pattern-dots,
.bdo-header .orb {
  display: none !important;
}

/* -------------------- BANNERS/HERO: strip all effects -------------------- */
.hero-card,
.hero-card .hero-slide,
.hero-card .hero-bg {
  background: transparent !important;
  box-shadow: none !important;
}

.hero-card::before,
.hero-card .grad-mask-top,
.hero-card .grad-mask-bottom,
.hero-card .hero-pattern,
.hero-card .hero-orbs,
.hero-card .hero-anim,
.hero-card .autoplay-bar,
.hero-card .swiper-pagination {
  display: none !important;
}

/* Swiper navigation: keep functional but invisible background */
.hero-card .swiper-button-prev,
.hero-card .swiper-button-next {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

.hero-card .swiper-button-prev::after,
.hero-card .swiper-button-next::after {
  font-size: 0 !important;
  /* hide default arrows */
}

/* No hover zoom/filters on any banner/hero images */
.hero-card .card-pro-media img,
.hero-card .swiper-slide img {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* If your banner content uses .card-pro wrappers, neutralize them */
.hero-card .card-pro,
.hero-card .card-pro * {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* Keep search dock layout but remove glass/blur look */
.hero-search-form {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Ensure section icons stay plain size (no shadows/filters) */
.bdo-home-sec .sec-ico {
  filter: none !important;
  box-shadow: none !important;
}

/* Safety: disable any animations inside navbar/hero */
.bdo-header *[class*="anim-"],
.hero-card *[class*="anim-"] {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* ===== END bdo.noeffects.css ===== */


/* === Appended extra tune/unified CSS files === */

/* ===== BEGIN bdo.tune.clean.css ===== */

/* ==========================================================================
   bdo.tune.clean.css — Global tokens, helpers, components (Light/Dark)
   Load order: tailwind bundle -> bdo.hero.css -> bdo.sections.css -> this file
   ========================================================================== */

/* ========== Base + Tokens ========== */
@layer base {
  :root {
    /* Layout */
    --bdo-max: 1200px;
    --radius-2xl: 20px;
    --radius-xl: 16px;
    --radius-lg: 14px;
    --radius: 12px;
    --radius-sm: 10px;

    /* Spacing (fluid) */
    --pad-0: 0;
    --pad-1: clamp(6px, 0.6vw, 8px);
    --pad-2: clamp(8px, 1.0vw, 12px);
    --pad-3: clamp(10px, 1.2vw, 14px);
    --pad-4: clamp(12px, 1.6vw, 18px);
    --pad-5: clamp(16px, 2.0vw, 22px);
    --pad-6: clamp(18px, 2.4vw, 26px);
    --pad-7: clamp(22px, 3.0vw, 32px);
    --pad-8: clamp(28px, 3.6vw, 40px);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --lead: clamp(14px, 1.6vw, 18px);

    /* Palette (light) */
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --card: #ffffff;
    --card-elev: #ffffff;
    --card-border: rgba(2, 6, 23, .08);
    --surface: #0f172a0a;
    --text: #0f172a;
    --text-2: #111827;
    --muted: #475569;
    --muted-2: #64748b;

    /* Brand */
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --brand-gradient: linear-gradient(135deg, #0ea5e9, #22d3ee);

    /* Accents */
    --accent-1: #f97316;
    --accent-2: #8b5cf6;
    --accent-3: #22c55e;
    --accent-4: #ef4444;
    --accent-5: #06b6d4;
    --accent-6: #eab308;

    /* Effects */
    --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
    --shadow-sm: 0 6px 14px rgba(2, 6, 23, .08), 0 1px 2px rgba(2, 6, 23, .06);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, .10), 0 2px 6px rgba(2, 6, 23, .08);
    --shadow-lg: 0 16px 36px rgba(2, 6, 23, .12), 0 4px 10px rgba(2, 6, 23, .08);

    /* Controls */
    --control-bg: #fff;
    --control-border: #e2e8f0;
    --control-text: #0f172a;
    --control-placeholder: #94a3b8;
    --control-focus: color-mix(in oklab, var(--primary) 65%, white 35%);

    /* Utility paddings for sections */
    --pad-x: clamp(12px, 3.6vw, 24px);
    --pad-y: clamp(28px, 5.5vw, 56px);
  }

  [data-theme="dark"] {
    --bg: #0b1220;
    --bg-soft: #0f172a;
    --card: #0f172a;
    --card-elev: #0b1220;
    --card-border: rgba(148, 163, 184, .14);
    --surface: #ffffff10;
    --text: #e5e7eb;
    --text-2: #f1f5f9;
    --muted: #9aa7b8;
    --muted-2: #94a3b8;

    --primary: #22d3ee;
    --primary-600: #06b6d4;
    --primary-700: #0891b2;
    --brand-gradient: linear-gradient(135deg, #22d3ee, #60a5fa);

    --control-bg: #0b1220;
    --control-border: #1f2a44;
    --control-text: #e2e8f0;
    --control-placeholder: #7c8aa3;
  }

  html,
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .bdo-max {
    max-width: var(--bdo-max);
    margin-inline: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -0.02em;
  }

  h1 {
    font-weight: 900;
    line-height: 1.05;
  }

  h2 {
    font-weight: 900;
    line-height: 1.08;
  }

  h3 {
    font-weight: 800;
    line-height: 1.12;
  }

  .lead {
    font-size: var(--lead);
    color: var(--muted);
  }

  :where(a, button, input, select, textarea, .focusable):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: max(6px, var(--radius-sm));
  }

  /* Invert non-SVG images for dark backgrounds when needed */
  [data-theme="dark"] img[data-auto-invert="1"]:not([src$=".svg"]) {
    filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
  }
}

/* ===== END bdo.tune.clean.css ===== */

/* ===== BEGIN bdo.tune.css ===== */

/* ==========================================================================
   bdo.tune.clean.css — Global tokens, helpers, components (Light/Dark)
   Load order: tailwind bundle -> bdo.hero.css -> bdo.sections.css -> this file
   ========================================================================== */

/* ========== Base + Tokens ========== */
@layer base {
  :root {
    /* Layout */
    --bdo-max: 1200px;
    --radius-2xl: 20px;
    --radius-xl: 16px;
    --radius-lg: 14px;
    --radius: 12px;
    --radius-sm: 10px;

    /* Spacing (fluid) */
    --pad-0: 0;
    --pad-1: clamp(6px, 0.6vw, 8px);
    --pad-2: clamp(8px, 1.0vw, 12px);
    --pad-3: clamp(10px, 1.2vw, 14px);
    --pad-4: clamp(12px, 1.6vw, 18px);
    --pad-5: clamp(16px, 2.0vw, 22px);
    --pad-6: clamp(18px, 2.4vw, 26px);
    --pad-7: clamp(22px, 3.0vw, 32px);
    --pad-8: clamp(28px, 3.6vw, 40px);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --lead: clamp(14px, 1.6vw, 18px);

    /* Palette (light) */
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --card: #ffffff;
    --card-elev: #ffffff;
    --card-border: rgba(2, 6, 23, .08);
    --surface: #0f172a0a;
    --text: #0f172a;
    --text-2: #111827;
    --muted: #475569;
    --muted-2: #64748b;

    /* Brand */
    --primary: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --brand-gradient: linear-gradient(135deg, #0ea5e9, #22d3ee);

    /* Accents */
    --accent-1: #f97316;
    --accent-2: #8b5cf6;
    --accent-3: #22c55e;
    --accent-4: #ef4444;
    --accent-5: #06b6d4;
    --accent-6: #eab308;

    /* Effects */
    --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
    --shadow-sm: 0 6px 14px rgba(2, 6, 23, .08), 0 1px 2px rgba(2, 6, 23, .06);
    --shadow-md: 0 10px 24px rgba(2, 6, 23, .10), 0 2px 6px rgba(2, 6, 23, .08);
    --shadow-lg: 0 16px 36px rgba(2, 6, 23, .12), 0 4px 10px rgba(2, 6, 23, .08);

    /* Controls */
    --control-bg: #fff;
    --control-border: #e2e8f0;
    --control-text: #0f172a;
    --control-placeholder: #94a3b8;
    --control-focus: color-mix(in oklab, var(--primary) 65%, white 35%);

    /* Utility paddings for sections */
    --pad-x: clamp(12px, 3.6vw, 24px);
    --pad-y: clamp(28px, 5.5vw, 56px);
  }

  [data-theme="dark"] {
    --bg: #0b1220;
    --bg-soft: #0f172a;
    --card: #0f172a;
    --card-elev: #0b1220;
    --card-border: rgba(148, 163, 184, .14);
    --surface: #ffffff10;
    --text: #e5e7eb;
    --text-2: #f1f5f9;
    --muted: #9aa7b8;
    --muted-2: #94a3b8;

    --primary: #22d3ee;
    --primary-600: #06b6d4;
    --primary-700: #0891b2;
    --brand-gradient: linear-gradient(135deg, #22d3ee, #60a5fa);

    --control-bg: #0b1220;
    --control-border: #1f2a44;
    --control-text: #e2e8f0;
    --control-placeholder: #7c8aa3;
  }

  html,
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .bdo-max {
    max-width: var(--bdo-max);
    margin-inline: auto;
  }

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -0.02em;
  }

  h1 {
    font-weight: 900;
    line-height: 1.05;
  }

  h2 {
    font-weight: 900;
    line-height: 1.08;
  }

  h3 {
    font-weight: 800;
    line-height: 1.12;
  }

  .lead {
    font-size: var(--lead);
    color: var(--muted);
  }

  :where(a, button, input, select, textarea, .focusable):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: max(6px, var(--radius-sm));
  }

  /* Invert non-SVG images for dark backgrounds when needed */
  [data-theme="dark"] img[data-auto-invert="1"]:not([src$=".svg"]) {
    filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
  }
}

/* === City Guides — Hi-res image polish === */

/* Use actual <img> for better decoding/sizes/DPR */
.cg-card {
  position: relative;
  color: #fff;
  overflow: hidden;
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  will-change: transform;
}

.cg-card .cg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keeps composition tight */
  object-position: center;
  /* can be overridden via data-focus */
  display: block;
  transform: translateZ(0);
  /* avoid blur on transforms */
  image-rendering: auto;
  filter: saturate(1.03) contrast(1.03);
}

.cg-card .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0008, #0000 40%, #000a);
  z-index: 1;
}

.cg-card .content {
  position: absolute;
  inset: 0;
  padding: var(--pad-4, 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  z-index: 2;
}

/* Layout: give big tiles more breathing room so images aren’t over-cropped */
.cg-mosaic {
  display: grid;
  gap: 12px;
  grid-template-areas:
    "A B B"
    "C B B"
    "C D E";
}

/* Base heights (mobile first) */
.cg-card,
.cg-A,
.cg-D,
.cg-E {
  height: 220px;
}

.cg-B,
.cg-C {
  height: 380px;
}

/* Tablet */
@media (min-width: 640px) {

  .cg-card,
  .cg-A,
  .cg-D,
  .cg-E {
    height: 240px;
  }

  .cg-B,
  .cg-C {
    height: 420px;
  }
}

/* Optional focus helpers: set data-focus="top|bottom|left|right|center" on .cg-img */
.cg-img[data-focus="top"] {
  object-position: 50% 20%;
}

.cg-img[data-focus="bottom"] {
  object-position: 50% 80%;
}

.cg-img[data-focus="left"] {
  object-position: 20% 50%;
}

.cg-img[data-focus="right"] {
  object-position: 80% 50%;
}

.cg-img[data-focus="center"] {
  object-position: 50% 50%;
}

/* Slightly denser text shadow on large tiles to keep titles legible */


/* ========================
   City Guides — big rect images (mosaic + rail)
   ======================== */

/* --- Mosaic big cards (A–E) --- */
.cg-card {
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* If you still use the <span class="img" style="background-image:..."> */
.cg-card .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.03) contrast(1.03);
}

/* If you switched to <img class="cg-img"> from earlier step */
.cg-card .cg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Maintain comfortable heights/ratios so images aren’t over-cropped */
.cg-A,
.cg-D,
.cg-E {
  height: 240px;
}

.cg-B,
.cg-C {
  height: 420px;
}

@media (min-width:640px) {

  .cg-A,
  .cg-D,
  .cg-E {
    height: 260px;
  }

  .cg-B,
  .cg-C {
    height: 460px;
  }
}

/* Slightly stronger legibility on overlays */
.cg-name {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* --- Rail cards (horizontal scroller) --- */
#cgRailSwiper .swiper-slide {
  /* give each card a natural width; swiper breakpoints will still apply */
  width: clamp(200px, 25vw, 260px);
}

.cg-rail-card {
  display: block;
  background: var(--card, #fff);
  border: 1px solid var(--card-border, rgba(2, 6, 23, .08));
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

.cg-rail-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary, #0ea5e9) 24%, var(--card-border, rgba(2, 6, 23, .08)));
  box-shadow: var(--shadow-md, 0 12px 24px rgba(0, 0, 0, .12));
}

/* The image wrapper: turn OFF circle, make it full-bleed rectangular */
.cg-rail-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  /* consistent composition */
  border-radius: 0;
  /* not inside—outer card already rounded */
  overflow: hidden;
  background: linear-gradient(135deg, #eef2ff, #f1f5f9);
  box-shadow: none;
}

/* Remove any legacy circle rules */
.cg-rail-img,
.cg-rail-img img {
  border-radius: 0 !important;
  /* kill border-radius:9999px from older CSS */
}

/* Actual image fit */
.cg-rail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Text area below image */
.cg-rail-name {
  font-weight: 800;
  padding: .5rem .75rem .25rem;
}

.cg-rail-cta {
  display: inline-block;
  margin: 0 .75rem .75rem;
  opacity: .9;
}

/* ===== END bdo.tune.css ===== */

/* ===== BEGIN bdo.tune.v3.css ===== */

/*
  BDO Design System v3 — Premium Light/Dark Theme
  File: /assets/css/bdo.tune.v3.css
  Notes:
    - Built to coexist with Tailwind and your existing bundles.
    - Uses CSS variables + attribute-based theming: html[data-theme="light"|"dark"].
    - Carefully namespaced with .bdo-* components to avoid collisions.
    - Includes base tokens, utilities, and polished components.
*/

/* =============================
   1) TOKENS (Design Variables)
   ============================= */
:root {
  /* Color (OKLCH approximate for smoother ramps) */
  --brand-h: 280;
  /* purple-ish base */
  --brand-c: 0.18;
  --brand-l: 0.60;

  /* Semantic palette (LIGHT) */
  --bg: oklch(0.985 0 0);
  --surface: oklch(0.98 0.01 93);
  --surface-2: oklch(0.97 0.01 93);
  --surface-3: oklch(0.96 0.01 93);
  --border: color-mix(in oklab, #000 10%, transparent);
  --muted: oklch(0.63 0.03 258);
  --text: oklch(0.18 0.02 258);
  --text-soft: oklch(0.42 0.02 258);

  --primary: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
  --primary-2: oklch(calc(var(--brand-l) + 0.05) var(--brand-c) var(--brand-h));
  --primary-3: oklch(calc(var(--brand-l) - 0.08) var(--brand-c) var(--brand-h));

  --success: oklch(0.62 0.15 155);
  --warning: oklch(0.85 0.12 85);
  --danger: oklch(0.60 0.20 25);
  --info: oklch(0.79 0.11 250);

  /* Gradients */
  --grad-1: linear-gradient(135deg, #58a9ff 0%, #8a5df6 55%, #f24bb2 100%);
  --grad-2: linear-gradient(135deg, color-mix(in oklab, var(--primary) 40%, #58a9ff), color-mix(in oklab, var(--primary) 80%, #f24bb2));

  /* Spacing scale (4px grid) */
  --space-1: .25rem;
  /* 4 */
  --space-2: .5rem;
  /* 8 */
  --space-3: .75rem;
  /* 12 */
  --space-4: 1rem;
  /* 16 */
  --space-5: 1.25rem;
  /* 20 */
  --space-6: 1.5rem;
  /* 24 */
  --space-7: 1.75rem;
  /* 28 */
  --space-8: 2rem;
  /* 32 */

  /* Radius */
  --r-1: .5rem;
  --r-2: .75rem;
  --r-3: 1rem;
  --r-4: 1.25rem;
  --r-round: 999px;

  /* Shadows */
  --shadow-1: 0 6px 16px rgba(2, 6, 23, .06);
  --shadow-2: 0 18px 45px rgba(2, 6, 23, .10), 0 6px 16px rgba(2, 6, 23, .06);
  --shadow-3: 0 24px 60px rgba(2, 6, 23, .14), 0 8px 20px rgba(2, 6, 23, .08);

  /* Typography */
  --fs-0: .875rem;
  /* 14 */
  --fs-1: 1rem;
  /* 16 */
  --fs-2: 1.125rem;
  /* 18 */
  --fs-3: 1.25rem;
  /* 20 */
  --fs-4: 1.5rem;
  /* 24 */
  --fs-5: 1.875rem;
  /* 30 */
  --fs-6: 2.25rem;
  /* 36 */
  --leading: 1.65;
  --tracking: .005em;

  /* Layout */
  --container: min(1140px, 92vw);
  --ring: color-mix(in oklab, var(--primary) 60%, transparent);
  --ring-contrast: color-mix(in oklab, #000 15%, transparent);
  --focus-width: 3px;

  /* Z-index */
  --z-header: 50;
  --z-overlay: 60;
  --z-modal: 70;
  --z-popover: 80;
  --z-toast: 90;
}

html[data-theme="dark"] {
  --bg: oklch(0.14 0.02 258);
  --surface: oklch(0.16 0.02 258);
  --surface-2: oklch(0.18 0.02 258);
  --surface-3: oklch(0.20 0.02 258);
  --border: color-mix(in oklab, #fff 14%, transparent);
  --muted: oklch(0.72 0.04 258);
  --text: oklch(0.96 0.02 258);
  --text-soft: oklch(0.82 0.03 258);

  --primary: oklch(0.72 0.19 280);
  --primary-2: oklch(0.78 0.16 280);
  --primary-3: oklch(0.60 0.22 280);

  --shadow-1: 0 6px 16px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 45px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .35);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .42);
}

/* =============================
   2) BASE & REBOOT
   ============================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-1);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--primary-3);
}

:focus-visible {
  outline: var(--focus-width) solid var(--ring);
  outline-offset: 2px;
}

/* Containers */
.bdo-max {
  width: var(--container);
  max-width: 100%;
}

/* Typeset */
.typeset h1,
.typeset h2,
.typeset h3,
.typeset h4 {
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
}

.typeset h1 {
  font-size: var(--fs-6);
}

.typeset h2 {
  font-size: var(--fs-5);
}

.typeset h3 {
  font-size: var(--fs-4);
}

.typeset p {
  margin: 0;
}

/* Flow rhythm */
.flow>*+* {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .flow>*+* {
    margin-top: var(--space-5);
  }
}

/* Utilities */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.glass {
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: blur(10px);
}

.shadow-1 {
  box-shadow: var(--shadow-1);
}

.shadow-2 {
  box-shadow: var(--shadow-2);
}

.shadow-3 {
  box-shadow: var(--shadow-3);
}

/* =============================
   3) COMPONENTS
   ============================= */
/* Buttons */
.btn {
  --_bg: var(--surface-2);
  --_fg: var(--text);
  --_bd: var(--border);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  border-radius: var(--r-2);
  padding: .7rem 1rem;
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease, border-color .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.btn:active {
  transform: translateY(0);
}

.btn>i {
  font-size: 1.05em;
}

.btn.primary {
  --_bg: var(--primary);
  --_fg: white;
  --_bd: color-mix(in oklab, var(--primary) 35%, transparent);
}

.btn.primary:hover {
  box-shadow: var(--shadow-2);
}

.btn.ghost {
  --_bg: transparent;
  --_bd: var(--border);
}

.btn.soft {
  --_bg: color-mix(in oklab, var(--primary) 10%, var(--surface));
  --_fg: color-mix(in oklab, var(--primary) 60%, var(--text));
  --_bd: color-mix(in oklab, var(--primary) 15%, var(--border));
}

.btn.outline {
  --_bg: transparent;
  --_fg: var(--text);
  --_bd: color-mix(in oklab, var(--primary) 35%, var(--border));
}

.btn.block {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.btn.round {
  border-radius: var(--r-round);
}

/* Icon link */
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}

.icon-link i {
  transition: transform .2s ease;
}

.icon-link:hover i {
  transform: translateX(2px);
}

/* Chips / Badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border-radius: var(--r-round);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  color: var(--text-soft);
  font-weight: 800;
  font-size: var(--fs-0);
}

.chip.solid {
  background: var(--grad-1);
  color: #fff;
  border: 0;
}

.badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: .5rem;
  background: color-mix(in oklab, var(--primary) 12%, var(--surface));
  color: var(--primary-3);
  font-weight: 800;
  font-size: .75rem;
}

/* Cards */
.bdo-card {
  position: relative;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.bdo-card:hover {
  box-shadow: var(--shadow-2);
}

.bdo-card .card-head {
  padding: 1rem 1rem .5rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
}

.bdo-card .card-body {
  padding: 0 1rem 1rem;
}

.bdo-card .card-foot {
  padding: .75rem 1rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
}

/* Product-style card enhancer (used on posts grid) */
.prod-outer {
  background: linear-gradient(160deg, #5e78ff22, #8a5df61a);
  padding: .6rem;
  border-radius: 34px;
}

html[data-theme="dark"] .prod-outer {
  background: linear-gradient(160deg, #5e78ff22, #8a5df60f);
}

.prod-card {
  position: relative;
  border-radius: 26px;
  background: #fff;
  color: #0f172a;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

html[data-theme="dark"] .prod-card {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.prod-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--grad-1);
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in oklab, var(--primary) 20%, var(--border));
}

.prod-card:hover::before {
  opacity: 1;
}

.prod-wrap {
  padding: 1.15rem 1.15rem 1.05rem;
}

@media (min-width:768px) {
  .prod-wrap {
    padding: 1.25rem 1.25rem 1.1rem;
  }
}

.prod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
  gap: .6rem;
}

.prod-logo {
  height: 18px;
  opacity: .9;
  border-radius: 4px;
}

.prod-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, .05);
  color: #475569;
  border: 1px solid var(--border);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

html[data-theme="dark"] .prod-ico {
  background: rgba(255, 255, 255, .06);
  color: #cbd5e1;
}

.prod-ico:hover {
  transform: translateY(-1px);
  background: rgba(2, 6, 23, .06);
  box-shadow: 0 2px 8px rgba(2, 6, 23, .12)
}

.prod-img {
  margin: .25rem 0 .8rem;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-3);
}

.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease;
}

.prod-card:hover .prod-img img {
  transform: scale(1.05);
}

.prod-title {
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: .15rem;
  font-size: var(--fs-3);
  hyphens: auto;
  overflow-wrap: anywhere;
}

.prod-sub {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.prod-stars {
  display: flex;
  gap: .15rem;
  margin: .55rem 0 .3rem;
  color: #f59e0b;
}

.prod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .65rem;
}

.prod-price strong {
  font-size: 1.15rem;
  letter-spacing: .2px;
}

.prod-note {
  color: color-mix(in oklab, var(--muted) 70%, var(--text));
  font-size: .76rem;
}

/* CTA */
.cta {
  display: block;
  margin: 1rem auto 0;
  width: 100%;
  font-weight: 900;
  color: #fff;
  text-align: center;
  padding: .95rem 1.1rem;
  border-radius: 16px;
  background: var(--grad-1);
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .25), transparent);
  transform: skewX(-18deg) translateX(-120%);
  transition: transform .6s ease;
}

.cta:hover::after {
  transform: skewX(-18deg) translateX(120%);
}

/* Navbar */
.bdo-navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.bdo-navbar .inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
}

.bdo-navbar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 900;
}

.bdo-navbar .nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.bdo-navbar .nav a {
  padding: .5rem .75rem;
  border-radius: var(--r-1);
  color: var(--text-soft);
  text-decoration: none;
}

.bdo-navbar .nav a[aria-current="page"],
.bdo-navbar .nav a:hover {
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
  color: var(--text);
}

/* Sidebar (icon-only) */
.bdo-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 64px;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-right: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  z-index: var(--z-header);
}

.bdo-sidebar a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid transparent;
}

.bdo-sidebar a:hover,
.bdo-sidebar a[aria-current="page"] {
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
  color: var(--text);
  border-color: var(--border);
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  color: var(--muted);
  font-weight: 700;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text);
}

.breadcrumb .sep {
  opacity: .6;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.pagination .chip {
  padding: .65rem 1rem;
}

.pagination .chip[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* Alerts */
.alert {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: .85rem 1rem;
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  background: var(--surface-2);
}

.alert.success {
  border-color: color-mix(in oklab, var(--success) 25%, var(--border));
  background: color-mix(in oklab, var(--success) 8%, var(--surface));
}

.alert.warning {
  border-color: color-mix(in oklab, var(--warning) 25%, var(--border));
  background: color-mix(in oklab, var(--warning) 8%, var(--surface));
}

.alert.danger {
  border-color: color-mix(in oklab, var(--danger) 25%, var(--border));
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
}

/* Forms */
.input,
.select,
.textarea {
  width: 100%;
  padding: .65rem .9rem;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  box-shadow: 0 0 0 var(--focus-width) var(--ring);
}

.input[disabled],
.select[disabled],
.textarea[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.input-group {
  display: flex;
  width: 100%;
}

.input-group>.input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Floating label */
.field {
  position: relative;
}

.field .input {
  padding-top: 1.15rem;
  padding-left: 4.15rem;
}

.field label {
  position: absolute;
  left: .9rem;
  top: .62rem;
  font-size: .8rem;
  color: var(--muted);
  pointer-events: none;
  transition: transform .2s ease, color .2s ease;
  transform-origin: left top;
}

.field .input:focus+label,
.field .input:not(:placeholder-shown)+label {
  transform: translateY(-.55rem) scale(.95);
  color: color-mix(in oklab, var(--primary) 60%, var(--muted));
}

/* Tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}

.table tr:hover td {
  background: color-mix(in oklab, var(--primary) 6%, var(--surface));
}

/* Modal (shell) */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

.modal[open] {
  display: grid;
  place-items: center;
}

.modal .backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
}

.modal .dialog {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  width: min(680px, 92vw);
  padding: 1rem;
}

/* Dropdown (shell) */
.dropdown {
  position: relative;
}

.dropdown .menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  min-width: 220px;
  padding: .35rem;
  display: none;
}

.dropdown[open] .menu {
  display: block;
}

.dropdown .menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border-radius: .65rem;
  color: var(--text);
  text-decoration: none;
}

.dropdown .menu a:hover {
  background: color-mix(in oklab, var(--primary) 8%, var(--surface));
}

/* Toasts */
.toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: grid;
  gap: .5rem;
}

.toast .item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: .65rem .9rem;
  box-shadow: var(--shadow-2);
}

/* Skeleton loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--surface-3) 90%, var(--surface));
  border-radius: .75rem;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
  animation: shimmer 1.6s infinite;
}

/* Tooltips (basic) */
.tip {
  position: relative;
}

.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -6px);
  bottom: 100%;
  white-space: nowrap;
  background: #111827;
  color: #fff;
  font-size: .75rem;
  padding: .25rem .45rem;
  border-radius: .35rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.tip:hover::after {
  opacity: 1;
  transform: translate(-50%, -8px);
}

/* =============================
   4) LAYOUT HELPERS
   ============================= */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 992px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================
   5) ANIMATIONS & PREFS
   ============================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fade-up {
  animation: fadeUp .5s ease both;
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/***** Respect reduced motion *****/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== END bdo.tune.v3.css ===== */

/* ===== BEGIN bdo.unified.css ===== */

/* ============================================================================
   BDO Unified Design System — Tailwind‑friendly single CSS file (v1.0)
   Covers: Contents, Browsers & devices, Accessibility, Sass‑ready tokens,
           Color & modes, Components, CSS variables, Optimize, Layout,
           Breakpoints, Containers, Grid/Columns/Gutters, Z‑index, CSS Grid,
           Reboot, Typography, Images, Tables, Figures, Forms (controls,
           selects, checks/radios, range, input group, floating labels,
           layout, validation), Accordion, Alerts, Badge, Breadcrumb,
           Buttons & groups, Card, Carousel (shell), Close button, Collapse,
           Dropdowns, List group, Modal, Navbar, Navs & tabs, Offcanvas,
           Pagination, Placeholders, Popovers, Progress, Scrollspy, Spinners,
           Toasts, Tooltips, Helpers (clearfix, colors/background, focus ring,
           icon link, position, ratio, stacks, stretched link, truncation,
           vertical rule, visually hidden), Background, Borders, Display,
           Flex/Float, Interactions, Object‑fit, Opacity, Overflow, Position,
           Shadows, Sizing, Spacing, Text, Vertical align, Visibility, Z‑index,
           Icons, City Guides feature tiles — All namespaced with .bdo‑*
   Load order (recommended): tailwind.css → bdo.unified.css → page.css
   ========================================================================= */

/* =============================
   0) FONTS
   ============================= */
@font-face {
  font-display: swap;
  font-style: normal;
  src: url("../fonts/RobotoRegular.ttf");
  font-family: "Roboto";
  font-weight: 400
}

@font-face {
  font-display: swap;
  font-style: normal;
  src: url("../fonts/RobotoBold.ttf");
  font-family: "Roboto";
  font-weight: 700
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic
}

/* =============================
   1) BASE & TOKENS (@layer base)
   ============================= */
@layer base {

  *,
  *::before,
  *::after {
    box-sizing: border-box
  }

  html,
  body {
    height: 100%
  }

  body {
    margin: 0;
    background: var(--bdo-bg);
    color: var(--bdo-text);
    font-family: "Poppins", "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: var(--bdo-fs-1);
    line-height: var(--bdo-leading);
    letter-spacing: var(--bdo-tracking);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
    display: block
  }

  button,
  input,
  select,
  textarea {
    font: inherit
  }

  :focus {
    outline: none
  }

  :focus-visible {
    outline: var(--bdo-focus-width, 3px) solid var(--bdo-ring, #6366f1);
    outline-offset: 2px
  }

  .bdo-visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap
  }

  .bdo-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
  }

  .bdo-skip:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: #111827;
    color: #fff;
    z-index: 999
  }

  :root {
    /* Container */
    --bdo-container: min(1140px, 92vw);

    /* Radius */
    --bdo-radius-1: .5rem;
    --bdo-radius-2: .75rem;
    --bdo-radius-3: 1rem;
    --bdo-radius-4: 1.25rem;
    --bdo-radius-round: 999px;

    /* Focus */
    --bdo-focus-width: 3px;
    --bdo-ring: rgba(99, 102, 241, .45);

    /* Type scale */
    --bdo-fs-0: .875rem;
    --bdo-fs-1: 1rem;
    --bdo-fs-2: 1.125rem;
    --bdo-fs-3: 1.25rem;
    --bdo-fs-4: 1.5rem;
    --bdo-fs-5: 1.875rem;
    --bdo-fs-6: 2.25rem;
    --bdo-leading: 1.65;
    --bdo-tracking: .005em;

    /* Spacing (4px grid) */
    --bdo-s1: .25rem;
    --bdo-s2: .5rem;
    --bdo-s3: .75rem;
    --bdo-s4: 1rem;
    --bdo-s5: 1.25rem;
    --bdo-s6: 1.5rem;
    --bdo-s7: 1.75rem;
    --bdo-s8: 2rem;

    /* Light palette (fallback) */
    --bdo-bg: #ffffff;
    --bdo-surface: #f8fafc;
    --bdo-surface-2: #f1f5f9;
    --bdo-surface-3: #e2e8f0;
    --bdo-border: rgba(2, 6, 23, .12);
    --bdo-text: #0f172a;
    --bdo-text-soft: #334155;
    --bdo-muted: #64748b;
    --bdo-primary: #6366f1;
    --bdo-primary-2: #7c83f7;
    --bdo-primary-3: #4f46e5;
    --bdo-success: #16a34a;
    --bdo-warning: #eab308;
    --bdo-danger: #ef4444;
    --bdo-info: #0ea5e9;

    /* Shadows */
    --bdo-shadow-1: 0 6px 16px rgba(2, 6, 23, .06);
    --bdo-shadow-2: 0 18px 45px rgba(2, 6, 23, .10), 0 6px 16px rgba(2, 6, 23, .06);
    --bdo-shadow-3: 0 24px 60px rgba(2, 6, 23, .14), 0 8px 20px rgba(2, 6, 23, .08);

    /* Gradients */
    --bdo-grad-1: linear-gradient(135deg, #58a9ff 0%, #8a5df6 55%, #f24bb2 100%);
  }

  /* Dark mode */
  [data-theme="dark"],
  html.dark {
    --bdo-bg: #0b1220;
    --bdo-surface: #0f172a;
    --bdo-surface-2: #111827;
    --bdo-surface-3: #1f2937;
    --bdo-border: rgba(148, 163, 184, .18);
    --bdo-text: #e5e7eb;
    --bdo-text-soft: #cbd5e1;
    --bdo-muted: #94a3b8;
    --bdo-primary: #8b5cf6;
    --bdo-primary-2: #a78bfa;
    --bdo-primary-3: #7c3aed;
    --bdo-ring: rgba(139, 92, 246, .55);
    --bdo-shadow-1: 0 6px 16px rgba(0, 0, 0, .35);
    --bdo-shadow-2: 0 18px 45px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .35);
    --bdo-shadow-3: 0 24px 60px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .42);
  }

  .bdo-container {
    width: var(--bdo-container);
    max-width: 100%;
    margin-inline: auto
  }

  /* Typeset */
  .bdo-typeset h1,
  .bdo-typeset h2,
  .bdo-typeset h3,
  .bdo-typeset h4 {
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0
  }

  .bdo-typeset h1 {
    font-size: var(--bdo-fs-6)
  }

  .bdo-typeset h2 {
    font-size: var(--bdo-fs-5)
  }

  .bdo-typeset h3 {
    font-size: var(--bdo-fs-4)
  }

  .bdo-typeset p {
    margin: 0
  }
}

/* =============================
   2) UTILITIES (layout, colors, helpers)
   ============================= */
@layer utilities {

  /* Containers & breakpoints */
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem
  }

  @media (min-width:640px) {
    .container {
      max-width: 640px
    }
  }

  @media (min-width:768px) {
    .container {
      max-width: 768px
    }
  }

  @media (min-width:1024px) {
    .container {
      max-width: 1024px
    }
  }

  @media (min-width:1280px) {
    .container {
      max-width: 1280px
    }
  }

  @media (min-width:1536px) {
    .container {
      max-width: 1536px
    }
  }

  /* Grid/Columns/Gutters */
  .grid {
    display: grid;
    gap: 1rem
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr)
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr)
  }

  @media (max-width:768px) {

    .grid-2,
    .grid-3,
    .grid-4 {
      grid-template-columns: 1fr
    }
  }

  /* Flex/Float/Stacks */
  .flex {
    display: flex
  }

  .flex-col {
    flex-direction: column
  }

  .flex-row {
    flex-direction: row
  }

  .items-center {
    align-items: center
  }

  .justify-center {
    justify-content: center
  }

  .bdo-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bdo-s4)
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both
  }

  /* Background/Colors/Borders */
  .bdo-bg {
    background: var(--bdo-bg)
  }

  .bdo-surface {
    background: var(--bdo-surface)
  }

  .bdo-surface2 {
    background: var(--bdo-surface-2)
  }

  .bdo-text {
    color: var(--bdo-text)
  }

  .bdo-text-soft {
    color: var(--bdo-text-soft)
  }

  .bdo-muted {
    color: var(--bdo-muted)
  }

  .bdo-border {
    border: 1px solid var(--bdo-border)
  }

  .bdo-shadow-1 {
    box-shadow: var(--bdo-shadow-1)
  }

  .bdo-shadow-2 {
    box-shadow: var(--bdo-shadow-2)
  }

  .bdo-shadow-3 {
    box-shadow: var(--bdo-shadow-3)
  }

  /* Position/Ratio/Object-fit/Z-index */
  .relative {
    position: relative
  }

  .absolute {
    position: absolute
  }

  .fixed {
    position: fixed
  }

  .z-10 {
    z-index: 10
  }

  .z-50 {
    z-index: 50
  }

  .z-70 {
    z-index: 70
  }

  .z-90 {
    z-index: 90
  }

  .ratio-16x9 {
    aspect-ratio: 16/9
  }

  .ratio-4x3 {
    aspect-ratio: 4/3
  }

  .obj-cover {
    object-fit: cover
  }

  .obj-contain {
    object-fit: contain
  }

  /* Text helpers */
  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .stretched-link {
    position: relative
  }

  .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0
  }

  /* Misc */
  .full-bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%)
  }

  .vr {
    width: 1px;
    align-self: stretch;
    background: var(--bdo-border)
  }

  .img-fluid {
    max-width: 100%;
    height: auto;
    display: block
  }
}

/* =============================
   3) COMPONENTS
   ============================= */
@layer components {

  /* Buttons & button groups */
  .bdo-btn {
    --_bg: var(--bdo-surface-2);
    --_fg: var(--bdo-text);
    --_bd: var(--bdo-border);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    border-radius: var(--bdo-radius-2);
    padding: .7rem 1rem;
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease, border-color .2s ease
  }

  .bdo-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--bdo-shadow-1)
  }

  .bdo-btn:active {
    transform: translateY(0)
  }

  .bdo-btn>i {
    font-size: 1.05em
  }

  .bdo-btn--primary {
    --_bg: var(--bdo-primary);
    --_fg: #fff;
    --_bd: color-mix(in oklab, var(--bdo-primary) 35%, transparent)
  }

  .bdo-btn--ghost {
    --_bg: transparent;
    --_bd: var(--bdo-border)
  }

  .bdo-btn--soft {
    --_bg: color-mix(in oklab, var(--bdo-primary) 10%, var(--bdo-surface));
    --_fg: color-mix(in oklab, var(--bdo-primary) 60%, var(--bdo-text));
    --_bd: color-mix(in oklab, var(--bdo-primary) 15%, var(--bdo-border))
  }

  .bdo-btn--outline {
    --_bg: transparent;
    --_fg: var(--bdo-text);
    --_bd: color-mix(in oklab, var(--bdo-primary) 35%, var(--bdo-border))
  }

  .bdo-btn--block {
    display: inline-flex;
    width: 100%;
    justify-content: center
  }

  .bdo-btn--round {
    border-radius: var(--bdo-radius-round)
  }

  .bdo-btn-group {
    display: inline-flex;
    gap: .25rem
  }

  .bdo-icon-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700
  }

  .bdo-icon-link i {
    transition: transform .2s ease
  }

  .bdo-icon-link:hover i {
    transform: translateX(2px)
  }

  /* Alerts, Badge, Chips */
  .bdo-alert {
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-2);
    padding: .85rem 1rem;
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    background: var(--bdo-surface-2)
  }

  .bdo-alert--success {
    border-color: color-mix(in oklab, var(--bdo-success) 25%, var(--bdo-border));
    background: color-mix(in oklab, var(--bdo-success) 8%, var(--bdo-surface))
  }

  .bdo-alert--warning {
    border-color: color-mix(in oklab, var(--bdo-warning) 25%, var(--bdo-border));
    background: color-mix(in oklab, var(--bdo-warning) 8%, var(--bdo-surface))
  }

  .bdo-alert--danger {
    border-color: color-mix(in oklab, var(--bdo-danger) 25%, var(--bdo-border));
    background: color-mix(in oklab, var(--bdo-danger) 8%, var(--bdo-surface))
  }

  .bdo-badge {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: .5rem;
    background: color-mix(in oklab, var(--bdo-primary) 12%, var(--bdo-surface));
    color: var(--bdo-primary-3);
    font-weight: 800;
    font-size: .75rem
  }

  .bdo-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: var(--bdo-radius-round);
    border: 1px solid var(--bdo-border);
    background: color-mix(in oklab, var(--bdo-surface) 70%, transparent);
    color: var(--bdo-text-soft);
    font-weight: 800;
    font-size: var(--bdo-fs-0)
  }

  .bdo-chip--solid {
    background: var(--bdo-grad-1);
    color: #fff;
    border: 0
  }

  /* Card */
  .bdo-card {
    position: relative;
    border-radius: 26px;
    background: var(--bdo-surface);
    border: 1px solid var(--bdo-border);
    color: var(--bdo-text);
    box-shadow: var(--bdo-shadow-1);
    overflow: hidden
  }

  .bdo-card:hover {
    box-shadow: var(--bdo-shadow-2)
  }

  .bdo-card__head {
    padding: 1rem 1rem .5rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between
  }

  .bdo-card__body {
    padding: 0 1rem 1rem
  }

  .bdo-card__foot {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid var(--bdo-border);
    background: color-mix(in oklab, var(--bdo-surface-2) 70%, transparent)
  }

  /* Tables & Figures */
  .bdo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
  }

  .bdo-table th,
  .bdo-table td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--bdo-border);
    text-align: left
  }

  .bdo-table thead th {
    position: sticky;
    top: 0;
    background: var(--bdo-surface-2);
    z-index: 1
  }

  .bdo-table tr:hover td {
    background: color-mix(in oklab, var(--bdo-primary) 6%, var(--bdo-surface))
  }

  figure.bdo-figure {
    margin: 0
  }

  figure.bdo-figure>img {
    border-radius: var(--bdo-radius-2)
  }

  figure.bdo-figure>figcaption {
    color: var(--bdo-muted);
    font-size: .9em;
    margin-top: .5rem
  }

  /* Forms */
  .bdo-input,
  .bdo-select,
  .bdo-textarea {
    width: 100%;
    padding: .65rem .9rem;
    border-radius: var(--bdo-radius-2);
    border: 1px solid var(--bdo-border);
    background: var(--bdo-surface);
    color: var(--bdo-text);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease
  }

  .bdo-input::placeholder {
    color: color-mix(in oklab, var(--bdo-muted) 70%, var(--bdo-text))
  }

  .bdo-input:focus,
  .bdo-select:focus,
  .bdo-textarea:focus {
    border-color: color-mix(in oklab, var(--bdo-primary) 35%, var(--bdo-border));
    box-shadow: 0 0 0 var(--bdo-focus-width) var(--bdo-ring)
  }

  .bdo-input[disabled],
  .bdo-select[disabled],
  .bdo-textarea[disabled] {
    opacity: .6;
    cursor: not-allowed
  }

  .bdo-input-group {
    display: flex;
    width: 100%
  }

  .bdo-input-group>.bdo-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
  }

  .bdo-input-group>.bdo-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
  }

  .bdo-field {
    position: relative
  }

  .bdo-field>.bdo-input {
    padding-top: 1.15rem
  }

  .bdo-field>label {
    position: absolute;
    left: .9rem;
    top: .62rem;
    font-size: .8rem;
    color: var(--bdo-muted);
    pointer-events: none;
    transition: transform .2s ease, color .2s ease;
    transform-origin: left top
  }

  .bdo-field>.bdo-input:focus+label,
  .bdo-field>.bdo-input:not(:placeholder-shown)+label {
    transform: translateY(-.55rem) scale(.95);
    color: color-mix(in oklab, var(--bdo-primary) 60%, var(--bdo-muted))
  }

  .bdo-check {
    display: flex;
    align-items: center;
    gap: .5rem
  }

  .bdo-check input[type="checkbox"],
  .bdo-check input[type="radio"] {
    width: 1rem;
    height: 1rem
  }

  .bdo-range {
    width: 100%
  }

  .bdo-valid {
    border-color: color-mix(in oklab, var(--bdo-success) 35%, var(--bdo-border))
  }

  .bdo-invalid {
    border-color: color-mix(in oklab, var(--bdo-danger) 40%, var(--bdo-border))
  }

  /* Navbar, Breadcrumb, Navs & Tabs */
  .bdo-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bdo-surface) 85%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bdo-border)
  }

  .bdo-navbar__inner {
    width: var(--bdo-container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem
  }

  .bdo-navbar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 900
  }

  .bdo-navbar__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem
  }

  .bdo-navbar__nav a {
    padding: .5rem .75rem;
    border-radius: var(--bdo-radius-1);
    color: var(--bdo-text-soft);
    text-decoration: none
  }

  .bdo-navbar__nav a[aria-current="page"],
  .bdo-navbar__nav a:hover {
    background: color-mix(in oklab, var(--bdo-primary) 8%, var(--bdo-surface));
    color: var(--bdo-text)
  }

  .bdo-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    color: var(--bdo-muted);
    font-weight: 700
  }

  .bdo-breadcrumb a {
    color: inherit;
    text-decoration: none
  }

  .bdo-breadcrumb a:hover {
    color: var(--bdo-text)
  }

  .bdo-breadcrumb .sep {
    opacity: .6
  }

  .bdo-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--bdo-border)
  }

  .bdo-tab {
    padding: .6rem .9rem;
    border-radius: var(--bdo-radius-1) var(--bdo-radius-1) 0 0;
    color: var(--bdo-text-soft);
    text-decoration: none
  }

  .bdo-tab[aria-selected="true"],
  .bdo-tab:hover {
    background: color-mix(in oklab, var(--bdo-primary) 8%, var(--bdo-surface));
    color: var(--bdo-text)
  }

  /* Accordion/Collapse */
  .bdo-accordion {
    display: grid;
    gap: .5rem
  }

  .bdo-acc-item {
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-2);
    overflow: hidden
  }

  .bdo-acc-btn {
    width: 100%;
    text-align: left;
    background: var(--bdo-surface-2);
    padding: .8rem 1rem;
    border: 0;
    cursor: pointer;
    font-weight: 800
  }

  .bdo-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    background: var(--bdo-surface)
  }

  .bdo-acc-item[open] .bdo-acc-panel {
    max-height: 40rem
  }

  /* Dropdowns, Popovers, Tooltips */
  .bdo-dropdown {
    position: relative
  }

  .bdo-dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bdo-surface);
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-2);
    box-shadow: var(--bdo-shadow-2);
    min-width: 220px;
    padding: .35rem;
    display: none;
    z-index: 60
  }

  .bdo-dropdown[open] .bdo-dropdown__menu {
    display: block
  }

  .bdo-dropdown__menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: .65rem;
    color: var(--bdo-text);
    text-decoration: none
  }

  .bdo-dropdown__menu a:hover {
    background: color-mix(in oklab, var(--bdo-primary) 8%, var(--bdo-surface))
  }

  .bdo-tip {
    position: relative
  }

  .bdo-tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -6px);
    bottom: 100%;
    white-space: nowrap;
    background: #111827;
    color: #fff;
    font-size: .75rem;
    padding: .25rem .45rem;
    border-radius: .35rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease
  }

  .bdo-tip:hover::after {
    opacity: 1;
    transform: translate(-50%, -8px)
  }

  /* Modal, Offcanvas */
  .bdo-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none
  }

  .bdo-modal[open] {
    display: grid;
    place-items: center
  }

  .bdo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5)
  }

  .bdo-modal__dialog {
    position: relative;
    background: var(--bdo-surface);
    color: var(--bdo-text);
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-3);
    box-shadow: var(--bdo-shadow-3);
    width: min(680px, 92vw);
    padding: 1rem
  }

  .bdo-offcanvas {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 90vw);
    background: var(--bdo-surface);
    border-left: 1px solid var(--bdo-border);
    box-shadow: var(--bdo-shadow-3);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 70
  }

  .bdo-offcanvas[open] {
    transform: translateX(0)
  }

  /* Carousel (shell) */
  .bdo-carousel {
    position: relative;
    overflow: hidden
  }

  .bdo-carousel__track {
    display: flex;
    gap: var(--bdo-s4);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    padding-bottom: var(--bdo-s2)
  }

  .bdo-carousel__item {
    scroll-snap-align: start;
    flex: 0 0 auto
  }

  /* List group */
  .bdo-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-2);
    overflow: hidden
  }

  .bdo-list__item {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--bdo-border)
  }

  .bdo-list__item:last-child {
    border-bottom: 0
  }

  /* Pagination */
  .bdo-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
  }

  .bdo-pagination .bdo-chip {
    padding: .65rem 1rem
  }

  .bdo-pagination .bdo-chip[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none
  }

  /* Placeholders/Skeleton/Progress/Spinners/Toasts/Scrollspy */
  .bdo-skeleton {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--bdo-surface-3) 90%, var(--bdo-surface));
    border-radius: .75rem
  }

  .bdo-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    animation: bdo-shimmer 1.6s infinite
  }

  .bdo-progress {
    height: .6rem;
    background: var(--bdo-surface-3);
    border-radius: var(--bdo-radius-1);
    overflow: hidden
  }

  .bdo-progress>span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bdo-primary);
    transition: width .3s ease
  }

  .bdo-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid color-mix(in oklab, var(--bdo-text) 12%, transparent);
    border-top-color: var(--bdo-primary);
    border-radius: 50%;
    animation: bdo-spin .8s linear infinite
  }

  .bdo-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 90;
    display: grid;
    gap: .5rem
  }

  .bdo-toast .item {
    background: var(--bdo-surface);
    border: 1px solid var(--bdo-border);
    border-radius: var(--bdo-radius-2);
    padding: .65rem .9rem;
    box-shadow: var(--bdo-shadow-2)
  }

  .bdo-scrollspy [data-spy="active"] {
    color: var(--bdo-primary);
    font-weight: 800
  }

  /* Close button */
  .bdo-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--bdo-border);
    background: color-mix(in oklab, var(--bdo-surface) 88%, transparent)
  }

  .bdo-close:hover {
    background: var(--bdo-surface-2)
  }

  /* Nav pills */
  .bdo-nav-pills {
    display: flex;
    gap: .35rem
  }

  .bdo-nav-pill {
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--bdo-border);
    color: var(--bdo-text-soft);
    text-decoration: none
  }

  .bdo-nav-pill[aria-current="page"],
  .bdo-nav-pill:hover {
    background: color-mix(in oklab, var(--bdo-primary) 10%, var(--bdo-surface));
    color: var(--bdo-text)
  }
}

/* =============================
   4) CITY GUIDES (feature tiles)
   ============================= */
@layer components {
  .bdo-cg-card {
    position: relative;
    color: #fff;
    overflow: hidden;
    border-radius: var(--bdo-radius-3);
    box-shadow: var(--bdo-shadow-1)
  }

  .bdo-cg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
  }

  .bdo-cg-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0008, #0000 40%, #000a)
  }

  .bdo-cg-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    padding: var(--bdo-s4)
  }

  .bdo-cg-name {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    font-weight: 900;
    letter-spacing: -.01em
  }

  .bdo-cg-mosaic {
    display: grid;
    gap: 12px;
    grid-template-areas: "A B B" "C B B" "C D E"
  }

  .bdo-cg-A {
    grid-area: A;
    height: 240px
  }

  .bdo-cg-D {
    grid-area: D;
    height: 240px
  }

  .bdo-cg-E {
    grid-area: E;
    height: 240px
  }

  .bdo-cg-B {
    grid-area: B;
    height: 420px
  }

  .bdo-cg-C {
    grid-area: C;
    height: 420px
  }

  @media(min-width:640px) {

    .bdo-cg-A,
    .bdo-cg-D,
    .bdo-cg-E {
      height: 260px
    }

    .bdo-cg-B,
    .bdo-cg-C {
      height: 460px
    }
  }

  @supports (aspect-ratio:1) {

    .bdo-cg-A,
    .bdo-cg-D,
    .bdo-cg-E {
      height: auto;
      aspect-ratio: 4/3
    }

    .bdo-cg-B,
    .bdo-cg-C {
      height: auto;
      aspect-ratio: 5/4
    }
  }
}

/* =============================
   5) ANIMATIONS & PREFS
   ============================= */
@layer utilities {
  @keyframes bdo-fade-up {
    from {
      opacity: 0;
      transform: translateY(10px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  .bdo-fade-up {
    animation: bdo-fade-up .5s ease both
  }

  @keyframes bdo-shimmer {
    from {
      transform: translateX(-100%)
    }

    to {
      transform: translateX(100%)
    }
  }

  @keyframes bdo-spin {
    to {
      transform: rotate(360deg)
    }
  }
}

/* =============================
   6) ACCESSIBILITY & REDUCED MOTION
   ============================= */
@layer base {
  @media (prefers-reduced-motion:reduce) {
    * {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important
    }
  }
}

/* ===== END bdo.unified.css ===== */



/* ===== CUSTOM HERO + SECTIONS THEME ADDITION ===== */
:root {
  --hero-bg: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.16), transparent 55%),
    linear-gradient(180deg, #f9fafb 0%, #eff6ff 40%, #eef2ff 100%);
  --hero-surface: #ffffff;
  --hero-surface-soft: #f9fafb;
  --hero-border-subtle: rgba(148, 163, 184, 0.35);
  --hero-text-main: #0f172a;
  --hero-text-muted: #4b5563;
  --hero-accent: #6366f1;
  --hero-accent-soft: rgba(99, 102, 241, 0.12);
  --primary-ink: #0f172a;
  --section-pad-y: 72px;
}

[data-theme="dark"] {
  --hero-bg: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.24), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.24), transparent 60%),
    linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%);
  --hero-surface: #020617;
  --hero-surface-soft: #020617;
  --hero-border-subtle: rgba(51, 65, 85, 0.9);
  --hero-text-main: #e5e7eb;
  --hero-text-muted: #9ca3af;
  --hero-accent: #38bdf8;
  --hero-accent-soft: rgba(56, 189, 248, 0.18);
  --primary-ink: #e5e7eb;
}

/* Make sure site width is crisp, not 80% */
.bdo-max {
  max-width: 1120px;
}

/* Remove heavy global blurs if any */
[class*="glass"],
.bdo-header,
.bdo-footer,
.bdo-card {
  backdrop-filter: none !important;
}

/* ===== HERO LAYOUT ===== */

.hero-wrap {
  position: relative;
  background: var(--hero-bg);
  overflow: visible;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 12% 10% auto;
  height: 52%;
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.55), transparent 60%);
  opacity: 0.85;
  pointer-events: none;
}

.pattern-ornament {
  position: absolute;
  right: 4%;
  top: 8%;
  width: 260px;
  height: 260px;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.26) 0, transparent 55%);
  opacity: 0.26;
  filter: blur(.6px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hero-text-muted);
  margin-bottom: 16px;
}

.hero-kicker-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, #22c55e, #6366f1);
  color: #f9fafb;
  font-weight: 700;
  font-size: 11px;
}

.hero-kicker-text {
  font-weight: 600;
  white-space: nowrap;
}

.hero-title {
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.05;
  margin: 0 0 14px 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--hero-text-main);
  -webkit-font-smoothing: antialiased;
}

.hero-title span.accent {
  background: linear-gradient(120deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-content p.lead {
  color: var(--hero-text-muted);
  margin: 0 0 18px 0;
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 52ch;
  line-height: 1.7;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 10px 0 8px;
}

.hero-tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 12px;
  color: var(--hero-text-muted);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.btn-primary {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(120deg, #6366f1, #0ea5e9);
  color: #f9fafb;
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.35);
}

.btn-primary .sub {
  font-size: 11px;
  opacity: 0.96;
  margin-left: 8px;
  display: inline-block;
  font-weight: 700;
}

.btn-outline {
  padding: 12px 18px;
  background: var(--hero-surface);
  border: 1px solid rgba(148, 163, 184, 0.55);
  color: var(--hero-text-main);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
}

.btn svg {
  flex: 0 0 auto;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(37, 99, 235, 0.45);
}

.btn-outline:hover {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(148, 163, 184, 0.8);
}

.btn:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.6);
  outline-offset: 2px;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 13px;
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--hero-text-muted);
}

.hero-social-proof p {
  margin: 0;
}

.hero-social-proof strong {
  color: var(--hero-text-main);
}

.hero-avatars {
  display: flex;
}

.hero-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(248, 250, 252, 0.95);
  background: linear-gradient(135deg, #6366f1, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f9fafb;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
}

.hero-avatar+.hero-avatar {
  margin-left: -10px;
}

.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.hero-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 18px 18px 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.18), transparent 65%),
    var(--hero-surface);
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.hero-panel-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hero-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-panel-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #a3e635);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

.hero-panel-logo {
  font-family: "Shadows Into Light Two", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-text-main);
}

.hero-feature-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 12px;
}

.hero-feature-card {
  position: relative;
  padding: 14px 14px 14px;
  border-radius: 18px;
  background: var(--hero-surface-soft);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  min-height: 120px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.hero-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  border-color: rgba(129, 140, 248, 0.85);
  background: rgba(255, 255, 255, 0.98);
}

[data-theme="dark"] .hero-feature-card:hover {
  background: rgba(15, 23, 42, 0.96);
}

.hero-feature-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
}

.hero-feature-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 4px;
}

.hero-feature-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hero-text-main);
  margin-bottom: 4px;
}

.hero-feature-meta {
  font-size: 12px;
  color: var(--hero-text-muted);
  line-height: 1.4;
}

.hero-feature-pill {
  margin-top: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--hero-accent-soft);
  color: var(--hero-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-feature-pill span.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.hero-panel-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hero-text-muted);
}

.hero-panel-footer .hero-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.3);
}

.hero-badge {
  position: absolute;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--hero-surface);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.26);
  min-width: 160px;
}

.hero-badge--city {
  left: -18px;
  bottom: -22px;
}

.hero-badge--stories {
  right: -4px;
  top: -22px;
}

.hero-badge-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 4px;
}

.hero-badge-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--hero-text-main);
}

.stats-overlap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -80px;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0 1rem;
  z-index: 3;
}

.stat-card {
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  transition: transform .16s ease, box-shadow .16s ease;
}

[data-theme="dark"] .stat-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
  border-color: rgba(30, 64, 175, 0.7);
}

.stats-overlap .stat-card:nth-child(2) {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.20);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.20);
}

.stat-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stat-main {
  flex: 1;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.6), transparent 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.26);
}

[data-theme="dark"] .stat-icon {
  color: #e5f0ff;
}

.stat-label {
  font-size: 12px;
  color: var(--hero-text-muted);
  margin-bottom: 4px;
}

.stat-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--hero-text-main);
}

.stat-title {
  margin-top: 8px;
  font-size: 13px;
  color: var(--hero-text-muted);
  line-height: 1.5;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ===== SECTION SPACING ===== */

.bdo-section,
.bdo-home-sec {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.page-section-after-hero {
  padding-top: calc(var(--section-pad-y) - 8px) !important;
  padding-bottom: calc(var(--section-pad-y) - 4px) !important;
}

/* ========================================================
     CATEGORIES SECTION
     ======================================================== */

.cats-hero .cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  margin-top: 40px !important;
}

.cats-hero .cats-titles .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: .8;
}

.cats-hero .cats-titles .sec-eyebrow i {
  font-size: 13px;
}

.cats-hero .cats-titles .sec-title {
  font-size: clamp(1.5rem, 2.2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 5px 0 4px;
  color: var(--hero-text-main);
}

.cats-hero .cats-titles .sec-sub {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}

.cats-hero .sec-actions .bdo-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: .85rem;
  text-decoration: none;
  color: var(--hero-text-main);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] .cats-hero .sec-actions .bdo-link-ghost {
  background: rgba(15, 23, 42, 0.94);
  color: var(--hero-text-main);
}

.cats-hero .sec-actions .bdo-link-ghost:hover {
  border-color: rgba(129, 140, 248, 0.9);
  transform: translateY(-1px);
}

.cats-simple-grid.cats-simple-grid--pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.cat-simple.cat-simple--pro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  min-height: 86px;
}

[data-theme="dark"] .cat-simple.cat-simple--pro {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.38);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.60);
}

.cat-simple-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.96), transparent 55%),
    linear-gradient(135deg, #6366f1, #22c55e);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.35);
}

.cat-simple-ico i {
  line-height: 1;
}

[data-theme="dark"] .cat-simple-ico {
  color: #f9fafb;
}

.cat-simple-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-simple-name {
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hero-text-main);
}

.cat-simple-count {
  font-size: .8rem;
  opacity: .75;
  color: var(--hero-text-muted);
}

.cat-simple-arrow {
  flex: 0 0 auto;
  font-size: 18px;
  opacity: .55;
  transition: transform .16s ease, opacity .16s ease;
}

.cat-simple.cat-simple--pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  border-color: rgba(129, 140, 248, 0.9);
}

.cat-simple.cat-simple--pro:hover .cat-simple-arrow {
  transform: translateX(3px);
  opacity: .9;
}

@media (max-width: 768px) {
  .cats-hero .cats-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .cat-simple.cat-simple--pro {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .cat-simple-ico {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* ========================================================
     TRENDING & LATEST SECTIONS
     ======================================================== */

.bdo-sec-trending-neo {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.9), rgba(248, 250, 252, 0.95));
}

[data-theme="dark"] .bdo-sec-trending-neo {
  background: radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.35), transparent 60%),
    #020617;
}

.neo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.neo-head .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: .85;
}

.neo-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  letter-spacing: -0.03em;
  margin: .35rem 0 .25rem;
}

.neo-title .ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: radial-gradient(circle at 0% 0%, rgba(254, 249, 195, 0.9), transparent 60%);
}

.neo-sub {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}

.neo-actions .bdo-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: .85rem;
  text-decoration: none;
  color: var(--hero-text-main);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

[data-theme="dark"] .neo-actions .bdo-link-ghost {
  background: rgba(15, 23, 42, 0.94);
}

.neo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.neo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neo-item {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

[data-theme="dark"] .neo-item {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
}

.neo-link {
  display: grid;
  grid-template-columns: auto 96px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}

.neo-rank-pill {
  display: inline-flex;
  width: max-content;
  height: 1px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  background: #0f172a;
  color: #f9fafb;
}

[data-theme="dark"] .neo-rank-pill {
  background: #e5e7eb;
  color: #020617;
}

.neo-thumb {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e7eb;
}

.neo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.neo-h {
  font-size: .96rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.neo-meta {
  margin: 0;
  font-size: .8rem;
  opacity: .8;
}

.neo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.24);
  border-color: rgba(129, 140, 248, 0.9);
}

.neo-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bdo-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.40);
  background: rgba(255, 255, 255, 0.98);
  padding: 14px 14px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] .bdo-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
}

.neo-submit-title {
  font-size: 1.0rem;
  margin: .25rem 0 .35rem;
  font-weight: 800;
}

.neo-submit-text {
  font-size: .85rem;
  opacity: .9;
}

.neo-quick-title {
  font-weight: 700;
  font-size: .95rem;
  margin: 0 0 .35rem;
}

.neo-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.bdo-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-size: .78rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.98);
}

[data-theme="dark"] .bdo-chip {
  background: rgba(15, 23, 42, 0.96);
}

.bdo-chip:hover {
  border-color: rgba(129, 140, 248, 0.9);
}

@media (max-width: 900px) {
  .neo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* LATEST POSTS */

.bdo-sec-latest {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}

.bdo-sec-latest .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.bdo-sec-latest .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: .8;
}

.bdo-sec-latest .sec-title {
  font-size: clamp(1.5rem, 2.2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 4px 0 4px;
}

.bdo-sec-latest .sec-sub {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}

.bdo-sec-latest .sec-actions .bdo-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: .85rem;
  text-decoration: none;
  color: var(--hero-text-main);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.latest-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

[data-theme="dark"] .latest-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
}

.latest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.20);
  border-color: rgba(129, 140, 248, 0.90);
}

.latest-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.latest-media {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  background: #e5e7eb;
}

.latest-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.latest-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.latest-title {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
}

.latest-meta {
  font-size: .78rem;
  opacity: .8;
}

@media (max-width: 768px) {
  .bdo-sec-latest .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
}

/* ========================================================
     CITY GUIDES
     ======================================================== */

.bdo-sec-cityguides {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}

.cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: .8;
}

.cg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}

.cg-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  letter-spacing: -0.03em;
  margin: .35rem 0 .15rem;
}

.cg-title .ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: radial-gradient(circle at 0% 0%, rgba(186, 230, 253, 0.9), transparent 60%);
}

.cg-sub {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}

.cg-filters {
  margin-top: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: .78rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] .cg-chip {
  background: rgba(15, 23, 42, 0.96);
}

.cg-chip.is-active {
  border-color: rgba(129, 140, 248, 0.90);
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  color: #f9fafb;
}

.cg-rail {
  position: relative;
  margin-top: 1.25rem;
}

.cg-rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.cg-rail-nav button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24);
  cursor: pointer;
}

.cg-rail-nav.btn-prev {
  left: -6px;
}

.cg-rail-nav.btn-next {
  right: -6px;
}

[data-theme="dark"] .cg-rail-nav button {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(51, 65, 85, 0.95);
}

.cg-rail-nav button:hover {
  border-color: rgba(129, 140, 248, 0.90);
}

.mask-l,
.mask-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  z-index: 4;
  pointer-events: none;
}

.mask-l {
  left: 0;
  background: linear-gradient(to right, var(--hero-surface), transparent);
}

.mask-r {
  right: 0;
  background: linear-gradient(to left, var(--hero-surface), transparent);
}

.cg-rail-card {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.98);
  padding: 8px 8px 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  display: block;
}

[data-theme="dark"] .cg-rail-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
}

.cg-rail-img {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
  background: #e5e7eb;
}

.cg-rail-img img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.cg-rail-name {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.cg-rail-cta {
  font-size: .78rem;
  opacity: .85;
}

.cg-rail-card:hover {
  border-color: rgba(129, 140, 248, 0.90);
  transform: translateY(-2px);
}

#cgRailSwiper .swiper-scrollbar {
  margin-top: 8px;
}

@media (max-width:768px) {
  .cg-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cg-rail-nav {
    display: none;
  }

  .mask-l,
  .mask-r {
    display: none;
  }
}

/* ========================================================
     PARTNER HIGHLIGHTS
     ======================================================== */

.bdo-sec-ads {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}

.ads-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.ads-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: clamp(1.4rem, 2.1vw, 1.7rem);
  letter-spacing: -0.03em;
  margin: 0 0 .15rem;
}

.ads-title .ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: radial-gradient(circle at 0% 0%, #ef4444, #ef4444 60%);
}

.ads-sub {
  margin: 0;
  font-size: .9rem;
  opacity: .85;
}

.ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ad-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #f9fafb;
  min-height: 180px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.26);
  background: #020617;
}

.ad-card .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .7;
}

.ad-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.45), transparent 55%),
    linear-gradient(to bottom right, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96));
}

.ad-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(251, 191, 36, 0.8);
}

.ad-content {
  position: relative;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 6px;
}

.ad-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.ad-brand img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
}

.ad-title {
  font-size: 1rem;
  font-weight: 800;
  margin-top: 6px;
}

.ad-meta {
  font-size: .78rem;
  opacity: .9;
}

.ad-cta {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.32);
}

.ads-rail {
  margin-top: 18px;
}

.rail-title {
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: .4rem;
  opacity: .9;
}

.offer-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.98);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

[data-theme="dark"] .offer-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
}

.offer-logo img {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}

.offer-title {
  font-size: .86rem;
  font-weight: 600;
}

.offer-sub {
  font-size: .76rem;
  opacity: .8;
}

#adsRailSwiper .swiper-scrollbar {
  margin-top: 6px;
}

@media (max-width:768px) {
  .ads-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero-visual {
    justify-content: center;
    order: 1;
  }

  .hero-content {
    order: 2;
    text-align: center;
  }

  .hero-social-proof {
    justify-content: center;
  }

  .hero-badge--city {
    left: 8px;
    bottom: -26px;
  }

  .hero-badge--stories {
    right: 8px;
    top: -24px;
  }
}

@media (max-width: 768px) {
  .hero-wrap {
    padding-bottom: 110px;
  }

  .hero-panel {
    max-width: 100%;
  }

  .hero-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-feature-card--wide {
    flex-direction: column;
  }

  .stats-overlap {
    position: static;
    transform: none;
    bottom: auto;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 18px;
    padding: 0 10px 24px;
  }

  .stats-overlap .stat-card:nth-child(2) {
    transform: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  }

  .hero-content {
    text-align: left;
  }

  .hero-social-proof {
    justify-content: flex-start;
  }
}

@media (min-width: 1200px) {}

@media (prefers-reduced-motion: reduce) {

  .btn,
  .stat-card,
  .hero-feature-card,
  .cat-simple,
  .latest-card,
  .neo-item,
  .cg-rail-card,
  .ad-card {
    transition: none;
  }
}

/* ===== END CUSTOM HERO + SECTIONS THEME ADDITION ===== */

/* ----- Header final overrides (from bdo.header.css) ----- */

[data-theme="dark"] img[data-auto-invert="1"] {
  filter: brightness(0) invert(1) hue-rotate(180deg) saturate(.9);
}

.bdo-max {
  max-width: 80%;
}

/* ----- Full-bleed & parallax band overrides (final) ----- */

.full-bleed {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  isolation: isolate;
  overflow-x: clip;
}

.full-bleed>.bdo-max {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}

/* Parallax-style full-bleed band */
.full-bleed-alt {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  isolation: isolate;
  --parallax-strength: 18;
  --scroll: 0;
  --pad-y: clamp(36px, 10vw, 120px);
}

.full-bleed-alt>.bdo-max {
  position: relative;
  z-index: 2;
}

/* ===========================================
   Broadway Originals – Header color overrides
   (Paste at the very end of bdo.css)
   =========================================== */

header.bdo-header[data-header] {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, .28);
  isolation: isolate;
  overflow: visible;
  /* Colorful light-mode band, like your first design */
  background:
    radial-gradient(1200px 400px at 0% -20%, rgba(88, 169, 255, .26), transparent 60%),
    radial-gradient(1000px 360px at 100% -20%, rgba(242, 75, 178, .22), transparent 60%),
    linear-gradient(to bottom, rgba(255, 255, 255, .96), rgba(248, 250, 252, .98));
}

/* Dark mode header band stays richer and deeper */
html[data-theme="dark"] header.bdo-header[data-header] {
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(124, 58, 237, .35), transparent 60%),
    radial-gradient(1000px 380px at 90% -10%, rgba(6, 182, 212, .35), transparent 60%),
    linear-gradient(to bottom, rgba(15, 23, 42, .96), rgba(15, 23, 42, .9));
  border-bottom-color: rgba(30, 64, 175, .7);
}


/* Header-only dots + orbs so they sit nicely behind everything */
header.bdo-header[data-header] .pattern-dots {
  inset: -20%;
  opacity: .18;
  color: #64748b;
  z-index: -1;
}

html[data-theme="dark"] header.bdo-header[data-header] .pattern-dots {
  opacity: .26;
  color: #020617;
}

header.bdo-header[data-header] .orb {
  width: 260px;
  height: 260px;
  filter: blur(32px);
  opacity: .42;
  z-index: -1;
}

header.bdo-header[data-header] .orb.teal {
  left: -4%;
  top: -80px;
  background: radial-gradient(circle at 40% 40%, #22d3ee, transparent 65%);
}

header.bdo-header[data-header] .orb.vio {
  right: 35%;
  top: -130px;
  background: radial-gradient(circle at 50% 50%, #8b5cf6, transparent 62%);
}

header.bdo-header[data-header] .orb.pink {
  right: -6%;
  top: -60px;
  background: radial-gradient(circle at 60% 60%, #fb7185, transparent 65%);
}

/* Nav link colours – lighter text + subtle hover */
header.bdo-header[data-header] .bdo-nav .bdo-a {
  color: rgba(15, 23, 42, .9);
}

html[data-theme="dark"] header.bdo-header[data-header] .bdo-nav .bdo-a {
  color: rgba(226, 232, 240, .9);
}

header.bdo-header[data-header] .bdo-link:hover {
  background: rgba(15, 23, 42, .06);
}

html[data-theme="dark"] header.bdo-header[data-header] .bdo-link:hover {
  background: rgba(15, 23, 42, .5);
}

/* Active menu item = full gradient pill (like design 1) */
header.bdo-header[data-header] .bdo-active {
  background-image: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  color: #f9fafb;
  box-shadow: 0 10px 26px rgba(37, 99, 235, .32);
}

header.bdo-header[data-header] .bdo-active::after {
  opacity: 0;
  transform: none;
}

/* =====================================================
   Trending – "step" cards like the reference image
   ===================================================== */

.bdo-sec-trending-neo .neo-list.neo-steps-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem;
}

/* Base card ------------------------------------------------ */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item {
  --step-accent: #0ea5e9;
  position: relative;
  border-radius: 22px;
  border: none;
  background: #ffffff;
  padding: 20px 18px 38px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transition:
    transform .18s var(--ease-out, cubic-bezier(0, 0, .2, 1)),
    box-shadow .18s var(--ease-out, cubic-bezier(0, 0, .2, 1));
}

/* Colour cycles 01/02/03/04 */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item:nth-child(4n+1) {
  --step-accent: #0ea5e9;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item:nth-child(4n+2) {
  --step-accent: #2563eb;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item:nth-child(4n+3) {
  --step-accent: #7c3aed;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item:nth-child(4n+4) {
  --step-accent: #a855f7;
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item {
  background: #020617;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.7);
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.18);
}

/* Top coloured band like the image ------------------------ */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 45px;
  background: #ef4444;
  border-radius: 0 0 30px 0;
}

/* Bottom rounded bar */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 44%;
  max-width: 120px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
  opacity: .95;
}

/* Link layout becomes vertical card ----------------------- */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  padding: 0;
  text-decoration: none;
}

/* Number + STEP text inside the coloured band ------------- */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  margin-left: 18px;
  color: #f9fafb;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank-pill {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank-pill::after {
  content: " Step";
  display: block;
  margin-top: 3px;
  font-size: .7rem;
  letter-spacing: .12em;
}

/* Small circular image icon at top-right ------------------ */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-media {
  position: static;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-thumb {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 65px;
  height: 65px;
  border-radius: 999px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  border: 2px solid #ffffff;
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-list.neo-steps-list .neo-thumb {
  background: #020617;
  border-color: rgba(15, 23, 42, 0.9);
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: none;
}

/* Centered text like “OPTIONS 01” ------------------------- */

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-body {
  margin-top: 70px;
  /* pushes text below band/icons */
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-h {
  margin: 0;
  font-size: .96rem;
  line-height: 1.4;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(64 64 66);
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-list.neo-steps-list .neo-h {
  color: #e5e7eb;
}

.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-meta {
  margin-top: .35rem;
  font-size: .78rem;
  color: #6b7280;
}

[data-theme="dark"] .bdo-sec-trending-neo .neo-list.neo-steps-list .neo-meta {
  color: #9ca3af;
}

/* Responsive tweaks --------------------------------------- */

@media (max-width: 640px) {
  .bdo-sec-trending-neo .neo-list.neo-steps-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 480px) {
  .bdo-sec-trending-neo .neo-list.neo-steps-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   TRENDING STEP CARDS – refined top badge (01 STEP area)
   ========================================================= */

/* 01 STEP text sitting inside the coloured area */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank {
  position: absolute;
  top: 10px;
  left: 7px;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #ffffff;
  text-transform: uppercase;
}

/* number – no dark circle now */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank-pill {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* "STEP" label to the right of the number */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-rank-pill::after {
  content: "";
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  margin-left: 6px;
}

/* push content a little lower so it doesn't collide with the blob */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-body {
  margin-top: 96px;
  /* was ~70px before */
}

/* ===========================================
   Trending – remove "blurry" / foggy feel
   =========================================== */

/* Tone down the soft gradient overlay just for Trending */
.bdo-sec-trending-neo::before {
  opacity: 0.35;
  /* was ~0.85–0.95, much lighter now */
  background:
    radial-gradient(720px 360px at 0% -10%, rgba(129, 140, 248, 0.14), transparent 65%),
    radial-gradient(640px 340px at 100% -20%, rgba(236, 72, 153, 0.10), transparent 70%);
}

/* Dark mode version – also lighter so content stays crisp */
[data-theme="dark"] .bdo-sec-trending-neo::before {
  opacity: 0.35;
  background:
    radial-gradient(720px 360px at 0% -10%, rgba(55, 65, 194, 0.35), transparent 65%),
    radial-gradient(640px 340px at 100% -20%, rgba(244, 63, 94, 0.25), transparent 70%);
}

/* Extra safety: make sure the section itself isn't blurring things */
.bdo-sec-trending-neo {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Compact, clean creator card in Trending sidebar */
.bdo-sec-trending-neo .neo-side .neo-submit {
  background: radial-gradient(circle at top left, #4c4949 0, #414141 40%, #020617 100%);
  color: #e5e7eb;
  border-radius: 0.9rem;
  border: 1px solid rgb(124 124 124 / 50%);
  padding: 0.9rem 1rem;
  /* small padding → low height */
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  /* tight vertical spacing */
}

/* Eyebrow */
.bdo-sec-trending-neo .neo-side .neo-submit .sec-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin: 0;
}

/* Title */
.bdo-sec-trending-neo .neo-side .neo-submit .neo-submit-title {
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
  color: #f9fafb;
}

/* Short body copy */
.bdo-sec-trending-neo .neo-side .neo-submit .neo-submit-text {
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
  color: #e5e7eb;
}

/* Button – compact but clear */
.bdo-sec-trending-neo .neo-side .neo-submit .btn-sm {
  margin-top: 0.25rem;
  border-radius: 999px;
  font-size: 0.82rem;
  padding-block: 0.35rem;
  align-self: flex-start;
  /* button hugs content, not full-width */
}

/* 3-line clamp for trending titles */
.bdo-sec-trending-neo .neo-h-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* optional: keeps a nicer cut */
  word-break: break-word;
}

/* "Continue reading" pseudo-button */
.bdo-sec-trending-neo .neo-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.03);
}

.bdo-sec-trending-neo .neo-link:hover .neo-readmore {
  background: rgba(15, 23, 42, 0.08);
}

/* Compact, clean creator card in Trending sidebar */
.bdo-sec-trending-neo .neo-side .neo-submit {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(240, 71, 73, 0.23), transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.18), transparent 55%),
    #020617;
  color: #e5e7eb;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.55);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  backdrop-filter: blur(10px);
}

/* subtle glow on hover */
.bdo-sec-trending-neo .neo-side .neo-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(240, 71, 73, 0.45), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.bdo-sec-trending-neo .neo-side .neo-submit:hover::before {
  opacity: 1;
}

.bdo-sec-trending-neo .neo-side .neo-submit .sec-eyebrow {
  margin-bottom: 0.05rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f04749;
  opacity: 0.95;
}

.bdo-sec-trending-neo .neo-side .neo-submit .neo-submit-title {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 700;
  color: #f9fafb;
}

.bdo-sec-trending-neo .neo-side .neo-submit .neo-submit-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #cbd5f5;
}

/* Button tweaks – compact, pill-shaped */
.bdo-sec-trending-neo .neo-side .neo-submit .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding-inline: 0.9rem;
  padding-block: 0.38rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.bdo-sec-trending-neo .neo-side .neo-submit .btn-primary {
  background: linear-gradient(135deg, #f97316, #f04749);
  border: 0;
  box-shadow: 0 10px 25px rgba(248, 113, 22, 0.45);
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    filter 0.15s ease-out;
}

.bdo-sec-trending-neo .neo-side .neo-submit .btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(248, 113, 22, 0.6);
}

/* tiniest layout niceties on smaller screens */
@media (max-width: 768px) {
  .bdo-sec-trending-neo .neo-side {
    margin-top: 1.25rem;
  }
}

/* GRID: 4 cards, 2 per line */
.infographic-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 10px;
}

/* CARD STYLE */
.item {
  position: relative;
  background-color: #ffffff;
  border-radius: 18px;
  padding: 24px 22px 22px;
  min-height: 230px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  align-items: stretch;
}

.item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
}

/* CONTENT */
.item-content {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: auto;
}

/* ICON (Bootstrap Icon inside a soft circle) */
.item-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #ffffff, #fef3c7);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.item-icon i {
  font-size: 1.6rem;
  color: #c89f3d;
}

/* GOLD TITLE */
.item-title {
  font-size: 1.1rem;
  margin: 0 0 6px;
  font-weight: 700;
  background: linear-gradient(45deg, #c89f3d, #fdd56a, #b0822e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* SEPARATOR only inside cards */
.item-content hr {
  width: 55%;
  height: 1px;
  border: 0;
  margin: 0.4rem auto 0.9rem;
  background: linear-gradient(to right,
      transparent,
      rgba(148, 163, 184, 0.9),
      transparent);
}

/* TEXT */
.item-text {
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0 4px;
  color: #4b5563;
  /* or #b87333 if you prefer copper */
}

/* COLOR CIRCLE INSIDE CARD */
.color-accent {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  z-index: 0;
  opacity: 0.95;
  filter: blur(0.4px);
}

/* Responsive tweak */
@media (max-width: 600px) {
  .infographic-container {
    grid-template-columns: 1fr;
  }
}

/* Make sure card hides overflow */
.item {
  position: relative;
  overflow: hidden;
}

/* Base circle style */
.color-accent {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.95;
  filter: blur(0.4px);
}

/* ---- Positions & colors (inside corners) ---- */
/* Row 1 – left & right */
.item:nth-child(1) .color-accent {
  /* green – bottom-left, mostly in corner */
  background: radial-gradient(circle, #bbf7d0, #22c55e);
  right: -110px;
  bottom: -110px;
}

.item:nth-child(2) .color-accent {
  background: radial-gradient(circle, #fed7aa, #fb923c);
  left: -110px;
  bottom: -110px;
}

/* Row 2 – left & right */
.item:nth-child(3) .color-accent {
  /* blue – bottom-left */
  background: radial-gradient(circle, #bfdbfe, #3b82f6);
  right: -110px;
  top: -110px;
}

.item:nth-child(4) .color-accent {
  /* red/pink – top-right */
  background: radial-gradient(circle, #fecdd3, #f97373);
  left: -110px;
  top: -110px;
}




/* === RIGHT HERO PANEL – CARD DESIGN (matches infographic style) === */

.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

/* Panel container */
.hero-panel.hero-panel--cards {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 20px 20px 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.18), transparent 55%),
    linear-gradient(135deg, #ffffff, #f9fafb);
}

/* Panel header */
.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hero-panel-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--hero-text-muted);
}

.hero-panel-logo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hero-accent);
}

/* Grid for 4 cards (2 x 2) */
.hero-feature-grid.hero-feature-grid--cards {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
  gap: 14px;
}

/* Base card style */
.hero-panel .hero-feature-card {
  position: relative;
  padding: 16px 15px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  min-height: 130px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hero-panel .hero-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.22);
  border-color: rgba(234, 179, 8, 0.85);
}

/* Circle icon */
.hero-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #ffffff, #fef3c7);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  flex-shrink: 0;
}

.hero-feature-icon i {
  font-size: 1.5rem;
  color: #c89f3d;
}

/* Color blobs (behind content) */
.hero-panel .hero-feature-card::before,
.hero-panel .hero-feature-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  filter: blur(0.4px);
  opacity: 0.96;
  z-index: 0;
}

/* Card 1: bottom-right blue */
.hero-panel .hero-feature-card:nth-child(1)::after {
  background: radial-gradient(circle at 70% 80%, #e0f2fe, #3b82f6);
  bottom: -100px;
  right: -100px;
}

/* Card 2: bottom-left orange */
.hero-panel .hero-feature-card:nth-child(2)::after {
  background: radial-gradient(circle at 70% 80%, #ffedd5, #f97316);
  bottom: -100px;
  left: -100px;
}

/* Card 3: top-right pink */
.hero-panel .hero-feature-card:nth-child(3)::before {
  background: radial-gradient(circle at 30% 30%, #fecdd3, #f97373);
  top: -100px;
  right: -100px;
}

/* Card 4: top-left orange */
.hero-panel .hero-feature-card:nth-child(4)::after {
  background: radial-gradient(circle at 70% 80%, #ffedd5, #f97316);
  top: -100px;
  left: -100px;
}

/* Text styles inside cards */
.hero-panel .hero-feature-card .hero-feature-tag,
.hero-panel .hero-feature-card .hero-feature-title,
.hero-panel .hero-feature-card .hero-feature-meta,
.hero-panel .hero-feature-card .hero-feature-pill {
  position: relative;
  z-index: 1;
  /* above blobs */
}

.hero-feature-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
  color: rgba(15, 23, 42, 0.7);
}

.hero-feature-title {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--hero-text-main);
}

.hero-feature-meta {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--hero-text-muted);
  margin-bottom: 10px;
}

/* Pill at bottom of each card */
.hero-feature-pill {
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--hero-accent-soft);
  color: var(--hero-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-feature-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* --- Card 4: same text alignment, icon on the right --- */
.hero-feature-card--icon-right .hero-feature-icon {
  margin-left: auto;
  /* pushes icon to the right */
}

/* Panel footer */
.hero-panel-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hero-text-muted);
}

.hero-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hero-accent);
}

/* Responsive tweak */
@media (max-width: 900px) {
  .hero-visual {
    justify-content: center;
    margin-top: 28px;
  }

  .hero-feature-grid.hero-feature-grid--cards {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* ================= LEFT HERO REDESIGN ================= */

.hero-content {
  padding: 32px 0 40px;
}

/* Kicker (top small line) */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-kicker-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(120deg, #22c55e, #14b8a6);
  color: #f9fafb;
}

.hero-kicker-text {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d1d5db;
  white-space: nowrap;
}

/* Big headline (like the sample image) */
.hero-title {
  font-size: clamp(2.6rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #111827;
  margin: 0 0 12px;
}

.hero-title .accent {
  color: #10b981;
  /* green highlight like the reference */
}

/* Lead paragraph */
.hero-content .lead {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42rem;
  color: #6b7280;
  margin: 0 0 18px;
}

/* Tag pills row */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.hero-tags li {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  color: #9ca3af;
}

/* CTA buttons */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Scope button styling to hero only */
.hero-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
}

.hero-content .btn svg {
  flex: 0 0 auto;
}

/* Primary (green) */
.hero-content .btn-primary {
  padding: 12px 24px;
  background: #10b981;
  color: #f9fafb;
  box-shadow: 0 16px 36px rgba(16, 185, 129, 0.35);
}

.hero-content .btn-primary .sub {
  display: none;
  /* keep label simple, like "Read More" */
}

.hero-content .btn-primary:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(16, 185, 129, 0.45);
}

/* Outline / secondary (simple text-style button) */
.hero-content .btn-outline {
  padding: 0;
  background: transparent;
  border: none;
  color: #111827;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

/* Social proof row */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}

.hero-social-proof strong {
  color: #111827;
}

/* Avatars (use as mini brand bubbles) */
.hero-avatars {
  display: flex;
}

.hero-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #f9fafb;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f9fafb;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
}

/* Responsive: stack nicely on smaller screens */
@media (max-width: 900px) {
  .hero-content {
    padding-top: 16px;
  }
}


/* --- Keep Register + Login on the same line --- */
.hero-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
}

/* Make sure neither button grows full-width */
.hero-content .btn-primary,
.hero-content .btn-outline {
  display: inline-flex;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Optional: keep Login looking like a simple text link */
.hero-content .btn-outline {
  padding: 0;
}

/* ============ TOP KICKER STRIP ============ */

.hero-kicker {
  /* make it only as wide as its content */
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 4px 12px 4px 4px;
  margin-bottom: 18px;

  border-radius: 999px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* small green “NEW” pill */
.hero-kicker-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(120deg, #22c55e, #14b8a6);
  color: #f9fafb;
}

/* grey text to the right */
.hero-kicker-text {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cbd5f5;
  white-space: nowrap;
}

/* ============ TAG CHIPS ROW ============ */

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;

  /* remove big grey band look */
  padding: 0;
  margin: 16px 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hero-tags li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: rgba(15, 23, 42, 0.6);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

/* Green variant of trending cards */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item.neo-item-green::before,
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item.neo-item-green::after {
  background: #4a9974;
  /* #198754 */
}


/* Green title */
.bdo-sec-trending-neo .neo-title-green {
  color: #07162b;
  /* or your green token */
}

/* Today posts: Swiper container */
.bdo-sec-trending-neo .today-swiper {
  width: 100%;
  position: relative;
  padding: 8px 0 32px;
}

/* Slides: keep cards but make them a bit shorter */
.bdo-sec-trending-neo .today-swiper .swiper-slide {
  height: auto;
}

.bdo-sec-trending-neo .today-swiper .neo-item {
  height: 100%;
  padding: 16px 16px 24px;
}

.bdo-sec-trending-neo .today-swiper .neo-body {
  margin-top: 72px;
  /* smaller than original so card height is reduced */
}

/* Green bands (top date + bottom bar) for neo-item-green */
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item.neo-item-green::before,
.bdo-sec-trending-neo .neo-list.neo-steps-list .neo-item.neo-item-green::after {
  background: #22c55e;
}

/* Swiper arrows */
.bdo-sec-trending-neo .today-swiper .swiper-button-prev,
.bdo-sec-trending-neo .today-swiper .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
  color: #111827;
}

.bdo-sec-trending-neo .today-swiper .swiper-button-prev::after,
.bdo-sec-trending-neo .today-swiper .swiper-button-next::after {
  font-size: 16px;
}

/* Swiper bullets (dots) */
.bdo-sec-trending-neo .today-swiper .swiper-pagination {
  bottom: 0;
}

.bdo-sec-trending-neo .today-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #0f172a;
  opacity: 0.35;
}

.bdo-sec-trending-neo .today-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

/* Responsive: how many cards visible */
@media (max-width: 639.98px) {
  .bdo-sec-trending-neo .today-swiper .swiper-wrapper {
    padding-bottom: 8px;
  }
}



/* HERO SWIPER – container */
.hero-swiper {
  width: 100%;
  max-width: 1100px;
  /* center width, adjust as needed */
  margin: 0 auto 2.5rem;
  position: relative;
}

/* each slide must stretch to same height */
.hero-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* inner banner box */
.hero-slide-inner {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: center;
  padding: 40px 60px;
  box-sizing: border-box;
}

/* orange diagonal block on the right */
.hero-slide-inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  width: 55%;
  height: 100%;
  background: #ffb647;
  transform: skewX(-15deg);
}

/* left content zone */
.hero-slide-left {
  position: relative;
  z-index: 1;
  width: 50%;
}

.hero-logo {
  font-size: 24px;
  font-weight: 700;
  color: #14213d;
  margin-bottom: 12px;
}

.hero-logo span {
  color: #2563eb;
}

.hero-tagline {
  font-family: "Playfair Display", serif;
  font-size: 28px;
  margin: 0;
  color: #4b5563;
}

.hero-title {
  font-size: 46px;
  line-height: 1;
  margin: 6px 0 24px;
  color: #ef233c;
  font-weight: 700;
}

.hero-btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7a30, #ff3b3f);
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.35);
}

/* right image zone */
.hero-slide-right {
  position: relative;
  z-index: 1;
  width: 50%;
  text-align: center;
}

.hero-slide-right img {
  max-height: 340px;
  width: auto;
  object-fit: contain;
}

/* optional alt color themes */
.hero-slide-theme-2::after {
  background: #facc15;
}

.hero-slide-theme-3::after {
  background: #fb7185;
}

/* arrows like screenshot */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.25);
  color: #4b5563;
}

.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
  font-size: 18px;
}

/* dots at bottom */
.hero-swiper .swiper-pagination {
  bottom: 10px;
}

.hero-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d1d5db;
  opacity: 1;
  margin: 0 4px !important;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: #111827;
}

/* responsive tweaks */
@media (max-width: 768px) {
  .hero-slide-inner {
    padding: 28px 20px 40px;
    min-height: 280px;
  }

  .hero-slide-inner::after {
    right: -120px;
    width: 70%;
  }

  .hero-slide-left,
  .hero-slide-right {
    width: 100%;
  }

  .hero-slide-inner {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-tagline {
    font-size: 22px;
  }
}


/* Green heading text */
.bdo-sec-trending-neo .neo-title-green {
  color: #07162b;
}

/* HERO SWIPER – container */
.bdo-sec-trending-neo .hero-swiper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 2rem;
  position: relative;
}

/* slide layout */
.bdo-sec-trending-neo .hero-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* inner hero banner */
.bdo-sec-trending-neo .hero-slide-inner {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 40px 60px;
  box-sizing: border-box;
}

/* diagonal color block (right side) */
.bdo-sec-trending-neo .hero-slide-inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  width: 55%;
  height: 100%;
  /* green theme */
  transform: skewX(-15deg);
}

/* LEFT content */
.bdo-sec-trending-neo .hero-slide-left {
  position: relative;
  z-index: 1;
  width: 50%;
}

.bdo-sec-trending-neo .hero-date {
  display: inline-block;
  background: #22c55e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
}

.bdo-sec-trending-neo .hero-tagline {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin: 0 0 6px;
  color: #6b7280;
}

.bdo-sec-trending-neo .hero-title {
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: #111827;
  font-weight: 700;
}

.bdo-sec-trending-neo .hero-meta {
  margin: 0 0 22px;
  font-size: 14px;
  color: #6b7280;
}

.bdo-sec-trending-neo .hero-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.35);
}

/* RIGHT image zone */
.bdo-sec-trending-neo .hero-slide-right {
  position: relative;
  z-index: 1;
  width: 50%;
  text-align: center;
}

.bdo-sec-trending-neo .hero-slide-right img {
  max-height: 340px;
  width: auto;
  object-fit: contain;
}

/* Swiper arrows */
.bdo-sec-trending-neo .hero-swiper .swiper-button-prev,
.bdo-sec-trending-neo .hero-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.25);
  color: #4b5563;
}

.bdo-sec-trending-neo .hero-swiper .swiper-button-prev::after,
.bdo-sec-trending-neo .hero-swiper .swiper-button-next::after {
  font-size: 18px;
}

/* dots */
.bdo-sec-trending-neo .hero-swiper .swiper-pagination {
  bottom: 10px;
}

.bdo-sec-trending-neo .hero-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d1d5db;
  opacity: 1;
  margin: 0 4px !important;
}

.bdo-sec-trending-neo .hero-swiper .swiper-pagination-bullet-active {
  background: #111827;
}

/* Readers card spacing */
.bdo-sec-trending-neo .today-reader-card {
  margin-top: 1.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .bdo-sec-trending-neo .hero-slide-inner {
    padding: 28px 20px 36px;
    min-height: 280px;
    flex-direction: column-reverse;
    text-align: center;
  }

  .bdo-sec-trending-neo .hero-slide-inner::after {
    right: -120px;
    width: 70%;
  }

  .bdo-sec-trending-neo .hero-slide-left,
  .bdo-sec-trending-neo .hero-slide-right {
    width: 100%;
  }

  .bdo-sec-trending-neo .hero-title {
    font-size: 26px;
  }
}


/* Put hero slider + For Readers into 2-column layout */
.bdo-sec-trending-neo .today-hero-grid {
  align-items: stretch;
}

/* hero swiper should fill the left column (no center max-width) */
.bdo-sec-trending-neo .today-hero-grid .hero-swiper {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}

/* make the internal card stretch nicely */
.bdo-sec-trending-neo .today-hero-grid .hero-slide-inner {
  height: 100%;
}

/* For Readers card matches column height & centers content */
.bdo-sec-trending-neo .today-readers-aside .bdo-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Today hero slider: make it shorter & remove grey strip === */

/* slider container: no extra bottom gap / background */
.bdo-sec-trending-neo .hero-swiper {
  margin-bottom: 0;
  /* remove extra space under bullets */
  padding-bottom: 0;
  background: transparent;
}

/* section itself: slightly tighter bottom padding */
.bdo-sec-trending-neo {
  padding-bottom: 2rem;
  /* adjust as you like */
}

/* smaller hero card */
.bdo-sec-trending-neo .hero-slide-inner {
  min-height: 140px !important;
  /* was 320px */
  padding: 24px 40px;
  /* less padding = less height */
}

/* shrink image so right side isn’t too tall */
.bdo-sec-trending-neo .hero-slide-right img {
  max-height: 120px !important;
  /* was ~340px */
}

/* keep bullets closer to the card bottom (not hanging below) */
.bdo-sec-trending-neo .hero-swiper .swiper-pagination {
  bottom: 12px;
}

/* === Today hero slider: same height as neo-item card === */

/* shrink the hero card itself */
.bdo-sec-trending-neo .hero-slide-inner {
  min-height: 0;
  /* let content define height */
  padding: 20px 24px;
  /* similar to .neo-item padding */
}

/* shrink the image area so overall card height drops */
.bdo-sec-trending-neo .hero-slide-right img {
  max-height: 160px;
  /* tweak: 140–170 until it matches exactly */
}

/* keep the slider tight under the card */
.bdo-sec-trending-neo .hero-swiper {
  margin-bottom: 4px;
  /* almost no gap under bullets */
  padding-bottom: 0;
}

/* pagination hugs the bottom of the hero card */
.bdo-sec-trending-neo .hero-swiper .swiper-pagination {
  bottom: 6px;
}

/* section bottom padding so no big grey band */
.bdo-sec-trending-neo {
  padding-bottom: 1.5rem;
}


/* Today section hero swiper – fixed max height */
.today-swiper {
  max-height: 160px !important;
  overflow: hidden;
}

/* Make slides respect that height */
.today-swiper .swiper-wrapper,
.today-swiper .swiper-slide,
.today-swiper .hero-slide-inner {
  height: 100%;
}

/* Keep image inside the 160px box */
.today-swiper .hero-slide-right img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

@media (min-width: 768px) {
  .today-swiper {
    max-height: 160px !important;
  }
}

/* Today section only – limit hero slider height */
#trending .today-swiper {
  max-height: 160px !important;
  overflow: hidden;
}

/* Make the internals respect that height */
#trending .today-swiper .swiper-wrapper,
#trending .today-swiper .swiper-slide,
#trending .today-swiper .hero-slide-inner {
  height: 100%;
}

/* Override the 320px min-height inside this section only */
#trending .today-swiper .hero-slide-inner {
  min-height: 0;
}

/* Keep the image inside the 160px box */
#trending .today-swiper .hero-slide-right img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* TODAY SECTION – layout just for this block */
#trending .today-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: stretch;
}

/* Keep it stacked on small screens */
@media (max-width: 768px) {
  #trending .today-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* Today hero – compact slider */
#trending .today-swiper {
  max-height: 160px !important;
  /* matches your inline style */
  overflow: hidden;
  border-radius: 12px;
}

/* Let inner card fit inside 160px and look like a slim hero */
#trending .today-swiper .hero-slide-inner {
  min-height: 0;
  height: 100%;
  padding: 14px 60px;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
  border-radius: 12px;
}

/* Smaller, tighter text just for this Today variant */
#trending .today-swiper .hero-date {
  font-size: 11px;
  padding: 3px 8px;
  margin-bottom: 6px;
}

#trending .today-swiper .hero-tagline {
  font-size: 13px;
  margin: 0 0 4px;
  color: #4b5563;
}

#trending .today-swiper .hero-title {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 6px;
}

#trending .today-swiper .hero-meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
}

#trending .today-swiper .hero-btn {
  padding: 6px 16px;
  font-size: 13px;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.28);
}

/* Make right image neatly fill the small hero */
#trending .today-swiper .hero-slide-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* ================= TODAY HERO – UNIFORM SLIDE HEIGHT ================ */

/* Fix the slider itself to a card-like height */
#trending .today-swiper {
  /* fixed height */
  /* matches your inline style */
  overflow: hidden;
}

/* Make Swiper use that height for all slides */
#trending .today-swiper .swiper-wrapper {
  height: 100%;
}

#trending .today-swiper .swiper-slide {
  height: 100%;
  display: flex;
  /* keep centering but fill */
  align-items: stretch;
}

/* Inner hero card should fill the whole 160px,
   not the old 320px / 140px heights */
#trending .today-swiper .hero-slide-inner {
  height: 100%;
  min-height: 0 !important;
  /* override previous min-height */
  padding: 16px 60px;
  /* a bit tighter for small height */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Left & right columns should stretch to full height */
#trending .today-swiper .hero-slide-left,
#trending .today-swiper .hero-slide-right {
  height: 100%;
}

/* Image fills the right side neatly on every slide */
#trending .today-swiper .hero-slide-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* or 12px if you want rounded inside */
}

.hero-title {
  /* keep your existing typography here (font-size, weight, margin, etc.) */
  margin: 0 0 0.5rem;
}

.hero-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* max 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  /* shows "..." when clipped (WebKit) */
}

.category-wise-posts2 {
  padding: 60px 0;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.category-wise-posts2-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Each category column (Tech / Entertainment) */
.category-wise-posts2-column {
  border-radius: 28px;
  padding: 22px 22px 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 242, 250, 0.98));
  box-shadow: 0 18px 45px rgba(8, 20, 38, 0.22);
  position: relative;
  overflow: hidden;
}

/* soft inner highlight */
.category-wise-posts2-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 60%);
  pointer-events: none;
}

/* Column header (category info) */
.category-wise-posts2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.category-wise-posts2-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.category-wise-posts2-badge {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #ffffff, #f3f5ff);
  box-shadow: 0 10px 24px rgba(8, 20, 38, 0.25);
}

.category-wise-posts2-badge span {
  font-size: 24px;
}

.category-wise-posts2-title-text h2 {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: #3a4250;
}

.category-wise-posts2-title-text p {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a90a4;
}

/* optional "View all" button in header */
.category-wise-posts2-header-link a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 151, 181, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: #4b5264;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
}

.category-wise-posts2-header-link a:hover {
  background: #4b5264;
  color: #ffffff;
}

/* List of items */
.category-wise-posts2-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}

/* Single item (post / category) */
.category-wise-posts2-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 18px;
  background: rgba(248, 249, 255, 0.9);
  border: 1px solid rgba(220, 225, 240, 0.9);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.category-wise-posts2-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(8, 20, 38, 0.26);
  background: #ffffff;
  border-color: rgba(188, 197, 230, 0.95);
}

/* Thumbnail */
.category-wise-posts2-thumb {
  width: 100%;
  padding-top: 70%;
  /* 7:10 aspect ratio */
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.category-wise-posts2-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 12, 28, 0.35), transparent 55%);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.category-wise-posts2-item:hover .category-wise-posts2-thumb::after {
  opacity: 0.45;
}

/* Item text */
.category-wise-posts2-item-body h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #33394a;
  margin-bottom: 4px;
}

.category-wise-posts2-item-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a90a4;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-wise-posts2-item-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.category-wise-posts2-item-excerpt {
  font-size: 11px;
  line-height: 1.6;
  color: #747a8c;
  max-height: 3.2em;
  /* about 2 lines */
  overflow: hidden;
}

/* Column subtle colored accent per category */
.category-wise-posts2-column-tech {
  border-top: 4px solid #00b7ff;
}

.category-wise-posts2-column-entertainment {
  border-top: 4px solid #ff4887;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .category-wise-posts2-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .category-wise-posts2-column {
    padding: 18px 16px 22px;
  }

  .category-wise-posts2-item {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 8px 8px;
  }
}

/* === 3-column grid for Tech / Health / Money === */

.category-wise-posts2-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 1100px) {
  .category-wise-posts2-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .category-wise-posts2-inner {
    grid-template-columns: 1fr;
  }
}

/* Column accent styles */
.category-wise-posts2-column-tech {
  border-top: 4px solid rgba(0, 183, 255, 0.9);
  box-shadow:
    0 22px 55px rgba(2, 102, 168, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.category-wise-posts2-column-health {
  border-top: 4px solid rgba(46, 204, 113, 0.95);
  box-shadow:
    0 22px 55px rgba(19, 116, 74, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

.category-wise-posts2-column-money {
  border-top: 4px solid rgba(241, 196, 15, 0.95);
  box-shadow:
    0 22px 55px rgba(155, 119, 7, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* Gradient underline color per category on hover */
.category-wise-posts2-column-tech .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, #00b7ff, #4ce3ff);
}

.category-wise-posts2-column-health .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, #2ecc71, #00e5a0);
}

.category-wise-posts2-column-money .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, #f1c40f, #f39c12);
}


/* ======================================
   Broadway Originals brand accents
   for Tech (5), Health (8), Money (7)
   ====================================== */

/* --- Shared small tweak --- */
.category-wise-posts2-badge span {
  font-size: 22px;
}

/* ========== TECH (category 5) ========== */
.category-wise-posts2-column-tech {
  border-top: 4px solid var(--bdo-teal-500);
  box-shadow:
    0 22px 55px rgba(13, 148, 136, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

.category-wise-posts2-column-tech .category-wise-posts2-badge {
  background: linear-gradient(135deg, var(--bdo-teal-500));
}

.category-wise-posts2-column-tech .category-wise-posts2-header-link a {
  border-color: rgba(20, 184, 166, 0.55);
}

.category-wise-posts2-column-tech .category-wise-posts2-header-link a:hover {
  background: linear-gradient(135deg, var(--bdo-teal-500), var(--bdo-blue-500));
  color: #fff;
}

.category-wise-posts2-column-tech .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, var(--bdo-teal-500), var(--bdo-blue-500));
}

/* ========== HEALTH (category 8) ========== */
.category-wise-posts2-column-health {
  border-top: 4px solid #22c55e;
  /* green */
  box-shadow:
    0 22px 55px rgba(21, 128, 61, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

.category-wise-posts2-column-health .category-wise-posts2-badge {
  background: linear-gradient(135deg, #22c55e, var(--bdo-teal-500));
}

.category-wise-posts2-column-health .category-wise-posts2-header-link a {
  border-color: rgba(34, 197, 94, 0.55);
}

.category-wise-posts2-column-health .category-wise-posts2-header-link a:hover {
  background: linear-gradient(135deg, #22c55e, var(--bdo-teal-500));
  color: #fff;
}

.category-wise-posts2-column-health .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, #22c55e, var(--bdo-teal-500));
}

/* ========== MONEY (category 7) ========== */
.category-wise-posts2-column-money {
  border-top: 4px solid;
  box-shadow:
    0 22px 55px rgba(217, 119, 6, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

.category-wise-posts2-column-money .category-wise-posts2-badge {
  background: linear-gradient(135deg, #0ea5e9);
}

.category-wise-posts2-column-money .category-wise-posts2-header-link a {
  border-color: rgba(245, 158, 11, 0.55);
}

.category-wise-posts2-column-money .category-wise-posts2-header-link a:hover {
  background: linear-gradient(135deg, var(--bdo-amber-500), #f97316);
  color: #fff;
}

.category-wise-posts2-column-money .category-wise-posts2-item:hover .category-wise-posts2-item-body h3::after {
  background: linear-gradient(90deg, var(--bdo-amber-500), #f97316);
}

/* Make category badge icons white */
.category-wise-posts2-badge span,
.category-wise-posts2-badge i,
.category-wise-posts2-badge svg {
  color: #fff !important;
  fill: #fff !important;
}

/* =========================
   City Guides – enhanced UI
   ========================= */

/* Section wrapper */
.bdo-sec-cityguides {
  position: relative;
  padding-block: 2.75rem;
}

/* Softer glassy backdrop for this section only */
.bdo-sec-cityguides::before {
  border-radius: 32px;
}

/* Eyebrow */
.bdo-sec-cityguides .cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  padding: .34rem .7rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .72rem;
  color: #0f172a;
  background: linear-gradient(135deg, #e0f2fe, #fce7f3);
  border: 1px solid rgba(96, 165, 250, .35);
}

.bdo-sec-cityguides .cg-eyebrow i {
  font-size: .95rem;
}

/* Title + subtitle */
.bdo-sec-cityguides .cg-title {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bdo-sec-cityguides .cg-title span:last-child {
  background: linear-gradient(120deg, var(--bdo-teal-500), var(--bdo-blue-500));
  -webkit-background-clip: text;
}

.bdo-sec-cityguides .cg-title .ico {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 0%, #e0f2fe, #dbeafe);
  color: var(--bdo-blue-500);
}

.bdo-sec-cityguides .cg-sub {
  margin-top: .2rem;
  margin-bottom: 1.05rem;
  font-size: .92rem;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* “View all cities” CTA */
.bdo-sec-cityguides .neo-cta {
  align-self: flex-end;
  padding-inline: 1.1rem;
  padding-block: .55rem;
  border-radius: 9999px;
  font-size: .82rem;
}

/* Filter chips */
.bdo-sec-cityguides .cg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}

.bdo-sec-cityguides .cg-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4f46e5;
  border: 1px solid color-mix(in srgb, #6366f1 35%, transparent);
  background: rgba(248, 250, 252, .7);
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease,
    border-color .18s ease;
}

.bdo-sec-cityguides .cg-chip i {
  font-size: .9rem;
}

.bdo-sec-cityguides .cg-chip:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}

.bdo-sec-cityguides .cg-chip.is-active {
  background: linear-gradient(135deg, var(--bdo-teal-500), var(--bdo-blue-500));
}

/* Rail container */
.bdo-sec-cityguides .cg-rail {
  margin-top: 1.4rem;
  border-radius: 24px;
  padding: 16px 14px;
  border: 1px solid rgba(148, 163, 184, .5);
  background:
    radial-gradient(circle at top left, rgba(248, 250, 252, .9), transparent 55%),
    radial-gradient(circle at bottom right, rgba(191, 219, 254, .7), transparent 60%),
    rgba(15, 23, 42, 0.96);
}

/* Edge masks */
.bdo-sec-cityguides .cg-rail .mask-l {
  background: linear-gradient(90deg, rgba(15, 23, 42, 1) 0%, transparent 100%);
}

.bdo-sec-cityguides .cg-rail .mask-r {
  background: linear-gradient(270deg, rgba(15, 23, 42, 1) 0%, transparent 100%);
}

/* Nav buttons */
.bdo-sec-cityguides .cg-rail-nav button {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(129, 140, 248, .55);
  background: radial-gradient(circle at 30% 0%, #e0f2fe, #e0e7ff);
  color: #4f46e5;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .45);
}

.bdo-sec-cityguides .cg-rail-nav button:hover {
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff;
}

/* City card */
.bdo-sec-cityguides .cg-rail-card {
  width: 190px;
  border-radius: 22px;
  padding: 10px 10px 12px;
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(51, 65, 85, .95);
  box-shadow: 0 16px 30px rgba(15, 23, 42, .7);
  text-decoration: none;
  color: #e5e7eb;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease,
    background .2s ease;
}

@media (max-width: 480px) {
  .bdo-sec-cityguides .cg-rail-card {
    width: 150px;
  }
}

/* City image */
.bdo-sec-cityguides .cg-rail-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  display: block;
  position: relative;
}

.bdo-sec-cityguides .cg-rail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .25s ease;
}

/* Overlay on image */
.bdo-sec-cityguides .cg-rail-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .45), transparent 55%);
  opacity: .85;
  transition: opacity .22s ease;
}

/* Card text */
.bdo-sec-cityguides .cg-rail-name {
  margin-top: .55rem;
  font-weight: 800;
  font-size: .98rem;
  text-align: left;
}

.bdo-sec-cityguides .cg-rail-cta {
  font-size: .76rem;
  margin-top: .15rem;
  text-align: left;
  color: #a5b4fc;
}

/* Hover state */
.bdo-sec-cityguides .cg-rail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(15, 23, 42, .9);
  border-color: rgba(129, 140, 248, .95);
  background: radial-gradient(circle at top left, rgba(30, 64, 175, .4), transparent 60%),
    rgba(15, 23, 42, .98);
}

.bdo-sec-cityguides .cg-rail-card:hover .cg-rail-img img {
  transform: scale(1.06);
}

.bdo-sec-cityguides .cg-rail-card:hover .cg-rail-img::after {
  opacity: .65;
}

/* =========================
   City Guides – rail cards
   Rectangular upgraded look
   ========================= */

/* Make slides auto-height so cards can stretch naturally */
.bdo-sec-cityguides .swiper-slide {
  height: auto;
}

/* Card wrapper */
.bdo-sec-cityguides .cg-rail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px 10px 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 255, 0.98));
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
  text-decoration: none;
  color: #0f172a;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

/* Image container – full-bleed rectangle */
.bdo-sec-cityguides .cg-rail-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* nice rectangle */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  margin: 0;
}

/* Image itself */
.bdo-sec-cityguides .cg-rail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform 0.22s ease;
}

/* Subtle gradient overlay on the photo */
.bdo-sec-cityguides .cg-rail-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.35), transparent 55%);
  opacity: 0.75;
  transition: opacity 0.22s ease;
}

/* City name */
.bdo-sec-cityguides .cg-rail-name {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #111827;
  line-height: 1.3;
}

/* “Open guide” as a tiny pill button */
.bdo-sec-cityguides .cg-rail-cta {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563eb;
  background: rgba(219, 234, 254, 0.85);
}

.bdo-sec-cityguides .cg-rail-cta::after {
  content: "→";
  font-size: 0.8rem;
}

/* Hover states */
.bdo-sec-cityguides .cg-rail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.25);
  border-color: rgba(129, 140, 248, 0.95);
  background: linear-gradient(145deg, #ffffff, #eef2ff);
}

.bdo-sec-cityguides .cg-rail-card:hover .cg-rail-img img {
  transform: scale(1.08);
}

.bdo-sec-cityguides .cg-rail-card:hover .cg-rail-img::after {
  opacity: 0.55;
}

.bdo-sec-cityguides .cg-rail-card:hover .cg-rail-cta {
  color: #ffffff;
  background: linear-gradient(135deg, var(--bdo-teal-500), var(--bdo-blue-500));
}

/* ===== HOME HERO – Single-column premium FULL-WIDTH layout ===== */

.bdo-home-hero-section {
  position: relative;
  padding: clamp(46px, 1vh, 112px) 0 60px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

/* let hero feel wider like the reference */
.bdo-home-hero-section>.bdo-max {
  max-width: 1240px;
}

/* soft glows in the background */
.bdo-home-hero-section::before,
.bdo-home-hero-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.7;
  pointer-events: none;
}

.bdo-home-hero-section::before {
  top: -80px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 30% 20%, rgba(244, 114, 182, 0.32), transparent 55%);
}

.bdo-home-hero-section::after {
  bottom: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.3), transparent 55%);
}

/* main inner block */

.bdo-home-hero-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.bdo-home-hero-section-content {
  text-align: center;
}

/* kicker */

.bdo-home-hero-section-kicker {
  display: inline-flex;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6366f1;
}

.bdo-home-hero-section-kicker-pill {
  padding: 0.18rem 0.8rem;
  border-radius: 999px;
  background: #eef2ff;
  font-weight: 700;
}

.bdo-home-hero-section-kicker-text {
  opacity: 0.9;
}

/* heading */

.bdo-home-hero-section-title {
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 4.5vw, 3.4rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.bdo-home-hero-section-title .accent {
  background: linear-gradient(105deg, #f97316, #ec4899, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  white-space: nowrap;
}

/* no underline bar (clean like you want) */
.bdo-home-hero-section-title .accent::after {
  content: none;
}

/* sub text */

.bdo-home-hero-section-lead {
  margin: 0 auto 2rem;
  max-width: 640px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #4b5563;
}

/* CTAs row – like screenshot (optional but recommended) */

.bdo-home-hero-section-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 2.1rem;
}

.bdo-home-hero-section-ctas .btn {
  border-radius: 999px;
  padding: 0.58rem 1.8rem;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.bdo-home-hero-section-ctas .btn-primary {
  background: linear-gradient(120deg, #4f46e5, #6366f1);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.35);
}

.bdo-home-hero-section-ctas .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(79, 70, 229, 0.42);
}

.bdo-home-hero-section-ctas .btn-outline {
  border-color: rgba(148, 163, 184, 0.9);
  color: #111827;
  background: rgba(255, 255, 255, 0.9);
}

.bdo-home-hero-section-ctas .btn-outline:hover {
  background: #ffffff;
}

/* SEARCH block – wide card like the reference */

.bdo-home-hero-section-search {
  margin: 0 auto 1.6rem;
  max-width: 960px;
  background: #ffffff;
  border-radius: 22px;
  padding: 0.4rem 0.55rem;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.16);
}

.bdo-home-hero-section-search-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: transparent;
  border-radius: 999px;
  padding: 0.35rem 0.7rem 0.35rem 1rem;
  box-shadow: none;
}

.bdo-home-hero-section-search-icon {
  font-size: 1.1rem;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bdo-home-hero-section-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.98rem;
  color: #111827;
}

.bdo-home-hero-section-search-input::placeholder {
  color: #9ca3af;
}

.bdo-home-hero-section-search-advanced {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.bdo-home-hero-section-search-advanced:hover {
  text-decoration: underline;
}

.bdo-home-hero-section-search-button {
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.8rem;
  background: #4f46e5;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 18px 45px rgba(79, 70, 229, 0.45);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.bdo-home-hero-section-search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(79, 70, 229, 0.55);
}

.bdo-home-hero-section-search-meta {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

.bdo-home-hero-section-search-meta strong {
  color: #4f46e5;
}

/* social proof */

.bdo-home-hero-section-social-proof {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.84rem;
  color: #4b5563;
}

.bdo-home-hero-section-avatars {
  display: inline-flex;
  align-items: center;
}

.bdo-home-hero-section-avatars>span,
.bdo-home-hero-section-avatars img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #f9fafb;
  background: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.26);
}

.bdo-home-hero-section-avatars>*+* {
  margin-left: -10px;
}

.bdo-home-hero-section-social-proof strong {
  font-weight: 700;
}

/* responsive tweaks */

@media (max-width: 900px) {
  .bdo-home-hero-section-inner {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .bdo-home-hero-section {
    padding-top: 80px;
    padding-bottom: 96px;
  }

  .bdo-home-hero-section-title {
    font-size: clamp(2.1rem, 7vw, 2.5rem);
  }

  .bdo-home-hero-section-search {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .bdo-home-hero-section-search-box {
    flex-wrap: wrap;
    align-items: stretch;
    padding-inline: 0.9rem;
  }

  .bdo-home-hero-section-search-input {
    min-width: 100%;
    order: 1;
  }

  .bdo-home-hero-section-search-advanced {
    order: 3;
    width: 100%;
    text-align: left;
    padding-left: 0.1rem;
    margin-top: 0.15rem;
  }

  .bdo-home-hero-section-search-button {
    order: 2;
    width: auto;
  }
}

/* dark mode tweaks */

[data-theme="dark"] .bdo-home-hero-section {
  border-bottom-color: rgba(15, 23, 42, 0.6);
}

[data-theme="dark"] .bdo-home-hero-section-title {
  color: #e5e7eb;
}

[data-theme="dark"] .bdo-home-hero-section-lead,
[data-theme="dark"] .bdo-home-hero-section-search-meta,
[data-theme="dark"] .bdo-home-hero-section-social-proof {
  color: #9ca3af;
}

[data-theme="dark"] .bdo-home-hero-section-search {
  background: rgba(15, 23, 42, 0.92);
}

/* === HOME HERO – fix overlap with stats === */

/* Only for home hero (has both classes) */
.hero-wrap.bdo-home-hero-section {
  /* more breathing space under the social-proof line */
  overflow: visible;
  /* let stat cards hang over the bottom edge */
}

/* soften the overlap so cards don't eat too much of hero area */
.hero-wrap.bdo-home-hero-section .stats-overlap {
  bottom: -60px;
  /* was -80px */
}

/* on very large screens keep it balanced */
@media (min-width: 1200px) {
  .hero-wrap.bdo-home-hero-section {
    padding-bottom: 160px;
  }
}

/* =========================================
   HOME HERO – Solutions strip above search
   Refined minimal look (no big cards)
   ========================================= */

.home-hero-bdo-solutions {
  margin: 0 auto 1.8rem;
  max-width: 1120px;
}

.home-hero-bdo-solutions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

/* Base */
.home-hero-bdo-solutions-card {
  --sol-color: #4f46e5;
  flex: 1 1 220px;
  min-width: 0;
}

/* Slim pill container – almost no “card” feel */
.home-hero-bdo-solutions-shell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.14s ease;
}

.home-hero-bdo-solutions-card:hover .home-hero-bdo-solutions-shell,
.home-hero-bdo-solutions-card:focus-within .home-hero-bdo-solutions-shell {
  background-color: color-mix(in srgb, var(--sol-color) 6%, #f9fafb);
  border-color: rgba(148, 163, 184, 0.7);
  transform: translateY(-1px);
}

/* Icon – subtle, not loud */
.home-hero-bdo-solutions-icon {
  flex: 0 0 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
  color: var(--sol-color);
  font-size: 1.1rem;
}

/* Text block */
.home-hero-bdo-solutions-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Tag as a small label above title */
.home-hero-bdo-solutions-tag {
  margin: 0 0 0.08rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--sol-color) 80%, #0f172a 20%);
  opacity: 0.9;
}

.home-hero-bdo-solutions-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-hero-bdo-solutions-text {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b7280;
}

/* Remove right endcap completely */
.home-hero-bdo-solutions-endcap {
  display: none;
}

/* Color variants */
.home-hero-bdo-solutions-card--teal {
  --sol-color: #15b79e;
}

.home-hero-bdo-solutions-card--pink {
  --sol-color: #f973b6;
}

.home-hero-bdo-solutions-card--indigo {
  --sol-color: #6366f1;
}

.home-hero-bdo-solutions-card--cyan {
  --sol-color: #22c1f1;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .home-hero-bdo-solutions-row {
    gap: 0.65rem;
  }

  .home-hero-bdo-solutions-shell {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .home-hero-bdo-solutions {
    margin-bottom: 1.4rem;
  }

  .home-hero-bdo-solutions-card {
    flex: 1 1 100%;
  }

  /* Keep it compact on mobile */
  .home-hero-bdo-solutions-text {
    display: none;
  }
}

/* ============================================
   HOME HERO – v2 layout (keep overlapping stats)
   ============================================ */

.bdo-home-hero-section-inner.hero-layout-v2 {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 2.2rem;
  align-items: stretch;
}

/* Left column – copy + search */

.hero-layout-v2 .hero-main-col {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-content: center;
}

.hero-layout-v2 .hero-main-col .bdo-home-hero-section-kicker {
  margin-bottom: 0.4rem;
}

.hero-layout-v2 .hero-main-col .bdo-home-hero-section-title {
  margin-bottom: 0.4rem;
}

.hero-layout-v2 .hero-main-col .bdo-home-hero-section-lead {
  margin-bottom: 0.9rem;
}

/* tighten search + social proof for this layout */
.hero-layout-v2 .hero-main-col .bdo-home-hero-section-search {
  margin: 0;
  max-width: 520px;
  padding: 0.4rem 0.55rem;
}

.hero-layout-v2 .hero-main-col .bdo-home-hero-section-social-proof {
  margin-top: 0.9rem;
}

/* Right column – glass panel for 4 cards */

.hero-side-panel {
  position: relative;
  align-self: center;
}

.hero-side-panel-shell {
  position: relative;
  border-radius: 24px;
  padding: 1.2rem 1.15rem 1.3rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.22), transparent 62%),
    var(--hero-surface);
  border: 1px solid var(--hero-border-subtle);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(16px);
}

.hero-side-panel-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0.7;
  pointer-events: none;
}

.hero-side-panel-header {
  margin-bottom: 0.7rem;
}

.hero-side-panel-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hero-text-muted);
  margin-bottom: 0.2rem;
}

.hero-side-panel-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--hero-text-main);
}

/* reuse existing card styles but make them 2x2 grid in the panel */

.hero-side-panel .home-hero-bdo-solutions {
  margin: 0;
  max-width: 100%;
}

.hero-side-panel .home-hero-bdo-solutions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.hero-side-panel .home-hero-bdo-solutions-card {
  flex: 0 0 auto;
  /* let grid control width */
}

.hero-side-panel .home-hero-bdo-solutions-shell {
  border-radius: 16px;
}

/* Dark mode tweaks for the panel */

[data-theme="dark"] .hero-side-panel-shell {
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.4), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.35), transparent 65%),
    var(--hero-surface);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.9);
}

/* Responsive behaviour */

@media (max-width: 1024px) {
  .bdo-home-hero-section-inner.hero-layout-v2 {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.8rem;
  }

  .hero-side-panel-shell {
    padding: 1.1rem 1rem 1.25rem;
  }
}

@media (max-width: 900px) {
  .bdo-home-hero-section-inner.hero-layout-v2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-layout-v2 .hero-main-col {
    text-align: center;
    align-items: center;
  }

  .hero-layout-v2 .hero-main-col .bdo-home-hero-section-search {
    max-width: 100%;
  }

  .hero-side-panel {
    max-width: 520px;
    margin: 0 auto;
  }

  .hero-side-panel-shell {
    margin-top: 0.4rem;
  }

  .hero-side-panel .home-hero-bdo-solutions-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .hero-side-panel-shell {
    border-radius: 20px;
  }
}

/* ===== Hero search – refreshed premium look ===== */

.bdo-home-hero-section-search {
  margin: 1.8rem 0 2rem;
  max-width: 720px;
  padding: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
}

.bdo-home-hero-section-search-box {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: transparent;
}

.bdo-home-hero-section-search-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #4f46e5;
  background: linear-gradient(135deg,
      rgba(79, 70, 229, 0.12),
      rgba(14, 165, 233, 0.08));
}

.bdo-home-hero-section-search-main {
  flex: 1;
  min-width: 0;
}

.bdo-home-hero-section-search-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 0.08rem;
}

.bdo-home-hero-section-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.25rem 0;
  color: #111827;
}

.bdo-home-hero-section-search-input::placeholder {
  color: #9ca3af;
}

.bdo-home-hero-section-search-button {
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.9rem;
  background: linear-gradient(120deg, #4f46e5, #6366f1);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 18px 45px rgba(79, 70, 229, 0.45);
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.bdo-home-hero-section-search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(79, 70, 229, 0.55);
}

.bdo-home-hero-section-search-button:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Meta line under the search */

.bdo-home-hero-section-search-meta {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.bdo-home-hero-section-search-meta strong {
  color: #4f46e5;
}

/* Responsive tweaks */

@media (max-width: 640px) {
  .bdo-home-hero-section-search {
    border-radius: 24px;
    padding: 0.55rem 0.6rem;
    margin: 1.4rem 0 1.6rem;
  }

  .bdo-home-hero-section-search-button {
    padding-inline: 1.2rem;
  }

  .bdo-home-hero-section-search-label {
    font-size: 0.64rem;
  }

  .bdo-home-hero-section-search-input {
    font-size: 0.9rem;
  }
}

/* Dark mode tweaks for search */

[data-theme="dark"] .bdo-home-hero-section-search {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .bdo-home-hero-section-search-label {
  color: #9ca3af;
}

[data-theme="dark"] .bdo-home-hero-section-search-input {
  color: #e5e7eb;
}

[data-theme="dark"] .bdo-home-hero-section-search-input::placeholder {
  color: #6b7280;
}

/* =========================
   HEADER SHELL + BACKGROUND
   ========================= */

.bdo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  isolation: isolate;
  overflow: visible;
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

/* Light mode: soft glass + subtle brand tint */
html[data-theme="light"] .bdo-header {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .12), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .12), transparent 55%),
    linear-gradient(to bottom, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
}

/* Dark mode: richer glow field behind the nav */
html[data-theme="dark"] .bdo-header {
  background:
    radial-gradient(1200px 420px at 10% -15%, rgba(124, 58, 237, .26), transparent 65%),
    radial-gradient(1000px 380px at 90% -10%, rgba(6, 182, 212, .22), transparent 60%),
    linear-gradient(to bottom, rgba(15, 23, 42, .96), rgba(15, 23, 42, .88));
  border-bottom-color: rgba(51, 65, 85, .65);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .85);
}

/* =====================================
   BACKGROUND TEXTURE: DOT GRID OVERLAY
   ===================================== */

.bdo-header .pattern-dots {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  /* two-layer dotted grid */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, .55) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, .28) 1px, transparent 0);
  background-size: 18px 18px, 36px 36px;
  background-position: 0 0, 9px 9px;
  mix-blend-mode: soft-light;
}

html[data-theme="dark"] .bdo-header .pattern-dots {
  opacity: .45;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(59, 130, 246, .55) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(8, 47, 73, .5) 1px, transparent 0);
}

/* =========================
   ORB GLOWS BEHIND THE NAV
   ========================= */

.bdo-header .orb {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 9999px;
  filter: blur(46px);
  opacity: .50;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

html[data-theme="dark"] .bdo-header .orb {
  opacity: .42;
  mix-blend-mode: lighten;
}

/* Left teal glow */
.bdo-header .orb.teal {
  left: -80px;
  top: -110px;
  background: radial-gradient(circle at 40% 40%, #22d3ee, transparent 65%);
}

/* Mid violet glow */
.bdo-header .orb.vio {
  right: 30%;
  top: -140px;
  background: radial-gradient(circle at 50% 50%, #8b5cf6, transparent 68%);
}

/* Right pink accent glow */
.bdo-header .orb.pink {
  right: -8%;
  top: -70px;
  background: radial-gradient(circle at 60% 60%, #fb7185, transparent 68%);
}

/* GRID WRAPPER */
.cg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem;
  margin-top: 1.6rem;
}

/* BASE CARD */

.cg-scard {
  --cg-accent: #3b82f6;
  --cg-bg: #111827;

  position: relative;
  overflow: hidden;
  padding: 3.1rem 1.7rem 2.1rem;
  border-radius: 1.9rem;
  border: 3px solid var(--cg-accent);
  background: var(--cg-bg);
  color: #f9fafb;
  text-align: center;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .7);
}

/* color variants (blue / pink / green like screenshot) */
.cg-scard--1 {
  --cg-accent: #3b82f6;
}

/* blue  */
.cg-scard--2 {
  --cg-accent: #ec4899;
}

/* pink  */
.cg-scard--3 {
  --cg-accent: #22c55e;
}

/* green */

/* TOP SHAPE WITH IMAGE + ICON */

.cg-scard-hero {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 140px;
  height: 140px;
  border-radius: 2.2rem 0 2.8rem 2.2rem;
  border: 3px solid var(--cg-accent);
  background:
    linear-gradient(135deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1)),
    var(--hero-img, #111827);
  background-image: inherit;
  /* overridden by inline style */
  background-size: cover;
  background-position: center;
}

/* little extension on the right to mimic the curved path */
.cg-scard-hero::after {
  content: "";
  position: absolute;
  right: -40%;
  bottom: -40%;
  width: 120%;
  height: 120%;
  border-radius: 3rem;
  border: 3px solid var(--cg-accent);
  border-top-color: transparent;
  border-right-color: transparent;
}

/* ICON INSIDE SHAPE */
.cg-scard-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--cg-accent);
  background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
}

/* BODY (TEXT / BUTTON) */

.cg-scard-body {
  position: relative;
  z-index: 1;
}

.cg-scard-title {
  margin-top: 1.3rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cg-scard-text {
  margin: 0.1rem 0 1.4rem;
  font-size: 0.86rem;
  color: rgba(226, 232, 240, .9);
}

/* BUTTON */
.cg-scard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: none;
  background: var(--cg-accent);
  color: #111827;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cg-scard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
  filter: brightness(1.05);
}

/* HOVER EFFECT ON WHOLE CARD */
.cg-scard:hover {
  box-shadow: 0 26px 60px rgba(0, 0, 0, .85);
  transform: translateY(-4px);
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .cg-scard {
    padding: 2.7rem 1.3rem 1.9rem;
    border-radius: 1.6rem;
  }

  .cg-scard-hero {
    width: 125px;
    height: 125px;
  }
}


/* =========================
   PLANET CITY GUIDE CARDS
   ========================= */

.home-city-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 2.2rem;
  row-gap: 4.2rem;
  /* generous vertical spacing */
  margin-top: 3.3rem;
  /* space below filters */
}

/* Base theme */
.home-city-guide-card {
  --hcg-color-soft: #4b5563;
  --hcg-color-strong: #111827;
}

/* Variants (grey / red / blue) */
.home-city-guide-card--1 {
  --hcg-color-soft: #4b5563;
  --hcg-color-strong: #111827;
}

.home-city-guide-card--2 {
  --hcg-color-soft: #f97373;
  --hcg-color-strong: #b91c1c;
}

.home-city-guide-card--3 {
  --hcg-color-soft: #38bdf8;
  --hcg-color-strong: #1d4ed8;
}

/* Wrapper (anchors planet to each card) */
.home-city-guide-inner {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Floating circular city image */
.home-city-guide-planet {
  position: absolute;
  left: 65%;
  top: -1.9rem;
  /* how much the circle sits above the card */
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  border-radius: 999px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .9);
  /* light rim like the planets */
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, .9), transparent 55%),
    #0f172a;
  box-shadow: 0 24px 46px rgba(15, 23, 42, .7);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: 2;
}

.home-city-guide-planet img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Base rectangle card */
.home-city-guide-base {
  position: relative;
  /* vertical overlap between circle and card */
  border-radius: 26px;
  padding: 4.4rem 2rem 1.9rem;
  /* top padding ↑ creates clean space under the circle for the title */
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, 0)), linear-gradient(145deg, #051702, #88a387);
  color: #f9fafb;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Large translucent number */
.home-city-guide-number {
  position: absolute;
  right: 1.6rem;
  bottom: 1.3rem;
  font-size: 3.7rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(15, 23, 42, .14);
}

/* Text area */
.home-city-guide-text {
  position: relative;
  z-index: 1;
  text-align: left;
  padding-top: 65px;
}

.home-city-guide-title {
  margin: 0 0 .3rem;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-city-guide-sub {
  margin: 0;
  font-size: 0.86rem;
  opacity: .95;
}

/* Hover interactions */
.home-city-guide-inner:hover .home-city-guide-base {
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(15, 23, 42, .75);
}

.home-city-guide-inner:hover .home-city-guide-planet {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .9);
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .home-city-guide-grid {
    row-gap: 3.4rem;
    margin-top: 2.4rem;
  }

  .home-city-guide-planet {
    width: 130px;
    height: 130px;
    top: -1.6rem;
  }

  .home-city-guide-base {
    margin-top: 3.2rem;
    padding: 4rem 1.6rem 1.7rem;
  }

  .home-city-guide-title {
    font-size: 1.05rem;
  }
}


/* =========================
   CITY GUIDES HEADER POLISH
   ========================= */

.bdo-sec-cityguides .neo-head-cityguides {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* Title + icon */
.bdo-sec-cityguides .neo-head-cityguides .neo-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.bdo-sec-cityguides .neo-head-cityguides .neo-title .ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #22c55e, #0ea5e9);
  /* travel-ish gradient */
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

.bdo-sec-cityguides .neo-head-cityguides .neo-title .ico i {
  font-size: 1.25rem;
}

/* Eyebrow: “Featured destinations” as a pill */
.bdo-sec-cityguides .neo-head-cityguides .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.2rem;
  padding: 0.18rem 0.75rem 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.08);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #15803d;
}

.bdo-sec-cityguides .neo-head-cityguides .sec-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
}

.bdo-sec-cityguides .neo-head-cityguides .sec-eyebrow i {
  font-size: 0.8rem;
}

/* Sub-copy */
.bdo-sec-cityguides .neo-head-cityguides .neo-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(55, 65, 81, 0.95);
  max-width: 50rem;
}

/* Right-side button */
.bdo-sec-cityguides .neo-head-cityguides .neo-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bdo-sec-cityguides .neo-head-cityguides .bdo-link-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.86rem;
  font-weight: 500;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  transition: background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.bdo-sec-cityguides .neo-head-cityguides .bdo-link-ghost i {
  font-size: 1rem;
}

.bdo-sec-cityguides .neo-head-cityguides .bdo-link-ghost:hover {
  background: #ffffff;
  border-color: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

/* Dark mode tweaks */
html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides {
  border-bottom-color: rgba(51, 65, 85, 0.9);
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides .neo-title .ico {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 55%),
    linear-gradient(135deg, #22c55e, #0ea5e9);
  border-color: rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides .sec-eyebrow {
  background: rgba(21, 128, 61, 0.26);
  color: #bbf7d0;
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides .neo-sub {
  color: rgba(209, 213, 219, 0.95);
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides .bdo-link-ghost {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(55, 65, 81, 0.95);
  color: #e5e7eb;
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-head-cityguides .bdo-link-ghost:hover {
  background: rgba(15, 23, 42, 1);
  border-color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
  .bdo-sec-cityguides .neo-head-cityguides {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .bdo-sec-cityguides .neo-head-cityguides .neo-actions {
    justify-content: flex-start;
  }
}

/* CITY GUIDES TITLE + ICON
   (works with your existing neo-head / neo-title setup)
------------------------------------------------------- */

.bdo-sec-cityguides .neo-title {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* circular pill behind the SVG icon */
.bdo-sec-cityguides .neo-title .ico {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, rgba(255, 255, 255, 0.15)),
    linear-gradient(135deg, #22c55e, #0ea5e9);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(148, 163, 184, 0.35);
}

/* soft outer glow ring */
.bdo-sec-cityguides .neo-title .ico::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.8);
  opacity: 0.55;
}

/* size + polish for the SVG icon */
.bdo-sec-cityguides .neo-title .ico-img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25));
}

/* "City Guides" text – subtle gradient + micro shadow */
.bdo-sec-cityguides .neo-title span:last-child {
  background: linear-gradient(90deg, #0f172a, #111827);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}

/* dark mode tweaks if you use data-theme="dark" */
html[data-theme="dark"] .bdo-sec-cityguides .neo-title .ico {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #22c55e, #0ea5e9);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] .bdo-sec-cityguides .neo-title span:last-child {
  background: linear-gradient(90deg, #f9fafb, #e5e7eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   VIDEO CARDS – GRID & SHELL
   ========================= */

.home-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.9rem;
  margin-top: 1.7rem;
}

.home-video-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.2), transparent 55%),
    linear-gradient(145deg, #020617, #020617);
  border: 1px solid rgba(30, 64, 175, 0.35);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.7);
  transform-origin: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-video-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Thumbnail */
.home-video-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.home-video-thumb img,
.home-video-thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .25s ease;
}

/* subtle gradient overlay */
.home-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.7));
  pointer-events: none;
}

/* Play button */
.home-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, #e5e7eb);
  color: #0f172a;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  pointer-events: none;
  /* click passes to link */
}

.home-video-play i {
  font-size: 1.6rem;
}

/* card body */
.home-video-body {
  padding: 1.1rem 1.3rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* category tag */
.home-video-tag {
  align-self: flex-start;
  padding: 0.18rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(37, 99, 235, 0.2);
  color: #bfdbfe;
}

/* title */
.home-video-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  color: #f9fafb;
}

/* meta info */
.home-video-meta {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.96);
}

/* author */
.home-video-author {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.home-video-avatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(248, 250, 252, 0.95);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.6);
}

.home-video-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-video-author-name {
  font-weight: 500;
  color: #e5e7eb;
}

/* stats (views + date) */
.home-video-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.home-video-stats span:first-child::before {
  content: "▶";
  margin-right: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.8;
}

/* hover states */
.home-video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 100px rgba(15, 23, 42, 0.95);
  border-color: rgba(59, 130, 246, 0.8);
}

.home-video-card:hover .home-video-thumb img {
  transform: scale(1.06);
}

/* responsive */
@media (max-width: 640px) {
  .home-video-grid {
    gap: 1.5rem;
  }
}



/* =========================
   VIDEO SCENES – SECTION + HEADER
   ========================= */

.vs-sec {
  position: relative;
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .16), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(236, 72, 153, .14), transparent 55%),
    linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(241, 245, 249, .96));
  box-shadow: 0 24px 60px rgba(15, 23, 42, .15);
}

.vs-sec .bdo-max {
  padding-top: 1.9rem;
  padding-bottom: 2.3rem;
}

.vs-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, .22) 1px, transparent 0);
  background-size: 18px 18px;
  mix-blend-mode: soft-light;
  opacity: .6;
  pointer-events: none;
  z-index: -1;
}

.vs-head {
  margin-bottom: 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.vs-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vs-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, rgba(255, 255, 255, 0.18)),
    linear-gradient(135deg, #2563eb, #22c55e);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

.vs-icon i {
  font-size: 1.2rem;
}

.vs-title span:last-child {
  background: linear-gradient(90deg, #0f172a, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.15rem;
  padding: 0.18rem 0.75rem 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #16a34a;
}

.vs-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #16a34a;
}

.vs-eyebrow i {
  font-size: 0.9rem;
}

.vs-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(55, 65, 81, 0.92);
  max-width: 40rem;
}

/* =========================
   MAIN LAYOUT
   ========================= */

.vs-layout {
  display: grid;
  grid-template-columns: minmax(260px, 280px) minmax(0, 1fr);
  gap: 1.7rem;
}

/* LEFT SIDEBAR */

.vs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.vs-sidebar-head,
.vs-sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-sidebar-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.vs-add-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: #2563eb;
  font-weight: 500;
  cursor: pointer;
}

.vs-add-link i {
  font-size: 0.9rem;
}

.vs-scenes-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* scene card */

.vs-scene {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
}

.vs-scene-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(148, 163, 184, 0.95);
  font-size: 1.1rem;
}

.vs-scene-thumb {
  width: 64px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: #e5e7eb;
}

.vs-scene-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.vs-scene-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.vs-scene-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.vs-scene-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(100, 116, 139, 0.95);
}

.vs-scene-sub i {
  font-size: 0.8rem;
}

/* active / hover */

.vs-scene.is-active {
  border-color: #22c55e;
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25);
  background: #ecfdf5;
  transform: translateY(-1px);
}

.vs-scene:hover:not(.is-active) {
  border-color: #2563eb;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
}

/* RIGHT MAIN AREA */

.vs-main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* main preview card */

.vs-main-card {
  border-radius: 22px;
  overflow: hidden;
  background: #020617;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.6);
}

.vs-main-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.vs-main-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #111827, #020617);
}

.vs-main-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform .2s ease;
}

.vs-main-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.0), rgba(15, 23, 42, 0.9));
  pointer-events: none;
}

.vs-main-card:hover .vs-main-thumb img {
  transform: scale(1.06);
}

/* play button */

.vs-main-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, #e5e7eb);
  color: #0f172a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.vs-main-play i {
  font-size: 1.8rem;
}

/* footer text */

.vs-main-footer {
  padding: 0.9rem 1.1rem 1rem;
  color: #f9fafb;
}

.vs-main-title {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 700;
}

.vs-main-sub {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.9;
}

/* CONTROLS AREA */

.vs-controls {
  border-radius: 18px;
  padding: 0.8rem 1.1rem 0.9rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(203, 213, 225, 0.9);
}

.vs-controls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
}

.vs-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.9);
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
}

.vs-ghost-btn i {
  font-size: 0.9rem;
}

.vs-ghost-btn--danger {
  border-color: rgba(248, 113, 113, 0.8);
  color: #b91c1c;
}

.vs-controls-center {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.vs-icon-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #0f172a;
  cursor: pointer;
}

.vs-icon-btn--primary {
  width: 2.4rem;
  height: 2.4rem;
  background: #2563eb;
  color: #f9fafb;
}

.vs-controls-bottom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

.vs-timecode {
  font-size: 0.76rem;
  color: rgba(75, 85, 99, 0.95);
}

/* fake timeline */

.vs-timeline {
  position: relative;
  height: 8px;
}

.vs-timeline-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(209, 213, 219, 0.9);
}

.vs-timeline-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #22c55e);
  max-width: 35%;
}

.vs-timeline-handle {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(156, 163, 175, 0.9);
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .vs-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .vs-sec .bdo-max {
    padding-top: 1.5rem;
    padding-bottom: 1.8rem;
  }

  .vs-head {
    margin-bottom: 1.2rem;
  }

  .vs-controls-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .vs-controls-center {
    order: -1;
  }
}


/* =========================
   VIDEO POSTS HEADER (match Trending look)
   ========================= */

/* if your section wrapper is .bdo-sec-videos, you can style it too */
.bdo-sec-videos {
  position: relative;
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
  overflow: hidden;
  isolation: isolate;
}

.bdo-sec-videos .bdo-max {
  padding-top: 1.8rem;
  padding-bottom: 2.2rem;
}

/* header layout */
.neo-head-videos {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}

/* title + icon (same family as Trending) */
.neo-head-videos .neo-title {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.neo-head-videos .neo-title .ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff, rgba(255, 255, 255, 0.2)),
    linear-gradient(135deg, #2563eb, #06b6d4);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  color: #0f172a;
}

.neo-head-videos .neo-title span:last-child {
  background: linear-gradient(90deg, #0f172a, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* eyebrow pill */
.neo-head-videos .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.15rem;
  padding: 0.18rem 0.75rem 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #2563eb;
}

.neo-head-videos .sec-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
}

.neo-head-videos .sec-eyebrow i {
  font-size: 0.9rem;
}

/* subtitle */
.neo-head-videos .neo-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(55, 65, 81, 0.9);
  max-width: 38rem;
}

/* actions on the right */
.neo-head-videos .neo-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* responsive */
@media (max-width: 768px) {
  .neo-head-videos {
    flex-direction: column;
    align-items: flex-start;
  }

  .neo-head-videos .neo-actions {
    margin-top: 0.5rem;
  }
}


/* =========================
   FOOD MENU HERO — PREMIUM (Cross Grid)
   ========================= */

.food-menu-sec {
  margin-top: 2.4rem;
  margin-bottom: 2.6rem;
}

.food-menu-shell {
  --fm-bg: #ef444400;
  --fm-stroke: rgba(148, 163, 184, .28);
  --fm-radius: 28px;
  --fm-gap: 12px;

  position: relative;
  isolation: isolate;
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "food-tl food-center food-tr"
    "food-bl food-center food-br";

  gap: var(--fm-gap);
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--fm-radius);
  overflow: hidden;

  height: 300px;
  max-height: 300px;

}

/* Gradient border ring */
.food-menu-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
      rgba(251, 146, 60, .95),
      rgba(56, 189, 248, .85),
      rgba(167, 139, 250, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  pointer-events: none;
  z-index: 0;
}

/* Soft “X” accent */
.food-menu-shell::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(to right,
      transparent 49%,
      rgba(148, 163, 184, .25) 50%,
      transparent 51%);
  transform: rotate(35deg);
  opacity: .14;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* keep children above overlays */
.food-menu-shell>* {
  position: relative;
  z-index: 1;
}

/* ---------- Corner tiles ---------- */
.food-menu-tile {
  position: relative;
  display: block;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;

  background: rgba(2, 6, 23, .92);
  border: 1px solid rgba(148, 163, 184, .18);

  box-shadow:
    0 18px 44px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .05);

  transform: translateZ(0);
  transition:
    transform .22s cubic-bezier(.2, .9, .2, 1),
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.food-menu-tile--tl {
  grid-area: food-tl;
}

.food-menu-tile--tr {
  grid-area: food-tr;
}

.food-menu-tile--bl {
  grid-area: food-bl;
}

.food-menu-tile--br {
  grid-area: food-br;
}

.food-menu-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform .32s cubic-bezier(.2, .9, .2, 1), filter .22s ease;
}

/* Premium overlay: depth + readability */
.food-menu-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2, 6, 23, .05), rgba(2, 6, 23, .72)),
    radial-gradient(240px 140px at 20% 15%, rgba(255, 255, 255, .10), transparent 60%);
  opacity: .95;
  pointer-events: none;
}

/* subtle top highlight */
.food-menu-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), transparent 50%, rgba(249, 115, 22, .10));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.food-menu-tile-label {
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .8rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .55rem .8rem;
  border-radius: 999px;

  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;

  color: #f9fafb;
  background: rgba(2, 6, 23, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
}

.food-menu-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, .28);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(56, 189, 248, .12) inset;
}

.food-menu-tile:hover img {
  transform: scale(1.10);
  filter: brightness(1.05) saturate(1.06);
}

/* Keyboard focus */
.food-menu-tile:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, .55),
    0 0 0 7px rgba(2, 6, 23, .85),
    0 22px 54px rgba(0, 0, 0, .65);
}

/* ---------- Center card ---------- */
.food-menu-center {
  grid-area: food-center;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.food-menu-center-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;

  padding: 1.5rem 1.9rem;
  border-radius: 24px;

  background: radial-gradient(520px 280px at 0% 0%, #ef4444, transparent 58%), radial-gradient(520px 280px at 100% 100%, rgba(251, 146, 60, .22), transparent 62%), rgb(15 23 42 / 69%);

  border: 1px solid rgba(148, 163, 184, .38);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .06);

  color: #f9fafb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* micro texture */
.food-menu-center-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, .10), transparent 40%),
    radial-gradient(1px 1px at 72% 36%, rgba(255, 255, 255, .08), transparent 40%),
    radial-gradient(1px 1px at 44% 78%, rgba(255, 255, 255, .06), transparent 40%);
  opacity: .35;
  pointer-events: none;
}

.food-menu-tag {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 700;
  color: rgba(251, 146, 60, .95);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.food-menu-heading {
  margin: 0 0 .55rem;
  font-size: clamp(1.35rem, 1.2vw + 1.1rem, 1.95rem);
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.food-menu-text {
  margin: 0 0 1.15rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, .92);
}

.food-menu-meta-row {
  display: flex;
  justify-content: center;
}

/* Pills */
.food-menu-pill {
  min-width: 160px;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .5);
  background: rgba(2, 6, 23, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;

  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

.food-menu-pill--full {
  width: 100%;
  max-width: 320px;
}

.food-menu-pill--accent {
  border-color: rgba(251, 146, 60, .95);
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #0b1220;
}

.food-menu-pill-main {
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.food-menu-pill-sub {
  font-size: .72rem;
  opacity: .9;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .food-menu-shell {
    height: auto;
    max-height: none;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "food-center food-center"
      "food-tl food-tr"
      "food-bl food-br";
  }

  .food-menu-center-inner {
    min-height: 220px;
  }

  .food-menu-tile {
    min-height: 140px;
  }
}

@media (max-width: 520px) {
  .food-menu-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "food-center"
      "food-tl"
      "food-tr"
      "food-bl"
      "food-br";
  }

  .food-menu-tile {
    min-height: 120px;
  }
}



/* =========================
   BDO HOME — Entertainment/Travel (Team-card style)
   Prefix: bdo-home-entertainment-section-
   ========================= */

.bdo-home-entertainment-section {
  position: relative;
  padding: 2.1rem 0 2.4rem;
}

.bdo-home-entertainment-section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 320px at 10% 10%, rgba(56, 189, 248, .10), transparent 55%),
    radial-gradient(900px 320px at 90% 90%, rgba(251, 146, 60, .10), transparent 55%);
  opacity: 1;
}

.bdo-home-entertainment-section-wrap {
  position: relative;
  z-index: 1;
}

.bdo-home-entertainment-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.bdo-home-entertainment-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(226, 232, 240, .82);
}

.bdo-home-entertainment-section-title {
  margin: .35rem 0 .25rem;
  font-size: clamp(1.35rem, 1.1vw + 1.05rem, 2rem);
  font-weight: 950;
  letter-spacing: .06em;
  color: #f8fafc;
}

.bdo-home-entertainment-section-sub {
  margin: 0;
  color: rgba(226, 232, 240, .78);
  font-size: .95rem;
  max-width: 62ch;
}

.bdo-home-entertainment-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem;
}

@media (max-width: 980px) {
  .bdo-home-entertainment-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panel shell */
.bdo-home-entertainment-section-panel {
  --panel-bg: rgba(2, 6, 23, .55);
  --panel-stroke: rgba(148, 163, 184, .18);
  --accent-a: rgba(56, 189, 248, .85);
  --accent-b: rgba(251, 146, 60, .75);

  position: relative;
  border-radius: 22px;
  border: 1px solid var(--panel-stroke);
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(520px 220px at 100% 100%, rgba(255, 255, 255, .05), transparent 60%),
    var(--panel-bg);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  padding: 1rem;
  isolation: isolate;
}

/* theme variants */
.bdo-home-entertainment-section-panel[data-theme="ent"] {
  --accent-a: rgba(236, 72, 153, .85);
  --accent-b: rgba(167, 139, 250, .85);
}

.bdo-home-entertainment-section-panel[data-theme="travel"] {
  --accent-a: rgba(34, 197, 94, .90);
  --accent-b: rgba(56, 189, 248, .85);
}

/* Accent spine + border glow */
.bdo-home-entertainment-section-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.bdo-home-entertainment-section-panel::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--accent-a), var(--accent-b));
  opacity: .75;
  pointer-events: none;
  z-index: 0;
}

.bdo-home-entertainment-section-panel>* {
  position: relative;
  z-index: 1;
}

/* Panel head */
.bdo-home-entertainment-section-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .95rem;
}

.bdo-home-entertainment-section-panel-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.bdo-home-entertainment-section-panel-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.bdo-home-entertainment-section-panel-kicker {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, .70);
  margin-bottom: .12rem;
}

.bdo-home-entertainment-section-panel-name {
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: .08em;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-home-entertainment-section-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .48rem .78rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: .84rem;
  color: rgba(248, 250, 252, .92);
  background: rgba(2, 6, 23, .35);
  border: 1px solid rgba(148, 163, 184, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bdo-home-entertainment-section-panel-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, .45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

/* Cards grid */
.bdo-home-entertainment-section-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

@media (max-width: 520px) {
  .bdo-home-entertainment-section-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card (team-style) */
.bdo-home-entertainment-section-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;

  padding: .85rem .9rem;
  border-radius: 18px;

  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .06);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.bdo-home-entertainment-section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(240px 160px at 20% 20%, rgba(255, 255, 255, .08), transparent 60%),
    linear-gradient(to bottom, rgba(2, 6, 23, .10), rgba(2, 6, 23, .40));
  pointer-events: none;
}

.bdo-home-entertainment-section-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, .30);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(56, 189, 248, .10) inset;
}

/* Avatar circle */
.bdo-home-entertainment-section-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  background: rgba(255, 255, 255, .06);
}

.bdo-home-entertainment-section-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
}

.bdo-home-entertainment-section-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: 1.1rem;
  color: #0b1220;
  background: linear-gradient(135deg, rgba(56, 189, 248, .9), rgba(251, 146, 60, .85));
}

/* Text */
.bdo-home-entertainment-section-card-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
}

.bdo-home-entertainment-section-card-name {
  font-weight: 950;
  letter-spacing: .06em;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-home-entertainment-section-card-role {
  margin-top: .15rem;
  font-size: .85rem;
  color: rgba(226, 232, 240, .72);
}

/* Social row (like team cards) */
.bdo-home-entertainment-section-card-socials {
  margin-top: .55rem;
  display: flex;
  gap: .4rem;
}

.bdo-home-entertainment-section-social {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .28);
  border: 1px solid rgba(148, 163, 184, .20);
  color: rgba(248, 250, 252, .92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}

.bdo-home-entertainment-section-empty {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(148, 163, 184, .25);
  color: rgba(226, 232, 240, .75);
  font-weight: 900;
}


/* =========================
   LIGHT THEME OVERRIDES (Screenshot style)
   ========================= */

.bdo-home-entertainment-section--light {
  padding: 2.2rem 0 2.6rem;
}

/* Light panel background (works even if page is dark) */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-bg {
  background:
    radial-gradient(900px 340px at 12% 10%, rgba(59, 130, 246, .14), transparent 58%),
    radial-gradient(900px 340px at 90% 90%, rgba(249, 115, 22, .14), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .92));
}

/* Make the whole section feel like a “template panel” */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-wrap {}

/* Head text -> dark */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-eyebrow {
  color: rgba(15, 23, 42, .70);
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-title {
  color: #0f172a;
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-sub {
  color: rgba(15, 23, 42, .65);
}

/* Panels (light) */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel {
  --panel-bg: rgba(255, 255, 255, .92);
  --panel-stroke: rgba(15, 23, 42, .10);

  background:
    radial-gradient(520px 220px at 10% 0%, rgba(15, 23, 42, .04), transparent 60%),
    radial-gradient(520px 220px at 100% 100%, rgba(15, 23, 42, .03), transparent 60%),
    var(--panel-bg);

  border: 1px solid var(--panel-stroke);
  box-shadow:
    0 18px 46px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Border glow a bit cleaner on light */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel::before {
  opacity: .30;
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel::after {
  opacity: .85;
}

/* Panel header text -> dark */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel-kicker {
  color: rgba(15, 23, 42, .55);
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel-name {
  color: #0f172a;
}

/* Icon chip -> light */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel-ico {
  background: rgba(15, 23, 42, .04);
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .85);
}

/* CTA button -> light */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel-cta {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(15, 23, 42, .12);
  color: rgba(15, 23, 42, .85);
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-panel-cta:hover {
  border-color: rgba(59, 130, 246, .30);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .12);
}

/* Cards -> WHITE like screenshot */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-card::before {
  background:
    radial-gradient(260px 160px at 22% 18%, rgba(59, 130, 246, .10), transparent 62%),
    linear-gradient(to bottom, rgba(255, 255, 255, .0), rgba(15, 23, 42, .03));
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-card:hover {
  border-color: rgba(59, 130, 246, .22);
  box-shadow:
    0 22px 46px rgba(15, 23, 42, .14),
    0 0 0 1px rgba(59, 130, 246, .08) inset;
}

/* Avatar ring (premium) */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-avatar {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .45), rgba(249, 115, 22, .40));
  z-index: -1;
  filter: blur(0px);
  opacity: .55;
}

/* Text on cards -> dark */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-card-name {
  color: #0f172a;
}

.bdo-home-entertainment-section--light .bdo-home-entertainment-section-card-role {
  color: rgba(15, 23, 42, .62);
}

/* Social pills -> light */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-social {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .80);
  box-shadow: 0 10px 18px rgba(15, 23, 42, .08);
}

/* Empty state */
.bdo-home-entertainment-section--light .bdo-home-entertainment-section-empty {
  background: rgba(255, 255, 255, .9);
  border: 1px dashed rgba(15, 23, 42, .18);
  color: rgba(15, 23, 42, .65);
}


/* =========================
   BDO HOME — Entertainment/Travel (Light List UI)
   Prefix: bdo-home-entertainment-section-
   ========================= */

.bdo-home-entertainment-section {
  position: relative;
  padding: 2.2rem 0 2.6rem;
}

.bdo-home-entertainment-section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 340px at 12% 10%, rgba(59, 130, 246, .14), transparent 58%),
    radial-gradient(900px 340px at 90% 90%, rgba(249, 115, 22, .14), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .92));
}


.bdo-home-entertainment-section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.bdo-home-entertainment-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(15, 23, 42, .70);
}

.bdo-home-entertainment-section-title {
  margin: .35rem 0 .2rem;
  font-size: clamp(1.35rem, 1.1vw + 1.05rem, 2rem);
  font-weight: 950;
  letter-spacing: .04em;
  color: #0f172a;
}

.bdo-home-entertainment-section-sub {
  margin: 0;
  color: rgba(15, 23, 42, .62);
  font-size: .95rem;
  max-width: 68ch;
}

.bdo-home-entertainment-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem;
}

@media (max-width: 980px) {
  .bdo-home-entertainment-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Panels */
.bdo-home-entertainment-section-panel {
  --stroke: rgba(15, 23, 42, .10);
  --bg: #ffffff;
  --soft: rgba(15, 23, 42, .04);
  --accentA: rgba(59, 130, 246, .75);
  --accentB: rgba(249, 115, 22, .70);

  position: relative;
  border-radius: 22px;
  background: var(--bg);
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.bdo-home-entertainment-section-panel[data-theme="ent"] {
  --accentA: rgba(236, 72, 153, .75);
  --accentB: rgba(167, 139, 250, .75);
}

.bdo-home-entertainment-section-panel[data-theme="travel"] {
  --accentA: rgba(34, 197, 94, .80);
  --accentB: rgba(59, 130, 246, .75);
}

/* Top accent bar */
.bdo-home-entertainment-section-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
}

/* Subtle corner glow */
.bdo-home-entertainment-section-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 220px at 8% 0%, color-mix(in srgb, var(--accentA) 18%, transparent), transparent 60%),
    radial-gradient(520px 220px at 100% 100%, color-mix(in srgb, var(--accentB) 16%, transparent), transparent 60%);
  pointer-events: none;
  opacity: .55;
}

/* Panel head */
.bdo-home-entertainment-section-panel-head {
  position: relative;
  z-index: 1;
  padding: 1rem 1rem .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.bdo-home-entertainment-section-panel-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.bdo-home-entertainment-section-panel-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .10);
  color: rgba(15, 23, 42, .85);
}

.bdo-home-entertainment-section-panel-kicker {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);
  margin-bottom: .12rem;
}

.bdo-home-entertainment-section-panel-name {
  font-size: 1.06rem;
  font-weight: 950;
  letter-spacing: .06em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-home-entertainment-section-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .48rem .78rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: .84rem;
  color: rgba(15, 23, 42, .85);
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(15, 23, 42, .12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bdo-home-entertainment-section-panel-cta:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accentA) 35%, rgba(15, 23, 42, .12));
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
}

/* LIST (no cards) */
.bdo-home-entertainment-section-list {
  position: relative;
  z-index: 1;
  padding: .65rem 1rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem .8rem;
}

@media (max-width: 520px) {
  .bdo-home-entertainment-section-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bdo-home-entertainment-section-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .62rem .2rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  color: inherit;
  transition: background .16s ease, transform .16s ease;
}

.bdo-home-entertainment-section-item:hover {
  background: rgba(15, 23, 42, .02);
  transform: translateX(2px);
}

.bdo-home-entertainment-section-thumb {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(15, 23, 42, .04);
  border: 1px solid rgba(15, 23, 42, .10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdo-home-entertainment-section-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bdo-home-entertainment-section-thumb-fallback {
  font-weight: 950;
  font-size: .9rem;
  color: #0f172a;
}

.bdo-home-entertainment-section-item-text {
  min-width: 0;
  flex: 1 1 auto;
}

.bdo-home-entertainment-section-item-name {
  display: block;
  font-weight: 950;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-home-entertainment-section-item-meta {
  display: block;
  margin-top: .05rem;
  font-size: .82rem;
  color: rgba(15, 23, 42, .58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-home-entertainment-section-item-arrow {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accentA) 55%, rgba(15, 23, 42, .55));
  opacity: .85;
}

/* Empty */
.bdo-home-entertainment-section-empty {
  padding: .9rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, .03);
  border: 1px dashed rgba(15, 23, 42, .14);
  color: rgba(15, 23, 42, .65);
  font-weight: 900;
  grid-column: 1 / -1;
}

/* =========================
   VIDEO COLLAGE (like image)
   ========================= */

.radio-collage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.radio-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* base card */
.radio-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.radio-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.radio-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.radio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: grayscale(1) contrast(1.12) saturate(.9);
}

.radio-media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
}

/* red duotone overlay */
.radio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(0, 0, 0, .22), transparent 60%),
    linear-gradient(0deg, rgba(215, 50, 47, .86), rgba(215, 50, 47, .86));
  mix-blend-mode: multiply;
  opacity: .98;
}

/* dotted pattern like template */
.radio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18px 18px, rgba(255, 255, 255, .25) 2px, transparent 3px);
  background-size: 18px 18px;
  opacity: .18;
  pointer-events: none;
}

/* diagonal white panel */
.radio-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 18px 18px;
  background: rgba(255, 255, 255, .96);
  color: #111827;

  /* diagonal top edge */
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0% 100%);
}

.radio-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: #2a77ff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  opacity: .95;
}

/* featured sizing */
.radio-card--featured {
  min-height: 360px;
}

.radio-card--mini {
  min-height: 172px;
}

/* vertical label on featured (like 89.7 MHz on right) */
.radio-vert {
  position: absolute;
  right: 16px;
  top: 18px;
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  font-size: 16px;
  text-shadow: 0 10px 22px rgba(0, 0, 0, .35);
}

/* play button */
.radio-play {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}

.radio-play i {
  font-size: 22px;
}

.radio-play--mini {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

.radio-play--mini i {
  font-size: 18px;
}

/* brand row */
.radio-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.radio-brand-dot {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, .06);
  border: 1px solid rgba(17, 24, 39, .08);
}

.radio-brand-name {
  font-weight: 800;
  color: rgba(17, 24, 39, .65);
}

/* titles */
.radio-title {
  margin: 0 0 10px 0;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 32px;
  line-height: 1.05;
  text-shadow: 2px 2px 0 rgba(215, 50, 47, .14);
}

.radio-title--mini {
  font-size: 16px;
  margin: 8px 0 6px 0;
  line-height: 1.2;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* pills & meta */
.radio-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .06);
  border: 1px solid rgba(17, 24, 39, .08);
  font-size: 12px;
  font-weight: 800;
}

.radio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: rgba(17, 24, 39, .68);
  font-weight: 700;
  font-size: 12.5px;
}

.radio-m {
  color: rgba(17, 24, 39, .68);
}

.radio-meta--mini {
  font-size: 12px;
  color: rgba(17, 24, 39, .62);
  font-weight: 700;
  gap: 8px;
}

/* author line */
.radio-author {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(17, 24, 39, .70);
  font-weight: 800;
  font-size: 13px;
}

.radio-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(17, 24, 39, .12);
}

/* faint stamp */
.radio-stamp {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-weight: 950;
  letter-spacing: .10em;
  font-size: 56px;
  color: rgba(17, 24, 39, .08);
  user-select: none;
  pointer-events: none;
}

.radio-stamp--mini {
  font-size: 34px;
  left: 12px;
  bottom: 10px;
}

/* mini panel tweaks */
.radio-panel--mini {
  padding: 14px 14px 14px 14px;
  clip-path: polygon(0 36%, 100% 0, 100% 100%, 0% 100%);
}

.radio-panel--mini::before {
  height: 8px;
}

/* hover */
.radio-card:hover {
  transform: translateY(-2px);
  transition: transform .18s ease;
}

.radio-card:hover .radio-play {
  transform: scale(1.03);
  transition: transform .18s ease;
}

/* responsive */
@media (max-width: 900px) {
  .radio-collage {
    grid-template-columns: 1fr;
  }

  .radio-card--featured {
    min-height: 320px;
  }
}

@media (max-width: 520px) {
  .radio-mini-grid {
    grid-template-columns: 1fr;
  }

  .radio-title {
    font-size: 26px;
  }

  .radio-stamp {
    font-size: 44px;
  }
}

/* =========================
   POLISH OVERRIDES (paste AFTER your current CSS)
   ========================= */

.bdo-sec-videos .radio-collage {
  gap: 18px;
}

.bdo-sec-videos .radio-mini-grid {
  gap: 18px;
}

/* consistent sizing + nicer collage proportions */
.bdo-sec-videos .radio-card--featured {
  min-height: 420px;
}

.bdo-sec-videos .radio-card--mini {
  min-height: 200px;
  aspect-ratio: 1 / 1;
  /* makes the right grid look like the reference */
}

/* card surface + inner highlight */
.bdo-sec-videos .radio-card {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bdo-sec-videos .radio-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  pointer-events: none;
  background: radial-gradient(900px 420px at 20% 0%, rgba(255, 255, 255, .12), transparent 55%);
  opacity: .55;
}

/* reduce harshness of image filter a bit */
.bdo-sec-videos .radio-media img {
  transform: scale(1.06);
  filter: grayscale(.85) contrast(1.08) saturate(.95);
}

/* richer duotone */
.bdo-sec-videos .radio-media::after {
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(0, 0, 0, .20), transparent 55%),
    linear-gradient(120deg, rgba(215, 50, 47, .92), rgba(215, 50, 47, .72)),
    linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0));
  mix-blend-mode: multiply;
  opacity: 1;
}

/* lighter dot pattern */
.bdo-sec-videos .radio-card::before {
  opacity: .12;
}

/* play button: glass + subtle pulse */
.bdo-sec-videos .radio-play {
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .28);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.bdo-sec-videos .radio-play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  opacity: .0;
  transition: opacity .22s ease;
}

/* diagonal panel: more depth + cleaner edge */
.bdo-sec-videos .radio-panel {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  padding: 20px 20px 18px 20px;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
  box-shadow: 0 -18px 28px rgba(0, 0, 0, .16);
}

.bdo-sec-videos .radio-panel::before {
  height: 9px;
  background: linear-gradient(90deg, #2a77ff, #5ad7ff);
  opacity: .92;
}

/* typography */
.bdo-sec-videos .radio-title {
  font-size: clamp(24px, 2.6vw, 38px);
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 rgba(215, 50, 47, .12);
}

.bdo-sec-videos .radio-title--mini {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
}

/* pill: slightly stronger */
.bdo-sec-videos .radio-pill {
  background: rgba(42, 119, 255, .08);
  border-color: rgba(42, 119, 255, .18);
  color: rgba(17, 24, 39, .82);
}

/* meta spacing */
.bdo-sec-videos .radio-meta {
  gap: 10px;
}

.bdo-sec-videos .radio-meta--mini {
  margin-top: 2px;
  gap: 10px;
}

/* stamp: softer */
.bdo-sec-videos .radio-stamp {
  color: rgba(17, 24, 39, .07);
  filter: blur(.15px);
}

/* vertical label on featured: nicer placement */
.bdo-sec-videos .radio-vert {
  right: 14px;
  top: 16px;
  font-size: 15px;
  opacity: .95;
}

/* hover: lift + glow */
.bdo-sec-videos .radio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

.bdo-sec-videos .radio-card:hover .radio-play {
  transform: scale(1.06);
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .34);
}

.bdo-sec-videos .radio-card:hover .radio-play::after {
  opacity: 1;
}

/* focus-visible for accessibility (keyboard users) */
.bdo-sec-videos .radio-link:focus-visible {
  outline: 3px solid rgba(90, 215, 255, .75);
  outline-offset: 4px;
  border-radius: 22px;
}

/* mini panel tweaks */
.bdo-sec-videos .radio-panel--mini {
  padding: 14px 14px 14px 14px;
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
}

.bdo-sec-videos .radio-panel--mini::before {
  height: 7px;
}

/* responsive */
@media (max-width: 900px) {
  .bdo-sec-videos .radio-card--featured {
    min-height: 360px;
  }

  .bdo-sec-videos .radio-card--mini {
    aspect-ratio: auto;
    min-height: 210px;
  }
}

@media (max-width: 520px) {
  .bdo-sec-videos .radio-mini-grid {
    grid-template-columns: 1fr;
  }

  .bdo-sec-videos .radio-card--mini {
    min-height: 220px;
  }
}

.bdo-sec-videos .vid-collage {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.bdo-sec-videos .vid-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: 100%;
}

@media (max-width: 980px) {
  .bdo-sec-videos .vid-collage {
    grid-template-columns: 1fr;
  }

  .bdo-sec-videos .vid-mini {
    height: auto;
  }
}

@media (max-width: 560px) {
  .bdo-sec-videos .vid-mini {
    grid-template-columns: 1fr;
  }
}

.bdo-sec-videos .vcard {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bdo-sec-videos .vcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
}

.bdo-sec-videos .vcard a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.bdo-sec-videos .vmedia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bdo-sec-videos .vmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
  filter: contrast(1.05) saturate(1.04);
}

.bdo-sec-videos .vcard:hover .vmedia img {
  transform: scale(1.08);
}

/* overlay gradients (no click blocking) */
.bdo-sec-videos .vmedia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 420px at 18% 10%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .60) 62%, rgba(0, 0, 0, .92));
}

/* top bar */
.bdo-sec-videos .vtop {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}

.bdo-sec-videos .vbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 30, .58);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdo-sec-videos .vbadge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255, 59, 48, .18);
}

.bdo-sec-videos .vplay {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.bdo-sec-videos .vplay i {
  font-size: 22px;
  color: #fff;
}

.bdo-sec-videos .vmini .vplay {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.bdo-sec-videos .vmini .vplay i {
  font-size: 20px;
}

/* bottom info (minimal, clean) */
.bdo-sec-videos .vinfo {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bdo-sec-videos .vtitle {
  margin: 0;
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(18px, 1.8vw, 30px);
  text-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.bdo-sec-videos .vmini .vtitle {
  font-size: 16px;
  -webkit-line-clamp: 2;
}

.bdo-sec-videos .vmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-weight: 800;
  font-size: 12.5px;
}

.bdo-sec-videos .vmeta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bdo-sec-videos .vauthor {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .90);
  font-weight: 900;
  font-size: 12.8px;
}

.bdo-sec-videos .vauthor img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .18);
}

.bdo-sec-videos .vfeatured {
  min-height: 460px;
}

.bdo-sec-videos .vmini {
  min-height: 220px;
}

@media (max-width: 980px) {
  .bdo-sec-videos .vfeatured {
    min-height: 360px;
  }

  .bdo-sec-videos .vmini {
    min-height: 220px;
  }
}

.bdo-sec-videos .vcard a:focus-visible {
  outline: 3px solid rgba(42, 119, 255, .65);
  outline-offset: 4px;
  border-radius: 22px;
}

/* =========================
   INLINE VIDEO PLAYER (inside card)
   ========================= */
.bdo-sec-videos .vcard-btn {
  all: unset;
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

.bdo-sec-videos .vplayer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  background: #000;
}

.bdo-sec-videos .vcard.is-playing .vplayer {
  display: block;
}

.bdo-sec-videos .vcard.is-playing .vcard-btn {
  opacity: 0;
  pointer-events: none;
}

.bdo-sec-videos .vplayer-inner {
  position: absolute;
  inset: 0;
}

.bdo-sec-videos .vframe {
  position: absolute;
  inset: 0;
}

.bdo-sec-videos .vframe iframe,
.bdo-sec-videos .vframe video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* close button */
.bdo-sec-videos .vclose {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 7;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.bdo-sec-videos .vclose:hover {
  background: rgba(0, 0, 0, .60);
}

.bdo-sec-videos .vnote {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 7;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9);
  font-weight: 800;
  font-size: 12.5px;
  display: none;
}

.bdo-sec-videos .vcard.has-no-video .vnote {
  display: block;
}