/* ==========================================================================
   Noveba — Main Stylesheet
   Revolut-inspired dark premium theme. Bootstrap 5 overrides + custom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS custom properties)
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --rv-bg:           #191C1F;
  --rv-bg-alt:       #0E101E;
  --rv-bg-card:      rgba(255, 255, 255, 0.035);
  --rv-border:       rgba(255, 255, 255, 0.08);
  --rv-text:         #ffffff;
  --rv-text-muted:   rgba(255, 255, 255, 0.55);
  --rv-gradient:     linear-gradient(135deg, #6E3FF3 0%, #0E76FD 100%);
  --rv-violet:       #6E3FF3;
  --rv-blue:         #0E76FD;
  --rv-tag-bg:       rgba(110, 63, 243, 0.15);
  --rv-tag-text:     #a78bfa;

  /* Spacing */
  --rv-section-py:   5rem;
  --rv-navbar-h:     72px;

  /* Typography */
  --rv-font:         'Inter', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --rv-shadow-sm:    0 4px 24px rgba(0, 0, 0, 0.3);
  --rv-shadow-md:    0 8px 48px rgba(0, 0, 0, 0.4);
  --rv-shadow-glow:  0 0 60px rgba(110, 63, 243, 0.25);

  /* Transitions */
  --rv-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --rv-dur:          0.25s;

  /*
   * Divi et_pb_bottom_inside_divider / et_pb_top_inside_divider — SVG data URIs
   * (полная ширина: background-size: 100% <height> как на stage2)
   */
  --hp-divider-white-41: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI0MXB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMy40QzEwNTAuNTkgMTggMTAxOS40IDg0Ljg5IDczNC40MiA4NC44OWMtMzIwIDAtMzIwLTg0LjMtNjQwLTg0LjNDNTkuNC41OSAyOC4yIDEuNiAwIDMuNFYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjE0MEgweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDUxLjc2Yy0yMDEgMTIuNDktMjQyLjQzIDUzLjQtNTEzLjU4IDUzLjQtMzIwIDAtMzIwLTU3LTY0MC01Ny00OC44NS4wMS05MC4yMSAxLjM1LTEyNi40MiAzLjZWMTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==");
  --hp-divider-black-100: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwMDAwMDAiPjxwYXRoIGQ9Ik0wIDUxLjc2YzM2LjIxLTIuMjUgNzcuNTctMy41OCAxMjYuNDItMy41OCAzMjAgMCAzMjAgNTcgNjQwIDU3IDI3MS4xNSAwIDMxMi41OC00MC45MSA1MTMuNTgtNTMuNFYwSDB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYwSDB6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTAgMHYzLjRDMjguMiAxLjYgNTkuNC41OSA5NC40Mi41OWMzMjAgMCAzMjAgODQuMyA2NDAgODQuMyAyODUgMCAzMTYuMTctNjYuODUgNTQ1LjU4LTgxLjQ5VjB6Ii8+PC9nPjwvc3ZnPg==");
  --hp-divider-white-top-38: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgNTEuNzZjMzYuMjEtMi4yNSA3Ny41Ny0zLjU4IDEyNi40Mi0zLjU4IDMyMCAwIDMyMCA1NyA2NDAgNTcgMjcxLjE1IDAgMzEyLjU4LTQwLjkxIDUxMy41OC01My40VjBIMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjBIMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwdjMuNEMyOC4yIDEuNiA1OS40LjU5IDk0LjQyLjU5YzMyMCAwIDMyMCA4NC4zIDY0MCA4NC4zIDI4NSAwIDMxNi4xNy02Ni44NSA1NDUuNTgtODEuNDlWMHoiLz48L2c+PC9zdmc+");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family:      var(--rv-font);
  background-color: var(--rv-bg);
  color:            var(--rv-text);
  line-height:      1.6;
  -webkit-font-smoothing: antialiased;
}

:target {
  scroll-margin-top: calc(var(--rv-navbar-h) + 1rem);
}

/* --------------------------------------------------------------------------
   3. Bootstrap dark-mode overrides
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
  --bs-body-bg:           var(--rv-bg);
  --bs-body-color:        var(--rv-text);
  --bs-border-color:      var(--rv-border);
  --bs-link-color:        var(--rv-violet);
  --bs-link-hover-color:  #a78bfa;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--rv-text);
}

a {
  color:      var(--rv-violet);
  transition: color var(--rv-dur) var(--rv-ease);
}

a:hover {
  color: #a78bfa;
}

code {
  font-size:     0.875em;
  color:         var(--rv-tag-text);
  background:    var(--rv-tag-bg);
  padding:       0.15em 0.4em;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. Utilities
   -------------------------------------------------------------------------- */

.py-6 {
  padding-top:    var(--rv-section-py);
  padding-bottom: var(--rv-section-py);
}

.z-1 { z-index: 1; }

.letter-spacing-2 {
  letter-spacing: 0.12em;
}

.skip-link {
  position:      absolute;
  top:           -100%;
  left:          1rem;
  background:    var(--rv-violet);
  color:         #fff;
  padding:       0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index:       9999;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   6. Navbar
   -------------------------------------------------------------------------- */

.nvb-navbar {
  background:           transparent;
  border-bottom:        1px solid transparent;
  box-shadow:           none;
  backdrop-filter:      none;
  -webkit-backdrop-filter: none;
  height:               var(--rv-navbar-h);
  transition:           background var(--rv-dur) var(--rv-ease),
                        box-shadow  var(--rv-dur) var(--rv-ease);
}

.nvb-navbar.is-scrolled {
  background: rgba(14, 16, 30, 0.42);
  box-shadow: var(--rv-shadow-sm);
  backdrop-filter:      blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  border-bottom:        1px solid var(--rv-border);
}

/* Mobile menu — fullheight top offcanvas (выезд сверху на весь экран).
   Используем 100dvh для корректной высоты на iOS/Android с учётом
   динамической адресной строки; 100vh — fallback. */
.nvb-offcanvas-nav.offcanvas-top {
  --bs-offcanvas-height: 100vh;
  --bs-offcanvas-height: 100dvh;

  height:        100vh;
  height:        100dvh;
  border-radius: 0;
  border:        0;
  box-shadow:    none;
  background:    linear-gradient(180deg, #0f1220 0%, #0a0c18 100%);
}

.nvb-offcanvas-nav .offcanvas-header {
  padding:       1rem 1.25rem;
  border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
  background:    transparent;
}

.nvb-offcanvas-nav .offcanvas-title {
  font-weight:                 700;
  letter-spacing:              0.02em;
  background:                  var(--rv-gradient);
  -webkit-background-clip:     text;
  -webkit-text-fill-color:     transparent;
  background-clip:             text;
}

.nvb-offcanvas-nav .offcanvas-body {
  padding:              1rem 1.25rem 1.5rem;
  overflow-y:           auto;
  overscroll-behavior:  contain;
  -webkit-overflow-scrolling: touch;
}

.nvb-mobile-nav__list .nav-link {
  position:      relative;
  color:         rgba( 255, 255, 255, 0.88 ) !important;
  padding:       0.7rem 0.85rem !important;
  border-radius: 10px;
  font-size:     1rem;
  font-weight:   600;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}

.nvb-mobile-nav__list .nav-link:hover,
.nvb-mobile-nav__list .nav-link:focus {
  color:      #fff !important;
  background: rgba( 255, 255, 255, 0.08 );
}

/* Active top-level item in the mobile offcanvas — gradient tint + accent bar */
.nvb-mobile-nav__list > .menu-item.active > .nav-link,
.nvb-mobile-nav__list > .menu-item.current-menu-item > .nav-link,
.nvb-mobile-nav__list > .menu-item.current-menu-ancestor > .nav-link,
.nvb-mobile-nav__list > .menu-item.current-menu-parent > .nav-link {
  color:      #fff !important;
  background: linear-gradient( 90deg,
              rgba( 110, 63, 243, 0.22 ) 0%,
              rgba( 14, 118, 253, 0.12 ) 100% );
}

.nvb-mobile-nav__list > .menu-item.active > .nav-link::before,
.nvb-mobile-nav__list > .menu-item.current-menu-item > .nav-link::before,
.nvb-mobile-nav__list > .menu-item.current-menu-ancestor > .nav-link::before,
.nvb-mobile-nav__list > .menu-item.current-menu-parent > .nav-link::before {
  content:       '';
  position:      absolute;
  left:          -0.35rem;
  top:           22%;
  bottom:        22%;
  width:         3px;
  border-radius: 2px;
  background:    var(--rv-gradient);
}

/* CTA pinned to the bottom of the offcanvas */
.nvb-offcanvas-nav .nvb-offcanvas-cta {
  margin-top:  auto;
  padding-top: 1.5rem;
  border-top:  1px solid rgba( 255, 255, 255, 0.08 );
}

.nvb-brand__text {
  font-size:                   1.25rem;
  font-weight:                 800;
  background:                  var(--rv-gradient);
  -webkit-background-clip:     text;
  -webkit-text-fill-color:     transparent;
  background-clip:             text;
}

.nvb-brand__img {
  max-width: 160px;
  height:    auto;
}

.nvb-navbar-toggler {
  color:     rgba( 255, 255, 255, 0.92 );
  font-size: 1.6rem;
  line-height: 1;
  padding:   0.25rem 0.5rem;
  background: transparent;
  box-shadow: none;
}

.nvb-navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba( 110, 63, 243, 0.35 );
}

.nvb-offcanvas-nav__brand {
  font-size:                   1.15rem;
  font-weight:                 800;
  letter-spacing:              0.02em;
  background:                  var(--rv-gradient);
  -webkit-background-clip:     text;
  -webkit-text-fill-color:     transparent;
  background-clip:             text;
}

.navbar-nav .nav-link {
  position:      relative;
  color:         rgba( 255, 255, 255, 0.75 ) !important;
  font-size:     0.9375rem;
  font-weight:   500;
  padding:       0.35rem 0.875rem !important;
  border-radius: 6px;
  transition:    color var(--rv-dur) var(--rv-ease),
                 background var(--rv-dur) var(--rv-ease);
}

.navbar-nav .nav-link:hover {
  color:      var(--rv-text) !important;
  background: rgba( 255, 255, 255, 0.07 );
}

/* Active desktop top-level item — soft background + gradient underline */
.nvb-navbar .navbar-nav > .nav-item.active > .nav-link,
.nvb-navbar .navbar-nav > .nav-item.current-menu-item > .nav-link,
.nvb-navbar .navbar-nav > .nav-item.current-menu-ancestor > .nav-link,
.nvb-navbar .navbar-nav > .nav-item.current-menu-parent > .nav-link,
.navbar-nav .nav-link.active {
  color:      #fff !important;
  background: rgba( 255, 255, 255, 0.07 );
}

@media ( min-width: 992px ) {
  .nvb-navbar .navbar-nav > .nav-item.active > .nav-link::after,
  .nvb-navbar .navbar-nav > .nav-item.current-menu-item > .nav-link::after,
  .nvb-navbar .navbar-nav > .nav-item.current-menu-ancestor > .nav-link::after,
  .nvb-navbar .navbar-nav > .nav-item.current-menu-parent > .nav-link::after {
    content:       '';
    position:      absolute;
    left:          0.875rem;
    right:         0.875rem;
    bottom:        -2px;
    height:        2px;
    border-radius: 2px;
    background:    var(--rv-gradient);
    opacity:       0.9;
  }
}

/* ==========================================================================
   Primary nav dropdowns (multi-level support)
   ========================================================================== */

/* Neutralise Bootstrap offcanvas/modal scrollbar compensation.
   Scrollbar gutter is reserved statically on <html> (see base rule), so body
   and fixed navbar must NOT receive the inline padding-right injected by
   Bootstrap's ScrollBarHelper. The helper marks the element with the
   `data-bs-padding-right` attribute only while an offcanvas/modal is open,
   so we target precisely that state. */
body[data-bs-padding-right],
.nvb-navbar.fixed-top[data-bs-padding-right] {
  padding-right: 0 !important;
}

/* Base dropdown panel (positioned by Bootstrap + Popper via .show class) */
.nvb-navbar .dropdown-menu {
  background:     #f2f2f3;
  border:         0;
  border-radius:  12px;
  min-width:      220px;
  padding:        0.5rem;
  margin:         0;
  box-shadow:     0 12px 32px rgba(0, 0, 0, 0.24);
}

.nvb-navbar .dropdown-menu .dropdown-item {
  color:         #1d1d1f;
  border-radius: 8px;
  font-weight:   500;
  padding:       0.5rem 0.75rem;
  white-space:   normal;
}

.nvb-navbar .dropdown-menu .dropdown-item:hover,
.nvb-navbar .dropdown-menu .dropdown-item:focus {
  color:      #111;
  background: rgba( 0, 0, 0, 0.06 );
}

.nvb-navbar .dropdown-menu .menu-item.current-menu-item > .dropdown-item,
.nvb-navbar .dropdown-menu .menu-item.current-menu-ancestor > .dropdown-item,
.nvb-navbar .dropdown-menu .dropdown-item.active {
  color:       #111;
  font-weight: 700;
  background:  rgba( 110, 63, 243, 0.12 );
}

/* Desktop: mega layout when 3rd level exists (enabled via .show + :has()).
   Opening/closing is driven by Bootstrap's Dropdown API (hover triggered
   from JS), so Popper handles positioning — no manual CSS positioning. */
@media (min-width: 992px) {

  /* CRITICAL: Bootstrap's .navbar-nav .dropdown-menu defaults to
     position: static (because the <nav> lacks .navbar-expand-lg), which
     makes the dropdown part of the navbar flex row and inflates its
     height when opened. Force absolute positioning so the menu floats
     above the page, leaving navbar height untouched. */
  .nvb-navbar .navbar-nav .dropdown-menu,
  .nvb-navbar .navbar-nav .dropdown-menu[data-bs-popper] {
    position:   absolute;
    top:        100%;
    left:       0;
    right:      auto;
    margin-top: 0;
  }

  .nvb-navbar .dropdown-menu.show:has(.nvb-mega-section) {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   1rem 2rem;
    padding:               1.25rem 1.5rem;
    min-width:             min(560px, 92vw);
    width:                 max-content;
    max-width:             min(760px, 92vw);
  }

  .nvb-navbar .dropdown-menu > .nvb-mega-section {
    list-style: none;
    padding:    0;
    margin:     0;
  }

  .nvb-navbar .nvb-mega-section-title {
    display:         block;
    color:           #111;
    font-weight:     700;
    font-size:       0.95rem;
    text-decoration: none;
    padding:         0.25rem 0.25rem 0.6rem;
    pointer-events:  none;
    cursor:          default;
  }

  .nvb-navbar .nvb-mega-section-list {
    margin:     0;
    padding:    0;
    list-style: none;
  }

  .nvb-navbar .nvb-mega-section-list .dropdown-item {
    padding: 0.4rem 0.25rem;
  }
}

/* Mobile offcanvas: nested items as indented block lists
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  .nvb-mobile-nav__list .dropdown-menu {
    position:      static !important;
    transform:     none !important;
    display:       none;
    float:         none;
    border:        0;
    border-left:   1px solid rgba( 255, 255, 255, 0.08 );
    border-radius: 0;
    box-shadow:    none;
    background:    transparent;
    margin:        0.15rem 0 0.35rem 1rem;
    padding:       0.1rem 0 0.1rem 0.35rem;
    min-width:     0;
    width:         auto;
  }

  .nvb-mobile-nav__list .dropdown-menu.show {
    display: block;
  }

  .nvb-mobile-nav__list .nvb-mega-section-list {
    list-style: none;
    margin:     0 0 0.5rem 0.75rem;
    padding:    0;
  }

  .nvb-mobile-nav__list .dropdown-item,
  .nvb-mobile-nav__list .nvb-mega-section-title {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    color:           rgba( 255, 255, 255, 0.8 );
    border-radius:   8px;
    padding:         0.55rem 0.85rem;
    font-size:       0.95rem;
    text-decoration: none;
  }

  .nvb-mobile-nav__list .nvb-mega-section-title {
    color:          #fff;
    font-weight:    700;
    padding-top:    0.85rem;
    padding-bottom: 0.35rem;
    font-size:      0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    opacity:        0.7;
  }

  .nvb-mobile-nav__list .dropdown-item:hover,
  .nvb-mobile-nav__list .dropdown-item:focus {
    color:      #fff;
    background: rgba( 255, 255, 255, 0.07 );
  }

  /* Active nested item (2nd / 3rd level) in the mobile offcanvas */
  .nvb-mobile-nav__list .dropdown-menu .menu-item.current-menu-item > .dropdown-item,
  .nvb-mobile-nav__list .dropdown-menu .menu-item.current-menu-ancestor > .dropdown-item,
  .nvb-mobile-nav__list .dropdown-menu .dropdown-item.active {
    color:       #fff;
    font-weight: 700;
    background:  rgba( 110, 63, 243, 0.18 );
  }

  /* Expanded top-level toggle stays visually "lit" while its submenu is open */
  .nvb-mobile-nav__list > .menu-item.dropdown > .dropdown-toggle[aria-expanded="true"] {
    color:      #fff !important;
    background: rgba( 255, 255, 255, 0.06 );
  }

  /* Mobile chevron sits on the right edge of the row and rotates 90° */
  .nvb-mobile-nav__list .dropdown-toggle .nvb-nav-caret {
    margin-left: auto;
  }

  .nvb-mobile-nav__list .dropdown-toggle[aria-expanded="true"] .nvb-nav-caret {
    transform: rotate( 90deg );
  }
}

/* Suppress Bootstrap's default caret everywhere — we render our own chevron
   via the Bootstrap Icons class from the nav walker. */
.nvb-navbar .dropdown-toggle::after,
.nvb-mobile-nav__list .dropdown-toggle::after {
  display: none !important;
}

.nvb-nav-caret {
  display:     inline-block;
  font-size:   0.8rem;
  opacity:     0.75;
  transition:  transform var(--rv-dur) var(--rv-ease);
}

.nvb-navbar .dropdown-toggle .nvb-nav-caret {
  margin-left: 0.35rem;
}

.nvb-navbar .dropdown-toggle[aria-expanded="true"] .nvb-nav-caret {
  transform: rotate( 180deg );
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.nvb-btn-primary {
  background:     var(--rv-gradient);
  color:          #fff;
  border:         none;
  border-radius:  50px;
  font-weight:    600;
  letter-spacing: 0.01em;
  transition:     opacity var(--rv-dur) var(--rv-ease),
                  transform var(--rv-dur) var(--rv-ease),
                  box-shadow var(--rv-dur) var(--rv-ease);
}

.nvb-btn-primary:hover {
  color:      #fff;
  opacity:    0.9;
  transform:  translateY(-1px);
  box-shadow: 0 8px 24px rgba(110, 63, 243, 0.4);
}

.nvb-btn-ghost {
  background:    transparent;
  color:         rgba(255, 255, 255, 0.8);
  border:        1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-weight:   500;
  transition:    color var(--rv-dur) var(--rv-ease),
                 border-color var(--rv-dur) var(--rv-ease),
                 background var(--rv-dur) var(--rv-ease);
}

.nvb-btn-ghost:hover {
  color:        var(--rv-text);
  border-color: rgba(255, 255, 255, 0.45);
  background:   rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   8. Badges & Tags
   -------------------------------------------------------------------------- */

.nvb-badge {
  display:        inline-block;
  background:     var(--rv-tag-bg);
  color:          var(--rv-tag-text);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  padding:        0.35em 0.85em;
  border-radius:  50px;
  border:         1px solid rgba(110, 63, 243, 0.3);
}

.nvb-tag {
  display:         inline-block;
  background:      var(--rv-tag-bg);
  color:           var(--rv-tag-text);
  font-size:       0.8125rem;
  font-weight:     500;
  padding:         0.25em 0.7em;
  border-radius:   50px;
  text-decoration: none;
  transition:      background var(--rv-dur);
}

.nvb-tag:hover {
  background: rgba(110, 63, 243, 0.28);
  color:      var(--rv-tag-text);
}

.nvb-dot {
  display:        inline-block;
  width:          3px;
  height:         3px;
  background:     rgba(255, 255, 255, 0.3);
  border-radius:  50%;
  vertical-align: middle;
  margin:         0 0.25rem;
}

/* --------------------------------------------------------------------------
   9. Section typography helpers
   -------------------------------------------------------------------------- */

.nvb-section-title {
  font-size:   clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color:       var(--rv-text);
}

.nvb-section-lead {
  font-size:   clamp(1rem, 2vw, 1.2rem);
  color:       var(--rv-text-muted);
  max-width:   560px;
  line-height: 1.65;
}

.nvb-highlight {
  background:                  var(--rv-gradient);
  -webkit-background-clip:     text;
  -webkit-text-fill-color:     transparent;
  background-clip:             text;
}

/* --------------------------------------------------------------------------
   11. Trust bar
   -------------------------------------------------------------------------- */

.nvb-trust {
  border-top:    1px solid var(--rv-border);
  border-bottom: 1px solid var(--rv-border);
  background:    rgba(255, 255, 255, 0.015);
}

.nvb-trust__logo {
  opacity:    0.4;
  transition: opacity var(--rv-dur);
  filter:     grayscale(1);
}

.nvb-trust__logo:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   12. Feature cards
   -------------------------------------------------------------------------- */

.nvb-feature-card {
  background:    var(--rv-bg-card);
  border:        1px solid var(--rv-border);
  border-radius: 20px;
  padding:       2rem;
  transition:    transform var(--rv-dur) var(--rv-ease),
                 border-color var(--rv-dur) var(--rv-ease),
                 box-shadow var(--rv-dur) var(--rv-ease);
}

.nvb-feature-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(110, 63, 243, 0.35);
  box-shadow:   0 16px 48px rgba(110, 63, 243, 0.12);
}

.nvb-feature-card__icon {
  font-size:   2.25rem;
  line-height: 1;
}

.nvb-feature-card__title {
  font-weight: 700;
  color:       var(--rv-text);
}

/* --------------------------------------------------------------------------
   13. Showcase section
   -------------------------------------------------------------------------- */

.nvb-showcase {
  background: var(--rv-bg-alt);
}

.nvb-checklist__icon {
  width:           24px;
  height:          24px;
  background:      var(--rv-gradient);
  border-radius:   50%;
  color:           #fff;
  font-size:       0.75rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* --------------------------------------------------------------------------
   14. Stats
   -------------------------------------------------------------------------- */

.nvb-stats {
  border-top: 1px solid var(--rv-border);
}

.nvb-stat__number {
  font-size:                   clamp(2.25rem, 5vw, 3.5rem);
  font-weight:                 800;
  background:                  var(--rv-gradient);
  -webkit-background-clip:     text;
  -webkit-text-fill-color:     transparent;
  background-clip:             text;
  line-height:                 1.1;
}

.nvb-stat__label {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   15. Blog / Post cards
   -------------------------------------------------------------------------- */

.nvb-post-card {
  background:      var(--rv-bg-card);
  border:          1px solid var(--rv-border);
  border-radius:   20px;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  transition:      transform var(--rv-dur) var(--rv-ease),
                   border-color var(--rv-dur) var(--rv-ease),
                   box-shadow var(--rv-dur) var(--rv-ease);
}

.nvb-post-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:   var(--rv-shadow-md);
}

.nvb-post-card__thumb-link {
  display:  block;
  overflow: hidden;
}

.nvb-post-card__thumb {
  aspect-ratio: 16 / 9;
  object-fit:   cover;
  transition:   transform 0.4s var(--rv-ease);
}

.nvb-post-card:hover .nvb-post-card__thumb {
  transform: scale(1.04);
}

.nvb-post-card__body {
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  flex:           1;
}

.nvb-post-card__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0.25rem;
}

.nvb-post-card__title {
  font-weight:   700;
  margin-bottom: 0;
}

.nvb-post-card__title a {
  color:           var(--rv-text);
  text-decoration: none;
}

.nvb-post-card__excerpt {
  flex: 1;
}

/* --------------------------------------------------------------------------
   16. CTA section
   -------------------------------------------------------------------------- */

.nvb-cta {
  background: var(--rv-bg-alt);
}

.nvb-cta__card {
  position:      relative;
  background:    linear-gradient(135deg, rgba(110,63,243,0.12) 0%, rgba(14,118,253,0.08) 100%);
  border:        1px solid rgba(110, 63, 243, 0.25);
  border-radius: 32px;
  padding:       5rem 2rem;
  overflow:      hidden;
}

.nvb-cta__orb {
  position:       absolute;
  width:          400px;
  height:         400px;
  background:     radial-gradient(circle, rgba(110,63,243,0.2) 0%, transparent 70%);
  border-radius:  50%;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   16b. Home — тёмный низ (stage2) + плавающий Contact us
   -------------------------------------------------------------------------- */

.hp-page-bottom {
  background:     #090d06;
  min-height:     min(24vh, 220px);
  padding-block:  2.5rem;
}

body.home .nvb-footer {
  background:  #090d06;
  border-top:  1px solid rgba(255, 255, 255, 0.06);
}

.hp-float-contact {
  position:        fixed;
  right:           max(1rem, env(safe-area-inset-right, 0px));
  bottom:          max(1rem, env(safe-area-inset-bottom, 0px));
  z-index:         1025;
  display:         inline-flex;
  align-items:     center;
  gap:             0.65rem;
  max-width:       calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  padding:         0.35rem 0.85rem 0.35rem 0.35rem;
  border-radius:   999px;
  background:      rgba(14, 16, 30, 0.92);
  border:          1px solid rgba(255, 255, 255, 0.12);
  box-shadow:      0 10px 36px rgba(0, 0, 0, 0.35);
  color:           #ffffff;
  text-decoration: none;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     600;
  font-size:       0.8125rem;
  line-height:     1.2;
  transition:      box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hp-float-contact:hover {
  color:           #ffffff;
  border-color:    rgba(255, 255, 255, 0.22);
  box-shadow:      0 12px 42px rgba(0, 0, 0, 0.45);
  transform:       translateY(-1px);
}

.hp-float-contact__disc {
  flex-shrink:      0;
  width:            2.75rem;
  height:           2.75rem;
  border-radius:    50%;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background:       #c72030;
  color:            #ffffff;
  font-size:        1.25rem;
  box-shadow:       inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hp-float-contact__label {
  padding-right: 0.15rem;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

@media (max-width: 380px) {
  .hp-float-contact__label {
    display: none;
  }

  .hp-float-contact {
    padding: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.nvb-footer {
  background: var(--rv-bg-alt);
  border-top: 1px solid var(--rv-border);
  color:      var(--rv-text-muted);
}

.nvb-footer__bottom {
  border-top: 1px solid var(--rv-border);
}

.nvb-footer__tagline {
  max-width: 260px;
}

.nvb-footer__nav li a {
  color:           rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size:       0.9375rem;
  transition:      color var(--rv-dur);
}

.nvb-footer__nav li a:hover {
  color: var(--rv-text);
}

.nvb-social-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2.25rem;
  height:          2.25rem;
  font-size:       1.1rem;
  color:           rgba( 255, 255, 255, 0.55 );
  border-radius:   50%;
  border:          1px solid rgba( 255, 255, 255, 0.12 );
  transition:      color var(--rv-dur) var(--rv-ease),
                   background var(--rv-dur) var(--rv-ease),
                   border-color var(--rv-dur) var(--rv-ease),
                   transform var(--rv-dur) var(--rv-ease);
}

.nvb-social-link:hover {
  color:        #fff;
  border-color: rgba( 255, 255, 255, 0.35 );
  background:   rgba( 255, 255, 255, 0.06 );
  transform:    translateY( -2px );
}

.nvb-footer__legal {
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   18. Main content area (inner pages)
   -------------------------------------------------------------------------- */

.nvb-main {
  min-height: calc(100svh - var(--rv-navbar-h));
  padding-top: calc(var(--rv-navbar-h) + 2rem);
}

/* --------------------------------------------------------------------------
   19. Archive header
   -------------------------------------------------------------------------- */

.nvb-archive-header .nvb-section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   20. Single post entry
   -------------------------------------------------------------------------- */

.nvb-entry__title {
  letter-spacing: -0.02em;
}

.nvb-entry__content {
  font-size:   1.0625rem;
  line-height: 1.85;
  color:       rgba(255, 255, 255, 0.85);
}

.nvb-entry__content p           { margin-bottom: 1.5rem; }
.nvb-entry__content h2          { font-size: 1.75rem;   margin-top: 2.5rem;  margin-bottom: 1rem;   color: var(--rv-text); }
.nvb-entry__content h3          { font-size: 1.375rem;  margin-top: 2rem;    margin-bottom: 0.875rem; color: var(--rv-text); }
.nvb-entry__content ul,
.nvb-entry__content ol          { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.nvb-entry__content li          { margin-bottom: 0.5rem; }
.nvb-entry__content blockquote  {
  border-left:   3px solid var(--rv-violet);
  padding:       1rem 1.5rem;
  margin:        2rem 0;
  background:    var(--rv-bg-card);
  border-radius: 0 12px 12px 0;
  color:         var(--rv-text-muted);
  font-style:    italic;
}
.nvb-entry__content img {
  border-radius: 12px;
  max-width:     100%;
}

/* Post navigation (single post prev/next) */
.nvb-post-navigation .nav-links {
  display:         flex;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.5rem 0;
  border-top:      1px solid var(--rv-border);
}

.nvb-post-navigation .nav-previous a,
.nvb-post-navigation .nav-next a {
  text-decoration: none;
  color:           var(--rv-text);
  display:         block;
}

.nvb-post-navigation .nav-title {
  font-weight: 600;
  font-size:   1rem;
}

/* Pagination (archive / search / index) */
.posts-navigation .nav-links {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  flex-wrap:       wrap;
  padding-top:     1.5rem;
  border-top:      1px solid var(--rv-border);
}

.posts-navigation .nav-previous a,
.posts-navigation .nav-next a {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
  color:           rgba( 255, 255, 255, 0.85 );
  font-weight:     500;
  padding:         0.65rem 1.1rem;
  border-radius:   50px;
  border:          1px solid rgba( 255, 255, 255, 0.15 );
  transition:      color var(--rv-dur) var(--rv-ease),
                   border-color var(--rv-dur) var(--rv-ease),
                   background var(--rv-dur) var(--rv-ease);
}

.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover {
  color:        #fff;
  border-color: rgba( 255, 255, 255, 0.35 );
  background:   rgba( 255, 255, 255, 0.04 );
}

/* --------------------------------------------------------------------------
   21. Sidebar
   -------------------------------------------------------------------------- */

.widget-area .widget {
  background:    var(--rv-bg-card);
  border:        1px solid var(--rv-border);
  border-radius: 16px;
  padding:       1.5rem;
}

/* --------------------------------------------------------------------------
   22. Breadcrumbs
   -------------------------------------------------------------------------- */

.nvb-breadcrumb-nav .breadcrumb {
  --bs-breadcrumb-divider:      '›';
  --bs-breadcrumb-item-color:   var(--rv-text-muted);
  --bs-breadcrumb-active-color: var(--rv-text);
  font-size: 0.875rem;
}

.nvb-breadcrumb-nav .breadcrumb-item a {
  color:           var(--rv-text-muted);
  text-decoration: none;
}

.nvb-breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--rv-text);
}

/* --------------------------------------------------------------------------
   23. 404 page
   -------------------------------------------------------------------------- */

.nvb-404__number {
  font-size:   clamp(5rem, 18vw, 12rem);
  font-weight: 900;
  line-height: 1;
  background:  var(--rv-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
  opacity: 0.25;
}

.nvb-no-results__icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           80px;
  height:          80px;
  margin:          0 auto;
  font-size:       2.25rem;
  color:           var(--rv-tag-text);
  background:      var(--rv-tag-bg);
  border-radius:   50%;
  border:          1px solid rgba( 110, 63, 243, 0.28 );
}

/* --------------------------------------------------------------------------
   24. Search form
   -------------------------------------------------------------------------- */

.search-form {
  display:   flex;
  gap:       0.5rem;
  max-width: 420px;
  margin:    0 auto;
}

.search-field {
  flex:          1;
  background:    var(--rv-bg-card);
  border:        1px solid var(--rv-border);
  border-radius: 50px;
  color:         var(--rv-text);
  padding:       0.625rem 1.25rem;
  font-family:   var(--rv-font);
  font-size:     0.9375rem;
  outline:       none;
  transition:    border-color var(--rv-dur);
}

.search-field:focus {
  border-color: rgba(110, 63, 243, 0.5);
}

.search-submit {
  background:  var(--rv-gradient);
  border:      none;
  border-radius: 50px;
  color:       #fff;
  font-weight: 600;
  padding:     0.625rem 1.5rem;
  cursor:      pointer;
  font-family: var(--rv-font);
  font-size:   0.9375rem;
  transition:  opacity var(--rv-dur);
}

.search-submit:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   24b. Single payment method layout helpers
   -------------------------------------------------------------------------- */

.nvb-pm-hero__thumb {
  width:       80px;
  height:      80px;
  object-fit:  contain;
}

.nvb-pm-hero__long {
  max-width: 800px;
}

.nvb-pm-flag {
  height:         14px;
  vertical-align: middle;
}

.nvb-pm-chart {
  min-height: 200px;
}

.nvb-pm-chart__bar {
  width:         40px;
  height:        var( --nvb-bar-h, 8px );
  border-radius: 6px 6px 0 0;
}

.nvb-pm-details__label { width: 15%; }
.nvb-pm-details__value { width: 35%; }

/* --------------------------------------------------------------------------
   25. WordPress alignment classes
   -------------------------------------------------------------------------- */

.alignleft    { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright   { float: right; margin-left:  1.5rem; margin-bottom: 1rem; }
.aligncenter  { display: block; margin-left: auto; margin-right: auto; }

.alignwide {
  width:        calc(100% + 4rem);
  max-width:    none;
  margin-left:  -2rem;
  margin-right: -2rem;
}

.alignfull {
  width:        100vw;
  max-width:    none;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   25b. Page template: Sections (Bootstrap Canvas)
   -------------------------------------------------------------------------- */

.nvb-sections {
  padding-top: var(--rv-navbar-h);
}

.nvb-sections > section,
.nvb-sections > div,
.nvb-sections > article {
  position: relative;
}

/* --------------------------------------------------------------------------
   25c. Page template: Elementor Page (with theme chrome)
   -------------------------------------------------------------------------- */

.nvb-elementor-page {
  padding-top: var(--rv-navbar-h);
}

/* --------------------------------------------------------------------------
   25d. Bootstrap components inside nvb-entry__content — reset overrides
   -------------------------------------------------------------------------- */

.nvb-entry__content .row { margin-bottom: 0; }
.nvb-entry__content .col,
.nvb-entry__content [class*="col-"] { margin-bottom: 0; }
.nvb-entry__content .card { color: inherit; }

.nvb-entry__content .container,
.nvb-entry__content .container-fluid,
.nvb-entry__content .container-sm,
.nvb-entry__content .container-md,
.nvb-entry__content .container-lg,
.nvb-entry__content .container-xl,
.nvb-entry__content .container-xxl {
  padding-left:  var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
}

.nvb-entry__content .btn {
  font-size: inherit;
  line-height: normal;
}

.nvb-entry__content .table {
  color: var(--rv-text);
}

/* --------------------------------------------------------------------------
   26. Comments
   -------------------------------------------------------------------------- */

.comments-area {
  margin-top:  3rem;
  padding-top: 2rem;
  border-top:  1px solid var(--rv-border);
}

.comments-title {
  font-size:     1.375rem;
  font-weight:   700;
  margin-bottom: 1.5rem;
}

.comment-body {
  background:    var(--rv-bg-card);
  border:        1px solid var(--rv-border);
  border-radius: 16px;
  padding:       1.5rem;
  margin-bottom: 1rem;
}

.comment-reply-link,
.comment-edit-link {
  color:           var(--rv-violet);
  text-decoration: none;
  font-size:       0.875rem;
  font-weight:     500;
}

.comment-form input,
.comment-form textarea {
  background:    var(--rv-bg-card);
  border:        1px solid var(--rv-border);
  border-radius: 12px;
  color:         var(--rv-text);
  padding:       0.75rem 1rem;
  width:         100%;
  font-family:   var(--rv-font);
  margin-bottom: 1rem;
  outline:       none;
  transition:    border-color var(--rv-dur);
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: rgba(110, 63, 243, 0.5);
}

.comment-form .submit {
  background:    var(--rv-gradient);
  border:        none;
  border-radius: 50px;
  color:         #fff;
  font-weight:   600;
  padding:       0.625rem 2rem;
  cursor:        pointer;
  font-family:   var(--rv-font);
}

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .nvb-cta__card {
    padding: 3rem 1.5rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --rv-section-py: 3.5rem;
  }
}

/* ==========================================================================
   28. Homepage — faithful reference reproduction
   ========================================================================== */

/* --------------------------------------------------------------------------
   28b. Glass CTA button (exact match from reference)
   -------------------------------------------------------------------------- */

.nvb-glass-btn-wrap {
  display:           inline-flex;
  align-items:       center;
  justify-content:   center;
  position:          relative;
  overflow:          hidden;
  border-radius:     16px;
  background:        rgba(255, 255, 255, 0.14);
  border:            3px solid rgba(255, 255, 255, 0.9);
  backdrop-filter:   blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:        0 12px 35px rgba(0, 0, 0, 0.25), 0 0 40px rgba(0, 200, 255, 0.25);
  animation:         glassPulseLift 8s ease-in-out infinite;
  transition:        transform 0.4s ease, box-shadow 0.4s ease;
}

.nvb-glass-btn-wrap::before {
  content:       "";
  position:      absolute;
  inset:         -6px;
  border-radius: inherit;
  background:    linear-gradient(135deg, rgba(0, 200, 255, 0.6), rgba(120, 0, 255, 0.6));
  opacity:       0.55;
  filter:        blur(22px);
  z-index:       -1;
  pointer-events: none;
  animation:     glowBreath 8s ease-in-out infinite;
}

.nvb-glass-btn-wrap::after {
  content:       "";
  position:      absolute;
  width:         160%;
  height:        160%;
  top:           -70%;
  left:          -70%;
  background:    radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0) 60%);
  transform:     rotate(25deg);
  pointer-events: none;
  animation:     liquidLoop 4s ease-in-out infinite;
}

.nvb-glass-btn-wrap:hover {
  transform:  translateY(-3px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35), 0 0 55px rgba(0, 200, 255, 0.45);
}

.nvb-glass-btn-wrap:hover,
.nvb-glass-btn-wrap:hover::before,
.nvb-glass-btn-wrap:hover::after {
  animation-play-state: paused;
}

.nvb-glass-btn {
  display:         block;
  padding:         0.85rem 2rem;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     900;
  font-size:       1.05rem;
  color:           #ffffff;
  text-decoration: none;
  white-space:     nowrap;
  letter-spacing:  0.02em;
  position:        relative;
  z-index:         1;
}

.nvb-glass-btn:hover {
  color: #ffffff;
}

@keyframes glassPulseLift {
  0%,  80% { transform: translateY(0);    box-shadow: 0 12px 35px rgba(0,0,0,0.25), 0 0 35px rgba(0,200,255,0.22); }
  88%       { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(0,0,0,0.35), 0 0 55px rgba(0,200,255,0.45); }
  100%      { transform: translateY(0);    box-shadow: 0 12px 35px rgba(0,0,0,0.25), 0 0 35px rgba(0,200,255,0.22); }
}

@keyframes glowBreath {
  0%   { opacity: 0.45; filter: blur(22px); }
  50%  { opacity: 0.70; filter: blur(26px); }
  100% { opacity: 0.45; filter: blur(22px); }
}

@keyframes liquidLoop {
  0%   { top: -70%; left: -70%; opacity: 0.25; }
  50%  { opacity: 0.6; }
  100% { top: -50%; left: -50%; opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   28c. Section background classes
   -------------------------------------------------------------------------- */

.nvb-section-dark {
  background: #020617;
  color:      #ffffff;
}

.nvb-section-light {
  background: #ffffff;
  color:      #1a1a2e;
}

.nvb-section-navy {
  background: #0b1437;
  color:      #ffffff;
}

.nvb-dark-text  { color: #1a1a2e !important; }
.nvb-dark-muted { color: #555 !important; }

/* --------------------------------------------------------------------------
   28d. Featured / Press logos bar
   -------------------------------------------------------------------------- */

.nvb-featured {
  background:    #ffffff;
  border-top:    1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

.nvb-featured__title {
  font-family: 'Inter', Helvetica, sans-serif;
  font-size:   1.5rem;
  font-weight: 700;
  color:       #1a1a2e;
}

.nvb-logo-img {
  opacity:    0.75;
  filter:     grayscale(0.3);
  transition: opacity var(--rv-dur), filter var(--rv-dur);
}

.nvb-logo-img:hover {
  opacity: 1;
  filter:  grayscale(0);
}

/* --------------------------------------------------------------------------
   28e. Services pill tabs
   -------------------------------------------------------------------------- */

.nvb-pill-tabs {
  gap: 0.4rem;
}

.nvb-pill-tab {
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  color:         rgba(255, 255, 255, 0.65);
  font-family:   'Inter', Helvetica, sans-serif;
  font-weight:   500;
  font-size:     0.9375rem;
  padding:       0.6rem 1.25rem;
  cursor:        pointer;
  transition:    background var(--rv-dur), color var(--rv-dur), border-color var(--rv-dur);
  white-space:   nowrap;
}

.nvb-pill-tab:hover {
  background:   rgba(255, 255, 255, 0.1);
  color:        #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.nvb-pill-tab.active {
  background:   var(--rv-gradient);
  border-color: transparent;
  color:        #ffffff;
  font-weight:  700;
}

.nvb-services__panels {
  min-height: 260px;
  padding-top: 1rem;
}

.nvb-services__desc {
  font-size:   1rem;
  line-height: 1.8;
  color:       rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   28f. Finance / control tabs (light section)
   -------------------------------------------------------------------------- */

.nvb-finance-tabs {
  gap:         0.5rem;
  flex-wrap:   wrap;
  border:      none;
}

.nvb-finance-tab {
  background:     transparent;
  border:         2px solid #d0d0d0;
  border-radius:  50px;
  color:          #555;
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    600;
  font-size:      0.9375rem;
  padding:        0.6rem 1.5rem;
  cursor:         pointer;
  transition:     background var(--rv-dur), color var(--rv-dur), border-color var(--rv-dur);
}

.nvb-finance-tab:hover {
  border-color: #1a1a2e;
  color:        #1a1a2e;
}

.nvb-finance-tab.active {
  background:   #1a1a2e;
  border-color: #1a1a2e;
  color:        #ffffff;
}

.nvb-finance__img {
  max-height: 520px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   28g. UK Trust section
   -------------------------------------------------------------------------- */

.nvb-uk-trust {
  background: linear-gradient(160deg, #0b1437 0%, #020617 60%, #0b3a66 100%);
}

/* --------------------------------------------------------------------------
   28h. CTA "Always at your service" section
   -------------------------------------------------------------------------- */

.nvb-cta-service {
  background: #020617;
}

.nvb-cta-service__card {
  position:      relative;
  background:    linear-gradient(135deg, rgba(110,63,243,0.12) 0%, rgba(14,118,253,0.08) 100%);
  border:        1px solid rgba(110, 63, 243, 0.3);
  border-radius: 32px;
  padding:       5rem 2rem;
}

/* --------------------------------------------------------------------------
   28i. Navbar logo (SVG)
   -------------------------------------------------------------------------- */

.nvb-brand img,
.nvb-brand svg {
  height:    40px;
  width:     auto;
  max-width: 160px;
}

/* --------------------------------------------------------------------------
   28j. Homepage responsive overrides
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .nvb-glass-btn-wrap {
    margin-left:  auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  .nvb-pill-tabs {
    flex-direction: row !important;
    flex-wrap:      wrap;
  }

  .nvb-cta-service__card {
    padding: 3rem 1rem;
  }
}

/* ==========================================================================
   29. Homepage hp-* component styles (Bootstrap 5 faithful port)
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 Hero
   -------------------------------------------------------------------------- */

.hp-hero {
  position:   relative;
  height:     620px;
  overflow:   hidden;
  background: #020617;
}

#nvb-hero-canvas {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  display:  block;
}

.hp-hero__inner {
  position: relative;
  z-index:  2;
  height:   100%;
}

.hp-hero__text {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding-top:    100px;
  padding-bottom: 2rem;
}

.hp-hero__h1 {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(2rem, 4.5vw, 46px);
  color:          #ffffff;
  line-height:    1.25;
  margin-bottom:  0;
}

.hp-hero__h1--line2 {
  margin-top:     0.1rem;
}

.hp-hero__lead {
  font-size:   clamp(0.95rem, 1.8vw, 1.2rem);
  color:       rgba(255, 255, 255, 0.9);
  margin-top:  1.5rem;
  line-height: 1.65;
  max-width:   520px;
}

.hp-hero__carousel-col {
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  height:          100%;
  overflow:        hidden;
}

.hp-hero__owl {
  width:     100%;
  max-width: 100%;
}

.hp-hero__owl .owl-stage,
.hp-hero__owl .owl-item {
  display:     flex;
  align-items: flex-end;
}

.hp-hero__owl .item {
  width: 100%;
}

.hp-hero__slide-img {
  display:    block;
  max-height: 580px;
  max-width:  100%;
  object-fit: contain;
  margin:     0 auto;
}

/* --------------------------------------------------------------------------
   §1 Glass CTA button (exact match)
   -------------------------------------------------------------------------- */

.hp-glass-wrap {
  display:         inline-flex;
  position:        relative;
  overflow:        hidden;
  border-radius:   16px;
  background:      rgba(255, 255, 255, 0.14);
  border:          3px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:      0 12px 35px rgba(0,0,0,0.25), 0 0 40px rgba(0,200,255,0.25);
  animation:       hp-glassPulseLift 8s ease-in-out infinite;
  transition:      transform 0.4s ease, box-shadow 0.4s ease;
}

.hp-glass-wrap::before {
  content:        '';
  position:       absolute;
  inset:          -6px;
  border-radius:  inherit;
  background:     linear-gradient(135deg, rgba(0,200,255,0.6), rgba(120,0,255,0.6));
  opacity:        0.55;
  filter:         blur(22px);
  z-index:        -1;
  pointer-events: none;
  animation:      hp-glowBreath 8s ease-in-out infinite;
}

.hp-glass-wrap::after {
  content:        '';
  position:       absolute;
  width:          160%;
  height:         160%;
  top:            -70%;
  left:           -70%;
  background:     radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0) 60%);
  transform:      rotate(25deg);
  pointer-events: none;
  animation:      hp-liquidLoop 4s ease-in-out infinite;
}

.hp-glass-wrap:hover {
  transform:  translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35), 0 0 55px rgba(0,200,255,0.45);
}

.hp-glass-wrap:hover,
.hp-glass-wrap:hover::before,
.hp-glass-wrap:hover::after {
  animation-play-state: paused;
}

.hp-glass-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      3rem;
  padding:         0.875rem 2.5rem;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     900;
  font-size:       1rem;
  color:           #ffffff;
  text-decoration: none;
  white-space:     nowrap;
  position:        relative;
  z-index:         1;
}

.hp-glass-btn:hover { color: #ffffff; }

@keyframes hp-glassPulseLift {
  0%,80% { transform: translateY(0);    box-shadow: 0 12px 35px rgba(0,0,0,0.25), 0 0 35px rgba(0,200,255,0.22); }
  88%    { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(0,0,0,0.35), 0 0 55px rgba(0,200,255,0.45); }
  100%   { transform: translateY(0);    box-shadow: 0 12px 35px rgba(0,0,0,0.25), 0 0 35px rgba(0,200,255,0.22); }
}
@keyframes hp-glowBreath {
  0%,100% { opacity: 0.45; filter: blur(22px); }
  50%     { opacity: 0.70; filter: blur(26px); }
}
@keyframes hp-liquidLoop {
  0%   { top: -70%; left: -70%; opacity: 0.25; }
  50%  { opacity: 0.6; }
  100% { top: -50%; left: -50%; opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   §2 Featured in — white BG + whiteright.svg (как et_pb_section_8 / row_4)
   -------------------------------------------------------------------------- */

.hp-featured {
  position:      relative;
  background:    #ffffff;
  border-top:    1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  color:         #1a1a2e;
  overflow:      hidden;
}

.hp-featured::before {
  content:             '';
  position:            absolute;
  inset:               0;
  pointer-events:      none;
  z-index:             0;
  background-image:    url(../images/whiteright.svg);
  background-repeat:   no-repeat;
  background-position: right 0 top 0;
  background-size:   50% auto;
}

.hp-featured .container-xxl {
  position: relative;
  z-index:  1;
}

.hp-featured__heading {
  font-family:  'Inter', Helvetica, sans-serif;
  font-size:    clamp(1.1rem, 2.5vw, 1.625rem);
  font-weight:  700;
  color:        #1a1a2e;
  margin:       0;
  line-height:  1.3;
}

.hp-logos {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         1.75rem;
}

.hp-logo {
  height:     auto;
  max-height: 36px;
  width:      auto;
  max-width:  100%;
  object-fit: contain;
  opacity:    0.7;
  filter:     grayscale(0.2);
  transition: opacity 0.2s, filter 0.2s;
}

.hp-logo:hover {
  opacity: 1;
  filter:  grayscale(0);
}

.hp-press__owl {
  width: 100%;
}

.hp-press__owl .owl-stage {
  display:     flex;
  align-items: center;
}

.hp-press__owl .owl-item {
  display: flex;
}

.hp-press__slide {
  min-height: 52px;
}

.hp-press__owl .owl-nav.disabled,
.hp-press__owl .owl-dots {
  display: none;
}

.hp-hero__owl .owl-nav,
.hp-hero__owl .owl-dots {
  display: none;
}

/* --------------------------------------------------------------------------
   §3 Services & Features — black BG, min-height 730px
   Pill tabs: HORIZONTAL wrapping rows (as in reference)
   -------------------------------------------------------------------------- */

.hp-services {
  background-color: #000000;
  background-image: url(../images/Core-Banking-Black-with-lights4.png);
  background-repeat: no-repeat;
  background-position: center 118%;
  background-size: cover;
  color:        #ffffff;
  padding:      0;
  min-height:   730px;
  position:     relative;
  isolation:    isolate;
}

/* et_pb_section_15 bottom — белая волна на всю ширину → FX */
.hp-services::after {
  content:                '';
  position:               absolute;
  left:                   0;
  right:                  0;
  bottom:                 0;
  width:                  100%;
  height:                 41px;
  z-index:                3;
  pointer-events:         none;
  background-image:       var(--hp-divider-white-41);
  background-repeat:      no-repeat;
  background-position:    center bottom;
  background-size:        100% 41px;
}

.hp-services .container-xxl {
  position: relative;
  z-index:  2;
}

.hp-services__left {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.hp-services__heading {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(1.5rem, 3.5vw, 2.75rem);
  color:          #ffffff;
  letter-spacing: -0.03em;
  line-height:    1.15;
  margin-bottom:  2rem;
}


.hp-pill {
  display:       inline-block;
  padding:       0.45rem 1.1rem;
  background:    transparent;
  border:        1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  color:         rgba(255, 255, 255, 0.8);
  font-family:   'Inter', Helvetica, sans-serif;
  font-weight:   500;
  font-size:     0.875rem;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.2s, color 0.2s, border-color 0.2s;
}

.hp-pill:hover {
  background:   rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.8);
  color:        #ffffff;
}

.hp-pill.active {
  background:   #ffffff;
  border-color: #ffffff;
  color:        #000000;
  font-weight:  700;
}

.hp-services__right {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.hp-services__panel {
  padding: 0.5rem 0;
}

.hp-services__desc {
  font-size:   0.9375rem;
  line-height: 1.8;
  color:       rgb(255, 255, 255);
  font-weight: 500;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   §3 Right: decorative image column
   -------------------------------------------------------------------------- */

.hp-services__img-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
}

.hp-services__img {
  max-width:    100%;
  max-height:   500px;
  object-fit:   contain;
  border-radius: 24px;
}

@media (max-width: 991.98px) {
  .hp-services {
    background-position: center center;
    min-height: auto;
  }
}

/* --------------------------------------------------------------------------
   §3 Shared button styles (outline light / dark / primary)
   -------------------------------------------------------------------------- */

.hp-btn-outline {
  display:         inline-block;
  padding:         0.6rem 1.75rem;
  border:          1.5px solid rgba(255,255,255,0.7);
  border-radius:   8px;
  color:           #ffffff;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     600;
  font-size:       0.9375rem;
  text-decoration: none;
  background:      transparent;
  transition:      background 0.2s, color 0.2s;
  cursor:          pointer;
}

.hp-btn-outline:hover {
  background: rgba(255,255,255,0.1);
  color:      #ffffff;
}

.hp-btn-primary {
  display:         inline-block;
  padding:         0.7rem 2rem;
  background:      #000000;
  border:          none;
  border-radius:   8px;
  color:           #ffffff;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     700;
  font-size:       0.9375rem;
  text-decoration: none;
  transition:      opacity 0.2s;
  cursor:          pointer;
}

.hp-btn-primary:hover {
  color:   #ffffff;
  opacity: 0.85;
}

.hp-btn-outline-light {
  display:         inline-block;
  padding:         0.7rem 2.5rem;
  border:          1.5px solid #ffffff;
  border-radius:   8px;
  color:           #ffffff;
  font-family:     'Inter', Helvetica, sans-serif;
  font-weight:     600;
  font-size:       0.9375rem;
  text-decoration: none;
  background:      transparent;
  transition:      background 0.2s, color 0.2s;
}

.hp-btn-outline-light:hover {
  background: #ffffff;
  color:      #000000;
}

/* --------------------------------------------------------------------------
   §4 FX Journey — et_pb_section_16: track-with-currencies (desktop) /
      Trail-Mobile-3 (mobile, как в Divi deferred)
   -------------------------------------------------------------------------- */

.hp-fx {
  position:            relative;
  background-color:    #e8e9ec;
  background-image:    url(../images/track-with-currencies-o.png);
  background-repeat:     no-repeat;
  background-position: center top;
  background-size:     cover;
  color:                 #000000;
  padding:               0 0 100px;
  min-height:            560px;
  display:               flex;
  align-items:           center;
  isolation:             isolate;
}

/* Лёгкий градиент поверх фото */
.hp-fx::before {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        1;
  background:   linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(248, 248, 250, 0.12) 44%,
    rgba(248, 248, 250, 0.3) 100%
  );
}

.hp-fx::after {
  content:             '';
  position:            absolute;
  left:                0;
  right:               0;
  bottom:              0;
  width:               100%;
  height:              100px;
  z-index:             1;
  pointer-events:      none;
  background-image:    var(--hp-divider-black-100);
  background-repeat:   no-repeat;
  background-size:     100% 100px;
  transform:           scale(1, -1);
}

.hp-fx .container-xxl {
  position: relative;
  z-index:  2;
}

.hp-fx__heading {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  color:          #000000;
  letter-spacing: -0.02em;
  line-height:    1.15;
  margin-bottom:  1.25rem;
}

.hp-fx__lead {
  font-size:   1rem;
  line-height: 1.75;
  color:       #333333;
  max-width:   560px;
  margin-bottom: 1.5rem;
}


/* --------------------------------------------------------------------------
   §5 Cards — black BG, 600px min-height, cards image right
   -------------------------------------------------------------------------- */

.hp-cards {
  position:         relative;
  background-color: #000000;
  color:            #ffffff;
  padding:          5rem 0;
  min-height:       600px;
  overflow:         hidden;
}

.hp-cards__bg {
  position:            absolute;
  inset:               0;
  z-index:             0;
  background-image:    url(../images/Cards-on-stand-universal-size-3nd-try-scaled.jpg);
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: right 6% bottom 0;
}

@media (max-width: 991.98px) {
  .hp-cards__bg {
    background-size:     cover;
    background-position: center center;
  }
}

.hp-cards__overlay {
  position:       absolute;
  inset:          0;
  z-index:        1;
  /*background:     linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100% );*/
  pointer-events: none;
}

/* et_pb_section_17 bottom — белая волна → приложение */
.hp-cards::after {
  content:                '';
  position:               absolute;
  left:                   0;
  right:                  0;
  bottom:                 0;
  width:                  100%;
  height:                 41px;
  z-index:                4;
  pointer-events:         none;
  background-image:       var(--hp-divider-white-41);
  background-repeat:      no-repeat;
  background-position:    center bottom;
  background-size:        100% 41px;
}

.hp-cards > .container-xxl {
  z-index: 2;
}

.hp-cards__heading {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  color:          #ffffff;
  letter-spacing: -0.02em;
  line-height:    1.15;
  margin-bottom:  1rem;
}

.hp-cards__lead {
  font-size:   0.9375rem;
  line-height: 1.75;
  color:       rgb(255, 255, 255);
  max-width:   520px;
  margin-bottom: 1.5rem;
}

.hp-cards__image-col {
  position: relative;
}

.hp-cards__img {
  max-height: 480px;
  object-fit: contain;
  max-width:  100%;
}

/* Pay method badges */
.hp-cards__badges-row {
  max-width: 28rem;
}

.hp-pay-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #ffffff;
  border-radius:   16px;
  padding:         1rem 1.5rem;
  min-height:      6rem;
}

.hp-pay-icon {
  height:     56px;
  width:      auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   §6 Noveba App — white BG, left text + right multi-phone display
   -------------------------------------------------------------------------- */

.hp-app {
  background: #ffffff;
  color:      #000000;
  padding:    0;
  overflow:   hidden;
}

.hp-app__heading {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(1.5rem, 3.5vw, 2.5rem);
  color:          #000000;
  letter-spacing: -0.03em;
  line-height:    1.2;
  margin-bottom:  1.5rem;
}

.hp-app__lead {
  font-size:   0.9375rem;
  line-height: 1.75;
  color:       #444444;
  max-width:   400px;
}

/* Multi-phone showcase: center phone large, side phones smaller */
.hp-app__phones {
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  gap:             -1rem;
  position:        relative;
}

.hp-app__phone {
  border-radius: 28px;
  object-fit:    contain;
  flex-shrink:   0;
}

.hp-app__phone--side {
  max-height: 340px;
  opacity:    0.7;
  filter:     brightness(0.9);
  margin-bottom: 1.5rem;
  max-width:  180px;
}

.hp-app__phone--center {
  max-height: 500px;
  z-index:    1;
  position:   relative;
  max-width:  240px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

.hp-app__carousel-wrap {
  padding: 1rem 0 1.5rem;
}

.hp-app__carousel-stage {
  position:   relative;
  z-index:    0;
  padding:    0;
}

.hp-app__owl {
  position: relative;
  z-index:  1;
  padding:  0 2.75rem;
}

.hp-app__slide-frame {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-height:       380px;
  transform:        scale(0.78);
  transform-origin: center center;
  transition:       transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.35s ease;
  will-change:      transform;
}

.hp-app__owl .owl-item.center .hp-app__slide-frame {
  transform: scale(1);
  opacity:   1;
  z-index:   5;
}

.hp-app__owl .owl-item:not(.center) .hp-app__slide-frame {
  opacity: 0.82;
}

.hp-app__slide-frame::after,
.hp-app__slide-frame::before {
  content: none;
}

@media (min-width: 992px) {
  .hp-app__owl .owl-item {
    z-index: 1;
  }

  .hp-app__owl .owl-item.center {
    z-index: 4;
  }
}

.hp-app__slide-img {
  max-height: 520px;
  object-fit: contain;
  margin:     0 auto;
}

.hp-app__owl .owl-nav {
  position:        absolute;
  left:            0;
  right:           0;
  top:             46%;
  transform:       translateY(-50%);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin:          0;
  padding:         0;
  pointer-events:  none;
}

/* owl-stage-outer остаётся overflow:hidden (дефолт) — вместо этого
   компенсируем масштаб через padding внутри stage, чтобы ничего не обрезалось */

@media (min-width: 992px) {
  .hp-app__owl .owl-nav {
    top: 42%;
  }
}

.hp-app__owl .owl-nav button.owl-prev,
.hp-app__owl .owl-nav button.owl-next {
  pointer-events: auto;
  position:       static;
  width:          3rem;
  height:         3rem;
  border-radius:  50%;
  background:     #ffffff !important;
  opacity:        1 !important;
  margin:         0 !important;
  box-shadow:     0 2px 18px rgba(0, 0, 0, 0.28);
  display:        inline-flex !important;
  align-items:    center;
  justify-content: center;
  transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.hp-app__owl .owl-nav button.owl-prev:hover,
.hp-app__owl .owl-nav button.owl-next:hover {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.38);
}

.hp-app__owl .owl-nav button.owl-prev span,
.hp-app__owl .owl-nav button.owl-next span {
  line-height: 0;
}

.hp-app__nav-icon {
  display:       inline-block;
  width:         0.55rem;
  height:        0.55rem;
  border-color:  #c72030;
  border-style:  solid;
  border-width:  0 2px 2px 0;
}

.hp-app__nav-icon--prev {
  transform: translateX(2px) rotate(135deg);
}

.hp-app__nav-icon--next {
  transform: translateX(-2px) rotate(-45deg);
}

.hp-app__owl .owl-dots {
  display: none;
}

.hp-app__owl.owl-theme .owl-nav {
  margin-top: 0;
}

.hp-app__owl.owl-theme .owl-nav [class*='owl-'] {
  font-size: 0;
  line-height: 0;
}

.hp-hero__owl .owl-item img {
  width:     auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   §7 UK Trust — dark split layout (text left / photo right)
   -------------------------------------------------------------------------- */

.hp-uk {
  position:      relative;
  min-height:    650px;
  color:         #ffffff;
  display:       flex;
  align-items:   center;
  padding:       0;
  overflow:      hidden;
  isolation:     isolate;
}

/* et_pb_section_19 top — белая волна на всю ширину (переход от белого блока приложения) */
.hp-uk::before {
  content:                '';
  position:               absolute;
  left:                   0;
  right:                  0;
  top:                    0;
  width:                  100%;
  height:                 38px;
  z-index:                4;
  pointer-events:         none;
  background-image:       var(--hp-divider-white-top-38);
  background-repeat:      no-repeat;
  background-position:    center top;
  background-size:        100% 38px;
}

.hp-uk__bg {
  position:            absolute;
  inset:               0;
  z-index:             0;
  background-image:    url(../images/Lion-UK13.jpg);
  background-size:     cover;
  background-position: center center;
}

.hp-uk__overlay {
  position:       absolute;
  inset:          0;
  z-index:        1;
  background:     linear-gradient(90deg, rgba(2,6,23,0.76) 0%, rgba(2,6,23,0.42) 50%, rgba(2,6,23,0.2) 100%);
  pointer-events: none;
}

/* Низ UK: белая волна к следующей светлой секции */
.hp-uk::after {
  content:                '';
  position:               absolute;
  left:                   0;
  right:                  0;
  bottom:                 0;
  width:                  100%;
  height:                 41px;
  z-index:                4;
  pointer-events:         none;
  background-image:       var(--hp-divider-white-41);
  background-repeat:      no-repeat;
  background-position:    center bottom;
  background-size:        100% 41px;
}

.hp-uk > .container-xxl {
  position: relative;
  z-index:  2;
}

.hp-uk__heading {
  font-family:    'Inter', Helvetica, sans-serif;
  font-weight:    700;
  font-size:      clamp(1.75rem, 4vw, 2.75rem);
  color:          #ffffff;
  letter-spacing: -0.02em;
  line-height:    1.2;
  margin-bottom:  0;
}

.hp-uk__heading--line2 {
  margin-bottom:  1.5rem;
}

.hp-uk__lead {
  font-size:   0.9375rem;
  line-height: 1.75;
  color:       rgb(255, 255, 255);
  max-width:   520px;
}

@media (max-width: 991.98px) {
  .hp-uk__bg {
    background-image: url(../images/Lion-UK15-Mobile.jpg);
  }

  .hp-uk__overlay {
    background: linear-gradient(180deg, rgba(2,6,23,0.88) 0%, rgba(2,6,23,0.5) 100%);
  }
}

/* --------------------------------------------------------------------------
   §8 Finance Control — white BG, centred heading, image tabs
   -------------------------------------------------------------------------- */

.hp-control {
  position:       relative;
  isolation:      isolate;
  background:     #ffffff;
  color:            #000000;
  padding:          0 0 48px;
}

/* Низ секции control → белая волна → блок CTA (как стык light секций на stage2) */
.hp-control::after {
  content:                '';
  position:               absolute;
  left:                   0;
  right:                  0;
  bottom:                 0;
  width:                  100%;
  height:                 41px;
  z-index:                2;
  pointer-events:         none;
  background-image:       var(--hp-divider-white-41);
  background-repeat:      no-repeat;
  background-position:    center bottom;
  background-size:        100% 41px;
}

.hp-control .container-xxl {
  position: relative;
  z-index:  1;
}

.hp-control__heading {
  font-family:   'Inter', Helvetica, sans-serif;
  font-weight:   700;
  font-size:     clamp(1.25rem, 3vw, 2.125rem);
  color:         #000000;
  line-height:   1.3;
  max-width:     720px;
  margin:        0 auto 2rem;
}

.hp-control__panels {
  background:    #ffffff;
  max-width:     960px;
}

.hp-ctrl-tab {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           0.5rem;
  min-width:     10rem;
  max-width:     14rem;
  flex:          1 1 auto;
  padding:       0.65rem 1rem;
  background:    #ffffff;
  border:        1px solid #000000;
  border-radius: 15px;
  color:         #000000;
  font-family:   'Inter', Helvetica, sans-serif;
  font-weight:   600;
  font-size:     0.9375rem;
  cursor:        pointer;
  transition:    background 0.2s, color 0.2s, border-color 0.2s;
}

.hp-ctrl-tab__icon {
  flex-shrink: 0;
  font-size:   1.35rem;
  line-height: 1;
  opacity:     0.85;
}

.hp-ctrl-tab:hover {
  border-color: #000000;
  color:        #000000;
}

.hp-ctrl-tab.active {
  background:   #000000;
  border-color: #000000;
  color:        #ffffff;
}

.hp-ctrl-tab.active .hp-ctrl-tab__icon {
  opacity: 1;
  color:   #ffffff;
}

.hp-ctrl-tab--fluid {
  width: 100%;
}

@media (min-width: 576px) {
  .hp-ctrl-tab--fluid {
    width:     auto;
    min-width: 10rem;
    max-width: 14rem;
  }
}

.hp-control__img {
  max-height: 520px;
  object-fit: contain;
  margin:     0 auto;
  display:    block;
}


/* --------------------------------------------------------------------------
   §9 CTA "Always at your service" — black BG, 50/50 split
   -------------------------------------------------------------------------- */

/* CTA outer frame (et_pb_section_22: белый фон секции + groove) */
.hp-cta-wrap {
  position:       relative;
  isolation:      isolate;
  overflow:       visible;
  background:     #ffffff;
  margin-top:     -1px;
}

.hp-cta-wrap .container-xxl {
  position: relative;
  z-index:  1;
}

.hp-cta {
  position:      relative;
  isolation:     isolate;
  border:        0;
  border-radius: 0;
  overflow:      hidden;
  background:    #000000;
  min-height:    320px;
}

/* Верхний divider именно на блоке CTA, без перекоса на всю секцию */
.hp-cta::before {
  content:             '';
  position:            absolute;
  left:                0;
  right:               0;
  top:                 0;
  width:               100%;
  height:              38px;
  z-index:             3;
  pointer-events:      none;
  background-image:    var(--hp-divider-white-top-38);
  background-repeat:   no-repeat;
  background-position: center top;
  background-size:     100% 38px;
}

/* Левая колонка: наклонная белая карточка «Get in touch!» на чёрном фоне */
.hp-cta__visual {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      320px;
  padding:         2.75rem 1.5rem;
  background:      radial-gradient(ellipse 120% 80% at 50% 100%, #1a1428 0%, #000000 55%);
}

.hp-cta__tilt-wrap {
  perspective:     920px;
  max-width:       100%;
}

.hp-cta__tilt-card {
  position:         relative;
  margin:           0 auto;
  max-width:        17.5rem;
  padding:          2.35rem 1.75rem 2.5rem;
  background:       #ffffff;
  border-radius:    1.25rem;
  box-shadow:       0 28px 70px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  transform:        rotate(-11deg);
  transform-origin: center center;
  transition:       transform 0.35s ease, box-shadow 0.35s ease;
}

.hp-cta__visual:hover .hp-cta__tilt-card {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
}

@media (hover: hover) {
  .hp-cta__visual:hover .hp-cta__tilt-card {
    transform: rotate(-8deg) scale(1.02);
  }
}

@media (hover: hover) and (min-width: 768px) {
  .hp-cta__visual:hover .hp-cta__tilt-card {
    transform: rotate(-7deg) scale(1.02);
  }
}

.hp-cta__tilt-heading {
  margin:        0;
  font-family:   'Inter', Helvetica, sans-serif;
  font-weight:   800;
  font-size:     clamp(1.65rem, 4.2vw, 2.125rem);
  line-height:   1.05;
  letter-spacing: -0.04em;
  color:         #1b1b22;
  text-align:    center;
}

.hp-cta__tilt-line {
  display:     inline;
  white-space: nowrap;
}

.hp-cta__tilt-gap {
  white-space: pre;
}

.hp-cta__tilt-in {
  display:     inline-flex;
  align-items: baseline;
  font-weight: 800;
}

.hp-cta__tilt-i {
  color:       #c72030;
  font-style:  normal;
}

.hp-cta__tilt-n {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  margin-left:     0.02em;
  padding:         0.08em 0.32em 0.12em;
  border-radius:   0.35em;
  background:      #c72030;
  color:           #ffffff;
  font-size:       0.88em;
  line-height:     1;
}

.hp-cta__tilt-semi {
  position:      absolute;
  width:         2.25rem;
  height:        2.25rem;
  border-radius: 50%;
  pointer-events: none;
}

.hp-cta__tilt-semi--bl {
  left:         -0.35rem;
  bottom:       -0.35rem;
  background:   #2a2a32;
  clip-path:    polygon(0 50%, 0 100%, 50% 100%);
}

.hp-cta__tilt-semi--tr {
  right:        -0.35rem;
  top:          -0.35rem;
  background:   #c72030;
  clip-path:    polygon(50% 0, 100% 0, 100% 50%);
}

.hp-cta__panel {
  background:     linear-gradient(165deg, #16141f 0%, #0e0c12 100%);
  padding:        3rem 2rem;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              1.35rem;
}

.hp-cta__icon-link {
  text-decoration: none;
  color:           #ffffff;
}

.hp-cta__icon-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           4.5rem;
  height:          4.5rem;
  border-radius:   12px;
  border:          1px solid rgba(255, 255, 255, 0.08);
  background:      linear-gradient(145deg, #35333d 0%, #232129 100%);
  box-shadow:      0 2px 24px rgba(0,0,0,0.35);
  color:           #fff;
  font-size:       2rem;
  transition:      box-shadow 0.3s ease;
}

.hp-cta__icon-link:hover .hp-cta__icon-box {
  box-shadow: 0 2px 36px rgba(103, 102, 108, 0.5);
}

.hp-cta__heading {
  font-family:  'Inter', Helvetica, sans-serif;
  font-weight:  700;
  font-size:    clamp(1.5rem, 3.5vw, 2.375rem);
  color:        #ffffff !important;
  line-height:  1.2;
  margin:       0;
  text-align:   center;
}

.hp-cta__btn {
  border-width:   2px;
  border-radius:  999px;
  padding:        0.7rem 2.35rem;
  background:     #000000 !important;
  color:          #ffffff !important;
  border-color:   #ffffff !important;
}

.hp-cta__btn:hover {
  background:   #1a1a1f !important;
  color:        #ffffff !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
}

@media (min-width: 768px) {
  .hp-cta {
    min-height: 500px;
  }

  .hp-cta__visual {
    min-height: 500px;
    padding:    3rem 2rem;
  }

  .hp-cta__tilt-card {
    max-width:   19rem;
    padding:     2.65rem 2rem 2.85rem;
    transform:   rotate(-10deg);
  }

  .hp-cta__panel {
    align-items: center;
    padding:     3.5rem 2.5rem 3.5rem 3rem;
    min-height:  500px;
    text-align:  center !important;
  }

  .hp-cta__heading {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .hp-cta__visual {
    min-height: 300px;
    padding:    2.25rem 1.25rem 2.5rem;
  }

  .hp-cta__tilt-card {
    transform: rotate(-8deg);
  }
}

/* --------------------------------------------------------------------------
   Responsive — hero mobile
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .hp-hero {
    height: auto !important;
    min-height: 520px;
  }

  .hp-hero__text {
    padding-top:    calc(var(--rv-navbar-h) + 2rem);
    padding-bottom: 1.5rem;
    text-align:     center;
    align-items:    center;
  }

  .hp-hero__lead { max-width: 100%; }

  .hp-hero__carousel-col {
    height:      auto;
    max-height:  320px;
    overflow:    hidden;
  }

  .hp-hero__slide-img { max-height: 300px; }

  .hp-services { min-height: auto; }

  .hp-fx {
    min-height:            480px;
    padding-bottom:        72px;
    background-image:    url(../images/Trail-Mobile-3.jpg);
    background-position: left 21% top;
    background-size:     cover;
  }

  .hp-fx::after {
    height:          72px;
    background-size: 100% 72px;
  }

  .hp-cards { min-height: auto; }

  .hp-uk { min-height: auto; }

  .hp-uk::after {
    height:          34px;
    background-size: 100% 34px;
  }

  .hp-cta-wrap {
    padding: 1.25rem 0 calc(2rem + 32px);
  }

  .hp-cta::before {
    height:          32px;
    background-size: 100% 32px;
  }

  .hp-control {
    padding-bottom: 44px;
  }

  .hp-control::after {
    height:          36px;
    background-size: 100% 36px;
  }
}

@media (max-width: 767.98px) {
  .hp-logos { justify-content: center; }
  .hp-featured__heading { text-align: center; }

  .hp-app__phones { gap: 0; }
  .hp-app__phone--side { display: none; }
  .hp-app__phone--center { max-height: 380px; }

  .hp-app__owl { padding: 0 2.25rem; }

  .hp-app__slide-frame {
    min-height: 280px;
    transform:  scale(0.92);
  }

  .hp-app__owl .owl-item.center .hp-app__slide-frame {
    transform: scale(1);
  }

  .hp-app__slide-img { max-height: 400px; }
}

/* --------------------------------------------------------------------------
   App carousel dots override (Bootstrap)
   -------------------------------------------------------------------------- */

.hp-carousel-btn {
  width:         40px;
  height:        40px;
  background:    #ffffff;
  border:        none;
  border-radius: 50%;
  box-shadow:    0 2px 12px rgba(0,0,0,0.18);
  font-size:     1rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #000000;
  flex-shrink:   0;
  transition:    box-shadow 0.2s;
}

.hp-carousel-btn:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
}

/* --------------------------------------------------------------------------
   Footer column navigation (hardcoded fallback)
   -------------------------------------------------------------------------- */

.nvb-footer__col-title {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size:      0.75rem !important;
  opacity:        0.55;
}

.nvb-footer__link {
  display:         block;
  color:           rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding:         0.2rem 0;
  transition:      color 0.2s;
}

.nvb-footer__link:hover {
  color: #ffffff;
}